/* KxCMS global stylesheet. Generated by scripts/build_main_css.php; do not edit. */

/* source: toasts.css */
.toastify { text-align: left; }
.toastify.toast-basic { color: #fff; box-shadow: none; border-radius: 2px; }
.toastify.toast-success { background: #198754; }
.toastify.toast-error { background: #dc3545; }
.toastify.toast-warning { background: #d39e00; }
.toastify.toast-info    { background: #0d6efd; }
@keyframes toast-slide-in { from { transform: translateX(140%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(140%); opacity: 0; } }

/* source: 960_24_col.css */
/*
  960 Grid System ~ Core CSS.
  Learn more ~ http://960.gs/

  Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
  min-width: 1200px;
}

/* `Container
----------------------------------------------------------------------------------------------------*/

.container_24 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_1_5,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
  display: inline;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12,
.push_13, .pull_13,
.push_14, .pull_14,
.push_15, .pull_15,
.push_16, .pull_16,
.push_17, .pull_17,
.push_18, .pull_18,
.push_19, .pull_19,
.push_20, .pull_20,
.push_21, .pull_21,
.push_22, .pull_22,
.push_23, .pull_23 {
  position: relative;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

/* `Grid >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .grid_1 {
  width: 270px;
}

.container_24 .grid_1_5 {
  width: 290px;
}

.container_24 .grid_2 {
  width: 310px;
}

.container_24 .grid_3 {
  width: 350px;
}

.container_24 .grid_4 {
  width: 390px;
}

.container_24 .grid_5 {
  width: 430px;
}

.container_24 .grid_6 {
  width: 470px;
}

.container_24 .grid_7 {
  width: 510px;
}

.container_24 .grid_8 {
  width: 550px;
}

.container_24 .grid_9 {
  width: 590px;
}

.container_24 .grid_10 {
  width: 630px;
}

.container_24 .grid_11 {
  width: 670px;
}

.container_24 .grid_12 {
  width: 710px;
}

.container_24 .grid_13 {
  width: 750px;
}

.container_24 .grid_14 {
  width: 790px;
}

.container_24 .grid_15 {
  width: 830px;
}

.container_24 .grid_16 {
  width: 870px;
}

.container_24 .grid_17 {
  width: 910px;
}

.container_24 .grid_18 {
  width: 950px;
}

.container_24 .grid_19 {
  width: 990px;
}

.container_24 .grid_20 {
  width: 1030px;
}

.container_24 .grid_21 {
  width: 1070px;
}

.container_24 .grid_22 {
  width: 1110px;
}

.container_24 .grid_23 {
  width: 1150px;
}

.container_24 .grid_24 {
  width: 1190px;
}

/* `Prefix Extra Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .prefix_1 {
  padding-left: 280px;
}

.container_24 .prefix_2 {
  padding-left: 320px;
}

.container_24 .prefix_3 {
  padding-left: 360px;
}

.container_24 .prefix_4 {
  padding-left: 400px;
}

.container_24 .prefix_5 {
  padding-left: 440px;
}

.container_24 .prefix_6 {
  padding-left: 480px;
}

.container_24 .prefix_7 {
  padding-left: 520px;
}

.container_24 .prefix_8 {
  padding-left: 560px;
}

.container_24 .prefix_9 {
  padding-left: 600px;
}

.container_24 .prefix_10 {
  padding-left: 640px;
}

.container_24 .prefix_11 {
  padding-left: 680px;
}

.container_24 .prefix_12 {
  padding-left: 720px;
}

.container_24 .prefix_13 {
  padding-left: 760px;
}

.container_24 .prefix_14 {
  padding-left: 800px;
}

.container_24 .prefix_15 {
  padding-left: 840px;
}

.container_24 .prefix_16 {
  padding-left: 880px;
}

.container_24 .prefix_17 {
  padding-left: 920px;
}

.container_24 .prefix_18 {
  padding-left: 960px;
}

.container_24 .prefix_19 {
  padding-left: 1000px;
}

.container_24 .prefix_20 {
  padding-left: 1040px;
}

.container_24 .prefix_21 {
  padding-left: 1080px;
}

.container_24 .prefix_22 {
  padding-left: 1120px;
}

.container_24 .prefix_23 {
  padding-left: 1160px;
}

/* `Suffix Extra Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .suffix_1 {
  padding-right: 280px;
}

.container_24 .suffix_2 {
  padding-right: 320px;
}

.container_24 .suffix_3 {
  padding-right: 360px;
}

.container_24 .suffix_4 {
  padding-right: 400px;
}

.container_24 .suffix_5 {
  padding-right: 440px;
}

.container_24 .suffix_6 {
  padding-right: 480px;
}

.container_24 .suffix_7 {
  padding-right: 520px;
}

.container_24 .suffix_8 {
  padding-right: 560px;
}

.container_24 .suffix_9 {
  padding-right: 600px;
}

.container_24 .suffix_10 {
  padding-right: 640px;
}

.container_24 .suffix_11 {
  padding-right: 680px;
}

.container_24 .suffix_12 {
  padding-right: 720px;
}

.container_24 .suffix_13 {
  padding-right: 760px;
}

.container_24 .suffix_14 {
  padding-right: 800px;
}

.container_24 .suffix_15 {
  padding-right: 840px;
}

.container_24 .suffix_16 {
  padding-right: 880px;
}

.container_24 .suffix_17 {
  padding-right: 920px;
}

.container_24 .suffix_18 {
  padding-right: 960px;
}

.container_24 .suffix_19 {
  padding-right: 1000px;
}

.container_24 .suffix_20 {
  padding-right: 1040px;
}

.container_24 .suffix_21 {
  padding-right: 1080px;
}

.container_24 .suffix_22 {
  padding-right: 1120px;
}

.container_24 .suffix_23 {
  padding-right: 1160px;
}

/* `Push Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .push_1 {
  left: 280px;
}

.container_24 .push_2 {
  left: 320px;
}

.container_24 .push_3 {
  left: 360px;
}

.container_24 .push_4 {
  left: 400px;
}

.container_24 .push_5 {
  left: 440px;
}

.container_24 .push_6 {
  left: 480px;
}

.container_24 .push_7 {
  left: 520px;
}

.container_24 .push_8 {
  left: 560px;
}

.container_24 .push_9 {
  left: 600px;
}

.container_24 .push_10 {
  left: 640px;
}

.container_24 .push_11 {
  left: 680px;
}

.container_24 .push_12 {
  left: 720px;
}

.container_24 .push_13 {
  left: 760px;
}

.container_24 .push_14 {
  left: 800px;
}

.container_24 .push_15 {
  left: 840px;
}

.container_24 .push_16 {
  left: 880px;
}

.container_24 .push_17 {
  left: 920px;
}

.container_24 .push_18 {
  left: 960px;
}

.container_24 .push_19 {
  left: 1000px;
}

.container_24 .push_20 {
  left: 1040px;
}

.container_24 .push_21 {
  left: 1080px;
}

.container_24 .push_22 {
  left: 1120px;
}

.container_24 .push_23 {
  left: 1160px;
}

/* `Pull Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .pull_1 {
  left: -280px;
}

.container_24 .pull_2 {
  left: -320px;
}

.container_24 .pull_3 {
  left: -360px;
}

.container_24 .pull_4 {
  left: -400px;
}

.container_24 .pull_5 {
  left: -440px;
}

.container_24 .pull_6 {
  left: -480px;
}

.container_24 .pull_7 {
  left: -520px;
}

.container_24 .pull_8 {
  left: -560px;
}

.container_24 .pull_9 {
  left: -600px;
}

.container_24 .pull_10 {
  left: -640px;
}

.container_24 .pull_11 {
  left: -680px;
}

.container_24 .pull_12 {
  left: -720px;
}

.container_24 .pull_13 {
  left: -760px;
}

.container_24 .pull_14 {
  left: -800px;
}

.container_24 .pull_15 {
  left: -840px;
}

.container_24 .pull_16 {
  left: -880px;
}

.container_24 .pull_17 {
  left: -920px;
}

.container_24 .pull_18 {
  left: -960px;
}

.container_24 .pull_19 {
  left: -1000px;
}

.container_24 .pull_20 {
  left: -1040px;
}

.container_24 .pull_21 {
  left: -1080px;
}

.container_24 .pull_22 {
  left: -1120px;
}

.container_24 .pull_23 {
  left: -1160px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_24:before,
.container_24:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_24:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_24 {
  zoom: 1;
}

/* source: style.css */



/* Conserva el mismo eje de centrado cuando una página necesita scroll. */
html {
    scrollbar-gutter: stable;
}

body {
    background: #25292C;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Cambiado de hidden a auto */
    font: 14px 'Roboto', sans-serif;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
}

/* Solo en la carga inicial del documento: el router SPA nunca recrea este nodo. */
#kx-initial-loader {
    display: none;
}

html.kx-js #kx-initial-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25292C;
}

#kx-initial-loader img {
    display: block;
    width: 99px;
    height: 62px;
}

@keyframes kxSpaProgressBar {
    0% {
        transform: translateX(-42%) scaleX(.18);
    }

    45% {
        transform: translateX(18%) scaleX(.52);
    }

    100% {
        transform: translateX(105%) scaleX(.24);
    }
}

#kx-spa-root {
    position: relative;
    flex: 1 0 auto;
}

#kx-spa-root.kx-spa-leaving {
    pointer-events: none;
}

.kx-navigation-error {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 40px);
    padding: 12px 16px;
    color: #fff;
    background: #15191b;
    border: 1px solid #ffc033;
    border-radius: 4px;
}

.kx-navigation-error button {
    flex: none;
    cursor: pointer;
    padding: 6px 10px;
}

body.kx-spa-leaving-page #kx-spa-root::after,
#kx-spa-root.is-loading::after {
    content: none;
}

html.kx-spa-loading body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 3px;
    pointer-events: none;
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, var(--kx-primary-color, #ff9b00) 24%, var(--kx-primary-color-light, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 72%, #fff)) 54%, var(--kx-primary-color, #ff9b00) 78%, transparent);
    box-shadow: 0 0 10px var(--kx-primary-color-glow, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 46%, transparent)), 0 1px 0 rgba(0, 0, 0, .35);
    animation: kxSpaProgressBar .82s cubic-bezier(.42, 0, .2, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
    html.kx-spa-loading body::before {
        animation: none;
    }
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
      background: #3e3e3e;
}

::-webkit-scrollbar-track {
      background: #303030;
}

.clear {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

.username-readable {
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.78),
        0 0 1px rgba(0, 0, 0, 0.95),
        0 0 1px rgba(255, 255, 255, 0.40),
        0 0 3px rgba(255, 255, 255, 0.18);
}

#header-content {
    background:
        var(--kx-header-image-url, url(../img/header.png)) var(--kx-header-image-repeat, no-repeat) var(--kx-header-image-position, center -296px),
        linear-gradient(to top,
            rgba(32, 36, 38, 1) 0%,       /* Color oscuro en la parte inferior */
            rgba(45, 50, 55, 0.85) 35%,   /* Gris oscuro más suave */
            rgba(60, 65, 70, 0.6) 60%,    /* Un poco más claro y menos denso */
            rgba(80, 85, 90, 0.3) 85%,    /* Tono más suave y menos intrusivo */
            rgba(100, 105, 110, 0.05) 95%,/* Transparencia más ligera */
            rgba(32, 36, 38, 0) 100%     /* Totalmente transparente al final */
        );
    height: 160px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    image-rendering: pixelated;
    position: relative;
    background: var(--kx-header-image-url, url(../img/header.png)) var(--kx-header-image-repeat, no-repeat) var(--kx-header-image-position, center -296px), var(--kx-header-gradient, linear-gradient(to top, rgba(32, 36, 38, 1) 0%, rgba(45, 50, 55, 0.85) 35%, rgba(60, 65, 70, 0.6) 60%, rgba(80, 85, 90, 0.3) 85%, rgba(100, 105, 110, 0.05) 95%, rgba(32, 36, 38, 0) 100%));
}

#header-content .sub-menu {
    background: rgba(0, 0, 0, .3);
    padding: 5px 10px;
    position: absolute;
    right: 0;
    border-bottom-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    font-size: 13px;
}

#header-content .sub-menu a {
    color: #fff;
    text-decoration: none;
}

#header-content .logo {
    background: none;
    position: absolute;
    margin-top: 30px;
    height: 73px;
    width: 197px;
    overflow: visible;
    isolation: isolate;
}

#header-content .logo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--kx-site-logo-url, url(../img/kabbixlogo_big_beta.png)) no-repeat center center;
    background-size: contain;
    transform-origin: center center;
    pointer-events: none;
    will-change: filter;
}

#header-content .logo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    background-repeat: no-repeat;
    -webkit-mask-image: var(--kx-site-logo-url, url(../img/kabbixlogo_big_beta.png));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-image: var(--kx-site-logo-url, url(../img/kabbixlogo_big_beta.png));
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    animation-duration: var(--kx-logo-effect-duration, 4s);
    animation-timing-function: var(--kx-logo-effect-easing, ease-in-out);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    will-change: opacity, background-position, box-shadow, filter;
}

#header-content .logo.kx-logo-effect-none::after {
    display: none;
}

#header-content .logo.kx-logo-effect-border-dash::after,
#header-content .logo.kx-logo-effect-marquee::after {
    inset: -12px;
    border-radius: 12px;
    -webkit-mask-image: none;
    mask-image: none;
}

#header-content .logo.kx-logo-effect-aura-soft::after,
#header-content .logo.kx-logo-effect-aura-pulse::after,
#header-content .logo.kx-logo-effect-outer-aura::after,
#header-content .logo.kx-logo-effect-energy-ring::after,
#header-content .logo.kx-logo-effect-halo-ring::after,
#header-content .logo.kx-logo-effect-perimeter-glow::after {
    display: none;
}

#header-content .logo.kx-logo-effect-aura-soft::before {
    animation: kxLogoImageAuraSoft var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-aura-pulse::before {
    animation: kxLogoImageAuraPulse var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-outer-aura::before {
    animation: kxLogoImageAuraStrong var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-energy-ring::before {
    animation: kxLogoImageEnergyRing var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-halo-ring::before {
    animation: kxLogoImageHaloRing var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, linear) infinite both;
}

#header-content .logo.kx-logo-effect-perimeter-glow::before {
    animation: kxLogoImagePerimeterGlow var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-underlight::after,
#header-content .logo.kx-logo-effect-toplight::after,
#header-content .logo.kx-logo-effect-radar-sweep::after,
#header-content .logo.kx-logo-effect-energy-ring::after,
#header-content .logo.kx-logo-effect-halo-ring::after,
#header-content .logo.kx-logo-effect-crown-light::after,
#header-content .logo.kx-logo-effect-stage-spotlight::after,
#header-content .logo.kx-logo-effect-orbit-flare::after,
#header-content .logo.kx-logo-effect-perimeter-glow::after {
    inset: -30px;
    border-radius: 28px;
    -webkit-mask-image: none;
    mask-image: none;
}

#header-content .onlineCount {
    position: absolute;
    z-index: 2;
    margin-top: 80px;
    width: 197px;
    text-align: center;
    font-size: 13px;
}

#header-content .onlineCount span {
    color: var(--kx-primary-color, #ff9b00);
}

@keyframes moveSideToSide {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}

#header-content .checkIn {
    background: rgba(32, 160, 91, .95);
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    height: 32px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid rgba(78, 235, 145, .48);
    border-radius: 4px;
    position: absolute;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 4px 10px rgba(0, 0, 0, .28);
    right: 4px;
    margin-top: 58px;
    font: 700 11px 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.kx-ceo-console-button {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2147483001;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 9px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 171, 50, .52);
    border-radius: 3px;
    background: rgba(16, 19, 21, .94);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .4);
    color: rgba(255, 206, 122, .96);
    cursor: pointer;
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: .65px;
    line-height: 1;
    text-transform: uppercase;
}

.kx-ceo-console-button:hover,
.kx-ceo-console-button:focus {
    border-color: rgba(255, 218, 143, .9);
    background: rgba(47, 37, 23, .98);
    color: #fff2cd;
}

.kx-ceo-console-button[aria-expanded="true"] {
    opacity: 0;
    pointer-events: none;
}

.kx-ceo-console[hidden] {
    display: none;
}

.kx-ceo-console {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: flex;
    padding: 0;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .94);
}

.kx-ceo-console-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, .94);
}

.kx-ceo-console-close {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 14px;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 3px;
    background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
    font: 700 21px/22px Arial, sans-serif;
}

.kx-ceo-console-close:hover,
.kx-ceo-console-close:focus {
    border-color: rgba(255, 171, 50, .72);
    color: #fff;
}

.kx-ceo-console-note {
    margin: 0;
    padding: 10px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: rgba(223, 225, 225, .82);
    font-size: 12px;
}

.kx-ceo-console-output {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 54px 16px 76px;
    overflow: auto;
    background: transparent;
    color: #d7dee7;
    font: 12px/1.5 Consolas, 'Courier New', monospace;
    word-break: break-word;
}

.kx-ceo-console-line {
    display: block;
    padding: 6px 10px;
    border-left: 3px solid rgba(148, 163, 184, .6);
    border-radius: 2px;
    background: rgba(148, 163, 184, .07);
    color: #d7dee7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.kx-ceo-console-line--error {
    border-left-color: #f07178;
    background: rgba(240, 113, 120, .12);
    color: #ffd8da;
}

.kx-ceo-console-line--warning {
    border-left-color: #e3b341;
    background: rgba(227, 179, 65, .12);
    color: #ffe5a6;
}

.kx-ceo-console-line--info {
    border-left-color: #58a6ff;
    background: rgba(88, 166, 255, .1);
    color: #cfe5ff;
}

.kx-ceo-console-line--debug {
    border-left-color: #a371f7;
    background: rgba(163, 113, 247, .1);
    color: #e3d5ff;
}

.kx-ceo-console-line--empty {
    border-left-color: rgba(148, 163, 184, .35);
    color: rgba(215, 222, 231, .7);
    font-family: 'Roboto Condensed', sans-serif;
}

.kx-ceo-console-tabs {
    position: absolute;
    top: 12px;
    right: 54px;
    z-index: 2;
    display: inline-flex;
    gap: 5px;
}

.kx-ceo-console-tab {
    min-height: 26px;
    padding: 0 9px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 171, 50, .52);
    border-radius: 3px;
    background: rgba(16, 19, 21, .94);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .4);
    color: rgba(255, 206, 122, .96);
    cursor: pointer;
    font: 700 10px/1 'Roboto Condensed', sans-serif;
    letter-spacing: .65px;
    text-transform: uppercase;
}

.kx-ceo-console-tab.is-active {
    background: rgba(47, 37, 23, .98);
    border-color: rgba(255, 218, 143, .9);
    color: #fff2cd;
}

.kx-ceo-console-tab:hover:not(:disabled),
.kx-ceo-console-tab:focus-visible {
    background: rgba(47, 37, 23, .98);
    border-color: rgba(255, 218, 143, .9);
    color: #fff2cd;
    outline: none;
}

.kx-ceo-console-tab:disabled {
    border-color: rgba(255, 171, 50, .3);
    background: rgba(16, 19, 21, .72);
    color: rgba(255, 206, 122, .48);
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .kx-ceo-console-output {
        font-size: 11px;
    }
}

#header-content .logo.kx-logo-effect-aura-soft::after {
    background:
        radial-gradient(ellipse at center, transparent 42%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 58%, transparent 78%),
        radial-gradient(ellipse at center, var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent 74%);
    animation-name: kxLogoFxFadePulse;
}

#header-content .logo.kx-logo-effect-aura-pulse::after {
    background:
        radial-gradient(ellipse at center, transparent 34%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 58%, transparent 82%),
        radial-gradient(ellipse at center, var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent 76%);
    animation-name: kxLogoFxBloom;
}

#header-content .logo.kx-logo-effect-gold-outline::after {
    background: radial-gradient(ellipse at center, transparent 30%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 58%, transparent 78%);
    animation-name: kxLogoFxOutlinePulse;
}

#header-content .logo.kx-logo-effect-edge-glow::after {
    background: radial-gradient(ellipse at center, transparent 18%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 64%, transparent 82%);
    animation-name: kxLogoFxOutlinePulse;
}

#header-content .logo.kx-logo-effect-gold-outline::before,
#header-content .logo.kx-logo-effect-edge-glow::before,
#header-content .logo.kx-logo-effect-neon-frame::before,
#header-content .logo.kx-logo-effect-royal-frame::before {
    animation: kxLogoImageDropGlow var(--kx-logo-effect-duration, 4s) var(--kx-logo-effect-easing, ease-in-out) infinite both;
}

#header-content .logo.kx-logo-effect-neon-frame::after {
    background: linear-gradient(90deg, transparent, rgba(98,230,255,.34), var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent);
    background-size: 220% 100%;
    animation-name: kxLogoFxNeonFrame;
}

#header-content .logo.kx-logo-effect-royal-frame::after {
    background: linear-gradient(100deg, transparent, rgba(180,120,255,.34), var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent);
    background-size: 220% 100%;
    animation-name: kxLogoFxNeonFrame;
}

#header-content .logo.kx-logo-effect-underlight::after {
    background:
        radial-gradient(ellipse at bottom, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 0%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 34%, transparent 70%),
        linear-gradient(to top, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 58%);
    animation-name: kxLogoFxUnderlight;
}

#header-content .logo.kx-logo-effect-toplight::after {
    background:
        radial-gradient(ellipse at top, rgba(255,255,255,.58) 0%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 32%, transparent 70%),
        linear-gradient(to bottom, rgba(255,255,255,.18), transparent 58%);
    animation-name: kxLogoFxUnderlight;
}

#header-content .logo.kx-logo-effect-shine-sweep::after,
#header-content .logo.kx-logo-effect-glass-sheen::after {
    background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,.36) 48%, transparent 58%, transparent 100%);
    background-size: 260% 100%;
    animation-name: kxLogoFxSweep;
}

#header-content .logo.kx-logo-effect-sweep-slow::after,
#header-content .logo.kx-logo-effect-sweep-normal::after,
#header-content .logo.kx-logo-effect-sweep-fast::after {
    background:
        linear-gradient(112deg, transparent 0%, transparent 34%, rgba(255,255,255,.58) 44%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 50%, rgba(255,255,255,.3) 57%, transparent 70%, transparent 100%),
        radial-gradient(ellipse at center, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 72%);
    background-size: 260% 100%, 100% 100%;
    animation-name: kxLogoFxGeneralSweep;
}

#header-content .logo.kx-logo-effect-sweep-slow::after {
    animation-duration: 7s;
}

#header-content .logo.kx-logo-effect-sweep-normal::after {
    animation-duration: 4s;
}

#header-content .logo.kx-logo-effect-sweep-fast::after {
    animation-duration: 2.4s;
}

#header-content .logo.kx-logo-effect-holo-sheen::after {
    background:
        linear-gradient(110deg, transparent 0%, rgba(74,216,255,.52) 26%, rgba(255,93,232,.48) 45%, rgba(255,225,74,.5) 62%, rgba(96,255,194,.32) 74%, transparent 100%),
        radial-gradient(ellipse at center, rgba(255,255,255,.18), transparent 72%);
    background-size: 260% 100%, 100% 100%;
    animation-name: kxLogoFxStrongSweep;
}

#header-content .logo.kx-logo-effect-soft-rainbow::after {
    background:
        linear-gradient(108deg, transparent 0%, rgba(74,216,255,.46) 27%, rgba(255,93,232,.44) 43%, rgba(255,225,74,.5) 58%, rgba(96,255,194,.34) 70%, transparent 88%),
        radial-gradient(ellipse at center, rgba(255,255,255,.16), transparent 70%);
    background-size: 260% 100%, 100% 100%;
    animation-name: kxLogoFxStrongSweep;
}

#header-content .logo.kx-logo-effect-rare-glint::after,
#header-content .logo.kx-logo-effect-royal-shine::after {
    background:
        linear-gradient(110deg, transparent 0%, transparent 29%, rgba(255,255,255,.62) 42%, var(--kx-primary-color-light, #ffd27a) 49%, rgba(255,255,255,.38) 56%, transparent 70%, transparent 100%),
        radial-gradient(ellipse at center, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 72%);
    background-size: 260% 100%, 100% 100%;
    animation-name: kxLogoFxStrongSweep;
}

#header-content .logo.kx-logo-effect-diamond-spark::after {
    background:
        linear-gradient(112deg, transparent 0%, rgba(125,238,255,.18) 31%, rgba(255,255,255,.72) 47%, rgba(125,238,255,.42) 56%, transparent 74%),
        radial-gradient(ellipse at center, rgba(125,238,255,.38), transparent 70%);
    background-size: 260% 100%, 100% 100%;
    animation-name: kxLogoFxStrongSweep;
}

#header-content .logo.kx-logo-effect-corner-spark::after {
    background:
        linear-gradient(100deg, transparent 0%, rgba(255,255,255,.7) 38%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 48%, rgba(255,255,255,.44) 58%, transparent 76%),
        linear-gradient(280deg, transparent 0%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 35%, rgba(255,255,255,.5) 52%, transparent 72%),
        radial-gradient(ellipse at center, var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent 74%);
    background-size: 260% 100%, 240% 100%, 100% 100%;
    animation-name: kxLogoFxCornerFlash;
}

#header-content .logo.kx-logo-effect-starfield::after {
    background:
        linear-gradient(112deg, transparent 0%, rgba(255,255,255,.38) 36%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 50%, rgba(255,255,255,.24) 62%, transparent 78%),
        radial-gradient(ellipse at center, var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent 72%);
    background-size: 220% 100%, 100% 100%;
    animation-name: kxLogoFxSoftSweep;
}

#header-content .logo.kx-logo-effect-pixel-spark::after {
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.36) 18% 22%, transparent 22% 46%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 46% 52%, transparent 52% 100%),
        linear-gradient(0deg, transparent 0 24%, rgba(255,255,255,.26) 24% 29%, transparent 29% 70%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 70% 76%, transparent 76% 100%);
    background-size: 34px 100%, 100% 26px;
    animation-name: kxLogoFxPixelPulse;
}

#header-content .logo.kx-logo-effect-pixel-grid::after {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(0deg, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 0 2px, transparent 2px 9px),
        radial-gradient(ellipse at center, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 70%);
    background-size: 18px 100%, 100% 18px, 100% 100%;
    animation-name: kxLogoFxPixelGrid;
}

#header-content .logo.kx-logo-effect-pixel-cells::after {
    background:
        linear-gradient(90deg, rgba(255,255,255,.0) 0 12%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 12% 18%, transparent 18% 38%, rgba(255,255,255,.32) 38% 44%, transparent 44% 100%),
        linear-gradient(0deg, transparent 0 14%, rgba(255,255,255,.22) 14% 20%, transparent 20% 50%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 50% 58%, transparent 58% 100%);
    background-size: 26px 26px, 38px 34px;
    animation-name: kxLogoFxPixelCells;
}

#header-content .logo.kx-logo-effect-inner-sparks::after {
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.75) 0 2px, transparent 5px),
        radial-gradient(circle at 38% 68%, var(--kx-primary-color-light, #ffd27a) 0 2px, transparent 6px),
        radial-gradient(circle at 62% 32%, rgba(255,255,255,.58) 0 2px, transparent 5px),
        radial-gradient(circle at 78% 70%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 0 3px, transparent 7px),
        radial-gradient(circle at 50% 50%, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 70%);
    background-size: 100% 100%;
    animation-name: kxLogoFxInnerSparks;
}

#header-content .logo.kx-logo-effect-inner-glitch::after {
    background:
        linear-gradient(0deg, transparent 0 18%, rgba(74,216,255,.42) 18% 23%, transparent 23% 46%, rgba(255,93,232,.36) 46% 52%, transparent 52% 76%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 76% 82%, transparent 82%),
        radial-gradient(ellipse at center, rgba(255,255,255,.16), transparent 70%);
    background-size: 100% 32px, 100% 100%;
    animation-name: kxLogoFxInnerGlitch;
}

#header-content .logo.kx-logo-effect-inner-current::after {
    background:
        radial-gradient(ellipse at 22% 48%, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 26%),
        radial-gradient(ellipse at 52% 52%, rgba(255,255,255,.34), transparent 22%),
        radial-gradient(ellipse at 78% 48%, var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent 26%);
    background-size: 100% 100%;
    animation-name: kxLogoFxInnerCurrent;
}

#header-content .logo.kx-logo-effect-chroma-glitch::before,
#header-content .logo.kx-logo-effect-rgb-split::before,
#header-content .logo.kx-logo-effect-phase-shift::before,
#header-content .logo.kx-logo-effect-signal-jitter::before,
#header-content .logo.kx-logo-effect-ghost-frame::before {
    animation: kxLogoImageRgbSplit var(--kx-logo-effect-duration, 4s) steps(5, end) infinite both;
}

#header-content .logo.kx-logo-effect-chroma-glitch::after {
    background:
        linear-gradient(0deg, transparent 0 16%, rgba(0,245,255,.5) 16% 21%, transparent 21% 39%, rgba(255,42,171,.48) 39% 44%, transparent 44% 66%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 66% 72%, transparent 72% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, transparent 1px 6px);
    background-size: 100% 34px, 13px 100%;
    animation-name: kxLogoFxChromaGlitch;
}

#header-content .logo.kx-logo-effect-signal-break::after {
    background:
        linear-gradient(0deg, transparent 0 12%, rgba(255,255,255,.64) 12% 15%, transparent 15% 31%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 31% 35%, transparent 35% 58%, rgba(96,255,194,.42) 58% 61%, transparent 61% 100%),
        linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.18) 46% 50%, transparent 50% 100%);
    background-size: 100% 28px, 32px 100%;
    animation-name: kxLogoFxSignalBreak;
}

#header-content .logo.kx-logo-effect-data-corrupt::after {
    background:
        repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.18) 8px 10px, transparent 10px 18px, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 18px 21px, transparent 21px 32px),
        repeating-linear-gradient(0deg, transparent 0 12px, rgba(96,255,194,.24) 12px 14px, transparent 14px 28px);
    background-size: 64px 100%, 100% 42px;
    animation-name: kxLogoFxDataCorrupt;
}

#header-content .logo.kx-logo-effect-rgb-split::after {
    background:
        linear-gradient(90deg, rgba(0,245,255,.34), transparent 28%, transparent 72%, rgba(255,42,171,.32)),
        radial-gradient(ellipse at center, rgba(255,255,255,.12), transparent 72%);
    background-size: 100% 100%;
    animation-name: kxLogoFxRgbSplit;
}

#header-content .logo.kx-logo-effect-static-pulse::after {
    background:
        repeating-radial-gradient(circle at 22% 36%, rgba(255,255,255,.2) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 1px, transparent 1px 5px),
        radial-gradient(ellipse at center, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 72%);
    background-size: 19px 19px, 23px 23px, 100% 100%;
    animation-name: kxLogoFxStaticPulse;
}

#header-content .logo.kx-logo-effect-phase-shift::after {
    background:
        linear-gradient(90deg, rgba(0,245,255,.42) 0 18%, transparent 18% 42%, rgba(255,42,171,.38) 42% 58%, transparent 58% 82%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 82%),
        linear-gradient(0deg, transparent 0 22%, rgba(255,255,255,.18) 22% 27%, transparent 27% 68%, rgba(0,245,255,.22) 68% 74%, transparent 74%);
    background-size: 100% 100%, 100% 24px;
    animation-name: kxLogoFxPhaseShift;
}

#header-content .logo.kx-logo-effect-scan-tear::after {
    background:
        linear-gradient(0deg, transparent 0 10%, rgba(255,255,255,.6) 10% 13%, transparent 13% 27%, rgba(0,245,255,.34) 27% 30%, transparent 30% 49%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 49% 53%, transparent 53% 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5px);
    background-size: 100% 38px, 100% 10px;
    animation-name: kxLogoFxScanTear;
}

#header-content .logo.kx-logo-effect-signal-jitter::after {
    background:
        linear-gradient(90deg, transparent 0 24%, rgba(0,245,255,.44) 24% 30%, transparent 30% 52%, rgba(255,42,171,.38) 52% 58%, transparent 58% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 7px);
    background-size: 42px 100%, 18px 100%;
    animation-name: kxLogoFxSignalJitter;
}

#header-content .logo.kx-logo-effect-ghost-frame::after {
    background:
        radial-gradient(ellipse at 46% 50%, rgba(0,245,255,.28), transparent 48%),
        radial-gradient(ellipse at 54% 50%, rgba(255,42,171,.24), transparent 48%),
        linear-gradient(0deg, transparent 0 34%, rgba(255,255,255,.22) 34% 39%, transparent 39% 100%);
    background-size: 100% 100%, 100% 100%, 100% 30px;
    animation-name: kxLogoFxGhostFrame;
}

#header-content .logo.kx-logo-effect-codec-error::after {
    background:
        linear-gradient(90deg, rgba(255,255,255,.0) 0 12%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 12% 18%, transparent 18% 34%, rgba(0,245,255,.34) 34% 39%, transparent 39% 64%, rgba(255,42,171,.32) 64% 70%, transparent 70%),
        linear-gradient(0deg, transparent 0 18%, rgba(255,255,255,.28) 18% 22%, transparent 22% 58%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 58% 64%, transparent 64%);
    background-size: 48px 28px, 34px 40px;
    animation-name: kxLogoFxCodecError;
}

#header-content .logo.kx-logo-effect-ember-dust::after {
    background:
        radial-gradient(ellipse at center, rgba(255,83,33,.34), transparent 65%),
        linear-gradient(110deg, transparent, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent);
    background-size: 100% 100%, 240% 100%;
    animation-name: kxLogoFxWarmFlare;
}

#header-content .logo.kx-logo-effect-confetti-soft::after,
#header-content .logo.kx-logo-effect-holiday-lights::after {
    background:
        linear-gradient(90deg, rgba(255,207,77,.0), rgba(255,207,77,.38), rgba(96,214,255,.34), rgba(255,98,207,.32), rgba(255,207,77,0)),
        radial-gradient(ellipse at center, rgba(255,255,255,.18), transparent 68%);
    background-size: 240% 100%, 100% 100%;
    animation-name: kxLogoFxPartyGlow;
}

#header-content .logo.kx-logo-effect-snow-light::after {
    background:
        linear-gradient(105deg, transparent, rgba(210,240,255,.42), rgba(255,255,255,.28), transparent),
        radial-gradient(ellipse at center, rgba(210,240,255,.22), transparent 68%);
    background-size: 240% 100%, 100% 100%;
    animation-name: kxLogoFxColdSweep;
}

#header-content .logo.kx-logo-effect-scanline::after,
#header-content .logo.kx-logo-effect-crt-scan::after {
    background:
        linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.48) 47%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 50%, transparent 58%),
        radial-gradient(ellipse at center, rgba(255,255,255,.1), transparent 70%);
    background-size: 100% 180%, 100% 100%;
    animation-name: kxLogoFxWideScanline;
}

#header-content .logo.kx-logo-effect-terminal-scan::after {
    background:
        linear-gradient(to bottom, transparent 0%, rgba(88,255,193,.68) 48%, rgba(88,255,193,.28) 52%, transparent 60%),
        radial-gradient(ellipse at center, rgba(88,255,193,.18), transparent 72%);
    background-size: 100% 190%, 100% 100%;
    animation-name: kxLogoFxWideScanline;
}

#header-content .logo.kx-logo-effect-retro-noise::after {
    background:
        radial-gradient(ellipse at center, rgba(255,255,255,.28), transparent 66%),
        linear-gradient(115deg, transparent 0%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 44%, rgba(255,255,255,.34) 52%, transparent 70%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px);
    background-size: 100% 100%, 230% 100%, 100% 9px;
    animation-name: kxLogoFxRetroFlare;
}

#header-content .logo.kx-logo-effect-digital-rain::after,
#header-content .logo.kx-logo-effect-circuit-lines::after {
    background:
        linear-gradient(90deg, transparent 0%, rgba(86,255,191,.0) 24%, rgba(86,255,191,.54) 48%, rgba(255,255,255,.24) 54%, transparent 76%),
        radial-gradient(ellipse at center, rgba(86,255,191,.18), transparent 70%);
    background-size: 230% 100%, 100% 100%;
    animation-name: kxLogoFxTechnicalSweep;
}

#header-content .logo.kx-logo-effect-radar-sweep::after {
    background:
        radial-gradient(ellipse at center, transparent 42%, rgba(96,255,194,.32) 56%, transparent 72%),
        conic-gradient(from 0deg at 50% 50%, transparent 0 74%, rgba(96,255,194,.42) 77%, rgba(255,255,255,.26) 80%, transparent 86% 100%);
    animation-name: kxLogoFxOrbit;
}

#header-content .logo.kx-logo-effect-energy-ring::after {
    border: 1px solid rgba(96,255,194,.36);
    box-shadow: 0 0 12px rgba(96,255,194,.24), inset 0 0 16px rgba(96,255,194,.14);
    animation-name: kxLogoFxEnergy;
}

#header-content .logo.kx-logo-effect-border-dash::after {
    background:
        linear-gradient(90deg, var(--kx-primary-color, #ff9b00) 50%, transparent 0) 0 0 / 18px 1px repeat-x,
        linear-gradient(90deg, var(--kx-primary-color, #ff9b00) 50%, transparent 0) 0 100% / 18px 1px repeat-x,
        linear-gradient(0deg, var(--kx-primary-color, #ff9b00) 50%, transparent 0) 0 0 / 1px 18px repeat-y,
        linear-gradient(0deg, var(--kx-primary-color, #ff9b00) 50%, transparent 0) 100% 0 / 1px 18px repeat-y;
    animation-name: kxLogoFxBorderDash;
}

#header-content .logo.kx-logo-effect-marquee::after {
    background:
        radial-gradient(circle, var(--kx-primary-color-light, #ffd27a) 0 2px, transparent 3px) 0 0 / 18px 7px repeat-x,
        radial-gradient(circle, var(--kx-primary-color, #ff9b00) 0 2px, transparent 3px) 0 100% / 18px 7px repeat-x,
        radial-gradient(circle, var(--kx-primary-color-light, #ffd27a) 0 2px, transparent 3px) 0 0 / 7px 18px repeat-y,
        radial-gradient(circle, var(--kx-primary-color, #ff9b00) 0 2px, transparent 3px) 100% 0 / 7px 18px repeat-y;
    animation-name: kxLogoFxMarqueeLights;
}

#header-content .logo.kx-logo-effect-outer-aura::after {
    inset: -40px;
    background:
        radial-gradient(ellipse at center, transparent 30%, var(--kx-primary-color-glow, rgba(255,155,0,.46)) 50%, transparent 74%),
        radial-gradient(ellipse at center, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 82%);
    animation-name: kxLogoFxOuterAura;
}

#header-content .logo.kx-logo-effect-halo-ring::after {
    inset: -34px;
    border: 1px solid var(--kx-primary-color-soft, rgba(255,155,0,.24));
    box-shadow: 0 0 14px var(--kx-primary-color-glow, rgba(255,155,0,.46)), inset 0 0 18px var(--kx-primary-color-faint, rgba(255,155,0,.14));
    animation-name: kxLogoFxHaloRing;
}

#header-content .logo.kx-logo-effect-crown-light::after {
    inset: -38px;
    background:
        radial-gradient(ellipse at 50% 5%, rgba(255,255,255,.62), transparent 24%),
        radial-gradient(ellipse at 50% 20%, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 58%);
    animation-name: kxLogoFxCrownLight;
}

#header-content .logo.kx-logo-effect-stage-spotlight::after {
    inset: -42px;
    background:
        radial-gradient(ellipse at 10% 72%, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 36%),
        radial-gradient(ellipse at 90% 72%, rgba(255,255,255,.42), transparent 36%),
        radial-gradient(ellipse at center, var(--kx-primary-color-faint, rgba(255,155,0,.14)), transparent 78%);
    animation-name: kxLogoFxStageSpotlight;
}

#header-content .logo.kx-logo-effect-orbit-flare::after {
    inset: -36px;
    background:
        radial-gradient(circle at 50% 0%, var(--kx-primary-color-light, #ffd27a) 0 4px, transparent 13px),
        conic-gradient(from 0deg at 50% 50%, transparent 0 62%, var(--kx-primary-color-soft, rgba(255,155,0,.24)) 67%, transparent 74% 100%),
        radial-gradient(ellipse at center, transparent 38%, var(--kx-primary-color-faint, rgba(255,155,0,.14)) 58%, transparent 76%);
    animation-name: kxLogoFxOrbit;
}

#header-content .logo.kx-logo-effect-perimeter-glow::after {
    inset: -24px;
    border: 1px solid var(--kx-primary-color-glow, rgba(255,155,0,.46));
    box-shadow:
        0 0 10px var(--kx-primary-color-soft, rgba(255,155,0,.24)),
        0 0 22px var(--kx-primary-color-faint, rgba(255,155,0,.14)),
        inset 0 0 14px var(--kx-primary-color-soft, rgba(255,155,0,.24));
    animation-name: kxLogoFxPerimeterGlow;
}

#header-content .logo.kx-logo-effect-sunset-glow::after {
    background:
        radial-gradient(ellipse at bottom, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 60%),
        linear-gradient(105deg, transparent, rgba(255,70,110,.38), var(--kx-primary-color-soft, rgba(255,155,0,.24)), transparent);
    background-size: 100% 100%, 230% 100%;
    animation-name: kxLogoFxSunset;
}

#header-content .logo.kx-logo-effect-calm-bloom::after {
    background:
        radial-gradient(ellipse at center, var(--kx-primary-color-glow, rgba(255,155,0,.46)), transparent 62%),
        linear-gradient(115deg, transparent, rgba(255,255,255,.3), transparent);
    background-size: 100% 100%, 220% 100%;
    animation-name: kxLogoFxIntenseBloom;
}

#header-content .logo.kx-logo-effect-alert-flash::after {
    background:
        radial-gradient(ellipse at center, rgba(255,60,60,.55), transparent 64%),
        linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
    background-size: 100% 100%, 220% 100%;
    animation-name: kxLogoFxAlert;
}

@keyframes kxLogoFxFadePulse {
    0%, 100% { opacity: .22; filter: blur(1px); }
    50% { opacity: .82; filter: blur(3px); }
}

@keyframes kxLogoFxBloom {
    0%, 100% { opacity: .2; filter: blur(1px) brightness(1); }
    50% { opacity: .9; filter: blur(4px) brightness(1.15); }
}

@keyframes kxLogoFxOutlinePulse {
    0%, 100% { opacity: .24; }
    50% { opacity: .82; }
}

@keyframes kxLogoImageDropGlow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 8px var(--kx-primary-color-glow, rgba(255,155,0,.46))); }
}

@keyframes kxLogoImageAuraSoft {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 5px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    50% {
        filter:
            drop-shadow(0 0 4px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 9px var(--kx-primary-color-soft, rgba(255,155,0,.24)));
    }
}

@keyframes kxLogoImageAuraPulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 6px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    42% {
        filter:
            drop-shadow(0 0 5px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 12px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 18px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    68% {
        filter:
            drop-shadow(0 0 3px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 8px var(--kx-primary-color-soft, rgba(255,155,0,.24)));
    }
}

@keyframes kxLogoImageAuraStrong {
    0%, 100% {
        filter:
            drop-shadow(0 0 3px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 8px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    50% {
        filter:
            drop-shadow(0 0 5px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 14px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 24px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
}

@keyframes kxLogoImageEnergyRing {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px rgba(96,255,194,.3))
            drop-shadow(0 0 6px rgba(96,255,194,.16));
    }
    45% {
        filter:
            drop-shadow(0 0 4px rgba(96,255,194,.58))
            drop-shadow(0 0 10px rgba(96,255,194,.34))
            drop-shadow(0 0 18px rgba(96,255,194,.18));
    }
    72% {
        filter:
            drop-shadow(0 0 3px rgba(255,255,255,.42))
            drop-shadow(0 0 8px rgba(96,255,194,.28));
    }
}

@keyframes kxLogoImageHaloRing {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 6px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    33% {
        filter:
            drop-shadow(0 0 4px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 12px var(--kx-primary-color-soft, rgba(255,155,0,.24)));
    }
    66% {
        filter:
            drop-shadow(0 0 3px rgba(255,255,255,.36))
            drop-shadow(0 0 10px var(--kx-primary-color-soft, rgba(255,155,0,.24)));
    }
}

@keyframes kxLogoImagePerimeterGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 7px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
    50% {
        filter:
            drop-shadow(0 0 4px var(--kx-primary-color-glow, rgba(255,155,0,.46)))
            drop-shadow(0 0 11px var(--kx-primary-color-soft, rgba(255,155,0,.24)))
            drop-shadow(0 0 18px var(--kx-primary-color-faint, rgba(255,155,0,.14)));
    }
}

@keyframes kxLogoFxNeonFrame {
    0% { opacity: .16; background-position: 130% 0; }
    45% { opacity: .7; }
    58% { opacity: .42; }
    100% { opacity: .16; background-position: -60% 0; }
}

@keyframes kxLogoFxUnderlight {
    0%, 100% { opacity: .2; filter: blur(1px); }
    50% { opacity: .82; filter: blur(3px); }
}

@keyframes kxLogoFxSweep {
    0% { opacity: 0; background-position: 140% 0; }
    25% { opacity: .62; }
    55% { opacity: .36; }
    100% { opacity: 0; background-position: -80% 0; }
}

@keyframes kxLogoFxGeneralSweep {
    0% { opacity: 0; background-position: 145% 0, 0 0; filter: brightness(1); }
    18% { opacity: .82; filter: brightness(1.16); }
    42% { opacity: .34; }
    100% { opacity: 0; background-position: -80% 0, 0 0; filter: brightness(1); }
}

@keyframes kxLogoFxStrongSweep {
    0% { opacity: 0; background-position: 145% 0, 0 0; filter: brightness(1); }
    16% { opacity: .92; filter: brightness(1.18); }
    38% { opacity: .5; }
    100% { opacity: 0; background-position: -85% 0, 0 0; filter: brightness(1); }
}

@keyframes kxLogoFxSoftSweep {
    0% { opacity: 0; background-position: 140% 0, 0 0; }
    24% { opacity: .5; }
    58% { opacity: .22; }
    100% { opacity: 0; background-position: -70% 0, 0 0; }
}

@keyframes kxLogoFxWarmFlare {
    0%, 100% { opacity: .16; background-position: 0 0, 130% 0; filter: brightness(1); }
    40% { opacity: .76; background-position: 0 0, 20% 0; filter: brightness(1.12); }
    70% { opacity: .28; background-position: 0 0, -60% 0; }
}

@keyframes kxLogoFxColdSweep {
    0% { opacity: 0; background-position: 135% 0, 0 0; }
    35% { opacity: .68; }
    100% { opacity: 0; background-position: -75% 0, 0 0; }
}

@keyframes kxLogoFxPartyGlow {
    0% { opacity: 0; background-position: 145% 0, 0 0; filter: saturate(1); }
    30% { opacity: .72; filter: saturate(1.35); }
    62% { opacity: .34; }
    100% { opacity: 0; background-position: -80% 0, 0 0; filter: saturate(1); }
}

@keyframes kxLogoFxWideScanline {
    0% { opacity: 0; background-position: 0 -120%, 0 0; }
    24% { opacity: .74; }
    46% { opacity: .38; }
    100% { opacity: 0; background-position: 0 150%, 0 0; }
}

@keyframes kxLogoFxTechnicalSweep {
    0% { opacity: 0; background-position: 140% 0, 0 0; }
    28% { opacity: .72; filter: brightness(1.12); }
    58% { opacity: .32; }
    100% { opacity: 0; background-position: -75% 0, 0 0; filter: brightness(1); }
}

@keyframes kxLogoFxRetroFlare {
    0%, 100% { opacity: .16; background-position: 0 0, 145% 0, 0 0; filter: contrast(1); }
    30% { opacity: .78; background-position: 0 0, 22% 0, 0 8px; filter: contrast(1.25) brightness(1.14); }
    55% { opacity: .3; background-position: 0 0, -55% 0, 0 16px; }
}

@keyframes kxLogoFxSunset {
    0%, 100% { opacity: .12; background-position: 0 0, 130% 0; }
    42% { opacity: .78; background-position: 0 0, 15% 0; filter: brightness(1.08); }
    70% { opacity: .32; background-position: 0 0, -65% 0; }
}

@keyframes kxLogoFxIntenseBloom {
    0%, 100% { opacity: .12; filter: blur(1px) brightness(1); background-position: 0 0, 130% 0; }
    38% { opacity: .86; filter: blur(2px) brightness(1.16); background-position: 0 0, 15% 0; }
    68% { opacity: .32; background-position: 0 0, -60% 0; }
}

@keyframes kxLogoFxCornerFlash {
    0%, 100% {
        opacity: 0;
        background-position: 145% 0, -70% 0, 0 0;
        filter: brightness(1);
    }
    16% {
        opacity: .88;
        background-position: 42% 0, 20% 0, 0 0;
        filter: brightness(1.22);
    }
    36% {
        opacity: .18;
        background-position: -70% 0, 115% 0, 0 0;
    }
    58% {
        opacity: .7;
        background-position: 118% 0, 42% 0, 0 0;
        filter: brightness(1.16);
    }
    82% {
        opacity: .12;
        background-position: -60% 0, 130% 0, 0 0;
    }
}

@keyframes kxLogoFxSparkle {
    0%, 100% { opacity: .12; filter: brightness(1); }
    20% { opacity: .72; filter: brightness(1.25); }
    48% { opacity: .22; }
    70% { opacity: .58; }
}

@keyframes kxLogoFxStars {
    0% { opacity: .16; background-position: 0 0, 12px 8px, 3px 4px; }
    50% { opacity: .58; background-position: 9px 7px, 3px 16px, 17px 9px; }
    100% { opacity: .16; background-position: 18px 14px, -6px 24px, 31px 18px; }
}

@keyframes kxLogoFxSnow {
    0% { opacity: .18; background-position: 0 -10px, 18px -18px; }
    50% { opacity: .46; }
    100% { opacity: .18; background-position: 0 34px, 18px 28px; }
}

@keyframes kxLogoFxScanline {
    0% { opacity: .12; background-position: 0 -40px; }
    50% { opacity: .44; }
    100% { opacity: .12; background-position: 0 95px; }
}

@keyframes kxLogoFxNoise {
    0%, 100% { opacity: .1; background-position: 0 0, 4px 4px; }
    25% { opacity: .28; background-position: 7px 3px, 0 9px; }
    50% { opacity: .16; background-position: 3px 8px, 8px 1px; }
    75% { opacity: .24; background-position: 9px 0, 2px 5px; }
}

@keyframes kxLogoFxDigital {
    0% { opacity: .12; background-position: 0 -40px, 0 0; }
    50% { opacity: .42; }
    100% { opacity: .12; background-position: 0 40px, 20px 0; }
}

@keyframes kxLogoFxRadar {
    0% { opacity: .08; transform: rotate(0deg); }
    50% { opacity: .42; }
    100% { opacity: .08; transform: rotate(360deg); }
}

@keyframes kxLogoFxOrbit {
    0% { opacity: .24; transform: rotate(0deg); filter: brightness(1); }
    45% { opacity: .78; filter: brightness(1.12); }
    100% { opacity: .24; transform: rotate(360deg); filter: brightness(1); }
}

@keyframes kxLogoFxEnergy {
    0%, 100% { opacity: .18; box-shadow: 0 0 8px rgba(96,255,194,.16), inset 0 0 10px rgba(96,255,194,.1); }
    50% { opacity: .72; box-shadow: 0 0 20px rgba(96,255,194,.34), inset 0 0 18px rgba(96,255,194,.18); }
}

@keyframes kxLogoFxBorderDash {
    0% { opacity: .22; background-position: 0 0, 0 100%, 0 0, 100% 0; }
    50% { opacity: .7; }
    100% { opacity: .22; background-position: 36px 0, -36px 100%, 0 -36px, 100% 36px; }
}

@keyframes kxLogoFxMarqueeLights {
    0% { opacity: .26; background-position: 0 0, 0 100%, 0 0, 100% 0; filter: brightness(1); }
    35% { opacity: .88; filter: brightness(1.18); }
    100% { opacity: .26; background-position: 36px 0, -36px 100%, 0 -36px, 100% 36px; filter: brightness(1); }
}

@keyframes kxLogoFxPixelPulse {
    0%, 100% { opacity: .12; background-position: 0 0, 0 0; filter: brightness(1); }
    24% { opacity: .66; background-position: 14px 0, 0 10px; filter: brightness(1.2); }
    52% { opacity: .22; background-position: 28px 0, 0 20px; }
    78% { opacity: .58; background-position: 42px 0, 0 30px; }
}

@keyframes kxLogoFxPixelGrid {
    0%, 100% {
        opacity: .1;
        background-position: 0 0, 0 0, 0 0;
        filter: brightness(1);
    }
    20% {
        opacity: .52;
        background-position: 5px 0, 0 4px, 0 0;
        filter: brightness(1.14);
    }
    46% {
        opacity: .24;
        background-position: 10px 0, 0 8px, 0 0;
    }
    72% {
        opacity: .62;
        background-position: 2px 0, 0 13px, 0 0;
        filter: brightness(1.18);
    }
}

@keyframes kxLogoFxPixelCells {
    0%, 100% {
        opacity: .08;
        background-position: 0 0, 0 0;
        filter: brightness(1);
    }
    18% {
        opacity: .62;
        background-position: 7px 4px, -5px 3px;
        filter: brightness(1.2);
    }
    40% {
        opacity: .18;
        background-position: 16px 11px, 6px -4px;
    }
    64% {
        opacity: .55;
        background-position: -6px 9px, 13px 8px;
    }
}

@keyframes kxLogoFxInnerSparks {
    0%, 100% {
        opacity: .08;
        filter: brightness(1);
        transform: scale(1);
    }
    12% {
        opacity: .76;
        filter: brightness(1.22);
    }
    30% {
        opacity: .18;
        transform: scale(1.01);
    }
    52% {
        opacity: .62;
        filter: brightness(1.18);
    }
    74% {
        opacity: .24;
        transform: scale(.995);
    }
}

@keyframes kxLogoFxInnerGlitch {
    0%, 100% {
        opacity: .06;
        background-position: 0 0, 0 0;
        filter: hue-rotate(0deg) brightness(1);
    }
    18% {
        opacity: .58;
        background-position: 0 -7px, 0 0;
        filter: hue-rotate(12deg) brightness(1.16);
    }
    22% {
        opacity: .2;
        background-position: 0 11px, 0 0;
    }
    44% {
        opacity: .64;
        background-position: 0 18px, 0 0;
        filter: hue-rotate(-10deg) brightness(1.18);
    }
    48% {
        opacity: .16;
    }
    70% {
        opacity: .48;
        background-position: 0 -15px, 0 0;
    }
}

@keyframes kxLogoFxInnerCurrent {
    0%, 100% {
        opacity: .12;
        filter: blur(.2px) brightness(1);
        transform: scale(.99);
    }
    36% {
        opacity: .7;
        filter: blur(1px) brightness(1.16);
        transform: scale(1.01);
    }
    64% {
        opacity: .32;
        filter: blur(.4px) brightness(1.06);
    }
}

@keyframes kxLogoImageRgbSplit {
    0%, 100% { filter: none; }
    16% { filter: drop-shadow(2px 0 0 rgba(0,245,255,.46)) drop-shadow(-2px 0 0 rgba(255,42,171,.4)); }
    18% { filter: none; }
    42% { filter: drop-shadow(-2px 0 0 rgba(0,245,255,.38)) drop-shadow(2px 0 0 rgba(255,42,171,.34)); }
    45% { filter: none; }
    72% { filter: drop-shadow(1px 0 0 rgba(0,245,255,.32)) drop-shadow(-1px 0 0 rgba(255,42,171,.28)); }
}

@keyframes kxLogoFxChromaGlitch {
    0%, 100% { opacity: .04; background-position: 0 0, 0 0; filter: brightness(1); }
    14% { opacity: .64; background-position: 0 -8px, 7px 0; filter: brightness(1.18); }
    18% { opacity: .16; background-position: 0 12px, -5px 0; }
    38% { opacity: .7; background-position: 0 18px, 10px 0; filter: brightness(1.2); }
    42% { opacity: .1; }
    66% { opacity: .48; background-position: 0 -14px, -8px 0; }
}

@keyframes kxLogoFxSignalBreak {
    0%, 100% { opacity: .06; background-position: 0 0, 0 0; filter: brightness(1); }
    12% { opacity: .72; background-position: 0 -9px, 8px 0; filter: brightness(1.24) contrast(1.08); }
    16% { opacity: .2; background-position: 0 13px, -6px 0; }
    36% { opacity: .58; background-position: 0 21px, 14px 0; }
    40% { opacity: .08; }
    74% { opacity: .5; background-position: 0 -18px, -12px 0; }
}

@keyframes kxLogoFxDataCorrupt {
    0%, 100% { opacity: .08; background-position: 0 0, 0 0; filter: brightness(1); }
    20% { opacity: .6; background-position: 11px 0, 0 -8px; filter: brightness(1.16); }
    25% { opacity: .18; }
    48% { opacity: .54; background-position: -17px 0, 0 14px; }
    53% { opacity: .12; }
    76% { opacity: .46; background-position: 23px 0, 0 -19px; }
}

@keyframes kxLogoFxRgbSplit {
    0%, 100% { opacity: .04; transform: translate(0, 0); }
    16% { opacity: .52; transform: translate(1px, 0); filter: brightness(1.18); }
    18% { opacity: .18; transform: translate(-1px, 0); }
    43% { opacity: .58; transform: translate(-1px, 0); }
    47% { opacity: .08; transform: translate(0, 0); }
    70% { opacity: .38; }
}

@keyframes kxLogoFxStaticPulse {
    0%, 100% { opacity: .08; background-position: 0 0, 0 0, 0 0; filter: brightness(1); }
    15% { opacity: .58; background-position: 7px 2px, -5px 4px, 0 0; filter: brightness(1.12); }
    21% { opacity: .18; background-position: -3px 8px, 9px -4px, 0 0; }
    44% { opacity: .52; background-position: 12px -6px, 4px 10px, 0 0; filter: brightness(1.16); }
    49% { opacity: .12; }
    73% { opacity: .42; background-position: -8px 12px, -10px 6px, 0 0; }
}

@keyframes kxLogoFxPhaseShift {
    0%, 100% { opacity: .05; background-position: 0 0, 0 0; filter: hue-rotate(0deg) brightness(1); }
    13% { opacity: .62; background-position: 8px 0, 0 -7px; filter: hue-rotate(16deg) brightness(1.18); }
    17% { opacity: .12; background-position: -6px 0, 0 10px; }
    39% { opacity: .58; background-position: -10px 0, 0 18px; filter: hue-rotate(-14deg) brightness(1.16); }
    44% { opacity: .08; }
    71% { opacity: .44; background-position: 12px 0, 0 -14px; }
}

@keyframes kxLogoFxScanTear {
    0%, 100% { opacity: .05; background-position: 0 0, 0 0; filter: brightness(1); }
    11% { opacity: .7; background-position: 0 -10px, 0 0; filter: contrast(1.12) brightness(1.2); }
    15% { opacity: .18; background-position: 0 14px, 0 -3px; }
    33% { opacity: .62; background-position: 0 25px, 0 4px; }
    38% { opacity: .1; }
    67% { opacity: .48; background-position: 0 -19px, 0 8px; }
}

@keyframes kxLogoFxSignalJitter {
    0%, 100% { opacity: .06; background-position: 0 0, 0 0; filter: brightness(1); }
    10% { opacity: .64; background-position: 14px 0, 6px 0; filter: brightness(1.18); }
    14% { opacity: .16; background-position: -8px 0, -4px 0; }
    31% { opacity: .54; background-position: 22px 0, 11px 0; }
    36% { opacity: .08; }
    63% { opacity: .46; background-position: -18px 0, -9px 0; }
}

@keyframes kxLogoFxGhostFrame {
    0%, 100% { opacity: .05; filter: brightness(1); }
    18% { opacity: .52; filter: saturate(1.25) brightness(1.12); }
    22% { opacity: .14; }
    46% { opacity: .46; background-position: 0 0, 0 0, 0 12px; }
    51% { opacity: .1; }
    75% { opacity: .36; background-position: 0 0, 0 0, 0 -10px; }
}

@keyframes kxLogoFxCodecError {
    0%, 100% { opacity: .06; background-position: 0 0, 0 0; filter: brightness(1); }
    16% { opacity: .64; background-position: 11px 7px, -6px 4px; filter: brightness(1.2) contrast(1.08); }
    21% { opacity: .14; }
    43% { opacity: .56; background-position: -17px 12px, 10px -8px; }
    49% { opacity: .08; }
    69% { opacity: .48; background-position: 24px -6px, -14px 13px; }
}

@keyframes kxLogoFxOuterAura {
    0%, 100% { opacity: .2; filter: blur(2px) brightness(1); transform: scale(.98); }
    50% { opacity: .92; filter: blur(5px) brightness(1.16); transform: scale(1.03); }
}

@keyframes kxLogoFxHaloRing {
    0% { opacity: .2; transform: rotate(0deg) scale(.98); }
    50% { opacity: .84; transform: rotate(180deg) scale(1.02); }
    100% { opacity: .2; transform: rotate(360deg) scale(.98); }
}

@keyframes kxLogoFxCrownLight {
    0%, 100% { opacity: .18; filter: blur(1px); }
    42% { opacity: .86; filter: blur(3px) brightness(1.12); }
    68% { opacity: .34; }
}

@keyframes kxLogoFxStageSpotlight {
    0%, 100% { opacity: .18; filter: blur(2px); }
    35% { opacity: .78; filter: blur(4px) brightness(1.1); }
    62% { opacity: .34; }
}

@keyframes kxLogoFxPerimeterGlow {
    0%, 100% {
        opacity: .24;
        box-shadow: 0 0 8px var(--kx-primary-color-soft, rgba(255,155,0,.24)), 0 0 16px var(--kx-primary-color-faint, rgba(255,155,0,.14)), inset 0 0 10px var(--kx-primary-color-soft, rgba(255,155,0,.24));
    }
    50% {
        opacity: .88;
        box-shadow: 0 0 16px var(--kx-primary-color-glow, rgba(255,155,0,.46)), 0 0 30px var(--kx-primary-color-soft, rgba(255,155,0,.24)), inset 0 0 20px var(--kx-primary-color-glow, rgba(255,155,0,.46));
    }
}

@keyframes kxLogoFxAlert {
    0%, 100% { opacity: 0; }
    12% { opacity: .55; }
    22% { opacity: .05; }
    34% { opacity: .38; }
    50% { opacity: 0; }
}

#header-content .checkIn:hover {
    color: #fff;
    border-color: rgba(91, 248, 160, .58);
    background: rgba(37, 176, 101, .98);
    text-decoration: none;
}

#header-content .checkIn i {
    margin-left: 2px;
}




#header-menu {
    background: rgba(0, 0, 0, .3);
    height: 50px;
    width: 100%;
    margin-bottom: 0;
}

#header-menu .icon {
    margin-right: 10px;
}

#header-menu .icon-right {
    margin-left: 10px;
}

#header-menu .user-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
    position: absolute;
    left: 5px;
    top: 0;
    z-index: 9;
}

#header-menu .user-menu li {
    float: left;
    line-height: 50px;
}

#header-menu .user-menu li .avatar-look {
    background: center -20px;
    height: 50px;
    width: 40px;
    position: absolute;
    top: 0;
}

#header-menu .user-menu li a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .3s, color .3s;
    padding: 15.8px 20px;
    cursor: pointer;
}

#header-menu .user-menu li a:hover {
    color: var(--kx-primary-color, #ff9b00);
    background: rgba(0, 0, 0, .2);
}

#header-menu .user-menu li a span {
    margin-left: 30px;
}

#header-menu .header-menu {
    float: right;
    list-style-type: none;
    margin: 0;
    padding: 15px 4px 17px 0;
}

#header-menu .header-menu li {
    float: left;
    display: inline-block;
}

#header-menu .header-menu li a {
    padding: 16.4px 20px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .3s, color .3s;
}

#header-menu .header-menu li a:hover {
    color: var(--kx-primary-color, #ff9b00);
    background: rgba(0, 0, 0, .2);
}

#sub-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    float: none;
    margin-bottom: 0;
    height: 32px;
}

#sub-menu li {
    float: none;
    padding: 0 20px;
    line-height: 32px;
}

#sub-menu li a,
#sub-menu li .kx-submenu-link {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: color .3s;
}

#sub-menu li .kx-submenu-form {
    display: inline;
    margin: 0;
}

#sub-menu li .kx-submenu-link {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

#sub-menu li a:hover,
#sub-menu li .kx-submenu-link:hover {
    color: var(--kx-primary-color, #ff9b00);
}

#sub-menu li a.selected {
    font-weight: bold;
    pointer-events: none;
    color: var(--kx-primary-color, #ff9b00);
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /* Sombra leve */
}


h2.title {
    font: 400 25px 'Roboto Condensed', sans-serif;
    margin-bottom: 10px;
    margin-top: 0px;
    text-transform: uppercase;
    position: relative;
}

#contentBox {
    background: rgba(0, 0, 0, .35);
    margin-bottom: 10px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    position: relative;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
    color: rgba(255, 255, 255, .7);
}

#contentBox .title {
    background: rgba(0, 0, 0, .22);
    padding: 15px 20px;
    font: 400 22px 'Roboto Condensed', sans-serif;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    border-top-left-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    text-transform: uppercase;
    color: #fff;
}

#contentBox .title.small {
    background: rgba(0, 0, 0, .22);
    padding: 10px 15px;
    font: 400 20px 'Roboto Condensed', sans-serif;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    border-top-left-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    text-transform: uppercase;
    color: #fff;
}


#contentBox .png5 {
    padding: 5px;
}

#contentBox .png10 {
    padding: 10px;
}

#contentBox .png15 {
    padding: 15px;
}

#contentBox .png20 {
    padding: 20px;
}

#contentBox h3 {
    font-weight: 300;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
}

#contentBox .footerBottomBox {
    background: rgba(0, 0, 0, .2);
    border-bottom-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    height: 60px;
    width: 100%;
    border-top: 2px dashed rgba(255, 255, 255, .05);
    position: relative;
}

/* Contenedor principal del slider */
#newsSlider {
    position: relative;
    height: 240px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
    overflow: hidden; /* asegurar recorte */
}

/* Estilo base para cada slide (siempre en el DOM) */
.newsSlide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background-position: left center;
    background-size: cover;
    background-color: #15191b;
    border-radius: 2px;
    color: #fff;

    /* Siempre presentes, pero ocultos */
    opacity: 0;
    visibility: hidden;

    /* Transición combinada: primero visibilidad, luego opacidad */
    transition:
        visibility 0s linear 0.6s, /* espera 0.6s antes de ocultarse */
        opacity    0.6s ease-in-out;
    z-index: 0;
}

/* Slide “activo” */
.newsSlide::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0, 0, 0, .08);
    pointer-events: none;
    z-index: 0;
}

.newsSlide.active {
    visibility: visible;       /* inmediato */
    opacity: 1;                /* fade-in */
    transition-delay: 0s;      /* sin retardo al mostrarse */
    z-index: 1;                /* encima de los demás */
}

/* Título */
.newsSlide .title {
    position: relative;
    z-index: 1;
    font-size: 25px;
    font-weight: 500;
    margin: 40px 0 0 25px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Descripción */
.newsSlide .desc {
    position: relative;
    z-index: 1;
    max-width: 72%;
    font-size: 14px;
    font-weight: 100;
    line-height: 1.35;
    margin: 10px 0 0 25px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.newsSlideCover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

html.kx-js #newsSlider[data-news-preparation="pending"] .newsSlide {
    visibility: hidden;
    opacity: 0;
    transition: none;
}

html.kx-js #newsSlider[data-news-preparation="pending"]::after {
    content: "Preparando noticias…";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #15191b;
    color: rgba(255, 255, 255, .65);
    font: 400 14px 'Roboto', sans-serif;
    border-radius: 2px;
}

.newsSlide--empty::after {
    display: none;
}

.newsSlideMeta {
    position: absolute;
    z-index: 1;
    left: 25px;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: calc(100% - 235px);
    color: rgba(255, 255, 255, .9);
    font: 800 13px 'Roboto Condensed', sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 8px rgba(0, 0, 0, .35);
    white-space: nowrap;
}

.newsSlideMeta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.newsSlideMeta strong {
    color: #fff;
}

.newsSlideMeta .fa {
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
}

.newsSlide .readMore {
    z-index: 1;
    background: rgba(24, 132, 76, .88);
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 28px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid rgba(57, 205, 124, .34);
    border-radius: 4px;
    position: absolute;
    bottom: 26px;
    right: 14px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 4px 10px rgba(0, 0, 0, .28);
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.newsSlide .readMore:hover {
    color: #fff;
    border-color: rgba(78, 235, 145, .48);
    background: rgba(32, 160, 91, .95);
    text-decoration: none;
}

.newsSlide.newsSlide--empty {
    background-color: #15191b;
}

.newsSlide.newsSlide--empty .desc {
    color: rgba(255, 255, 255, .72);
}

@media (prefers-reduced-motion: reduce) {
    .newsSlide {
        transition: none;
    }
}


.Alert {
    background: rgba(0, 0, 0, .6);
    padding: 10px;
    border-radius: 2px;
	height: 75px;
    -webkit-border-radius: 2px;
    margin-bottom: 10px;
}

.Alert .warning {
    color: #f1c40f;
    float: left;
    margin-top: 4px;
}

.Alert p {
    width: 835px;
    position: absolute;
    right: 15px;
    margin-top: 0px;
    font-size: 13px;
}

.slides {
    top: 20px;
    position: absolute;
    left: 25px;
}

.switch {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: rgba(255,255,255,0.3);
    float: left;
    margin-right: 5px;
    cursor: pointer;
}

.switch.active {
    background: #fff;
}

#newsSlides .newsSlide .darkBox .readMore {
    background: rgba(24, 132, 76, .88);
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 28px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid rgba(57, 205, 124, .34);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    position: absolute;
    bottom: 26px;
    right: 14px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 4px 10px rgba(0, 0, 0, .28);
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.meContentBox .checkIn {
    background: rgba(0, 0, 0, .28);
    padding: 0 12px;
    color: #fff;
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: .7px;
    text-transform: uppercase;
    outline: none;
    transition: opacity .18s ease;
    text-decoration: none;
    position: absolute;
    right: 86px;
    top: 28px;
    width: 164px;
    height: 58px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 2px;
    box-shadow: none;
}

.meContentBox .checkIn:hover {
    color: #fff;
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-faint, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 14%, transparent));
}

#kx-spa-root > .kx-submenu-shell {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    z-index: 30;
    height: 32px;
    margin: 0;
    pointer-events: none;
}

#kx-spa-root > .kx-submenu-shell .grid_24 {
    height: 32px;
    pointer-events: none;
}

#kx-spa-root > .kx-submenu-shell #sub-menu {
    pointer-events: auto;
}

#kx-spa-root:has(> .kx-submenu-shell) {
    padding-top: 46px;
}

#profile-spa-root > .container_24:first-child:has(#sub-menu) {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    z-index: 30;
    height: 32px;
    margin: 0 auto;
    pointer-events: none;
}

#profile-spa-root > .container_24:first-child:has(#sub-menu) .grid_24 {
    height: 32px;
    pointer-events: none;
}

#profile-spa-root > .container_24:first-child:has(#sub-menu) #sub-menu {
    pointer-events: auto;
}

#profile-spa-root:has(> .container_24:first-child #sub-menu) {
    padding-top: 46px;
}

.profile-submenu-shell {
    position: relative;
    padding-top: 46px;
}

.profile-submenu-shell > .container_24:first-child:has(#sub-menu) {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    z-index: 30;
    height: 32px;
    margin: 0 auto;
    pointer-events: none;
}

.profile-submenu-shell > .container_24:first-child:has(#sub-menu) .grid_24 {
    height: 32px;
    pointer-events: none;
}

.profile-submenu-shell > .container_24:first-child:has(#sub-menu) #sub-menu {
    pointer-events: auto;
}

.meContentBox .icon {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.meContentBox .checkIn .icon {
    height: 58px;
    width: 28px;
    border-radius: 2px;
    margin-bottom: 0;
    flex: 0 0 28px;
    color: rgba(255, 255, 255, .72);
    background: transparent;
    border: 0;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.meContentBox .checkIn:hover .icon {
    color: #fff;
}

.meContentBox .icon .vip {
    height: 50px;
    width: 60px;
}

.meContentBox .count.vip {
    color: #e9eaea;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    line-height: 1.05;
    text-align: left;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .65);
}

.meContentBox .count.vip .senior-title {
    color: var(--kx-primary-color, #ffa600);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.meContentBox .count.vip .senior-days {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.kx-senior-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: #dce5ea;
    font-size: 34px;
    text-shadow:
        1px 1px 0 #050607,
        -1px 1px 0 #050607,
        0 2px 0 rgba(0, 0, 0, .65);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(220, 229, 234, .22);
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 -1px 0 rgba(0, 0, 0, .45);
    vertical-align: middle;
}

.kx-senior-badge--offer {
    align-self: center;
    margin: 2px 0 0;
}

.kx-senior-badge--checkin {
    width: 24px;
    height: 24px;
    font-size: 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
}


.hotcampaigns {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.hotcampaigns li {
    position: relative;
    color: #fff;
    padding-left: 50px;
    height: 60px;
    background: #292d2f;
    padding: 10px;
}

.hotcampaigns li .hotcampaigns-image {
    background: no-repeat center center;
	background-size: cover;
    height: 60px;
    width: 150px;
    position: absolute;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}

.hotcampaigns li .hotcampaigns-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 0;
    margin-top: 10px;
    margin-left: 160px;
}

.hotcampaigns li .hotcampaigns-desc {
    margin-bottom: 5px;
    font-weight: 100;
    margin-left: 160px;
    width: 200px;
}

.hotcampaigns li .hotcampaigns-readMore {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-decoration: none;
    color: #fff;
}

.hotcampaigns li .hotcampaigns-readMore:hover {
    text-decoration: underline;
}

.hotcampaigns li:nth-last-child(odd) {
    background: #181A1C;
    padding: 10px;
}

.hotcampaigns li:last-child {
    border-bottom-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
}

.info {
background-color: #616365;
text-align:left;
opacity:0.95;
color: #FFF;
padding: 10px;
border-radius: 2px;
margin-bottom: 10px;
}

.ajus {
float: right;
margin-top: -25px;
background-color: #29405B;
padding: 10px;
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
}

.ajus:hover {
background-color: #344B65;
}

.helpCenter span {
    font-size: 13px;
    line-height: 1.2;
}

.helpCenter .txt {
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, .8);
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    height: 90px;
    font-family: Open Sans;
    font-weight: 500;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    background: #F0F0F0;
    border: none;
    resize: none;
    outline: none;
}

.helpCenter #submit {
    width: 100%;
    font-size: 13px;
    height: 50px;
    line-height: 50px;
}

#footer-content {
    color: rgba(255, 255, 255, .3);
    font-size: 13px;
    text-align: center;
    flex: 0 0 auto;
    margin-bottom: 20px;
	margin-top: 10px;
    line-height: 1.45;
}

#footer-content .footer-copy {
    display: block;
    margin-bottom: 8px;
}

#footer-content .quick-links {
    margin-top: 0;
}

#footer-content .quick-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 30px;
}

#footer-content .quick-links li {
    margin: 0;
}

#footer-content .quick-links a {
    color: #707070;
    text-decoration: none;
    transition: color 0.3s;
}

#footer-content .quick-links a:hover {
    color: #fff;
}

.itemContainer {
    list-style-type: none;
    padding: 0;
    margin-left: 2px;
    margin-top: 2px;
    overflow-y: auto;
    max-height: 193px;
    min-height: 193px;
    display: flex;
    flex-direction: column;
}

.itemContainer:has(> .itemList[data-kx-item-grid="1"]) {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.itemContainer:has(> .itemList[data-kx-item-grid="1"])::-webkit-scrollbar {
    display: none;
}

.itemList {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: flex-start; /
}

.item {
    width: 43px;
    height: 43px;
    left: 5px;
	padding: 0px;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10%;
    margin: 1.55px;
    position: relative;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s ease;
}

.item:hover {
    box-shadow: 0 0 3px rgba(0, 255, 255, 1), 0 0 3px rgba(0, 255, 255, 1); /* Resplandor celeste azulado fino */
}

.item-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: white;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    padding: 2px;
}

.itemContainer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

.item-selected {
    box-shadow: 0 0 .104166667in rgba(0, 123, 255, .5);
    animation: borderPulse 2s infinite;
}

.kx-item-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .07), rgba(255, 255, 255, .035));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
    box-sizing: border-box;
    box-shadow: none;
}

.kx-item-skeleton:hover {
    box-shadow: none;
}

html.kx-js .itemList[data-kx-fake-loading="items"]:not([data-kx-loading-applied="1"]) {
    visibility: hidden;
}

.kx-content-reveal {
    animation: kxContentReveal .18s ease-out both;
}

.kx-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    height: 28px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .88);
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, color .2s ease;
}

.kx-action-button:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
    text-decoration: none;
}

.kx-action-button:disabled,
.kx-action-button.disabled,
.kx-action-button.is-disabled {
    opacity: .82;
    cursor: not-allowed;
    box-shadow: none;
}


.function {
    background: #2a2a2a;
    color: #fff;
	margin-bottom: 6px;
    padding: 10px 0;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    width: 100%;
    transition: background 0.3s;
}

.function:hover {
    background: #d27600;
}

.function:active {
    background: #444;
}

.vip-tag {
    display: inline-block;
    background-color: gold;
    color: black;
    padding: 2px 6px;
    margin-left: 5px;
    border-radius: 4px;
    font-size: 12px;
    }

.error-message {
    height: 195px; /* Altura del contenedor */
    display: flex; /* Usar flexbox */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    text-align: center; /* Centrar el texto */
}

#list-users {
    list-style-type: none; /* Elimina los estilos de lista */
    margin: 0; /* Elimina márgenes */
    padding: 0; /* Elimina relleno */
    position: relative; /* Posicionamiento relativo para el contenedor */
    overflow-y: auto; /* Permite el desplazamiento vertical */
    overflow-x: hidden; /* Oculta el desplazamiento horizontal */
    height: 250px; /* Altura del contenedor */
}

/* Real image preparation: text remains usable while each media frame settles. */
.kx-media-frame {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
    background: rgba(255, 255, 255, .055);
    border-radius: 2px;
}

.kx-media-frame > .kx-media-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

.kx-media-frame.is-loaded > .kx-media-image {
    opacity: 1;
}

.kx-media-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 12px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    text-align: center;
}

.kx-media-frame.is-loaded .kx-media-placeholder {
    display: none;
}

.kx-media-frame.is-fallback > .kx-media-image {
    visibility: hidden;
}

.kx-media-image-inline[data-kx-media-state="pending"],
.kx-media-image-inline[data-kx-media-state="fallback"] {
    opacity: 0;
}

.kx-media-inline-fallback {
    position: absolute;
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: -18px;
    border-radius: 2px;
    color: #ffba59;
    background: #252b2e;
    font: 14px/1 sans-serif;
    vertical-align: middle;
    z-index: 1;
}

.kx-media-inline-fallback[hidden] {
    display: none;
}

/* Estados vacíos y errores compartidos por todos los listados de usuarios. */
#list-users > p,
#list-users > .error-message {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    min-height: 100%;
    padding: 15px;
    text-align: center;
    width: 100%;
}

#list-users > .error-message p {
    margin: 0;
}

#list-users > br {
    display: none;
}

#list-users li {
    clear: both; /* Asegura que no haya solapamientos */
    padding: 0 15px; /* Espaciado lateral */
    width: 100%; /* Ancho completo del contenedor */
    height: 60px; /* Altura de cada elemento */
    border-bottom: 1px solid rgba(255, 255, 255, .03); /* Borde inferior */
    position: relative; /* Permite posicionar elementos dentro */
}

#list-users li:nth-last-child(odd) {
    background: rgba(0, 0, 0, .1); /* Fondo alternativo para filas impares */
}

#list-users li:last-child {
    border-bottom: none; /* Elimina el borde en el último elemento */
}

#list-users .image {
    height: 60px; /* Altura del avatar */
    width: 65px; /* Ancho del avatar */
    margin-left: -10px; /* Margen negativo */
    background-position: center; /* Centra la imagen del avatar */
    background-repeat: no-repeat; /* Sin repetición de imagen */
}

#list-users .kx-list-user-avatar {
    position: relative;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

#list-users .kx-list-user-avatar-layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    transition: none;
}

#list-users .kx-list-user-avatar-hover {
    opacity: 0;
}

#list-users li:hover .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-default,
#list-users li:focus-within .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-default,
#list-users li.kx-list-user-row-hover .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-default {
    opacity: 0;
}

#list-users li:hover .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-hover,
#list-users li:focus-within .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-hover,
#list-users li.kx-list-user-row-hover .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-hover {
    opacity: 1;
}

.kx-hover-avatar {
    position: relative;
    overflow: hidden;
    background-image: none !important;
}

.kx-hover-avatar-layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: inherit;
    transition: none;
}

.kx-hover-avatar-hover {
    opacity: 0;
}

.kx-hover-avatar.kx-hover-avatar-hover-ready:hover .kx-hover-avatar-default,
a:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-default,
.detailsBox:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-default,
.senado-seat:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-default,
.senado-seat:focus-visible .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-default {
    opacity: 0;
}

.kx-hover-avatar.kx-hover-avatar-hover-ready:hover .kx-hover-avatar-hover,
a:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-hover,
.detailsBox:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-hover,
.senado-seat:hover .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-hover,
.senado-seat:focus-visible .kx-hover-avatar.kx-hover-avatar-hover-ready .kx-hover-avatar-hover {
    opacity: 1;
}

#list-users li .details {
    position: absolute; /* Posicionamiento absoluto para controlar la ubicación */
    margin-left: 60px; /* Ajustar según diseño */
    top: 10px; /* Alinea verticalmente desde la parte superior */
    width: calc(100% - 75px); /* Asegúrate de que no se desborde */
}

#list-users li .details .top-name {
    font: 500 14px 'Roboto'; /* Estilo del nombre */
    white-space: nowrap; /* Evita que el nombre se divida en múltiples líneas */
    overflow: hidden; /* Oculta el desbordamiento */
    text-overflow: ellipsis; /* Muestra "..." si el texto es demasiado largo */
}

#list-users li .details .top-desc {
    font: 300 12px 'Roboto Condensed'; /* Estilo de la descripción */
    margin-top: 5px; /* Espacio entre el nombre y la descripción */
}

#list-users li .details a.profile {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAGpSURBVHjatJQ9aMJAGIafFEEQFFwEjU7qolOWODg6uLgUpGPpJh26FTcn124Zipt0LBldHBwdnIsu6mTSQhehBaHTddA7SpOrP9QPPgh3yXvvvfdcDCEE/10XnKHOIhrZ94JpJAL5+OLDOElUisWcthrbzObESkU1pxP/e/u3l2xmc/K2Rd62iJWKW+EfC520/VipyLDSAKA+GYBt8dJ/Pl7UNBJCulncdSi7PQBe+s+8Pj5RnwxY7mIIi0DrNJpOMW22KLs9sjkTgOzNFclalWGlQeb2+nikvt7e1fOw0sBb+SoGGYuuDN2NkiecdB+2LnMm3soHYN2856TT//nBejRmWGmwHo0PYnUvp+vRmGStSrJWVQvIea2wECLQGeKi4HRF2e0JINBltycKTldkiIuw7yM6nPK2pTKUSAFMmy0A8rbF0mmHOo7ocPJWPtmcSXYyUAhJRgG8lU80nWJzzEFNmy3ltD4ZBASl44OQMo2EeOUTgILTVc5/87u46wCQIR4gIdSpzDCaThFNp7Yx7FqO/c764B+KdOVpbpq2wnAKw0jXYVh9DwDulPwmZ6mTggAAAABJRU5ErkJggg==") no-repeat center; /* Fondo del ícono de perfil */
    height: 21px; /* Altura del ícono */
    width: 22px; /* Ancho del ícono */
    position: absolute; /* Posicionamiento absoluto */
    right: 55px; /* Alinea el ícono a la derecha */
    top: 8px; /* Centrado verticalmente */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    transition: opacity .3s; /* Transición suave al pasar el mouse */
    display: block; /* Asegúrate de que sea un bloque para que sea clickeable */
    z-index: 1; /* Asegúrate de que esté en la parte superior si hay solapamientos */
}

#list-users li .details .kx-list-user-country-flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    position: absolute;
    right: 86px;
    top: 13px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .45);
    display: block;
}

#list-users li .details a.profile:hover {
    opacity: .7; /* Cambia la opacidad al pasar el mouse */
}

#list-users li.kx-list-user-skeleton {
    overflow: hidden;
}

#list-users li.kx-list-user-skeleton .image {
    opacity: .42;
    filter: grayscale(1);
}

/* Keep the final loading row softly cut off at each list's own height. The
   mask disappears as soon as real rows replace the skeletons. */
#list-users:has(> li.kx-list-user-skeleton),
#contentBox #list-users:has(> li.kx-list-user-skeleton) {
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 78px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 78px), transparent 100%);
}

.kx-skeleton-line {
    display: block;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
}

.kx-skeleton-line.is-name {
    width: 68%;
}

.kx-skeleton-line.is-desc {
    width: 42%;
    margin-top: 9px;
    opacity: .72;
}

#hot-rooms li.kx-room-skeleton {
    position: relative;
    overflow: hidden;
}

#hot-rooms li.kx-room-skeleton .image {
    opacity: .35;
    filter: grayscale(1);
}

#hot-rooms .kx-skeleton-line.is-room-score {
    width: 18px;
    height: 12px;
    position: absolute;
    right: -50px;
    top: 12px;
    margin-top: 0;
}

#hot-rooms li.kx-room-skeleton .details .kx-room-like-placeholder {
    position: absolute;
    right: -80px;
    top: 8px;
    margin-top: 0;
    width: 18px;
    height: 20px;
    background-repeat: no-repeat;
    opacity: .35;
    filter: grayscale(1);
}

.tops-section-empty {
    display: block;
    padding: 18px;
    color: rgba(255, 255, 255, .58);
    font-weight: 700;
    text-align: center;
}

.senior-tools-active-list .senior-tools-proposal-skeleton {
    min-height: 105px;
}

.senior-tools-proposal-skeleton {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .015);
    overflow: hidden;
}

.senior-tools-proposal-skeleton .kx-skeleton-line.is-title {
    width: 66%;
    height: 13px;
}

.senior-tools-proposal-skeleton .kx-skeleton-line.is-tag {
    width: 38%;
    height: 9px;
    margin-top: 9px;
}

.senior-tools-proposal-skeleton .kx-skeleton-line.is-desc {
    width: 88%;
    margin-top: 11px;
}

.senior-tools-proposal-skeleton .kx-skeleton-line.is-meta {
    width: 56%;
    height: 8px;
    margin-top: 10px;
    opacity: .62;
}

.kx-skeleton-line.is-body-line {
    width: 100%;
    height: 12px;
    margin: 0 0 10px;
}

.kx-skeleton-line.is-body-line.is-short {
    width: 68%;
}

.kx-archive-skeleton {
    display: block;
    height: 29px;
}

.kx-skeleton-line.is-archive-line {
    width: 82%;
    height: 12px;
    margin-top: 8px;
}

.kx-investment-skeleton-scene {
    opacity: .42;
    filter: grayscale(1);
}

.kx-investor-skeleton .kx-investor-avatar-placeholder {
    display: block;
    margin: 0 auto;
}

.kx-investor-skeleton .kx-skeleton-line.is-investor-name {
    width: 78px;
    height: 12px;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 3;
}

.kx-gotw-skeleton {
    position: relative;
    height: 214px;
    padding: 0;
    overflow: hidden;
}

.kx-gotw-skeleton .is-gotw-heading {
    width: 47%;
    height: 18px;
    margin: 0 0 23px 0;
}

.kx-gotw-skeleton .is-gotw-copy {
    width: 63%;
    height: 11px;
    margin-bottom: 9px;
}

.kx-gotw-skeleton .is-gotw-copy.is-short {
    width: 49%;
}

.kx-gotw-skeleton .is-gotw-points {
    width: 41%;
    height: 14px;
    margin-top: 23px;
}

.kx-gotw-skeleton .kx-gotw-pad {
    width: auto;
    height: auto;
    position: absolute;
    right: 20px;
    top: 0;
    opacity: .62;
    filter: grayscale(1);
    image-rendering: pixelated;
}

.kx-gotw-skeleton .kx-gotw-plate {
    height: 91px;
    width: 100px;
    position: absolute;
    right: -15px;
    bottom: -14px;
}

.kx-gotw-skeleton .kx-gotw-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    background: no-repeat url(../img/base.png);
    opacity: .48;
    image-rendering: pixelated;
}

.kx-gotw-skeleton .kx-gotw-avatar {
    width: 64px;
    height: 110px;
    position: absolute;
    left: 3.5px;
    bottom: 60px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    opacity: .82;
    filter: grayscale(1);
    z-index: 1;
}

.kx-gotw-skeleton .kx-gotw-avatar-img {
    display: block;
    width: 64px;
    height: 110px;
    object-fit: contain;
    image-rendering: pixelated;
}

@keyframes kxSkeletonSweep {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

@keyframes kxContentReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes borderPulse {
    0% {
        border-color: var(--kx-primary-color, #ffa600);
        box-shadow: 0 0 2px var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ffa600) 24%, transparent));
    }
    25% {
        border-color: var(--kx-primary-color-light, color-mix(in srgb, var(--kx-primary-color, #ffa600) 72%, #fff));
        box-shadow: 0 0 4px var(--kx-primary-color-glow, color-mix(in srgb, var(--kx-primary-color, #ffa600) 46%, transparent));
    }
    50% {
        border-color: var(--kx-primary-color, #ffa600);
        box-shadow: 0 0 2px var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ffa600) 24%, transparent));
    }
    75% {
        border-color: var(--kx-primary-color-light, color-mix(in srgb, var(--kx-primary-color, #ffa600) 72%, #fff));
        box-shadow: 0 0 4px var(--kx-primary-color-glow, color-mix(in srgb, var(--kx-primary-color, #ffa600) 46%, transparent));
    }
    100% {
        border-color: var(--kx-primary-color, #ffa600);
        box-shadow: 0 0 2px var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ffa600) 24%, transparent));
    }
}

#cacheStatus {
    text-align: center;
}

.reload-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--kx-primary-color, #ff9b00);
    text-decoration: underline;
}

.hk-tools-box .hk-tool-item {
    text-decoration: none;
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px;
    padding: 7px 6px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 3px;
    color: rgba(255, 255, 255, .72);
    background: rgba(0, 0, 0, .16);
}

.hk-tools-box .hk-tool-item:last-child {
    margin-bottom: 0;
}

.hk-tools-box .hk-tool-item i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 3px;
    color: #fff;
    background: var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 24%, transparent));
}

.hk-tools-box .hk-tool-item strong,
.hk-tools-box .hk-tool-item small {
    display: block;
}

.hk-tools-box .hk-tool-item span {
    min-width: 0;
}

.hk-tools-box .hk-tool-item strong {
    color: #f1f1f1;
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.hk-tools-box .hk-tool-item small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .52);
    font-size: 9px;
    line-height: 1.25;
    overflow: hidden;
}

.hk-tools-box .hk-tool-item.is-active {
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-faint, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 14%, transparent));
}

.kxvars-actions .senior-tools-button,
.kxvars-tabs-strip .hk-tab-button,
.hk-recharge-tabs .hk-tab-button {
    appearance: none;
    border-radius: 3px;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.kxvars-actions .senior-tools-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(55, 122, 180, .85), rgba(32, 86, 135, .85));
}

.kxvars-actions .hk-primary-action {
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 24%, transparent));
}

.hk-recharge-tabs .hk-tab-button {
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #dcdcdc;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(0, 0, 0, .26);
}

.hk-recharge-tabs .hk-tab-button:hover,
.hk-recharge-tabs .hk-tab-button.is-active {
    color: #fff;
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 24%, transparent));
}

.reload-button i {
    margin-right: 5px; /* Opcional: para agregar un pequeño espacio entre el icono y el texto */
}


:root {
    --kx-site-logo-url: url('../img/kabbixlogo_big_beta.png');
    --kx-header-image-url: url('../img/header.png');
    --kx-currency-credits-image: url('../img/personal/credits.png');
    --kx-currency-diamonds-image: url('../img/personal/diamonds.png');
    --kx-currency-duckets-image: url('../img/personal/duckets.png');
    --kx-shop-credits-image: url('../img/shop/credits.png');
    --kx-shop-diamonds-image: url('../img/shop/diamonds.png');
    --kx-personal-texture-image: none;
    --kx-black-image: none;
}

.kx-inline-asset {
    display: inline-block;
    flex: 0 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.kx-inline-asset--currency-credits {
    background-image: var(--kx-currency-credits-image);
}

.kx-inline-asset--currency-diamonds {
    background-image: var(--kx-currency-diamonds-image);
}

.kx-inline-asset--currency-duckets {
    background-image: var(--kx-currency-duckets-image);
}

.kx-inline-asset--shop-credits {
    background-image: var(--kx-shop-credits-image);
}

.kx-inline-asset--shop-diamonds {
    background-image: var(--kx-shop-diamonds-image);
}

/* source: community.css */
.bdm h2 {
    font: 300 18px 'Roboto', sans-serif;
    margin-top: 0px;
    margin-bottom: 20px;
}

.bdm h2 span {
    font-weight: 400;
}

.bdm h2 p {
    margin-top: 50px;
}

.bdm .plate {
    background: no-repeat url(../img/base.png);
    height: 91px;
    width: 100px;
    position: absolute;
    right: 5px;
    bottom: 0;
}

.bdm .plate .plateAvatar {
	filter: drop-shadow(1px 1px 0 #b685ff)
            drop-shadow(-1px 1px 0 #b685ff)
            drop-shadow(1px -1px 0 #b685ff)
            drop-shadow(-1px -1px 0 #b685ff);
    background-repeat: no-repeat;
    background-position: center center;
    height: 110px;
    width: 64px;
    position: absolute;
    bottom: 60px;
    left: 3.5px;
}

.gamer-img {
    background-image: url("../img/gamer.png");
    background-repeat: no-repeat;
    width: 11px; /
    height: 15x;
    margin-right: 20px;
}


.bdm .plate .plateAvatar .bigHead {
    background: no-repeat center center;
    height: 124px;
    width: 108px;
    position: absolute;
    bottom: 18px;
    left: -25px;
}

#hot-rooms {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: 190px;
}

/* Fade the next room only during fake loading, without masking live rooms. */
#hot-rooms[data-kx-fake-loading="rooms"]:has(> li.kx-room-skeleton) {
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 60px), transparent 100%);
}

#hot-rooms[data-kx-fake-loading="rooms"] > li.kx-room-skeleton {
    height: 54px;
}

#hot-rooms li {
    float: left;
    padding: 0 15px;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, .03);
}

#hot-rooms li:nth-last-child(odd) {
    background: rgba(0, 0, 0, .1);
}

#hot-rooms li:last-child {
    border-bottom: none;
}

#hot-rooms .image {
    height: 32px;
    width: 32px;
    position: absolute;
    margin-top: 12px;
}

#hot-rooms .image.room_icon_0 {
    background: url(../img/icons/room_icon_0.gif);
}

#hot-rooms .image.room_icon_1 {
    background: url(../img/icons/room_icon_1.gif);
}

#hot-rooms .image.room_icon_2 {
    background: url(../img/icons/room_icon_2.gif);
}

#hot-rooms .image.room_icon_3 {
    background: url(../img/icons/room_icon_3.gif);
}

#hot-rooms .image.room_icon_4 {
    background: url(../img/icons/room_icon_4.gif);
}

#hot-rooms .image.room_icon_5 {
    background: url(../img/icons/room_icon_5.gif);
}

#hot-rooms li .details {
    position: absolute;
    margin-left: 50px;
    margin-top: 10px;
    width: 390px;
}

#hot-rooms li .details .room-title {
    font: 500 14px 'Roboto';
    position: absolute;
}

#hot-rooms li .details .room-desc {
    font: 300 12px 'Roboto Condensed';
    position: absolute;
    margin-top: 20px;
}

#hot-rooms li .details a.like {
    background: url(../img/icons/like.png);
    height: 20px;
    width: 18px;
    position: absolute;
    cursor: pointer;
    right: -80px;
    margin-top: 10px;
    transition: opacity .3s;
}


#hot-rooms li .details a.dislike {
    background: url(../img/icons/dislike.png);
    height: 20px;
    width: 18px;
    position: absolute;
    cursor: pointer;
    right: 20px;
    margin-top: 10px;
    transition: opacity .3s;
}


#hot-rooms li .details .likeCount {
    font-weight: bold;
    position: absolute;
    right: -50px;
    margin-top: 12px;
}

.hotelUpdates {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    height: 220px;
}

.hotelUpdates li {
    padding: 13px;
}

.hotelUpdates li:nth-last-child(odd) {
    background: rgba(0, 0, 0, .1);
}

.hotelUpdates li:last-child {
    border-bottom: none;
}

.featured-users-box {
    height: 240px;
    overflow: visible;
}

.featured-users-wall {
    position: relative;
    isolation: isolate;
    height: 194px;
    margin: 0;
    padding: 2px 24px 0;
    box-sizing: border-box;
    overflow: visible;
    background:
        radial-gradient(ellipse at 46% 52%, rgba(28, 33, 35, .86) 0%, rgba(18, 22, 24, .94) 50%, rgba(10, 13, 15, .99) 100%),
        #14191b;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.featured-users-wall:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(12, 15, 17, .22), rgba(12, 15, 17, .04) 18%, rgba(12, 15, 17, .02) 50%, rgba(12, 15, 17, .04) 82%, rgba(12, 15, 17, .22)),
        linear-gradient(180deg, rgba(12, 15, 17, .18), rgba(12, 15, 17, .02) 34%, rgba(12, 15, 17, .08) 72%, rgba(12, 15, 17, .24)),
        url(../img/personal/texture.png) no-repeat center center;
    background-size: 100% 100%, 100% 100%, 100%;
    opacity: .52;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.featured-users-wall:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 62%, rgba(235, 248, 255, .055) 0%, rgba(235, 248, 255, .025) 20%, rgba(235, 248, 255, 0) 48%),
        linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .03) 22%, rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, .03) 82%, rgba(0, 0, 0, .2)),
        linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .2));
}

.featured-user-avatar {
    position: absolute;
    z-index: 2;
    display: block;
    width: 64px;
    height: 160px;
    overflow: visible;
    pointer-events: none;
    margin-left: -32px;
}

.featured-user-avatar .kx-list-user-avatar {
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 64px;
    height: 110px;
    margin-left: 0;
    overflow: visible;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: auto;
    cursor: pointer;
}

.featured-user-avatar .kx-list-user-avatar-layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    transition: none;
    pointer-events: none;
}

.featured-user-avatar .kx-list-user-avatar-hover {
    opacity: 0;
}

.featured-user-avatar:hover .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-default,
.featured-user-avatar:focus-visible .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-default {
    opacity: 0;
}

.featured-user-avatar:hover .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-hover,
.featured-user-avatar:focus-visible .kx-list-user-avatar.kx-list-user-hover-ready .kx-list-user-avatar-hover {
    opacity: 1;
}

.featured-user-avatar.is-pos-0 .kx-list-user-avatar,
.featured-user-avatar.is-pos-1 .kx-list-user-avatar,
.featured-user-avatar.is-pos-2 .kx-list-user-avatar,
.featured-user-avatar.is-pos-3 .kx-list-user-avatar,
.featured-user-avatar.is-pos-4 .kx-list-user-avatar,
.featured-user-avatar.is-pos-5 .kx-list-user-avatar,
.featured-user-avatar.is-pos-6 .kx-list-user-avatar {
    clip-path: inset(8px 0 0 0);
}

.featured-user-avatar.is-pos-0 { left: 8%; top: -28px; }
.featured-user-avatar.is-pos-1 { left: 22%; top: -28px; }
.featured-user-avatar.is-pos-2 { left: 36%; top: -28px; }
.featured-user-avatar.is-pos-3 { left: 50%; top: -28px; }
.featured-user-avatar.is-pos-4 { left: 64%; top: -28px; }
.featured-user-avatar.is-pos-5 { left: 78%; top: -28px; }
.featured-user-avatar.is-pos-6 { left: 92%; top: -28px; }

.featured-user-avatar.is-pos-7 { left: 15%; top: 11px; }
.featured-user-avatar.is-pos-8 { left: 29%; top: 11px; }
.featured-user-avatar.is-pos-9 { left: 43%; top: 11px; }
.featured-user-avatar.is-pos-10 { left: 57%; top: 11px; }
.featured-user-avatar.is-pos-11 { left: 71%; top: 11px; }
.featured-user-avatar.is-pos-12 { left: 85%; top: 11px; }

.featured-user-avatar.is-pos-13 { left: 8%; top: 50px; }
.featured-user-avatar.is-pos-14 { left: 22%; top: 50px; }
.featured-user-avatar.is-pos-15 { left: 36%; top: 50px; }
.featured-user-avatar.is-pos-16 { left: 50%; top: 50px; }
.featured-user-avatar.is-pos-17 { left: 64%; top: 50px; }
.featured-user-avatar.is-pos-18 { left: 78%; top: 50px; }
.featured-user-avatar.is-pos-19 { left: 92%; top: 50px; }

.featured-user-tooltip {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 112px;
    z-index: 20;
    transform: translateX(-50%) translateY(4px);
    min-width: 152px;
    max-width: 210px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-top-color: rgba(255, 153, 0, .72);
    border-radius: 4px;
    background: rgba(13, 15, 16, .97);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .38);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

.featured-user-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: rgba(13, 15, 16, .96);
    transform: translateX(-50%) rotate(45deg);
}

.featured-user-tooltip-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.featured-user-tooltip-title-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.featured-user-tooltip-title i {
    color: #ff9900;
}

.featured-user-tooltip-title .kx-list-user-country-flag {
    flex: 0 0 auto;
    width: 18px;
    height: 13px;
    object-fit: cover;
    position: relative;
    top: 3px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .45);
    display: block;
}

.featured-user-tooltip-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
    line-height: 1.25;
    margin-top: 4px;
}

.featured-user-tooltip-meta i {
    width: 12px;
    color: rgba(255, 185, 70, .9);
    text-align: center;
}

.featured-user-tooltip-reason {
    color: rgba(255, 255, 255, .78);
}

.featured-user-avatar:hover,
.featured-user-avatar:focus-visible {
    z-index: 30;
}

.featured-user-avatar:hover .featured-user-tooltip,
.featured-user-avatar:focus-visible .featured-user-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.featured-users-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .58);
    font-weight: 700;
    text-align: center;
}

.featured-users-skeleton {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.featured-user-avatar-skeleton .kx-list-user-avatar {
    cursor: default;
    opacity: .42;
    filter: grayscale(1);
}

/* Estilos generales para leaderboard */
[class~=leaderboard] {
    margin: 0 auto;
    padding-top: 1.25pc;
    position: relative;
    height: 161.25pt;
    width: 2.354166667in;
}

.leaderboard__background {
    background-image: url("../../cdn/img/podium-background.png");
    height: 10.1875pc;
}

/* Estilos para las medallas */
[class~=leaderboard__medal] {
    background-image: url("../../cdn/img/podium-medals.png");
    background-repeat: no-repeat;
    height: 17.25pt;
    width: 1.375pc;
    position: absolute;
    left: 1.375pc;
    top: 0.520833333in;
    z-index: 2;
}


/* Efecto hover para los primeros 3 puestos */
[class~=leaderboard__top-1]:hover,
[class~=leaderboard__top-2]:hover,
[class~=leaderboard__top-3]:hover {
    z-index: 5;
}

/* Hover para el primer puesto - color oro más suave */
[class~=leaderboard__top-1]:hover {
    filter: drop-shadow(1px 1px 0 #DAA520)
            drop-shadow(-1px 1px 0 #DAA520)
            drop-shadow(1px -1px 0 #DAA520)
            drop-shadow(-1px -1px 0 #DAA520);
}



/* Hover para las posiciones */
[class~=leaderboard__top-2]:hover {
    filter: drop-shadow(1px 1px 0 #a4a4a4)
            drop-shadow(-1px 1px 0 #a4a4a4)
            drop-shadow(1px -1px 0 #a4a4a4)
            drop-shadow(-1px -1px 0 #a4a4a4);
}

[class~=leaderboard__top-3]:hover {
    filter: drop-shadow(1px 1px 0 #c60)
            drop-shadow(-1px 1px 0 #c60)
            drop-shadow(1px -1px 0 #c60)
            drop-shadow(-1px -1px 0 #c60);
}

/* Posicionamiento de los primeros tres */
[class~=leaderboard__top-1],
[class~=leaderboard__top-2],
[class~=leaderboard__top-3] {
    position: absolute;
    width: 48pt;
}

/* Alineación de los primeros tres */
[class~=leaderboard__top-1] {
    left: 59.25pt;
    top: 0.3125pc;
}

[class~=leaderboard__top-2] {
    left: 8px;
    top: 23px;
}

[class~=leaderboard__top-3] {
    left: 152px;
    top: 2.625pc;
}

/* Estilos para los nombres de usuario */
[class~=leaderboard__username-link] {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 3;
    text-decoration: none;
    white-space: nowrap;
    color: inherit;
}

/* Hover para la medalla del primer puesto */
[class~=leaderboard__top-1]:hover [class~=leaderboard__medal] {
    background-position-x: 0;
}

.tops-page #list-users li .details .top-desc {
    box-sizing: border-box;
    overflow: hidden;
    padding-right: 54px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tops-page #list-users li {
    box-sizing: border-box;
}

.tops-page #list-users li .details a.profile {
    right: 25px;
}

/* Cada panel conserva el mismo estado neutral y centrado que los listados
   vacíos del CMS, también cuando su carga SPA no puede completarse. */
.tops-page .tops-section-empty {
    align-items: center;
    box-sizing: border-box;
    color: rgba(235, 235, 235, .72);
    display: flex;
    font: 400 13px 'Roboto', sans-serif;
    justify-content: center;
    margin: 0;
    min-height: 0;
    padding: 15px;
    text-align: center;
    width: 100%;
}

.tops-page #list-users > .tops-section-empty,
.tops-page #hot-rooms > .tops-section-empty,
.tops-page [data-tops-section="investment"] > .tops-section-empty {
    float: none;
    height: 100%;
    min-height: 100%;
}

/* El podio tiene padding superior para sus medallas; al reemplazarlo por un
   estado vacío se retira esa geometría para centrarlo como los demás paneles. */
.tops-page #contentBox.tops-investment-panel--empty {
    display: flex;
    flex-direction: column;
}

.tops-page #contentBox.tops-investment-panel--empty > [data-tops-section="investment"].tops-investment-empty {
    align-self: stretch;
    display: flex;
    /* #hot-rooms ocupa 190px bajo el mismo encabezado. Reutilizamos esa
       geometría para que ambos fallbacks queden en el mismo eje visual. */
    flex: 0 0 190px;
    height: 190px;
    margin: 0;
    min-height: 0;
    padding-top: 0;
    width: 100%;
}

.tops-page .tops-section-empty p {
    margin: 0;
}

.tops-more-rankings {
    align-items: center;
    display: flex;
    gap: 14px;
    margin: 18px 0 12px;
}

.tops-more-rankings-line {
    border-top: 1px dashed rgba(210, 220, 223, .42);
    flex: 1 1 auto;
}

.tops-more-rankings-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: rgba(238, 241, 242, .72);
    cursor: pointer;
    display: inline-flex;
    font: 400 13px 'Roboto', sans-serif;
    gap: 9px;
    padding: 3px 0;
}

.tops-more-rankings-toggle:hover,
.tops-more-rankings-toggle:focus-visible {
    color: #fff;
    outline: none;
}

.tops-more-rankings-toggle i {
    color: #b5bdbf;
    font-size: 20px;
    line-height: 12px;
    transition: transform .2s ease;
}

.tops-more-rankings-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.tops-secondary-rankings {
    max-height: 2400px;
    opacity: 1;
    overflow: hidden;
    pointer-events: auto;
    visibility: visible;
    transition: max-height .3s ease, opacity .2s ease, visibility 0s linear 0s;
}

.tops-secondary-rankings.is-collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: max-height .3s ease, opacity .2s ease, visibility 0s linear .3s;
}

@media (prefers-reduced-motion: reduce) {
    .tops-more-rankings-toggle i,
    .tops-secondary-rankings {
        transition: none;
    }
}


/* Hover para la medalla del segundo puesto */
[class~=leaderboard__top-2]:hover [class~=leaderboard__medal] {
    background-position-x: -0.229166667in;
}

/* Hover para la medalla del tercer puesto */
[class~=leaderboard__top-3]:hover [class~=leaderboard__medal] {
    background-position-x: -0.458333333in;
}

/*
 * Informational pages retain the exact legacy Privacy layout. Keep the
 * content-link treatment here so About and both Terms pages cannot drift
 * into different card or link designs.
 */
.kx-legacy-info-page #contentBox > .png15 a {
    color: #FF9000;
    text-decoration: none;
}

.kx-legacy-info-page #contentBox > .png15 a:hover {
    color: #fff;
}

/* source: camera.css */
.camera-page {
    padding: 16px 16px 18px;
}

.camera-page__intro {
    display: block;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .58);
    font: 400 13px 'Roboto', sans-serif;
}

.camera-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.camera-title__actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
}

.camera-mode-link,
.camera-mode-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    color: rgba(255, 255, 255, .62);
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px;
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .15s, border-color .15s, background .15s;
}

.camera-mode-link:hover,
.camera-mode-link.selected {
    color: #fff;
    background: rgba(255, 155, 0, .12);
    border-color: rgba(255, 155, 0, .46);
}

.camera-mode-link .fa {
    color: rgba(255, 255, 255, .58);
}

.camera-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.camera-card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
        #141819;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 22px rgba(0, 0, 0, .18);
    overflow: hidden;
    cursor: pointer;
    border-radius: 3px;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}

.camera-card:hover {
    border-color: rgba(255, 155, 0, .48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 26px rgba(0, 0, 0, .32);
    transform: translateY(-1px);
}

.camera-card__delete {
    position: absolute;
    z-index: 4;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .78);
    background: rgba(18, 9, 9, .78);
    border: 1px solid rgba(255, 100, 100, .36);
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .16s, transform .16s, color .16s, border-color .16s, background .16s;
}

.camera-card:hover .camera-card__delete,
.camera-card__delete:focus {
    opacity: 1;
    transform: translateY(0);
}

.camera-card__delete:hover {
    color: #fff;
    background: rgba(80, 18, 18, .9);
    border-color: rgba(255, 100, 100, .78);
}

.camera-card__delete:disabled {
    opacity: .45;
    cursor: wait;
}

.camera-card__media {
    position: relative;
    display: block;
    height: 168px;
    overflow: hidden;
    background: rgba(0, 0, 0, .42);
    text-decoration: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.camera-card:hover .camera-card__media {
    border-color: rgba(255, 155, 0, .35);
}

.camera-card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 54px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .58));
    pointer-events: none;
}

.camera-card__shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 32%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 12px);
    opacity: .45;
}

.camera-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-card:hover .camera-card__image {
    opacity: .88;
}

.camera-card__cta {
    display: none;
}

.camera-card__body {
    position: relative;
    min-height: 56px;
    padding: 8px 10px 9px;
    background: rgba(0, 0, 0, .12);
    overflow: visible;
}

.camera-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 56px;
    padding-left: 68px;
}

.camera-card__avatar {
    display: block;
    width: 64px;
    height: 110px;
    max-width: none;
    flex: 0 0 auto;
    margin: 0;
    background-position: center bottom;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7));
}

.camera-card__avatar-link {
    display: block;
    position: absolute;
    left: 8px;
    bottom: -4px;
    width: 68px;
    height: 96px;
    flex: 0 0 auto;
    text-decoration: none;
    overflow: visible;
    padding-top: 0;
    box-sizing: border-box;
}

.camera-card__avatar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
    height: 42px;
    color: rgba(255, 255, 255, .45);
    background: #111;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px;
}

.camera-card__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    margin-top: 0;
}

.camera-card__name,
.camera-card__name:visited {
    color: rgba(255, 255, 255, .92);
    font: 700 14px 'Roboto Condensed', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s;
}

.camera-card__name:hover {
    color: var(--color-primary, #ff9b00);
}

.camera-card__date {
    color: rgba(255, 255, 255, .42);
    font: 500 10px 'Roboto', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.camera-card__date .fa {
    color: rgba(255, 155, 0, .75);
    margin-right: 3px;
}

.camera-card__date--deleted {
    margin-top: 3px;
    color: rgba(255, 120, 120, .72);
}

.camera-card__date--deleted .fa {
    color: rgba(255, 120, 120, .85);
}

.camera-card__date--reason {
    color: rgba(255, 255, 255, .46);
}

.camera-empty-state {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, .55);
    background:
        linear-gradient(135deg, rgba(255, 155, 0, .06), rgba(255, 255, 255, .015)),
        rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 3px;
}

.camera-empty-state .fa {
    font-size: 32px;
    color: rgba(255, 155, 0, .68);
}

.camera-empty-state--warning .fa {
    color: rgba(255, 120, 120, .82);
}

.camera-empty-state p {
    font: 300 13px 'Roboto', sans-serif;
}

.camera-gallery > .camera-empty-state {
    grid-column: 1 / -1;
}

.camera-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .92);
}

body.camera-modal-open {
    overflow: hidden;
}

.camera-modal__overlay {
    position: absolute;
    inset: 0;
}

.camera-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 88vw;
    max-width: 1000px;
    max-height: 90vh;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.camera-modal__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 0 4px 8px;
    background: transparent;
    border-bottom: 0;
}

.camera-modal__label {
    color: rgba(255, 255, 255, .55);
    font: 700 12px 'Roboto Condensed', sans-serif;
}

.camera-modal__label .fa {
    color: var(--color-primary, #ff9b00);
    margin-right: 7px;
}

.camera-modal__close {
    z-index: 2;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s;
}

.camera-modal__close:hover {
    color: #fff;
}

.camera-modal__viewer {
    display: grid;
    grid-template-columns: 58px 1fr 58px;
    gap: 10px;
    align-items: center;
    flex: 1;
    min-height: 0;
    padding: 0;
}

.camera-modal__arrow {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .58);
    font-size: 26px;
    cursor: pointer;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s;
}

.camera-modal__arrow:hover {
    color: #fff;
}

.camera-modal__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
}

.camera-modal__frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.camera-modal__img {
    max-width: 100%;
    max-height: calc(90vh - 150px);
    width: auto;
    height: auto;
    display: block;
}

.camera-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    padding: 12px 8px 0;
    min-height: 28px;
    background: transparent;
    border-top: 0;
}

.camera-modal__meta {
    display: flex;
    gap: 10px;
    align-items: center;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    min-width: 0;
}

.camera-modal__author-wrap,
.camera-modal__date-wrap,
.camera-modal__pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.camera-modal__author-wrap .fa,
.camera-modal__pagination .fa {
    color: var(--color-primary, #ff9b00);
}

.camera-modal__date-wrap .fa {
    color: rgba(255, 155, 0, .74);
}

.camera-modal__author {
    font-weight: 600;
    color: #fff;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.camera-modal__date {
    font-weight: 300;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
}

.camera-modal__pagination {
    color: rgba(255, 255, 255, .7);
}

.camera-modal__counter {
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
    font-weight: 700;
}

.camera-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    padding: 16px 0;
}

.camera-pagination__btn {
    background: rgba(255, 155, 0, .1);
    border: 1px solid rgba(255, 155, 0, .3);
    color: rgba(255, 155, 0, .9);
    padding: 8px 16px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}

.camera-pagination__btn:hover:not(:disabled) {
    background: rgba(255, 155, 0, .18);
    border-color: rgba(255, 155, 0, .6);
    color: #ff9b00;
}

.camera-pagination__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.camera-pagination__info {
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}

.camera-pagination__current {
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.is-endpoint-pager-loading [data-camera-page-target],
.is-endpoint-pager-loading [data-profile-trades-target] {
    opacity: .76;
    pointer-events: none;
}

.camera-card-skeleton .camera-skeleton-media,
.camera-card-skeleton .camera-skeleton-line {
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .11), rgba(255, 255, 255, .055));
    background-size: 220% 100%;
    animation: cameraSkeletonPulse 1.35s ease-in-out infinite;
}

.camera-card-skeleton .camera-card__media {
    cursor: default;
}

.camera-card-skeleton .camera-skeleton-media {
    display: block;
    height: 100%;
    min-height: 156px;
    width: 100%;
}

.camera-card-placeholder-avatar {
    pointer-events: none;
}

.camera-card-placeholder-avatar .kx-list-user-avatar {
    position: absolute;
    left: 0;
    bottom: -14px;
    width: 64px;
    height: 110px;
    overflow: visible;
    background-position: center bottom;
    background-repeat: no-repeat;
    cursor: default;
    opacity: .42;
    filter: grayscale(1);
}

.camera-card-placeholder-avatar .kx-list-user-avatar-layer {
    position: absolute;
    inset: 0;
    background-position: center bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

.camera-card-placeholder-avatar .kx-list-user-avatar-hover {
    display: none;
}

.camera-card-skeleton .camera-skeleton-line {
    border-radius: 2px;
    display: block;
    height: 10px;
}

.camera-card-skeleton .camera-skeleton-line.is-name {
    width: 92px;
}

.camera-card-skeleton .camera-skeleton-line.is-date {
    margin-top: 7px;
    width: 132px;
}

@keyframes cameraSkeletonPulse {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -120% 0;
    }
}

/* source: staffs.css */
.detailsBox {
    background: rgba(0, 0, 0, .3);
    padding: 10px;
    width: 203px;
    height: 54px;
    margin-left: 40px;
    left: -5px;
    position: relative;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}

.detailsBox:nth-last-child(2n + 1) {
    margin-right: 0px;
}

.detailsBox .username {
    margin-top: 5px;
    font: 400 15px 'Roboto', sans-serif;
    color: #fff;
    position: relative;
    z-index: 1;
    -webkit-text-stroke: 0.35px rgba(0, 0, 0, 0.75);
    paint-order: stroke fill;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 0 1px rgba(0, 0, 0, 0.95),
        0 0 6px rgba(0, 0, 0, 0.45);
}

.detailsBox .motto {
    font: 300 13px 'Roboto', sans-serif;
    color: rgba(255, 255, 255); /* más visible pero aún suave */
    display: block;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detailsBox .work,
.detailsBox .tarea {
    font: 200 12px 'Roboto Condensed', sans-serif;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detailsBox .staffBox {
    height: 70px;
    width: 70px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1.8px solid #FF9000;
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
    cursor: pointer;
    position: relative;
    margin-left: -40px;
    margin-top: -10px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.detailsBox .staffBox.bg_rank {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background-position: center top;
    background-size: auto;
}

.detailsBox .staffBox.bg_rank_5-7 {
    background: url(../img/staffs/rank5-7.png) no-repeat center center;
    height: 70px;
    width: 70px;
}

.detailsBox .staffBox.bg_rank_4 {
    background: url(../img/staffs/rank4.png) no-repeat center center;
    height: 70px;
    width: 70px;
}

.detailsBox .staffBox.bg_rank_3 {
    background: url(../img/staffs/rank3.png) no-repeat center center;
    height: 70px;
    width: 70px;
}

.detailsBox .staffBox .avatar {
    background: no-repeat center -10px;
    height: 70px;
    width: 70px;
    position: relative;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

.detailsBox .staffBox .avatar.kx-hover-avatar .kx-hover-avatar-layer {
    background-position: center -10px;
}

.detailsBox .staffBox.online {
    border: 2px solid #27ae60;
}

.detailsBox .staffBox .badge {
    position: absolute;
    left: -5px;
    top: -5px;
    z-index: 12;
}

.detailsBox .staffBox .badge img {
    display: block;
    max-width: 40px;
    max-height: 40px;
    width: auto;
    height: auto;
    position: relative;
    z-index: 12;
}

.detailsBox.kx-staff-card-skeleton {
    width: 203px;
    margin-right: 0;
    margin-left: 40px;
    pointer-events: none;
}

.detailsBox.kx-staff-card-skeleton .staffBox {
    background:
        radial-gradient(circle at 48% 36%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 40%),
        var(--kx-black-image) center top no-repeat,
        rgba(255, 255, 255, .035);
    background-size: 100% 100%, auto, auto;
    background-repeat: no-repeat, no-repeat, repeat;
}

.detailsBox.kx-staff-card-skeleton .staffBox .avatar {
    opacity: .56;
    filter: brightness(.82) contrast(.92);
    background-color: transparent;
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center -10px;
    background-size: auto;
}

.detailsBox.kx-staff-card-skeleton .staffBox .avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 48% 36%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle, rgba(18, 21, 22, 0) 48%, rgba(18, 21, 22, .5) 100%);
    pointer-events: none;
}

.detailsBox.kx-staff-card-skeleton .kx-staff-badge-skeleton {
    width: 32px;
    height: 28px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 144, 0, .22), rgba(255, 190, 70, .38), rgba(255, 144, 0, .22));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
}

.detailsBox.kx-staff-card-skeleton .username,
.detailsBox.kx-staff-card-skeleton .motto,
.detailsBox.kx-staff-card-skeleton .tarea {
    text-shadow: none;
    -webkit-text-stroke: 0;
}

.detailsBox.kx-staff-card-skeleton .username {
    margin-top: 7px;
}

.detailsBox.kx-staff-card-skeleton .motto,
.detailsBox.kx-staff-card-skeleton .tarea {
    margin-top: 6px;
    margin-left: 0;
}

.detailsBox.kx-staff-card-skeleton .kx-skeleton-line.is-staff-name {
    width: 58px;
    height: 14px;
}

.detailsBox.kx-staff-card-skeleton .kx-skeleton-line.is-staff-motto {
    width: 136px;
    height: 9px;
    opacity: .58;
}

.detailsBox.kx-staff-card-skeleton .kx-skeleton-line.is-staff-task {
    width: 98px;
    height: 8px;
    opacity: .42;
}

.detailsBox.kx-staff-card-skeleton.is-variant-2 .kx-skeleton-line.is-staff-motto {
    width: 118px;
}

.detailsBox.kx-staff-card-skeleton.is-variant-2 .kx-skeleton-line.is-staff-task {
    width: 78px;
}

.detailsBox.kx-staff-card-skeleton.is-variant-3 .kx-skeleton-line.is-staff-motto {
    width: 148px;
}

.detailsBox.kx-staff-card-skeleton.is-variant-3 .kx-skeleton-line.is-staff-task {
    width: 112px;
}

.detailsBox.kx-staff-card-skeleton.is-variant-4 .kx-skeleton-line.is-staff-motto {
    width: 104px;
}

.detailsBox.kx-staff-card-skeleton.is-variant-4 .kx-skeleton-line.is-staff-task {
    width: 88px;
}

.kx-staff-founder-skeleton {
    width: 203px;
    margin-right: 0;
}

.staff-founder-column .detailsBox {
    width: 260px;
}

.detailsBox .staffBox .badge.rank_7 {
    background: url(../img/staffs/ADM9.gif);
    height: 34px;
    width: 34px;
}

.detailsBox .staffBox .badge.rank_6 {
    background: url(../img/staffs/ADM8.gif);
    height: 40px;
    width: 40px;
}

.detailsBox .staffBox .badge.rank_5 {
    background: url(../img/staffs/ADM7.gif);
    height: 34px;
    width: 31px;
}

.detailsBox .staffBox .badge.rank_4 {
    background: url(../img/staffs/MOD6.gif);
    height: 31px;
    width: 30px;
}

.detailsBox .staffBox .badge.rank_3 {
    background: url(../img/staffs/MOD4.gif);
    height: 31px;
    width: 35px;
}

/* source: news.css */
.news-archive {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    width: 300px;
}

.news-archive li {
    font: 400 14px 'Roboto', sans-serif;
    padding: 6px 0;
}

html:not(.kx-js) .news-archive[data-news-archive-async],
html:not(.kx-js) .news-article-skeleton,
html:not(.kx-js) .news-comments-skeleton-list {
    display: none;
}

.news-archive li.kx-archive-skeleton {
    display: flex;
    align-items: center;
    height: 29px;
    padding: 0;
}

.news-archive .kx-skeleton-line.is-archive-line {
    margin-top: 0;
}

.news-article-skeleton .kx-skeleton-line.is-body-line {
    height: 10px;
    margin-bottom: 7px;
}

.news-article-skeleton .kx-skeleton-line.is-body-line.is-intro {
    width: 54%;
}

.news-skeleton-divider {
    height: 1px;
    margin: 2px 0 10px;
    background: rgba(255, 255, 255, .3);
}

.news-archive li a {
    text-decoration: none;
    color: #fff;
    transition: color .3s;
}

.news-archive li a:hover {
    color: #FF9000;
}

.news-archive li a:after {
    content: ' »';
    float: right;
    position: absolute;
    right: 0;
    font-size: 20px;
    margin-top: -6px;
}

.news-archive li a.selected {
    color: #ff9b00;
    pointer-events: none;
}

.footerBottomBox .headAvatar {
    background: no-repeat center center;
    height: 62px;
    width: 54px;
    float: left;
    margin-top: -3px;
}

.footerBottomBox span {
    font: 300 14px 'Roboto', sans-serif;
    position: absolute;
    top: 10px;
}

.footerBottomBox .newsAuthor {
    font: 500 18px 'Roboto Condensed', sans-serif;
    position: absolute;
    top: 25px;
    left: 54px;
}

.footerBottomBox .voting {
    float: right;
    width: 160px;
}

.footerBottomBox .voting span .likeHand {
    background: url(../img/icons/like.png) no-repeat;
    height: 20px;
    width: 18px;
    position: absolute;
    margin-left: -30px;
    cursor: pointer;
    transition: opacity .3s;
}

.footerBottomBox .voting span .likeHand.dislike {
    background: url(../img/icons/dislike.png) no-repeat;
}

.footerBottomBox .voting span .likeHand:hover {
    opacity: .8;
}

.footerBottomBox .voting span {
    position: absolute;
    right: 15px;
    font: 300 15px 'Roboto';
    margin-top: 8px;
}

#contentBox.commentsBox,
#contentBox.commentComposerBox {
    overflow: visible;
}

#contentBox.commentComposerBox {
    margin-top: 10px;
}

#contentBox.commentsBox[hidden] {
    display: none;
}

.commentsFeed {
    padding: 10px 15px 14px;
}

.news-comments-skeleton-list {
    height: 118px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
}

.commentRow {
    position: relative;
    padding-left: 82px;
    margin: 0 0 12px;
    min-height: 74px;
}

.commentRow:last-child {
    margin-bottom: 0;
}

.commentRow .headAvatar {
    background-repeat: no-repeat;
    background-position: center -10px;
    height: 70px;
    width: 70px;
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    z-index: 2;
    border-radius: 7px;
    overflow: hidden;
    border: 1.8px solid #ff9000;
    background-color: rgba(0, 0, 0, .35);
}

.commentRow .commentAvatarCover {
    background-color: rgba(0, 0, 0, .35);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto;
    border: 1.8px solid #ff9000;
    border-radius: 7px;
    box-sizing: border-box;
    height: 70px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 2px;
    width: 70px;
    z-index: 2;
}

.commentRow .commentAvatarCover .headAvatar {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    background-position: center -10px;
    height: 68px;
    left: auto;
    position: relative;
    top: auto;
    width: 68px;
}

#contentBox.commentsBox .commentItem.footerBottomBox {
    height: auto;
    min-height: 70px;
    margin-bottom: 0;
    padding: 9px 14px 9px 18px;
    box-sizing: border-box;
    border-top: 2px dashed rgba(255, 255, 255, .05);
    background: rgba(0, 0, 0, .2);
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.commentDeleteBtn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .35);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .2s, background .2s;
    align-self: flex-start;
    margin-top: 2px;
}

.commentDeleteBtn:hover {
    color: #e05555;
    background: rgba(224, 85, 85, .12);
}

.commentDeleteBtn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#contentBox.commentsBox .commentBody {
    min-width: 0;
}

#contentBox.commentsBox .commentMeta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

#contentBox.commentsBox .commentUser {
    font: 500 18px 'Roboto Condensed', sans-serif;
    line-height: 1;
    color: #fff;
}

#contentBox.commentsBox .commentDate {
    font: 500 11px 'Roboto Condensed', sans-serif;
    line-height: 1;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #ff9b00;
}

#contentBox.commentsBox .commentText {
    font: 300 13px 'Roboto', sans-serif;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
    word-wrap: break-word;
    white-space: pre-wrap;
}

.commentComposer {
    padding: 10px 12px;
}

.comment-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.comment-form textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    max-height: 128px;
    padding: 10px 12px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .16);
    color: #fff;
    margin: 0;
    font: 300 14px 'Roboto', sans-serif;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .2s, background .2s;
}

.comment-form textarea:focus {
    outline: none;
    border-color: rgba(255, 155, 0, .6);
    background: rgba(0, 0, 0, .24);
}

.comment-form textarea::placeholder {
    color: rgba(255, 255, 255, .4);
}

.commentComposerActions button {
    min-height: 38px;
    background: rgba(255, 155, 0, .12);
    color: #ffad2e;
    border: 1px solid rgba(255, 155, 0, .34);
    border-radius: 2px;
    padding: 8px 14px;
    font: 500 14px 'Roboto Condensed', sans-serif;
    cursor: pointer;
    box-shadow: none;
    transition: background .2s, border-color .2s;
}

.commentComposerActions button:hover {
    background: rgba(255, 155, 0, .2);
    border-color: rgba(255, 155, 0, .6);
}

.commentComposerActions button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.noComments {
    color: #aaa;
    font-size: 13px;
    padding: 12px 0 4px;
    text-align: center;
}

.commentLoginHint {
    color: #aaa;
    font-size: 13px;
    padding: 14px 0;
    text-align: center;
}

.commentLoginHint a {
    color: #e8a038;
    text-decoration: underline;
}

.commentRow.kx-comment-skeleton .headAvatar {
    border-color: rgba(255, 255, 255, .12);
    opacity: .45;
    filter: grayscale(1);
}

.commentRow.kx-comment-skeleton .commentItem.footerBottomBox {
    min-height: 60px;
}

.commentRow.kx-comment-skeleton .commentBody {
    width: 100%;
    padding-top: 2px;
}

.kx-skeleton-line.is-comment-name {
    width: 118px;
    height: 13px;
    margin: 2px 0 12px;
}

.kx-skeleton-line.is-comment-text {
    width: 100%;
    height: 10px;
    margin-top: 8px;
}

.kx-skeleton-line.is-comment-text.is-short {
    width: 64%;
}

/* source: tienda.css */
/* Form Inputs */
#formDeposito input[type="number"],
#formDeposito input[type="text"],
#formDeposito input[type="tel"],
#formDeposito select,
#formRetiro input[type="number"],
#formRetiro input[type="text"],
#formRetiro input[type="tel"],
#formRetiro select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 3px;
    border: .0625pc solid #3a3a3a;
    flex: 1 1 auto;
    border-image: none;
    background: #1a1a1a;
    color: #fff;
}

/* Section Container */
[class~=store-section] {
    margin: 0;
}

.kx-shop-page > .grid_13 {
    display: flex;
    flex-direction: column;
}

.kx-shop-page > .grid_13 > .shop-currency-section {
    order: 2;
}

.kx-shop-page > .grid_13 > .shop-senior-section {
    order: 1;
}

.shop-content-box {
    margin: 0 0 12px;
    background: #141819;
    border: 1px solid rgba(255, 255, 255, .04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    overflow: hidden;
}

.shop-content-box.infoBox {
    background: rgba(0, 0, 0, .35);
    border: 0;
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}

.shop-section-title {
    padding: 10px 15px;
    color: #fff;
    font: 400 20px/1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .22);
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
}

.kx-shop-page .shop-section-title,
.kx-shop-page #contentBox > .title.small {
    display: flex;
    align-items: center;
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
    line-height: 20px;
}

.shop-content-box.infoBox .shop-section-title {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

/* Legacy selector spacing remains scoped; the currency sidebar is wallet-only. */
.kx-shop-page > .grid_5 #contentBox > .png15 {
    padding-bottom: 11px;
}

.shop-section-body {
    padding: 16px;
}

.shop-maintenance-promo-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 184, 0, .32);
    background: rgba(255, 155, 0, .09);
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.45;
}

.shop-maintenance-promo-note i {
    color: #ffbc1b;
    font-size: 16px;
    line-height: 1.3;
}

.is-maintenance-senior-promo .shop-bundle-card {
    aspect-ratio: 800 / 220;
}

/* Options List */
.options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 12px;
    flex-wrap: wrap;
    display: flex;
}

/* Option Items */
[class~=option-item] {
    flex: 1 1 75pt;
    width: 97.5pt;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .15625in;
    background: rgba(0, 0, 0, .35);
    border-radius: 2px;
}

[class~=option-item] > .kx-managed-currency-icon {
    width: 42px;
    height: 42px;
    image-rendering: pixelated;
}

.shop-bundle-list,
.shop-currency-list,
.shop-subscription-list {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}

.shop-bundle-list {
    grid-template-columns: 1fr;
}

.shop-subscription-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.shop-currency-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.shop-offer-card {
    position: relative;
    width: auto;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 0;
    aspect-ratio: 800 / 186;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    overflow: hidden;
    padding: 0;
    background-size: 100% 100%;
    background-position: center;
    border: 3px solid #f8df9a;
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(86, 42, 0, .72), 0 2px 0 rgba(0, 0, 0, .28);
}

.kx-shop-offer-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center top;
    pointer-events: none;
}

.shop-bundle-card .kx-shop-offer-art,
.shop-currency-card .kx-shop-offer-art,
.shop-subscription-card .kx-shop-offer-art {
    background-size: 100% auto;
}

[class~=option-item].shop-offer-card {
    width: auto;
    padding: 0;
    align-items: stretch;
}

.shop-bundle-card {
    aspect-ratio: 800 / 186;
    min-height: 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
}

.shop-currency-card {
    aspect-ratio: auto;
    min-height: 112px;
    background-color: #dfa500;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
}

.shop-subscription-card {
    aspect-ratio: 800 / 150;
    min-height: 108px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
}

.shop-senior-subscription-slide {
    position: relative;
    min-height: 116px;
    margin: 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(12, 12, 12, .92) 0%, rgba(20, 14, 26, .76) 48%, rgba(20, 14, 26, .22) 100%),
        url('/cdn/img/shop/offer_rotating_roomdeal315.png') center / 100% auto no-repeat;
    border: 1px solid rgba(255, 202, 70, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.shop-senior-subscription-copy {
    position: relative;
    z-index: 1;
    max-width: 540px;
    padding: 18px 20px;
}

.shop-senior-subscription-copy span {
    display: block;
    margin-bottom: 6px;
    color: #ffd15b;
    font: 400 15px/1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.shop-senior-subscription-copy strong {
    display: block;
    color: #fff;
    font: 400 24px/1.05 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.shop-senior-subscription-copy p {
    max-width: 500px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .78);
    line-height: 1.35;
}

.shop-subscription-detail {
    margin-top: 12px;
}

.shop-subscription-detail .shop-senior-subscription-slide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 18px;
    align-items: center;
}

.shop-subscription-detail .shop-bundle-add-button {
    position: relative;
    z-index: 1;
    min-height: 42px;
    margin: 0 18px 0 0;
}

.shop-offer-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .14));
    pointer-events: none;
    z-index: 1;
}

.shop-price-ribbon {
    position: absolute;
    left: 22px;
    top: 0;
    width: 72px;
    height: 90px;
    min-height: 0;
    padding: 11px 0 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #111;
    background: linear-gradient(180deg, #ffe066 0%, #ffc12c 54%, #f4a000 100%);
    border: 0;
    border-radius: 6px 6px 0 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px));
    filter: drop-shadow(0 2px 0 rgba(117, 68, 0, .65));
    font-weight: 900;
    z-index: 2;
}

.shop-price-ribbon::before {
    content: "";
    position: absolute;
    inset: 5px 6px 20px;
    border: 2px solid rgba(255, 246, 190, .95);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    pointer-events: none;
}

.shop-price-ribbon::after {
    content: none;
}

.shop-price-ribbon span {
    position: relative;
    z-index: 1;
    font-size: 12px;
    line-height: 1;
}

.shop-price-ribbon strong {
    position: relative;
    z-index: 1;
    font-size: 22px;
    line-height: 1.08;
}

.shop-currency-card .shop-price-ribbon {
    left: 22px;
    width: 64px;
    height: 72px;
    padding: 9px 0 14px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
}

.shop-currency-card .shop-price-ribbon::before {
    inset: 4px 5px 16px;
    border-width: 2px;
}

.shop-currency-card .shop-price-ribbon span {
    font-size: 11px;
}

.shop-currency-card .shop-price-ribbon strong {
    font-size: 21px;
}

.shop-offer-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 31px;
    padding: 5px 30px 6px 14px;
    box-sizing: border-box;
    background: rgba(92, 45, 0, .82);
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
    z-index: 2;
}

.shop-offer-footer span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-offer-footer small {
    color: rgba(255, 255, 255, .86);
    font-size: 11px;
    white-space: nowrap;
}

.shop-offer-footer .fa {
    position: absolute;
    right: 12px;
    bottom: 8px;
    transition: transform .22s ease;
}

.shop-bundle-card.is-expanded .shop-offer-footer .fa,
.shop-currency-card.is-expanded .shop-offer-footer .fa,
.shop-subscription-card.is-expanded .shop-offer-footer .fa {
    transform: rotate(180deg);
}

.shop-bundle-detail[hidden] {
    display: none !important;
}

.shop-bundle-detail {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    list-style: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    background: #141819;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    transition: max-height .26s cubic-bezier(.22, .61, .36, 1), margin-top .26s cubic-bezier(.22, .61, .36, 1), opacity .18s ease, transform .26s cubic-bezier(.22, .61, .36, 1), border-color .18s ease;
    will-change: max-height, opacity, transform;
}

.shop-bundle-detail.is-open {
    max-height: var(--shop-detail-height, 1400px);
    margin-top: 14px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    border-color: rgba(255, 255, 255, .06);
}

.shop-bundle-detail > .shop-senior-hero,
.shop-bundle-detail > .shop-senior-detail-grid,
.shop-bundle-detail > .shop-senior-action-row {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .shop-bundle-detail,
    .shop-offer-footer .fa {
        transition: none;
    }
}

.shop-bundle-add-button {
    margin: 2px 0 0;
    min-height: 42px;
    background: #159a48;
    border: 2px solid #61d879;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
    text-transform: uppercase;
    font-weight: 900;
}

.shop-bundle-add-button:hover {
    background: #1fb95a;
}

.shop-bundle-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.shop-bundle-benefit {
    padding: 12px 14px;
    background: rgba(0, 0, 0, .32);
    border: 1px solid rgba(255, 255, 255, .06);
}

.shop-bundle-benefit strong {
    display: block;
    color: #ffd45a;
    font: 400 24px/1 'Roboto Condensed', sans-serif;
}

.shop-bundle-benefit span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .72);
    font-weight: 700;
}

.shop-senior-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 20px;
    align-items: start;
    padding: 20px 22px 18px;
    border-bottom: 1px solid rgba(255, 202, 70, .16);
    background: linear-gradient(90deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, .1));
}

.shop-senior-kicker {
    color: #f5d46b;
    font: 400 22px/1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.shop-senior-copy h3 {
    margin: 0;
    color: #ffd86a;
    font: 400 48px/.95 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #5c3500, 0 0 14px rgba(255, 187, 40, .25);
}

.shop-senior-discount {
    display: inline-block;
    margin: 10px 0 8px;
    padding: 6px 18px;
    color: #fff;
    font: 400 24px/1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    background: linear-gradient(180deg, #6130a0, #3a1769);
    border: 1px solid rgba(192, 127, 255, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.shop-senior-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-weight: 900;
    text-transform: uppercase;
}

.shop-senior-price-card {
    justify-self: end;
    min-width: 145px;
    padding: 14px 14px 18px;
    text-align: center;
    color: #ffd35b;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(59, 24, 86, .96), rgba(33, 14, 53, .98));
    border: 2px solid #b9872a;
    box-shadow: inset 0 0 0 1px rgba(255, 223, 112, .18);
}

.shop-senior-price-card span,
.shop-senior-price-card del,
.shop-senior-price-card strong {
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
}

.shop-senior-price-card span {
    font-size: 23px;
    line-height: 1.05;
}

.shop-senior-price-card del {
    margin: 8px 0;
    color: rgba(255, 255, 255, .54);
    font-size: 18px;
    line-height: 1;
}

.shop-senior-price-card strong {
    color: #ffe27a;
    font-size: 34px;
    line-height: 1;
}

.shop-senior-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 18px;
    padding: 18px 22px;
}

.shop-senior-benefit-list {
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 202, 70, .12);
}

.shop-senior-benefit {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 202, 70, .12);
}

.shop-senior-benefit:last-child {
    border-bottom: 0;
}

.shop-senior-benefit .fa {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd15b;
    font-size: 22px;
    border: 1px solid rgba(255, 203, 61, .55);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 193, 35, .18), rgba(0, 0, 0, .22));
}

.shop-senior-benefit strong {
    display: block;
    color: #ffd66a;
    font: 400 18px/1.1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.shop-senior-benefit span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .84);
    line-height: 1.32;
}

.shop-senior-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-senior-resource-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.shop-senior-resource {
    min-height: 98px;
    padding: 12px 8px;
    text-align: center;
    background: rgba(0, 0, 0, .34);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.shop-senior-resource img,
.shop-senior-resource .kx-shop-resource-icon {
    display: block;
    width: 27px;
    height: 27px;
    margin: 0 auto;
    image-rendering: auto;
}

.shop-senior-resource strong {
    display: block;
    margin-top: 6px;
    font: 400 26px/1 'Roboto Condensed', sans-serif;
}

.shop-senior-resource span {
    display: block;
    color: rgba(255, 255, 255, .72);
    font-weight: 900;
    text-transform: uppercase;
}

.shop-senior-resource.is-credits strong {
    color: #ffd15b;
}

.shop-senior-resource.is-diamonds strong {
    color: #45cfff;
}

.shop-senior-seat-card {
    padding: 18px 14px;
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .34));
    border: 1px solid rgba(255, 202, 70, .4);
}

.shop-senior-seat-card .fa {
    color: #ffd15b;
    font-size: 34px;
}

.shop-senior-seat-card strong {
    display: block;
    margin: 4px 0;
    color: #b86cff;
    font: 400 62px/.9 'Roboto Condensed', sans-serif;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .65);
}

.shop-senior-seat-card span {
    display: block;
    color: #fff;
    font: 400 22px/1.05 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.shop-senior-days {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, .32);
    border: 1px solid rgba(255, 255, 255, .08);
}

.shop-senior-days strong {
    color: #ffd15b;
    font: 400 32px/1 'Roboto Condensed', sans-serif;
}

.shop-senior-days span {
    color: rgba(255, 255, 255, .78);
    font-weight: 900;
    text-transform: uppercase;
}

.shop-senior-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 18px;
    align-items: center;
    padding: 15px 22px;
    background: linear-gradient(90deg, rgba(60, 20, 80, .78), rgba(28, 10, 43, .9));
    border-top: 1px solid rgba(255, 202, 70, .18);
}

.shop-senior-action-row > div {
    color: #ffd86a;
    font: 400 23px/1.1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.shop-senior-action-row .shop-bundle-add-button {
    margin: 0;
    min-height: 42px;
    background: #159a48;
    border: 2px solid #61d879;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
    text-transform: uppercase;
    font-weight: 900;
}

.shop-senior-action-row .shop-bundle-add-button:hover {
    background: #1fb95a;
}

.shop-bundle-simple-detail {
    padding: 14px;
    background: rgba(0, 0, 0, .12);
}

.shop-bundle-simple-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 16px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
}

.shop-bundle-simple-head h3 {
    margin: 0 0 5px;
    color: #fff;
    font: 400 24px/1.1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.shop-bundle-simple-head p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .74);
    line-height: 1.35;
    font-weight: 700;
}

.shop-bundle-simple-head .shop-bundle-add-button {
    margin: 0;
    min-height: 40px;
}

.shop-bundle-included {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.shop-bundle-resource {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 9px 10px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .07);
}

.shop-bundle-resource img,
.shop-bundle-resource .kx-shop-resource-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: contain;
    image-rendering: auto;
}

.shop-bundle-resource .fa {
    width: 24px;
    color: #ffd15b;
    font-size: 20px;
    text-align: center;
}

.shop-bundle-resource strong,
.shop-bundle-resource span {
    display: block;
}

.shop-bundle-resource strong {
    color: #fff;
    font: 400 22px/1 'Roboto Condensed', sans-serif;
}

.shop-bundle-resource span {
    margin-top: 2px;
    color: rgba(255, 255, 255, .64);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.shop-bundle-resource.is-credits strong {
    color: #ffd15b;
}

.shop-bundle-resource.is-diamonds strong {
    color: #45cfff;
}

.shop-bundle-resource.is-seats strong {
    color: #b86cff;
}

.shop-bundle-resource.is-queue strong {
    color: #ffd15b;
}

.shop-bundle-simple-detail .shop-bundle-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.shop-bundle-simple-detail .shop-bundle-benefit {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 10px 12px;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .06);
}

.shop-bundle-simple-detail .shop-bundle-benefit .fa {
    color: #ffd15b;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
}

.shop-bundle-simple-detail .shop-bundle-benefit span {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 1.32;
    font-weight: 700;
}

.shop-purchase-detail {
    padding: 20px 22px;
}

.shop-purchase-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 18px;
    align-items: start;
}

.shop-purchase-head h3 {
    margin: 0 0 8px;
    color: #fff;
    font: 400 26px/1.05 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.shop-purchase-price {
    margin: 0 0 12px;
    color: #fff;
    font: 400 38px/1 'Roboto Condensed', sans-serif;
}

.shop-purchase-head p,
.shop-purchase-step p {
    margin: 0;
    color: #bfefff;
    font-size: 14px;
    line-height: 1.45;
}

.shop-purchase-step {
    margin-top: 24px;
}

.shop-purchase-step h4 {
    margin: 0 0 12px;
    color: #fff;
    font: 400 24px/1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.shop-purchase-step p + p {
    margin-top: 12px;
}

.shop-purchase-step ol {
    margin: 0;
    padding-left: 22px;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 1.5;
}

.shop-purchase-step li {
    padding-left: 3px;
}

.shop-purchase-step li + li {
    margin-top: 3px;
}

.shop-purchase-step li strong {
    color: #fff;
}

.shop-purchase-step a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dotted rgba(110, 231, 183, .82);
}

.shop-purchase-step a:hover,
.shop-purchase-step a:focus-visible {
    color: #dffbed;
    border-bottom-color: #dffbed;
    outline: 0;
}

.shop-wallet-shortcut {
    padding: 0;
    border: 0;
    border-bottom: 1px dotted rgba(110, 231, 183, .82);
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: inherit;
    cursor: pointer;
}

.shop-wallet-shortcut:hover,
.shop-wallet-shortcut:focus-visible {
    border-bottom-color: #6ee7b7;
    color: #dffbed;
    outline: 0;
}

.shop-purchase-step .shop-purchase-cart-note {
    margin-top: 13px;
}

.shop-purchase-payment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 18px;
    align-items: center;
    margin-top: 22px;
    padding: 13px 16px;
    background: rgba(87, 124, 158, .52);
    border-radius: 4px;
}

.shop-purchase-payment-row span {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.shop-purchase-payment-row .shop-bundle-add-button {
    margin: 0;
}

.shop-product-description,
.shop-empty-section {
    color: rgba(255, 255, 255, .7);
    font-weight: 700;
}

.shop-offer-button {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.shop-offer-card:hover {
    filter: brightness(1.06);
}

.shop-empty-section {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 2px;
}

/* Option Titles */
[class~=option-title] {
    font-size: 1.2em;
    margin-bottom: .03125in;
}

/* Prices */
[class~=price], .buy-button {
    font-size: 1em;
}

[class~=price] .fa,
[class~=balance-amount] .fa,
.deposit-currency-pill .fa {
    margin-right: 4px;
}

/* Buttons */
.buy-button, [class~=option-item], #formDeposito button, #formRetiro button {
    color: white;
    padding: .625pc .15625in;
    width: 100%;
    border-radius: 3.75pt;
    cursor: pointer;
    transition: background-color .3s ease;
    border: none;
}

.buy-button {
	margin-top:10px;margin-bottom:5px;
    background-color: #323232;
}

.buy-button:hover {
    background-color: #a4a4a4;
}

#formDeposito button, #formRetiro button {
    background-color: #4e4e4e;
    padding: .375pc;
}

#formDeposito button:disabled, #formDeposito input:disabled,
#formRetiro button:disabled, #formRetiro input:disabled {
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .38) !important;
    cursor: not-allowed;
}

#formDeposito {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#formRetiro {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(26, 30, 33, .96), rgba(17, 18, 20, .94));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 24px rgba(0, 0, 0, .18);
}

#formRetiro.is-highlighted {
    border-color: rgba(52, 152, 219, .75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px rgba(52, 152, 219, .35), 0 12px 24px rgba(0, 0, 0, .18);
}

.deposit-help {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, .82);
    line-height: 1.45;
}

.deposit-help {
    font-size: .92em;
    color: rgba(255, 255, 255, .62);
}

.deposit-label {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    font-weight: bold;
}

#formDeposito[hidden],
#formRetiro[hidden] {
    display: none !important;
}

#formDeposito.is-hidden,
#formRetiro.is-hidden {
    display: none;
}

.deposit-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.deposit-currency-pill {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 4px;
    background: #202020;
    border: 1px solid #343434;
    color: #f2f2f2;
    white-space: nowrap;
}

.kx-shop-checkout-page #formDeposito .shop-payment-submit {
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 36px;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid rgba(255, 155, 0, .55);
    border-radius: 3px;
    background: rgba(255, 155, 0, .12);
    color: rgba(255, 255, 255, .9);
    box-sizing: border-box;
}

.shop-payment-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.shop-payment-footer .shop-payment-submit {
    width: 190px;
    justify-self: end;
}

.shop-payment-footer .deposit-help {
    margin: 0;
}

.shop-payment-footer .shop-payment-submit .fa {
    margin-right: 5px;
}

.kx-shop-checkout-page #formDeposito .shop-payment-submit:hover {
    background: rgba(255, 155, 0, .18);
}

.kx-shop-checkout-page #formDeposito .shop-payment-submit:disabled {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04) !important;
    color: rgba(255, 255, 255, .42) !important;
}

#formDeposito select,
#formRetiro select {
    height: 43px;
}

#formDeposito .shop-method-picker {
    flex: 0 0 43px;
    position: relative;
    z-index: 8;
}

#formDeposito .shop-method-picker > #manualMethod {
    height: 43px;
}

.shop-method-picker-trigger,
.shop-method-picker-menu {
    display: none;
}

.shop-method-picker-trigger[hidden] {
    display: none !important;
}

.shop-method-picker.is-enhanced > #manualMethod {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

.shop-method-picker.is-enhanced .shop-method-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 43px;
    height: 43px;
    padding: 7px 13px 7px 30px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 3px;
    background: #1c1c1c;
    box-shadow: inset 2px 0 0 var(--kx-primary-color, #ffae00);
    color: #fff;
    text-align: left;
    transition: border-color .16s ease, background-color .16s ease;
}

.shop-method-picker.is-enhanced .shop-method-picker-trigger:hover,
.shop-method-picker.is-enhanced.is-open .shop-method-picker-trigger,
.shop-method-picker.is-enhanced .shop-method-picker-trigger:focus {
    border-color: var(--kx-primary-color-border, rgba(255, 179, 0, .78));
    background: #202020;
    outline: 0;
}

.shop-method-picker-current,
.shop-method-picker-current > span {
    display: flex;
    align-items: center;
    min-width: 0;
}

.shop-method-picker-current {
    min-height: 100%;
    margin-left: 6px;
}

.shop-method-picker-current > span {
    flex: 1 1 auto;
    gap: 12px;
    min-height: 18px;
    min-width: 0;
    align-items: center;
}

.shop-method-picker-current strong,
.shop-method-picker-current small {
    display: block;
}

.shop-method-picker-current strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
}

.shop-method-picker-current small {
    flex: 0 1 auto;
    min-width: 0;
    margin-top: 0;
    padding: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(1px);
}

.shop-method-picker-trigger > .fa {
    flex: 0 0 auto;
    margin-left: 10px;
    color: rgba(255, 255, 255, .72);
}

.shop-method-picker.is-open .shop-method-picker-trigger > .fa {
    transform: rotate(180deg);
}

.shop-method-picker.is-enhanced .shop-method-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    display: block;
    max-height: 0;
    padding: 6px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px) scaleY(.985);
    transform-origin: top center;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 4px;
    background: #161718;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .42);
    transition: opacity .16s ease, transform .22s cubic-bezier(.22, .61, .36, 1), max-height .22s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .22s;
}

.shop-method-picker.is-enhanced.is-open .shop-method-picker-menu {
    max-height: min(360px, calc(100vh - 110px));
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scaleY(1);
    pointer-events: auto;
    transition: opacity .16s ease, transform .22s cubic-bezier(.22, .61, .36, 1), max-height .22s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
}

.shop-method-picker.is-enhanced .shop-method-picker-menu[hidden] {
    display: none !important;
}

.shop-method-picker-group {
    display: block;
    padding: 8px 8px 5px;
    color: var(--kx-primary-color, #ffae00);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shop-method-picker-option {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 45px;
    margin: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 3px;
    background: transparent !important;
    color: rgba(255, 255, 255, .88);
    text-align: left;
}

.shop-method-picker-option:hover,
.shop-method-picker-option:focus,
.shop-method-picker-option[aria-selected="true"] {
    background: rgba(255, 255, 255, .07) !important;
    color: #fff;
    outline: 0;
}

.shop-method-picker-option[aria-selected="true"] {
    box-shadow: inset 2px 0 0 var(--kx-primary-color, #ffae00);
}

.shop-method-picker-option.is-disabled {
    opacity: .42;
    cursor: not-allowed;
}

.shop-method-picker-option > span {
    display: block;
    min-width: 0;
}

.shop-method-picker-option strong,
.shop-method-picker-option small {
    display: block;
}

.shop-method-picker-option strong {
    color: inherit;
    font-size: 13px;
    line-height: 1.12;
}

.shop-method-picker-option small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
}

.shop-method-picker-option small .shop-method-option-tag {
    display: inline-block;
    margin-left: 2px;
    padding: 2px 5px;
    border: 1px solid rgba(142, 210, 251, .34);
    border-radius: 3px;
    background: rgba(142, 210, 251, .12);
    color: #8ed2fb;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    vertical-align: middle;
}

.shop-method-picker-option small .shop-method-option-tag .fa {
    margin-right: 3px;
    font-size: 9px;
}

.shop-method-picker-option small .shop-method-option-fee {
    color: rgba(255, 224, 145, .95);
    font-weight: 700;
}

.shop-method-picker-option small .shop-method-option-fee.is-zero-fee {
    color: #78e6b5;
}

.shop-method-picker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 18px;
}

.shop-method-picker-icon[src] {
    object-fit: contain;
}

.shop-method-picker-icon.is-heleket {
    color: var(--kx-primary-color, #f1c40f);
}

.shop-method-picker-icon.is-paypal {
    color: #69bff5;
}

.shop-method-picker-icon.is-binancepay {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.shop-method-picker-icon.is-usdc {
    width: 22px;
    height: 22px;
}

.shop-method-picker-icon.is-special {
    color: #2ecc71;
}

.shop-method-picker-icon.is-paypal-transfer {
    color: #8ed2fb;
    font-size: 15px;
}

.gateway-method-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(46px, auto);
    flex: 1 1 auto;
    row-gap: 8px;
    min-height: 0;
    margin-top: 12px;
    padding: 12px 9px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, .76);
    text-align: left;
}

.gateway-method-info[hidden] {
    display: none !important;
}

.gateway-method-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 4px 0 8px;
}

.gateway-method-info strong,
.gateway-method-info p,
.gateway-method-info small,
.gateway-method-kicker,
.gateway-method-accreditation {
    display: block;
}

.gateway-method-info strong {
    margin: 7px 0 5px 29px;
    color: #fff;
    font-size: 15px;
}

.gateway-method-heading {
    flex: 0 0 auto;
}

.gateway-method-info p {
    flex: 0 0 auto;
    max-width: none;
    /* Alinea la explicación con el bloque textual a la derecha del icono. */
    margin: 0 14px 0 31px;
    font-size: 13px;
    line-height: 1.34;
}

.gateway-method-copy-line {
    display: block;
}

.gateway-method-copy-line + .gateway-method-copy-line {
    margin-top: 5px;
}

.gateway-method-info p b {
    color: rgba(255, 255, 255, .92);
    font-weight: 700;
}

.gateway-method-status {
    flex: 0 0 auto;
}

.gateway-method-kicker {
    position: relative;
    min-height: 20px;
    padding-left: 29px;
    color: var(--kx-primary-color, #f1c40f);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gateway-method-kicker .fa {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 23px;
    margin: 0;
    color: var(--kx-primary-color, #f1c40f);
    font-size: 20px;
    line-height: 1;
    text-align: center;
    transform: translateY(-50%);
}

.gateway-method-kicker-icon {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 23px;
    height: 23px;
    object-fit: contain;
    transform: translateY(-50%);
}

.gateway-method-info[data-gateway-info="paypal"] .gateway-method-kicker {
    color: #8ed2fb;
}

.gateway-method-info[data-gateway-info="paypal"] .gateway-method-kicker .fa {
    color: #69bff5;
}

.gateway-method-info[data-gateway-info="binancepay"] .gateway-method-kicker {
    color: #f3ba2f;
}

.gateway-method-info[data-gateway-info="heleket"] .gateway-method-kicker,
.gateway-method-info[data-gateway-info="heleket"] .gateway-method-flow b {
    color: #f21818;
}

.gateway-method-accreditation {
    position: relative;
    min-height: 20px;
    padding-left: 29px;
    margin-top: 10px;
    color: #6ee7b7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 20px;
    text-transform: uppercase;
}

.gateway-method-accreditation .fa {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 23px;
    margin: 0;
    text-align: center;
    transform: translateY(-50%);
}

.gateway-method-info small {
    margin-top: 12px;
    color: rgba(255, 255, 255, .48);
    font-size: 11px;
    line-height: 1.35;
}

.gateway-method-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: calc(100% + 16px);
    margin: 0 -8px;
    min-height: 46px;
    padding: 5px 0 0;
    border-top: 1px dashed rgba(255, 255, 255, .1);
    box-sizing: border-box;
    list-style: none;
    align-content: center;
    text-align: center;
}

.gateway-method-flow li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 38px;
    padding: 0 3px;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    transform: translateY(3px);
}

.gateway-method-flow b,
.gateway-method-flow span {
    display: block;
}

.gateway-method-flow b {
    margin-bottom: 3px;
    color: var(--kx-primary-color, #f1c40f);
    font: 700 12px/1 Consolas, Monaco, monospace;
}

.gateway-method-info[data-gateway-info="paypal"] .gateway-method-flow b {
    color: #8ed2fb;
}

.gateway-method-info[data-gateway-info="binancepay"] .gateway-method-flow b {
    color: #f3ba2f;
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-icon[src],
.kx-shop-checkout-page #formDeposito .gateway-method-kicker-icon {
    transform: translateX(3px);
}

.kx-shop-checkout-page #formDeposito .gateway-method-kicker-icon {
    transform: translate(3px, -50%);
}

.manual-payment-fields {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 10px 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

.manual-method-fields {
    margin-top: 10px;
}

.manual-base-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(241, 196, 15, .3);
    border-radius: 4px;
    background: rgba(241, 196, 15, .09);
    color: rgba(255, 220, 120, .96);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.35;
    text-align: center;
}

.manual-base-warning .fa {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 0;
    color: #f1c40f;
    font-size: 20px;
    line-height: 22px;
}

.manual-base-warning strong {
    color: #fff2b3;
}

.manual-method-fields .deposit-label {
    margin-top: 10px;
}

.manual-method-fields[data-manual-method="usdc_transfer"],
.manual-method-fields[data-manual-method="special_request"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.manual-method-fields[data-manual-method="usdc_transfer"] {
    justify-content: flex-start;
}

.manual-method-fields[data-manual-method="special_request"] {
    justify-content: flex-start;
    gap: 15px;
}

.manual-paypal-fields {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 26px;
    min-height: 0;
}

.manual-paypal-target {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px;
    padding: 11px 13px;
    border-left: 0;
    border-radius: 4px;
    background: rgba(34, 34, 34, .94);
    text-align: center;
}

.manual-paypal-target span {
    margin: 0;
    color: #6ee7b7;
    font-size: 13px;
}

.manual-paypal-target strong {
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
}

.manual-paypal-evidence-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    margin-top: 0;
}

.manual-paypal-field {
    min-width: 0;
}

.manual-paypal-field .deposit-label {
    margin-top: 0;
    line-height: 1.25;
}

.manual-paypal-note {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: .92em;
    line-height: 1.4;
}

.manual-txid-field {
    margin-top: 0;
    padding-top: 0;
}

.phone-country-field .deposit-label {
    margin-top: 0;
}

.phone-country-grid .deposit-label {
    margin-bottom: 4px;
}

#formDeposito .phone-country-grid select,
#formDeposito .phone-country-grid input[type="tel"] {
    height: 32px;
    padding: 6px 8px;
}

.phone-country-field > .deposit-help {
    margin-top: 12px;
    margin-bottom: 0;
}

.manual-method-fields[data-manual-method="special_request"] .phone-country-field {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
}

.manual-method-fields[data-manual-method="special_request"] .phone-country-grid {
    align-items: end;
    margin-top: 0;
}

.special-request-overview {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin: 10px 0 14px;
    padding: 10px 11px;
    border: 1px solid rgba(52, 152, 219, .35);
    border-left: 2px solid rgba(52, 152, 219, .8);
    border-radius: 3px;
    background: rgba(52, 152, 219, .075);
    color: rgba(255, 255, 255, .78);
    line-height: 1.35;
}

.special-request-overview > .fa {
    padding-top: 1px;
    color: #69bff5;
    font-size: 19px;
    text-align: center;
}

.special-request-overview strong,
.special-request-overview span {
    display: block;
}

.special-request-overview strong {
    margin-bottom: 3px;
    color: #fff;
    font-size: 13px;
}

.special-request-overview b {
    color: rgba(255, 255, 255, .94);
}

.special-request-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 10px 11px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .78);
}

.special-request-contact > .fa {
    flex: 0 0 22px;
    width: 22px;
    color: #4fd67b;
    font-size: 22px;
    text-align: center;
}

.special-request-contact p {
    margin: 0;
    line-height: 1.32;
}

.special-request-contact strong,
.special-request-contact span {
    display: block;
}

.special-request-contact strong {
    margin-bottom: 2px;
    color: #fff;
    font-size: 13px;
}

.phone-country-grid {
    display: grid;
    grid-template-columns: 18px 100px 60px minmax(0, 1fr);
    gap: 7px;
}

.phone-country-field select,
.phone-country-field input {
    height: 43px;
}

.phone-prefix-control {
    display: block;
}

.phone-prefix-control select {
    width: 100%;
    padding-left: 8px;
    padding-right: 10px;
}

.phone-prefix-flag {
    position: static;
    width: 18px;
    height: 13px;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

.phone-prefix-flag-cell {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 9px;
}

.phone-prefix-flag[hidden] {
    display: none !important;
}

.phone-country-field.is-manual-dial .phone-prefix-control select {
    padding-left: 10px;
}

.phone-country-field.is-manual-dial .phone-prefix-control {
    display: block;
}

@media (max-width: 600px) {
    .shop-payment-footer {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .shop-payment-footer .shop-payment-submit {
        width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 520px) {
    .phone-country-grid {
        grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr);
    }

    .phone-country-grid > :last-child {
        grid-column: 1 / -1;
    }

    .manual-paypal-evidence-grid {
        grid-template-columns: 1fr;
    }
}

.manual-payment-target {
    margin: 10px 0 12px;
    padding: 3px 0 3px 12px;
    border: 0;
    border-left: 3px solid rgba(46, 204, 113, .66);
    background: transparent;
    color: rgba(255, 255, 255, .72);
    text-align: left;
}

.manual-usdc-target {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    margin: 8px 0 12px;
    padding: 11px 13px;
    border-left: 0;
    border-radius: 4px;
    background: rgba(34, 34, 34, .94);
    box-shadow: none;
    text-align: center;
}

.manual-usdc-target .manual-copy-wallet {
    margin-top: 8px;
}

.manual-payment-target span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #6ee7b7;
}

.manual-payment-target strong {
    display: block;
    color: #fff;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: left;
    font-family: Consolas, Monaco, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
}

#formDeposito .manual-usdc-target,
#formDeposito .manual-paypal-target {
    margin: 0;
    padding: 11px 13px;
    border: 0;
    border-radius: 4px;
    background: rgba(34, 34, 34, .94);
    box-shadow: none;
    text-align: center;
}

#formDeposito .manual-paypal-target {
    margin-bottom: 16px;
}

.manual-usdc-target span,
.manual-usdc-target strong,
.manual-paypal-target span,
.manual-paypal-target strong {
    text-align: center;
}

.manual-method-fields[data-manual-method="special_request"] .special-request-overview,
.manual-method-fields[data-manual-method="special_request"] .special-request-contact {
    margin: 0;
}

.manual-method-fields[data-manual-method="special_request"] .special-request-overview {
    margin-top: 6px;
}

.manual-method-fields[data-manual-method="usdc_transfer"] .manual-base-warning {
    margin: 12px 0;
}

.manual-method-fields[data-manual-method="usdc_transfer"] .manual-txid-field {
    margin-top: auto;
}

#formDeposito .manual-copy-wallet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 9px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(46, 204, 113, .38);
    border-radius: 3px;
    color: #dffbed;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(46, 204, 113, .14);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#formDeposito .manual-copy-wallet:hover {
    border-color: rgba(46, 204, 113, .58);
    background: rgba(46, 204, 113, .22);
}

#formDeposito .manual-copy-wallet:disabled {
    cursor: not-allowed;
    opacity: .45;
}

#formDeposito .manual-copy-wallet.is-highlighted {
    animation: shop-wallet-copy-highlight 1.05s cubic-bezier(.22, .61, .36, 1) 2;
}

@keyframes shop-wallet-copy-highlight {
    0%, 100% {
        border-color: rgba(46, 204, 113, .38);
        background: rgba(46, 204, 113, .14);
        box-shadow: none;
        transform: translateY(0);
    }

    28%, 62% {
        border-color: #8cf5c2;
        background: rgba(46, 204, 113, .28);
        box-shadow: 0 0 0 3px rgba(110, 231, 183, .2), 0 0 20px rgba(46, 204, 113, .4);
        transform: translateY(-1px);
    }
}

/* Balance Display */
[class~=balance-display] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    font-size: 1.4em;
    color: #fff;
    background: rgba(34, 34, 34, .94);
    margin-bottom: 14px;
    border-radius: 6px;
}

[class~=balance-amount] {
    font-weight: bold;
    color: #2ecc71;
}

.shop-cart-summary {
    margin-bottom: 14px;
}

.shop-cart-empty {
    display: block;
    padding: 12px;
    color: rgba(255, 255, 255, .58);
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 4px;
    font-weight: 700;
}

.shop-cart-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    color: rgba(255, 255, 255, .86);
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 4px;
}

.shop-cart-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.shop-cart-label img,
.shop-cart-label .kx-shop-cart-icon {
    display: block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: contain;
    flex: 0 0 auto;
}

.shop-cart-label span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.shop-cart-row strong {
    color: #ffd37a;
    white-space: nowrap;
}

.shop-cart-remove {
    width: 28px !important;
    min-width: 28px;
    height: 26px;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: rgba(255, 255, 255, .7) !important;
}

.shop-cart-remove:hover {
    background: rgba(231, 76, 60, .22) !important;
    color: #fff !important;
}

.shop-cart-total {
    margin-bottom: 0;
    border: 0;
    background: rgba(34, 34, 34, .94);
    box-shadow: none;
}

.shop-cart-total .balance-amount {
    color: #2ecc71;
}

.shop-cart-empty-label {
    color: rgba(255, 255, 255, .65);
    font-size: .78em;
    font-weight: 700;
}

.shop-cart-total.is-empty .shop-cart-total-link {
    color: rgba(255, 255, 255, .44);
    font-size: .78em;
    font-weight: 700;
    border-bottom-color: rgba(255, 255, 255, .22);
}

.shop-cart-total.is-empty .shop-cart-total-link:hover,
.shop-cart-total.is-empty .shop-cart-total-link:focus {
    color: rgba(255, 255, 255, .7);
    border-bottom-color: rgba(255, 255, 255, .48);
}

.shop-cart-total-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    color: #2ecc71;
    text-decoration: none;
    border-bottom: 1px dotted rgba(46, 204, 113, .6);
    cursor: pointer;
}

.shop-usdc-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    vertical-align: middle;
}

.shop-cart-modal-total .shop-usdc-icon,
.shop-cart-row-price .shop-usdc-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

.shop-cart-modal-total strong,
.shop-cart-row-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.shop-purchase-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-purchase-price .shop-usdc-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.shop-cart-total-link:hover,
.shop-cart-total-link:focus {
    color: #6ff0a0;
    border-bottom-color: #6ff0a0;
    outline: 0;
}

.shop-cart-modal[hidden] {
    display: none !important;
}

.shop-cart-modal {
    position: fixed;
    z-index: 100050;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.shop-cart-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
}

.shop-cart-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(540px, 100%);
    max-height: min(620px, calc(100vh - 40px));
    overflow: auto;
    background: #15191a;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.shop-cart-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 14px 0 17px;
    border-bottom: 1px dashed rgba(255, 255, 255, .1);
}

.shop-cart-modal-header h2 {
    margin: 0;
    color: #fff;
    font: 400 22px/1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.shop-cart-modal-close {
    width: 32px;
    height: 30px;
    padding: 0;
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    cursor: pointer;
}

.shop-cart-modal-close:hover,
.shop-cart-modal-close:focus {
    color: #fff;
    background: rgba(231, 76, 60, .28);
    outline: 0;
}

.shop-cart-modal-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
}

.shop-cart-modal-pricing {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 14px 10px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .07);
}

.shop-cart-modal-pricing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 12px;
    line-height: 1.25;
}

.shop-cart-modal-pricing-row strong {
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    white-space: nowrap;
}

.shop-cart-modal-pricing-row.is-fee {
    color: #e6bd63;
}

.shop-cart-modal-pricing-row.is-fee strong {
    color: #f0c75d;
}

.shop-cart-modal-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 14px 14px;
    padding: 13px 14px;
    color: rgba(255, 255, 255, .9);
    background: rgba(34, 34, 34, .94);
    border-top: 1px solid rgba(255, 255, 255, .05);
}

.shop-cart-modal-total strong {
    color: #2ecc71;
    font-size: 18px;
}

/* One persistent cart above the existing assistant; never a page-local cart. */
.kx-shop-cart-toggle {
    position: fixed;
    right: 20px;
    bottom: 82px;
    z-index: 2147482499;
}
.kx-shop-cart-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 10px;
    background: #e4951e;
    color: #111214;
    font: 700 11px/19px 'Roboto', sans-serif;
    text-align: center;
    box-sizing: border-box;
}
.kx-shop-cart-badge[hidden] { display: none; }
html:not(.kx-js) [data-kx-shop-cart-shell] { display: none; }
body.kx-hotel-visible [data-kx-shop-cart-shell] { display: none; }
[data-kx-shop-cart-shell].is-assistant-open .kx-shop-cart-toggle { visibility: hidden; }
[data-kx-shop-cart-shell] .shop-cart-modal { z-index: 2147482600; }
.shop-cart-quantity {
    width: 44px;
    min-width: 44px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: #222326;
    color: #fff;
    font: inherit;
}
.shop-cart-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 14px 16px;
}
.shop-cart-modal-notice {
    margin: 0 14px 12px;
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
}
[data-kx-shop-cart-shell] .kx-inline-asset--shop-credits,
.shop-cart-products-modal .kx-inline-asset--shop-credits {
    background-image: var(--kx-shop-credits-image, url('/cdn/img/shop/credits.png'));
}
[data-kx-shop-cart-shell] .kx-inline-asset--shop-diamonds,
.shop-cart-products-modal .kx-inline-asset--shop-diamonds {
    background-image: var(--kx-shop-diamonds-image, url('/cdn/img/shop/diamonds.png'));
}
.kx-shop-checkout-page .shop-cart-row {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 8px;
}
.kx-shop-checkout-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 0 5px;
    box-sizing: border-box;
}
.kx-shop-checkout-page > .grid_12 {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
}
.kx-shop-checkout-page::before,
.kx-shop-checkout-page::after { content: none; display: none; }
.kx-shop-checkout-page #shopCheckoutRetry[hidden],
.shop-cart-products-modal #shopCheckoutRetry[hidden],
.shop-cart-products-modal #shopCheckoutStatus[hidden],
[data-kx-shop-cart-shell] .shop-cart-modal-pricing[hidden] { display: none; }
.kx-shop-checkout-page .shop-cart-row.is-unavailable { color: rgba(255, 255, 255, .55); }
.kx-shop-checkout-page #shopCheckoutStatus { min-height: 18px; }
.kx-shop-checkout-page .shop-checkout-summary { margin-bottom: 20px; }
.kx-shop-checkout-page .shop-checkout-pricing-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
}
@media (max-width: 600px) {
    .kx-shop-cart-toggle { right: 12px; bottom: 76px; }
    [data-kx-shop-cart-shell] .shop-cart-modal { padding: 12px; }
    [data-kx-shop-cart-shell] .shop-cart-row { grid-template-columns: minmax(0, 1fr) 28px; }
    [data-kx-shop-cart-shell] .shop-cart-row-price { grid-column: 1; grid-row: 2; }
    [data-kx-shop-cart-shell] .shop-cart-remove { grid-column: 2; grid-row: 1 / span 2; }
}


[class~=gotw-balance-amount] {
    font-weight: bold;
    color: rgb(182, 133, 255);
}

/* Balance Actions */
.balance-actions {
    display: flex;
    justify-content: stretch;
    gap: 1.25pc;
    margin: 0 0 12px;
}

/* Deposit Button */
[class~=deposit-button] {
    padding: .625pc;
	color: white;
    width: auto;
    flex: 1 1 0;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color .3s ease;
    border: none;
    cursor: pointer;
}

.balance-actions.has-withdrawal {
    gap: 10px;
}

.balance-actions .deposit-button {
    width: 100%;
    flex-basis: 100%;
}

.balance-actions.has-withdrawal .deposit-button {
    flex-basis: 0;
}

.deposit-button {
    background-color: #3498db;
}

.deposit-button:hover {
    background-color: #2980b9;
}

.deposit-button.is-selected {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 18px rgba(52, 152, 219, .18);
}

.withdraw-button {
    background-color: #2d2d2d;
}

.withdraw-button:hover {
    background-color: #3a3a3a;
}

.withdrawal-balance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 12px;
}

.withdrawal-balance-grid div,
.withdrawal-quote-box {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .035);
    border-radius: 4px;
}

.withdrawal-balance-grid span,
.withdrawal-quote-box span {
    display: block;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.withdrawal-balance-grid strong,
.withdrawal-quote-box strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 16px;
}

.withdrawal-quote-box {
    margin: 12px 0 10px;
    border-color: rgba(255, 166, 0, .28);
    background: rgba(255, 166, 0, .07);
}

.withdrawal-quote-box strong {
    color: #ffd37a;
}

.deposit-help.is-warning {
    color: #ffd37a;
}

/* VIP Subscription Box */
[class~=vip-subscription-box] {
    padding: 16px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid #333;
    border-radius: .020833333in;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    overflow: hidden;
    position: relative;
}

[class~=vip-subscription-box]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://i.imgur.com/sFeiv65.png');
    background-position: center;
    background-size: cover;
    opacity: .16;
    pointer-events: none;
}

[class~=vip-subscription-box] > * {
    position: relative;
    z-index: 1;
}

.vip-offers-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vip-benefits-content {
    position: relative;
}

.vip-benefits-image {
    float: right;
    margin: 0 0 10px 18px;
    max-width: 150px;
    height: auto;
}

.vip-benefits-intro {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, .86);
    line-height: 1.55;
}

.vip-benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vip-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
}

.vip-benefits-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.vip-benefits-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: rgba(255, 166, 0, .14);
    color: #ffcf73;
    font-size: 15px;
    box-shadow: inset 0 0 0 1px rgba(255, 166, 0, .12);
}

.vip-benefits-text {
    color: rgba(255, 255, 255, .88);
    line-height: 1.35;
}

.vip-offers-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vip-offer-box {
    align-items: stretch;
}

.vip-offer-box:hover {
    background: rgba(0, 0, 0, .42);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
    transform: translateY(-2px);
}

.vip-offer-box .kx-senior-badge,
.vip-status-box .kx-senior-badge {
    align-self: center;
    margin: 2px 0 0;
}

.vip-offer-topline,
.vip-status-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
}

.vip-offer-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 166, 0, .12);
    color: #ffd38a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.vip-offer-badge.is-featured {
    background: rgba(255, 166, 0, .18);
    color: #ffe6b7;
}

.vip-status-meta {
    font-size: 11px;
    color: #d6d6d6;
}

.vip-status-box {
    align-items: stretch;
    text-align: left;
}

.vip-status-minimal {
    align-items: center;
    text-align: center;
}

.vip-status-minimal .vip-status-topline {
    justify-content: center;
}

.vip-status-box .vip-description p {
    margin: 0;
    text-align: left;
    line-height: 1.45;
    font-size: 13px;
}

.vip-status-minimal .vip-description p {
    text-align: center;
}

.vip-status-infinite .vip-status-meta {
    color: #ffe6b7;
}

.vip-status-incompatible {
    align-items: stretch;
    text-align: left;
}

.vip-offer-title {
    color: #fff;
    font: 400 24px 'Roboto Condensed', sans-serif;
    line-height: 1;
}

.vip-offer-pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.vip-offer-price {
    color: #fff;
    font: 700 30px/1 'Roboto Condensed', sans-serif;
}

.vip-offer-price-old {
    color: rgba(255, 255, 255, .62);
    font: 700 16px/1 'Roboto Condensed', sans-serif;
    text-decoration: line-through;
}

.vip-description {
    width: 100%;
}

/* VIP Buttons */
.vip-subscription-active {
    border: .0625pc solid #ffa600;
    animation: borderPulse 10s infinite;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255, 166, 0, .12), 0 8px 18px rgba(255, 166, 0, .08);
}

.buy-vip-button {
    padding: 10px 12px;
    width: 100%;
    cursor: pointer;
    border-radius: 3.75pt;
    font-size: 1em;
    background: #323232;
    border: none;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .2px;
    transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}

.buy-vip-button:hover {
    background-color: #a4a4a4;
    color: #ffffff;
}

.buy-vip-button:disabled {
    opacity: .65;
    cursor: default;
}

/* VIP Description */
[class~=vip-description] p {
    color: #fff;
    font-size: 1.1em;
}

.vip-offer-copy {
    margin: 0;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 12px !important;
    line-height: 1.45;
}

/* Animations */
@keyframes borderPulse {
    0% {
        border-color: #ffa600;
    }
    50% {
        border-color: #f39c12;
    }
    100% {
        border-color: #ffa600;
    }
}

/* Payment selector: keep the cart accent neutral across site themes. */
.kx-memberships-page .shop-membership-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.kx-memberships-page .shop-membership-card {
    width: auto;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .10);
}
.kx-memberships-page .shop-membership-card h2 { margin: 0 0 12px; font-size: 22px; }
.kx-memberships-page .shop-membership-card p { line-height: 1.5; }
.kx-memberships-page .shop-draft-label { color: #cbbd92; font-size: 12px; }
.kx-shop-checkout-page #contentBox > .title.small { min-height: 40px; box-sizing: border-box; }
@media (max-width: 900px) {
    .container_24.kx-shop-page[data-kx-shop-catalog],
    .container_24.kx-memberships-page,
    .container_24.kx-shop-checkout-page {
        width: calc(100vw - 24px);
        margin-left: 12px;
        margin-right: 12px;
        box-sizing: border-box;
    }
    .kx-shop-page[data-kx-shop-catalog] > .grid_13,
    .kx-memberships-page > .grid_24 {
        float: none;
        display: block;
        width: auto;
        margin: 0;
    }
    .kx-shop-page[data-kx-shop-catalog] .shop-currency-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kx-memberships-page .shop-membership-list { grid-template-columns: 1fr; }
    .kx-shop-checkout-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .kx-shop-page[data-kx-shop-catalog] .shop-currency-list { grid-template-columns: 1fr; }
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-trigger {
    box-shadow: inset 2px 0 0 #fff;
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-trigger:hover,
.kx-shop-checkout-page #formDeposito .shop-method-picker.is-open .shop-method-picker-trigger,
.kx-shop-checkout-page #formDeposito .shop-method-picker-trigger:focus {
    border-color: #fff;
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-group {
    color: #fff;
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-option {
    gap: 11px;
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-option[data-shop-method-value="heleket"][aria-selected="true"] {
    box-shadow: inset 2px 0 0 #f21818;
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-option[data-shop-method-value="binancepay"][aria-selected="true"] {
    box-shadow: inset 2px 0 0 #f3ba2f;
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-option[data-shop-method-value="paypal"][aria-selected="true"] {
    box-shadow: inset 2px 0 0 #69bff5;
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-option[data-shop-method-value="usdc_transfer"][aria-selected="true"] {
    box-shadow: inset 2px 0 0 #0b53bf;
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-option[data-shop-method-value="special_request"][aria-selected="true"] {
    box-shadow: inset 2px 0 0 #2ecc71;
}

.kx-shop-checkout-page #formDeposito .shop-method-picker-option[data-shop-method-value="paypal_transfer"][aria-selected="true"] {
    box-shadow: inset 2px 0 0 #8ed2fb;
}

/* Special-request notice mirrors the neutral payment selector treatment. */
.kx-shop-checkout-page #formDeposito .special-request-overview {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-left: 2px solid #fff;
    border-radius: 5px;
    background: #4f4f4f;
}

/* The global cart holds payment; clicking its total opens the products modal. */
[data-kx-shop-cart-shell] .kx-shop-cart-panel {
    inset: auto 20px 18px auto;
    display: block;
    padding: 0;
    width: min(480px, calc(100vw - 24px));
    height: min(700px, calc(100dvh - 28px));
    font-family: 'Roboto', sans-serif;
}
[data-kx-shop-cart-shell] .kx-shop-cart-panel[hidden] { display: none; }
[data-kx-shop-cart-shell] .shop-cart-modal-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: none;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: #191a1c;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), 0 2px 7px rgba(0, 0, 0, .28);
    transform-origin: right bottom;
    animation: kx-cart-panel-open .24s cubic-bezier(.2, .75, .25, 1) both;
}
[data-kx-shop-cart-shell] .shop-cart-modal-header {
    flex: 0 0 auto;
    min-height: 52px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 16px;
    background: #121416;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
}
[data-kx-shop-cart-shell] .shop-cart-modal-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font: 400 18px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}
[data-kx-shop-cart-shell] .shop-cart-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border-color: transparent;
    background: transparent;
    color: #bfc0c2;
}
body.kx-shop-cart-open .kx-shop-cart-toggle { display: none; }
.shop-cart-panel-scroll {
    min-height: 0;
    flex: 1 1 auto;
    padding: 22px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-color: #393b3e #191a1c;
    scrollbar-width: thin;
}
.shop-cart-panel-loading { padding: 24px 4px; color: #bfc0c2; line-height: 1.5; }
.shop-cart-panel-retry { margin: 0 4px; }
[data-kx-shop-cart-shell] .kx-shop-checkout-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 24px;
}
[data-kx-shop-cart-shell] .kx-shop-checkout-page > .grid_12 { width: 100%; }
[data-kx-shop-cart-shell] .kx-shop-checkout-page .infoBox {
    width: auto;
    margin: 0;
    border: 0;
    background: transparent;
}
[data-kx-shop-cart-shell] .kx-shop-checkout-page .title.small {
    background: transparent;
    min-height: 0;
    padding: 0 0 16px;
    font-size: 18px;
}
[data-kx-shop-cart-shell] .kx-shop-checkout-page .shop-section-body,
[data-kx-shop-cart-shell] .kx-shop-checkout-page .png15 { padding: 0; }
.shop-cart-products-modal #shopCheckoutStatus {
    margin: 0 0 12px;
    font-size: 12px;
    color: #a6a8ab;
    line-height: 1.4;
}
[data-kx-shop-cart-shell] #shopCheckoutItems { margin: 0 0 12px; }
[data-kx-shop-cart-shell] .shop-cart-row {
    grid-template-columns: minmax(0, 1fr) 86px auto 24px;
    gap: 6px;
    padding: 10px 8px;
    margin-bottom: 8px;
    background: #121416;
    border-color: rgba(255, 255, 255, .07);
    border-radius: 6px;
}
[data-kx-shop-cart-shell] .shop-cart-label { gap: 7px; }
[data-kx-shop-cart-shell] .shop-cart-label span:not(.kx-shop-cart-icon) {
    white-space: normal;
    line-height: 1.35;
    font-size: 12px;
}
[data-kx-shop-cart-shell] .shop-cart-row-price {
    font-size: 12px;
    grid-column: auto;
    grid-row: auto;
}
[data-kx-shop-cart-shell] .shop-cart-remove {
    grid-column: auto;
    grid-row: auto;
    width: 24px !important;
    min-width: 24px;
    background: transparent;
    border: none;
    color: #92969b;
}
.shop-cart-quantity-control {
    display: flex;
    align-items: center;
    height: 40px;
    border: 1px solid #383b3f;
    border-radius: 5px;
    background: #222326;
    overflow: hidden;
}
.shop-cart-quantity-control button {
    flex: 0 0 32px;
    width: 32px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #bfc0c2;
    font: 600 16px 'Roboto', sans-serif;
    cursor: pointer;
}
.shop-cart-quantity-control button:hover:not(:disabled) { background: #343639; color: #fff; }
.shop-cart-quantity-control button:disabled { opacity: .35; cursor: default; }
.shop-cart-quantity-control .shop-cart-quantity {
    min-width: 0;
    width: 42px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    text-align: center;
    font: 700 14px 'Roboto', sans-serif;
    appearance: textfield;
    box-sizing: border-box;
}
.shop-cart-quantity::-webkit-inner-spin-button,
.shop-cart-quantity::-webkit-outer-spin-button { appearance: none; margin: 0; }
.shop-cart-quantity-control:focus-within { border-color: var(--kx-primary-color, #ff9b00); }
.shop-cart-products-modal .shop-cart-modal-pricing-row { padding: 12px 2px; font-size: 13px; }
.shop-cart-products-modal #shopCheckoutFeeLabel { color: #e6bd63; }
.shop-cart-products-modal #shopCheckoutFee { color: #f0c75d; }
[data-kx-shop-cart-shell] .shop-cart-modal-total {
    margin: 0 0 24px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 5px;
    background: #222326;
}
[data-kx-shop-cart-shell] .kx-shop-checkout-page p { font-size: 13px; line-height: 1.6; color: #a6a8ab; }
[data-kx-shop-cart-shell] .shop-payment-footer { margin-top: 20px; }
[data-kx-shop-cart-shell] .kx-shop-checkout-page #formDeposito .shop-payment-submit {
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    height: auto;
    padding: 12px 16px;
    box-sizing: border-box;
}
[data-kx-shop-cart-shell] #contentBox .manual-payment-fields { gap: 20px; }
[data-kx-shop-cart-shell] #contentBox {
    background: transparent;
    border: 0;
    box-shadow: none;
}
[data-kx-shop-cart-shell] #contentBox > .title.small {
    min-height: 0;
    padding: 0 0 16px;
    background: transparent;
    font: 400 16px 'Roboto Condensed', sans-serif;
}
[data-kx-shop-cart-shell] #contentBox > .png15 { padding: 0; }
[data-kx-shop-cart-shell] .kx-shop-checkout-page a {
    color: #bfc0c2;
    text-decoration: none;
}
[data-kx-shop-cart-shell] .kx-shop-checkout-page a:hover { color: var(--kx-primary-color, #ff9b00); }
[data-kx-shop-cart-shell] #formDeposito .shop-method-picker { flex-basis: auto; }
[data-kx-shop-cart-shell] #formDeposito .shop-method-picker > .deposit-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
[data-kx-shop-cart-shell] #formDeposito .shop-method-picker-trigger {
    position: relative;
    height: auto;
    min-height: 64px;
    padding: 12px 16px 12px 22px;
    border-color: #383b3f;
    border-radius: 5px;
    background: #222326;
    box-shadow: none;
}
[data-kx-shop-cart-shell] #formDeposito .shop-method-picker-trigger::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 3px;
    background: #fff;
    pointer-events: none;
}
[data-kx-shop-cart-shell] .shop-method-picker-current { margin-left: 0; }
[data-kx-shop-cart-shell] .shop-method-picker-current > span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
[data-kx-shop-cart-shell] .shop-method-picker-current small {
    transform: none;
    white-space: normal;
    text-overflow: clip;
    font-weight: 400;
    line-height: 1.35;
}
[data-kx-shop-cart-shell] #formDeposito .manual-paypal-fields { padding-top: 0; }
[data-kx-shop-cart-shell] .shop-payment-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
[data-kx-shop-cart-shell] .shop-cart-quantity:focus { outline: none; }
[data-kx-shop-cart-shell] #contentBox input[type="text"],
[data-kx-shop-cart-shell] #contentBox input[type="tel"] { box-sizing: border-box; max-width: 100%; }
.shop-checkout-panel-notice { padding: 16px; }
@keyframes kx-cart-panel-open {
    from { opacity: 0; transform: translateY(12px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
    /* Keep the existing top-left Logs/FM chrome clear of the panel title. */
    [data-kx-shop-cart-shell] .kx-shop-cart-panel { right: 12px; bottom: 12px; height: min(700px, calc(100dvh - 64px)); }
    .shop-cart-panel-scroll { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    [data-kx-shop-cart-shell] .shop-cart-modal-dialog { animation: none; }
}

/* /monedas side box: the public Base receiving address, never a cart. */
.shop-currency-wallet {
    border: 0;
    background: rgba(0, 0, 0, .35);
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.shop-currency-wallet-address {
    display: block;
    padding: 12px;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    font: 600 13px/1.7 'Roboto', sans-serif;
}
.shop-currency-wallet .manual-copy-wallet {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 3px;
    background: #252729;
    color: #e1e2e3;
    font: 700 12px 'Roboto', sans-serif;
    cursor: pointer;
}
.shop-currency-wallet .manual-copy-wallet:hover,
.shop-currency-wallet .manual-copy-wallet:focus-visible {
    border-color: var(--kx-primary-color, #ff9b00);
    color: #fff;
}
.shop-currency-wallet .manual-copy-wallet:disabled { opacity: .6; cursor: default; }
.shop-currency-wallet .manual-copy-wallet.is-highlighted { outline: 2px solid var(--kx-primary-color, #ff9b00); outline-offset: 2px; }
.shop-currency-wallet-copy-status { display: block; min-height: 18px; margin-top: 8px; color: #bfc0c2; font-size: 12px; }

/* Products and units are a real modal, never the payment form. */
.shop-cart-total-link {
    padding: 4px 0;
    border: 0;
    border-bottom: 1px dotted rgba(46, 204, 113, .6);
    background: transparent;
    color: #2ecc71;
    font: inherit;
}
.shop-cart-total-link:focus-visible { outline: 2px solid var(--kx-primary-color, #ff9b00); outline-offset: 4px; }
.shop-cart-products-modal[hidden] { display: none; }
.shop-cart-products-modal {
    position: fixed;
    inset: 0;
    z-index: 2147482700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
    font-family: 'Roboto', sans-serif;
}
.shop-cart-products-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.shop-cart-products-modal-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(740px, 100%);
    max-height: calc(100dvh - 48px);
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 3px;
    background: #15191a;
    color: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}
.shop-cart-products-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
}
.shop-cart-products-modal-header h2 { margin: 0; font: 400 22px/1.3 'Roboto Condensed', sans-serif; text-transform: uppercase; }
.shop-cart-products-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: #ccc;
    cursor: pointer;
}
.shop-cart-products-modal-close:hover,
.shop-cart-products-modal-close:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }
.shop-cart-products-modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
    scrollbar-color: #393b3e #191a1c;
    scrollbar-width: thin;
}
.shop-cart-products-modal .shop-cart-row {
    grid-template-columns: minmax(0, 1fr) 108px auto 32px;
    gap: 18px;
    align-items: center;
    padding: 18px 16px;
    margin: 0 0 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 5px;
    background: #111416;
}
.shop-cart-products-modal .shop-cart-label { gap: 12px; }
.shop-cart-products-modal .shop-cart-label span:not(.kx-shop-cart-icon) {
    white-space: normal;
    font-size: 14px;
    line-height: 1.5;
}
.shop-cart-products-modal .shop-cart-remove { height: 32px; width: 32px !important; }
.shop-cart-products-modal p { font-size: 13px; line-height: 1.6; }
.shop-cart-products-modal a { color: #bfc0c2; }
.shop-cart-products-modal a:hover { color: var(--kx-primary-color, #ff9b00); }
.shop-cart-products-modal-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.shop-cart-products-modal .shop-cart-clear { margin: 0; padding: 10px 16px; }
body.kx-shop-cart-products-open { overflow: hidden; }
@media (max-width: 900px) {
    .kx-shop-page[data-kx-shop-catalog] > .shop-currency-help-column { float: none; width: auto; margin: 12px 0 0; }
}
@media (max-width: 600px) {
    .shop-cart-products-modal { padding: 12px; }
    .shop-cart-products-modal-dialog { max-height: calc(100dvh - 24px); }
    .shop-cart-products-modal-header { padding: 16px; }
    .shop-cart-products-modal-body { padding: 16px; }
    .shop-cart-products-modal .shop-cart-row { grid-template-columns: minmax(0, 1fr) 32px; gap: 14px; padding: 16px; }
    .shop-cart-products-modal .shop-cart-label { grid-column: 1; grid-row: 1; }
    .shop-cart-products-modal .shop-cart-remove { grid-column: 2; grid-row: 1; }
    .shop-cart-products-modal .shop-cart-quantity-control { grid-column: 1; grid-row: 2; width: 106px; }
    .shop-cart-products-modal .shop-cart-row-price { grid-column: 1; grid-row: 3; }
}

/* source: cotizaciones.css */
.quotes-page #contentBox {
    overflow: hidden;
}

.quotes-currency-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.quotes-main-box {
    margin-bottom: 10px;
}

.quotes-currency-panel {
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.quotes-currency-panel {
    padding: 12px;
}

.quotes-currency-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.quotes-currency-head img,
.quotes-currency-head .kx-managed-currency-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.quotes-currency-title {
    color: #fff;
    font: 400 22px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    line-height: 1;
}

.quotes-currency-unit {
    color: #ffcf73;
    font: 700 11px 'Roboto', sans-serif;
    margin-top: 4px;
}

.quotes-currency-panel.is-diamonds .quotes-currency-unit {
    color: #4cb4ff;
}

.quotes-chart-box[hidden] {
    display: none;
}

.quotes-supply-box {
    margin-top: 10px;
}

.quotes-supply-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quotes-page .ai-analysis-expand-toggle {
    min-height: 24px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .88);
    cursor: pointer;
    font: 700 11px 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.quotes-page .ai-analysis-expand-toggle:hover {
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .94);
}

.quotes-supply-box [data-quotes-supply-box][hidden] {
    display: none;
}

.quotes-stat-row,
.quotes-indicators div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .68);
    font: 300 12px 'Roboto', sans-serif;
}

.quotes-stat-row:first-of-type {
    border-top: 0;
}

.quotes-rate-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.quotes-rate-pair div {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .14);
    border: 1px solid rgba(255, 255, 255, .045);
}

.quotes-rate-pair span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .5);
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.quotes-rate-pair strong {
    display: block;
    color: #ffcf73;
    font: 700 15px 'Roboto', sans-serif;
    white-space: nowrap;
}

.quotes-trade-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

.quotes-trade-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    border: 1px solid rgba(255, 207, 115, .36);
    border-radius: 2px;
    background: rgba(255, 166, 0, .16);
    color: #fff;
    cursor: pointer;
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}

.quotes-trade-button:hover {
    background: rgba(255, 166, 0, .24);
    color: #fff;
}

.quotes-trade-button.is-blue {
    border-color: rgba(76, 180, 255, .34);
    background: rgba(76, 180, 255, .12);
}

.quotes-trade-button.is-blue:hover {
    background: rgba(76, 180, 255, .2);
}

.quotes-stat-row strong,
.quotes-indicators strong {
    color: #fff;
    font: 700 14px 'Roboto', sans-serif;
    white-space: nowrap;
}

.quotes-coverage-value {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.quotes-change {
    display: inline-block;
    margin-left: 6px;
    font: 700 10px 'Roboto Condensed', sans-serif;
    line-height: 1;
}

.quotes-change.is-neutral {
    color: rgba(255, 255, 255, .42) !important;
}

.quotes-reserve-coverage {
    margin: 0 -12px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, .04);
    background: rgba(0, 0, 0, .12);
}

.quotes-reserve-coverage.is-blue {
    background: rgba(0, 0, 0, .12);
}

.quotes-reserve-coverage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.quotes-reserve-coverage-head span {
    color: rgba(255, 255, 255, .68);
    font: 300 12px 'Roboto', sans-serif;
}

.quotes-reserve-coverage-head strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font: 700 14px 'Roboto', sans-serif;
    white-space: nowrap;
}

.quotes-reserve-progress {
    height: 8px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.quotes-reserve-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ffcf73;
}

.quotes-reserve-progress.is-blue span {
    background: #4cb4ff;
}

.quotes-reserve-coverage small {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, .48);
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.quotes-stat-row.is-stacked {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(110px, 1.2fr) auto;
}

.quotes-stat-row.is-gap {
    align-items: center;
    background: rgba(0, 0, 0, .12);
    margin: 0 -12px;
    padding: 10px 12px;
    min-height: 42px;
}

.quotes-stat-row.is-gap span {
    line-height: 1.25;
    max-width: 68%;
}

.quotes-stat-row.is-gap strong {
    text-align: right;
    line-height: 1.25;
}

.quotes-progress {
    height: 8px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);
}

.quotes-progress span {
    display: block;
    height: 100%;
    background: #2ecc71;
}

.quotes-progress.is-blue span {
    background: #3498db;
}

.quotes-status {
    padding: 4px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 10px !important;
}

.quotes-status.is-stabilized {
    background: rgba(46, 204, 113, .12);
    color: #2ecc71 !important;
}

.quotes-status.is-devalued {
    background: rgba(255, 107, 95, .13);
    color: #ff6b5f !important;
}

.quotes-status.is-overvalued {
    background: rgba(255, 207, 115, .14);
    color: #ffcf73 !important;
}

.quotes-evolution {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quotes-range-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 10px;
}

.quotes-range-tabs button {
    min-width: 31px;
    height: 24px;
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 2px;
    background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .64);
    cursor: pointer;
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-align: center;
}

.quotes-range-tabs button:hover,
.quotes-range-tabs button.is-active {
    border-color: rgba(255, 207, 115, .36);
    background: rgba(255, 207, 115, .13);
    color: #ffcf73;
}

.quotes-supply-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.quotes-supply-mode-tabs {
    display: flex;
    gap: 6px;
    margin: -2px 0 10px;
}

.quotes-supply-mode-tabs button {
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 2px;
    background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .64);
    cursor: pointer;
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.quotes-supply-mode-tabs button:hover,
.quotes-supply-mode-tabs button.is-active {
    border-color: rgba(255, 207, 115, .36);
    background: rgba(255, 207, 115, .13);
    color: #ffcf73;
}

.quotes-evolution-card {
    background: rgba(0, 0, 0, .16);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 2px;
    padding: 11px;
}

.quotes-evolution-card [hidden] {
    display: none !important;
}

.quotes-evolution-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.quotes-evolution-head span {
    color: rgba(255, 255, 255, .72);
    font: 700 12px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.quotes-evolution-head strong {
    color: #ffcf73;
    font: 700 13px 'Roboto', sans-serif;
    white-space: nowrap;
}

.quotes-supply-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: -2px 0 9px;
    color: rgba(255, 255, 255, .62);
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.quotes-supply-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.quotes-supply-legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.quotes-supply-legend .is-reserve {
    background: #ffcf73;
}

.quotes-supply-legend .is-base {
    background: #5fdd89;
}

.quotes-supply-legend.is-blue .is-reserve {
    background: #4cb4ff;
}

.quotes-supply-legend.is-blue .is-base {
    background: #a977ff;
}

.quotes-supply-legend b {
    margin-left: auto;
    color: rgba(255, 255, 255, .9);
    font-size: 11px;
}

.quotes-price-chart {
    position: relative;
    width: 100%;
    height: 118px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .12));
    overflow: hidden;
    cursor: crosshair;
}

.quotes-price-chart canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.quotes-chart-crosshair {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, .28);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
    display: none;
    pointer-events: none;
}

.quotes-chart-crosshair-y {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .16);
    display: none;
    pointer-events: none;
}

.quotes-chart-marker {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border: 2px solid rgba(12, 17, 20, .95);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
    display: none;
    pointer-events: none;
}

.quotes-chart-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 142px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 2px;
    background: rgba(12, 17, 20, .94);
    box-shadow: 0 7px 20px rgba(0, 0, 0, .28);
    color: rgba(255, 255, 255, .72);
    display: none;
    pointer-events: none;
    font: 300 11px/1.35 'Roboto', sans-serif;
}

.quotes-sell-box {
    margin: 0 0 10px;
}

.quotes-sell-box[hidden] {
    display: none;
}

.quotes-sell-box.is-credits .title,
.quotes-sell-box.is-credits .quotes-sell-head strong {
    color: #ffcf73;
}

.quotes-sell-box.is-diamonds .title,
.quotes-sell-box.is-diamonds .quotes-sell-head strong {
    color: #4cb4ff;
}

.quotes-sell-box.is-credits .quotes-sell-form button {
    border-color: rgba(255, 207, 115, .42);
    background: rgba(255, 166, 0, .18);
}

.quotes-sell-box.is-diamonds .quotes-sell-form button {
    border-color: rgba(76, 180, 255, .38);
    background: rgba(76, 180, 255, .14);
}

.quotes-sell-box.is-credits .quotes-sell-form input:focus,
.quotes-sell-box.is-credits .quotes-sell-form select:focus {
    border-color: rgba(255, 207, 115, .5);
}

.quotes-sell-box.is-diamonds .quotes-sell-form input:focus,
.quotes-sell-box.is-diamonds .quotes-sell-form select:focus {
    border-color: rgba(76, 180, 255, .5);
}

.quotes-sell-head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.quotes-sell-head > div {
    min-width: 0;
    padding: 10px;
    background: rgba(0, 0, 0, .16);
    border: 1px solid rgba(255, 255, 255, .045);
}

.quotes-sell-head span {
    display: block;
    color: rgba(255, 255, 255, .48);
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.quotes-sell-head strong {
    display: block;
    margin-top: 4px;
    color: #ffcf73;
    font: 700 16px 'Roboto', sans-serif;
    white-space: nowrap;
}

.quotes-sell-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.quotes-sell-form input,
.quotes-sell-form select {
    width: 100%;
    min-height: 36px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .2);
    color: #ddd;
    padding: 0 10px;
    font: 700 12px 'Roboto', sans-serif;
}

.quotes-sell-form select {
    color-scheme: dark;
}

.quotes-sell-form select option {
    background: #111617;
    color: rgba(255, 255, 255, .82);
}

.quotes-sell-form select option:checked,
.quotes-sell-form select option:hover {
    background: #252b2d;
    color: #fff;
}

.grid_5 .quotes-sell-head {
    grid-template-columns: 1fr;
}

.grid_5 .quotes-sell-form {
    grid-template-columns: 1fr;
}

.quotes-sell-form button {
    min-height: 36px;
    border: 1px solid rgba(255, 207, 115, .42);
    background: rgba(255, 166, 0, .18);
    color: #fff;
    cursor: pointer;
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.quotes-sell-form button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.quotes-sell-note {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .58);
    font: 300 12px 'Roboto', sans-serif;
}

.quotes-sell-warning {
    margin-top: 11px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 191, 45, .58);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(82, 55, 9, .62), rgba(45, 32, 9, .56));
    box-shadow: inset 0 1px 0 rgba(255, 220, 120, .08);
    color: rgba(255, 240, 204, .96);
    font: 400 13px/1.5 'Roboto', sans-serif;
}

.quotes-sell-warning strong,
.quotes-sell-warning span {
    display: block;
}

.quotes-sell-warning strong {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #ffd45d;
    font: 700 13px/1.25 'Roboto', sans-serif;
}

.quotes-sell-warning span {
    max-width: 95%;
}

.quotes-sell-box.is-diamonds .quotes-sell-warning {
    border-color: rgba(255, 191, 45, .58);
    background: linear-gradient(180deg, rgba(82, 55, 9, .62), rgba(45, 32, 9, .56));
}

.quotes-sell-box.is-diamonds .quotes-sell-warning strong {
    color: #ffd45d;
}

.quotes-chart-tooltip strong {
    display: block;
    margin: 2px 0 3px;
    color: #fff;
    font: 700 15px 'Roboto', sans-serif;
}

.quotes-chart-tooltip .quotes-chart-tooltip-label {
    color: #ffcf73;
    font: 700 11px 'Roboto Condensed', sans-serif;
    margin-top: 3px;
    text-transform: uppercase;
}

.quotes-chart-tooltip span {
    display: block;
}

.quotes-chart-tooltip .is-positive {
    color: #2ecc71 !important;
}

.quotes-chart-tooltip .is-negative {
    color: #ff6b5f !important;
}

.quotes-chart-tooltip-series {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
}

.quotes-chart-tooltip-series > div {
    display: grid;
    grid-template-columns: minmax(84px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.quotes-chart-tooltip-series .quotes-chart-tooltip-name {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 5px;
    color: rgba(255, 255, 255, .78);
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.quotes-chart-tooltip-series i {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.quotes-chart-tooltip-series strong {
    margin: 0;
    color: #fff;
    font-size: 12px;
    text-align: right;
}

.quotes-chart-tooltip-series em {
    font: 700 10px 'Roboto Condensed', sans-serif;
    font-style: normal;
    text-align: right;
}

.quotes-indicators div:nth-child(odd) {
    background: rgba(0, 0, 0, .08);
}

.quotes-indicators div {
    padding: 9px 0;
}

.quotes-indicators span {
    min-width: 0;
}

.quotes-skeleton {
    width: 100%;
}

.quotes-skeleton .kx-skeleton-line {
    display: block;
    height: 9px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .13), rgba(255, 255, 255, .055));
    background-size: 220% 100%;
    animation: kxSkeletonPulse 1.25s ease-in-out infinite;
}

.quotes-skeleton .kx-skeleton-line.is-value {
    width: 82px;
    height: 16px;
}

.quotes-skeleton .quotes-trade-button:disabled,
.quotes-skeleton .quotes-range-tabs button:disabled {
    cursor: default;
    opacity: 1;
}

.quotes-skeleton .quotes-range-tabs button.is-active:disabled {
    border-color: rgba(255, 207, 115, .36);
    background: rgba(255, 207, 115, .13);
    color: #ffcf73;
}

.quotes-skeleton .quotes-trade-button {
    pointer-events: none;
}

.quotes-skeleton .kx-skeleton-line.is-gap-label {
    width: 204px;
    max-width: 65%;
}

.quotes-skeleton .kx-skeleton-line.is-percent {
    width: 54px;
    height: 13px;
}

.quotes-skeleton .kx-skeleton-line.is-coverage-label {
    width: 126px;
}

.quotes-skeleton .quotes-reserve-progress span {
    width: 31%;
    background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
    background-size: 220% 100%;
    animation: kxSkeletonPulse 1.25s ease-in-out infinite;
}

.quotes-skeleton .quotes-reserve-progress.is-blue span {
    background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
    background-size: 220% 100%;
}

.quotes-skeleton .kx-skeleton-line.is-reserved {
    width: 116px;
    height: 8px;
}

.quotes-skeleton .kx-skeleton-line.is-status-label {
    width: 42px;
}

.quotes-skeleton .quotes-status.is-skeleton-status {
    background: rgba(255, 255, 255, .075);
    color: rgba(255, 255, 255, .55) !important;
}

.quotes-skeleton .kx-skeleton-line.is-status {
    width: 58px;
    height: 10px;
}

.quotes-range-tabs.is-skeleton {
    pointer-events: none;
}

.quotes-skeleton .kx-skeleton-line.is-chart-title {
    width: 132px;
    height: 12px;
}

.quotes-skeleton .kx-skeleton-line.is-chart-value {
    width: 110px;
    height: 13px;
}

.quotes-skeleton .kx-skeleton-line.is-covered {
    width: 86px;
    height: 10px;
}

.quotes-price-chart.is-skeleton-chart {
    cursor: default;
}

.quotes-price-chart.is-skeleton-chart span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .055);
}

.quotes-price-chart.is-skeleton-chart span:nth-child(1) {
    top: 28%;
}

.quotes-price-chart.is-skeleton-chart span:nth-child(2) {
    top: 54%;
}

.quotes-price-chart.is-skeleton-chart span:nth-child(3) {
    top: 80%;
}

.quotes-price-chart.is-skeleton-chart::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 36px;
    height: 1px;
    border-bottom: 3px solid rgba(255, 207, 115, .58);
    border-left: 3px solid transparent;
    transform: skewX(-12deg);
    opacity: .75;
}

.quotes-price-chart.is-skeleton-chart.is-blue::after {
    border-bottom-color: rgba(76, 180, 255, .58);
}

.quotes-async-error {
    padding: 14px;
    border: 1px solid rgba(255, 107, 95, .18);
    background: rgba(255, 107, 95, .08);
    color: rgba(255, 210, 206, .92);
    font: 700 12px 'Roboto', sans-serif;
}

.quotes-market-alert {
    margin-bottom: 10px;
}

.quotes-market-alert .Alert {
    margin-bottom: 0;
}

.quotes-market-alert .me-notification-close {
    align-self: flex-start;
    margin-top: 9px;
    margin-bottom: 9px;
}

.quotes-market-alert[hidden] {
    display: none !important;
}

.quotes-market-alert .me-notification-message-detail a {
    color: #ffcf73;
    font-weight: 700;
}

@keyframes kxSkeletonPulse {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

.is-positive {
    color: #2ecc71 !important;
}

.is-negative {
    color: #ff6b5f !important;
}

.is-blue {
    color: #4cb4ff !important;
}
.quotes-base-network-lock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 43px;
    box-sizing: border-box;
    padding: 8px 11px;
    border: 1px solid rgba(52, 152, 219, .55);
    border-radius: 3px;
    background: rgba(52, 152, 219, .10);
    color: rgba(255, 255, 255, .72);
}

.quotes-base-network-lock span {
    font-size: 11px;
    text-transform: uppercase;
}

.quotes-base-network-lock strong {
    color: #fff;
}

/* source: mercado.css */
.markets-page {
    margin-top: 16px;
}

.markets-hero .markets-hero-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px 20px;
    background: transparent;
}

.markets-hero h1 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
}

.markets-hero p {
    max-width: 680px;
    margin: 0;
    color: #b8b8b8;
    font-size: 14px;
    line-height: 1.45;
}

.markets-hero-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.markets-hero-tabs button,
.market-link-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid #2f3639;
    background: #101314;
    color: #d5d5d5;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}

.markets-hero-tabs button:hover,
.markets-hero-tabs button.is-active,
.market-link-button:hover {
    border-color: #b87900;
    background: rgba(135, 83, 0, .34);
    color: #fff;
}

.market-panel[hidden] {
    display: none !important;
}

.currency-market-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
    padding: 18px 22px 20px;
    background: transparent;
}

.currency-market-main,
.currency-market-side {
    background: #101314;
}

.currency-market-main {
    padding: 18px;
}

.currency-market-ticker-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.currency-market-ticker-head > div:first-child > span {
    color: #9ea4a6;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.currency-market-main h2 {
    margin: 2px 0 0;
    color: #fff;
    font-size: 24px;
    text-transform: uppercase;
}

.currency-market-ticker-price {
    min-width: 120px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 207, 115, .2);
    background: rgba(255, 207, 115, .06);
    text-align: right;
}

.currency-market-ticker-price.is-blue {
    border-color: rgba(76, 180, 255, .22);
    background: rgba(76, 180, 255, .06);
}

.currency-market-ticker-price.is-blue strong {
    font-size: 14px;
}

.currency-market-ticker-price strong {
    display: block;
    color: #ffcf73;
    font-size: 15px;
    font-weight: 900;
}

.currency-market-ticker-price.is-blue strong {
    color: #4cb4ff;
}

.currency-market-ticker-price span {
    color: #8f9698;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.currency-market-main p {
    margin: 0 0 16px;
    color: #b8b8b8;
    font-size: 13px;
    line-height: 1.45;
}

.currency-market-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.currency-market-switch button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    border: 1px solid #2f3639;
    background: #0b0e0f;
    color: #cfd1d2;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.currency-market-switch button:hover,
.currency-market-switch button.is-active {
    border-color: #b87900;
    background: rgba(135, 83, 0, .34);
    color: #fff;
}

.currency-market-ticket .currency-market-switch button {
    height: 36px;
}

.currency-market-ticket .currency-market-switch {
    grid-template-columns: 1fr;
}

.currency-market-ticket .currency-market-switch button:nth-child(1).is-active {
    border-color: rgba(46, 204, 113, .48);
    background: rgba(46, 204, 113, .18);
}

.currency-market-ticket .currency-market-switch button:nth-child(2).is-active {
    border-color: rgba(255, 107, 95, .48);
    background: rgba(255, 107, 95, .16);
}

.currency-market-form button:disabled,
.currency-market-ticket-input input:disabled,
.currency-market-form .market-action-button:disabled {
    cursor: not-allowed;
    opacity: .68;
}

.currency-market-form .currency-market-switch button.is-active:disabled {
    opacity: .82;
}

.currency-market-switch img,
.currency-market-wallet img,
.currency-market-rates img,
.currency-market-switch .kx-managed-currency-icon,
.currency-market-wallet .kx-managed-currency-icon,
.currency-market-rates .kx-managed-currency-icon {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    object-fit: contain;
}

.currency-market-switch .fa {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
}

.currency-market-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 10px;
    align-items: end;
}

.currency-market-ticket-input {
    display: grid;
    gap: 7px;
    color: #aeb3b5;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.currency-market-ticket-input input,
.currency-market-ticket-input .kx-skeleton-line.is-input {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #30383b;
    background: #0c0f10;
    color: #fff;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 800;
}

.currency-market-input-row label {
    display: grid;
    gap: 7px;
    color: #aeb3b5;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.currency-market-input-row input {
    height: 38px;
    padding: 0 12px;
    border: 1px solid #30383b;
    background: #0c0f10;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.currency-market-estimate {
    margin-top: 12px;
    padding: 12px;
    background: rgba(7, 8, 8, .62);
    color: #c8cccd;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.currency-market-estimate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
}

.currency-market-estimate-row + .currency-market-estimate-row {
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.currency-market-estimate-row span {
    color: #8f9698;
    font-size: 10px;
    font-weight: 900;
}

.currency-market-estimate-row strong {
    color: #e8ecec;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
}

.currency-market-estimate-row.is-total strong {
    color: #ffcf73;
}

.currency-market-senior-lock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 207, 115, .2);
    background: rgba(135, 83, 0, .18);
    color: #ffcf73;
    text-decoration: none;
}

.currency-market-senior-lock span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.currency-market-senior-lock strong {
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.currency-market-closed-lock {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
    color: #b7b7b7;
}

.currency-market-senior-lock:hover {
    border-color: #b87900;
    background: rgba(135, 83, 0, .3);
    color: #fff;
}

.currency-market-chart-box {
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .045);
    background: rgba(0, 0, 0, .18);
}

.currency-market-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.currency-market-chart-head span,
.currency-market-rates small {
    display: block;
    color: #9ea4a6;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.currency-market-chart-head strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
}

.currency-market-chart-box .quotes-price-chart {
    height: 300px;
}

.currency-market-side {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 16px;
}

.currency-market-trade-panel {
    position: relative;
}

.currency-market-wallet,
.currency-market-rates,
.currency-market-ticket {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: rgba(7, 8, 8, .62);
}

.currency-market-rates.is-config-only {
    display: none;
}

.currency-market-wallet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
}

.currency-market-wallet > span {
    grid-column: 1 / -1;
}

.currency-market-wallet strong {
    min-width: 0;
    padding: 9px 10px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .04);
}

.currency-market-ticket h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
}

.currency-market-wallet > span,
.currency-market-rates > span {
    color: #9ea4a6;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.currency-market-wallet strong,
.currency-market-rates strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.currency-market-rates strong {
    color: #cfd2d3;
    font-size: 12px;
}

.currency-market-rates small {
    margin-top: 3px;
    color: #ffc85a;
}

.currency-market-warning {
    padding: 10px 12px;
    border: 1px solid rgba(255, 200, 90, .25);
    background: rgba(135, 83, 0, .18);
    color: #ffc85a;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
    text-transform: uppercase;
}

.markets-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.market-card {
    min-height: 245px;
    padding: 18px;
    border: 1px solid #252b2d;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, #171b1c 0%, #121516 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.market-card-head,
.market-card-foot,
.market-option-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.market-card-head {
    margin-bottom: 13px;
}

.market-status,
.market-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #bcbcbc;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.market-status {
    padding: 5px 9px;
    border: 1px solid rgba(42, 199, 116, .35);
    background: rgba(42, 199, 116, .12);
    color: #78e5a7;
}

.market-card.is-closed .market-status,
.market-card.is-resolved .market-status {
    border-color: rgba(255, 170, 0, .35);
    background: rgba(255, 170, 0, .1);
    color: #ffc45b;
}

.market-card.is-cancelled .market-status {
    border-color: rgba(255, 80, 95, .35);
    background: rgba(255, 80, 95, .1);
    color: #ff8f99;
}

.market-card h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    line-height: 1.16;
    text-transform: uppercase;
}

.market-description {
    min-height: 38px;
    margin: 0 0 15px;
    color: #a8aaab;
    font-size: 13px;
    line-height: 1.45;
}

.market-options {
    display: grid;
    gap: 10px;
}

.market-option {
    --prediction-option-color: #61e59a;
    --prediction-option-color-soft: rgba(97, 229, 154, .16);
    --prediction-option-color-faint: rgba(97, 229, 154, .04);
    padding: 10px;
    background: rgba(9, 11, 12, .54);
}

.market-predictive-option-picker label {
    --prediction-option-color: #61e59a;
    --prediction-option-color-soft: rgba(97, 229, 154, .16);
    --prediction-option-color-faint: rgba(97, 229, 154, .04);
}

.market-predictive-option-1 {
    --prediction-option-color: #61e59a;
    --prediction-option-color-soft: rgba(97, 229, 154, .16);
    --prediction-option-color-faint: rgba(97, 229, 154, .04);
}

.market-predictive-option-2 {
    --prediction-option-color: #ff6f7b;
    --prediction-option-color-soft: rgba(255, 111, 123, .16);
    --prediction-option-color-faint: rgba(255, 111, 123, .04);
}

.market-predictive-option-3 {
    --prediction-option-color: #55d8ff;
    --prediction-option-color-soft: rgba(85, 216, 255, .16);
    --prediction-option-color-faint: rgba(85, 216, 255, .04);
}

.market-predictive-option-4 {
    --prediction-option-color: #ffc85a;
    --prediction-option-color-soft: rgba(255, 200, 90, .17);
    --prediction-option-color-faint: rgba(255, 200, 90, .045);
}

.market-predictive-option-5 {
    --prediction-option-color: #b982ff;
    --prediction-option-color-soft: rgba(185, 130, 255, .16);
    --prediction-option-color-faint: rgba(185, 130, 255, .04);
}

.market-predictive-option-6 {
    --prediction-option-color: #ff9d52;
    --prediction-option-color-soft: rgba(255, 157, 82, .16);
    --prediction-option-color-faint: rgba(255, 157, 82, .04);
}

.market-predictive-option-7 {
    --prediction-option-color: #8de3d1;
    --prediction-option-color-soft: rgba(141, 227, 209, .16);
    --prediction-option-color-faint: rgba(141, 227, 209, .04);
}

.market-predictive-option-8 {
    --prediction-option-color: #d6d86b;
    --prediction-option-color-soft: rgba(214, 216, 107, .16);
    --prediction-option-color-faint: rgba(214, 216, 107, .04);
}

.market-option-line strong {
    color: #e5e5e5;
    font-size: 14px;
}

.market-option-line span {
    color: var(--prediction-option-color);
    font-size: 14px;
    font-weight: 800;
}

.market-option-line .market-option-quote {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--prediction-option-color);
}

.market-option-quote em {
    color: #8d9395;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.market-option-quote em.is-up {
    color: #55d789;
}

.market-option-quote em.is-down {
    color: #ff6f7b;
}

.market-option-bar {
    height: 8px;
    margin: 8px 0 6px;
    background: #070808;
    overflow: hidden;
}

.market-option-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--prediction-option-color), color-mix(in srgb, var(--prediction-option-color) 62%, #ffffff));
}

.market-option small {
    display: block;
    color: #8f9394;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.market-option.is-winner {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prediction-option-color) 56%, transparent);
    background:
        linear-gradient(135deg, var(--prediction-option-color-soft), transparent 58%),
        rgba(9, 11, 12, .66);
}

.market-predictive-winner-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 7px;
    color: #ffce65;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.market-card-foot {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: #b8b8b8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.market-card-foot span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.market-card-foot img {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
}

.markets-empty .png15 {
    padding: 22px;
    background: transparent;
}

.markets-empty p {
    margin: 0;
    color: #bdbdbd;
    font-size: 14px;
}

.rare-market-box {
    margin-top: 12px;
}

.rare-market-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(240px, .9fr);
    gap: 12px;
    padding: 16px 18px;
    background: transparent;
}

.rare-market-publish,
.rare-market-info {
    padding: 14px;
    background: rgba(8, 10, 11, .55);
    border: 1px solid rgba(255, 255, 255, .045);
}

.rare-market-publish h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
}

.rare-market-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.rare-market-info strong,
.rare-market-info span,
.market-muted {
    color: #bcbcbc;
    font-size: 13px;
    line-height: 1.4;
}

.rare-market-info strong {
    color: #fff;
    text-transform: uppercase;
}

.rare-market-form,
.rare-offer-form {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.rare-market-picker {
    flex: 1 1 auto;
    min-width: 0;
}

.rare-market-picker label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #bcbcbc;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.rare-offer-form input {
    height: 36px;
    min-width: 190px;
    padding: 0 10px;
    border: 1px solid #2a3032;
    background: #101314;
    color: #f0f0f0;
    font-weight: 700;
}

.rare-market-selection {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .56);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.rare-market-item-grid.itemContainer {
    min-height: 80px;
    max-height: 148px;
    margin: 0;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 3px;
    background: rgba(0, 0, 0, .16);
    overflow-y: auto;
    box-sizing: border-box;
    display: block;
    flex-direction: initial;
    position: relative;
}

.rare-market-item-grid .itemList {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rare-market-item {
    display: block;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    left: auto;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    cursor: pointer;
    image-rendering: pixelated;
}

.rare-market-item-grid.itemContainer::after {
    display: none;
    content: none;
}

.rare-market-item.item-selected,
.rare-market-item.admin-rare-item-selected {
    border-color: rgba(92, 225, 174, .95) !important;
    box-shadow: 0 0 0 1px rgba(92, 225, 174, .45), 0 0 12px rgba(92, 225, 174, .22);
}

.rare-market-item .item-count {
    pointer-events: none;
}

.rare-market-form .market-action-button {
    align-self: center;
    margin-top: 0;
    width: 225px;
    flex: 0 0 auto;
}

.rare-offer-form input {
    min-width: 92px;
}

/* KxVariables uses the same action control as the auction publisher.
   Keep one visual definition, without changing the other HK/Senate tools. */
.market-action-button,
.ceo-settings-shell .senior-tools-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #b87900;
    background: rgba(135, 83, 0, .34);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.currency-market-ticket .market-action-button {
    width: 100%;
}

.market-action-button:hover,
.ceo-settings-shell .senior-tools-button:hover {
    border-color: #ffae20;
    background: rgba(154, 94, 0, .5);
}

.market-action-button:disabled,
.market-action-button.is-muted,
.ceo-settings-shell .senior-tools-button:disabled,
.ceo-settings-shell .senior-tools-button[aria-disabled="true"] {
    border-color: #343a3c;
    background: rgba(255, 255, 255, .04);
    color: #9b9b9b;
}

.markets-empty-inline {
    margin: 0 18px 22px;
    padding: 22px 20px;
    background: rgba(8, 10, 11, .55);
    color: #bcbcbc;
    font-weight: 700;
}

.markets-empty-inline strong,
.markets-empty-inline span {
    display: block;
}

.markets-empty-inline strong {
    color: #e5e5e5;
    font-size: 14px;
}

.markets-empty-inline span {
    margin-top: 6px;
    color: #939798;
    font-size: 12px;
    line-height: 1.35;
}

.rare-market-summary {
    padding: 0 18px 18px;
}

.rare-market-empty-body {
    padding: 16px 18px 20px;
    background: transparent;
}

.rare-market-empty-body .rare-market-layout {
    padding: 0;
    background: transparent;
}

/* Same listing-area geometry as the skeleton, without rendering item cells. */
.rare-market-empty-listing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 14px;
    min-height: 112px;
    padding: 14px;
    box-sizing: border-box;
    background: rgba(8, 10, 11, .55);
}

.rare-market-empty-listing strong {
    color: #e5e5e5;
    font-size: 14px;
}

.rare-market-empty-listing span {
    margin-top: 6px;
    color: #939798;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.rare-market-summary-items.itemContainer {
    min-height: 112px;
    max-height: 208px;
    padding: 12px;
    background: rgba(8, 10, 11, .55);
    display: block;
    flex-direction: initial;
    position: relative;
    box-sizing: border-box;
    overflow-y: auto;
}

.rare-market-summary-items .itemList,
.rare-market-summary-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rare-market-summary-items .item,
.rare-market-summary-item {
    display: block;
    width: 43px;
    height: 43px;
    cursor: pointer;
    position: relative;
    left: auto;
    margin: 0;
    flex: 0 0 43px;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    image-rendering: pixelated;
}

.rare-market-summary-items.itemContainer::after {
    display: none;
    content: none;
}

.rare-market-summary-item:hover {
    border-color: rgba(184, 121, 0, .9);
    box-shadow: 0 0 0 1px rgba(184, 121, 0, .28), 0 0 14px rgba(184, 121, 0, .18);
}

.rare-market-summary-item .item-count {
    min-width: 18px;
    padding: 0 4px;
}

.rare-listings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 18px 18px;
}

.market-card[data-market-href] {
    cursor: pointer;
}

.market-card[data-market-href]:hover {
    border-color: rgba(184, 121, 0, .55);
}

.market-prediction-box-body {
    padding: 12px 16px 16px;
}

.market-predictive-box:has(> .market-predictive-empty-state) {
    min-height: 106px;
}

.market-predictive-box > .market-predictive-empty-state {
    min-height: 70px;
}

.market-predictive-box .market-category-tabs {
    margin-top: 0;
}

.market-prediction-list {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.market-category-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0 0 11px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.market-category-tabs .hk-tab-button {
    min-height: 22px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 3px;
    color: #dcdcdc;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    background: rgba(0, 0, 0, .26);
}

.market-category-tabs .hk-tab-button:hover,
.market-category-tabs .hk-tab-button.is-active {
    color: #fff;
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 24%, transparent));
}

.market-prediction-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px 112px;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 12px 14px;
    border: 0;
    background: #111516;
    cursor: pointer;
}

.market-prediction-row:hover {
    background: #141819;
}

.market-prediction-main {
    display: flex;
    align-items: center;
    min-width: 0;
}

.market-prediction-title {
    min-width: 0;
}

.market-prediction-title h2 {
    margin: 6px 0 3px;
    color: #fff;
    font-size: 17px;
    line-height: 1.12;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.market-prediction-title p {
    max-width: 610px;
    margin: 0;
    color: #aeb2b3;
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-prediction-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #a9adaf;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-prediction-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.market-prediction-meta img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    image-rendering: pixelated;
}

.market-prediction-options-summary {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.market-prediction-options-summary span {
    color: #808789;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-prediction-options-summary strong {
    display: block;
    min-width: 0;
    color: #d5d7d8;
    font-size: 11px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-prediction-stats {
    display: grid;
    justify-items: end;
    gap: 6px;
    color: #c4c8c9;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-related-predictions {
    margin-top: 10px;
}

.market-bidders-box #list-users {
    height: 350px;
}

.market-bidders-list .top-desc {
    color: #bcbcbc;
    font-weight: 700;
}

.market-usdc-inline {
    display: block;
    margin: 2px 0 0;
    color: #7be8ac;
}

.market-auction-detail .senior-tools-body {
    min-height: 224px;
    padding: 16px 14px 14px;
}

.market-auction-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    box-sizing: border-box;
}

.market-auction-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.market-auction-back {
    flex: 0 0 auto;
    height: 24px;
    padding: 0 10px;
    line-height: 24px;
    font-size: 10px;
}

.market-auction-detail .senior-tools-detail-category {
    margin-bottom: 10px;
}

.market-auction-detail .senior-tools-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 4px;
}

.market-auction-detail .senior-tools-detail-meta span {
    color: #b8bec0;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-auction-detail .footerBottomBox .headAvatar {
    width: 54px;
    height: 62px;
    background-position: center;
    background-repeat: no-repeat;
}

.market-auction-summary {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.market-auction-summary > .senior-tools-rare-proposal-card.is-skeleton {
    grid-column: 1 / -1;
}

.market-auction-summary .senior-tools-rare-proposal-card.is-skeleton .senior-tools-rare-proposal-numbers {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.market-auction-summary .senior-tools-rare-proposal-card.is-skeleton .senior-tools-rare-proposal-numbers strong {
    margin: 7px 0;
}

.market-auction-summary .kx-skeleton-line.is-rare-label {
    width: 46%;
    height: 9px;
}

.market-auction-summary .kx-skeleton-line.is-rare-name {
    width: 82%;
    height: 18px;
}

.market-auction-summary .kx-skeleton-line.is-rare-price {
    width: 72%;
    height: 17px;
}

.market-auction-summary .kx-skeleton-line.is-rare-small {
    width: 58%;
    height: 8px;
}

.market-panel-skeleton {
    margin-top: 12px;
}

.market-skeleton-body {
    padding: 18px 22px 20px;
    background: transparent;
}

.market-skeleton-body .kx-skeleton-line {
    display: block;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .13), rgba(255, 255, 255, .055));
    background-size: 220% 100%;
    animation: kxMarketSkeletonPulse 1.25s ease-in-out infinite;
}

.market-skeleton-body .kx-skeleton-line.is-title {
    width: 190px;
    height: 22px;
    margin-bottom: 10px;
}

.market-skeleton-body .kx-skeleton-line.is-wide {
    width: 58%;
    margin-bottom: 8px;
}

.market-skeleton-body .kx-skeleton-line.is-medium {
    width: 38%;
    margin-bottom: 16px;
}

.market-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(8, 42px);
    gap: 10px;
}

.market-skeleton-grid .kx-skeleton-line {
    width: 42px;
    height: 42px;
}

[data-market-panel-loading="predictivo"] .market-skeleton-grid {
    grid-template-columns: 1fr;
}

[data-market-panel-loading="predictivo"] .market-skeleton-grid .kx-skeleton-line,
[data-market-panel-loading="cambios"] .market-skeleton-grid .kx-skeleton-line {
    width: 100%;
    height: 52px;
}

[data-market-panel-loading="cambios"] .market-skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.market-skeleton-body.is-rares {
    padding: 16px 18px 20px;
}

.market-skeleton-body.is-rares .rare-market-layout {
    padding: 0;
}

.market-skeleton-body.is-rares .rare-market-form-skeleton {
    pointer-events: none;
}

.market-skeleton-body.is-rares .rare-market-item-grid.is-skeleton-grid .item {
    border-color: rgba(255, 255, 255, .09);
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .13), rgba(255, 255, 255, .055)) !important;
    background-size: 220% 100% !important;
    animation: kxMarketSkeletonPulse 1.25s ease-in-out infinite;
}

.market-skeleton-body.is-rares .market-action-button:disabled {
    opacity: 1;
    cursor: default;
}

.rare-market-summary-items.is-skeleton-grid {
    margin-top: 14px;
    padding: 14px;
    background: rgba(8, 10, 11, .55);
}

.rare-market-summary-items.is-skeleton-grid .item {
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .13), rgba(255, 255, 255, .055)) !important;
    background-size: 220% 100% !important;
    animation: kxMarketSkeletonPulse 1.25s ease-in-out infinite;
}

.market-skeleton-body.is-predictive {
    padding: 16px 18px 20px;
}

.market-skeleton-body.is-predictive .market-category-tabs button:disabled {
    opacity: 1;
    cursor: default;
}

.market-prediction-row.is-skeleton-row {
    cursor: default;
    pointer-events: none;
}

.market-prediction-row.is-skeleton-row .market-status {
    border-color: rgba(42, 199, 116, .35);
    background: rgba(42, 199, 116, .12);
    color: #78e5a7;
}

.market-prediction-row.is-skeleton-row .kx-skeleton-line {
    display: block;
    height: 10px;
}

.market-prediction-row.is-skeleton-row .kx-skeleton-line.is-meta {
    width: 92px;
}

.market-prediction-row.is-skeleton-row .kx-skeleton-line.is-heading {
    width: min(520px, 100%);
    height: 18px;
}

.market-prediction-row.is-skeleton-row .kx-skeleton-line.is-small {
    width: 74px;
}

.market-prediction-row.is-skeleton-row .kx-skeleton-line.is-option {
    width: 170px;
}

.market-prediction-row.is-skeleton-row .kx-skeleton-line.is-stat {
    width: 90px;
}

.market-skeleton-body.is-currency {
    padding: 18px 22px 20px;
}

.market-skeleton-body.is-currency .currency-market-main,
.market-skeleton-body.is-currency .currency-market-side {
    background: #101314;
}

.market-skeleton-body.is-currency .kx-skeleton-line {
    display: block;
    height: 10px;
}

.market-skeleton-body.is-currency .kx-skeleton-line.is-price {
    width: 92px;
    height: 15px;
    margin-left: auto;
}

.market-skeleton-body.is-currency .kx-skeleton-line.is-wallet {
    width: 48px;
    height: 14px;
}

.market-skeleton-body.is-currency .kx-skeleton-line.is-rate {
    width: 120px;
    height: 12px;
}

.market-skeleton-body.is-currency .quotes-price-chart.is-skeleton-chart {
    cursor: default;
}

.market-skeleton-body.is-currency .quotes-price-chart.is-skeleton-chart span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .055);
}

.market-skeleton-body.is-currency .quotes-price-chart.is-skeleton-chart span:nth-child(1) {
    top: 28%;
}

.market-skeleton-body.is-currency .quotes-price-chart.is-skeleton-chart span:nth-child(2) {
    top: 54%;
}

.market-skeleton-body.is-currency .quotes-price-chart.is-skeleton-chart span:nth-child(3) {
    top: 80%;
}

.market-skeleton-body.is-currency .quotes-price-chart.is-skeleton-chart::before,
.market-skeleton-body.is-currency .quotes-price-chart.is-skeleton-chart::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 2px;
    opacity: .75;
    transform: skewX(-12deg);
}

.market-skeleton-body.is-currency .quotes-price-chart.is-skeleton-chart::before {
    top: 40%;
    background: #ffcf73;
}

.market-skeleton-body.is-currency .quotes-price-chart.is-skeleton-chart::after {
    top: 68%;
    background: #4cb4ff;
}

.market-skeleton-body.is-currency .currency-market-switch button:disabled,
.market-skeleton-body.is-currency .quotes-range-tabs button:disabled,
.market-skeleton-body.is-currency .market-action-button:disabled {
    opacity: 1;
    cursor: default;
}

@keyframes kxMarketSkeletonPulse {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

.market-auction-item-preview.itemContainer {
    min-height: 86px;
    max-height: 86px;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .045);
    background:
        radial-gradient(circle at 45% 45%, rgba(255, 255, 255, .06), transparent 52%),
        rgba(0, 0, 0, .24);
}

.market-auction-item-preview .itemList {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.market-auction-item-preview .item {
    float: none;
    display: block;
    margin: 0;
    left: auto;
    position: static;
    flex: 0 0 43px;
    background-position: center !important;
}

.market-auction-numbers {
    min-height: 66px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, .045);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 45%),
        rgba(0, 0, 0, .26);
}

.market-auction-numbers span,
.market-auction-numbers small {
    display: block;
    color: #999;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.market-auction-numbers strong {
    display: block;
    margin: 5px 0 4px;
    color: #fff;
    font-size: 17px;
    line-height: 1.1;
}

.market-auction-numbers.is-reference strong {
    color: #ffc85a;
    font-size: 21px;
}

.market-auction-actions,
.market-auction-offer-form {
    margin-top: 14px;
}

.market-auction-result {
    display: grid;
    gap: 4px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 200, 90, .28);
    background:
        linear-gradient(135deg, rgba(171, 112, 0, .14), transparent 58%),
        rgba(0, 0, 0, .2);
}

.market-auction-result > span {
    color: #ffc85a;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-auction-result strong {
    color: #f0f0f0;
    font-size: 15px;
}

.market-auction-result strong a {
    color: #fff;
    text-decoration: none;
}

.market-auction-result strong a:hover {
    color: #ffc85a;
    text-decoration: underline;
}

.market-auction-result small {
    color: #a9afb1;
    font-size: 11px;
    font-weight: 800;
}

.market-auction-result.is-cancelled {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .2);
}

.market-auction-result.is-cancelled > span {
    color: #b8bec0;
}

.market-auction-accept-box {
    display: inline-grid;
    gap: 6px;
}

.market-auction-accept-box span {
    color: #9ea4a6;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-auction-offer-form {
    align-items: center;
    gap: 8px;
}

.market-auction-offer-box {
    margin-top: 10px;
}

.market-auction-offer-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    background: transparent;
}

.market-auction-offer-main {
    min-width: 0;
}

.market-auction-wallet {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .045);
    background: rgba(0, 0, 0, .22);
    color: #8f9495;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-auction-wallet strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #f0f0f0;
    font-size: 14px;
}

.market-auction-wallet strong.is-credits {
    color: #ffd43b;
}

.market-auction-wallet strong.is-diamonds {
    color: #31d7ff;
}

.market-auction-wallet .kx-me-currency-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    flex: 0 0 15px;
    image-rendering: pixelated;
}

.market-auction-wallet .kx-me-currency-icon .credits,
.market-auction-wallet .kx-me-currency-icon .diamonds {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
}

.market-auction-wallet .kx-me-currency-icon .credits {
    background-image: var(--kx-currency-credits-image);
}

.market-auction-wallet .kx-me-currency-icon .diamonds {
    background-image: var(--kx-currency-diamonds-image);
}

.market-auction-offer-box .market-auction-offer-form {
    margin: 0;
    padding: 0;
    background: transparent;
}

.market-auction-offer-form input {
    width: 146px;
    min-width: 0;
}

.market-predictive-detail-options {
    margin-top: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.market-predictive-detail .senior-tools-body {
    padding: 16px 14px 14px;
}

.market-predictive-detail .senior-tools-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 4px;
}

.market-predictive-detail .senior-tools-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b8bec0;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-predictive-detail .senior-tools-detail-meta img,
.market-predictive-detail .senior-tools-detail-meta .kx-managed-currency-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: pixelated;
}

.market-predictive-description {
    margin: 14px 0 0;
    color: #b8b8b8;
    font-size: 13px;
    line-height: 1.45;
}

.market-predictive-chart {
    height: 280px;
    margin-top: 16px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .045);
    background:
        radial-gradient(circle at 50% 20%, rgba(85, 216, 255, .08), transparent 40%),
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 45%),
        rgba(0, 0, 0, .24);
}

.market-predictive-chart canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.market-predictive-side .market-predictive-side-body {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: transparent;
}

.market-predictive-resolution {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .045);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 45%),
        rgba(0, 0, 0, .26);
}

.market-predictive-resolution span {
    display: block;
    color: #999;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.market-predictive-resolution p {
    margin: 7px 0 0;
    color: #c2c5c6;
    font-size: 12px;
    line-height: 1.45;
}

.market-predictive-resolution.is-unresolved {
    border-color: rgba(255, 193, 81, .18);
}

.market-predictive-winner-list {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.market-predictive-winner-list strong {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(255, 198, 87, .25);
    color: #ffe0a0;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
    background: rgba(160, 103, 0, .12);
    box-sizing: border-box;
}

.market-predictive-winner-list i {
    flex: 0 0 auto;
    color: #ffc85a;
}

.market-predictive-resolution-criteria {
    margin-top: 12px;
}

.market-predictive-trade-card {
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .055);
    background:
        radial-gradient(circle at 50% 0%, rgba(82, 219, 133, .055), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 55%),
        rgba(0, 0, 0, .22);
}

.market-predictive-trade-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, .22);
}

.market-predictive-trade-tabs button {
    height: 34px;
    border: 0;
    border-bottom: 2px solid #2f3639;
    background: transparent;
    color: #c7c7c7;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.market-predictive-trade-tabs button.is-active {
    border-color: #b87900;
    background: linear-gradient(180deg, rgba(135, 83, 0, .32), rgba(135, 83, 0, .18));
    color: #fff;
}

.market-predictive-trade-form {
    display: grid;
    gap: 9px;
}

.market-predictive-trade-form[hidden] {
    display: none !important;
}

.market-predictive-option-picker {
    display: grid;
    gap: 6px;
}

.market-predictive-option-picker label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid transparent;
    background: rgba(0, 0, 0, .18);
    color: #e4e4e4;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.market-predictive-option-picker label:has(input:checked) {
    border-color: color-mix(in srgb, var(--prediction-option-color) 58%, transparent);
    background:
        linear-gradient(90deg, var(--prediction-option-color-soft), var(--prediction-option-color-faint)),
        rgba(0, 0, 0, .2);
}

.market-predictive-option-picker label.is-disabled {
    opacity: .46;
    cursor: default;
}

.market-predictive-option-picker input {
    display: none;
}

.market-predictive-option-picker em {
    color: var(--prediction-option-color);
    font-style: normal;
}

.market-predictive-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    padding: 0 8px;
    background: rgba(0, 0, 0, .17);
    color: #969c9e;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-predictive-wallet strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
}

.market-predictive-wallet img,
.market-predictive-wallet .kx-managed-currency-icon {
    width: 19px;
    height: 19px;
    object-fit: contain;
    image-rendering: pixelated;
}

.market-predictive-amount-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 7px;
}

.market-predictive-trade-form input[type="number"] {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #2b3336;
    background: rgba(12, 15, 16, .92);
    color: #fff;
    font-weight: 800;
}

.market-predictive-trade-form .market-action-button {
    width: 100%;
    justify-content: center;
    height: 34px;
    padding: 0 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.market-predictive-stats-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.market-predictive-stats-strip div {
    min-height: 50px;
    padding: 10px 11px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .035);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 48%),
        rgba(0, 0, 0, .2);
}

.market-predictive-stats-strip span,
.market-predictive-stats-strip strong {
    display: block;
    font-weight: 900;
    text-transform: uppercase;
}

.market-predictive-stats-strip span {
    color: #999;
    font-size: 10px;
}

.market-predictive-stats-strip strong {
    margin-top: 4px;
    color: #ffc85a;
    font-size: 19px;
    line-height: 1;
}

.market-predictive-investment {
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, .035);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 48%),
        rgba(0, 0, 0, .2);
}

.market-predictive-investment > span,
.market-predictive-investment small {
    display: block;
    color: #999;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-predictive-investment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.market-predictive-investment-grid div {
    min-width: 0;
}

.market-predictive-investment-grid strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.market-predictive-investment-grid em {
    display: block;
    margin-top: 3px;
    color: #a3aaad;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.market-predictive-investment-grid .is-up strong,
.market-predictive-investment-grid .is-up em {
    color: #65e59b;
}

.market-predictive-investment-grid .is-down strong,
.market-predictive-investment-grid .is-down em {
    color: #ff6d80;
}

.market-predictive-claim {
    display: grid;
    gap: 7px;
    padding: 11px;
    border: 1px solid rgba(255, 198, 87, .28);
    background:
        linear-gradient(135deg, rgba(160, 103, 0, .16), transparent 58%),
        rgba(0, 0, 0, .2);
}

.market-predictive-claim > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffc85a;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.market-predictive-claim > strong {
    color: #f0f0f0;
    font-size: 12px;
    line-height: 1.35;
}

.market-predictive-claim .market-action-button {
    width: 100%;
    justify-content: center;
    margin-top: 2px;
}

.rare-listing-card {
    padding: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,0) 45%),
        #101314;
    border: 1px solid #242a2c;
}

.rare-listing-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rare-listing-icon {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0,0,0,.24);
    image-rendering: pixelated;
}

.rare-listing-main h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 17px;
    text-transform: uppercase;
}

.rare-listing-main span,
.rare-listing-reference span,
.rare-listing-top-offer span {
    color: #9fa3a4;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.rare-listing-reference,
.rare-listing-top-offer {
    margin-top: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, .22);
}

.rare-listing-reference strong,
.rare-listing-top-offer strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 16px;
}

.rare-listing-reference small,
.rare-listing-top-offer small {
    display: block;
    margin-top: 4px;
    color: #9ea2a3;
    font-size: 11px;
    font-weight: 700;
}

.rare-offer-form,
.rare-owner-actions {
    margin-top: 12px;
}

.rare-owner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rare-offers-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 12px;
    color: #b7b7b7;
    font-size: 11px;
    font-weight: 700;
}

.markets-section-title {
    margin-top: 12px;
}

/* source: profile.css */
/* Profile */
.profileContentBox {
    background: url(../img/personal/texture.png) no-repeat center center rgba(0, 0, 0, .35);
    background-size: 100%;
    height: 190px;
    width: 100%;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
    border-radius: 2px;
    position: relative;
    margin-bottom: 10px;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.profileContentBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7); /* Sombra oscura del 70% */
    border-radius: 2px;
    z-index: 0; /* Para que esté debajo del contenido */
}

.profileContentBox .avatar {
    background: no-repeat center -30px;
    height: 130px;
    width: 130px;
    position: absolute;
    top: 30px;
    left: 30px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);  /* Sombra más suave y oscura */
    background-color: rgba(255, 255, 255, 0.1);  /* Fondo blanco con baja opacidad */
    border: 2px solid rgba(255, 255, 255, 0.6);  /* Borde blanco con opacidad moderada */
    transition: all 0.3s ease-in-out;
}

.profileContentBox .avatar.kx-hover-avatar .kx-hover-avatar-layer {
    background-position: center -30px;
}

.profileContentBox .userDetails {
    position: absolute;
    margin-top: 60px;
    margin-left: 180px;
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4), 0 0 10px rgba(255, 255, 255, 0.3); /* Brillo leve */
}


.profileContentBox .userDetails h2 {
    font-weight: 300;
    margin: 5px 0 0 0;
    font-size: 30px;
    line-height: 1;
}

.profileContentBox .userDetails h2 .username-readable.username-main {
    display: inline-block;
    width: fit-content;
    height: auto;
    box-sizing: border-box;
    line-height: 1;
    vertical-align: baseline;
    max-width: none;
    white-space: nowrap;
}

.username-readable {
    color: #fff;
    position: relative;
    z-index: 1;
    -webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.72);
    paint-order: stroke fill;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.78),
        0 0 1px rgba(0, 0, 0, 0.95),
        0 0 1px rgba(255, 255, 255, 0.40),
        0 0 3px rgba(255, 255, 255, 0.18);
}

.profileContentBox .userDetails .registration,
.profileContentBox .userDetails .lastOnline {
    font-size: 11px;
    color: #ccc;
}

.profileContentBox .userDetails .allGrayBox {
    width: 250px;
    position: absolute;
    top: -25px;
    margin-left: 225px;
}

.profileContentBox .userDetails .allGrayBox .grayBox {
    background: rgba(255, 255, 255, 0.3);
    width: 50%;
    height: 32px;
    text-align: center;
    border-radius: 5px;
    position: relative;
    line-height: 30px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.profileContentBox .userDetails .allGrayBox .grayBox .icon {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 14;
}


.profileContentBox .userDetails .allGrayBox .grayBox .icon .credits {
    background-image: var(--kx-currency-credits-image);
    background-repeat: no-repeat;
    background-size: contain;
    height: 15px;
    width: 15px;
    position: absolute;
    left: 8px;
    top: 8px;
}

.profileContentBox .userDetails .allGrayBox .grayBox .icon .duckets {
    background-image: var(--kx-currency-duckets-image);
    background-repeat: no-repeat;
    background-size: contain;
    height: 15px;
    width: 15px;
    position: absolute;
    left: 8px;
    top: 8px;
}

.profileContentBox .userDetails .allGrayBox .grayBox .icon .diamonds {
    background-image: var(--kx-currency-diamonds-image);
    background-repeat: no-repeat;
    background-size: contain;
    height: 15px;
    width: 15px;
    position: absolute;
    left: 8px;
    top: 8px;
}

.profileContentBox .userDetails .allGrayBox .grayBox .count {
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    padding-left: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra negra sutil */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro con baja opacidad */
    border: 1.8px solid rgba(255, 255, 255, 0.3); /* Borde blanco sutil */
    border-radius: 5px; /* Redondeo suave */
}


.profileContentBox .userDetails .allGrayBox .grayBox .count.credits {
    color: #CCA923;
    text-shadow: 0 0 2px rgba(204, 169, 35, 0.3), 0 0 3px rgba(204, 169, 35, 0.2); /* Brillo dorado más suave */
}

.profileContentBox .userDetails .allGrayBox .grayBox .count.duckets {
    color: #D184D3;
    text-shadow: 0 0 2px rgba(209, 132, 211, 0.3), 0 0 3px rgba(209, 132, 211, 0.2); /* Brillo rosa más suave */
}

.profileContentBox .userDetails .allGrayBox .grayBox .count.diamonds {
    color: #37C9EA;
    text-shadow: 0 0 2px rgba(55, 201, 234, 0.3), 0 0 3px rgba(55, 201, 234, 0.2); /* Brillo azul más suave */
}


.profileContentBox .checkIn {
    background: rgba(0, 0, 0, .28);
    padding: 0 12px;
    color: #fff;
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: .7px;
    text-transform: uppercase;
    outline: none;
    transition: opacity .18s ease;
    text-decoration: none;
    position: absolute;
    right: 76px;
    top: 53px;
    width: 164px;
    height: 58px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 2px;
    box-shadow: none;
}

.profileContentBox .checkIn:hover {
    color: #fff;
    border-color: rgba(255, 155, 0, .45);
    background: rgba(255, 155, 0, .12);
}


.profileContentBox .icon {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.profileContentBox .checkIn .icon {
    height: 58px;
    width: 28px;
    border-radius: 2px;
    margin-bottom: 0;
    flex: 0 0 28px;
    color: rgba(255, 255, 255, .72);
    background: transparent;
    border: 0;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.profileContentBox .checkIn:hover .icon {
    color: #fff;
}

.profileContentBox .icon .vip {
    height: 40px;
    width: 40px;
}

.profileContentBox .count.vip {
    color: #e9eaea;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    line-height: 1.05;
    text-align: left;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .65);
}

.profileContentBox .count.vip .senior-title {
    color: #ffa600;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.profileContentBox .count.vip .senior-days {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.kx-overlay-loading-host {
    position: relative;
}

.kx-overlay-skeleton {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #15191a;
    pointer-events: none;
    overflow: hidden;
}

.profileContentBox .kx-overlay-skeleton {
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .76), rgba(0, 0, 0, .58)),
        url(../img/personal/texture.png) no-repeat center center,
        rgba(18, 22, 23, .88);
    background-size: 100% 100%, 100%, auto;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.kx-overlay-avatar {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .38);
    background-repeat: no-repeat;
    background-position: center -30px;
    background-size: auto;
    background-color: rgba(255, 255, 255, .08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .36);
    opacity: .74;
}

.kx-overlay-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
    pointer-events: none;
}

.kx-overlay-profile-lines {
    position: absolute;
    left: 180px;
    top: 72px;
    width: 250px;
}

.kx-skeleton-line.is-profile-name {
    width: 150px;
    height: 30px;
}

.kx-skeleton-line.is-profile-small {
    width: 155px;
    height: 9px;
    margin-top: 6px;
}

.kx-skeleton-line.is-profile-small.is-short {
    width: 128px;
}

.kx-overlay-currency {
    position: absolute;
    top: 35px;
    left: 405px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.kx-overlay-currency div {
    width: 125px;
    height: 32px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .22), rgba(255, 255, 255, .11));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
}

.ai-analysis-box .kx-overlay-skeleton.is-ai {
    position: static;
    inset: auto;
    background: transparent;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
    padding: 0;
    box-sizing: border-box;
    align-items: start;
}

.kx-overlay-ai-card {
    min-width: 0;
    min-height: 152px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 6px;
    background: rgba(255, 255, 255, .025);
    box-sizing: border-box;
}

.ai-analysis-box .png15.kx-overlay-loading-host {
    min-height: 182px;
}

.kx-skeleton-line.is-ai-title {
    width: 34%;
    height: 10px;
    margin-bottom: 8px;
}

.kx-skeleton-line.is-ai-item {
    width: 100%;
    height: 29px;
    margin-top: 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .16);
    position: relative;
    overflow: hidden;
    animation: none;
}

.kx-skeleton-line.is-ai-item span {
    position: absolute;
    left: 9px;
    right: 24%;
    top: 50%;
    height: 10px;
    margin-top: -5px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
}

.kx-overlay-ai-card .kx-skeleton-line.is-ai-item:nth-child(3) span {
    right: 12%;
}

.kx-overlay-ai-card .kx-skeleton-line.is-ai-item:nth-child(5) span {
    right: 36%;
}

.profile-action-buttons {
    float: right;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-header-title {
    position: relative;
    min-height: 24px;
    box-sizing: border-box;
}

.profile-header-title .profile-action-buttons {
    float: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.button-wayback {
    min-height: 24px;
    height: 24px;
    line-height: 22px;
    padding-top: 0;
    padding-bottom: 0;
}

.button-wayback i {
    margin-right: 6px;
}

.button-wayback:hover {
    text-decoration: none;
}

.button-ai-analysis,
.ai-analysis-expand-toggle {
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .88);
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.button-ai-analysis:hover,
.ai-analysis-expand-toggle:hover {
    background: rgba(255, 255, 255, .09);
}

.button-ai-analysis.is-busy {
    opacity: .7;
    cursor: wait;
    border-color: rgba(40, 126, 166, .26);
}

.button-ai-analysis.is-disabled,
.button-ai-analysis:disabled {
    opacity: .82;
    cursor: not-allowed;
    box-shadow: none;
}

.ai-analysis-box {
    background: rgba(0, 0, 0, .35);
    margin-bottom: 10px;
    overflow: visible;
}

.ai-analysis-box > .png15 {
    background: transparent;
}

.ai-analysis-box .title.small {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.ai-analysis-box .title.small .ai-analysis-title-inline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-analysis-box .title.small .profile-action-buttons {
    margin-left: auto;
    flex-shrink: 0;
}

.ai-analysis-box .title.small .profile-action-buttons.ai-analysis-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-analysis-box .title.small .button-ai-analysis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    min-height: 28px;
    height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    line-height: 1;
}

.ai-analysis-box .title.small .ai-analysis-expand-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    height: 26px;
    box-sizing: border-box;
    line-height: 1;
}

.ai-analysis-root {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.ai-analysis-status-summary {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 320px;
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 4px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    position: relative;
    overflow: hidden;
}

.ai-analysis-status-summary.status-queued,
.ai-analysis-status-summary.status-processing,
.ai-analysis-status-summary.status-retry_pending {
    border-color: rgba(40, 126, 166, .35);
    animation: ai-analysis-status-glow 10s ease-in-out infinite;
}

.ai-analysis-status-summary.status-paused {
    border-color: rgba(223, 145, 39, .35);
}

.ai-analysis-status-summary.status-ready {
    border-color: rgba(39, 174, 96, .35);
}

.profile-rares-title {
    display: block;
    padding-right: 132px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-rares-title span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-rares-box {
    height: 240px;
    overflow: hidden;
}

.profile-rares-refresh {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
}

.profile-rares-refresh:hover {
    color: #fff;
}

.profile-rares-refresh:disabled {
    cursor: default;
}

.profile-rares-container {
    margin-left: 0;
    padding: 2px 10px 0;
    box-sizing: border-box;
    max-width: 100%;
    height: 183px;
    min-height: 183px;
    max-height: 183px;
    overflow-y: auto;
    overflow-x: hidden;
}

.profile-rares-container.is-loading {
    overflow: hidden;
}

.profile-rares-container .profile-rares-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 43px);
    column-gap: 0;
    row-gap: 2px;
    justify-content: space-between;
    align-content: start;
    max-width: 100%;
    overflow: visible;
}

.profile-rares-container .profile-rares-list .item {
    left: 0;
    margin: 0;
    box-sizing: border-box;
    transition: box-shadow .14s ease, border-color .14s ease, background-color .14s ease;
}

.profile-rares-container .profile-rares-list .item:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 155, 0, .55), 0 0 0 1px rgba(0, 0, 0, .28);
    background-color: rgba(255, 255, 255, .025);
}

.profile-rares-container .profile-rares-list > .error-message {
    grid-column: 1 / -1;
    width: 100%;
    height: 100%;
    min-height: 190px;
    margin: 0;
    padding: 0;
}

.profile-rares-container .profile-rares-list > .error-message p {
    margin: 0;
}

.ai-analysis-status-summary.status-ready_stale {
    border-color: rgba(223, 145, 39, .4);
    background: rgba(223, 145, 39, .06);
}

.ai-analysis-status-summary.status-error {
    border-color: rgba(192, 57, 43, .4);
}

.ai-analysis-status-summary-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font: 700 10px 'Roboto Condensed', sans-serif;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-analysis-status-summary-text .fa {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
    opacity: .82;
}

@keyframes ai-analysis-status-glow {
    0% {
        border-color: rgba(40, 126, 166, .34);
        box-shadow: 0 0 0 rgba(40, 126, 166, 0), inset 0 0 0 1px rgba(40, 126, 166, .04);
    }

    50% {
        border-color: rgba(82, 176, 219, .72);
        box-shadow: 0 0 14px rgba(40, 126, 166, .18), inset 0 0 0 1px rgba(82, 176, 219, .22);
    }

    100% {
        border-color: rgba(40, 126, 166, .34);
        box-shadow: 0 0 0 rgba(40, 126, 166, 0), inset 0 0 0 1px rgba(40, 126, 166, .04);
    }
}

.ai-analysis-profile-view {
    padding-top: 0;
    overflow: visible;
}

.ai-analysis-empty {
    margin: 0;
    font: 300 13px 'Roboto', sans-serif;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

.ai-analysis-profile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
    align-items: start;
}

.ai-analysis-section {
    min-width: 0;
    padding: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .055);
    display: flex;
    flex-direction: column;
}

.ai-analysis-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .72);
}

.ai-analysis-section-label .fa {
    font-size: 11px;
    line-height: 1;
}

.ai-analysis-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
}

.ai-analysis-list li {
    padding: 7px 9px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .16);
    font: 400 11px 'Roboto', sans-serif;
    line-height: 1.35;
    color: rgba(255, 255, 255, .88);
    word-break: break-word;
}

.ai-analysis-section-empty {
    margin: 0;
    font: 300 11px 'Roboto', sans-serif;
    line-height: 1.4;
    color: rgba(255, 255, 255, .5);
}

.ai-analysis-status-summary.is-hidden,
.button-ai-analysis.is-hidden {
    display: none !important;
}

.is-hidden {
    display: none !important;
}

/* Estado compartido para listas de perfil: evita que el grid comprima los mensajes. */
.profile-section-state {
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .72);
    display: flex;
    flex: 1 0 100%;
    font: 400 14px 'Roboto', sans-serif;
    grid-column: 1 / -1;
    justify-content: center;
    line-height: 1.45;
    list-style: none;
    margin: 0 !important;
    min-height: 190px;
    padding: 20px;
    text-align: center;
    width: 100%;
}

.profile-section-state-error {
    color: rgba(255, 255, 255, .82);
}

.profile-badges-list > .profile-section-state,
.profile-inventory-list > .profile-section-state {
    min-height: 193px;
}

/* Inventario unificado: las dos colecciones comparten una navegación local. */
.profile-inventory-tabs {
    min-width: 0;
}

.profile-inventory-title {
    align-items: center;
    display: flex !important;
    gap: 12px;
    justify-content: space-between;
}

.profile-inventory-title > span {
    min-width: 0;
}

.profile-inventory-title .profile-inventory-tabs {
    flex: 0 0 auto;
    margin-left: auto;
}

.profile-inventory-tab-strip {
    margin: 0;
    padding: 0;
}

.profile-inventory-tab-strip .hk-tab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-inventory-tab-strip .hk-tab-button {
    align-items: center;
    appearance: none;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 3px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .68);
    cursor: pointer;
    display: inline-flex;
    font: 700 11px 'Roboto Condensed', sans-serif;
    justify-content: center;
    line-height: 1;
    min-height: 28px;
    padding: 0 11px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.profile-inventory-tab-strip .hk-tab-button:hover,
.profile-inventory-tab-strip .hk-tab-button:focus-visible,
.profile-inventory-tab-strip .hk-tab-button.is-active {
    background: rgba(255, 155, 0, .14);
    border-color: rgba(255, 155, 0, .7);
    color: #fff;
    outline: none;
}

.profile-inventory-tab-panel[hidden] {
    display: none !important;
}

.profile-inventory-tab-panel .item {
    cursor: pointer;
}

.profile-inventory-tab-panel .item[aria-selected="true"] {
    outline: 2px solid rgba(255, 155, 0, .86);
    outline-offset: 1px;
}

.profile-inventory-actions .function {
    width: 100%;
}

#list-users > .profile-section-state {
    height: 100%;
    min-height: 100%;
}

/* Empty/error messages are panel states, not alternating data rows. */
.profile-page #list-users > .profile-section-state,
.profile-page #hot-rooms > .profile-section-state {
    background: transparent;
}

/* source: organizacion.css */
.organization-profile-box,
.organization-ai-box,
.organization-influence-box,
.organization-history-box {
    --organization-color-one: #2dd6a3;
    --organization-color-two: #ffffff;
}

.organization-title-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 100%;
}

.organization-profile-box > .title.small {
    display: flex;
    align-items: center;
    gap: 10px;
}

.organization-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .82);
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
}

.organization-link-button:hover {
    color: #fff;
    text-decoration: none;
}

.organization-profile-header {
    min-height: 136px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, .018);
}

.organization-badge-frame {
    width: 118px;
    height: 118px;
    flex: 0 0 118px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)),
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .22) 66%);
    border: 1px solid color-mix(in srgb, var(--organization-color-one) 50%, var(--organization-color-two));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .035),
        0 0 0 3px color-mix(in srgb, color-mix(in srgb, var(--organization-color-one) 50%, var(--organization-color-two)) 12%, transparent);
    box-sizing: border-box;
}

.organization-badge-frame img {
    display: block;
    width: 86px;
    height: 86px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
}

.organization-badge-frame .fa {
    color: rgba(255, 255, 255, .42);
    font-size: 34px;
}

.organization-profile-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.organization-profile-copy h1 {
    margin: 0 0 7px;
    color: #fff;
    font: 700 28px 'Roboto Condensed', sans-serif;
    letter-spacing: 0;
}

.organization-profile-copy p {
    max-width: 930px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font: 700 13px 'Roboto', sans-serif;
    line-height: 1.5;
}

.organization-profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 15px;
}

.organization-profile-stats span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 31px;
    padding: 0 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .82);
    font: 700 13px 'Roboto Condensed', sans-serif;
}

.organization-profile-stats span .fa {
    font-size: 13px;
}

.organization-profile-stats .fa,
.organization-section-label,
.organization-axis-item .fa,
.organization-signals .fa {
    color: color-mix(in srgb, var(--organization-color-one) 72%, #fff);
}

.organization-stability-meter {
    width: 230px;
    flex: 0 0 230px;
    align-self: center;
    margin-left: auto;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    border: 0;
}

.organization-stability-meter-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.organization-stability-meter-label span {
    min-width: 0;
    color: rgba(255, 255, 255, .58);
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.organization-stability-meter-label strong {
    color: rgba(255, 255, 255, .9);
    font: 700 13px 'Roboto', sans-serif;
}

.organization-stability-meter-bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.organization-stability-meter-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--organization-color-one), color-mix(in srgb, var(--organization-color-one) 45%, var(--organization-color-two)));
}

.organization-ai-actions {
    float: none;
}

.organization-ai-overview {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, .76);
    font: 400 14px 'Roboto', sans-serif;
    line-height: 1.6;
}

.organization-ai-section {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.organization-ai-section.tone-politics {
    border-color: rgba(80, 225, 148, .16);
}

.organization-ai-section.tone-roleplay {
    border-color: rgba(155, 110, 255, .16);
}

.organization-ai-section.tone-relations {
    border-color: rgba(255, 177, 58, .16);
}

.organization-ai-section.tone-members {
    border-color: rgba(70, 209, 181, .16);
}

.organization-ai-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .88);
}

.organization-ai-section-label .fa {
    font-size: 13px;
}

.organization-ai-column-list li {
    padding: 8px 10px;
    line-height: 1.45;
}

.organization-ai-culture {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.organization-ai-culture-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .88);
    font: 700 12px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-ai-culture-title .fa {
    color: var(--organization-color-one);
}

.organization-ai-culture-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.organization-ai-culture-section {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .055);
    background: rgba(255, 255, 255, .025);
}

.organization-ai-culture-section strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .78);
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-ai-culture-section strong .fa {
    color: var(--organization-color-one);
}

.organization-ai-help {
    margin-left: 2px;
    color: rgba(255, 255, 255, .36) !important;
    cursor: help;
}

.organization-ai-culture-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.organization-ai-culture-tag,
.organization-ai-culture-empty {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 7px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .055);
    color: rgba(255, 255, 255, .76);
    font: 700 11px 'Roboto', sans-serif;
}

.organization-ai-culture-tag {
    --culture-accent: #33e0ad;
    --culture-bg: rgba(51, 224, 173, .07);
    flex-direction: row;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 9px;
    border-color: rgba(51, 224, 173, .2);
    background: linear-gradient(180deg, var(--culture-bg), rgba(0, 0, 0, .16));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.organization-ai-culture-tag > .fa {
    width: 15px;
    color: var(--culture-accent);
    text-align: center;
    font-size: 13px;
}

.organization-ai-culture-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.organization-ai-culture-tag b {
    font-weight: 800;
}

.organization-ai-culture-tag small {
    color: rgba(255, 255, 255, .48);
    font: 700 9px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-ai-culture-tag.state-observation,
.organization-ai-culture-tag.state-observing,
.organization-ai-culture-tag.state-incipient,
.organization-ai-culture-tag.state-forming,
.organization-ai-culture-tag.state-legacy_pending {
    border-color: rgba(255, 168, 0, .22);
}

.organization-ai-culture-tag.state-emergent,
.organization-ai-culture-tag.state-consolidating {
    border-color: rgba(100, 218, 180, .28);
}

.organization-ai-culture-tag.state-developed,
.organization-ai-culture-tag.state-consolidated,
.organization-ai-culture-tag.state-dominant,
.organization-ai-culture-tag.state-level_1,
.organization-ai-culture-tag.state-level_2,
.organization-ai-culture-tag.state-level_3 {
    border-color: color-mix(in srgb, var(--organization-color-one) 55%, rgba(255,255,255,.18));
    background: rgba(255, 255, 255, .04);
}

.organization-ai-culture-tag.culture-tone-commerce {
    --culture-accent: #f0b24a;
    --culture-bg: rgba(240, 178, 74, .08);
    border-color: rgba(240, 178, 74, .38);
}

.organization-ai-culture-tag.culture-tone-politics {
    --culture-accent: #63d8ff;
    --culture-bg: rgba(99, 216, 255, .08);
    border-color: rgba(99, 216, 255, .32);
}

.organization-ai-culture-tag.culture-tone-wealth {
    --culture-accent: #ffe06a;
    --culture-bg: rgba(255, 224, 106, .08);
    border-color: rgba(255, 224, 106, .34);
}

.organization-ai-culture-tag.culture-tone-roleplay {
    --culture-accent: #a884ff;
    --culture-bg: rgba(168, 132, 255, .08);
    border-color: rgba(168, 132, 255, .34);
}

.organization-ai-culture-tag.culture-tone-tradition {
    --culture-accent: #ff6aa2;
    --culture-bg: rgba(255, 106, 162, .08);
    border-color: rgba(255, 106, 162, .34);
}

.organization-ai-culture-tag.culture-tone-craft {
    --culture-accent: #91d27a;
    --culture-bg: rgba(145, 210, 122, .08);
    border-color: rgba(145, 210, 122, .34);
}

.organization-ai-culture-tag.culture-tone-social {
    --culture-accent: #55e0ad;
    --culture-bg: rgba(85, 224, 173, .08);
    border-color: rgba(85, 224, 173, .34);
}

.organization-ai-culture-empty {
    color: rgba(255, 255, 255, .42);
    font-weight: 600;
}

.organization-ai-culture-evolution {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .66);
    font: 400 13px 'Roboto', sans-serif;
    line-height: 1.5;
}

.organization-relation-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.organization-relation-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .6px;
    flex: 0 0 auto;
}

.organization-relation-tag.is-aliado {
    background: rgba(56, 197, 114, .16);
    border: 1px solid rgba(56, 197, 114, .24);
    color: #76e39f;
}

.organization-relation-tag.is-enemigo {
    background: rgba(201, 82, 82, .16);
    border: 1px solid rgba(201, 82, 82, .24);
    color: #f08d8d;
}

.organization-relation-tag.is-neutral {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .7);
}

.organization-relation-tag.is-comercio {
    background: rgba(232, 182, 48, .16);
    border: 1px solid rgba(232, 182, 48, .24);
    color: #f0cf74;
}

.organization-relation-copy {
    min-width: 0;
    display: block;
}

.organization-analysis-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px 0;
}

.organization-analysis-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .055);
    color: rgba(255, 255, 255, .62);
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-analysis-meta span:last-child {
    text-transform: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.organization-analysis-meta .fa,
.organization-analysis-meta strong {
    color: color-mix(in srgb, var(--organization-color-one) 72%, #fff);
}

.organization-analysis-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 18px;
    padding: 16px;
}

.organization-analysis-unavailable {
    padding: 28px 16px;
    color: rgba(255, 255, 255, .62);
    font: 700 13px 'Roboto', sans-serif;
    text-align: center;
}

.organization-analysis-main,
.organization-analysis-side,
.organization-side-section {
    min-width: 0;
}

.organization-section-label {
    display: block;
    margin-bottom: 8px;
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-analysis-main h2 {
    margin: 0 0 9px;
    color: #fff;
    font: 700 23px 'Roboto Condensed', sans-serif;
    letter-spacing: 0;
}

.organization-analysis-main > p,
.organization-empty-note {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font: 400 13px 'Roboto', sans-serif;
    line-height: 1.55;
}

.organization-axis-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin-top: 15px;
}

.organization-axis-item,
.organization-side-section {
    padding: 11px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .055);
}

.organization-axis-item span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .86);
    font: 700 12px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-axis-item .fa {
    margin-right: 7px;
}

.organization-axis-item p {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font: 400 12px 'Roboto', sans-serif;
    line-height: 1.42;
}

.organization-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.organization-signals .organization-section-label {
    width: 100%;
    margin-bottom: 0;
}

.organization-signals span:not(.organization-section-label) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .055);
    color: rgba(255, 255, 255, .8);
    font: 700 11px 'Roboto', sans-serif;
}

.organization-analysis-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.organization-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.organization-summary-list li {
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    color: rgba(255, 255, 255, .72);
    font: 400 12px 'Roboto', sans-serif;
    line-height: 1.4;
}

.organization-summary-list li:last-child {
    border-bottom: 0;
}

.organization-integrity-bar {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.organization-integrity-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--organization-color-one), color-mix(in srgb, var(--organization-color-one) 45%, var(--organization-color-two)));
}

#organization-ai-integrity,
.organization-stability-meter {
    cursor: help;
}

#organization-ai-integrity-label {
    margin-top: 7px;
    font: 700 12px 'Roboto Condensed', sans-serif;
}

.organization-influence-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
}

.organization-influence-item {
    display: flex;
    gap: 10px;
    min-height: 82px;
    padding: 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .055);
}

.organization-influence-avatar {
    width: 58px;
    height: 64px;
    flex: 0 0 58px;
    background-repeat: no-repeat;
    background-position: center -14px;
}

.organization-influence-copy {
    min-width: 0;
}

.organization-influence-copy strong {
    display: block;
    color: #fff;
    font: 700 14px 'Roboto', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.organization-influence-copy span {
    display: block;
    margin-top: 2px;
    color: color-mix(in srgb, var(--organization-color-two) 70%, rgba(255, 255, 255, .66));
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-influence-copy p,
.organization-influence-copy em {
    display: block;
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .64);
    font: 400 12px 'Roboto', sans-serif;
    line-height: 1.35;
}

.organization-influence-copy em {
    color: rgba(255, 255, 255, .46);
    font-style: normal;
}

.organization-empty-state {
    grid-column: 1 / -1;
    padding: 24px;
    color: rgba(255, 255, 255, .58);
    font: 400 13px 'Roboto', sans-serif;
    text-align: center;
}

.organization-history-list {
    padding: 14px;
}

.organization-history-item {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .055);
}

.organization-history-item:last-child {
    margin-bottom: 0;
}

.organization-history-period {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .48);
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-history-item h2 {
    margin: 0 0 7px;
    color: #fff;
    font: 700 21px 'Roboto Condensed', sans-serif;
    letter-spacing: 0;
}

.organization-history-item p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font: 400 13px 'Roboto', sans-serif;
    line-height: 1.55;
}

.organization-history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.organization-history-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .055);
    color: rgba(255, 255, 255, .8);
    font: 700 11px 'Roboto', sans-serif;
}

.organization-history-section {
    margin-top: 13px;
}

.organization-history-section strong {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .82);
    font: 700 12px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-history-section ul {
    margin: 0;
    padding-left: 16px;
    color: rgba(255, 255, 255, .66);
    font: 400 12px 'Roboto', sans-serif;
    line-height: 1.45;
}

.organization-history-culture {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .045);
}

.organization-history-culture > strong {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .82);
    font: 700 12px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-history-culture-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.organization-history-culture-grid span {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .52);
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-history-culture-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.organization-history-culture-tags em {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .055);
    color: rgba(255, 255, 255, .76);
    font: 700 11px 'Roboto', sans-serif;
    font-style: normal;
}

.organization-history-culture-tags em b {
    font-weight: 800;
}

.organization-history-culture-tags em small {
    color: rgba(255, 255, 255, .48);
    font: 700 9px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-history-changes {
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid rgba(255, 168, 0, .16);
    background: rgba(255, 168, 0, .035);
}

.organization-history-changes span {
    display: block;
    margin-bottom: 6px;
    color: #ffb02e;
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-history-changes ul {
    margin: 0;
    padding-left: 16px;
    color: rgba(255, 255, 255, .7);
    font: 400 12px 'Roboto', sans-serif;
    line-height: 1.45;
}

.organization-history-evolution {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .66);
    font: 400 12px 'Roboto', sans-serif;
}

.organization-ai-content {
    padding: 18px 22px 22px;
}

.organization-ai-summary {
    color: #c9c9c9;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 18px;
}

.organization-ai-grid,
.organization-culture-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.organization-culture-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
}

.organization-summary-grid {
    align-items: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
}

.organization-ai-context-line {
    align-items: center;
    color: rgba(255, 255, 255, .58);
    display: flex;
    flex-wrap: wrap;
    font: 700 12px 'Roboto Condensed', sans-serif;
    gap: 8px 12px;
    margin: -2px 0 12px;
}

.organization-ai-context-line span {
    color: rgba(255, 255, 255, .82);
    text-transform: uppercase;
}

.organization-ai-context-line small {
    color: rgba(255, 255, 255, .42);
    font: inherit;
}

.organization-ai-card,
.organization-culture-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px;
    min-height: 104px;
}

.organization-ai-card {
    align-self: start;
    box-sizing: border-box;
    min-width: 0;
    overflow: visible;
    position: relative;
}

.organization-ai-card h3,
.organization-culture-card h4 {
    color: #d7d7d7;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.organization-ai-card h3 i,
.organization-culture-card h4 i,
.organization-section-label i,
.organization-ai-note i {
    color: #33e0ad;
    margin-right: 7px;
}

.organization-ai-pill,
.organization-empty-pill,
.organization-culture-tag {
    display: inline-block;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    color: #d2d2d2;
    font-size: 12px;
    line-height: 1.35;
    margin: 0 6px 6px 0;
    padding: 7px 9px;
}

.organization-empty-pill {
    color: #999;
}

.organization-empty-pill.is-note {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 2px 0 0;
    color: rgba(255, 255, 255, .48);
    font: 400 12px 'Roboto', sans-serif;
}

.organization-category-pill {
    align-items: center;
    border-radius: 3px;
    box-sizing: border-box;
    display: inline-flex;
    gap: 7px;
    position: relative;
    min-width: 0;
    min-height: 38px;
    vertical-align: top;
    border-color: rgba(255, 255, 255, .08);
    outline: none;
}

.organization-category-pill .fa {
    color: var(--level-accent, var(--organization-color-one));
    font-size: 12px;
    margin: 0;
}

.organization-category-pill-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

.organization-category-pill b {
    display: block;
    font-weight: 800;
    min-width: 0;
    overflow-wrap: anywhere;
    padding-right: 0;
    white-space: normal;
}

.organization-category-pill small {
    border-left: 0;
    color: rgba(255, 255, 255, .56);
    display: block;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 1px;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding-left: 0;
    text-transform: uppercase;
}

.organization-category-pill.level-strong {
    --level-accent: #ff9d00;
    background: rgba(255, 157, 0, .15);
    border-color: rgba(255, 157, 0, .34);
}

.organization-category-pill.level-institutional {
    --level-accent: #33e0ad;
    background: rgba(51, 224, 173, .12);
    border-color: rgba(51, 224, 173, .28);
}

.organization-category-pill.level-medium {
    --level-accent: #62d6ff;
    background: rgba(63, 159, 208, .12);
    border-color: rgba(98, 214, 255, .24);
}

.organization-category-pill.level-soft {
    --level-accent: #ffd36b;
    background: rgba(214, 164, 58, .12);
    border-color: rgba(255, 211, 107, .24);
}

.organization-category-pill.level-muted {
    --level-accent: #9aa3ad;
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .075);
}

.organization-category-pill.semantic-tradition-consolidated {
    --level-accent: #b98cff;
    background: rgba(155, 110, 255, .12);
    border-color: rgba(185, 140, 255, .34);
    animation: organizationTraditionPulse 2.4s ease-in-out infinite;
    box-shadow: 0 0 0 1px rgba(185, 140, 255, .10), 0 0 8px rgba(185, 140, 255, .16);
}

.organization-category-pill.semantic-roleplay {
    --level-accent: #b98cff;
    background: rgba(155, 110, 255, .12);
    border-color: rgba(185, 140, 255, .30);
}

.organization-category-pill.semantic-politics {
    --level-accent: #33e0ad;
    background: rgba(51, 224, 173, .11);
    border-color: rgba(51, 224, 173, .28);
}

.organization-category-pill.semantic-commerce {
    --level-accent: #ffb13a;
}

.organization-category-pill.semantic-social {
    --level-accent: #62d6ff;
    background: rgba(63, 159, 208, .10);
    border-color: rgba(98, 214, 255, .22);
}

.organization-category-pill.semantic-governance {
    --level-accent: #33e0ad;
    background: rgba(51, 224, 173, .10);
    border-color: rgba(51, 224, 173, .24);
}

.organization-category-pill.semantic-technical {
    --level-accent: #72a8ff;
    background: rgba(80, 132, 220, .12);
    border-color: rgba(114, 168, 255, .28);
}

.organization-item-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    bottom: auto;
    z-index: 40;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    min-width: 180px;
    max-width: 260px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-top-color: rgba(255, 153, 0, .72);
    border-radius: 4px;
    background: rgba(13, 15, 16, .97);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .38);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

.organization-item-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    bottom: auto;
    width: 8px;
    height: 8px;
    border-left: 1px solid rgba(255, 255, 255, .1);
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: rgba(13, 15, 16, .96);
    transform: translateX(-50%) rotate(45deg);
}

.organization-category-pill.tooltip-below .organization-item-tooltip {
    top: calc(100% + 8px);
    bottom: auto;
}

.organization-category-pill.tooltip-below .organization-item-tooltip::after {
    top: -5px;
    bottom: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, .1);
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.organization-category-pill.tooltip-align-left .organization-item-tooltip {
    left: 0;
    transform: translateX(0) translateY(4px);
}

.organization-category-pill.tooltip-align-left:hover .organization-item-tooltip,
.organization-category-pill.tooltip-align-left:focus-visible .organization-item-tooltip {
    transform: translateX(0) translateY(0);
}

.organization-category-pill.tooltip-align-left .organization-item-tooltip::after {
    left: 18px;
}

.organization-category-pill.tooltip-align-right .organization-item-tooltip {
    right: 0;
    left: auto;
    transform: translateX(0) translateY(4px);
}

.organization-category-pill.tooltip-align-right:hover .organization-item-tooltip,
.organization-category-pill.tooltip-align-right:focus-visible .organization-item-tooltip {
    transform: translateX(0) translateY(0);
}

.organization-category-pill.tooltip-align-right .organization-item-tooltip::after {
    right: 18px;
    left: auto;
    transform: rotate(45deg);
}

.organization-item-tooltip-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.organization-item-tooltip-title i {
    color: #ff9900;
}

.organization-item-tooltip-meta {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
    line-height: 1.25;
    margin-top: 4px;
}

.organization-item-tooltip-meta i {
    width: 12px;
    flex: 0 0 12px;
    color: rgba(255, 185, 70, .9);
    text-align: center;
}

.organization-category-pill:hover,
.organization-category-pill:focus-visible {
    z-index: 50;
}

.organization-category-pill:hover .organization-item-tooltip,
.organization-category-pill:focus-visible .organization-item-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.organization-category-pill.tooltip-align-left:hover .organization-item-tooltip,
.organization-category-pill.tooltip-align-left:focus-visible .organization-item-tooltip,
.organization-category-pill.tooltip-align-right:hover .organization-item-tooltip,
.organization-category-pill.tooltip-align-right:focus-visible .organization-item-tooltip {
    transform: translateX(0) translateY(0);
}

@keyframes organizationTraditionPulse {
    0% {
        border-color: rgba(185, 140, 255, .42);
        box-shadow: 0 0 0 1px rgba(185, 140, 255, .12), 0 0 4px rgba(185, 140, 255, .18);
    }
    50% {
        border-color: rgba(210, 180, 255, .72);
        box-shadow: 0 0 0 1px rgba(210, 180, 255, .18), 0 0 12px rgba(185, 140, 255, .34);
    }
    100% {
        border-color: rgba(185, 140, 255, .42);
        box-shadow: 0 0 0 1px rgba(185, 140, 255, .12), 0 0 4px rgba(185, 140, 255, .18);
    }
}

.organization-card-groups {
    display: grid;
    gap: 10px;
}

.organization-card-group-title {
    color: rgba(255, 255, 255, .56);
    display: block;
    font: 800 10px 'Roboto Condensed', sans-serif;
    letter-spacing: .4px;
    margin: 0 0 7px;
    text-transform: uppercase;
}

.organization-card-group-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}

.organization-card-group-items .organization-category-pill {
    margin: 0;
    width: 100%;
}

.organization-card-group-items .organization-category-pill.is-wide {
    grid-column: 1 / -1;
}

.organization-card-group.is-collapsed .organization-extra-item {
    display: none;
}

.organization-ai-root:not(.is-expanded) .organization-expanded-only {
    display: none;
}

.organization-ai-root.is-expanded .organization-card-group.is-collapsed .organization-extra-item,
.organization-ai-root.is-expanded .organization-extra-item {
    display: inline-flex;
}

.organization-card-loose-items {
    margin-top: 10px;
}

#organization-ai-expand-toggle.is-hidden {
    display: none;
}

.organization-card-mini-note {
    margin: -3px 0 12px;
    color: rgba(255, 255, 255, .62);
    font: 400 12px 'Roboto', sans-serif;
    line-height: 1.45;
}

.organization-ai-card:nth-child(3) .organization-card-group-items {
    grid-template-columns: minmax(0, 1fr);
}

.organization-ai-card:nth-child(3) .organization-category-pill.level-muted {
    min-height: 0;
    padding: 2px 0;
    background: transparent;
    border: 0;
}

.organization-ai-card:nth-child(3) .organization-category-pill.level-muted .fa,
.organization-ai-card:nth-child(3) .organization-category-pill.level-muted small {
    display: none;
}

.organization-social-profile-intro {
    max-width: 860px;
    margin: 0 0 16px;
}

.organization-social-profile-intro h2 {
    margin: 0 0 7px;
    color: rgba(255, 255, 255, .93);
    font: 700 18px 'Roboto Condensed', sans-serif;
}

.organization-social-profile-intro p,
.organization-social-profile-section p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font: 400 13px/1.5 'Roboto', sans-serif;
}

.organization-social-profile-items {
    margin: 10px 0 0;
    padding-left: 18px;
    color: rgba(255, 255, 255, .65);
    font: 400 12px/1.45 'Roboto', sans-serif;
}

.organization-social-profile-items li + li {
    margin-top: 5px;
}

.organization-social-profile-coverage {
    margin: 15px 0 0;
    color: rgba(255, 255, 255, .48);
    font: 700 11px 'Roboto Condensed', sans-serif;
    letter-spacing: .02em;
}

.organization-ai-legend {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, .42);
    font: 700 11px 'Roboto Condensed', sans-serif;
    padding: 2px 2px 0;
}

.organization-culture-tag small {
    color: #9a9a9a;
    display: block;
    font-size: 9px;
    font-weight: 700;
    margin-top: 3px;
    text-transform: uppercase;
}

.organization-culture-evidence {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    margin: 0 0 8px;
    padding: 9px 10px;
}

.organization-culture-evidence strong {
    color: #f0f0f0;
    display: block;
    font-size: 12px;
    line-height: 1.25;
}

.organization-culture-evidence span {
    color: #ffb22c;
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    margin: 4px 0 5px;
    text-transform: uppercase;
}

.organization-culture-evidence p {
    color: #aaa;
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
}

.organization-section-label {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #d7d7d7;
    font-size: 12px;
    margin: 18px 0 0;
    padding-top: 16px;
    text-transform: uppercase;
}

.organization-ai-note {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #aaa;
    font-size: 12px;
    margin-top: 16px;
    padding-top: 12px;
}

.organization-patrimony-page {
    --patrimony-gold: #ff9f1c;
}

.organization-patrimony-box {
    --organization-color-one: #2dd6a3;
    --organization-color-two: #fff;
}

.organization-patrimony-summary {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.profile-patrimony-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
}

.organization-patrimony-total,
.organization-patrimony-stat,
.profile-patrimony-stat,
.organization-patrimony-chart-panel,
.organization-patrimony-members {
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 3px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.organization-patrimony-total {
    padding: 16px;
}

.organization-patrimony-total span,
.organization-patrimony-stat span,
.organization-patrimony-panel-title {
    color: rgba(255, 255, 255, .58);
    display: block;
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.organization-patrimony-total strong {
    color: var(--patrimony-gold);
    display: block;
    font: 700 30px 'Roboto Condensed', sans-serif;
    line-height: 1;
    margin-top: 6px;
}

.organization-patrimony-total em {
    color: rgba(255, 255, 255, .56);
    display: block;
    font: 400 12px 'Roboto', sans-serif;
    font-style: normal;
    margin-top: 8px;
}

.organization-patrimony-stat {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-rows: auto auto auto;
    min-height: 98px;
    padding: 13px;
}

.profile-patrimony-stat {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-rows: auto auto auto;
    min-height: 86px;
    padding: 13px;
}

.organization-patrimony-stat img,
.profile-patrimony-stat img,
.profile-patrimony-stat .kx-managed-currency-icon {
    align-self: center;
    grid-column: 2;
    grid-row: 1 / span 3;
    height: 36px;
    justify-self: center;
    object-fit: contain;
    width: 36px;
}

.organization-patrimony-stat span,
.organization-patrimony-stat strong,
.organization-patrimony-stat small,
.profile-patrimony-stat span,
.profile-patrimony-stat strong,
.profile-patrimony-stat small {
    grid-column: 1;
}

.organization-patrimony-stat.is-diamonds img,
.profile-patrimony-stat.is-diamonds img,
.profile-patrimony-stat.is-diamonds .kx-managed-currency-icon {
    height: 38px;
    width: 38px;
}

.organization-patrimony-stat.is-rares img,
.profile-patrimony-stat.is-rares img {
    height: 42px;
    width: 42px;
}

.organization-patrimony-stat strong,
.profile-patrimony-stat strong {
    color: #fff;
    display: block;
    font: 700 22px 'Roboto Condensed', sans-serif;
    line-height: 1;
    margin-top: 10px;
}

.organization-patrimony-stat small,
.profile-patrimony-stat small {
    color: rgba(255, 255, 255, .58);
    display: block;
    font: 700 11px 'Roboto', sans-serif;
    margin-top: 5px;
}

.organization-patrimony-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.6fr) minmax(360px, .9fr);
}

.organization-patrimony-chart-panel,
.organization-patrimony-members {
    padding: 12px;
}

.patrimony-compare-form {
    align-items: center;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    min-height: 28px;
}

.patrimony-compare-form > span {
    color: rgba(255, 255, 255, .62);
    flex: 0 0 auto;
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.patrimony-compare-select {
    background: #080a0c;
    border: 1px solid rgba(255, 159, 28, .45);
    border-radius: 3px;
    color: rgba(255, 255, 255, .86);
    flex: 1 1 240px;
    font: 700 11px 'Roboto Condensed', sans-serif;
    height: 28px;
    min-width: 180px;
    outline: none;
    padding: 0 8px;
    text-transform: uppercase;
}

.patrimony-compare-select option {
    background: #080a0c;
    color: rgba(255, 255, 255, .86);
}

.patrimony-compare-select option:checked,
.patrimony-compare-select option:hover {
    background: #2b2f33;
    color: #fff;
}

.patrimony-compare-select:focus {
    border-color: rgba(255, 159, 28, .42);
}

.patrimony-compare-selected {
    display: flex;
    flex: 1 0 100%;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.patrimony-compare-chip {
    align-items: center;
    background: rgba(255, 159, 28, .1);
    border: 1px solid rgba(255, 159, 28, .35);
    border-radius: 3px;
    color: rgba(255, 255, 255, .86);
    display: inline-flex;
    flex: 0 1 auto;
    font: 700 11px 'Roboto Condensed', sans-serif;
    gap: 6px;
    min-height: 24px;
    min-width: 0;
    padding: 0 7px;
    text-transform: uppercase;
}

.patrimony-compare-form button,
.patrimony-compare-chip button {
    background: rgba(255, 159, 28, .14);
    border: 1px solid rgba(255, 159, 28, .38);
    border-radius: 3px;
    color: #ffcf73;
    cursor: pointer;
    flex: 0 0 auto;
    font: 700 11px 'Roboto Condensed', sans-serif;
    height: 28px;
    padding: 0 10px;
    text-transform: uppercase;
}

.patrimony-compare-chip button {
    align-items: center;
    background: rgba(0, 0, 0, .2);
    display: inline-flex;
    height: 18px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 18px;
}

.organization-patrimony-chart-card .quotes-price-chart {
    height: 230px;
}

#list-users.organization-patrimony-users {
    height: 250px;
}

#list-users.organization-patrimony-users li .details {
    width: calc(100% - 82px);
}

#list-users.organization-patrimony-users li .details .top-desc {
    color: rgba(255, 255, 255, .56);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organization-patrimony-panel-title {
    margin-bottom: 10px;
}

.organization-patrimony-empty {
    background: rgba(0, 0, 0, .16);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 3px;
    color: rgba(255, 255, 255, .55);
    font: 400 13px 'Roboto', sans-serif;
    padding: 14px;
}

.organization-patrimony-member {
    align-items: center;
    background: rgba(0, 0, 0, .16);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 3px;
    display: grid;
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 52px;
    padding: 8px;
}

.organization-patrimony-member + .organization-patrimony-member {
    margin-top: 7px;
}

.organization-patrimony-avatar {
    background-color: rgba(255, 255, 255, .04);
    background-position: center -18px;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 3px;
    height: 42px;
    width: 42px;
}

.organization-patrimony-member strong {
    color: #fff;
    display: block;
    font: 700 13px 'Roboto', sans-serif;
}

.organization-patrimony-member span {
    color: rgba(255, 255, 255, .55);
    display: block;
    font: 400 11px 'Roboto', sans-serif;
    margin-top: 3px;
}

.organization-patrimony-member em {
    color: var(--patrimony-gold);
    font: 700 12px 'Roboto', sans-serif;
    font-style: normal;
    white-space: nowrap;
}

.profile-patrimony-skeleton .patrimony-skeleton-line,
.profile-patrimony-skeleton-chart span,
.profile-patrimony-skeleton .patrimony-skeleton-select {
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .11), rgba(255, 255, 255, .055));
    background-size: 220% 100%;
    animation: patrimonySkeletonPulse 1.4s ease-in-out infinite;
}

.profile-patrimony-skeleton .patrimony-skeleton-select {
    border: 1px solid rgba(255, 159, 28, .38);
    border-radius: 3px;
    box-sizing: border-box;
    flex: 1 1 240px;
    height: 28px;
    min-width: 180px;
}

.profile-patrimony-skeleton .patrimony-compare-form button {
    opacity: .78;
}

.profile-patrimony-skeleton .patrimony-skeleton-line {
    border-radius: 2px;
    display: inline-block;
    height: 10px;
    vertical-align: middle;
}

.profile-patrimony-skeleton .patrimony-skeleton-line.is-value {
    height: 14px;
    width: 74px;
}

.profile-patrimony-skeleton .patrimony-skeleton-line.is-label {
    width: 72px;
}

.profile-patrimony-skeleton .patrimony-skeleton-line.is-number {
    height: 20px;
    width: 42px;
}

.profile-patrimony-skeleton .patrimony-skeleton-line.is-small {
    width: 58px;
}

.profile-patrimony-skeleton-chart.quotes-price-chart {
    height: 230px;
    overflow: hidden;
    position: relative;
}

.profile-patrimony-skeleton-chart::before {
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .045) 0 1px, transparent 1px 58px);
    bottom: 18px;
    content: "";
    left: 12px;
    position: absolute;
    right: 12px;
    top: 18px;
}

.profile-patrimony-skeleton-chart span {
    border-radius: 2px;
    display: block;
    left: 38px;
    position: absolute;
}

.profile-patrimony-skeleton-chart span:nth-child(1) {
    background: rgba(255, 255, 255, .08);
    height: 10px;
    top: 42px;
    width: 58%;
}

.profile-patrimony-skeleton-chart span:nth-child(2) {
    background: rgba(255, 159, 28, .26);
    height: 3px;
    left: 52px;
    top: 136px;
    width: 84%;
}

.profile-patrimony-skeleton-chart span:nth-child(3) {
    background: rgba(255, 159, 28, .08);
    bottom: 28px;
    height: 46px;
    left: 52px;
    width: 84%;
}

@keyframes patrimonySkeletonPulse {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -120% 0;
    }
}

.organization-institutional-body {
    padding: 16px;
}

.organization-institutional-body > p {
    margin: 0 0 16px;
}

.organization-institutional-status {
    border-left: 3px solid #ff9f1c;
    padding: 10px 12px;
    background: rgba(255, 159, 28, .06);
}

.organization-institutional-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

.organization-institutional-columns h2 {
    font-size: 18px;
    margin: 0 0 12px;
}

.organization-institutional-metadata,
.organization-institutional-note,
[data-institutional-draft] {
    color: #aeb5b8;
    font-size: 12px;
}

.organization-institutional-editor label {
    display: block;
    font-weight: bold;
    margin: 16px 0 6px;
}

.organization-institutional-text {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.organization-institutional-editor textarea {
    box-sizing: border-box;
    width: 100%;
    resize: vertical;
    padding: 8px;
    border: 1px solid #42494c;
    border-radius: 2px;
    background: #202527;
    color: #e6e9ea;
    font: inherit;
}

.organization-institutional-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.organization-institutional-action {
    padding: 10px 16px;
    border: 1px solid #42494c;
    border-radius: 2px;
    background: #202527;
    color: #e6e9ea;
    font: inherit;
}

.organization-institutional-editor textarea:disabled,
.organization-institutional-action:disabled {
    opacity: .6;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .organization-institutional-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* source: senado.css */
.senado-detail-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    gap: 14px;
    margin: 0;
    padding: 14px;
    min-height: 118px;
    border: 0;
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)),
        rgba(0, 0, 0, .18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
    overflow: hidden;
    box-sizing: border-box;
}

.senado-detail-card::before {
    content: none;
}

.senado-detail-card::after {
    content: none;
}

.senado-primary-column {
    --senado-fixed-column-height: 372px;
    --senado-primary-summary-height: 372px;
    --senado-primary-gap: 10px;
    display: flex;
    flex-direction: column;
    gap: var(--senado-primary-gap);
    height: var(--senado-fixed-column-height);
}

.senado-primary-column > #contentBox {
    margin-bottom: 0;
}

.senado-primary-box > .title.small,
.senado-side-box > .title.small {
    line-height: 24px;
}

.senado-primary-box {
    min-height: 0;
    overflow: hidden;
}

.senado-primary-summary-box {
    height: var(--senado-primary-summary-height);
}

.senado-primary-summary-box .senado-detail-card {
    min-height: calc(var(--senado-fixed-column-height) - 32px);
    height: calc(var(--senado-fixed-column-height) - 32px);
}

.senado-detail-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.senado-side-box {
    height: var(--senado-fixed-column-height);
    overflow: hidden;
}

/* Todos los vacios del Senado llenan solo el cuerpo util de su panel. */
.senado-empty-state {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: 0;
    min-height: 0;
    padding: 15px;
    text-align: center;
    width: 100%;
}

.senado-empty-state p {
    margin: 0;
}

.senado-empty-state--empty {
    color: rgba(235, 235, 235, .72);
}

.senado-empty-state--error {
    color: #f0b0a3;
}

.senado-empty-state--error p {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}

.senado-empty-state--error p::before {
    align-items: center;
    border: 1px solid rgba(240, 176, 163, .62);
    border-radius: 50%;
    color: #ffcec5;
    content: '!';
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    height: 14px;
    justify-content: center;
    line-height: 1;
    width: 14px;
}

.senado-primary-summary-box > .senado-empty-state {
    height: calc(var(--senado-fixed-column-height) - 32px);
}

.senado-side-box > .senado-empty-state {
    height: 327px;
}

.senado-parliament > .senado-empty-state {
    height: 100%;
}

.senado-detail-card.has-senado-empty-state > .senado-detail-main,
.senado-detail-card.has-senado-empty-state > .senado-detail-meta-grid {
    visibility: hidden;
}

.senado-detail-card > .senado-detail-empty-state {
    height: 100%;
    inset: 0;
    position: absolute;
    z-index: 2;
}

.senado-detail-badge-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 118px;
    width: 118px;
    height: 118px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--senado-color-one, #16d9b2) 50%, var(--senado-color-two, #5aa7ff));
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)),
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .22) 66%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .035),
        0 0 0 3px color-mix(in srgb, color-mix(in srgb, var(--senado-color-one, #16d9b2) 50%, var(--senado-color-two, #5aa7ff)) 12%, transparent);
    box-sizing: border-box;
}

.senado-top-grid {
    display: grid;
    grid-template-columns: 1.35fr .85fr;
    gap: 12px;
    margin: 12px 0;
}

.senado-top-column {
    min-width: 0;
}

.senado-organizations-panel {
    border: 1px solid #2f2f2f;
    background: rgba(0, 0, 0, .14);
    padding: 10px;
    min-height: 118px;
}

.senado-organizations-title {
    font-size: 11px;
    font-weight: 700;
    color: #d9d9d9;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.senado-detail-badge-frame img {
    display: block;
    width: 86px;
    height: 86px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
}

.senado-detail-card.is-loading .senado-detail-badge-frame.is-loading::before {
    content: "";
    width: 82px;
    height: 82px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
    opacity: .42;
    filter: grayscale(1);
}

.senado-organization-skeleton-title {
    width: 72%;
    height: 20px;
    margin: 3px 0 10px;
}

.senado-organization-skeleton-desc {
    width: 92%;
    height: 11px;
    margin-bottom: 8px;
}

.senado-organization-skeleton-desc.is-short {
    width: 62%;
}

.senado-organization-skeleton-desc.is-mid {
    width: 78%;
}

.senado-detail-meta-skeleton {
    overflow: hidden;
}

.senado-detail-meta-skeleton .senado-detail-president-avatar-skeleton {
    opacity: .42;
    filter: grayscale(1);
}

.senado-organization-skeleton-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.senado-organization-skeleton-meta-label {
    width: 46%;
    height: 8px;
}

.senado-organization-skeleton-meta-value {
    width: 74%;
    height: 13px;
}

.senado-organization-skeleton-meta-extra {
    width: 54%;
    height: 8px;
    margin-top: 5px;
    opacity: .72;
}

.senado-detail-copy {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
    margin-top: 5px;
}

.senado-detail-title {
    margin-bottom: 7px;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    line-height: 1.12;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.senado-detail-description {
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.45;
    font-size: 12.5px;
    display: -webkit-box;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.senado-detail-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    width: 100%;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.senado-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.senado-detail-meta-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    color: color-mix(in srgb, color-mix(in srgb, var(--senado-color-one, #16d9b2) 50%, var(--senado-color-two, #5aa7ff)) 72%, #fff);
    font-size: 16px;
}

.senado-detail-meta-president {
    position: relative;
    align-items: center;
    padding-left: 50px;
    overflow: visible;
}

.senado-detail-president-avatar {
    position: absolute;
    left: -8px;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    width: 65px;
    height: 70px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .38));
}

.senado-detail-president-avatar.kx-list-user-avatar {
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
}

.senado-detail-president-avatar .kx-list-user-avatar-layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
}

.senado-detail-president-avatar .kx-list-user-avatar-hover {
    opacity: 0;
}

.senado-detail-meta-president:hover .senado-detail-president-avatar.kx-list-user-hover-ready .kx-list-user-avatar-default,
.senado-detail-meta-president:focus-within .senado-detail-president-avatar.kx-list-user-hover-ready .kx-list-user-avatar-default {
    opacity: 0;
}

.senado-detail-meta-president:hover .senado-detail-president-avatar.kx-list-user-hover-ready .kx-list-user-avatar-hover,
.senado-detail-meta-president:focus-within .senado-detail-president-avatar.kx-list-user-hover-ready .kx-list-user-avatar-hover {
    opacity: 1;
}

.senado-detail-president-avatar-skeleton {
    background-position: center;
    background-repeat: no-repeat;
}

.senado-detail-meta-president .senado-detail-meta-copy {
    min-width: 0;
}

.senado-detail-meta-copy {
    min-width: 0;
}

.senado-detail-meta-copy span {
    display: block;
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2px;
}

.senado-detail-meta-copy strong {
    display: block;
    margin-top: 4px;
    color: #f3f3f3;
    font-size: 14px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.senado-activity-feed {
    margin: 0;
    background: rgba(0, 0, 0, .14);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.senado-activity-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    cursor: default;
    transition: background-color .16s ease;
    min-height: 54px;
    box-sizing: border-box;
}

.senado-activity-link {
    text-decoration: none;
}

.senado-activity-link.is-disabled {
    cursor: default;
    pointer-events: none;
    opacity: .82;
}

.senado-activity-item:hover {
    background: rgba(255, 255, 255, .035);
}

.senado-activity-item:last-child {
    border-bottom: 0;
}

.senado-activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
    color: #d9d9d9;
    font-size: 12px;
}

.senado-activity-icon-debate {
    color: #d7dde5;
}

.senado-activity-icon-approved {
    color: #40d67c;
}

.senado-activity-icon-election {
    color: #c4c8d6;
}

.senado-activity-body {
    flex: 1 1 auto;
    min-width: 0;
}

.senado-activity-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.senado-activity-title {
    color: #f1f1f1;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.senado-activity-meta {
    margin-top: 3px;
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.senado-activity-status {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #fff;
    margin-top: 1px;
}

.senado-activity-status-debate {
    background: #24598a;
}

.senado-activity-status-approved {
    background: #23883e;
}

.senado-activity-status-election {
    background: #5b4a92;
}

.senado-activity-status-rejected {
    background: #a23930;
}

.senado-activity-status-closed {
    background: #555;
}

.senado-activity-empty {
    padding: 14px 12px;
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
}

.senado-activity-feed::-webkit-scrollbar {
    width: 8px;
}

.senado-activity-feed::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
    border-radius: 999px;
}

.senado-activity-feed::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .12));
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .16);
}

.senado-activity-feed::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .16));
}

.senado-item-container {
    min-height: 205px;
    max-height: 205px;
}

.item-organization {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto;
}

#list-users.senado-users-list {
    height: 327px;
    min-height: 327px;
    max-height: 327px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) rgba(255, 255, 255, .04);
}

.senado-leader-tag {
    display: inline-block;
    padding: 1px 4px;
    margin-left: 4px;
    border-radius: 3px;
    background-color: #d4af37;
    color: #000;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}

.senado-seniors-tag {
    display: inline-block;
    padding: 1px 4px;
    margin-left: 4px;
    border-radius: 3px;
    background-color: #e24634;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}

.senado-afiliated-tag {
    display: inline-block;
    padding: 1px 4px;
    margin-left: 4px;
    border-radius: 3px;
    background-color: #666;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}

.senado-detail-badge-frame-active {
    border: 0.0625pc solid var(--senado-color-one);
}

.senado-chamber-box {
    margin-top: 8px;
    border: 1px solid #2f2f2f;
    background: rgba(0, 0, 0, .1);
    padding: 12px;
}

.senado-chamber-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.senado-chamber-subtitle {
    color: #bfbfbf;
    font-size: 11px;
    margin-top: 2px;
}

.senado-parliament {
    position: relative;
    height: 380px;
    margin-top: 8px;
    overflow: hidden;
}

.senado-parliament[data-senate-skeleton-layout="1"] {
    min-height: 300px;
    height: var(--senado-skeleton-height, 380px);
}

.senado-parliament[data-senate-skeleton-layout="1"] .senado-seat {
    left: clamp(26px, calc(50% + var(--senado-skeleton-offset-x, 0px)), calc(100% - 26px));
    top: var(--senado-skeleton-top, 50%);
    transform: translate(-50%, -50%);
}

.senado-seat {
    position: absolute;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--senado-color-one, #16d9b2) 50%, var(--senado-color-two, #5aa7ff));
    background: rgba(0, 0, 0, .45);
    padding: 2px;
    box-sizing: border-box;
    overflow: visible;
    text-decoration: none;
    cursor: pointer;
}

.senado-seat:hover,
.senado-seat:focus-visible {
    z-index: 8;
}

.senado-seat-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    min-width: 168px;
    max-width: 220px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-top-color: color-mix(in srgb, var(--senado-color-one, #16d9b2) 45%, var(--senado-color-two, #5aa7ff));
    border-radius: 4px;
    background: rgba(13, 15, 16, .97);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    box-sizing: border-box;
}

.senado-seat-tooltip-below .senado-seat-tooltip {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateX(-50%) translateY(-4px);
}

.senado-seat-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: rgba(13, 15, 16, .96);
    transform: translateX(-50%) rotate(45deg);
}

.senado-seat-tooltip-below .senado-seat-tooltip::after {
    top: -5px;
    bottom: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, .1);
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.senado-seat-tooltip-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.senado-seat-tooltip-title-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.senado-seat-tooltip-title i {
    color: color-mix(in srgb, var(--senado-color-one, #16d9b2) 62%, var(--senado-color-two, #5aa7ff));
}

.senado-seat-tooltip-title .kx-list-user-country-flag {
    flex: 0 0 auto;
    width: 18px;
    height: 13px;
    object-fit: cover;
    position: relative;
    top: 3px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .45);
    display: block;
}

.senado-seat-tooltip-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
    line-height: 1.25;
    margin-top: 4px;
}

.senado-seat-tooltip-meta i {
    width: 12px;
    color: color-mix(in srgb, var(--senado-color-two, #5aa7ff) 70%, #fff);
    text-align: center;
}

.senado-seat:hover .senado-seat-tooltip,
.senado-seat:focus-visible .senado-seat-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.senado-seat-avatar {
    background: no-repeat center -21px;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box;
}

.senado-seat-avatar.kx-hover-avatar .kx-hover-avatar-layer,
.senado-parliament-president-avatar.kx-hover-avatar .kx-hover-avatar-layer {
    background-position: center -21px;
}

.senado-seat-placeholder {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .11);
    animation: none;
    pointer-events: none;
}

.senado-seat-avatar-placeholder {
    background: transparent;
}

.senado-seat-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
}

.senado-parliament-presidency {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 2px 0 10px;
}

.senado-parliament-presidency-seats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 58px;
}

.senado-parliament-president {
    display: block;
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(189, 154, 75, .72);
    background: rgba(0, 0, 0, .34);
    padding: 2px;
    box-sizing: border-box;
    overflow: visible;
    text-decoration: none;
}

.senado-parliament-president-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: no-repeat center -21px;
    overflow: hidden;
}

.senado-parliament-president:hover .senado-seat-tooltip,
.senado-parliament-president:focus-visible .senado-seat-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.senado-parliament-president-placeholder {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    padding: 2px;
    cursor: default;
}

.senado-parliament-presidency-label {
    color: #d5c394;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    text-align: center;
}

.senado-seat.is-selected-org {
    box-shadow: 0 0 0 1px color-mix(in srgb, color-mix(in srgb, var(--senado-color-one, #16d9b2) 50%, var(--senado-color-two, #5aa7ff)) 72%, rgba(255, 255, 255, .2));
}
/* ── Leyenda del recinto parlamentario ── */
.senado-parliament-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 4px 4px;
    border-top: 1px dashed rgba(255, 255, 255, .08);
    margin-top: 6px;
}

.senado-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #bbb;
    cursor: default;
}

.senado-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--senado-color-one, #16d9b2), var(--senado-color-two, #5aa7ff));
    flex-shrink: 0;
}

.senado-legend-count {
    color: #666;
    font-size: 10px;
}

/* ── Sidebar bancadas (pagina /senado) ── */
.senado-sidebar-org-list {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 327px;
    max-height: 327px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Like list-users, show a softly cropped next row only while loading. */
.senado-sidebar-org-list:has(> .senado-sidebar-org-skeleton) {
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 78px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 78px), transparent 100%);
}

.senado-sidebar-org-list > .senado-empty-state {
    height: 327px;
}

.senado-users-list > .senado-empty-state {
    height: 100%;
}

/* The generic #list-users odd-row rule must not darken the empty state. */
#list-users.senado-users-list > li.senado-empty-state {
    background: transparent;
}

.senado-users-list::-webkit-scrollbar {
    width: 8px;
}

.senado-sidebar-org-list::-webkit-scrollbar {
    display: none;
}

.senado-users-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
    border-radius: 999px;
}

.senado-users-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .12));
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .16);
}

.senado-users-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .16));
}

.senado-sidebar-org-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: background-color .18s ease;
}

.senado-sidebar-org-item:hover {
    background: rgba(255, 255, 255, .05);
}

.senado-sidebar-org-item.item-selected {
    background: transparent;
}

.senado-sidebar-org-badge {
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.senado-sidebar-org-info {
    flex: 1;
    min-width: 0;
}

.senado-sidebar-org-name {
    font-size: 11px;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.senado-sidebar-org-votes {
    font-size: 10px;
    color: #666;
}

.senado-sidebar-org-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--senado-color-one, #16d9b2), var(--senado-color-two, #5aa7ff));
    flex-shrink: 0;
    margin-left: -2px;
    margin-right: 4px;
}

.senado-sidebar-org-skeleton {
    cursor: default;
    pointer-events: none;
}

.senado-sidebar-org-skeleton .kx-skeleton-line {
    display: block;
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .11), rgba(255, 255, 255, .055));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
}

.senado-sidebar-org-skeleton .senado-sidebar-org-badge {
    display: flex;
    align-items: center;
    justify-content: center;
}

.senado-sidebar-org-skeleton .is-org-badge {
    width: 24px;
    height: 24px;
    border-radius: 3px;
}

.senado-sidebar-org-skeleton .is-org-name {
    width: 72%;
    height: 10px;
}

.senado-sidebar-org-skeleton .is-org-votes {
    width: 46px;
    height: 8px;
    margin-top: 5px;
    opacity: .62;
}

.senado-sidebar-org-skeleton .senado-sidebar-org-dot {
    background: rgba(255, 255, 255, .12);
}
.senado-organization-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: rgba(255, 255, 255, .62);
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.senado-organization-profile-link:hover {
    color: #fff;
}

.senado-organization-profile-link .fa {
    color: color-mix(in srgb, var(--senado-color-one) 65%, #fff);
}

/* source: senior-tools.css */
.senior-tools-page {
    margin-top: 12px;
}

.senior-tools-page > .grid_11 {
    width: 590px;
}

.senior-tools-page > .grid_7 {
    width: 600px;
    margin-left: 0;
    margin-right: 0;
}

.senior-tools-layout-form:after,
.senior-tools-proposals-row:after {
    content: "";
    display: table;
    clear: both;
}

.senior-tools-proposals-row {
    clear: both;
}

.senior-tools-specific-panel {
    display: none;
}

.senior-tools-proposals-panel {
    width: auto;
    float: none;
}

.senior-tools-panel {
    margin-bottom: 12px;
    overflow: hidden;
}

.senior-tools-panel > .title.small {
    line-height: 24px;
}

.senior-tools-body {
    padding: 12px;
    background: rgba(0, 0, 0, .14);
}

.senior-tools-alert {
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px;
    color: #e8e8e8;
    font-size: 11px;
    line-height: 1.35;
    background: rgba(255, 255, 255, .04);
}

.senior-tools-alert.is-error {
    border-color: rgba(255, 92, 83, .28);
    color: #ffb9b4;
    background: rgba(160, 35, 30, .18);
}

.senior-tools-alert.is-ok {
    border-color: rgba(62, 202, 113, .28);
    color: #b7f2cb;
    background: rgba(30, 120, 58, .18);
}

.senior-tools-alert.is-info {
    border-color: rgba(255, 153, 0, .28);
    color: #f0d9a8;
    background: rgba(180, 108, 0, .12);
}

.senior-tools-form label,
.senior-tools-specific-panel label {
    display: block;
    margin: 0 0 5px;
    color: #d8d8d8;
    font-size: 11px;
    font-weight: 700;
}

.senior-tools-form input,
.senior-tools-form textarea,
.senior-tools-form select,
.senior-tools-specific-panel input,
.senior-tools-specific-panel textarea,
.senior-tools-specific-panel select {
    width: 100%;
    margin: 0 0 10px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px;
    box-sizing: border-box;
    color: #f1f1f1;
    background: rgba(0, 0, 0, .22);
    outline: none;
    resize: vertical;
}

.senior-tools-form input:focus,
.senior-tools-form textarea:focus,
.senior-tools-form select:focus,
.senior-tools-specific-panel input:focus,
.senior-tools-specific-panel textarea:focus,
.senior-tools-specific-panel select:focus {
    border-color: rgba(70, 145, 220, .55);
    box-shadow: 0 0 0 2px rgba(70, 145, 220, .12);
}

.senior-tools-form select,
.senior-tools-specific-panel select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
    color-scheme: dark;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .78) 50%),
        linear-gradient(135deg, rgba(255, 255, 255, .78) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) calc(50% - 2px),
        calc(100% - 9px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.senior-tools-form select option,
.senior-tools-specific-panel select option {
    color: #f1f1f1;
    background: #0f141b;
}

.senior-tools-form select optgroup,
.senior-tools-specific-panel select optgroup {
    color: #111820;
    background: #d4d7da;
}

.senior-tools-form select optgroup option,
.senior-tools-specific-panel select optgroup option {
    color: #f1f1f1;
    background: #0f141b;
}

.senior-tools-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.senior-tools-field-help {
    margin: -3px 0 10px;
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.prediction-market-options {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
}

.prediction-market-option-extra {
    display: grid;
    grid-template-columns: 1fr 36px;
    gap: 8px;
}

.prediction-market-winners {
    min-width: 0;
    margin: 0 0 10px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px;
    background: rgba(0, 0, 0, .16);
}

.prediction-market-winners legend {
    padding: 0 4px;
    color: #d8d8d8;
    font-size: 11px;
    font-weight: 700;
}

.prediction-market-winners .senior-tools-field-help {
    margin: 0 0 8px;
}

.prediction-market-winner-list {
    display: grid;
    gap: 6px;
}

.prediction-market-winner-list .senior-tools-empty {
    padding: 2px 0;
}

.prediction-market-winner-choice {
    display: grid !important;
    grid-template-columns: 15px 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin: 0 !important;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px;
    color: #dedede;
    background: rgba(255, 255, 255, .025);
    box-sizing: border-box;
    cursor: pointer;
}

.prediction-market-winner-choice:hover {
    border-color: rgba(255, 184, 78, .38);
    background: rgba(160, 103, 0, .1);
}

.prediction-market-winner-choice:has(input:checked) {
    border-color: rgba(255, 193, 81, .64);
    background: rgba(160, 103, 0, .2);
}

.prediction-market-winner-choice input {
    width: 15px !important;
    height: 15px;
    margin: 0 !important;
    accent-color: #d99412;
}

.prediction-market-winner-choice .prediction-market-winner-number {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    color: #b9bfc0;
    font-size: 10px;
    font-weight: 900;
    box-sizing: border-box;
}

.prediction-market-winner-choice strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.senior-tools-small-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    min-height: 30px;
    margin: 0 0 10px;
    padding: 0 12px;
    border: 1px solid rgba(255, 160, 0, .55);
    border-radius: 3px;
    color: #f1f1f1;
    background: rgba(155, 96, 0, .34);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.senior-tools-small-action.is-danger {
    width: 36px;
    padding: 0;
    border-color: rgba(255, 90, 90, .45);
    background: rgba(120, 30, 30, .35);
}

.senior-tools-small-action:disabled {
    opacity: .45;
    cursor: default;
}

.senior-tools-editor-wrap {
    margin: 0 0 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px;
    background: rgba(0, 0, 0, .22);
}

.senior-tools-editor-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.senior-tools-editor-toolbar button {
    min-width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 3px;
    color: #dcdcdc;
    cursor: pointer;
    background: rgba(255, 255, 255, .04);
}

.senior-tools-editor-toolbar button:hover {
    background: rgba(255, 255, 255, .1);
}

.senior-tools-editor {
    min-height: 170px;
    padding: 10px;
    color: #f1f1f1;
    font-size: 12px;
    line-height: 1.55;
    outline: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.senior-tools-editor:empty:before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, .45);
}

.senior-tools-editor-wrap.is-disabled {
    opacity: .65;
}

.senior-tools-form input:disabled,
.senior-tools-form textarea:disabled,
.senior-tools-form select:disabled,
.senior-tools-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.senior-tools-button,
.senior-tools-vote-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(55, 122, 180, .85), rgba(32, 86, 135, .85));
}

/* Preserve native hidden semantics for the compound-offer controls/forms. */
[data-institutional-membership-offers] [hidden] {
    display: none !important;
}

/* Shared button display must not reveal pending/unauthorized variable controls. */
[data-institutional-variables] [hidden] {
    display: none !important;
}

.senior-tools-title-count {
    float: right;
    margin-right: 8px;
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-weight: 700;
}

.senior-tools-title-action {
    display: inline;
}

.senior-tools-title-action .ai-analysis-expand-toggle {
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 3px;
    color: #dcdcdc;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(0, 0, 0, .22);
}

.senior-tools-title-action .ai-analysis-expand-toggle:hover {
    background: rgba(255, 255, 255, .06);
}

.senior-tools-list {
    max-height: 486px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, .14);
}

.senior-tools-list::-webkit-scrollbar {
    width: 7px;
}

.senior-tools-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .18);
}

.senior-tools-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 5px;
}

.senior-tools-empty {
    padding: 14px;
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
}

/* Reuse the Senate empty-state treatment on the public project/policy lists. */
.senior-tools-empty.senado-empty-state {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: 0;
    min-height: 0;
    padding: 15px;
    text-align: center;
    width: 100%;
    color: rgba(235, 235, 235, .72);
    font-size: inherit;
}

.senate-policies-page .senior-tools-policies-list:has(> .senado-empty-state) {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.kx-projects-page .senior-tools-body:has(> .senado-empty-state),
.senate-policies-page .senior-tools-policies-list:has(> .senado-empty-state) {
    background: transparent;
}

.senior-tools-active-list {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, .14);
}

.senior-tools-active-list:has(> .senior-tools-empty) {
    min-height: 325px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.senior-tools-list[data-senate-proposals-list]:has(> .senior-tools-empty) {
    min-height: 325px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.senior-tools-active-list > .senior-tools-empty {
    width: 100%;
    box-sizing: border-box;
    padding: 0 14px;
    text-align: center;
    color: #e6eef4;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.senior-tools-list[data-senate-proposals-list] > .senior-tools-empty {
    width: 100%;
    box-sizing: border-box;
    padding: 0 14px;
    text-align: center;
    color: #e6eef4;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.senior-tools-active-list::-webkit-scrollbar {
    width: 7px;
}

.senior-tools-active-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .18);
}

.senior-tools-active-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 5px;
}

.senior-tools-active-item {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: #dcdcdc;
    text-decoration: none;
    background: rgba(255, 255, 255, .015);
    transition: background-color .16s ease;
}

.senior-tools-active-item:hover {
    background: rgba(255, 255, 255, .045);
}

.senior-tools-panel .camera-pagination {
    margin: 10px 12px 12px;
}

.senior-tools-panel .camera-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.senior-tools-panel .camera-pagination__btn {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 3px;
    color: #d8d8d8;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(0, 0, 0, .26);
}

.senior-tools-panel .camera-pagination__btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, .06);
}

.senior-tools-panel .camera-pagination__btn:disabled {
    opacity: .45;
    cursor: default;
}

.senior-tools-panel .camera-pagination__info {
    color: rgba(255, 255, 255, .7);
    font-size: 10px;
}

.senior-tools-proposal {
    display: block;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: #dcdcdc;
    text-decoration: none;
    transition: background-color .16s ease;
}

.senior-tools-proposal:hover {
    background: rgba(255, 255, 255, .035);
}

.senior-tools-proposal-main,
.senior-tools-proposal-head,
.senior-tools-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.senior-tools-proposal-main {
    margin-bottom: 6px;
}

.senior-tools-proposal-title,
.senior-tools-proposal-head strong {
    display: block;
    min-width: 0;
    color: #f5f5f5;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
}

.senior-tools-active-item .senior-tools-proposal-title {
    font-size: 13px;
}

.senior-tools-proposal-description,
.senior-tools-proposal p {
    margin: 7px 0 8px;
    color: rgba(255, 255, 255, .66);
    font-size: 11px;
    line-height: 1.45;
}

.senior-tools-proposal-type {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 6px;
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
}

.senior-tools-proposal-type i {
    color: rgba(92, 225, 174, .82);
    font-size: 10px;
}

.senior-tools-proposal-type.is-type-motion_censure,
.senior-tools-detail-category.is-type-motion_censure {
    color: #ff7f7f;
}

.senior-tools-proposal-type.is-type-motion_censure i,
.senior-tools-detail-category.is-type-motion_censure i {
    color: #ff7f7f;
}

.senior-tools-proposal-type.is-type-admin_appointment,
.senior-tools-detail-category.is-type-admin_appointment {
    color: #7fe6a5;
}

.senior-tools-proposal-type.is-type-admin_appointment i,
.senior-tools-detail-category.is-type-admin_appointment i {
    color: #7fe6a5;
}

.senior-tools-proposal-type.is-type-credit_issue,
.senior-tools-detail-category.is-type-credit_issue {
    color: #90efb1;
}

.senior-tools-proposal-type.is-type-credit_issue i,
.senior-tools-detail-category.is-type-credit_issue i {
    color: #90efb1;
}

.senior-tools-proposal-type.is-type-rare_issue,
.senior-tools-detail-category.is-type-rare_issue {
    color: #7fd8ff;
}

.senior-tools-proposal-type.is-type-rare_issue i,
.senior-tools-detail-category.is-type-rare_issue i {
    color: #7fd8ff;
}

.senior-tools-proposal-type.is-type-rare_remove,
.senior-tools-detail-category.is-type-rare_remove {
    color: #f0cf7a;
}

.senior-tools-proposal-type.is-type-rare_remove i,
.senior-tools-detail-category.is-type-rare_remove i {
    color: #f0cf7a;
}

.senior-tools-proposal-type.is-type-admin_policy,
.senior-tools-detail-category.is-type-admin_policy {
    color: #d7c8ff;
}

.senior-tools-proposal-type.is-type-admin_policy i,
.senior-tools-detail-category.is-type-admin_policy i {
    color: #d7c8ff;
}

.senior-tools-proposal-type.is-type-admin_policy_repeal,
.senior-tools-detail-category.is-type-admin_policy_repeal {
    color: #c6c6c6;
}

.senior-tools-proposal-type.is-type-admin_policy_repeal i,
.senior-tools-detail-category.is-type-admin_policy_repeal i {
    color: #c6c6c6;
}

.senior-tools-proposal-type.is-type-parameter_change,
.senior-tools-detail-category.is-type-parameter_change {
    color: #9bd2ff;
}

.senior-tools-proposal-type.is-type-parameter_change i,
.senior-tools-detail-category.is-type-parameter_change i {
    color: #9bd2ff;
}

.senior-tools-proposal-type-censure,
.senior-tools-active-type.is-censure {
    color: #ff7f7f;
    text-shadow: 0 0 8px rgba(255, 50, 50, .2);
}

.senior-tools-proposal-type-appointment,
.senior-tools-active-type.is-appointment {
    color: #7fe6a5;
    text-shadow: 0 0 8px rgba(62, 202, 113, .22);
}

.senior-tools-proposal-type-extra {
    margin: 0 0 10px;
}

.senior-tools-slot-info {
    margin-top: 6px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
}

.senior-tools-slot-info.is-available {
    color: #90efb1;
    border-color: rgba(46, 204, 113, .3);
    background: rgba(46, 204, 113, .12);
}

.senior-tools-slot-info.is-full {
    color: #ffb2ac;
    border-color: rgba(255, 86, 74, .3);
    background: rgba(255, 86, 74, .12);
}

.admin-rare-selection {
    min-height: 28px;
    margin: -2px 0 8px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    font-weight: 700;
    background: rgba(0, 0, 0, .18);
    box-sizing: border-box;
}

.admin-rare-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.admin-rare-price-grid label {
    color: rgba(255, 255, 255, .62);
    font-size: 10px;
    text-transform: uppercase;
}

.senior-tools-price-label {
    display: flex !important;
    align-items: center;
    gap: 5px;
    min-height: 17px;
    line-height: 15px;
}

.senior-tools-price-label .kx-me-currency-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    flex: 0 0 15px;
    image-rendering: pixelated;
}

.senior-tools-price-label .kx-me-currency-icon .credits,
.senior-tools-price-label .kx-me-currency-icon .diamonds {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
}

.senior-tools-price-label .kx-me-currency-icon .credits {
    background-image: var(--kx-currency-credits-image);
}

.senior-tools-price-label .kx-me-currency-icon .diamonds {
    background-image: var(--kx-currency-diamonds-image);
}

.admin-rare-price-grid input {
    margin-bottom: 0;
}

.admin-rare-pages {
    margin-bottom: 10px;
}

.admin-rare-grid.itemContainer {
    display: block;
    min-height: 136px;
    max-height: 214px;
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 3px;
    background: rgba(0, 0, 0, .16);
    overflow-y: auto;
    box-sizing: border-box;
}

.admin-rare-grid .itemList {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 38px);
    justify-content: start;
    gap: 5px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

.admin-rare-item {
    float: none;
    left: auto;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    cursor: pointer;
    image-rendering: pixelated;
}

.admin-rare-item.item-selected,
.admin-rare-item.admin-rare-item-selected {
    border-color: rgba(92, 225, 174, .95) !important;
    box-shadow: 0 0 0 1px rgba(92, 225, 174, .45), 0 0 12px rgba(92, 225, 174, .22);
}

.senior-tools-proposal-meta,
.senior-tools-detail-meta {
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    line-height: 1.35;
}

.senior-tools-proposal-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.senior-tools-detail-body + .senior-tools-proposal-meta {
    margin-top: 11px;
}

.senior-tools-proposal-meta.is-economic-impact {
    padding: 8px 10px;
    color: #90efb1;
    background: rgba(46, 204, 113, .1);
}

.senior-tools-proposal-meta.is-economic-impact i {
    color: #90efb1;
    font-size: 13px;
}

.senior-tools-proposal-meta.is-economic-impact strong {
    color: #d9ffe6;
    font-size: 12px;
}

.senior-tools-proposal-meta.is-economic-impact span {
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
    font-weight: 700;
}

.senior-tools-proposal-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.senior-tools-proposal-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.senior-tools-proposal-meta-row i {
    color: rgba(255, 255, 255, .42);
    font-size: 10px;
}

.senior-tools-rare-preview.itemContainer {
    display: inline-block;
    min-height: 44px;
    width: 50px;
    margin: 0 8px 0 0;
    padding: 3px;
    vertical-align: middle;
    overflow: visible;
}

.senior-tools-rare-preview .itemList {
    margin: 0;
    padding: 0;
}

.senior-tools-rare-preview .item {
    width: 43px;
    height: 43px;
    margin: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    image-rendering: pixelated;
}

.senior-tools-rare-proposal-card {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
}

.senior-tools-rare-proposal-preview.itemContainer {
    display: grid;
    place-items: center;
    min-height: 86px;
    max-height: 86px;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .045);
    box-sizing: border-box;
    overflow: hidden;
    background:
        radial-gradient(circle at 45% 45%, rgba(255, 255, 255, .06), transparent 52%),
        rgba(0, 0, 0, .24);
}

.senior-tools-rare-proposal-preview .itemList {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.senior-tools-rare-proposal-preview .item {
    float: none;
    display: block;
    position: static;
    flex: 0 0 43px;
    margin: 0;
    background-position: center !important;
}

.senior-tools-rare-proposal-numbers {
    min-height: 66px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, .045);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 45%),
        rgba(0, 0, 0, .26);
    box-sizing: border-box;
    min-width: 0;
}

.senior-tools-rare-proposal-numbers span,
.senior-tools-rare-proposal-numbers small {
    display: block;
    color: #999;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.senior-tools-rare-proposal-numbers strong {
    display: block;
    margin: 5px 0 4px;
    color: #fff;
    font-size: 17px;
    line-height: 1.1;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.senior-tools-rare-proposal-numbers.is-primary strong {
    color: #ffc85a;
    font-size: 21px;
}

.senior-tools-rare-proposal-numbers small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.senior-tools-rare-proposal-numbers .senior-tools-rare-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
}

.senior-tools-rare-proposal-numbers .senior-tools-rare-price-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: none;
}

.senior-tools-rare-proposal-card.is-skeleton .senior-tools-rare-proposal-numbers {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.senior-tools-rare-proposal-card.is-skeleton .senior-tools-rare-proposal-numbers strong {
    margin: 7px 0;
}

.kx-skeleton-line.is-rare-label {
    width: 46%;
    height: 9px;
}

.kx-skeleton-line.is-rare-name {
    width: 82%;
    height: 18px;
}

.kx-skeleton-line.is-rare-price {
    width: 72%;
    height: 17px;
}

.kx-skeleton-line.is-rare-small {
    width: 58%;
    height: 8px;
}

.senior-tools-rare-price-item img,
.senior-tools-rare-price-item .kx-managed-currency-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    object-fit: contain;
    image-rendering: auto;
}

.senior-tools-parameter-change-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr);
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.senior-tools-parameter-change-icon,
.senior-tools-parameter-change-main,
.senior-tools-parameter-change-values {
    min-height: 62px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, .045);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 45%),
        rgba(0, 0, 0, .26);
    box-sizing: border-box;
    min-width: 0;
}

.senior-tools-parameter-change-icon {
    display: grid;
    place-items: center;
    padding: 0;
    color: #9bd2ff;
    font-size: 18px;
}

.senior-tools-parameter-change-main span,
.senior-tools-parameter-change-values span,
.senior-tools-parameter-change-main small {
    display: block;
    color: #999;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.senior-tools-parameter-change-main strong,
.senior-tools-parameter-change-values strong {
    display: block;
    margin: 5px 0 3px;
    color: #fff;
    font-size: 16px;
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.senior-tools-parameter-change-values.is-new strong {
    color: #ffc85a;
    font-size: 18px;
}

.senior-tools-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 3px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.senior-tools-status.is-debate {
    background: #24598a;
}

.senior-tools-status.is-approved {
    background: #23883e;
}

.senior-tools-status.is-rejected {
    background: #9a2f2b;
}

.senior-tools-status.is-closed {
    background: #555;
}

.senior-tools-status.is-vetoed,
.senior-tools-status.is-vetada {
    background: #6d3b8d;
}

.senior-tools-status.is-active {
    background: #2f7650;
}

.senior-tools-detail-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #66e6b8;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

.senior-tools-detail-category i {
    color: rgba(102, 230, 184, .9);
    font-size: 12px;
}

.senior-tools-detail-category.is-type-motion_censure i { color: #ff7f7f; }
.senior-tools-detail-category.is-type-admin_appointment i { color: #7fe6a5; }
.senior-tools-detail-category.is-type-credit_issue i { color: #90efb1; }
.senior-tools-detail-category.is-type-rare_issue i { color: #7fd8ff; }
.senior-tools-detail-category.is-type-rare_remove i { color: #f0cf7a; }
.senior-tools-detail-category.is-type-admin_policy i { color: #d7c8ff; }
.senior-tools-detail-category.is-type-admin_policy_repeal i { color: #c6c6c6; }

.senior-tools-vote-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.senior-tools-vote-summary span,
.senior-tools-vote-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 3px;
    color: #e9e9e9;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 255, 255, .06);
}

.senior-tools-vote-summary .is-yes,
.senior-tools-vote-legend .is-yes {
    color: #90efb1;
    background: rgba(46, 204, 113, .14);
}

.senior-tools-vote-summary .is-no,
.senior-tools-vote-legend .is-no {
    color: #ffb2ac;
    background: rgba(255, 86, 74, .14);
}

.senior-tools-vote-summary .is-abstain,
.senior-tools-vote-legend .is-abstain {
    color: #ffe0a1;
    background: rgba(255, 200, 95, .14);
}

.senior-tools-vote-legend .is-pending {
    color: rgba(255, 255, 255, .58);
}

.senior-tools-detail-head h2 {
    margin: 0;
    color: #fff;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
}

.senior-tools-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 7px;
}

.senior-tools-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, .5);
    font-size: 10px;
    font-weight: 700;
}

.senior-tools-detail-meta i {
    color: rgba(255, 255, 255, .38);
}

.senior-tools-detail-meta .is-deadline {
    color: rgba(255, 255, 255, .82);
}

.senior-tools-detail-meta .is-deadline i {
    color: #f0cf7a;
}

.senior-tools-detail-body {
    margin-top: 14px;
    padding: 8px 0 6px;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: #d5d5d5;
    font-size: 12px;
    line-height: 1.5;
    background: transparent;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.senior-tools-detail-body p {
    margin: 0 0 7px;
}

.senior-tools-detail-body p:last-child {
    margin-bottom: 0;
}

.senior-tools-detail-head h2,
.senior-tools-detail-meta {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.senior-tools-vote-result {
    margin-top: 14px;
}

.senior-tools-vote-result-title {
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.senior-tools-vote-summary.is-detail {
    margin-top: 0;
    gap: 8px;
}

.senior-tools-vote-summary.is-detail span {
    padding: 6px 9px;
}

.senior-tools-vote-parliament {
    height: 338px;
    min-height: 338px;
    margin: 0;
}

.senior-tools-vote-box .senior-tools-body {
    padding-top: 0;
}

.senior-tools-author-footer {
    position: relative;
    height: 60px;
}

.senior-tools-author-footer.footerBottomBox .headAvatar {
    position: relative;
    display: block;
    width: 54px;
    height: 62px;
    margin-left: 8px;
    background-position: center;
    background-repeat: no-repeat;
}

.senior-tools-author-footer.footerBottomBox span {
    left: 68px;
}

.senior-tools-author-footer.footerBottomBox .newsAuthor {
    left: 68px;
}

.senior-tools-author-footer .senior-tools-proposal-views {
    position: absolute;
    right: 15px;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.senior-tools-author-footer .senior-tools-proposal-views i {
    color: rgba(157, 210, 255, .78);
    font-size: 13px;
}

.senior-tools-author-footer.footerBottomBox .senior-tools-proposal-views span {
    position: static;
    left: auto;
    top: auto;
    display: inline;
    color: inherit;
    font-size: inherit;
}

.senior-tools-vote-parliament .senado-seat {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
}

.senior-tools-vote-parliament .senado-seat.is-selected-org {
    box-shadow: none;
}

.senior-tools-vote-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.senior-tools-vote-form {
    display: grid;
    gap: 8px;
}

.senior-tools-vote-controls {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.senior-tools-vote-controls .senior-tools-vote-form {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.senior-tools-vote-access-message {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.5;
}

.senior-tools-proposal-consequences {
    line-height: 1.5;
}

.senior-tools-proposal-consequences p {
    margin: 0 0 12px;
}

.senior-tools-proposal-consequences dl {
    margin: 0 0 14px;
}

.senior-tools-proposal-consequences dt {
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
}

.senior-tools-proposal-consequences dd {
    margin: 2px 0 10px;
    overflow-wrap: anywhere;
}

.senior-tools-consequence-reference {
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

.senior-tools-vote-form button {
    width: 100%;
    min-height: 36px;
    justify-content: center;
    padding: 0 12px;
    text-align: center;
    border-color: rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.senior-tools-vote-form button[value="affirmative"].is-selected,
.senior-tools-vote-form button[value="affirmative"]:hover {
    border-color: rgba(46, 204, 113, .55);
    background: linear-gradient(180deg, rgba(46, 204, 113, .34), rgba(26, 132, 70, .34));
    box-shadow: 0 0 0 1px rgba(46, 204, 113, .22);
}

.senior-tools-vote-form button[value="negative"].is-selected,
.senior-tools-vote-form button[value="negative"]:hover {
    border-color: rgba(255, 86, 74, .55);
    background: linear-gradient(180deg, rgba(255, 86, 74, .34), rgba(145, 42, 38, .34));
    box-shadow: 0 0 0 1px rgba(255, 86, 74, .22);
}

.senior-tools-vote-form button[value="abstention"].is-selected,
.senior-tools-vote-form button[value="abstention"]:hover {
    border-color: rgba(255, 200, 95, .55);
    background: linear-gradient(180deg, rgba(255, 200, 95, .28), rgba(150, 104, 34, .32));
    box-shadow: 0 0 0 1px rgba(255, 200, 95, .2);
}

.senior-tools-policies-list {
    max-height: none;
}

/* Three loading rows suggest continuation; real policies keep their full height. */
.senate-policies-page .senior-tools-policies-list:has(> .senior-tools-policy-skeleton) {
    max-height: 400px;
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 78px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 78px), transparent 100%);
}

.senior-tools-policy-message {
    margin: 12px 12px 0;
}

.senior-tools-count-skeleton {
    display: inline-block;
    width: 10px;
    height: 7px;
    border-radius: 2px;
    vertical-align: middle;
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .11), rgba(255, 255, 255, .055));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
}

.senior-tools-policy-row {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .012);
}

.senior-tools-policy-row.is-derogated {
    opacity: .5;
}

.senior-tools-policy-link {
    border-bottom: 0;
}

.senior-tools-proposal-head .senior-tools-policy-title {
    color: #f5f5f5;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
    text-transform: uppercase;
}

.senior-tools-policy-link .senior-tools-proposal-type i {
    margin-right: 5px;
    color: #d3bd79;
}

.senior-tools-policy-link .senior-tools-proposal-type.is-approved {
    margin-top: 9px;
    color: #90efb1;
}

.senior-tools-policy-code {
    color: #90efb1;
    font-weight: 700;
}

.senior-tools-policy-skeleton .senior-tools-policy-link {
    cursor: default;
}

.senior-tools-policy-skeleton .senior-tools-policy-title {
    display: block;
    width: min(620px, 64%);
}

.senior-tools-policy-skeleton .kx-skeleton-line {
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .11), rgba(255, 255, 255, .055));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
}

.senior-tools-policy-skeleton .is-policy-title {
    width: 100%;
    height: 17px;
}

.senior-tools-status.is-skeleton-status {
    width: 54px;
    height: 19px;
    padding: 0;
    background: rgba(47, 118, 80, .62);
    overflow: hidden;
}

.senior-tools-status.is-skeleton-status .is-policy-status {
    width: 34px;
    height: 7px;
    margin: auto;
    opacity: .55;
}

.senior-tools-policy-type-skeleton {
    width: fit-content;
}

.senior-tools-policy-type-skeleton .is-policy-type {
    width: 118px;
    height: 8px;
}

.senior-tools-policy-skeleton .is-policy-summary {
    width: min(520px, 45%);
    height: 10px;
}

.senior-tools-policy-skeleton .is-policy-meta {
    width: min(460px, 48%);
    height: 8px;
}

.senior-tools-vote-summary-skeleton > span {
    min-width: 42px;
    min-height: 21px;
    padding: 0 7px;
}

.senior-tools-vote-summary-skeleton > span > .kx-skeleton-line {
    box-sizing: border-box;
    display: block;
    min-height: 0;
    min-width: 0;
    padding: 0;
}

.senior-tools-vote-summary-skeleton .is-policy-vote {
    width: 46px;
    height: 7px;
    opacity: .58;
}

.senior-tools-proposal-skeleton {
    min-height: 164px;
    box-sizing: border-box;
}

.senior-tools-proposal-skeleton .kx-skeleton-line {
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .11), rgba(255, 255, 255, .055));
    background-size: 220% 100%;
    animation: kxSkeletonSweep 1.15s ease-in-out infinite;
}

.senior-tools-proposal-skeleton .senior-tools-status.is-skeleton-status {
    background: rgba(255, 255, 255, .08);
    width: 96px;
}

.senior-tools-proposal-skeleton .senior-tools-vote-summary-skeleton span {
    background: rgba(255, 255, 255, .08);
}

.senior-tools-proposal-skeleton .senior-tools-vote-summary-skeleton span.is-yes {
    background: rgba(46, 204, 113, .24);
}

.senior-tools-proposal-skeleton .senior-tools-vote-summary-skeleton span.is-no {
    background: rgba(231, 76, 60, .22);
}

.senior-tools-proposal-skeleton .senior-tools-vote-summary-skeleton span.is-abstain {
    background: rgba(255, 195, 85, .22);
}

.senior-tools-proposal-skeleton .senior-tools-proposal-title {
    width: calc(100% - 106px);
}

.senior-tools-proposal-skeleton .is-proposal-title {
    width: 100%;
    height: 14px;
}

.senior-tools-proposal-skeleton .is-proposal-title.is-continuation {
    display: block;
    width: 58%;
    margin-top: 4px;
}

.senior-tools-proposal-skeleton .is-proposal-status {
    width: 72px;
    height: 7px;
    margin: auto;
    opacity: .55;
}

.senior-tools-proposal-type-skeleton {
    width: fit-content;
}

.senior-tools-proposal-type-skeleton .is-proposal-type {
    width: 136px;
    height: 8px;
}

.senior-tools-proposal-skeleton .is-proposal-desc {
    width: min(540px, 70%);
    height: 10px;
}

.senior-tools-proposal-meta-skeleton span {
    min-width: 0;
}

.senior-tools-proposal-meta-skeleton .is-proposal-meta {
    width: 108px;
    height: 8px;
    opacity: .62;
}

.senior-tools-proposal-meta-skeleton .is-proposal-meta.is-user {
    width: 56px;
}

.senior-tools-vote-summary-skeleton > span > .is-proposal-vote {
    width: 34px;
    height: 7px;
    opacity: .58;
}

.senior-tools-derogation-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px 11px;
    border-top: 1px solid rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
    background: rgba(0, 0, 0, .16);
}

.senior-tools-derogation-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 160px;
    font-weight: 700;
}

.senior-tools-derogation-progress i {
    color: #d3bd79;
}

.senior-tools-derogation-progress strong {
    color: #f1f1f1;
    font-size: 12px;
}

.senior-tools-derogation-voters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    color: rgba(255, 255, 255, .55);
    overflow: hidden;
}

.senior-tools-derogation-voters span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.senior-tools-derogation-voters i {
    color: rgba(255, 255, 255, .42);
}

.senior-tools-derogation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(255, 120, 110, .34);
    border-radius: 3px;
    color: #ffd7d2;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(120, 36, 33, .28);
}

.senior-tools-derogation-button:hover:not(:disabled) {
    border-color: rgba(255, 120, 110, .55);
    background: rgba(145, 42, 38, .38);
}

.senior-tools-derogation-button:disabled {
    border-color: rgba(120, 190, 145, .28);
    color: #bde7c7;
    cursor: default;
    background: rgba(38, 120, 70, .18);
}

.senior-tools-vote-parliament .senado-seat-vote-yes {
    border-color: #2ecc71 !important;
    background: rgba(46, 204, 113, .28);
    box-shadow: 0 0 0 2px rgba(46, 204, 113, .34), 0 0 16px rgba(46, 204, 113, .24);
}

.senior-tools-vote-parliament .senado-seat-vote-no {
    border-color: #ff6258 !important;
    background: rgba(255, 98, 88, .28);
    box-shadow: 0 0 0 2px rgba(255, 98, 88, .34), 0 0 16px rgba(255, 98, 88, .24);
}

.senior-tools-vote-parliament .senado-seat-vote-abstain {
    border-color: #ffcf73 !important;
    background: rgba(255, 207, 115, .26);
    box-shadow: 0 0 0 2px rgba(255, 207, 115, .34), 0 0 16px rgba(255, 207, 115, .22);
}

.senior-tools-vote-parliament .senado-seat-vote-pending {
    border-color: rgba(255, 255, 255, .16) !important;
    opacity: .58;
    filter: grayscale(.35);
}

/* source: news-hk.css */
.hk-news-page #contentBox {
    overflow: hidden;
}

.hk-news-page .grid_2,
.hk-news-page .grid_16 {
    margin-bottom: 14px;
}

.hk-tools-box .png15,
.hk-box-body {
    background: rgba(0, 0, 0, .14);
}

.hk-tool-item {
    text-decoration: none;
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px;
    padding: 7px 6px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 3px;
    box-sizing: border-box;
    color: #dcdcdc;
    text-align: left;
    cursor: pointer;
    background: rgba(255, 255, 255, .025);
}

.hk-tool-item:last-child {
    margin-bottom: 0;
}

.hk-tool-item i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 3px;
    color: #fff;
    background: var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 24%, transparent));
}

.hk-tool-item strong,
.hk-tool-item small {
    display: block;
}

.hk-tool-item span {
    min-width: 0;
}

.hk-tool-item strong {
    color: #f1f1f1;
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.hk-tool-item small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .52);
    font-size: 9px;
    line-height: 1.25;
    overflow: hidden;
}

.hk-tool-item.is-active {
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-faint, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 14%, transparent));
}

.hk-main-box {
    margin-bottom: 0;
}

.hk-panel-actions {
    float: right;
    display: inline-flex;
    gap: 4px;
    margin-right: 7px;
}

.hk-main-box > .title.small:has(.hk-panel-actions) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hk-main-box > .title.small:has(.hk-panel-actions) .hk-panel-actions {
    float: none;
    margin-left: auto;
    margin-right: 0;
}

.hk-tab-button,
.hk-filter-button {
    min-height: 22px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 3px;
    color: #dcdcdc;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(0, 0, 0, .26);
}

.hk-tab-button:hover,
.hk-tab-button.is-active,
.hk-filter-button:hover,
.hk-filter-button.is-active {
    color: #fff;
    border-color: var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    background: var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 24%, transparent));
}

.hk-tool-panel,
.hk-panel {
    display: none;
}

.hk-tool-panel.is-active,
.hk-panel.is-active {
    display: block;
}

.hk-section-head {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.hk-section-head b {
    display: block;
    color: #fff;
    font: 700 18px/1 'Roboto Condensed', sans-serif;
}

.hk-section-head span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
    line-height: 1.4;
}

.hk-tight-head {
    margin-bottom: 10px;
    padding-bottom: 8px;
}

.hk-tight-head b {
    font-size: 16px;
}

.hk-primary-action {
    width: 100%;
}

.hk-news-list {
    max-height: 520px;
}

.hk-news-item {
    cursor: default;
}

.hk-news-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.hk-news-actions .senior-tools-button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
}

.hk-news-delete-btn {
    border-color: rgba(255, 86, 74, .32) !important;
    color: #ffb2ac !important;
}

.hk-news-editor {
    min-height: 260px;
}

.hk-editor-toolbar {
    flex-wrap: wrap;
}

.hk-inactive-filter {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.hk-inactive-list {
    max-height: 560px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, .12);
}

.hk-inactive-list::-webkit-scrollbar {
    width: 7px;
}

.hk-inactive-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .18);
}

.hk-inactive-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 5px;
}

.hk-inactive-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 82px 104px;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .015);
}

.hk-inactive-avatar {
    width: 46px;
    height: 54px;
    background-repeat: no-repeat;
    background-position: center center;
}

.hk-inactive-info {
    min-width: 0;
}

.hk-inactive-info strong,
.hk-inactive-info span,
.hk-inactive-info small {
    display: block;
}

.hk-inactive-info strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.25;
}

.hk-inactive-info span {
    margin-top: 3px;
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
}

.hk-inactive-info small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .46);
    font-size: 10px;
    line-height: 1.25;
}

.hk-inactive-state {
    padding: 5px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.hk-inactive-state small {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 700;
    opacity: .8;
}

.hk-inactive-state.is-leve {
    color: #ffe0a1;
    background: rgba(255, 200, 95, .14);
}

.hk-inactive-state.is-grave {
    color: #ffb2ac;
    background: rgba(255, 86, 74, .16);
}

.hk-referral-row {
    grid-template-columns: 52px minmax(0, 1fr) 118px 230px;
}

.hk-referral-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.hk-referral-actions .hk-demote-button {
    min-width: 70px;
    padding: 0 8px;
}

.hk-referral-mail-button {
    border-color: rgba(85, 190, 255, .32);
    color: #bfe9ff;
    background: rgba(35, 90, 125, .25);
}

.hk-referral-mail-button:hover {
    background: rgba(45, 115, 160, .36);
}

.hk-referral-approve-button {
    border-color: rgba(62, 214, 160, .34);
    color: #aaf4d5;
    background: rgba(31, 116, 82, .28);
}

.hk-referral-approve-button:hover {
    background: rgba(44, 150, 106, .36);
}

.hk-inactive-state.is-referral-pending {
    color: #d8d8d8;
    background: rgba(255, 255, 255, .08);
}

.hk-inactive-state.is-referral-mail_sent {
    color: #bfe9ff;
    background: rgba(85, 190, 255, .13);
}

.hk-inactive-state.is-referral-mail_verified,
.hk-inactive-state.is-referral-email_verified {
    color: #aaf4d5;
    background: rgba(62, 214, 160, .14);
}

.hk-inactive-state.is-referral-approved {
    color: #ffe0a1;
    background: rgba(255, 200, 95, .14);
}

.hk-inactive-state.is-referral-rejected,
.hk-inactive-state.is-referral-risk {
    color: #ffb2ac;
    background: rgba(255, 86, 74, .16);
}

.hk-demote-button {
    min-height: 30px;
    border: 1px solid rgba(255, 86, 74, .32);
    border-radius: 3px;
    color: #ffb2ac;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(120, 35, 35, .28);
}

.hk-demote-button:hover {
    background: rgba(160, 45, 45, .36);
}

.hk-demote-button.is-disabled,
.hk-demote-button:disabled {
    cursor: default;
    opacity: .5;
    color: rgba(255, 255, 255, .54);
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .035);
}

.hk-inline-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hk-copy-week-form {
    margin-top: 8px;
}

.hk-copy-week-button {
    width: 100%;
    min-height: 31px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 3px;
    color: #e7e7e7;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(255, 255, 255, .04);
}

.hk-copy-week-button:hover {
    background: rgba(255, 255, 255, .09);
}

.hk-schedule-toolbar {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.hk-planilla-caption {
    color: rgba(255, 255, 255, .64);
    font-size: 11px;
}

.hk-week-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hk-week-nav-btn {
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 3px;
    color: #d9d9d9;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    background: rgba(0, 0, 0, .24);
}

.hk-week-nav-btn:hover {
    background: rgba(255, 255, 255, .08);
}

.hk-week-nav-label {
    color: #f3f3f3;
    font-size: 11px;
    font-weight: 700;
}

.hk-planilla-filters {
    display: grid;
    gap: 8px;
}

.hk-rank-filter {
    width: 240px;
    max-width: 100%;
    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 3px;
    color: #f1f1f1;
    font-size: 11px;
    background: rgba(0, 0, 0, .24);
}

.hk-rank-filter option {
    color: #f1f1f1;
    background: #10151d;
}

.hk-schedule-sheet-wrap {
    max-height: 560px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .18);
}

.hk-schedule-sheet {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 0;
}

.hk-schedule-sheet th,
.hk-schedule-sheet td {
    border: 1px solid rgba(255, 255, 255, .06);
    vertical-align: top;
}

.hk-schedule-sheet th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 2px;
    color: #f2f2f2;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    background: rgba(12, 17, 23, .95);
}

.hk-schedule-hour {
    width: 42px;
    padding: 7px 2px;
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    background: rgba(0, 0, 0, .22);
}

.hk-schedule-sheet th:first-child {
    width: 42px;
}

.hk-schedule-cell {
    position: relative;
    min-height: 62px;
    padding: 4px 3px 16px;
    background: rgba(255, 255, 255, .01);
}

.hk-schedule-entry {
    margin-bottom: 3px;
    padding: 4px 4px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 3px;
    background: rgba(255, 255, 255, .05);
    cursor: default;
}

.hk-schedule-entry strong,
.hk-schedule-entry small {
    display: block;
    line-height: 1.25;
}

.hk-schedule-entry strong {
    color: #f3f3f3;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.hk-schedule-entry small {
    margin-top: 1px;
    color: rgba(255, 255, 255, .66);
    font-size: 8px;
    overflow-wrap: anywhere;
}

.hk-schedule-entry.is-mine {
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}

.hk-schedule-entry.is-disponible {
    border-color: rgba(46, 204, 113, .35);
    background: rgba(46, 204, 113, .13);
}

.hk-schedule-entry.is-eventos {
    border-color: rgba(74, 160, 255, .35);
    background: rgba(74, 160, 255, .14);
}

.hk-schedule-entry.is-moderacion {
    border-color: rgba(255, 200, 95, .35);
    background: rgba(255, 200, 95, .14);
}

.hk-schedule-entry.is-builder {
    border-color: rgba(187, 124, 255, .35);
    background: rgba(187, 124, 255, .16);
}

.hk-schedule-entry.is-wired {
    border-color: rgba(86, 233, 239, .35);
    background: rgba(86, 233, 239, .15);
}

.hk-schedule-entry.is-ausente {
    border-color: rgba(255, 86, 74, .35);
    background: rgba(255, 86, 74, .15);
}

.hk-cell-add {
    position: absolute;
    right: 4px;
    bottom: 3px;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 3px;
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    background: rgba(0, 0, 0, .24);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

.hk-schedule-cell:hover .hk-cell-add {
    opacity: 1;
    pointer-events: auto;
}

.hk-cell-add:hover {
    color: #fff;
    border-color: var(--kx-primary-color-glow, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 46%, transparent));
    background: var(--kx-primary-color-soft, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 24%, transparent));
}

.hk-modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 8, 11, .74);
}

.hk-modal-box {
    width: 560px;
    max-width: calc(100% - 30px);
    border: 1px solid rgba(95, 141, 189, .35);
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(180deg, #141d27, #0e141c);
    box-shadow: 0 22px 65px rgba(0, 0, 0, .58);
}

.hk-modal-box .title.small {
    padding-left: 14px;
    line-height: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hk-modal-body {
    padding: 12px 14px !important;
    background: rgba(0, 0, 0, .18);
}

.hk-modal-body label {
    margin-top: 3px;
}

.hk-modal-body textarea {
    min-height: 72px;
    resize: vertical;
}

.hk-modal-actions {
    display: flex;
    gap: 7px;
    margin-top: 6px;
}

.hk-modal-actions .senior-tools-button {
    flex: 1 1 0;
}

.hk-modal-delete {
    border-color: rgba(255, 86, 74, .42) !important;
    color: #ffb2ac !important;
    background: rgba(120, 35, 35, .28) !important;
}

.hk-modal-close {
    border-color: rgba(255, 255, 255, .2) !important;
    color: #dedede !important;
    background: rgba(255, 255, 255, .03) !important;
}

/* source: settings.css */
.settingsAlert {
    background: rgba(0, 0, 0, .6);
    padding: 10px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    margin-bottom: 10px;
}

.settingsAlert .warning {
    color: #f1c40f;
    float: left;
    margin-top: 4px;
}

.settingsAlert p {
    width: 835px;
    position: absolute;
    right: 15px;
    margin-top: 0px;
    font-size: 13px;
}

.settings-page #contentBox {
    overflow: hidden;
}

.settings-page .grid_2,
.settings-page .grid_16 {
    margin-bottom: 14px;
}

.settings-page .png20 {
    background: rgba(0, 0, 0, .14);
}

/* Navegación exclusiva de Ajustes: un rail continuo, no tarjetas reutilizadas. */
#contentBox.sidebar-rail-box .sidebar-rail {
    display: grid;
    gap: 0;
    padding: 0;
}

.sidebar-rail-box .sidebar-rail-item {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    min-height: 43px;
    width: 100%;
    margin: 0;
    padding: 5px 12px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    transition: background .16s ease;
}

.sidebar-rail-box .sidebar-rail-item:last-child {
    border-bottom: 0;
}

.sidebar-rail-box .sidebar-rail-item::before {
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 2px;
    background: transparent;
    box-shadow: none;
    content: '';
    transition: background .16s ease, box-shadow .16s ease;
}

.sidebar-rail-box .sidebar-rail-item:hover {
    background: rgba(255, 255, 255, .035);
}

.sidebar-rail-box .sidebar-rail-item > i {
    width: auto;
    height: auto;
    border-radius: 0;
    color: #fff;
    background: none;
    font-size: 17px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 9px rgba(255, 255, 255, .18);
}

.sidebar-rail-box .sidebar-rail-copy {
    min-width: 0;
}

.sidebar-rail-box .sidebar-rail-copy strong {
    display: block;
    color: #f6f6f6;
    font: 700 13px/1.1 'Roboto Condensed', sans-serif;
}

.sidebar-rail-box .sidebar-rail-copy small {
    display: block;
    margin-top: 1px;
    overflow: visible;
    color: rgba(255, 255, 255, .62);
    font: 400 10px/1.15 'Roboto', sans-serif;
}

.sidebar-rail-box .sidebar-rail-item.is-active,
.sidebar-rail-box .sidebar-rail-item.selected {
    background: linear-gradient(90deg, var(--kx-primary-color-faint, rgba(255, 155, 0, .13)), transparent 88%);
}

.sidebar-rail-box .sidebar-rail-item.is-active::before,
.sidebar-rail-box .sidebar-rail-item.selected::before {
    background: var(--kx-primary-color, #ff9b00);
    box-shadow: 0 0 8px var(--kx-primary-color-glow, rgba(255, 155, 0, .35));
}

.sidebar-rail-box .sidebar-rail-item.is-active .sidebar-rail-copy strong,
.sidebar-rail-box .sidebar-rail-item.selected .sidebar-rail-copy strong {
    color: #fff;
}

/* Herramientas HK: el rango se muestra como referencia visual sólo para administración. */
.hk-tools-sidebar .sidebar-rail-item {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    box-sizing: border-box;
}

.hk-tools-sidebar .hk-tool-rank-tag {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 16px;
    margin-left: 8px;
    padding: 0 4px;
    border: 1px solid var(--kx-primary-color-border, rgba(220, 225, 230, .28));
    border-radius: 2px;
    background: rgba(14, 17, 20, .52);
    color: var(--kx-primary-color-light, rgba(235, 238, 241, .92));
    font: 600 10px 'Roboto Condensed', sans-serif;
    line-height: 1;
    white-space: nowrap;
}

body .settings-page label {
    color: #d6d6d6;
    font-weight: 700;
}

body .settings-page input[type=text],
body .settings-page input[type=password] {
    width: 100%;
    box-sizing: border-box;
    min-height: 36px;
    background: #111619;
    color: #f5f7fa;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 3px;
    padding: 8px 10px;
    outline: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    letter-spacing: .1px;
    -webkit-text-fill-color: #f5f7fa;
}

body .settings-page input[type=text]::placeholder,
body .settings-page input[type=password]::placeholder {
    color: rgba(255, 255, 255, .38);
    font-weight: 500;
}

body .settings-page input[type=text]:focus,
body .settings-page input[type=password]:focus {
    background: #111619;
    color: #f5f7fa;
    border-color: rgba(255, 155, 0, .52);
    box-shadow: 0 0 0 2px rgba(255, 155, 0, .08);
    -webkit-text-fill-color: #f5f7fa;
    caret-color: #f5f7fa;
}

body .settings-page input[type=text]:active,
body .settings-page input[type=password]:active {
    background: #111619;
    color: #f5f7fa;
    -webkit-text-fill-color: #f5f7fa;
    caret-color: #f5f7fa;
}

body .settings-page input[type=text]:-webkit-autofill,
body .settings-page input[type=password]:-webkit-autofill,
body .settings-page input[type=text]:-webkit-autofill:hover,
body .settings-page input[type=password]:-webkit-autofill:hover,
body .settings-page input[type=text]:-webkit-autofill:focus,
body .settings-page input[type=password]:-webkit-autofill:focus,
body .settings-page input[type=text]:-webkit-autofill:active,
body .settings-page input[type=password]:-webkit-autofill:active {
    border-color: rgba(255, 155, 0, .52);
    -webkit-box-shadow: 0 0 0 1000px #111619 inset, 0 0 0 2px rgba(255, 155, 0, .08);
    box-shadow: 0 0 0 1000px #111619 inset, 0 0 0 2px rgba(255, 155, 0, .08);
    -webkit-text-fill-color: #f5f7fa;
    caret-color: #f5f7fa;
    transition: background-color 9999s ease-out, color 9999s ease-out;
}

.settings-page .buttonSet {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.settings-page .buttonSet input[type=radio] {
    margin: 0 4px 0 0;
}

.settings-page .buttonSet label {
    margin-right: 10px;
    font-weight: 500;
}

body .settings-page #contentBox .footerBottomBox {
    width: auto;
    height: auto;
    box-sizing: border-box;
    min-height: 48px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 18px 12px;
    border-top: 1px dashed rgba(255, 255, 255, .05);
}

#navigationTab {
    background: rgba(0, 0, 0, .4);
    padding: 15px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    transition: background .3s;
    cursor: pointer;
    margin-bottom: 5px;
    height: 30px;
    position: relative;
}

#navigationTab:hover {
    background: rgba(0, 0, 0, .6);
}

#navigationTab.selected {
    background: rgba(0, 0, 0, .6);
    pointer-events: none;
}

#navigationTab .icon {
    float: left;
}

#navigationTab h3 {
    position: absolute;
    left: 60px;
    top: -6px;
    font: 400 16px 'Roboto Condensed', sans-serif;
}

#navigationTab b {
    position: absolute;
    left: 60px;
    top: 33px;
    font: 400 12px 'Roboto', sans-serif;
    color: rgba(255, 255, 255, .5);
}

.settings-page .desc {
    margin-top: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 7px;
}

.settings-page .buttonSet {
    margin-right: 7px;
}

.settings-page .ui-button {
    width:100px;
    font-weight:300;
    font-family: Roboto;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid rgba(0,0,0,0.2);
}

.settings-page .ui-state-active {
    font-weight:bold !important;
    font-size: 14px;
    font-family: Roboto;
}

body .settings-page .settings-save-button {
    min-width: 142px;
    min-height: 32px;
    height: 32px;
    padding: 0 16px;
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .88);
    font: 700 11px 'Roboto Condensed', sans-serif;
    letter-spacing: .9px;
    box-shadow: none;
}

body .settings-page .settings-save-button i {
    margin-right: 6px;
}

body .settings-page .settings-save-button:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

body .settings-page .settings-save-button:disabled,
body .settings-page .settings-save-button.disabled,
body .settings-page .settings-save-button.is-disabled {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .62);
    box-shadow: none;
}

.kx-session-list {
    display: grid;
    gap: 10px;
}

.kx-session-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .12);
}

.kx-session-meta {
    display: grid;
    gap: 3px;
}

.kx-session-meta small {
    color: rgba(255, 255, 255, .52);
}

.kx-session-current {
    display: inline-block;
    width: fit-content;
    padding: 2px 6px;
    color: #d8f6dd;
    background: rgba(74, 162, 89, .25);
    font-size: 11px;
}

/* source: support-assistant.css */
/* Persistent, frontend-only support preview. */
#header-menu .header-menu li .kx-support-nav-button {
    border: 0;
    padding: 0 20px;
    background: transparent;
    color: #fff;
    font: inherit;
    line-height: 17px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease;
}

#header-menu .header-menu li .kx-support-nav-button:hover,
#header-menu .header-menu li .kx-support-nav-button:focus-visible {
    color: var(--kx-primary-color, #ff9b00);
}

.kx-support-assistant,
.kx-shop-cart {
    --kx-support-edge: rgba(255, 255, 255, .09);
    --kx-support-surface: #191a1c;
    --kx-support-raised: #222326;
}

.kx-support-assistant {
    position: fixed;
    right: 20px;
    bottom: 18px;
    z-index: 2147482500;
    font-family: 'Roboto', sans-serif;
}

body.kx-hotel-visible .kx-support-assistant {
    display: none;
}

.kx-support-launcher {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--kx-support-edge);
    border-radius: 50%;
    background: #111214;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .4);
    color: #fff;
    font-size: 21px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.kx-support-launcher:hover,
.kx-support-launcher:focus-visible {
    border-color: var(--kx-primary-color-border, #a9772e);
    background: var(--kx-support-raised);
    transform: translateY(-2px);
    outline: none;
}
body[data-kx-session-state="guest"] .kx-support-assistant .kx-support-launcher,
.kx-support-assistant.is-open .kx-support-launcher,
body[data-kx-session-state="guest"] [data-kx-support-auth-only],
body:not([data-kx-session-state="guest"]) .kx-support-guest-prompt { display: none; }

.kx-support-panel {
    display: flex;
    flex-direction: column;
    position: relative;
    width: min(402px, calc(100vw - 24px));
    height: min(780px, calc(100dvh - 28px));
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--kx-support-edge);
    border-radius: 10px;
    background: var(--kx-support-surface);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), 0 2px 7px rgba(0, 0, 0, .28);
    color: #eee;
    transform-origin: right bottom;
}
.kx-support-panel[hidden] { display: none; }
.kx-support-assistant.is-open .kx-support-panel {
    animation: kx-support-open .24s cubic-bezier(.2, .75, .25, 1) both;
}
@keyframes kx-support-open {
    from { opacity: 0; transform: translateY(12px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.kx-support-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--kx-primary-color, #ff9b00) 48%, transparent);
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--kx-primary-color, #ff9b00) 18%, transparent);
    -webkit-mask-image: radial-gradient(ellipse at top left, #000, transparent 68%),
        radial-gradient(ellipse at bottom right, #000, transparent 68%);
    mask-image: radial-gradient(ellipse at top left, #000, transparent 68%),
        radial-gradient(ellipse at bottom right, #000, transparent 68%);
    -webkit-mask-position: top left, bottom right;
    mask-position: top left, bottom right;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
}
.kx-support-assistant.is-open.is-first-open .kx-support-panel::after {
    animation: kx-support-first-open-glint .6s ease-out .1s 1;
}
@keyframes kx-support-first-open-glint {
    0% { opacity: 0; -webkit-mask-size: 55% 55%; mask-size: 55% 55%; }
    25% { opacity: .7; }
    100% { opacity: 0; -webkit-mask-size: 110% 110%; mask-size: 110% 110%; }
}

.kx-support-guest-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--kx-support-edge);
    color: #b6b6b8;
    font-size: 11px;
    line-height: 1.35;
}
.kx-support-guest-prompt a {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    color: #f3f4f4;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}
.kx-support-guest-prompt a:hover,
.kx-support-guest-prompt a:focus-visible { border-color: var(--kx-primary-color, #ff9b00); outline: none; }

.kx-support-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    background: #121416;
}
.kx-support-panel-brand {
    color: #fff;
    font: 400 18px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}
.kx-support-panel-brand span { color: #bfc0c2; }
.kx-support-panel-header .kx-support-panel-close {
    flex: 0 0 24px;
    margin: 0;
}

.kx-support-panel-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 16px 24px 20px;
    overflow-y: auto;
}
.kx-support-welcome { text-align: center; }
.kx-support-welcome-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 20px;
    border: 1px solid var(--kx-support-edge);
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
}
.kx-support-welcome h2 {
    max-width: 280px;
    margin: 0 auto;
    color: #fff;
    font: 500 25px/1.18 'Roboto', sans-serif;
}
.kx-support-welcome p {
    max-width: 270px;
    margin: 12px auto 0;
    color: #aeafb2;
    font-size: 12px;
    line-height: 1.5;
}
.kx-support-suggestions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 30px;
}
.kx-support-suggestions a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 37px;
    padding: 7px 10px;
    box-sizing: border-box;
    border: 1px solid var(--kx-support-edge);
    border-radius: 9px;
    color: #d6d6d8;
    font-size: 11px;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}
.kx-support-suggestions a:hover,
.kx-support-suggestions a:focus-visible {
    border-color: var(--kx-primary-color-border, rgba(255, 155, 0, .42));
    background: var(--kx-primary-color-faint, rgba(255, 155, 0, .12));
    color: #fff;
    outline: none;
}
.kx-support-suggestion-label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.kx-support-suggestion-label .fa { flex: 0 0 13px; width: 13px; color: #aaa; font-size: 12px; text-align: center; }
.kx-support-suggestions a > .fa { flex: 0 0 auto; color: #999; font-size: 10px; transform: rotate(45deg); }
.kx-support-suggestions a:hover .kx-support-suggestion-label .fa,
.kx-support-suggestions a:focus-visible .kx-support-suggestion-label .fa { color: var(--kx-primary-color, #ff9b00); }

.kx-support-panel-footer { padding: 0 12px 13px; }
.kx-support-panel-compose {
    position: relative;
    height: 88px;
    border: 1px solid var(--kx-support-edge);
    border-radius: 22px;
    background: var(--kx-support-raised);
    box-shadow: none;
}
.kx-support-panel-compose input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 15px;
    border: 0;
    background: transparent;
    color: #c3c3c5;
    font: 12px 'Roboto', sans-serif;
}
.kx-support-panel-compose input::placeholder { color: #aaa; opacity: 1; }
.kx-support-panel-compose button {
    position: absolute;
    right: 10px;
    bottom: 9px;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #37383b;
    color: #b7b7ba;
    font-size: 13px;
}
.kx-support-panel-footer p {
    margin: 8px 4px 0;
    color: #999;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
}
.kx-support-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 480px) {
    .kx-support-assistant { right: 12px; bottom: 12px; }
    .kx-support-panel { height: calc(100dvh - 24px); }
    .kx-support-panel-body { padding-inline: 18px; }
}

@media (max-height: 540px) {
    .kx-support-panel-body { justify-content: flex-start; }
    .kx-support-welcome-icon { display: none; }
    .kx-support-suggestions { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .kx-support-assistant.is-open .kx-support-panel,
    .kx-support-assistant.is-open.is-first-open .kx-support-panel::after { animation: none; }
    .kx-support-launcher,
    .kx-support-suggestions a { transition: none; }
}

/* source: trades.css */
.trades-page-box {
    overflow: hidden;
}

.trade-list {
    padding: 15px;
}

.trade-card {
    background: rgba(0, 0, 0, .18);
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    padding: 0 0 15px;
    margin-bottom: 15px;
}

.trade-card:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.trade-card-head {
    background: rgba(0, 0, 0, .18);
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    padding: 10px 15px;
    margin-bottom: 15px;
}

.trade-card-title {
    color: #fff;
    font: 400 18px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.trade-card-date {
    color: rgba(255, 255, 255, .52);
    font: 300 12px 'Roboto', sans-serif;
    margin-top: 3px;
}

.trade-arrow {
    color: rgba(255, 255, 255, .65);
    display: inline-block;
    margin: 0 8px;
}

.tradeo-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    padding: 0 15px;
}

.trade-user-panel {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 12px;
    min-height: 158px;
    padding: 10px;
    background: rgba(0, 0, 0, .16);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.trade-user-panel.is-profile-user {
    border-color: rgba(0, 255, 255, .18);
    box-shadow: 0 0 3px rgba(0, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.trade-user-avatar {
    grid-row: 1 / 4;
    width: 92px;
    height: 140px;
    display: block;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, .04);
    border-radius: 2px;
}

.trade-user-name {
    color: #fff;
    font: 400 16px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}

.trade-user-name:hover {
    color: #fff;
    text-decoration: underline;
}

.trade-user-count {
    color: rgba(255, 255, 255, .52);
    font: 300 12px 'Roboto', sans-serif;
    margin-top: 2px;
}

.trade-items-list {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 3px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.trade-item {
    width: 43px;
    height: 43px;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10%;
    position: relative;
    transition: box-shadow .2s ease;
}

.trade-item-missing {
    background: rgba(255, 255, 255, .035);
}

.trade-item-missing::before {
    content: "?";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .35);
    font: 700 16px 'Roboto Condensed', sans-serif;
}

.trade-item:hover {
    box-shadow: 0 0 3px rgba(0, 255, 255, 1), 0 0 3px rgba(0, 255, 255, 1);
}

.trade-item .item-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    background: rgba(0, 0, 0, .5);
    border-radius: 2px;
    padding: 1px 3px;
}

.trade-items-empty {
    color: rgba(255, 255, 255, .48);
    font: 300 12px 'Roboto', sans-serif;
    margin-top: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, .12);
    border: 1px dashed rgba(255, 255, 255, .06);
    text-align: center;
}

.tradeo-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tradeo-image i {
    color: rgba(255, 255, 255, .72);
    font-size: 22px;
    text-shadow: 0 0 3px rgba(0, 255, 255, .35);
}

.trades-page-box.is-trades-loading {
    opacity: .78;
    pointer-events: none;
}

.trade-card-skeleton .trade-skeleton-line,
.trade-card-skeleton .trade-skeleton-avatar,
.trade-card-skeleton .trade-item {
    background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .095), rgba(255, 255, 255, .045));
    background-size: 220% 100%;
    animation: tradeSkeletonPulse 1.35s ease-in-out infinite;
}

.trade-card-skeleton .trade-skeleton-line {
    border-radius: 2px;
    display: inline-block;
    height: 10px;
}

.trade-card-skeleton .trade-skeleton-line.is-title {
    height: 17px;
    width: 185px;
}

.trade-card-skeleton .trade-skeleton-line.is-date {
    width: 102px;
}

.trade-card-skeleton .trade-skeleton-line.is-name {
    height: 15px;
    margin-top: 3px;
    width: 82px;
}

.trade-card-skeleton .trade-skeleton-line.is-count {
    margin-top: 4px;
    width: 96px;
}

.trade-card-skeleton .trade-skeleton-avatar {
    grid-row: 1 / 4;
    width: 92px;
    height: 140px;
    border-radius: 2px;
}

.trade-card-skeleton .trade-item {
    border-color: rgba(255, 255, 255, .06);
}

.kx-page-stepper {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 0 15px 15px;
}

.kx-page-stepper__btn {
    align-items: center;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .78);
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    height: 32px;
    justify-content: center;
    min-width: 104px;
    padding: 0 12px;
    text-transform: uppercase;
    font: 700 11px 'Roboto Condensed', sans-serif;
}

.kx-page-stepper__btn:hover:not(:disabled) {
    border-color: rgba(255, 159, 28, .52);
    color: #fff;
}

.kx-page-stepper__btn:disabled {
    cursor: default;
    opacity: .45;
}

.kx-page-stepper__info {
    color: rgba(255, 255, 255, .62);
    font: 700 12px 'Roboto', sans-serif;
    min-width: 54px;
    text-align: center;
}

@keyframes tradeSkeletonPulse {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -120% 0;
    }
}

/* source: me.css */
/* Me */

/* Independent subscription observation; never changes the legacy Senior card. */
.me-subscription-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 96px;
    box-sizing: border-box;
    padding: 15px 20px;
    margin-bottom: 10px;
    background: #141718;
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}

.me-subscription-panel p {
    margin: 6px 0;
}

.me-subscription-panel small {
    color: #8b9398;
}

.me-subscription-panel [hidden] {
    display: none !important;
}

[data-me-subscription][data-state="loading"] [data-me-subscription-status] {
    color: #8b9398;
}

.meContentBox {
    background:
        radial-gradient(ellipse at 45% 50%, rgba(28, 33, 35, .88) 0%, rgba(20, 24, 26, .92) 46%, rgba(12, 15, 17, .98) 100%),
        #15191b;
    height: 150px;
    width: 100%;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
    border-radius: 2px;
    position: relative;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    margin-bottom: 10px;
    overflow: hidden;
}

.meContentBox::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(12,15,17,.18), rgba(12,15,17,.04) 20%, rgba(12,15,17,.02) 50%, rgba(12,15,17,.04) 80%, rgba(12,15,17,.18)),
        linear-gradient(180deg, rgba(12,15,17,.14), rgba(12,15,17,.02) 32%, rgba(12,15,17,.06) 72%, rgba(12,15,17,.2)),
        var(--kx-personal-texture-image) no-repeat center center;
    background-size: 100% 100%, 100% 100%, 100%;
    opacity: .58;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.meContentBox::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 9% 50%, rgba(235, 248, 255, .08) 0%, rgba(235, 248, 255, .035) 12%, rgba(235, 248, 255, 0) 27%),
        linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .04) 22%, rgba(0, 0, 0, .16) 52%, rgba(0, 0, 0, .04) 82%, rgba(0, 0, 0, .12)),
        linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .2));
}

.meContentBox .avatar {
    /* Keep the renderer's native scale and align it with the legacy card frame. */
    background: no-repeat center -15px;
    height: 110px;
    width: 110px;
    position: absolute;
    top: 20px;
    left: 40px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .2);
    z-index: 2;
}

/* Keep the card placeholder in skeleton geometry until its renderer PNG has
 * swapped. This prevents a cold-load frame with the placeholder 15px lower. */
.meContentBox .avatar[data-kx-avatar-pending="1"],
.meContentBox .avatar[data-kx-avatar-loading],
.meContentBox .avatar[data-kx-avatar-failed="1"] {
    background-position: center -30px;
}

.meContentBox .userDetails {
    position: absolute;
    margin-top: 40px;
    margin-left: 180px;
    color: #fff;
    z-index: 2;
}

.meContentBox .checkIn {
    z-index: 2;
}

.meContentBox .userDetails h2 {
    font-weight: 300;
    font-size: 25px;
    line-height: 0;
}

.meContentBox .userDetails .motto {
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 20px;
}

.meContentBox .me-character-currencies {
    width: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    gap: 10px;
    z-index: 2;
}

/* Preserve the original Senior composition while centering it vertically. */
.meContentBox .checkIn {
    top: 50%;
    transform: translateY(-50%);
}

.meContentBox .me-character-currency {
    background: rgba(0, 0, 0, .2);
    width: 100%;
    height: 30px;
    text-align: center;
    border-radius: 2px;
    position: relative;
    line-height: 30px;
}

.meContentBox .me-character-currency__icon {
    background: rgba(0, 0, 0, .2);
    height: 30px;
    width: 30px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    position: absolute;
    left: 0;
    top: 0;
}

.meContentBox .me-character-currency__icon .credits,
.meContentBox .me-character-currency__icon .duckets,
.meContentBox .me-character-currency__icon .diamonds {
    height: 15px;
    width: 15px;
    position: absolute;
    left: 8px;
    top: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.meContentBox .me-character-currency__icon .credits {
    background-image: var(--kx-currency-credits-image);
}

.meContentBox .me-character-currency__icon .duckets {
    background-image: var(--kx-currency-duckets-image);
}

.meContentBox .me-character-currency__icon .diamonds {
    background-image: var(--kx-currency-diamonds-image);
}

.meContentBox .me-character-currency__value {
    display: block;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    padding-left: 30px;
}

.meContentBox .me-character-currency__value.credits {
    color: #CCA923;
    text-shadow:
        0 0 2px rgba(204, 169, 35, .3),
        0 0 3px rgba(204, 169, 35, .2);
}

.meContentBox .me-character-currency__value.duckets {
    color: #D184D3;
    text-shadow:
        0 0 2px rgba(209, 132, 211, .3),
        0 0 3px rgba(209, 132, 211, .2);
}

.meContentBox .me-character-currency__value.diamonds {
    color: #37C9EA;
    text-shadow:
        0 0 2px rgba(55, 201, 234, .3),
        0 0 3px rgba(55, 201, 234, .2);
}

/* Individual refresh skeletons keep the finished card geometry intact. */
@keyframes me-character-skeleton-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -30% 0; }
}

.me-character-skeleton-line {
    background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .13), rgba(255, 255, 255, .045));
    background-size: 230% 100%;
    animation: me-character-skeleton-shimmer 1.25s ease-in-out infinite;
    display: block;
    border-radius: 2px;
}

.meContentBox .me-character-skeleton-avatar {
    /* Keep the card's dedicated avatar placeholder visible and motionless. */
    background-position: center -30px;
    animation: none;
}

.meContentBox .userDetails h2 {
    position: relative;
}

.meContentBox .me-character-skeleton-name {
    position: absolute;
    left: 3px;
    top: -10px;
    width: 156px;
    height: 23px;
}

.meContentBox .userDetails h2:has(.me-character-skeleton-name) {
    height: 23px;
    margin-bottom: 2px;
}

.meContentBox .me-character-skeleton-motto {
    width: 108px;
    height: 10px;
    margin-left: 3px;
}

.meContentBox .me-character-skeleton-balance {
    width: 32px;
    height: 12px;
    margin: 9px auto;
    transform: translateX(15px);
}

.meContentBox .me-character-skeleton-checkin {
    cursor: default;
}

.meContentBox .me-character-skeleton-senior-icon {
    width: 20px;
    height: 20px;
    margin: auto;
    border-radius: 50%;
}

.meContentBox .me-character-skeleton-senior-title {
    width: 88px;
    height: 10px;
}

.meContentBox .me-character-skeleton-senior-days {
    width: 58px;
    height: 15px;
}

@media (prefers-reduced-motion: reduce) {
    .me-character-skeleton-line {
        animation: none;
    }
}

/* Canjeables */
#contentBox.gift-box.weekly-rewards-panel {
    position: relative;
    width: 100%;
    height: 240px;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
    border: 0;
    border-radius: 2px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(27, 32, 34, .91) 0%, rgba(20, 24, 26, .94) 48%, rgba(13, 16, 18, .97) 100%),
        #161b1d;
    box-shadow: none;
}

#contentBox.gift-box.weekly-rewards-panel::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    pointer-events: none;
    border-radius: 3px;
    background:
        linear-gradient(90deg, rgba(12,15,17,.22), rgba(12,15,17,.08) 18%, rgba(12,15,17,.04) 50%, rgba(12,15,17,.08) 82%, rgba(12,15,17,.22)),
        linear-gradient(180deg, rgba(12,15,17,.2), rgba(12,15,17,.04) 28%, rgba(12,15,17,.04) 72%, rgba(12,15,17,.2)),
        var(--kx-personal-texture-image) no-repeat center center;
    background-size: 100% 100%, 100% 100%, 118% 132%;
    opacity: .28;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    -webkit-mask-image:
        radial-gradient(ellipse at center, rgba(0,0,0,.08) 0%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.42) 62%, #000 100%),
        linear-gradient(to right, #000 0, rgba(0,0,0,.82) 16px, rgba(0,0,0,.22) 92px, rgba(0,0,0,.12) 50%, rgba(0,0,0,.22) calc(100% - 92px), rgba(0,0,0,.82) calc(100% - 16px), #000 100%);
    mask-image:
        radial-gradient(ellipse at center, rgba(0,0,0,.08) 0%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.42) 62%, #000 100%),
        linear-gradient(to right, #000 0, rgba(0,0,0,.82) 16px, rgba(0,0,0,.22) 92px, rgba(0,0,0,.12) 50%, rgba(0,0,0,.22) calc(100% - 92px), rgba(0,0,0,.82) calc(100% - 16px), #000 100%);
}

#contentBox.gift-box.weekly-rewards-panel::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 1;
    pointer-events: none;
    border-radius: 3px;
    background:
        radial-gradient(circle at 21% 48%, rgba(245, 252, 255, .09) 0%, rgba(245, 252, 255, .045) 12%, rgba(245, 252, 255, 0) 29%),
        linear-gradient(90deg, rgba(10, 13, 15, .16), rgba(10, 13, 15, .02) 22%, rgba(10, 13, 15, .1) 50%, rgba(10, 13, 15, .02) 78%, rgba(10, 13, 15, .16)),
        linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(0, 0, 0, .2));
}

.weekly-rewards-carousel,
.weekly-rewards-track {
    position: relative;
    height: 100%;
}

.weekly-rewards-carousel {
    z-index: 3;
}

.weekly-reward-card {
    position: relative;
    min-width: 0;
    display: none;
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 18px 46px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 28px;
    background: transparent;
    box-shadow: none;
}

.weekly-reward-card.is-active {
    display: grid;
}

.weekly-reward-hours {
    display: none;
}

.weekly-reward-hours {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 3;
    min-width: 34px;
    padding: 4px 8px;
    border-radius: 2px;
    color: #dff7ea;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    background: rgba(24, 143, 78, .32);
    border: 1px solid rgba(50, 205, 120, .3);
}

.weekly-reward-stage {
    position: relative;
    width: 138px;
    height: 128px;
    min-height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    overflow: visible;
    background: transparent;
}

.weekly-reward-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 17px;
    width: 78px;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, .36);
    box-shadow: 0 0 18px rgba(0, 0, 0, .3);
}

.weekly-rewards-panel .furni-image {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    display: block;
    width: 92px;
    height: 92px;
    max-width: 92px;
    max-height: 92px;
    object-fit: contain;
    transform: none;
    filter: drop-shadow(0 9px 10px rgba(0, 0, 0, .35)) drop-shadow(0 0 8px rgba(255, 255, 255, .24));
    animation: soft-white-flicker 4s ease-in-out infinite;
}

@keyframes soft-white-flicker {
    0%, 100% {
        filter: drop-shadow(0 9px 10px rgba(0, 0, 0, .35)) drop-shadow(0 0 7px rgba(255, 255, 255, .22));
    }
    50% {
        filter: drop-shadow(0 9px 10px rgba(0, 0, 0, .38)) drop-shadow(0 0 11px rgba(255, 255, 255, .32));
    }
}

.weekly-reward-meta {
    min-width: 0;
    padding: 0 2px;
}

.weekly-reward-header {
    display: block;
    min-height: 0;
    margin-bottom: 7px;
}

.weekly-reward-title {
    min-width: 0;
    color: #fff;
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.weekly-reward-status {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.05;
}

.weekly-reward-header strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.weekly-reward-header strong .fa {
    color: rgba(255, 255, 255, .48);
    font-size: 12px;
}

.progress-bar-container {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .45);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #27ae60 0%, #38ce76 55%, #9bf2bd 100%);
    border-radius: 2px;
    transition: width .4s ease-in-out;
}

.weekly-reward-details {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    color: rgba(255, 255, 255, .56);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.weekly-reward-details span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
}

.weekly-reward-details .fa {
    margin-right: 5px;
    color: rgba(255, 255, 255, .44);
    font-size: 11px;
}

.missing-hours {
    color: #ff6659;
}

.claimable-text {
    color: #2ecc71;
    font-weight: 700;
}

.claim-button {
    position: absolute;
    right: 16px;
    bottom: 6px;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    white-space: nowrap;
    padding: 0 18px;
}

.claim-button:hover {
    text-decoration: none;
}

.claim-button:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(255, 255, 255, .08);
}

.claim-button.disabled {
    color: rgba(255, 255, 255, .58);
    background: rgba(255, 255, 255, .04);
}

.claim-button.is-claimable {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 155, 0, .12);
    border: 1px solid rgba(255, 155, 0, .55);
    border-radius: 3px;
}

.claim-button.is-claimable:hover {
    background: rgba(255, 155, 0, .18);
}

/* Keep the news action on the same right rail as the weekly redeem action. */
.me-news-column .newsSlide .readMore {
    right: 27px;
    bottom: 20px;
}

.weekly-reward-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 28px;
    height: 58px;
    margin-top: -29px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 2px;
    color: rgba(255, 255, 255, .72);
    background: rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.weekly-reward-nav:hover {
    color: #fff;
    border-color: rgba(255, 155, 0, .45);
    background: rgba(255, 155, 0, .12);
}

.weekly-reward-nav.is-prev {
    left: 9px;
}

.weekly-reward-nav.is-next {
    right: 9px;
}

#contentBox.me-referral-box {
    position: relative;
    height: 198px;
    overflow: hidden;
}

#contentBox.me-referral-invite-box {
    height: auto;
    min-height: 218px;
    overflow: visible;
}

#sub-menu a.kx-submenu-link--referrals {
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

#contentBox.me-referral-share-box {
    min-height: 142px;
}

#contentBox.me-referral-share-box p {
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font: 400 14px/1.45 'Roboto Condensed', sans-serif;
}

#contentBox.me-referral-users-box {
    height: 300px;
    overflow: hidden;
}

#contentBox.me-referral-users-box #list-users .top-name {
    color: rgba(255, 255, 255, .94);
    font-weight: 700;
}

#contentBox.me-referral-users-box #list-users .me-referral-user-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, .58);
    font-weight: 700;
}

#contentBox.me-referral-users-box #list-users .me-referral-user-status .fa {
    font-size: 10px;
}

#contentBox.me-referral-users-box #list-users .me-referral-user-status.is-approved {
    color: #65dd9f;
}

#contentBox.me-referral-users-box #list-users .me-referral-user-status.is-verified {
    color: #79c9ef;
}

#contentBox.me-referral-users-box #list-users .me-referral-user-status.is-pending {
    color: #e5bd72;
}

#contentBox.me-referral-users-box #list-users .me-referral-user-status.is-rejected {
    color: #df8e8e;
}

#contentBox .me-referral-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 18px;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    background: transparent;
}

#contentBox.me-referral-invite-box .me-referral-panel {
    grid-template-columns: minmax(0, 1fr) minmax(292px, 330px);
    grid-template-rows: auto;
    gap: 22px;
    height: auto;
    min-height: 192px;
    padding: 18px 20px;
}

.me-referral-gift {
    position: absolute;
    right: 12px;
    bottom: 10px;
    max-width: 78px;
    opacity: .26;
    image-rendering: pixelated;
    pointer-events: none;
}

.me-referral-copy,
.me-referral-stats {
    position: relative;
    z-index: 1;
}

.me-referral-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.me-referral-invite-box .me-referral-copy {
    justify-content: center;
    padding: 2px 18px 2px 2px;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.me-referral-copy-icon {
    display: block;
    margin: 0 0 3px;
    color: rgba(255, 255, 255, .72);
    font-size: 27px;
    line-height: 1;
}

.me-referral-copy p {
    max-width: 570px;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font: 700 15px/1.35 'Roboto Condensed', sans-serif;
}

.me-referral-copy b {
    color: inherit;
}

.me-referral-copy .me-gotw-value {
    color: rgb(182, 133, 255);
    text-decoration: none;
}

.me-referral-copy .me-gotw-value:hover {
    color: rgb(204, 169, 255);
}

.me-referral-link-area {
    width: 100%;
    max-width: 540px;
    margin-top: 42px;
}

.me-referral-invite-box .me-referral-link-area {
    max-width: none;
    margin-top: 16px;
    padding-top: 0;
}

.me-referral-copy label {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .55);
    font: 700 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.me-referral-link-row {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}

.me-referral-link {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    padding: 0 11px;
    color: rgba(255, 255, 255, .86);
    background: rgba(0, 0, 0, .36);
    border: 1px solid rgba(255, 155, 0, .55);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255, 155, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .025);
    font: 700 13px 'Roboto', sans-serif;
}

.me-referral-link:focus {
    outline: none;
    border-color: rgba(255, 155, 0, .7);
    box-shadow: 0 0 0 1px rgba(255, 155, 0, .16), 0 0 12px rgba(255, 155, 0, .07), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.me-referral-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 6px;
    min-width: 132px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 155, 0, .16);
    cursor: pointer;
    font: 800 11px 'Roboto Condensed', sans-serif;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.me-referral-copy-button:hover,
.me-referral-copy-button.is-copied {
    color: rgba(255, 255, 255, .86);
    border-color: rgba(255, 155, 0, .66);
    background: rgba(255, 155, 0, .27);
}

.me-referral-stats {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    box-sizing: border-box;
    padding: 13px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.026), rgba(0,0,0,.05)),
        #15191b;
    border: 1px solid transparent;
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .045),
        inset 0 -2px 0 rgba(0, 0, 0, .15);
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.me-referral-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 18px;
    background: var(--kx-personal-texture-image) no-repeat center center rgba(0, 0, 0, .42);
    background-size: 360% 240%;
    opacity: .28;
    -webkit-mask-image:
        linear-gradient(to right, #000 0, rgba(0,0,0,.68) 8px, rgba(0,0,0,0) 34px, rgba(0,0,0,0) calc(100% - 34px), rgba(0,0,0,.68) calc(100% - 8px), #000 100%),
        linear-gradient(to bottom, #000 0, rgba(0,0,0,.58) 7px, rgba(0,0,0,0) 26px, rgba(0,0,0,0) calc(100% - 26px), rgba(0,0,0,.58) calc(100% - 7px), #000 100%);
    mask-image:
        linear-gradient(to right, #000 0, rgba(0,0,0,.68) 8px, rgba(0,0,0,0) 34px, rgba(0,0,0,0) calc(100% - 34px), rgba(0,0,0,.68) calc(100% - 8px), #000 100%),
        linear-gradient(to bottom, #000 0, rgba(0,0,0,.58) 7px, rgba(0,0,0,0) 26px, rgba(0,0,0,0) calc(100% - 26px), rgba(0,0,0,.58) calc(100% - 7px), #000 100%);
}

.me-referral-stats > * {
    position: relative;
    z-index: 1;
}

.me-referral-goal {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 10px;
    margin: 0;
    padding: 14px 15px;
    background:
        linear-gradient(135deg, rgba(255, 155, 0, .09), rgba(255, 155, 0, 0) 52%),
        rgba(0, 0, 0, .23);
    border: 1px solid rgba(255, 155, 0, .18);
    border-radius: 3px;
}

.me-referral-goal-label {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .52);
    font: 800 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.me-referral-goal-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font: 700 12px/1.35 'Roboto Condensed', sans-serif;
}

.me-referral-goal-copy strong {
    color: rgba(255, 255, 255, .94);
    font-size: 15px;
    text-transform: uppercase;
}

.me-referral-goal-copy strong span:last-child {
    color: #ffb022;
}

.me-referral-goal-action {
    min-width: 0;
    margin-top: auto;
}

.me-referral-goal-progress {
    height: 8px;
    margin: 0;
}

.me-referral-goal-progress .me-referral-progress-fill {
    background: #ff9400;
    box-shadow: 0 0 8px rgba(255, 148, 0, .2);
}

.me-referral-goal .me-referral-claim-button {
    margin-top: 7px;
}

.me-referral-summary-line {
    display: grid;
    align-items: baseline;
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding: 7px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .065);
    color: rgba(255, 255, 255, .55);
    font: 800 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.me-referral-summary-line span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.me-referral-summary-line span + span::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-right: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .34);
}

.me-referral-summary-line b {
    color: #fff;
    font-size: 13px;
}

.me-referral-award {
    margin-bottom: 9px;
    padding: 7px 8px;
    color: #ffe2a1;
    background: rgba(255, 155, 0, .13);
    border: 1px solid rgba(255, 155, 0, .28);
    border-radius: 3px;
    font: 800 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.me-referral-award .fa {
    margin-right: 6px;
    color: rgba(255, 255, 255, .68);
}

.me-referral-summary {
    padding: 5px 0 0;
}

.me-referral-main-count {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 9px;
}

.me-referral-main-count strong {
    color: #fff;
    font: 800 34px/1 'Roboto Condensed', sans-serif;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 0 8px rgba(0, 0, 0, .45);
}

.me-referral-main-count span,
.me-referral-reward,
.me-referral-mini {
    color: rgba(255, 255, 255, .72);
    font: 700 12px 'Roboto Condensed', sans-serif;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
    text-transform: uppercase;
}

.me-referral-reward,
.me-referral-mini {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.me-referral-bottom {
    margin-top: auto;
}

.me-referral-progress {
    height: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, .45);
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .45);
}

.me-referral-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #27ae60 0%, #38ce76 65%, #9bf2bd 100%);
    border-radius: 2px;
}

.me-referral-mini {
    flex-wrap: wrap;
}

.me-referral-mini .fa {
    margin-right: 4px;
    color: rgba(255, 255, 255, .72);
}

.me-referral-claim-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 30px;
    margin-top: 8px;
    padding: 0 8px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 155, 0, .12);
    border: 1px solid rgba(255, 155, 0, .55);
    border-radius: 3px;
    cursor: pointer;
    font: 800 11px/30px 'Roboto Condensed', sans-serif;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.me-referral-primary-button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 2px;
    padding: 9px 15px;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 155, 0, .13);
    border: 1px solid rgba(255, 155, 0, .55);
    border-radius: 3px;
    cursor: pointer;
    font: 800 12px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.me-referral-primary-button:hover {
    background: rgba(255, 155, 0, .2);
}

.me-referral-primary-button:disabled {
    cursor: default;
    opacity: .55;
}

.me-referral-primary-button .fa {
    color: rgba(255, 255, 255, .62);
}

.me-mail-reward-box .me-referral-copy {
    min-height: 100%;
}

#contentBox.me-referral-box.me-mail-reward-box.is-mail-pending {
    height: 172px;
}

.me-mail-reward-box.is-mail-pending .me-referral-panel {
    padding-top: 12px;
    padding-bottom: 12px;
}

.me-mail-reward-box.is-mail-pending .me-referral-stats {
    padding: 10px 13px;
}

.me-mail-reward-box.is-mail-pending .me-referral-copy p {
    max-width: 600px;
    color: rgba(255, 255, 255, .8);
    font-weight: 400;
    line-height: 1.38;
}

.me-mail-reward-box.is-mail-pending .me-referral-copy p strong {
    color: rgba(255, 255, 255, .96);
    font-weight: 800;
}

.me-mail-reward-box .me-referral-primary-button {
    margin-top: auto;
}

.me-mail-reward-box.is-mail-pending .me-referral-primary-button {
    padding: 10px 18px;
    color: rgba(255, 255, 255, .94);
    background: rgba(255, 155, 0, .16);
    border-color: rgba(255, 155, 0, .68);
}

.me-mail-reward-box.is-mail-pending .me-referral-primary-button:hover {
    background: rgba(255, 155, 0, .23);
}

.me-mail-reward-box .me-referral-mini {
    margin-top: 12px;
}

.me-mail-reward-currencies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 6px 0 10px;
    padding: 9px 8px;
    background: rgba(0, 0, 0, .26);
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 2px;
}

.me-mail-reward-currency {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}

.me-mail-reward-currency img,
.me-mail-reward-currency .kx-managed-currency-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
}

.me-mail-reward-currency strong {
    color: #ffcf3b;
    font: 800 29px/1 'Roboto Condensed', sans-serif;
    text-shadow: 0 0 2px rgba(255, 207, 59, .28), 0 0 4px rgba(255, 207, 59, .18);
}

.me-mail-reward-currency.is-diamonds strong {
    color: #37C9EA;
    text-shadow: 0 0 2px rgba(55, 201, 234, .3), 0 0 4px rgba(55, 201, 234, .18);
}

.me-mail-reward-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px;
    color: rgba(255, 255, 255, .82);
    background: rgba(0, 0, 0, .48);
    border: 1px solid rgba(255, 255, 255, .115);
    border-radius: 2px;
    font: 800 10px/1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.me-mail-reward-status .fa {
    color: rgba(255, 255, 255, .68);
}

.me-mail-reward-status.is-sent {
    color: rgba(255, 224, 168, .86);
    border-color: rgba(255, 155, 0, .18);
    background: rgba(255, 155, 0, .075);
}

.me-mail-reward-claim-button {
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 9px 12px;
}

.me-referral-claim-button:hover {
    background: rgba(255, 155, 0, .18);
}

.me-referral-claim-button:disabled,
.me-referral-claim-button.disabled {
    cursor: default;
    color: rgba(255, 255, 255, .58);
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .1);
}

.me-referral-claim-button .fa {
    color: rgba(255, 255, 255, .62);
}

#contentBox.me-referral-history-box {
    margin-top: 12px;
}

.me-referral-history-list {
    margin: 0;
    padding: 0;
}

#contentBox.me-referral-users-box #list-users {
    height: 255px;
    max-height: 255px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Match the shared "Quien lo tiene" empty-state typography, while centering
   the text in the entire infobox rather than only in the list below its title. */
#contentBox.me-referral-users-box #list-users:has(> .me-referral-users-empty) {
    position: static;
}

#contentBox.me-referral-users-box #list-users > .me-referral-users-empty {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 15px;
    background: transparent;
    transform: translateY(-50%);
}

/* When both referral lists are empty, the side panel follows the combined
 * invitation/history column instead of leaving a visibly shorter card. */
.me-referral-layout--empty {
    display: flex;
    align-items: stretch;
}

.me-referral-layout--empty > .grid_15,
.me-referral-layout--empty > .grid_3 {
    align-self: stretch;
    float: none;
}

.me-referral-layout--empty #contentBox.me-referral-users-box {
    box-sizing: border-box;
    height: calc(100% - 10px);
}

.me-referral-layout--empty #contentBox.me-referral-users-box #list-users {
    height: calc(100% - 45px);
    max-height: none;
}

@media (max-width: 700px) {
    #contentBox.me-referral-invite-box .me-referral-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .me-referral-goal {
        grid-template-columns: minmax(0, 1fr);
    }

    .me-referral-link-row {
        align-items: stretch;
        flex-direction: column;
    }

    .me-referral-copy-button {
        min-width: 0;
        width: 100%;
    }
}

.me-notifications-preview {
    margin-bottom: 14px;
}

.Alert.me-notification-alert {
    display: flex;
    align-items: center;
    min-height: 75px;
    height: auto;
    box-sizing: border-box;
    gap: 11px;
}

.me-notification-alert .warning {
    flex: 0 0 auto;
    margin-top: 0;
}

.me-notification-alert-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.me-notification-alert-copy b {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 14px;
}

.me-notification-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.me-notification-title-row .me-notification-time {
    flex: 0 0 auto;
    margin-top: 0;
}

.me-notification-type-icon {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .94);
    font-size: 13px;
}

.me-notification-message-row {
    min-width: 0;
    margin-top: 3px;
}

.me-notification-message-row > [data-me-notification-message],
.me-notification-message-link {
    min-width: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
}

.me-notification-message-link {
    text-decoration: none;
}

.me-notification-message-link:hover,
.me-notification-message-link:focus {
    color: #fff;
    text-decoration: underline;
}

.me-notification-message-detail {
    margin-top: 8px;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
    line-height: 1.35;
}

.me-notification-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    color: rgba(255, 255, 255, .43);
    font: 700 10px/1 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
}

.me-notification-time .fa {
    font-size: 10px;
}

.me-notification-alert-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.me-notification-alert-controls {
    align-self: center;
}

.me-notification-nav,
.me-notification-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 2px;
    color: rgba(255, 255, 255, .82);
    background: rgba(0, 0, 0, .22);
    cursor: pointer;
    font: 700 11px 'Roboto Condensed', sans-serif;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.me-notification-nav {
    width: 19px;
    min-height: 22px;
    padding: 0;
    border-color: transparent;
    color: rgba(255, 255, 255, .43);
    background: transparent;
    font-size: 15px;
}

.me-notification-count {
    min-width: 28px;
    color: rgba(255, 255, 255, .46);
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-align: center;
}

.me-notification-nav:hover,
.me-notification-close:hover {
    border-color: rgba(255, 207, 115, .58);
    color: #fff;
    background: rgba(255, 207, 115, .12);
}

.me-notification-nav:hover {
    border-color: transparent;
    color: rgba(255, 255, 255, .84);
    background: transparent;
}

.me-notification-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-height: 24px;
    padding: 0;
    margin: 0 10px 0 5px;
    color: rgba(255, 255, 255, .52);
    font-size: 12px;
}

/* source: history.css */
.kx-history-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#contentBox.kx-history-panel,
#contentBox.kx-account-history-box {
    height: auto;
    overflow: visible;
}

.kx-history-panel .kx-account-history-content,
.kx-account-history-content {
    padding: 12px;
}

.kx-history-panel .kx-history-list,
.kx-account-history-box .kx-history-list {
    min-height: 72px;
}

.kx-history-empty.purchase-empty {
    padding: 16px;
}

.kx-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 11px 13px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .028);
    border: 1px solid rgba(255, 255, 255, .07);
    border-left: 3px solid rgba(255, 255, 255, .16);
    border-radius: 3px;
}

.kx-history-row.is-complete,
.kx-history-row.is-status-approved {
    border-left-color: #2ecc71;
}

.kx-history-row.is-pending,
.kx-history-row.is-status-pending_review,
.kx-history-row.is-status-pending_payment {
    border-left-color: #ff9b00;
}

.kx-history-row.is-status-rejected,
.kx-history-row.is-status-closed,
.kx-history-row.is-status-cancelled {
    border-left-color: #e74c3c;
}

.kx-history-row.kx-history-skeleton {
    flex: 0 0 auto;
    border-left-color: rgba(255, 255, 255, .12);
    pointer-events: none;
}

.kx-history-skeleton .kx-history-main {
    flex: 1 1 auto;
    gap: 6px;
}

.kx-history-skeleton .kx-history-side {
    width: 88px;
    gap: 9px;
}

.kx-history-skeleton .kx-skeleton-line {
    max-width: 100%;
}

.kx-history-skeleton .is-history-eyebrow {
    width: 102px;
    height: 8px;
}

.kx-history-skeleton .is-history-title {
    width: 208px;
    height: 13px;
}

.kx-history-skeleton .is-history-detail {
    width: 155px;
    height: 9px;
    opacity: .8;
}

.kx-history-skeleton .is-history-meta {
    width: 134px;
    height: 9px;
    opacity: .65;
}

.kx-history-skeleton .is-history-value {
    width: 76px;
    height: 13px;
}

.kx-history-skeleton .is-history-status {
    width: 54px;
    height: 16px;
    opacity: .72;
}

.kx-history-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.kx-history-eyebrow {
    color: #6ee7b7;
    font: 800 10px 'Roboto Condensed', sans-serif;
    letter-spacing: .25px;
    text-transform: uppercase;
}

.kx-history-main > strong,
.kx-history-value {
    color: #fff;
    font: 800 15px 'Roboto Condensed', sans-serif;
}

.kx-history-row.is-complete .kx-history-value,
.me-referral-history-list .kx-history-value {
    color: #ffb022;
}

.kx-history-detail,
.kx-history-meta {
    color: rgba(255, 255, 255, .58);
    font: 700 11px/1.35 'Roboto Condensed', sans-serif;
}

.kx-history-detail:not(.is-muted) {
    color: rgba(255, 211, 122, .92);
}

.kx-history-detail.is-muted {
    overflow-wrap: anywhere;
}

.kx-history-side {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 5px;
}

.kx-history-status {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 3px;
    color: rgba(255, 255, 255, .7);
    background: rgba(0, 0, 0, .18);
    font: 800 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.kx-history-row.is-pending .kx-history-status {
    color: #ffb022;
    border-color: rgba(255, 155, 0, .28);
    background: rgba(255, 155, 0, .08);
}

.kx-history-empty {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 0 13px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .56);
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 3px;
    font: 400 13px 'Roboto Condensed', sans-serif;
}

.kx-history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}

.kx-history-pagination .kx-page-stepper__btn {
    min-width: 94px;
    padding: 7px 10px;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 155, 0, .1);
    border: 1px solid rgba(255, 155, 0, .34);
    border-radius: 3px;
    cursor: pointer;
    font: 800 11px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.kx-history-pagination .kx-page-stepper__btn:hover:not(:disabled):not(.is-disabled) {
    background: rgba(255, 155, 0, .2);
    border-color: rgba(255, 155, 0, .62);
}

.kx-history-pagination .kx-page-stepper__btn:disabled,
.kx-history-pagination .kx-page-stepper__btn.is-disabled {
    cursor: default;
    opacity: .36;
}

.kx-history-pagination a.kx-page-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
}

.kx-history-pagination .kx-page-stepper__btn.is-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.kx-history-pagination .kx-page-stepper__info {
    color: rgba(255, 255, 255, .68);
    font: 800 12px 'Roboto Condensed', sans-serif;
}

.is-endpoint-pager-loading [data-referral-rewards-page],
.is-endpoint-pager-loading [data-purchase-history-page] {
    opacity: .65;
    pointer-events: none;
}

@media (max-width: 700px) {
    .kx-history-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .kx-history-side {
        align-items: flex-start;
    }
}

/* source: estadisticas.css */
.hotel-stats-page #contentBox {
    overflow: hidden;
}

.hotel-stats-box .png15 {
    padding-bottom: 6px;
}

.hotel-stats-chart.is-organizations .hotel-stats-chart-head strong {
    color: #4cb4ff;
}

.hotel-stats-chart.is-online .hotel-stats-chart-head strong {
    color: #67d58d;
}

.hotel-stats-chart.is-active-users .hotel-stats-chart-head strong {
    color: #c889ff;
}

.hotel-stats-chart-head strong {
    display: block;
    color: #ffcf73;
    font: 700 18px 'Roboto', sans-serif;
    white-space: nowrap;
}

.hotel-stats-range-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 16px;
}

.hotel-stats-range-tabs button {
    min-width: 31px;
    height: 24px;
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 2px;
    background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .64);
    cursor: pointer;
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-align: center;
}

.hotel-stats-range-tabs button:hover,
.hotel-stats-range-tabs button.is-active {
    border-color: rgba(255, 207, 115, .36);
    background: rgba(255, 207, 115, .13);
    color: #ffcf73;
}

.hotel-stats-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
}

.hotel-stats-chart {
    min-width: 0;
}

.hotel-stats-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.hotel-stats-chart-head span {
    color: rgba(255, 255, 255, .72);
    font: 700 12px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.stats-line-chart {
    position: relative;
    width: 100%;
    height: 190px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .12));
    overflow: hidden;
    cursor: crosshair;
}

.stats-line-chart canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.stats-chart-crosshair {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, .28);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
    display: none;
    pointer-events: none;
}

.stats-chart-crosshair-y {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .16);
    display: none;
    pointer-events: none;
}

.stats-chart-marker {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .55);
    display: none;
    pointer-events: none;
}

.stats-chart-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 112px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 2px;
    background: rgba(13, 15, 16, .96);
    color: rgba(255, 255, 255, .7);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .25);
    font: 700 10px 'Roboto', sans-serif;
    line-height: 1.25;
    display: none;
    pointer-events: none;
}

.stats-chart-tooltip span,
.stats-chart-tooltip strong {
    display: block;
}

.stats-chart-tooltip strong {
    margin: 4px 0;
    color: #fff;
    font-size: 14px;
}

.stats-chart-tooltip .is-positive {
    color: #67d58d;
}

.stats-chart-tooltip .is-negative {
    color: #ff6b5f;
}

@media (max-width: 760px) {
    .hotel-stats-charts {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .stats-line-chart {
        height: 168px;
    }
}

/* source: ayuda-equipo.css */
.ayuda-equipo-page {
    margin-top: 10px;
}

.ayuda-equipo-hero {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25));
    border-radius: 10px;
    padding: 18px 18px 14px;
    margin-bottom: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ayuda-equipo-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
    letter-spacing: 0;
}

.ayuda-equipo-hero-subtitle {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.78);
}

.infoBox.ayuda-equipo-card {
    background: rgba(0, 0, 0, 0.34);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.ayuda-equipo-steps {
    padding-top: 6px;
}

.ayuda-equipo-step {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr 120px;
    gap: 12px;
    padding: 14px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 12px;
}

.ayuda-equipo-step:last-child {
    margin-bottom: 0;
}

.ayuda-equipo-step-marker {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
}

.ayuda-equipo-step-icon,
.ayuda-equipo-step-number {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.ayuda-equipo-step-complete .ayuda-equipo-step-icon {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.4);
    color: rgba(210, 255, 226, 0.95);
}

.ayuda-equipo-step-icon-locked {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
}

.ayuda-equipo-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ayuda-equipo-step-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.ayuda-equipo-step-desc {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
}

.ayuda-equipo-pill {
    font-size: 10px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    letter-spacing: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

.ayuda-equipo-pill-complete {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.18);
    color: rgba(210, 255, 226, 0.95);
}

.ayuda-equipo-pill-progress {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.16);
    color: rgba(220, 235, 255, 0.95);
}

.ayuda-equipo-pill-locked {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
}

.ayuda-equipo-subcard {
    margin-top: 10px;
    padding: 10px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ayuda-equipo-subrow {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
}

.ayuda-equipo-subicon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ayuda-equipo-subtitle {
    font-weight: 700;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.88);
}

.ayuda-equipo-subhint {
    font-size: 12px;
    color: rgba(120, 200, 255, 0.9);
    margin-top: 2px;
}

.ayuda-equipo-progress-value {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(120, 255, 160, 0.95);
    font-weight: 700;
}

.ayuda-equipo-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 6px;
    overflow: hidden;
}

.ayuda-equipo-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.95), rgba(16, 185, 129, 0.95));
}

.ayuda-equipo-bar-lg {
    height: 10px;
}

.ayuda-equipo-cta {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.ayuda-equipo-cta:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ayuda-equipo-subcard-disabled .ayuda-equipo-cta {
    opacity: 0.55;
    cursor: not-allowed;
}

.ayuda-equipo-rewards {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ayuda-equipo-reward {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: rgba(255, 255, 255, 0.9);
}

.ayuda-equipo-reward .ok {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.35);
    color: rgba(0, 0, 0, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.ayuda-equipo-step-aside {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayuda-equipo-art {
    width: 96px;
    height: 96px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.18);
}

.ayuda-equipo-progress-summary {
    padding-top: 4px;
}

.ayuda-equipo-progress-number {
    text-align: right;
    font-weight: 800;
    font-size: 22px;
    color: rgba(120, 255, 160, 0.95);
}

.ayuda-equipo-muted {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.ayuda-equipo-program {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    align-items: start;
}

.ayuda-equipo-program-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.18);
}

.ayuda-equipo-program-text p {
    margin: 0 0 8px 0;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.72);
}

.ayuda-equipo-sep {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 12px 0;
}

.ayuda-equipo-reqs-title {
    font-weight: 800;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.88);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ayuda-equipo-reqs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ayuda-equipo-reqs-list li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 6px;
}

.ayuda-equipo-reqs-list li i {
    color: rgba(34, 197, 94, 0.9);
    margin-top: 2px;
}

.ayuda-equipo-discord {
    margin-top: 10px;
    width: 100%;
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.ayuda-equipo-discord:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ayuda-equipo-help .function {
    margin-top: 10px;
    width: 100%;
    text-align: left;
}

/* source: auth-simple.css */

.auth-simple-wrap {
    width: 1190px;
    margin: 34px auto 70px;
}

.auth-simple-card {
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 3px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 8px 24px rgba(0, 0, 0, .22);
    color: rgba(255, 255, 255, .72);
}

.auth-simple-title {
    background: rgba(0, 0, 0, .22);
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
    color: #fff;
    font: 400 24px 'Roboto Condensed', sans-serif;
    margin: 0;
    padding: 16px 20px;
    text-transform: uppercase;
}

.auth-simple-body {
    padding: 22px 24px 24px;
}

.auth-simple-body-grid {
    align-items: stretch;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 430px;
}

.auth-simple-info,
.auth-simple-form-panel {
    background: rgba(0, 0, 0, .12);
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 3px;
    box-sizing: border-box;
    padding: 18px 20px;
}

.auth-simple-kicker {
    color: rgba(255, 255, 255, .86);
    font: 700 18px 'Roboto Condensed', sans-serif;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.auth-simple-lead {
    color: rgba(255, 255, 255, .64);
    font: 300 14px/1.45 'Roboto', sans-serif;
    margin: 0 0 8px;
}

.auth-simple-hint {
    color: var(--kx-primary-color, #ffb13b);
    font-weight: 700;
}

.auth-simple-email-help {
    color: var(--kx-primary-color, #ffb13b);
    display: inline-block;
    font: 700 13px 'Roboto Condensed', sans-serif;
    margin: 0 0 18px;
    text-decoration: none;
    text-transform: uppercase;
}

.auth-simple-email-help:hover {
    color: var(--kx-primary-color-light, color-mix(in srgb, var(--kx-primary-color, #ffb13b) 74%, #fff));
    text-decoration: underline;
}

.auth-simple-countdown {
    background: var(--kx-primary-color-faint, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 14%, transparent));
    border: 1px solid var(--kx-primary-color-border, color-mix(in srgb, var(--kx-primary-color, #ff9b00) 42%, transparent));
    border-radius: 3px;
    color: rgba(255, 255, 255, .72);
    font: 400 13px 'Roboto', sans-serif;
    margin: 0;
    padding: 9px 11px;
}

.auth-simple-countdown strong {
    color: var(--kx-primary-color, #ffb13b);
}

.auth-simple-countdown.is-expired {
    background: rgba(231, 76, 60, .12);
    border-color: rgba(231, 76, 60, .36);
}

.auth-simple-countdown.is-expired strong {
    color: #ffb7b0;
}

.auth-simple-form label {
    color: rgba(255, 255, 255, .86);
    display: block;
    font: 700 12px 'Roboto Condensed', sans-serif;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.auth-simple-form input[type=text],
.auth-simple-form input[type=email],
.auth-simple-form input[type=password] {
    background: rgba(255, 255, 255, .96);
    border: 0;
    border-radius: 3px;
    box-sizing: border-box;
    color: #1b1f22;
    display: block;
    font: 400 16px 'Roboto', sans-serif;
    height: 44px;
    margin: 0 0 16px;
    outline: none;
    padding: 0 12px;
    width: 100%;
}

.auth-simple-form input:focus {
    box-shadow: inset 0 0 0 2px var(--kx-primary-color, #ff9000);
}

.auth-simple-result {
    background: rgba(39, 174, 96, .14);
    border: 1px solid rgba(39, 174, 96, .38);
    border-radius: 3px;
    color: #a8f0c0;
    font: 400 13px/1.4 'Roboto', sans-serif;
    margin: 0 0 16px;
    padding: 10px 12px;
}

.auth-simple-result-error {
    background: rgba(231, 76, 60, .14);
    border-color: rgba(231, 76, 60, .42);
    color: #ffb7b0;
}

.auth-simple-submit {
    background: #27ae60;
    border: 0;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: block;
    font: 700 15px 'Roboto', sans-serif;
    height: 46px;
    margin-top: 8px;
    text-align: center;
    transition: background .18s ease;
    width: 100%;
}

.auth-simple-submit:hover {
    background: #2ecc71;
}

.auth-simple-separator {
    align-items: center;
    display: flex;
    gap: 12px;
    margin: 18px 0 12px;
}

.auth-simple-separator::before,
.auth-simple-separator::after {
    background: rgba(255, 255, 255, .12);
    content: "";
    flex: 1;
    height: 1px;
}

.auth-simple-separator span {
    color: rgba(255, 255, 255, .5);
    font: 400 13px 'Roboto', sans-serif;
}

.auth-simple-actions {
    display: grid;
    gap: 8px;
}

.auth-simple-actions form {
    margin: 0;
}

.auth-simple-link {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .62);
    cursor: pointer;
    display: block;
    font: 400 13px 'Roboto', sans-serif;
    padding: 0;
    text-align: center;
    text-decoration: none;
    transition: color .18s ease, text-shadow .18s ease;
    width: 100%;
}

.auth-simple-link:hover {
    color: var(--kx-primary-color, #ff9b00);
    text-shadow: 0 0 6px color-mix(in srgb, var(--kx-primary-color, #ff9b00) 38%, transparent);
    text-decoration: underline;
}

/* source: rares-reference.css */
.rare-reference-box {
    margin-top: 10px;
    overflow: hidden;
}

.rare-title-inline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    vertical-align: middle;
}

#rareRefreshButton {
    float: right;
    margin-top: -3px;
}

#rareRefreshButton:disabled {
    cursor: default;
}

.rare-reference-current {
    float: right;
    color: #ffcf73;
    font-weight: 700;
}

.rare-reference-trend {
    float: right;
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    margin: 1px 10px 0 0;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .22);
    color: rgba(255, 255, 255, .55);
    font: 700 11px 'Roboto Condensed', sans-serif;
    line-height: 1;
}

.rare-reference-trend:empty {
    display: none;
}

.rare-reference-trend.is-positive {
    border-color: rgba(47, 214, 139, .24);
    background: rgba(47, 214, 139, .1);
    color: #75f0aa;
}

.rare-reference-trend.is-negative {
    border-color: rgba(255, 84, 84, .24);
    background: rgba(255, 84, 84, .1);
    color: #ff8585;
}

.rare-reference-trend.is-neutral {
    color: rgba(255, 255, 255, .55);
}

.rare-reference-box.is-updating {
    animation: rareReferenceUpdate .22s ease both;
}

@keyframes rareReferenceUpdate {
    from {
        opacity: .72;
        filter: brightness(1.18);
    }

    to {
        opacity: 1;
        filter: brightness(1);
    }
}

.rare-reference-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

.rare-reference-summary div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(0, 0, 0, .16);
}

.rare-reference-summary span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .52);
    font: 700 10px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.rare-reference-summary strong {
    display: block;
    color: #f4f4f4;
    font: 700 13px 'Roboto', sans-serif;
}

.rare-reference-chart {
    height: 170px !important;
}

#rareReferenceBox .rare-reference-box .png15 {
    padding: 15px;
}

#rareReferenceBox .rare-reference-ranges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 10px;
    position: relative;
    z-index: 2;
}

#rareReferenceBox .rare-reference-ranges button {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 2px;
    box-shadow: none;
    color: rgba(255, 255, 255, .68);
    cursor: pointer;
    font: 700 10px 'Roboto Condensed', sans-serif;
    height: 24px;
    line-height: 1;
    min-width: 31px;
    padding: 0 7px;
    text-align: center;
}

#rareReferenceBox .rare-reference-ranges button:hover,
#rareReferenceBox .rare-reference-ranges button.is-active {
    background: rgba(255, 207, 115, .13);
    border-color: rgba(255, 207, 115, .36);
    color: #ffcf73;
}

#rareReferenceBox .rare-reference-chart {
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .12));
    border-radius: 2px;
    box-sizing: border-box;
    clear: both;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#rareReferenceBox .rare-reference-chart canvas {
    display: block;
    height: 100%;
    width: 100%;
}

.rare-reference-empty {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .16);
    color: rgba(255, 255, 255, .68);
    text-align: center;
    font-weight: 700;
}

/* source: hotel-shell.css */
/* Persistent CMS/Nitro surface. The iframe remains dimensioned while hidden so
 * the browser can initialize the renderer before the user enters the hotel. */
#kx-hotel-shell {
    position: fixed;
    z-index: 2147482000;
    inset: 0;
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    background: #0e151c;
    transition: opacity .22s ease;
}

#kx-hotel-shell[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

#kx-hotel-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0e151c;
}

.kx-hotel-disconnect-notice { position:fixed; inset:0; z-index:2147482001; display:grid; place-items:center; background:rgba(0,0,0,.7); }
.kx-hotel-disconnect-notice[hidden] { display:none; }
.kx-hotel-disconnect-notice>div { width:420px; max-width:calc(100% - 48px); padding:24px; border:1px solid #4b5053; background:#222729; color:#fff; box-shadow:0 10px 40px #0008; }
.kx-hotel-disconnect-notice h2 { margin:0 0 12px; font:400 22px/1.3 'Roboto Condensed',sans-serif; }
.kx-hotel-disconnect-notice p { margin:0 0 20px; font:400 15px/1.5 'Roboto',sans-serif; }

html.kx-js #header-content [data-kx-hotel-enter][data-kx-hotel-ready="0"][aria-disabled="false"] { cursor:pointer; opacity:1; }

body.kx-hotel-visible {
    overflow: hidden;
}

html.kx-js #header-content [data-kx-hotel-enter][data-kx-hotel-ready="0"] {
    border-color: rgba(206, 213, 217, .20);
    background: rgba(10, 14, 17, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    color: rgba(235, 238, 240, .54);
    cursor: not-allowed;
    opacity: .82;
}

html.kx-js #header-content [data-kx-hotel-enter][data-kx-hotel-ready="0"]:hover,
html.kx-js #header-content [data-kx-hotel-enter][data-kx-hotel-ready="0"]:focus {
    border-color: rgba(206, 213, 217, .20);
    background: rgba(10, 14, 17, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    color: rgba(235, 238, 240, .54);
    text-decoration: none;
}

[data-kx-hotel-enter] {
    transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

#header-content [data-kx-hotel-enter] [data-kx-hotel-enter-spinner] {
    margin: 0 8px 0 0;
}

[data-kx-hotel-enter] [data-kx-hotel-enter-arrows] {
    display: inline-flex;
    gap: 1px;
    margin-left: 4px;
}

#header-content [data-kx-hotel-enter] [data-kx-hotel-enter-arrows] .fa {
    margin: 0;
}

[data-kx-hotel-enter] [data-kx-hotel-enter-arrows][hidden],
[data-kx-hotel-enter] [data-kx-hotel-enter-spinner][hidden] {
    display: none;
}

#kx-global-tools {
    position: fixed;
    z-index: 2147482999;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.kx-ceo-console-open #kx-global-tools {
    visibility: hidden;
    pointer-events: none;
}

#kx-global-tools .kx-ceo-console-button {
    position: static;
    z-index: auto;
    top: auto;
    left: auto;
}

.kx-hotel-switch-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 9px;
    box-sizing: border-box;
    border: 1px solid rgba(81, 203, 255, .52);
    border-radius: 3px;
    background: rgba(12, 29, 38, .94);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .4);
    color: rgba(153, 224, 255, .96);
    cursor: pointer;
    font: 700 10px 'Roboto Condensed', sans-serif;
    letter-spacing: .65px;
    line-height: 1;
    text-transform: uppercase;
}

.kx-hotel-switch-button:hover,
.kx-hotel-switch-button:focus {
    border-color: rgba(164, 235, 255, .92);
    background: rgba(18, 54, 69, .98);
    color: #effbff;
}

.kx-hotel-switch-button[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    #kx-hotel-shell {
        transition: none;
    }
}

/* source: radio-player.css */
/* Compact player shared by the persistent CMS chrome and /cliente. */
.kx-global-tool-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid rgba(206, 213, 217, .20);
    border-radius: 4px;
    background: rgba(10, 14, 17, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    color: rgba(235, 238, 240, .54);
    cursor: pointer;
    font: 700 11px 'Roboto Condensed', sans-serif;
    letter-spacing: .75px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

.kx-global-tool-button:hover,
.kx-global-tool-button:focus-visible {
    border-color: rgba(206, 213, 217, .42);
    background: rgba(34, 40, 44, .62);
    color: rgba(245, 247, 248, .90);
    outline: none;
}

.kx-global-tool-button:active {
    background: rgba(20, 24, 27, .62);
}

.kx-global-tool-button:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.kx-global-tool-button[hidden] {
    display: none;
}

.kx-radio-player {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.kx-radio-toggle {
    max-width: 220px;
}

.kx-radio-toggle:hover,
.kx-radio-toggle:focus-visible {
    border-color: rgba(206, 213, 217, .42);
    background: rgba(34, 40, 44, .62);
    color: rgba(245, 247, 248, .90);
}

.kx-radio-toggle [data-kx-radio-icon] {
    flex: 0 0 auto;
    width: 12px;
    text-align: center;
}

.kx-radio-player[data-kx-radio-state="playing"] .kx-radio-toggle {
    border-color: var(--kx-primary-color-border, rgba(255, 155, 0, .46));
    background: var(--kx-primary-color-faint, rgba(255, 155, 0, .12));
    color: var(--kx-primary-color-light, #ffd28a);
}

.kx-radio-player[data-kx-radio-state="error"] .kx-radio-toggle {
    border-color: rgba(255, 126, 126, .62);
    color: #ffc0c0;
}

.floating-bar .kx-radio-player {
    margin-left: 10px;
}

.floating-bar .kx-radio-toggle {
    max-width: 240px;
}

@media (max-width: 520px) {
    #kx-global-tools .kx-radio-toggle {
        padding: 0 8px;
    }
}