/* ==========================================================================
   Havoo · tema «Vetro Notte» per il client Octane
   Foglio di override caricato DOPO il CSS del client (link in fondo a index.html).
   Cambia solo la grafica di menu, finestre, barre e popup: stanze, avatar e furni
   restano quelli originali. Per toglierlo basta rimuovere il <link> da index.html.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@600;700;800&family=Figtree:wght@400;500;600;700;800&display=swap');

:root {
    /* palette Havoo */
    --hv-night: #0B0F2E;
    --hv-night-2: #141A44;
    --hv-lime: #C6F432;
    --hv-violet: #9B6BFF;
    --hv-sky: #45B6FF;
    --hv-snow: #F4F6FF;
    --hv-coral: #FF5A5F;

    /* vetro */
    --hv-glass: rgba(16, 20, 48, 0.66);
    --hv-glass-strong: rgba(14, 18, 44, 0.84);
    --hv-glass-line: rgba(255, 255, 255, 0.14);
    --hv-glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --hv-glass-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    --hv-blur: blur(16px) saturate(1.4);
    --hv-fill: rgba(255, 255, 255, 0.08);
    --hv-fill-hover: rgba(255, 255, 255, 0.16);

    /* contenuto delle finestre: superficie chiara, testo blu notte */
    --hv-surface: #EEF1FA;
    --hv-surface-2: #E2E7F5;
    --hv-surface-line: #CDD4EA;
    --hv-text: #0B0F2E;
    --hv-text-muted: #5A6080;

    --hv-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23F4F6FF' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
    --hv-icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 9a3 3 0 1 1 4.5 2.6c-.9.5-1.5 1.1-1.5 2.2M12 17.5v.1' fill='none' stroke='%23F4F6FF' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");

    --hv-font: Figtree, Ubuntu, system-ui, sans-serif;
    --hv-font-title: Jost, Figtree, sans-serif;

    /* variabili del client riportate sulla palette Havoo */
    --habbo-blue: #2B3470;
    --habbo-blue-light: #3A4486;
    --habbo-blue-highlight: #4A55A0;
    --habbo-blue-dark: #1B2150;
    --habbo-blue-header: #0B0F2E;
    --habbo-blue-header-border: #2A3270;
    --habbo-frame-border: rgba(255, 255, 255, 0.14);
    --habbo-surface: var(--hv-surface);
    --habbo-surface-warm: var(--hv-surface);
    --habbo-panel: #F7F8FD;
    --habbo-tab: var(--hv-surface-line);
    --habbo-tab-active: var(--hv-surface);
    --habbo-grid: var(--hv-surface-2);
    --habbo-grid-active: #FFFFFF;
    --habbo-select: var(--hv-violet);
    --habbo-select-outer: #B99BFF;
    --habbo-text: var(--hv-text);
    --habbo-text-muted: var(--hv-text-muted);
    --habbo-toolbar: transparent;

    --octane-card-surface: var(--hv-surface);
    --octane-card-surface-raised: #FFFFFF;
    --octane-card-text: var(--hv-text);
    --octane-card-muted: var(--hv-text-muted);
    --octane-card-focus: var(--hv-lime);
    --octane-card-radius: 16px;
}

/* --------------------------------------------------------------------------
   FINESTRE (OctaneCard)
   -------------------------------------------------------------------------- */

.octane-card,
.octane-card-shell:not(.octane-wired),
.octane-card-shell.octane-card-frame-3:not(.octane-wired) {
    border: 1px solid var(--hv-glass-line) !important;
    border-radius: 16px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
    filter: none !important;
    clip-path: none !important;
    overflow: hidden !important;
    image-rendering: auto;
}

/* la cornice pixel «frame-3» viene spenta */
.octane-card-shell.octane-card-frame-3:not(.octane-wired) {
    padding: 34px 0 0 !important;
}
.octane-card-shell.octane-card-frame-3:not(.octane-wired)::before,
.octane-card-shell.octane-card-frame-3:not(.octane-wired)::after {
    display: none !important;
}

/* intestazione */
.octane-card-shell:not(.octane-wired) .octane-card-header-shell,
.octane-card .octane-card-header,
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > .octane-card-header-shell {
    min-height: 34px !important;
    max-height: 34px !important;
    height: 34px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: none !important;
}
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > .octane-card-header-shell {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 40px !important;
}
.octane-card-shell:not(.octane-wired) .octane-card-header-shell::before,
.octane-card .octane-card-header::before {
    display: none !important;
}

.octane-card-shell:not(.octane-wired) .octane-card-header-shell .octane-card-title,
.octane-card-shell:not(.octane-wired) .octane-card-header-shell .octane-card-header-text,
.octane-card .octane-card-header .octane-card-title,
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > .octane-card-header-shell .octane-card-title {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    color: var(--hv-snow) !important;
    font-family: var(--hv-font-title) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    letter-spacing: 0.2px;
    text-shadow: none !important;
}

/* pulsante chiudi: cerchio di vetro */
.octane-card-shell:not(.octane-wired) .octane-card-close-button,
.octane-card-shell:not(.octane-wired) .octane-card-header-close,
.octane-card .octane-card-close-button,
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > .octane-card-header-shell .octane-card-close-button {
    top: 50% !important;
    right: 9px !important;
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--hv-fill) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: translateY(-50%) !important;
    transition: background-color .15s ease;
}
.octane-card-shell:not(.octane-wired) .octane-card-close-button:hover,
.octane-card .octane-card-close-button:hover,
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > .octane-card-header-shell .octane-card-close-button:hover {
    background: rgba(255, 255, 255, 0.24) !important;
}
.octane-card-shell:not(.octane-wired) .octane-card-close-button::before,
.octane-card-shell:not(.octane-wired) .octane-card-close-button::after,
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > .octane-card-header-shell .octane-card-close-button::before,
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > .octane-card-header-shell .octane-card-close-button::after {
    display: block !important;
    width: 10px !important;
    height: 2px !important;
    background: var(--hv-snow) !important;
}

/* schede: pillole, quella attiva bianca */
.octane-card-shell:not(.octane-wired) .octane-card-tabs-shell,
.octane-card-shell:not(.octane-wired) .octane-card-tabs {
    min-height: 34px !important;
    max-height: 34px !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border-bottom: 0 !important;
}
.octane-card-shell:not(.octane-wired) .octane-card-tabs-shell .octane-card-tab-item,
.octane-card-shell:not(.octane-wired) .octane-card-tabs-shell .nav-item,
.octane-card-shell:not(.octane-wired) .octane-card-tabs .nav-item {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    min-width: 0 !important;
    align-items: center !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(244, 246, 255, 0.72) !important;
    font-family: var(--hv-font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    image-rendering: auto;
    transition: background-color .15s ease, color .15s ease;
}
.octane-card-shell:not(.octane-wired) .octane-card-tabs-shell .octane-card-tab-item *,
.octane-card-shell:not(.octane-wired) .octane-card-tabs-shell .nav-item * {
    color: inherit !important;
}
.octane-card-shell:not(.octane-wired) .octane-card-tabs-shell .octane-card-tab-item:hover,
.octane-card-shell:not(.octane-wired) .octane-card-tabs-shell .nav-item:hover {
    background: var(--hv-fill) !important;
    color: var(--hv-snow) !important;
}
.octane-card-shell:not(.octane-wired) .octane-card-tabs-shell .octane-card-tab-item.octane-card-tab-item-active,
.octane-card-shell:not(.octane-wired) .octane-card-tabs-shell .octane-card-tab-item.active,
.octane-card-shell:not(.octane-wired) .octane-card-tabs-shell .nav-item.active {
    background: #FFFFFF !important;
    color: var(--hv-night) !important;
}

/* contenuto: superficie chiara con angoli arrotondati */
.octane-card-shell:not(.octane-wired) .octane-card-content-shell,
.octane-card-shell:not(.octane-wired) .content-area {
    background: var(--hv-surface) !important;
    color: var(--hv-text);
    border-radius: 0 0 15px 15px !important;
}
.octane-card-shell:not(.octane-wired) .octane-card-content-shell :is(p, span, label, li, td, th, input, textarea, select, button, h1, h2, h3, h4, h5, h6) {
    font-family: var(--hv-font);
}

.octane-card-panel,
.octane-card-row {
    background: #FFFFFF !important;
    border-color: var(--hv-surface-line) !important;
    border-radius: 10px !important;
}
.octane-card-row:hover {
    background: #F7F8FD !important;
    border-color: #B9C2E0 !important;
}

/* campi di testo dentro le finestre */
.octane-card-shell:not(.octane-wired) :is(input[type="text"], input[type="search"], input[type="number"], input[type="password"], input:not([type]), textarea, select) {
    border-radius: 10px !important;
    border: 1px solid var(--hv-surface-line) !important;
    background-color: #FFFFFF !important;
    color: var(--hv-text) !important;
    box-shadow: none !important;
}
.octane-card-shell:not(.octane-wired) :is(input, textarea, select):focus {
    outline: 2px solid rgba(155, 107, 255, 0.45) !important;
    outline-offset: 0;
    border-color: var(--hv-violet) !important;
}

/* --------------------------------------------------------------------------
   PULSANTI
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-secondary,
.btn-dark {
    border: 0 !important;
    border-image: none !important;
    border-radius: 10px !important;
    padding: 0.3rem 0.8rem !important;
    font-family: var(--hv-font) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    image-rendering: auto !important;
    transition: filter .15s ease, background-color .15s ease;
}
.btn-primary,
.btn-success {
    background: var(--hv-violet) !important;
    color: #FFFFFF !important;
}
.btn-danger {
    background: var(--hv-coral) !important;
    color: #FFFFFF !important;
}
.btn-warning,
.btn-secondary {
    background: #FFFFFF !important;
    color: var(--hv-night) !important;
    box-shadow: inset 0 0 0 1px var(--hv-surface-line) !important;
}
.btn-dark {
    background: var(--hv-night-2) !important;
    color: var(--hv-snow) !important;
}
:is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary, .btn-dark):hover {
    filter: brightness(1.06);
}
:is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary, .btn-dark):active {
    filter: brightness(0.94);
}
:is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary, .btn-dark):disabled {
    opacity: .5;
}

/* --------------------------------------------------------------------------
   BARRA IN BASSO: tre isole di vetro (sinistra, chat, destra)
   -------------------------------------------------------------------------- */

.octane-toolbar-hobba {
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.tb-nav-clip .tb-open-shell {
    height: 52px !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 1px solid var(--hv-glass-line);
    border-radius: 18px;
    background: var(--hv-glass);
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow);
}
.tb-nav-clip {
    height: 52px !important;
    bottom: 10px !important;
}
.tb-nav-clip:first-of-type,
.tb-nav-clip.left-0 {
    left: 10px !important;
}
.tb-nav-clip.right-0,
.tb-nav-clip.right-3 {
    right: 10px !important;
}

.tb-nav-clip .tb-slot {
    height: 44px !important;
    border-radius: 13px;
    transition: background-color .15s ease;
}
.tb-nav-clip .tb-slot:hover {
    transform: none !important;
    background: var(--hv-fill-hover);
}
.tb-nav-clip .tb-slot:active {
    transform: scale(.96) !important;
}
.tb-divider {
    width: 1px !important;
    height: 28px !important;
    align-self: center !important;
    margin: 0 6px !important;
    background: rgba(255, 255, 255, 0.16) !important;
}
.tb-divider img {
    display: none !important;
}
.tb-collapse {
    height: 52px !important;
    opacity: .7;
}
.tb-collapse:hover {
    opacity: 1;
}

/* chat al centro */
.tb-frame {
    height: 52px !important;
    padding: 0 8px !important;
    border: 1px solid var(--hv-glass-line) !important;
    border-radius: 18px !important;
    background: var(--hv-glass) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
    pointer-events: auto !important;
}

/* barra amici a destra */
.friend-bar {
    gap: 4px !important;
}
.friend-bar .friend-bar-item {
    border: 0 !important;
    border-image: none !important;
    border-radius: 12px !important;
    background: var(--hv-fill) !important;
    box-shadow: none !important;
    color: var(--hv-snow) !important;
    font-family: var(--hv-font) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    transition: background-color .15s ease;
}
.friend-bar .friend-bar-item:hover {
    background: var(--hv-fill-hover) !important;
}
.friend-bar .friend-bar-item.friend-bar-search {
    background: #FFFFFF !important;
    color: var(--hv-night) !important;
}
.friend-bar .friend-bar-item.friend-bar-search * {
    color: var(--hv-night) !important;
    text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   PORTAFOGLIO (in alto a destra)
   -------------------------------------------------------------------------- */

.octane-purse__chrome {
    border: 1px solid var(--hv-glass-line) !important;
    border-image: none !important;
    border-radius: 16px !important;
    background: var(--hv-glass) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
}
.octane-purse,
.octane-purse * {
    font-family: var(--hv-font) !important;
    text-shadow: none !important;
}
.octane-purse .currency-info .currency-text,
.octane-purse .allcurrencypurse .text-white,
.octane-purse .octane-purse-button .octane-purse-button__amount,
.octane-purse .octane-purse-button.currency--1 .octane-purse-button__amount,
.octane-purse .octane-purse-button.currency-0 .octane-purse-button__amount,
.octane-purse .octane-purse-button.currency-5 .octane-purse-button__amount {
    color: var(--hv-snow) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}

.octane-purse__btn--join::before,
.octane-purse__btn--earnings::before {
    border: 0 !important;
    border-image: none !important;
    border-radius: 10px !important;
    background: var(--hv-fill) !important;
}
.octane-purse__btn--join,
.octane-purse__btn--earnings {
    color: var(--hv-snow) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}
.octane-purse__btn--join *,
.octane-purse__btn--earnings * {
    color: var(--hv-snow) !important;
}
.octane-purse__btn--join:hover::before,
.octane-purse__btn--earnings:hover::before {
    background: var(--hv-fill-hover) !important;
}
.octane-purse__btn--help,
.octane-purse__btn--logout,
.octane-purse__btn--settings {
    border: 0 !important;
    border-image: none !important;
    border-radius: 7px !important;
    background: var(--hv-fill) !important;
    color: var(--hv-snow) !important;
    font-weight: 700 !important;
    transition: background-color .15s ease;
}
.octane-purse__btn--help:hover,
.octane-purse__btn--settings:hover {
    background: var(--hv-fill-hover) !important;
}
.octane-purse__btn--logout:hover {
    background: rgba(255, 90, 95, 0.55) !important;
}

/* --------------------------------------------------------------------------
   FINESTRE «NATIVE» (strumenti staff)
   -------------------------------------------------------------------------- */

.native-frame {
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4)) !important;
}
.native-frame__chrome {
    border: 1px solid var(--hv-glass-line) !important;
    border-image: none !important;
    border-radius: 14px !important;
    background:
        linear-gradient(var(--hv-glass-strong), var(--hv-glass-strong)) 0 0 / 100% 30px no-repeat,
        var(--hv-surface) !important;
}
.native-frame__title,
.native-frame__titlebar * {
    color: var(--hv-snow) !important;
    font-family: var(--hv-font) !important;
    font-weight: 600 !important;
}
.native-frame__close {
    width: 20px !important;
    height: 20px !important;
    top: 5px !important;
    border-radius: 50% !important;
    background: var(--hv-fill-hover) !important;
}
.native-frame__close::before,
.native-frame__close::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 9px;
    height: 2px;
    margin: auto;
    border-radius: 2px;
    background: var(--hv-snow);
    transform: rotate(45deg);
}
.native-frame__close::after {
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   VISTA HOTEL (fuori dalle stanze)
   -------------------------------------------------------------------------- */

.hotelview-slot-copy > button {
    height: 30px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    color: var(--hv-night) !important;
    font-family: var(--hv-font) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 6px 16px rgba(11, 15, 46, 0.25) !important;
    transition: filter .15s ease;
}
.hotelview-slot-copy > button:hover {
    filter: brightness(0.95);
}
.hotelview-slot h2,
.hotelview-slot p,
.hotelview-slot strong {
    font-family: var(--hv-font) !important;
}
.hotelview-slot h2 {
    font-family: var(--hv-font-title) !important;
    font-weight: 700 !important;
}
/* la barra ora galleggia: lo sfondo della vista hotel arriva fino in fondo */
.octane-hotel-view {
    height: 100% !important;
}

/* --------------------------------------------------------------------------
   STANZA: chat, strumenti stanza, infostand, menu dell'avatar
   -------------------------------------------------------------------------- */

/* campo chat: pillola dentro l'isola centrale */
.swf-chat-input .swf-chat-input-sizer::before,
.swf-chat-input .swf-chat-flood::before {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-image: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.swf-chat-input .swf-chat-input-field {
    color: var(--hv-snow) !important;
    font-family: var(--hv-font) !important;
    font-size: 14px !important;
    caret-color: var(--hv-lime);
}
.swf-chat-input .swf-chat-input-field::placeholder {
    color: rgba(244, 246, 255, 0.5) !important;
}
.swf-chat-input .swf-chat-style-trigger {
    flex-basis: 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 38px !important;
    margin-right: 6px !important;
    border-radius: 12px;
    background: var(--hv-fill) !important;
    transition: background-color .15s ease;
}
.swf-chat-input .swf-chat-style-trigger:hover {
    background: var(--hv-fill-hover) !important;
}
.swf-chat-input .swf-chat-style-icon {
    left: 22px !important;
}
.swf-chat-input .swf-chat-style-arrow {
    left: 8px !important;
}
.swf-chat-input .swf-chat-style-arrow {
    color: rgba(244, 246, 255, 0.6) !important;
}
.tb-frame {
    width: 520px !important;
}
.swf-chat-style-menu {
    border: 1px solid var(--hv-glass-line) !important;
    border-image: none !important;
    border-radius: 16px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
}

/* strumenti stanza (in basso a sinistra) */
.octane-room-tools-container {
    bottom: 76px !important;
    left: 10px !important;
}
.octane-room-tools-container .octane-room-tools {
    border: 1px solid var(--hv-glass-line);
    border-radius: 16px !important;
    background: var(--hv-glass) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
    color: var(--hv-snow) !important;
    font-family: var(--hv-font);
}
.octane-room-tools-container .room-tools-collapse-toggle {
    border-radius: 8px !important;
    background: var(--hv-fill) !important;
    text-shadow: none !important;
    left: 4px !important;
}
.octane-room-tools-container .room-tool-row {
    color: rgba(244, 246, 255, 0.8) !important;
    border-radius: 8px;
}
.octane-room-tools-container .room-tool-row .room-tool-label {
    color: inherit !important;
    text-decoration: none !important;
    font-family: var(--hv-font) !important;
    font-weight: 600;
    text-shadow: none !important;
}
.octane-room-tools-container .room-tool-row:hover .room-tool-label {
    color: #FFFFFF !important;
}
.octane-room-tools-container .octane-room-tools-info {
    border: 1px solid var(--hv-glass-line);
    border-radius: 14px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
    font-family: var(--hv-font);
}

/* infostand (scheda di avatar, furni, animali) */
.octane-infostand {
    border: 1px solid var(--hv-glass-line) !important;
    border-image: none !important;
    border-radius: 16px !important;
    padding: 10px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
    color: var(--hv-snow) !important;
}
.octane-infostand,
.octane-infostand * {
    font-family: var(--hv-font) !important;
    text-shadow: none !important;
}
.octane-infostand hr,
.octane-infostand .border-bottom,
.octane-infostand [class*="divider"] {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.octane-infostand :is(input, textarea) {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--hv-snow) !important;
}

/* menu dell'avatar e dei furni */
.octane-context-menu:not(.octane-avatar-action-menu--own) {
    padding: 6px !important;
    border: 1px solid var(--hv-glass-line) !important;
    border-radius: 14px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
}
.octane-context-menu,
.octane-context-menu * {
    font-family: var(--hv-font) !important;
    text-shadow: none !important;
}
.octane-context-menu .octane-context-menu-header {
    border-bottom: 0 !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--hv-snow) !important;
}
.octane-context-menu:not(.octane-avatar-action-menu--own) .octane-context-menu-item {
    height: 26px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(244, 246, 255, 0.88) !important;
    transition: background-color .12s ease;
}
.octane-context-menu:not(.octane-avatar-action-menu--own) .octane-context-menu-item + .octane-context-menu-item {
    border-top: 0 !important;
    margin-top: 1px !important;
}
.octane-context-menu:not(.octane-avatar-action-menu--own) .octane-context-menu-item:hover {
    background: var(--hv-fill-hover) !important;
    color: #FFFFFF !important;
}
.octane-context-menu .octane-context-menu-footer {
    border-radius: 8px !important;
    background: var(--hv-fill) !important;
    margin-top: 2px !important;
}

/* menu del proprio avatar (con fumetto) */
.octane-avatar-action-menu--own::before {
    inset: 6px 6px 8px !important;
    border: 1px solid var(--hv-glass-line) !important;
    border-image: none !important;
    border-radius: 14px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
}
.octane-avatar-action-menu--own::after {
    bottom: 2px !important;
    width: 12px !important;
    height: 12px !important;
    background: var(--hv-glass-strong) !important;
    border-right: 1px solid var(--hv-glass-line);
    border-bottom: 1px solid var(--hv-glass-line);
    transform: rotate(45deg);
    z-index: -1;
}
.octane-avatar-action-menu--own .octane-context-menu-header::after {
    background: rgba(255, 255, 255, 0.1) !important;
}
.octane-avatar-action-menu--own .octane-context-menu-header:hover {
    color: var(--hv-lime) !important;
}
.air-avatar-menu-buttons > .octane-context-menu-item::before {
    border: 0 !important;
    border-image: none !important;
    top: 1px !important;
    left: 0 !important;
    width: 103px !important;
    height: 24px !important;
    border-radius: 8px !important;
    background: transparent !important;
    transition: background-color .12s ease;
}
.air-avatar-menu-buttons > .octane-context-menu-item:hover::before {
    background: var(--hv-fill-hover) !important;
}
.air-avatar-menu-buttons > .octane-context-menu-item {
    font-size: 12px !important;
    color: rgba(244, 246, 255, 0.9) !important;
}

/* --------------------------------------------------------------------------
   NAVIGATORE e CREAZIONE STANZA (finestre «air» con cornice propria)
   -------------------------------------------------------------------------- */

.octane-navigator-air,
.octane-room-creator-air {
    --navigator-air-row: #EAEFFC;
    --navigator-air-row-alt: #FFFFFF;
    --navigator-air-surface: var(--hv-surface);
    --navigator-air-name: var(--hv-night);
    font-family: var(--hv-font) !important;
}
.octane-navigator-air__skin,
.octane-room-creator-air__skin {
    border: 1px solid var(--hv-glass-line) !important;
    border-image: none !important;
    border-radius: 16px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
}
.octane-navigator-air__skin::before,
.octane-navigator-air__skin::after,
.octane-room-creator-air__skin::before,
.octane-room-creator-air__skin::after,
.octane-navigator-air__tab-shelf::after,
.octane-room-creator-air__tab-shelf::after {
    content: none !important;
    display: none !important;
}
.octane-navigator-air__tab-shelf,
.octane-room-creator-air__tab-shelf {
    background: transparent !important;
}
.octane-navigator-air__caption *,
.octane-room-creator-air__caption * {
    color: var(--hv-snow) !important;
    font-family: var(--hv-font-title) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}
.octane-navigator-air__close,
.octane-room-creator-air__close {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: var(--hv-icon-x) center / 14px 14px no-repeat, var(--hv-fill-hover) !important;
}
.octane-navigator-air__close:hover,
.octane-room-creator-air__close:hover {
    background: var(--hv-icon-x) center / 14px 14px no-repeat, rgba(255, 255, 255, 0.26) !important;
}
.octane-navigator-air__close.octane-navigator-air__help {
    background: var(--hv-icon-help) center / 14px 14px no-repeat, var(--hv-fill-hover) !important;
}
.octane-navigator-air__close.octane-navigator-air__help:hover {
    background: var(--hv-icon-help) center / 14px 14px no-repeat, rgba(255, 255, 255, 0.26) !important;
}

.octane-navigator-air__tabs {
    gap: 4px !important;
    align-items: center !important;
}
.octane-navigator-air__tab {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(244, 246, 255, 0.72) !important;
    transition: background-color .15s ease;
}
.octane-navigator-air__tab * {
    color: inherit !important;
    font-family: var(--hv-font) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    text-shadow: none !important;
}
.octane-navigator-air__tab:hover {
    background: var(--hv-fill) !important;
    color: var(--hv-snow) !important;
}
.octane-navigator-air__tab.is-active,
.octane-navigator-air__tab.is-active:hover {
    background: #FFFFFF !important;
    color: var(--hv-night) !important;
}

.octane-navigator-air__body {
    border-radius: 12px !important;
    background: var(--hv-surface) !important;
    overflow: hidden;
}
.octane-navigator-air__search-field,
.octane-navigator-air__filter-button,
.octane-room-creator-air :is(input, select, textarea) {
    border: 1px solid var(--hv-surface-line) !important;
    border-image: none !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    color: var(--hv-text) !important;
    font-family: var(--hv-font) !important;
}
.octane-navigator-air__category-header {
    background: transparent !important;
}
.octane-navigator-air__category-header *,
.octane-navigator-air__row * {
    font-family: var(--hv-font) !important;
}
.octane-navigator-air__category-header span {
    color: var(--hv-night) !important;
    font-weight: 700 !important;
}
.octane-navigator-air__row {
    border-radius: 6px !important;
}
.octane-navigator-air__row:hover {
    background: rgba(155, 107, 255, 0.14) !important;
}
.octane-navigator-air__usercount {
    border-radius: 6px !important;
    background: var(--hv-surface-line) !important;
    color: var(--hv-night) !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   BARRE DI SCORRIMENTO sottili e arrotondate
   -------------------------------------------------------------------------- */

html.has-classic-scrollbar *::-webkit-scrollbar,
html.has-classic-scrollbar::-webkit-scrollbar,
html .has-air-scrollbar::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background: transparent !important;
}
html.has-classic-scrollbar *::-webkit-scrollbar-track,
html.has-classic-scrollbar *::-webkit-scrollbar-track:vertical,
html.has-classic-scrollbar *::-webkit-scrollbar-track:horizontal,
html .has-air-scrollbar::-webkit-scrollbar-track,
html .has-air-scrollbar::-webkit-scrollbar-track:vertical {
    background: transparent !important;
    border: 0 !important;
}
html.has-classic-scrollbar *::-webkit-scrollbar-thumb,
html.has-classic-scrollbar *::-webkit-scrollbar-thumb:vertical,
html.has-classic-scrollbar *::-webkit-scrollbar-thumb:horizontal,
html .has-air-scrollbar::-webkit-scrollbar-thumb,
html .has-air-scrollbar::-webkit-scrollbar-thumb:vertical {
    min-height: 28px !important;
    border: 2px solid transparent !important;
    border-image: none !important;
    border-radius: 999px !important;
    background: rgba(90, 96, 128, 0.45) padding-box !important;
    background-clip: padding-box !important;
}
html.has-classic-scrollbar *::-webkit-scrollbar-thumb:hover,
html.has-classic-scrollbar *::-webkit-scrollbar-thumb:vertical:hover,
html .has-air-scrollbar::-webkit-scrollbar-thumb:vertical:hover,
html .has-air-scrollbar::-webkit-scrollbar-thumb:vertical:active {
    background: rgba(90, 96, 128, 0.7) padding-box !important;
}
html.has-classic-scrollbar *::-webkit-scrollbar-button,
html .has-air-scrollbar::-webkit-scrollbar-button,
html .has-air-scrollbar::-webkit-scrollbar-button:single-button:vertical {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
html.has-classic-scrollbar *::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* rifiniture infostand */
.octane-infostand .octane-infostand__rule {
    background: rgba(255, 255, 255, 0.1) !important;
}
.octane-infostand .octane-infostand__badge-slot {
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.octane-infostand .octane-infostand__avatar-well {
    border-radius: 10px !important;
    overflow: hidden;
}
.octane-infostand span[class*="octane-infosta"] {
    border-radius: 6px !important;
    background: var(--hv-fill) !important;
}
.octane-infostand .octane-infostand__close {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--hv-icon-x) center / 12px 12px no-repeat, var(--hv-fill-hover) !important;
}
.octane-infostand .octane-infostand__close:hover {
    background: var(--hv-icon-x) center / 12px 12px no-repeat, rgba(255, 255, 255, 0.26) !important;
}

/* finestre «frame-3»: il riempimento chiaro passa ai blocchi di contenuto */
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > :not(.octane-card-header-shell):not(.octane-card-tabs-shell):not(.octane-card-resize-handle) {
    background-color: var(--hv-surface) !important;
}
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > :last-child:not(.octane-card-resize-handle),
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > :nth-last-child(2):has(+ .octane-card-resize-handle) {
    border-radius: 0 0 15px 15px;
}

/* --------------------------------------------------------------------------
   INVENTARIO
   -------------------------------------------------------------------------- */

.octane-inventory-window {
    --inv-surface: var(--hv-surface);
    --inv-beige: var(--hv-surface-2);
    --inv-line: var(--hv-surface-line);
    --inv-accent: var(--hv-violet);
    --inv-empty-title: var(--hv-night);
    --inv-place: #FFFFFF;
    --inv-border: var(--hv-surface-line);
}
.octane-inventory-window .octane-inventory-tabs-shell {
    flex: 0 0 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    align-items: center !important;
    padding: 0 10px !important;
    gap: 3px !important;
}
.octane-inventory-window .octane-inventory-tabs-shell .octane-card-tab-item {
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 28px !important;
    align-items: center !important;
}

/* --------------------------------------------------------------------------
   SKIN: pulsanti, caselle e cornici vettoriali al posto delle immagini pixel
   (generato da genera-skin.mjs)
   -------------------------------------------------------------------------- */
:root {
    --habbo-skin-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='3' fill='%23FFFFFF' stroke='%23CDD4EA'/%3E%3C/svg%3E");
    --habbo-skin-button-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='3' fill='%23F3F5FC' stroke='%23B9C2E0'/%3E%3C/svg%3E");
    --habbo-skin-button-pressed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='3' fill='%23E2E7F5' stroke='%23B9C2E0'/%3E%3C/svg%3E");
    --habbo-skin-button-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='3' fill='%23EEF1FA' stroke='%23DDE2F0'/%3E%3C/svg%3E");
    --habbo-skin-shiny: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23FFFFFF' stroke='%23CDD4EA'/%3E%3C/svg%3E");
    --habbo-skin-shiny-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23F3F5FC' stroke='%23B9C2E0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-pressed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23E2E7F5' stroke='%23B9C2E0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23EEF1FA' stroke='%23DDE2F0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-thick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23FFFFFF' stroke='%23CDD4EA'/%3E%3C/svg%3E");
    --habbo-skin-shiny-thick-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23F3F5FC' stroke='%23B9C2E0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-thick-pressed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23E2E7F5' stroke='%23B9C2E0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-thick-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23EEF1FA' stroke='%23DDE2F0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-large: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='6' fill='%23FFFFFF' stroke='%23CDD4EA'/%3E%3C/svg%3E");
    --habbo-skin-shiny-large-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='6' fill='%23F3F5FC' stroke='%23B9C2E0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-large-pressed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='6' fill='%23E2E7F5' stroke='%23B9C2E0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-large-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='6' fill='%23EEF1FA' stroke='%23DDE2F0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%239B6BFF' stroke='%238A57F5'/%3E%3C/svg%3E");
    --habbo-skin-shiny-green-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23AA80FF' stroke='%239B6BFF'/%3E%3C/svg%3E");
    --habbo-skin-shiny-green-pressed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%238656F0' stroke='%237646E0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-green-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23C9B5F5' stroke='%23C9B5F5'/%3E%3C/svg%3E");
    --habbo-skin-shiny-thick-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%239B6BFF' stroke='%238A57F5'/%3E%3C/svg%3E");
    --habbo-skin-shiny-thick-green-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23AA80FF' stroke='%239B6BFF'/%3E%3C/svg%3E");
    --habbo-skin-shiny-thick-green-pressed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%238656F0' stroke='%237646E0'/%3E%3C/svg%3E");
    --habbo-skin-shiny-thick-green-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23C9B5F5' stroke='%23C9B5F5'/%3E%3C/svg%3E");
    --habbo-skin-shiny-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23FF5A5F' stroke='%23F04A50'/%3E%3C/svg%3E");
    --habbo-skin-shiny-red-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23FF7176' stroke='%23FF5A5F'/%3E%3C/svg%3E");
    --habbo-skin-shiny-red-pressed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23E9474C' stroke='%23D93A40'/%3E%3C/svg%3E");
    --habbo-skin-shiny-red-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='5' fill='%23FFB3B5' stroke='%23FFB3B5'/%3E%3C/svg%3E");
    --habbo-skin-border-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='6' fill='%23FFFFFF' stroke='%23CDD4EA'/%3E%3C/svg%3E");
    --habbo-skin-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='2.5' y='2.5' width='15' height='15' rx='4.5' fill='%23FFFFFF' stroke='%23B9C2E0'/%3E%3C/svg%3E");
    --habbo-skin-checkbox-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='2' y='2' width='16' height='16' rx='5' fill='%239B6BFF'/%3E%3Cpath d='M6 10.2l2.7 2.6L14 7.4' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --habbo-skin-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='5.4' fill='%23FFFFFF' stroke='%23B9C2E0'/%3E%3C/svg%3E");
    --habbo-skin-radio-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='5.6' fill='%239B6BFF'/%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
.octane-inventory-window .octane-inventory-tabs-shell .octane-card-tab-item {
    padding: 0 8px !important;
    font-size: 11.5px !important;
}
.octane-inventory-window .octane-inventory-tabs-shell .octane-card-tab-item:first-child {
    flex-shrink: 0 !important;
}

/* barre di scorrimento: senza frecce anche dove il client usa selettori più specifici */
html.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:vertical:decrement,
html.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:vertical:increment,
html.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:horizontal:decrement,
html.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:horizontal:increment,
html .has-air-scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement,
html .has-air-scrollbar::-webkit-scrollbar-button:single-button:vertical:increment {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* --------------------------------------------------------------------------
   CATALOGO
   -------------------------------------------------------------------------- */

.octane-catalog-window {
    --catalog-standard-bg: var(--hv-surface);
    --catalog-standard-panel: #FFFFFF;
    --catalog-standard-panel-2: var(--hv-surface-2);
    --catalog-standard-border: var(--hv-surface-line);
    --catalog-standard-border-dark: #B9C2E0;
    --catalog-standard-text: var(--hv-text);
    --catalog-standard-muted: var(--hv-text-muted);
    --catalog-standard-blue: var(--hv-violet);
    --catalog-standard-blue-dark: var(--hv-night-2);
    --catalog-standard-blue-border: var(--hv-night-2);
    --catalog-standard-select: rgba(155, 107, 255, 0.18);
    --catalog-standard-select-outer: rgba(155, 107, 255, 0.18);
}
.octane-catalog-window .octane-catalog-standard-header {
    margin: 0 !important;
    border: 0 !important;
    background: linear-gradient(120deg, #141A44 0%, #231C5C 60%, #2B1F6E 100%) !important;
}
.octane-catalog-window .octane-catalog-standard-header-title,
.octane-catalog-window .octane-catalog-standard-header-copy {
    font-family: var(--hv-font) !important;
    text-shadow: none !important;
}
.octane-catalog-window .octane-catalog-standard-header-title {
    font-family: var(--hv-font-title) !important;
    font-weight: 700 !important;
}
.octane-catalog-window .octane-catalog-search-shell {
    border: 0 !important;
    background: transparent !important;
}
.octane-catalog-window .octane-catalog-navigation-item::before {
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(155, 107, 255, 0.16) !important;
}
.octane-catalog-window .octane-catalog-navigation-item.is-active .octane-catalog-navigation-label {
    color: #5B34C9 !important;
    font-weight: 700 !important;
}
.octane-catalog-window .octane-catalog-navigation-label {
    font-family: var(--hv-font) !important;
}

/* pannelli bianchi dentro le finestre */
.octane-card-shell:not(.octane-wired) .bg-white {
    background: #FFFFFF !important;
}
.octane-card-shell:not(.octane-wired) .rounded.border-2,
.octane-card-shell:not(.octane-wired) .rounded.border {
    border-width: 1px !important;
    border-radius: 10px !important;
}
/* un po' d'aria in fondo alle finestre «frame-3» */
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > .octane-card-content-shell:last-child,
.octane-card-shell.octane-card-frame-3:not(.octane-wired) > .octane-card-content-shell:nth-last-child(2):has(+ .octane-card-resize-handle) {
    padding-bottom: 10px !important;
}

/* pulsante Acquista: l'unico in lime, come da brand */
.octane-catalog-window .octane-catalog-standard-buy-button:not(:disabled):not(.pointer-events-none) {
    border-color: transparent !important;
    border-image: none !important;
    border-radius: 10px !important;
    background: var(--hv-lime) !important;
    color: var(--hv-night) !important;
    font-family: var(--hv-font) !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    box-shadow: 0 6px 16px rgba(198, 244, 50, 0.25) !important;
}
.octane-catalog-window .octane-catalog-standard-buy-button:not(:disabled):hover {
    filter: brightness(1.05);
}
.octane-catalog-window .octane-catalog-standard-buy-button * {
    color: inherit !important;
    text-shadow: none !important;
}
.octane-catalog-window .octane-catalog-standard-gift-button {
    font-family: var(--hv-font) !important;
    text-shadow: none !important;
}

/* menu del portafoglio e valuta stagionale */
.octane-purse-menu,
.octane-purse__other .octane-purse-seasonal-currency {
    border: 1px solid var(--hv-glass-line) !important;
    border-image: none !important;
    background: var(--hv-glass) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
}
.octane-purse-menu {
    margin-top: 6px !important;
    padding: 5px !important;
    border-radius: 14px !important;
}
.octane-purse__other .octane-purse-seasonal-currency {
    border-radius: 12px !important;
    padding: 6px 7px !important;
    height: 30px !important;
}
.octane-purse-menu__item {
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-weight: 600 !important;
}
.octane-purse-menu__item:hover {
    background: var(--hv-fill-hover) !important;
}

/* --------------------------------------------------------------------------
   IMPOSTAZIONI (finestre «air» con testo chiaro su vetro scuro)
   -------------------------------------------------------------------------- */

.air-settings-window__chrome {
    border: 1px solid var(--hv-glass-line) !important;
    border-image: none !important;
    border-radius: 16px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
}
.user-settings-window.air-settings-window {
    padding: 10px 12px 12px !important;
    filter: none !important;
    color: var(--hv-snow) !important;
}
.user-settings-window.air-settings-window,
.user-settings-window.air-settings-window * {
    font-family: var(--hv-font) !important;
    text-shadow: none !important;
}
.air-settings-window__title {
    height: 22px !important;
    margin-bottom: 4px !important;
    padding: 0 2px !important;
    font-family: var(--hv-font-title) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
}
.air-settings-button {
    height: 26px !important;
    min-height: 26px !important;
    flex-basis: 26px !important;
    font-weight: 600 !important;
}
.air-settings-menu__items {
    gap: 4px !important;
}
.user-settings-window.air-settings-window hr,
.user-settings-window.air-settings-window [class*="divider"] {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* notifiche di menzioni e regali club */
.octane-mention-notification__border,
.octane-club-gift-notification__border {
    border: 1px solid var(--hv-glass-line) !important;
    border-image: none !important;
    border-radius: 14px !important;
    background: var(--hv-glass-strong) !important;
}

/* --------------------------------------------------------------------------
   CAMBIA LOOK
   -------------------------------------------------------------------------- */

.octane-avatar-editor-nameplate {
    border-radius: 12px !important;
    background: linear-gradient(120deg, #141A44 0%, #231C5C 60%, #2B1F6E 100%) !important;
    border: 0 !important;
}
.octane-avatar-editor-nameplate span {
    font-family: var(--hv-font-title) !important;
    text-shadow: none !important;
}
.octane-avatar-editor-wardrobe {
    border-radius: 12px !important;
    background: var(--hv-surface-2) !important;
    border: 0 !important;
}
.octane-avatar-editor-wardrobe-title {
    font-family: var(--hv-font) !important;
    font-weight: 700 !important;
    color: var(--hv-text) !important;
}
.octane-avatar-editor-wardrobe-slots {
    border-radius: 10px !important;
    background: #FFFFFF !important;
    border-color: var(--hv-surface-line) !important;
}
.octane-avatar-editor .figure-preview-container,
.figure-preview-container {
    border-radius: 12px !important;
    background: radial-gradient(circle at 50% 75%, #2B3470 0%, #141A44 75%) !important;
}

/* superfici beige/grigie della skin AIR riportate sui toni Havoo (generato da genera-superfici.mjs) */
.octane-avatar-editor-stage,
.octane-avatar-editor-wardrobe,
.octane-club-membership-header,
.octane-club-offer,
.octane-club-remaining,
.habbicon-purchase-body,
.octane-forum__client::before,
.octane-reward-track-admin-modal,
.octane-chooser .octane-card-content-shell,
.octane-room-info__content {
    background-color: var(--hv-surface) !important;
}
.octane-avatar-editor-wardrobe-slots,
.layout-grid-item,
.octane-room-creator-air__thumbnail-tiles {
    background-color: var(--hv-surface-2) !important;
}
.octane-catalog-recycler-slot.is-filled,
.octane-catalog-recycler-prize-level,
.octane-catalog-information-copy,
.octane-catalog-admin-form-toggle,
.octane-catalog-search-shell,
.octane-catalog-admin-section-head,
.octane-catalog-admin-tree,
.octane-catalog-admin-offers-list,
.octane-catalog-admin-publish-changes-list,
.octane-groups-tab-header {
    background-color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   LISTA AMICI (stile classico ridisegnato)
   -------------------------------------------------------------------------- */

.habbo-friend-list {
    border: 1px solid var(--hv-glass-line) !important;
    border-radius: 16px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
    font: 500 11px/1 var(--hv-font) !important;
}
.habbo-friend-list * {
    font-family: var(--hv-font) !important;
    text-shadow: none !important;
}
.habbo-friend-list .hfl-titlebar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--hv-snow) !important;
}
.habbo-friend-list .hfl-titlebar,
.habbo-friend-list .hfl-titlebar * {
    font-family: var(--hv-font-title) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.habbo-friend-list .hfl-titlebar-grip {
    display: none !important;
}
.habbo-friend-list .hfl-close {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: var(--hv-icon-x) center / 11px 11px no-repeat, var(--hv-fill-hover) !important;
}
.habbo-friend-list .hfl-category,
.habbo-friend-list .hfl-search-strip,
.habbo-friend-list .hfl-bottom {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--hv-snow) !important;
}
.habbo-friend-list .hfl-category *,
.habbo-friend-list .hfl-search-strip * {
    color: var(--hv-snow) !important;
}
.habbo-friend-list .hfl-content {
    margin: 0 6px;
    border-radius: 10px 10px 0 0;
    background: var(--hv-surface) !important;
}
.habbo-friend-list .hfl-section-header {
    border-radius: 7px !important;
    background: var(--hv-surface-2) !important;
    color: var(--hv-text) !important;
    font-weight: 700 !important;
}
.habbo-friend-list .hfl-list {
    background: transparent !important;
}
.habbo-friend-list .hfl-footer {
    margin: 0 6px;
    border-radius: 0 0 10px 10px;
    background: var(--hv-surface) !important;
}
.habbo-friend-list .hfl-footer-border {
    background: transparent !important;
    border-color: transparent !important;
}
.habbo-friend-list .hfl-footer-button {
    border: 1px solid var(--hv-surface-line) !important;
    border-radius: 8px !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    box-shadow: none !important;
}
.habbo-friend-list .hfl-footer-button > * {
    filter: none;
}

/* --------------------------------------------------------------------------
   MESSAGGI (messenger): finestra chiara arrotondata
   -------------------------------------------------------------------------- */

.messenger-window {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 16px !important;
    background: var(--hv-surface) !important;
    box-shadow: var(--hv-glass-shadow) !important;
}
.messenger-window,
.messenger-window * {
    font-family: var(--hv-font) !important;
}
.messenger-window .messenger-thread-header,
.messenger-window .chat-messages,
.messenger-window .messenger-input-row {
    background: var(--hv-surface) !important;
}
.messenger-window .messenger-thread-header {
    border-bottom: 1px solid var(--hv-surface-line) !important;
}
.messenger-window .messenger-avatar-tab.active {
    border-radius: 10px !important;
    background: #FFFFFF !important;
}
.messenger-window .messenger-input-row input {
    height: 32px !important;
    border-color: var(--hv-surface-line) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    color: var(--hv-text) !important;
    font-size: 12.5px !important;
}
.messenger-window .messenger-input-row input:focus {
    border-color: var(--hv-violet) !important;
}
.messenger-window .messenger-minimize,
.messenger-window .messenger-btn.close-btn {
    border-radius: 50% !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' fill='none' stroke='%230B0F2E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px no-repeat, rgba(11, 15, 46, 0.08) !important;
}
.messenger-window .messenger-btn.close-btn {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%230B0F2E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat, rgba(11, 15, 46, 0.08) !important;
}

/* menu personale (testa nella barra): sopra l'isola della chat */
.tb-nav-clip {
    z-index: 72 !important;
}
.tbme-panel {
    border: 1px solid var(--hv-glass-line) !important;
    border-radius: 16px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
}
.tbme-panel * {
    font-family: var(--hv-font) !important;
    text-shadow: none !important;
}
.tb-nav-clip .absolute.bottom-\[calc\(100\%\+8px\)\] > div {
    padding: 6px 8px !important;
    border: 1px solid var(--hv-glass-line) !important;
    border-radius: 16px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
}

/* --------------------------------------------------------------------------
   PROFILO UTENTE
   -------------------------------------------------------------------------- */

.octane-extended-profile__summary-bar,
.octane-extended-profile-window__body {
    border-color: var(--hv-surface-line) !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
}
.octane-extended-profile-window__panel {
    border-color: var(--hv-surface-line) !important;
    border-radius: 10px !important;
    background: var(--hv-surface-2) !important;
}
.octane-extended-profile__relationship-box {
    border-color: var(--hv-surface-line) !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
}
.octane-extended-profile__separator {
    background: var(--hv-surface-line) !important;
}
.octane-card-shell:not(.octane-wired) [class*="octane-extended-profile"] a,
.octane-card-shell:not(.octane-wired) [class*="octane-extended-profile"] .underline {
    color: #5B34C9 !important;
}

/* notifiche a fumetto (in alto a destra) */
.octane-notification-bubble,
.octane-swf-notification-bubble {
    border: 1px solid var(--hv-glass-line) !important;
    border-image: none !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
    background: var(--hv-glass-strong) !important;
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow) !important;
}
.octane-notification-bubble::before,
.octane-notification-bubble::after,
.octane-swf-notification-bubble::before,
.octane-swf-notification-bubble::after {
    border-image: none !important;
    background: none !important;
}
.octane-notification-bubble *,
.octane-swf-notification-bubble * {
    font-family: var(--hv-font) !important;
    text-shadow: none !important;
    color: var(--hv-snow) !important;
}

/* icone Havoo di Monete e Gemme nel portafoglio: il client usa icone AIR interne
   per i tipi -1 e 5, qui le sostituiamo con quelle pubblicate su assets.havoo.net */
.octane-purse .octane-purse-button.currency--1 .octane-purse-air-currency,
.octane-purse .octane-purse-button.currency-5 .octane-purse-air-currency {
    object-position: -100px -100px !important;
    background-position: center !important;
    background-size: 15px 15px !important;
    background-repeat: no-repeat !important;
}
.octane-purse .octane-purse-button.currency--1 .octane-purse-air-currency {
    background-image: url("https://assets.havoo.net/assets/images/wallet/-1.png?v=2") !important;
}
.octane-purse .octane-purse-button.currency-5 .octane-purse-air-currency {
    background-image: url("https://assets.havoo.net/assets/images/wallet/5.png?v=2") !important;
}

/* Biglietti (tipo 101) dentro il riquadro del portafoglio, nel terzo posto lasciato
   libero dai Ducket: il client lo disegnerebbe come striscia «stagionale» separata */
.octane-purse-container {
    position: relative !important;
}
.octane-purse-container > .octane-purse__other {
    position: absolute !important;
    top: 47px !important;
    left: 7px !important;
    z-index: 2;
    width: 52px !important;
    max-width: 52px !important;
    margin: 0 !important;
    gap: 0 !important;
}
.octane-purse-container > .octane-purse__other .octane-purse-seasonal-currency {
    width: 52px !important;
    height: 17px !important;
    min-height: 17px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.octane-purse-container > .octane-purse__other .seasonal-row {
    display: flex !important;
    width: 52px !important;
    height: 17px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    padding: 0 1px 0 0 !important;
}
.octane-purse-container > .octane-purse__other .seasonal-text {
    display: none !important;
}
.octane-purse-container > .octane-purse__other .seasonal-amount {
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    color: var(--hv-snow) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
    font-variant-numeric: tabular-nums;
}
.octane-purse-container > .octane-purse__other .octane-seasonal-box {
    position: static !important;
    width: 15px !important;
    height: 15px !important;
    padding: 0 !important;
    flex: 0 0 15px;
}
.octane-purse-container > .octane-purse__other .seasonal-image {
    width: 15px !important;
    height: 15px !important;
    image-rendering: var(--octane-pixel-art, pixelated);
}

/* ordine nel portafoglio: Monete, poi Gemme, poi Biglietti (il client mette prima le Gemme) */
.octane-purse .octane-purse__currencies > * {
    height: 19px !important;
}
.octane-purse .octane-purse__currencies > :has(.currency--1),
.octane-purse .octane-purse__currencies > .currency--1 {
    order: -1;
}

/* numeri interi nel portafoglio (il client accorcia da 1.000 in su, es. «5k»):
   la colonna delle valute si allarga di 34px e al posto del numero corto si mostra
   quello intero, che il client tiene già pronto nel suggerimento al passaggio del mouse */
.octane-purse,
.octane-purse__chrome,
.octane-purse__body {
    width: 264px !important;
    max-width: 264px !important;
}
.octane-purse .octane-purse__currencies,
.octane-purse .octane-purse__currencies > *,
.octane-purse .octane-purse__currencies .octane-purse-button,
.octane-purse-container > .octane-purse__other,
.octane-purse-container > .octane-purse__other .octane-purse-seasonal-currency,
.octane-purse-container > .octane-purse__other .seasonal-row {
    width: 86px !important;
    max-width: 86px !important;
}
.octane-purse .octane-purse__col--primary {
    left: 98px !important;
}
.octane-purse .octane-purse__divider {
    left: 203px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}
.octane-purse .octane-purse__col--actions {
    left: 208px !important;
}
.octane-purse .octane-purse__currencies > .group .octane-purse-button__amount {
    visibility: hidden !important;
}
.octane-purse .octane-purse__currencies > .group > [role="tooltip"] {
    top: 0 !important;
    right: 18px !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--hv-snow) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 19px !important;
    font-variant-numeric: tabular-nums;
    z-index: 1;
}
.octane-purse .octane-purse__currencies > .group > [role="tooltip"] {
    translate: none !important;
}

/* ==========================================================================
   PORTAFOGLIO · disposizione ariosa (sostituisce le misure AIR 230x77)
   300x96, margine di 10px dai bordi, righe da 22px, colonne distanziate.
   ========================================================================== */
.octane-purse-container {
    width: auto !important;
    margin: 10px 10px 0 0 !important;
}
.octane-purse,
.octane-purse__chrome,
.octane-purse__body {
    width: 300px !important;
    max-width: 300px !important;
    height: 96px !important;
}
.octane-purse .octane-purse__currencies {
    left: 12px !important;
    top: 14px !important;
    width: 104px !important;
    height: 66px !important;
}
.octane-purse .octane-purse__currencies > *,
.octane-purse .octane-purse__currencies > *:last-child {
    width: 104px !important;
    height: 22px !important;
}
.octane-purse .octane-purse__currencies .octane-purse-button {
    width: 104px !important;
    max-width: 104px !important;
    gap: 6px !important;
}
.octane-purse .octane-purse__currencies .octane-purse-air-currency,
.octane-purse .octane-purse__currencies .octane-currency-icon,
.octane-purse .octane-purse__currencies img {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    background-size: 16px 16px !important;
}
.octane-purse .octane-purse__currencies .octane-purse-button__amount,
.octane-purse .octane-purse__currencies > .group > [role="tooltip"] {
    font-size: 12.5px !important;
    line-height: 22px !important;
}
.octane-purse .octane-purse__currencies > .group > [role="tooltip"] {
    right: 22px !important;
}

/* Biglietti: terza riga */
.octane-purse-container > .octane-purse__other {
    top: 58px !important;
    left: 12px !important;
}
.octane-purse-container > .octane-purse__other,
.octane-purse-container > .octane-purse__other .octane-purse-seasonal-currency,
.octane-purse-container > .octane-purse__other .seasonal-row {
    width: 104px !important;
    max-width: 104px !important;
    height: 22px !important;
    min-height: 22px !important;
}
.octane-purse-container > .octane-purse__other .seasonal-row {
    gap: 6px !important;
}
.octane-purse-container > .octane-purse__other .seasonal-amount {
    font-size: 12.5px !important;
    line-height: 22px !important;
}
.octane-purse-container > .octane-purse__other .octane-seasonal-box,
.octane-purse-container > .octane-purse__other .seasonal-image {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* colonna Club / Guadagni */
.octane-purse .octane-purse__col--primary {
    left: 128px !important;
    top: 12px !important;
    width: 108px !important;
    height: 72px !important;
    gap: 8px !important;
}
.octane-purse__btn--join,
.octane-purse__btn--earnings {
    width: 108px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    padding: 0 10px 0 8px !important;
    gap: 6px !important;
}

/* separatore e pulsanti Aiuto / Esci / Impostazioni */
.octane-purse .octane-purse__divider {
    left: 246px !important;
    top: 16px !important;
    height: 64px !important;
}
.octane-purse .octane-purse__col--actions {
    left: 254px !important;
    top: 12px !important;
    width: 36px !important;
    height: 72px !important;
    gap: 4px !important;
}
.octane-purse__btn--help,
.octane-purse__btn--logout,
.octane-purse__btn--settings {
    width: 36px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    font-size: 10.5px !important;
}

/* menu e notifiche sotto il portafoglio: allineati al nuovo bordo */
.octane-purse-menu {
    margin-right: 0 !important;
}
.octane-rightside-notifications {
    margin: 6px 10px 0 0 !important;
}
.octane-purse .octane-purse__currencies > *,
.octane-purse .octane-purse__currencies > *:last-child {
    max-width: 104px !important;
}

/* Aiuto / Esci / Impostazioni: colonna di vetro separata dal portafoglio, solo icone */
.octane-purse__chrome {
    width: 246px !important;
    max-width: 246px !important;
}
.octane-purse .octane-purse__divider {
    display: none !important;
}
.octane-purse .octane-purse__col--actions {
    left: 254px !important;
    top: 0 !important;
    width: 42px !important;
    height: 96px !important;
    padding: 6px !important;
    gap: 4px !important;
    justify-content: space-between;
    border: 1px solid var(--hv-glass-line);
    border-radius: 16px;
    background: var(--hv-glass);
    -webkit-backdrop-filter: var(--hv-blur);
    backdrop-filter: var(--hv-blur);
    box-shadow: var(--hv-glass-hi), var(--hv-glass-shadow);
    box-sizing: border-box;
}
.octane-purse__btn--help,
.octane-purse__btn--logout,
.octane-purse__btn--settings {
    width: 28px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    margin: 0 auto !important;
    font-size: 0 !important;
    color: transparent !important;
    border-radius: 9px !important;
    background-position: center !important;
    background-size: 15px 15px !important;
    background-repeat: no-repeat !important;
}
.octane-purse__btn--help *,
.octane-purse__btn--logout *,
.octane-purse__btn--settings * {
    display: none !important;
}
.octane-purse__btn--help {
    background-image: var(--hv-icon-help) !important;
}
.octane-purse__btn--settings {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F6FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E") !important;
}
.octane-purse__btn--logout {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A8D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.3 7.3a8 8 0 1 0 11.4 0'/%3E%3C/svg%3E") !important;
}
/* Esci in fondo: Aiuto, Impostazioni, Esci */
.octane-purse__btn--logout {
    order: 3;
}

/* ripensamento: Aiuto / Impostazioni / Esci tornano dentro il portafoglio (con le icone) */
.octane-purse__chrome {
    width: 300px !important;
    max-width: 300px !important;
}
.octane-purse .octane-purse__divider {
    display: block !important;
    left: 246px !important;
    top: 16px !important;
    height: 64px !important;
}
.octane-purse .octane-purse__col--actions {
    left: 254px !important;
    top: 12px !important;
    width: 36px !important;
    height: 72px !important;
    padding: 0 !important;
    gap: 4px !important;
    justify-content: space-between;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
.octane-purse__btn--help,
.octane-purse__btn--logout,
.octane-purse__btn--settings {
    width: 36px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    border-radius: 8px !important;
    background-color: var(--hv-fill) !important;
}
.octane-purse__btn--help:hover,
.octane-purse__btn--settings:hover {
    background-color: var(--hv-fill-hover) !important;
}
.octane-purse__btn--logout:hover {
    background-color: rgba(255, 90, 95, 0.4) !important;
}

/* --------------------------------------------------------------------------
   HC TOLTO: il vecchio pulsante «Join» diventa «Pass» (Pass battaglia, in arrivo).
   Non è cliccabile finché il pass non esiste: poi si collega nel codice.
   -------------------------------------------------------------------------- */
.octane-purse__btn--join {
    pointer-events: none !important;
    cursor: default !important;
}
.octane-purse__btn--join > img {
    display: none !important;
}
.octane-purse__btn--join > span {
    display: flex !important;
    align-items: center;
    gap: 7px;
    font-size: 0 !important;
}
.octane-purse__btn--join > span::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.3l-5.8 3.1 1.1-6.5L2.6 9.3l6.5-.9z' fill='%23C6F432'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.octane-purse__btn--join > span::after {
    content: "Pass";
    color: var(--hv-snow);
    font-size: 12.5px;
    font-weight: 700;
}
.octane-purse__btn--join::after {
    content: "presto";
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 7px;
    translate: 0 -50%;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--hv-lime);
    color: var(--hv-night);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.2;
    text-transform: uppercase;
}
.octane-purse__btn--join::after {
    top: -6px !important;
    right: -5px !important;
    translate: none !important;
    padding: 1px 5px !important;
    font-size: 8px !important;
    box-shadow: 0 2px 6px rgba(11, 15, 46, 0.45);
}
.octane-purse .octane-purse__col--primary,
.octane-purse__btn--join {
    overflow: visible !important;
}