﻿/* ==============================
           CSS VARIABLES & GLOBALS
           ============================== */
        :root {
            --bg: #05070b;
            --bg-soft: #0d1016;
            --surface: rgba(15, 18, 25, 0.9);
            --surface-strong: rgba(10, 12, 18, 0.96);
            --panel: linear-gradient(180deg, rgba(19, 23, 31, 0.94), rgba(10, 12, 18, 0.96));
            --border: rgba(255, 255, 255, 0.09);
            --text: #f7f2e8;
            --muted: #c1bac0;
            --wa-bg: #0b141a;
            --wa-sidebar: #111b21;
            --wa-header: #202c33;
            --wa-hover: #2a3942;
            --wa-msg-in: #202c33;
            --wa-msg-out: #005c4b;
            --wa-green: #00a884;
            --wa-text: #e9edef;
            --wa-muted: #8696a0;
            --gold-soft: #f4d48c;
            --gold-bright: #fff2b9;
            --copper: #ff8f52;
            --cyan: #7ad9ff;
            --green: #9ee6b8;
            --danger: #ef5350;
            --shadow-md: 0 20px 48px rgba(0, 0, 0, 0.26);
            --radius-xl: 34px;
            --container: min(1180px, calc(100% - 32px));
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        .page-hero,
        .section[id],
        main.view {
            scroll-margin-top: min(132px, 22vh);
        }

        /* Salta navigazione rapida */
        .skip-link {
            position: fixed;
            top: -120px;
            left: max(14px, env(safe-area-inset-left));
            z-index: 10001;
            padding: 11px 18px;
            border-radius: 14px;
            border: 1px solid rgba(244, 212, 140, 0.22);
            background: rgba(10, 12, 18, 0.97);
            color: var(--text);
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            transition: top 0.2s ease, box-shadow 0.2s ease;
            box-shadow: var(--shadow-md);
        }

        .skip-link:focus {
            top: max(14px, env(safe-area-inset-top));
        }

        /* Rispetto accessibilitÃ : meno animazioni quando richiesto dal sistema */
        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
            .cursor-glow {
                display: none !important;
            }
            .reveal {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
            }
            .scrolling-text {
                animation: none !important;
            }
            .view {
                animation: none !important;
                opacity: 1 !important;
            }
        }

        /* Focus area principale da skip-link (outline gentile, non nel tab flow finchÃ© focus) */
        #main-content:focus-visible {
            outline: none;
        }

        body {
            margin: 0;
            color: var(--text);
            font-family: "Manrope", sans-serif;
            background: linear-gradient(180deg, rgba(3,5,8,0.48) 0%, rgba(6,8,13,0.52) 34%, rgba(4,5,9,0.56) 100%), url('../images/wallpaper sitoweb.png') center/cover fixed no-repeat;
            background-color: var(--bg); /* Fallback */
            overflow-x: hidden;
            min-height: 100vh;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -2;
            pointer-events: none;
            opacity: 0.08;
            mix-blend-mode: soft-light;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23noise)'/%3E%3C/svg%3E");
        }

        body.preloading, 
        body.modal-open, 
        body.premium-locked {
            overflow: hidden;
        }

        /* AUTH LOCK: prima del login il sito sotto non deve vedersi */
        body.auth-locked .site-header,
        body.auth-locked #chat-modal,
        body.auth-resolving #chat-modal,
        body.auth-locked #main-content,
        body.auth-locked .site-footer,
        body.auth-locked .chat-launcher,
        body.auth-locked .bs-lang-fab,
        body.auth-locked .site-system-banner,
        body.auth-locked #live-toasts {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        body.auth-locked .auth-gate {
            background: radial-gradient(circle at 50% 38%, rgba(18, 25, 34, .58), rgba(0, 0, 0, .96) 62%, #000 100%);
            backdrop-filter: none;
        }

        body.profile-incomplete .site-header,
        body.profile-incomplete #main-content,
        body.profile-incomplete .site-footer,
        body.profile-incomplete .chat-launcher {
            visibility: hidden;
            pointer-events: none;
        }

        img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        button, input, textarea, select {
            font: inherit;
            outline: none;
        }

        :focus-visible {
            outline: 2px solid var(--gold-soft);
            outline-offset: 3px;
        }

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

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.15);
            border-radius: 10px;
        }

        /* ==============================
           AURA GLOW CURSOR (ESCLUSIVA PC)
           ============================== */
        @media (pointer: fine) {
            .cursor-glow {
                position: fixed;
                top: 0; left: 0;
                width: 350px; height: 350px;
                background: radial-gradient(circle, rgba(244, 212, 140, 0.08) 0%, transparent 60%);
                border-radius: 50%;
                pointer-events: none;
                z-index: 9999;
                transform: translate(-50%, -50%);
                transition: width 0.3s, height 0.3s, background 0.3s;
                mix-blend-mode: screen;
            }
        }

        /* ==============================
           SEAMLESS SCROLLING BANNER
           ============================== */
        .scrolling-banner {
            background: rgba(10, 12, 18, 0.98);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            padding: 16px 0;
            overflow: hidden;
            position: relative;
            display: flex;
        }

        .scrolling-banner::before,
        .scrolling-banner::after {
            content: '';
            position: absolute;
            top: 0;
            width: 80px;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .scrolling-banner::before {
            left: 0;
            background: linear-gradient(to right, rgba(10, 12, 18, 1), transparent);
        }
        .scrolling-banner::after {
            right: 0;
            background: linear-gradient(to left, rgba(10, 12, 18, 1), transparent);
        }

        .scrolling-container {
            display: flex;
            white-space: nowrap;
            width: 100%;
            min-width: 100%;
        }

        .scrolling-text {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            width: max-content;
            animation: scroll-marquee 48s linear infinite;
            will-change: transform;
        }

        .scrolling-text span {
            padding: 0 48px;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--gold-soft);
            letter-spacing: 0.05em;
        }

        @keyframes scroll-marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }

        .container {
            width: var(--container);
            margin: 0 auto;
        }

        .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;
        }

        /* SPA VIEW TOGGLING */
        .view {
            display: none;
            opacity: 0;
            animation: fadeInView 0.4s ease forwards;
        }

        .view.is-active {
            display: block;
        }

        @keyframes fadeInView {
            to { opacity: 1; }
        }

        /* ==============================
           MATRIX PRELOADER (6s)
           ============================== */
        .preloader {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: grid;
            place-items: center;
            overflow: hidden;
            background: #000000;
            transition: opacity 0.5s ease, visibility 0s linear 0.5s;
        }

        body.is-loaded .preloader {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            display: none;
        }

        #matrix-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .preloader-core {
            position: relative;
            z-index: 3;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .preloader-name-wrap {
            position: relative;
            width: min(100%, 820px);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 180px;
            margin-bottom: 40px;
        }

        .preloader-name {
            position: relative;
            z-index: 2;
            margin: 0;
            font-size: clamp(4.4rem, 15vw, 9rem);
            line-height: 0.88;
            white-space: nowrap;
            word-spacing: 0;
            font-family: monospace;
            font-weight: 800;
            letter-spacing: 0.03em;
            color: #0f8;
            text-shadow: 0 0 20px #0f8;
            transition: opacity 0.5s ease, transform 0.8s ease;
        }

        .preloader-name.is-elegant {
            font-family: "Alex Brush", "Allura", cursive;
            font-size: clamp(4.4rem, 15vw, 9rem);
            font-weight: normal;
            letter-spacing: 0;
            background: linear-gradient(180deg, #fff6c9 0%, #ffd97b 26%, #d89d37 52%, #fff0b3 76%, #9a6316 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 1px 0 rgba(255, 247, 208, 0.5), 0 18px 24px rgba(0, 0, 0, 0.3), 0 0 26px rgba(244, 212, 140, 0.28);
            filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.36));
            animation: signatureLift 4.4s ease-in-out infinite;
        }

        .preloader-meter {
            width: min(90%, 460px);
            height: 12px;
            margin-bottom: 18px;
            padding: 2px;
            border-radius: 999px;
            border: 1px solid rgba(0, 255, 100, 0.3);
            background: rgba(0, 20, 5, 0.4);
            overflow: hidden;
            transition: all 1s ease;
        }

        .preloader-meter.elegant {
            border-color: rgba(216, 164, 71, 0.3);
            background: rgba(216, 164, 71, 0.08);
        }

        .preloader-meter span {
            display: block;
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: #0f8;
            box-shadow: 0 0 20px #0f8;
            transition: width 0.1s linear;
        }

        .preloader-meter.elegant span {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), var(--gold-bright), var(--gold), var(--copper));
            box-shadow: 0 0 25px rgba(244, 212, 140, 0.8);
        }

        .preloader-progress {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            width: min(90%, 460px);
            min-height: 62px;
            padding: 14px 18px;
            border-radius: 999px;
            border: 1px solid rgba(0, 255, 100, 0.3);
            background: rgba(0, 20, 5, 0.6);
            backdrop-filter: blur(14px);
            color: #0f8;
            font-size: 0.8rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            transition: all 1s ease;
        }

        .preloader-progress.elegant {
            border-color: rgba(216, 164, 71, 0.2);
            background: rgba(216, 164, 71, 0.1);
            color: var(--gold-soft);
        }

        .preloader-progress strong {
            min-width: 74px;
            color: #fff;
            font-size: .98rem;
            text-shadow: 0 0 20px #0f8;
        }

        .preloader-progress.elegant strong {
            color: var(--gold-bright);
            text-shadow: 0 0 20px rgba(244, 212, 140, 0.6);
        }

        @keyframes signatureLift {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-4px) scale(1.01); }
        }

        /* ==============================
           AUTH GATE A SCHEDE CON "X" DI CHIUSURA
           ============================== */
        .auth-gate[hidden] {
            display: none !important;
        }

        .auth-gate {
            position: fixed;
            inset: 0;
            z-index: 9998;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(15px);
            overflow-y: auto;
        }

        #login-matrix-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.22;
            pointer-events: none;
        }

        .auth-gate-card {
            width: 100%;
            max-width: 440px;
            margin: auto;
            background: linear-gradient(145deg, rgba(20, 24, 31, 0.95), rgba(10, 12, 18, 0.98));
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 28px;
            padding: 40px 30px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .auth-gate-card h2 {
            font-family: "Bebas Neue", sans-serif;
            font-size: 2.8rem;
            margin: 0 0 5px;
            color: var(--text);
            letter-spacing: 0.05em;
            text-align: center;
        }
        
        .auth-gate-card p.modal-helper {
            text-align: center;
            margin: 0 0 15px;
        }

        .bs-mobile-video-loader[hidden] {
            display: none !important;
        }

        .bs-mobile-video-loader {
            position: fixed;
            inset: 0;
            z-index: 10030;
            display: none;
            place-items: center;
            background: #000;
            overflow: hidden;
        }

        .bs-mobile-loader-video {
            width: 100vw;
            height: 100dvh;
            object-fit: cover;
            background: #000;
        }

        .bs-mobile-video-start,
        .bs-mobile-video-skip {
            position: absolute;
            z-index: 2;
            border: 1px solid rgba(244,212,140,.28);
            background: rgba(5,7,10,.72);
            color: #fff3c7;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 14px 34px rgba(0,0,0,.34);
        }

        .bs-mobile-video-start {
            inset: auto auto calc(20px + env(safe-area-inset-bottom, 0px)) auto;
            min-height: 48px;
            padding: 0 18px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .bs-mobile-video-start[hidden] {
            display: none !important;
        }

        .bs-mobile-video-skip {
            right: calc(14px + env(safe-area-inset-right, 0px));
            top: calc(14px + env(safe-area-inset-top, 0px));
            min-height: 38px;
            padding: 0 13px;
            border-radius: 999px;
            font-size: .72rem;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        body.bs-video-loading {
            overflow: hidden !important;
        }

        @media (max-width: 767px) {
            .bs-mobile-video-loader {
                display: grid;
            }
        }

        /* Tabs per switchare tra Login e Registrazione */
        .auth-tabs {
            display: flex;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            padding: 4px;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .auth-tab {
            flex: 1;
            text-align: center;
            padding: 12px;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--muted);
            cursor: pointer;
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .auth-tab.active {
            background: linear-gradient(135deg, var(--gold-soft), var(--copper));
            color: #1a1007;
            box-shadow: 0 4px 15px rgba(255, 143, 82, 0.2);
        }

        /* Social Auth Buttons */
        .auth-social-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        /* Variante single-button (solo Google dopo rimozione Apple): full width,
           padding piÃ¹ generoso, e un sottile bordo dorato per dare presenza. */
        .auth-social-grid.auth-social-single {
            grid-template-columns: 1fr;
        }

        .btn-social {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text);
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .btn-social.btn-social-full {
            padding: 16px 20px;
            font-size: 1rem;
            background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            border: 1px solid rgba(244, 212, 140, 0.22);
            box-shadow: 0 4px 18px rgba(0,0,0,0.25);
        }
        .btn-social.btn-social-full:hover {
            background: linear-gradient(135deg, rgba(244,212,140,0.10), rgba(244,212,140,0.04));
            border-color: rgba(244, 212, 140, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(244, 212, 140, 0.15);
        }
        .btn-social.btn-social-full i {
            font-size: .98rem;
        }

        .btn-social:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
            border-color: var(--gold-soft);
        }

        .btn-social.google i { color: #EA4335; }
        /* .btn-social.apple â€” classe rimossa con Apple login */

        .auth-divider {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 5px 0;
        }
        .auth-divider hr {
            flex: 1;
            border: none;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .auth-divider span { 
            padding: 0 15px;
            color: var(--muted);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        /* Form Inputs Eleganti */
        .auth-form { display: flex; flex-direction: column; gap: 14px; }

        .input-group {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-group i {
            position: absolute;
            left: 18px;
            color: var(--muted);
            font-size: 1.1rem;
            transition: color 0.3s ease;
        }

        .input-group input {
            width: 100%;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 16px 16px 16px 48px;
            color: var(--text);
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .input-group input:focus {
            border-color: var(--gold-soft);
            background: rgba(255, 255, 255, 0.05);
            outline: none;
        }

        .input-group input:focus + i,
        .input-group input:not(:placeholder-shown) + i {
            color: var(--gold-soft);
        }

        /* ==============================
           GENERAL UI & LAYOUT
           ============================== */
        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 160;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--copper), var(--gold-soft), var(--cyan));
            box-shadow: 0 0 20px rgba(244, 212, 140, 0.48);
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 120;
            padding: max(14px, env(safe-area-inset-top)) 0 14px;
            transition: background-color 0.24s ease, backdrop-filter 0.24s ease, box-shadow 0.24s ease;
        }

        .site-header.is-scrolled {
            background: rgba(6, 8, 12, 0.76);
            backdrop-filter: blur(16px);
            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
        }

        /* Contatore utenti + logout sopra il menu (staccati dalla pill nav) */
        .header-shell {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            padding-left: env(safe-area-inset-left, 0);
            padding-right: env(safe-area-inset-right, 0);
        }

        .header-user-rail {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            row-gap: 8px;
            padding: 2px 4px 0;
            min-height: 0;
        }

        .nav-wrap {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 14px 18px;
            border-radius: 30px;
            border: 1px solid var(--border);
            background: rgba(12, 15, 21, 0.72);
            backdrop-filter: blur(16px);
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .brand-mark {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            border-radius: 16px;
            background: linear-gradient(145deg, rgba(216, 164, 71, 0.18), rgba(122, 217, 255, 0.16));
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--gold-bright);
        }

        .brand-copy strong,
        .hero-title,
        .section-title,
        .card h3,
        .spotlight-card h2,
        .table-title {
            font-family: "Bebas Neue", sans-serif;
            letter-spacing: 0.05em;
            line-height: 1.02;
        }

        .brand-copy strong {
            display: block;
            font-size: 1.56rem;
        }

        .brand-copy span {
            display: block;
            color: var(--muted);
            font-size: 0.72rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .brand-copy span#nav-subtitle {
            display: none;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-left: auto;
        }

        .nav-links a {
            position: relative;
            color: rgba(255, 255, 255, 0.84);
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 100%;
            height: 2px;
            transform: scaleX(0);
            transform-origin: center;
            background: linear-gradient(90deg, var(--copper), var(--gold-soft));
            transition: transform 0.22s ease;
        }

        .nav-links a:hover::after,
        .nav-links a:focus-visible::after,
        .nav-links a[aria-current="page"]::after {
            transform: scaleX(1);
        }

        .nav-links a[aria-current="page"] {
            color: var(--gold-soft);
        }

        .nav-user-chip {
            display: none;
            max-width: min(220px, 38vw);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--muted);
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 6px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
        }

        .nav-user-chip.is-visible {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .nav-user-chip.is-admin {
            max-width: min(360px, 52vw);
            color: #1b1206;
            border: 1px solid rgba(255, 221, 128, 0.72);
            background: linear-gradient(135deg, #fff1b8 0%, #f4d48c 38%, #c97a3d 100%);
            box-shadow: 0 0 22px rgba(244, 212, 140, 0.28), inset 0 1px 0 rgba(255,255,255,0.65);
            text-shadow: 0 1px 0 rgba(255,255,255,0.35);
        }

        .nav-user-chip .admin-star {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            min-width: 18px;
            border-radius: 999px;
            background: rgba(20, 12, 4, 0.16);
            color: #4a2707;
            font-size: 0.78rem;
            line-height: 1;
        }

        .nav-user-chip .admin-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .nav-user-chip .admin-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 7px;
            border-radius: 999px;
            background: rgba(20, 12, 4, 0.18);
            color: #231304;
            font-size: 0.58rem;
            font-weight: 950;
            letter-spacing: 0.14em;
        }


        /* ── CREATOR BADGE — solo BlackSix ──────────────────────── */
        .nav-user-chip.is-creator {
            max-width: min(360px, 52vw);
            color: #1a0a00;
            border: 1.5px solid rgba(255, 235, 80, 0.95);
            background: linear-gradient(105deg,
                #b8860b 0%,
                #d4a017 14%,
                #ffd700 30%,
                #fffde7 48%,
                #ffd700 66%,
                #d4a017 82%,
                #b8860b 100%
            );
            background-size: 250% 100%;
            animation: bs-creator-gold-sweep 2.2s ease-in-out infinite;
            box-shadow:
                0 0 22px rgba(255, 215, 0, 0.70),
                0 0 55px rgba(255, 180, 0, 0.30),
                inset 0 1px 0 rgba(255,255,255,0.55);
            text-shadow: 0 1px 2px rgba(100, 60, 0, 0.35);
        }
        @keyframes bs-creator-gold-sweep {
            0%   { background-position: 100% 0; }
            100% { background-position: -100% 0; }
        }
        /* Corona FA nel nav badge — grande e definita */
        .nav-user-chip .creator-crown-icon {
            font-size: 1.05rem;
            color: #3d1f00;
            filter: drop-shadow(0 0 8px rgba(255,230,0,1)) drop-shadow(0 0 4px rgba(255,140,0,0.85));
            animation: bs-crown-pulse 2s ease-in-out infinite;
        }
        @keyframes bs-crown-pulse {
            0%,100% { transform: scale(1) translateY(0);       filter: drop-shadow(0 0 8px rgba(255,230,0,1)) drop-shadow(0 0 4px rgba(255,140,0,0.85)); }
            50%     { transform: scale(1.28) translateY(-2px); filter: drop-shadow(0 0 18px rgba(255,255,180,1)) drop-shadow(0 0 10px rgba(255,220,0,1)); }
        }
        .nav-user-chip .creator-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 9px;
            border-radius: 999px;
            background: rgba(50, 25, 0, 0.30);
            color: #1a0a00;
            font-size: 0.6rem;
            font-weight: 950;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            border: 1px solid rgba(180, 110, 0, 0.45);
        }

        .bs-admin-star-rain-layer {
            position: fixed;
            inset: 0;
            z-index: 99998;
            pointer-events: none;
            overflow: hidden;
        }

        .bs-admin-rain-star {
            position: absolute;
            top: -36px;
            width: var(--star-size, 18px);
            height: var(--star-size, 18px);
            display: grid;
            place-items: center;
            color: #fff3b2;
            font-size: var(--star-size, 18px);
            filter: drop-shadow(0 0 8px rgba(244,212,140,.72)) drop-shadow(0 0 18px rgba(201,122,61,.28));
            opacity: 0;
            animation: bsAdminStarFall var(--fall-duration, 3s) linear forwards;
            transform: translate3d(0,-40px,0) rotate(0deg) scale(.75);
        }

        .bs-admin-rain-star::before {
            content: "\2605";
        }

        @keyframes bsAdminStarFall {
            0% { opacity: 0; transform: translate3d(0,-42px,0) rotate(0deg) scale(.65); }
            8% { opacity: 1; }
            72% { opacity: .95; }
            100% { opacity: 0; transform: translate3d(var(--drift, 0px), 108vh, 0) rotate(var(--rotate, 260deg)) scale(1); }
        }

        /* PILLOLA UTENTI ONLINE (ANIMATA TRAMITE JS) */
        .online-counter {
            font-size: 0.74rem;
            font-weight: 700;
            color: var(--gold-bright);
            background: rgba(244, 212, 140, 0.12);
            border: 1px solid rgba(244, 212, 140, 0.25);
            padding: 7px 14px;
            border-radius: 999px;
            white-space: nowrap;
            letter-spacing: 0.05em;
            display: inline-flex;
            align-items: center;
            gap: 0;
            backdrop-filter: blur(8px);
        }
        
        @keyframes pulse-dot {
            0% { box-shadow: 0 0 0 0 rgba(158, 230, 184, 0.4); }
            70% { box-shadow: 0 0 0 6px rgba(158, 230, 184, 0); }
            100% { box-shadow: 0 0 0 0 rgba(158, 230, 184, 0); }
        }

        #btn-logout {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 7px 14px 7px 12px;
            min-height: 36px;
            border-radius: 999px;
            border: 1px solid rgba(239, 83, 80, 0.38);
            background: rgba(239, 83, 80, 0.1);
            color: var(--danger);
            cursor: pointer;
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            backdrop-filter: blur(8px);
            transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }

        #btn-logout:hover,
        #btn-logout:focus-visible {
            background: rgba(239, 83, 80, 0.18);
            border-color: rgba(239, 83, 80, 0.55);
        }

        #btn-logout .logout-label {
            position: static;
            opacity: 1;
            transform: none;
            pointer-events: none;
            padding: 0;
            border: none;
            background: none;
            color: inherit;
            font-size: inherit;
            font-weight: inherit;
            letter-spacing: inherit;
        }



        /* Header corretto: user/logout separati, sopra il menu e agganciati al bordo destro dello schermo */
        .site-header .container.header-shell {
            position: relative;
        }

        .header-user-rail {
            position: fixed;
            top: max(8px, env(safe-area-inset-top));
            right: max(18px, env(safe-area-inset-right));
            z-index: 220;
            width: auto;
            max-width: calc(100vw - 36px);
            padding: 0;
            justify-content: flex-end;
            align-items: center;
            gap: 8px;
        }

        .nav-wrap {
            margin-top: 30px;
        }

        .nav-user-chip,
        .online-counter,
        #btn-logout {
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.05);
        }

        .auth-register-privacy[hidden] {
            display: none !important;
        }

        .auth-register-privacy {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 16px;
            border: 1px solid rgba(244, 212, 140, 0.16);
            background: rgba(244, 212, 140, 0.055);
            color: rgba(255, 255, 255, 0.78);
            font-size: 0.82rem;
            line-height: 1.45;
        }

        .auth-register-privacy input {
            width: 18px;
            height: 18px;
            min-width: 18px;
            margin-top: 2px;
            accent-color: var(--gold-soft);
        }
        .auth-register-privacy #auth-gdpr-check,
        #auth-register-privacy #auth-gdpr-check {
            appearance: auto !important;
            inline-size: 18px !important;
            width: 18px !important;
            min-width: 18px !important;
            max-width: 18px !important;
            block-size: 18px !important;
            height: 18px !important;
            min-height: 18px !important;
            max-height: 18px !important;
            padding: 0 !important;
            margin: 2px 0 0 !important;
            flex: 0 0 18px !important;
        }

        .privacy-link {
            appearance: none;
            border: 0;
            padding: 0;
            margin: 0 0 0 6px;
            background: transparent;
            color: var(--gold-soft);
            font-weight: 900;
            text-decoration: underline;
            text-underline-offset: 3px;
            cursor: pointer;
        }

        .privacy-list {
            margin: 4px 0 0;
            padding-left: 18px;
            color: rgba(255,255,255,0.78);
            line-height: 1.75;
        }

        @media (max-width: 820px) {
            .header-user-rail {
                position: static;
                justify-content: flex-end;
                padding: 0 4px;
            }

            .nav-wrap {
                margin-top: 0;
            }
        }

        @media (max-width: 520px) {
            .header-user-rail {
                justify-content: center;
            }

            .nav-user-chip {
                max-width: 100%;
            }
        }


        .site-system-banner {
            position: fixed;
            left: 50%;
            top: max(52px, calc(env(safe-area-inset-top) + 52px));
            transform: translateX(-50%);
            z-index: 230;
            max-width: min(760px, calc(100vw - 28px));
            padding: 12px 18px;
            border-radius: 999px;
            border: 1px solid rgba(244, 212, 140, 0.24);
            background: rgba(8, 10, 15, 0.92);
            color: var(--gold-bright);
            box-shadow: 0 16px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.06);
            backdrop-filter: blur(16px);
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-align: center;
        }

        .admin-action-toast {
            position: fixed;
            right: max(18px, env(safe-area-inset-right));
            bottom: max(18px, env(safe-area-inset-bottom));
            z-index: 10002;
            width: min(390px, calc(100vw - 36px));
            padding: 15px 17px;
            border-radius: 18px;
            border: 1px solid rgba(244, 212, 140, 0.25);
            background: linear-gradient(145deg, rgba(10,12,18,0.98), rgba(18,22,30,0.96));
            color: var(--text);
            box-shadow: 0 18px 44px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transform: translateY(24px);
            opacity: 0;
            pointer-events: none;
            transition: transform 0.24s ease, opacity 0.24s ease;
        }

        .admin-action-toast.show {
            transform: translateY(0);
            opacity: 1;
        }

        .admin-action-toast i {
            color: var(--gold-soft);
            margin-top: 3px;
        }

        .admin-action-toast strong {
            display: block;
            color: var(--gold-bright);
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .admin-action-toast span {
            display: block;
            margin-top: 4px;
            color: rgba(255,255,255,0.82);
            font-size: 0.88rem;
            line-height: 1.45;
        }

        .site-lock-screen {
            position: fixed;
            inset: 0;
            z-index: 9997;
            display: none;
            place-items: center;
            padding: 24px;
            background: radial-gradient(circle at top, rgba(255,143,82,0.13), transparent 32%), rgba(0,0,0,0.86);
            backdrop-filter: blur(18px);
        }

        body.site-locked .site-lock-screen {
            display: grid;
        }

        .site-lock-card {
            width: min(100%, 560px);
            padding: 34px;
            border-radius: 30px;
            border: 1px solid rgba(244, 212, 140, 0.2);
            background: linear-gradient(180deg, rgba(20,23,31,0.98), rgba(8,10,15,0.98));
            box-shadow: 0 30px 70px rgba(0,0,0,0.48);
            text-align: center;
        }

        .site-lock-card h2 {
            margin: 12px 0;
            font-family: "Bebas Neue", sans-serif;
            font-size: clamp(2.4rem, 8vw, 4rem);
            letter-spacing: 0.05em;
            color: var(--gold-soft);
        }

        .site-lock-card p {
            margin: 0;
            color: rgba(255,255,255,0.78);
            line-height: 1.7;
        }

        .is-admin-hidden {
            display: none !important;
        }

        .nav-toggle {
            display: none;
            width: 48px;
            height: 48px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.04);
            color: var(--text);
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 52px;
            padding: 0 24px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-size: 0.88rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, opacity 0.22s ease;
            cursor: pointer;
        }

        .button:hover,
        .button:focus-visible {
            transform: translateY(-2px);
        }

        .button-primary {
            color: #1a1007;
            background: linear-gradient(135deg, var(--gold-soft), var(--copper));
            box-shadow: 0 10px 20px rgba(255, 143, 82, 0.18);
        }
        
        .button-primary:hover {
            box-shadow: 0 15px 30px rgba(255, 143, 82, 0.3);
        }


        .resource-submit-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .resource-submit-btn {
            min-width: min(100%, 360px);
            padding: 0 34px;
            letter-spacing: 0.12em;
            box-shadow: 0 16px 34px rgba(255, 143, 82, 0.26), 0 0 0 1px rgba(255,255,255,0.08) inset;
        }

        .resource-submit-btn:hover {
            box-shadow: 0 20px 42px rgba(255, 143, 82, 0.34), 0 0 0 1px rgba(255,255,255,0.12) inset;
        }

        .button-secondary {
            color: var(--text);
            border-color: rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.04);
        }
        .button-secondary:hover {
            border-color: var(--gold-soft);
            color: var(--gold-bright);
            background: rgba(255, 255, 255, 0.08);
        }

        .button-danger {
            color: #fff;
            background: #ef5350;
            border-color: rgba(239, 83, 80, 0.6);
        }
        .button-danger:hover {
            background: #c62828;
        }

        .button-ghost {
            color: var(--cyan);
            border-color: rgba(122, 217, 255, 0.2);
            background: rgba(122, 217, 255, 0.08);
        }

        .button.is-disabled,
        .button[aria-disabled="true"] {
            opacity: 0.56;
            pointer-events: none;
            box-shadow: none;
            transform: none;
        }

        .page-hero {
            position: relative;
            padding: 54px 0 88px;
        }

        .page-hero::before {
            content: "";
            position: absolute;
            inset: 0 0 auto;
            height: 100%;
            background: radial-gradient(circle at 16% 18%, rgba(255, 143, 82, 0.18), transparent 24%), 
                        radial-gradient(circle at 84% 12%, rgba(122, 217, 255, 0.12), transparent 22%), 
                        radial-gradient(circle at 52% 100%, rgba(216, 164, 71, 0.09), transparent 34%), 
                        linear-gradient(90deg, rgba(8, 10, 14, 0.96), rgba(8, 10, 14, 0.74) 54%, rgba(8, 10, 14, 0.92));
            opacity: 1;
            z-index: -1;
        }

        .hero-layout,
        .split-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
            gap: 28px;
            align-items: center;
        }

        .hero-copy,
        .section-head,
        .spotlight-copy,
        .hero-visual,
        .split-copy,
        .split-visual,
        .footer-wrap > * {
            min-width: 0;
        }

        .hero-kicker,
        .section-kicker,
        .panel-tag,
        .price-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 34px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.05);
            color: var(--gold-soft);
            font-size: 0.74rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .hero-title,
        .section-title,
        .spotlight-card h2 {
            margin: 18px 0 16px;
            font-size: clamp(3.2rem, 8vw, 6.8rem);
        }

        .hero-title .accent,
        .section-title .accent {
            background: linear-gradient(135deg, var(--gold-bright), var(--gold-soft) 36%, var(--copper) 88%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-lead,
        .section-copy,
        .card p,
        .panel p,
        .footer-copy,
        .footer-note,
        .helper-note,
        .table-note {
            color: var(--muted-soft);
            line-height: 1.84;
        }

        .hero-actions,
        .hero-pills,
        .inline-actions,
        .form-actions,
        .modal-actions,
        .footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .hero-actions {
            margin: 28px 0 18px;
        }

        .hero-links-pill {
            display: inline-flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
            backdrop-filter: blur(14px);
        }

        .hero-links-pill::-webkit-scrollbar {
            display: none;
        }

        .hero-links-pill a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 50px;
            padding: 0 18px;
            white-space: nowrap;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.86rem;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            border-radius: 999px;
            transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
        }

        .hero-links-pill a:hover,
        .hero-links-pill a:focus-visible {
            color: var(--gold-bright);
            background: rgba(244, 212, 140, 0.08);
            transform: translateY(-1px);
        }

        .hero-links-pill .is-primary {
            color: #1a1007;
            background: linear-gradient(135deg, var(--gold-soft), var(--copper));
            box-shadow: 0 8px 18px rgba(255, 143, 82, 0.22);
        }

        .hero-links-pill .is-primary:hover,
        .hero-links-pill .is-primary:focus-visible {
            color: #1a1007;
            background: linear-gradient(135deg, var(--gold-bright), var(--copper));
        }

        .hero-links-pill .sep {
            flex: 0 0 auto;
            color: rgba(255, 255, 255, 0.22);
            font-size: 1rem;
            font-weight: 700;
            user-select: none;
        }

        @media (max-width: 640px) {
            .hero-links-pill {
                width: 100%;
                justify-content: flex-start;
            }

            .hero-links-pill a {
                min-height: 48px;
                padding: 0 16px;
                font-size: 0.78rem;
            }
        }

        .hero-pills span,
        .tag-row span {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 42px;
            padding: 0 16px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
            color: rgba(255, 255, 255, 0.86);
            font-size: 0.88rem;
            font-weight: 700;
        }

        .panel,
        .card,
        .spotlight-card,
        .modal-card,
        .option-card {
            position: relative;
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            background: var(--panel);
            box-shadow: var(--shadow-md);
            overflow: hidden;
        }

        .panel::before,
        .card::before,
        .spotlight-card::before,
        .modal-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34%);
            pointer-events: none;
        }

        .media-panel,
        .card,
        .spotlight-card,
        .option-card {
            padding: 28px;
        }
        
        /* 3D TILT EFFETTO PER LE CARD */
        .card {
            transition: border-color 0.3s ease; /* Transform rimosso per delegarlo al JS */
            transform-style: preserve-3d;
        }
        
        .card:hover {
            border-color: rgba(244, 212, 140, 0.3);
        }

        .media-panel {
            display: grid;
            gap: 18px;
        }

        .media-panel img {
            width: 100%;
            min-height: 260px;
            border-radius: 24px;
            object-fit: cover;
        }

        .hero-stat-grid,
        .hub-grid,
        .info-grid,
        .package-grid,
        .step-grid,
        .summary-grid,
        .package-duo,
        .option-grid {
            display: grid;
            gap: 18px;
        }

        .hero-stat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .hero-stat {
            padding: 18px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .hero-stat strong {
            display: block;
            margin-bottom: 8px;
            color: var(--gold-soft);
            font-size: 1.14rem;
        }

        .hero-stat span {
            color: var(--muted);
            font-size: 0.88rem;
            line-height: 1.65;
        }

        .section {
            padding: 98px 0;
        }

        .section-muted {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
        }

        .section-head {
            max-width: 760px;
            margin-bottom: 42px;
        }

        .hub-grid,
        .info-grid,
        .step-grid,
        .package-grid,
        .package-duo {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .card-icon {
            width: 54px;
            height: 54px;
            margin-bottom: 18px;
            display: inline-grid;
            place-items: center;
            border-radius: 18px;
            color: var(--gold-soft);
            background: linear-gradient(145deg, rgba(216, 164, 71, 0.16), rgba(122, 217, 255, 0.12));
        }

        .card h3,
        .table-title {
            margin: 10px 0 12px;
            font-size: 1.72rem;
            line-height: 1.02;
        }

        .card p {
            margin: 0;
        }

        .link-row {
            margin-top: 18px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .feature-list,
        .package-list,
        .compact-list {
            margin: 18px 0 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 10px;
        }

        .feature-list li,
        .package-list li,
        .compact-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            color: rgba(255, 255, 255, 0.86);
            line-height: 1.7;
        }

        .feature-list i,
        .package-list i,
        .compact-list i {
            color: var(--green);
        }

        .price-badge {
            color: #ffddc0;
            background: rgba(255, 143, 82, 0.12);
            margin-bottom: 10px;
        }

        .price-row {
            margin-top: 18px;
            padding-top: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .price-row > div:first-child {
            min-width: 68px;
            flex: 0 0 auto;
        }

        .price-row strong {
            color: var(--gold-bright);
            font-size: 1.24rem;
            white-space: nowrap;
        }

        .price-row span {
            color: var(--muted);
            font-size: 0.88rem;
        }

        .button-compact {
            min-height: 44px;
            padding: 0 14px;
            font-size: 0.7rem;
            letter-spacing: 0.12em;
            max-width: 150px;
            text-align: center;
        }

        .price-row .receipt-trigger {
            margin-left: auto;
            flex: 1 1 130px;
        }

        .price-row .paypal-trigger {
            flex: 0 0 auto;
        }

        .option-list {
            display: grid;
            gap: 14px;
            margin-top: 22px;
        }

        .option-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 12px;
            align-items: center;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .option-row:first-child {
            padding-top: 0;
            border-top: 0;
        }

        .option-row span {
            color: var(--muted);
            font-size: 0.86rem;
        }

        .option-row .mini-price {
            color: var(--gold-soft);
            font-weight: 800;
            white-space: nowrap;
        }

        .option-row .button {
            min-height: 44px;
            padding: 0 18px;
            font-size: 0.78rem;
        }

        .spotlight-card {
            display: grid;
            grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
            gap: 24px;
            align-items: center;
            background: radial-gradient(circle at top right, rgba(255, 143, 82, 0.16), transparent 28%), 
                        linear-gradient(180deg, rgba(20, 24, 31, 0.96), rgba(8, 10, 15, 0.98));
        }

        .spotlight-media img {
            width: 100%;
            border-radius: 24px;
            object-fit: cover;
        }

        .spotlight-card h2 {
            margin-top: 0;
        }

        .spotlight-profile {
            background: radial-gradient(circle at top right, rgba(255, 143, 82, 0.22), transparent 28%), 
                        radial-gradient(circle at bottom left, rgba(216, 164, 71, 0.12), transparent 32%), 
                        linear-gradient(180deg, rgba(20, 24, 31, 0.98), rgba(8, 10, 15, 0.99));
        }

        .profile-figure {
            position: relative;
            margin: 0;
            display: grid;
            gap: 14px;
        }

        .profile-badge {
            position: absolute;
            top: 18px;
            left: 18px;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(8, 10, 15, 0.72);
            color: var(--gold-soft);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            backdrop-filter: blur(8px);
        }

        .spotlight-profile .spotlight-media img {
            aspect-ratio: 1 / 1;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(216, 164, 71, 0.08);
        }

        .profile-signature {
            margin: 0;
            color: var(--gold-bright);
            font-family: "Alex Brush", cursive;
            font-size: clamp(2.3rem, 5vw, 3.8rem);
            line-height: 1;
            text-align: right;
            text-shadow: 0 6px 18px rgba(255, 183, 77, 0.22), 0 0 24px rgba(255, 183, 77, 0.16);
        }

        .profile-copy-text {
            display: grid;
            gap: 16px;
            max-width: 600px;
            color: rgba(255, 255, 255, 0.88);
            font-size: 1.02rem;
            line-height: 1.72;
        }

        .profile-copy-text p {
            margin: 0;
        }

        .brief-form {
            padding: 28px;
        }

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

        .form-field {
            display: grid;
            gap: 8px;
        }

        .form-field.full {
            grid-column: 1 / -1;
        }

        .form-field label,
        .modal-field label {
            color: rgba(255, 255, 255, 0.84);
            font-size: 0.86rem;
            font-weight: 700;
        }

        .form-field input,
        .form-field textarea,
        .form-field select,
        .modal-field input,
        .modal-field textarea {
            width: 100%;
            min-width: 0;
            min-height: 52px;
            padding: 14px 16px;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text);
            transition: border-color 0.3s ease;
        }
        
        .form-field input:focus, .form-field textarea:focus, .modal-field input:focus, .modal-field textarea:focus {
            border-color: var(--gold-soft);
        }

        .form-field textarea,
        .modal-field textarea {
            min-height: 124px;
            resize: vertical;
        }

        .gdpr-field {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 14px;
        }

        .modal-field input[type="checkbox"],
        .form-field input[type="checkbox"] {
            width: 18px;
            height: 18px;
            min-width: 18px;
            min-height: 18px;
            padding: 0;
            margin: 0;
            flex: 0 0 18px;
            accent-color: var(--gold-soft);
            cursor: pointer;
        }

        .gdpr-field label {
            line-height: 1.3;
            cursor: pointer;
        }

        .first-login-card {
            width: min(100%, 520px);
            gap: 20px;
            padding: 48px 56px 32px 28px;
            background: radial-gradient(circle at top right, rgba(255, 143, 82, 0.16), transparent 28%),
                        linear-gradient(180deg, rgba(18, 22, 31, 0.98), rgba(9, 11, 17, 0.99));
            border-color: rgba(244, 212, 140, 0.16);
        }

        .first-login-head {
            display: grid;
            gap: 10px;
        }

        .first-login-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
            min-height: 32px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid rgba(244, 212, 140, 0.18);
            background: rgba(244, 212, 140, 0.08);
            color: var(--gold-soft);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .first-login-card h2 {
            color: var(--gold-soft);
            font-size: clamp(2.2rem, 7vw, 3rem);
        }

        .profile-purpose {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px;
            border-radius: 18px;
            border: 1px solid rgba(122, 217, 255, 0.16);
            background: rgba(122, 217, 255, 0.06);
            color: rgba(255, 255, 255, 0.78);
            font-size: 0.88rem;
            line-height: 1.6;
        }

        .profile-purpose i {
            color: var(--cyan);
            margin-top: 3px;
        }

        .profile-onboarding-form {
            display: grid;
            gap: 14px;
        }

        .profile-onboarding-form .modal-field {
            gap: 7px;
        }

        .profile-onboarding-form .modal-field label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: rgba(255, 255, 255, 0.86);
            font-size: 0.82rem;
        }

        .profile-onboarding-form .modal-field input:not([type="checkbox"]) {
            min-height: 50px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.045);
        }

        .profile-onboarding-form .gdpr-field {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 12px 14px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.035);
        }

        .profile-onboarding-form .gdpr-field label {
            justify-content: flex-start;
            font-size: 0.86rem;
        }

        .profile-onboarding-form .modal-actions {
            margin-top: 4px;
        }

        .form-status {
            min-height: 24px;
            margin: 4px 0 0;
            color: var(--gold-soft);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .form-status.is-success {
            color: var(--green);
        }

        .site-footer {
            padding: 24px 0 36px;
        }

        .footer-wrap {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 24px;
            padding-top: 28px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .footer-brand strong {
            display: block;
            font-family: "Bebas Neue", sans-serif;
            font-size: 1.6rem;
            letter-spacing: 0.05em;
        }

        .footer-brand span {
            display: block;
            margin-top: 6px;
            color: var(--muted);
            font-size: 0.8rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .footer-links {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.84rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .footer-copy {
            max-width: 420px;
            margin: 0;
            font-size: 0.82rem;
            text-align: right;
        }

        /* Footer credito SmartWebCrafted (stile estratto dal footer fornito) */
        .bs-craft-footer {
            text-align: center;
            padding-top: 18px;
            margin-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }
        .bs-craft-footer .footer-legal {
            display: inline-block;
            margin-bottom: 12px;
        }
        .bs-craft-footer .footer-legal summary {
            cursor: pointer;
            list-style: none;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(247, 242, 232, 0.5);
        }
        .bs-craft-footer .footer-legal summary::-webkit-details-marker { display: none; }
        .bs-craft-footer .footer-legal-chevron { display: inline-block; transition: transform .25s ease; }
        .bs-craft-footer .footer-legal[open] .footer-legal-chevron { transform: rotate(90deg); }
        .bs-craft-footer .footer-legal-full {
            display: block;
            margin: 8px auto 0;
            max-width: 640px;
            font-size: 0.74rem;
            line-height: 1.5;
            letter-spacing: 0.02em;
            color: rgba(247, 242, 232, 0.42);
        }
        .bs-craft-footer .footer-bottom-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(247, 242, 232, 0.62);
        }
        .bs-craft-footer .footer-sep { opacity: 0.35; }
        .bs-craft-footer .ukraine-mark { display: inline-flex; align-items: center; gap: 7px; }
        .bs-craft-footer .ukraine-heart {
            font-size: 1rem;
            background: linear-gradient(180deg, #0057b7 0 50%, #ffd700 50% 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .bs-craft-footer .footer-icon-link,
        .bs-craft-footer .footer-social {
            display: inline-flex;
            color: rgba(247, 242, 232, 0.72);
            transition: color .2s ease, transform .2s ease;
        }
        .bs-craft-footer .footer-icon-link:hover,
        .bs-craft-footer .footer-social:hover { color: var(--gold-soft); transform: translateY(-1px); }
        .bs-craft-footer .footer-icon-link svg,
        .bs-craft-footer .footer-social svg,
        .bs-craft-footer .developer-globe { width: 18px; height: 18px; }
        .bs-craft-footer .developer-text-link {
            color: var(--gold-soft);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-decoration: none;
        }
        .bs-craft-footer .developer-text-link:hover { text-decoration: underline; }

        /* MODALS */
        .modal-shell[hidden] {
            display: none !important;
        }

        .modal-shell {
            position: fixed;
            inset: 0;
            /* FIX: il privacy-modal restava nascosto dietro l'auth-gate (z-index 9998)
               quando l'utente cliccava "Leggi ora" durante la registrazione.
               Tutti i modal-shell devono stare sopra l'auth-gate, perchÃ©
               concettualmente sono finestre di dettaglio che possono apparire
               anche dentro il flusso di auth (privacy, cookie, GDPR). */
            z-index: 9999;
            display: grid;
            place-items: center;
            padding: 20px;
            overflow-y: auto;
        }
        /* FIX BIS: il privacy-modal puÃ² essere richiamato da DENTRO un altro modal
           (es. dal first-login-modal cliccando "Leggi ora"). Senza questa regola
           privacy-modal e first-login-modal hanno lo stesso z-index e l'ordine
           nel DOM determina chi sta sopra â†’ privacy resterebbe nascosto.
           Diamo al privacy-modal uno z-index esplicitamente piÃ¹ alto, sotto
           solo broadcast (10050) e admin-action-toast (10002). */
        #privacy-modal {
            z-index: 10010;
        }

        .modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(3, 4, 6, 0.76);
            backdrop-filter: blur(12px);
        }

        .modal-card {
            position: relative;
            z-index: 1;
            width: min(100%, 680px);
            max-height: calc(100dvh - 40px);
            display: grid;
            gap: 18px;
            padding: 30px;
            overflow-y: auto;
            background: radial-gradient(circle at top right, rgba(255, 143, 82, 0.12), transparent 28%), 
                        linear-gradient(180deg, rgba(20, 23, 31, 0.98), rgba(8, 10, 15, 0.98));
        }

        .bs-broadcast-shell[hidden] {
            display: none !important;
        }

        .bs-broadcast-shell {
            --bs-bc-rgb: 122, 217, 255;
            --bs-bc-solid: #7ad9ff;
            --bs-bc-soft: rgba(var(--bs-bc-rgb), .16);
            position: fixed;
            inset: 0;
            z-index: 10020;
            display: grid;
            place-items: center;
            padding: 22px;
            background:
                radial-gradient(circle at 50% 40%, rgba(var(--bs-bc-rgb), .36), transparent 28%),
                radial-gradient(circle at 18% 22%, rgba(var(--bs-bc-rgb), .18), transparent 24%),
                rgba(0, 0, 0, .70);
            backdrop-filter: blur(12px) saturate(130%);
            -webkit-backdrop-filter: blur(12px) saturate(130%);
        }

        .bs-broadcast-shell.is-info {
            --bs-bc-rgb: 122, 217, 255;
            --bs-bc-solid: #7ad9ff;
        }

        .bs-broadcast-shell.is-warning {
            --bs-bc-rgb: 244, 212, 140;
            --bs-bc-solid: #f4d48c;
        }

        .bs-broadcast-shell.is-success {
            --bs-bc-rgb: 158, 230, 184;
            --bs-bc-solid: #9ee6b8;
        }

        .bs-broadcast-shell.is-danger {
            --bs-bc-rgb: 239, 83, 80;
            --bs-bc-solid: #ff8d8d;
        }

        .bs-broadcast-card {
            position: relative;
            width: min(1120px, calc(100vw - 44px));
            max-height: min(90vh, 900px);
            display: grid;
            gap: 18px;
            padding: clamp(24px, 3.4vw, 44px);
            overflow: hidden auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--bs-bc-rgb), .5) transparent;
            border-radius: 30px;
            border: 1px solid rgba(var(--bs-bc-rgb), .62);
            background:
                radial-gradient(circle at 0% 0%, rgba(var(--bs-bc-rgb), .28), transparent 34%),
                radial-gradient(circle at 100% 0%, rgba(var(--bs-bc-rgb), .16), transparent 30%),
                radial-gradient(circle at 50% 100%, rgba(var(--bs-bc-rgb), .10), transparent 36%),
                linear-gradient(180deg, rgba(20, 23, 31, .98), rgba(6, 8, 13, .985));
            box-shadow:
                0 0 0 1px rgba(var(--bs-bc-rgb), .24),
                0 0 26px rgba(var(--bs-bc-rgb), .54),
                0 0 82px rgba(var(--bs-bc-rgb), .34),
                0 30px 90px rgba(0, 0, 0, .62),
                inset 0 0 54px rgba(var(--bs-bc-rgb), .12);
            animation: bsBroadcastGlow 2.8s ease-in-out infinite;
        }

        @keyframes bsBroadcastGlow {
            0%, 100% {
                box-shadow:
                    0 0 0 1px rgba(var(--bs-bc-rgb), .24),
                    0 0 24px rgba(var(--bs-bc-rgb), .46),
                    0 0 72px rgba(var(--bs-bc-rgb), .28),
                    0 30px 90px rgba(0, 0, 0, .62),
                    inset 0 0 48px rgba(var(--bs-bc-rgb), .10);
            }
            50% {
                box-shadow:
                    0 0 0 1px rgba(var(--bs-bc-rgb), .40),
                    0 0 42px rgba(var(--bs-bc-rgb), .72),
                    0 0 120px rgba(var(--bs-bc-rgb), .46),
                    0 34px 100px rgba(0, 0, 0, .66),
                    inset 0 0 72px rgba(var(--bs-bc-rgb), .18);
            }
        }

        .bs-broadcast-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            pointer-events: none;
            border-radius: inherit;
            background:
                linear-gradient(115deg, rgba(var(--bs-bc-rgb), .92), transparent 30%, rgba(var(--bs-bc-rgb), .46));
            opacity: .78;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
            -webkit-mask-composite: xor;
            padding: 1px;
        }

        .bs-broadcast-card::after {
            content: none;
        }

        .bs-broadcast-close {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 2;
            width: 42px;
            height: 42px;
            min-width: 42px;
            border-radius: 15px;
            border: 1px solid rgba(var(--bs-bc-rgb), .22);
            background: rgba(6, 8, 13, .82);
            color: #fff;
            cursor: pointer;
            box-shadow: 0 0 28px rgba(var(--bs-bc-rgb), .38);
        }

        .bs-broadcast-kicker {
            width: fit-content;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            border: 1px solid rgba(var(--bs-bc-rgb), .35);
            background: rgba(var(--bs-bc-rgb), .10);
            color: var(--bs-bc-solid);
            font-size: .78rem;
            font-weight: 900;
            letter-spacing: .14em;
            text-transform: uppercase;
            text-shadow: 0 0 16px rgba(var(--bs-bc-rgb), .70);
            box-shadow: 0 0 24px rgba(var(--bs-bc-rgb), .30), inset 0 0 18px rgba(var(--bs-bc-rgb), .08);
        }

        .bs-broadcast-title {
            margin: 0;
            color: #fff8e8;
            font-family: "Bebas Neue", sans-serif;
            font-size: clamp(2.4rem, 4.6vw, 3.7rem);
            line-height: .96;
            letter-spacing: .02em;
            text-transform: uppercase;
            text-shadow: 0 0 18px rgba(var(--bs-bc-rgb), .34), 0 0 48px rgba(var(--bs-bc-rgb), .20);
        }

        .bs-broadcast-message {
            margin: 0;
            padding: 4px 2px;
            border-radius: 0;
            border: none;
            background: none;
            color: rgba(247, 242, 232, .94);
            font-size: 1.22rem;
            line-height: 1.55;
            box-shadow: none;
        }

        .bs-broadcast-meta {
            color: rgba(247, 242, 232, .64);
            font-size: .76rem;
            font-weight: 900;
            letter-spacing: .10em;
            text-transform: uppercase;
        }

        .bs-broadcast-card::-webkit-scrollbar { width: 9px; }
        .bs-broadcast-card::-webkit-scrollbar-thumb {
            background: rgba(var(--bs-bc-rgb), .5);
            border-radius: 8px;
        }
        .bs-broadcast-card::-webkit-scrollbar-track { background: transparent; }

        /* Su telefono l'animazione del bagliore causava sfarfallio: la disattiviamo. */
        @media (max-width: 767px) {
            .bs-broadcast-card {
                animation: none !important;
                max-height: 92vh;
                -webkit-overflow-scrolling: touch;
            }
            .bs-broadcast-title { font-size: 1.95rem !important; line-height: 1.04 !important; }
            .bs-broadcast-message { padding: 16px; font-size: 1.02rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            .bs-broadcast-card { animation: none !important; }
        }

        /* Chiusura modali: premium, minimale, non sovrapposta al titolo */
        .modal-card > .section-kicker:first-of-type {
            width: fit-content !important;
            max-width: calc(100% - 62px);
            padding-right: 14px !important;
        }

        .modal-close {
            position: absolute;
            top: 22px;
            right: 22px;
            z-index: 30;
            width: 34px;
            height: 34px;
            min-width: 34px;
            min-height: 34px;
            padding: 0;
            margin: 0;
            border: 1px solid rgba(244, 212, 140, 0.18);
            border-radius: 12px;
            color: rgba(255, 246, 214, 0.92);
            background: rgba(9, 11, 17, 0.72);
            backdrop-filter: blur(16px);
            box-shadow:
                0 12px 28px rgba(0, 0, 0, 0.34),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            font-size: 0;
            transition:
                transform 0.18s ease,
                border-color 0.18s ease,
                background 0.18s ease,
                color 0.18s ease,
                box-shadow 0.18s ease;
        }

        .modal-close i,
        .modal-close svg {
            display: none !important;
        }

        .modal-close::before,
        .modal-close::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 13px;
            height: 2px;
            border-radius: 99px;
            background: currentColor;
            transform-origin: center;
            pointer-events: none;
        }

        .modal-close::before {
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .modal-close::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }

        .modal-close:hover,
        .modal-close:focus-visible {
            color: #ffd978;
            border-color: rgba(244, 212, 140, 0.46);
            background: rgba(22, 18, 13, 0.88);
            transform: translateY(-1px);
            box-shadow:
                0 16px 34px rgba(0, 0, 0, 0.42),
                0 0 0 1px rgba(244, 212, 140, 0.06),
                0 0 18px rgba(244, 178, 76, 0.16);
        }

        .modal-close:active {
            transform: scale(0.96);
        }

        #free-trial-modal .modal-card {
            padding-top: 34px;
        }

        #free-trial-modal .modal-close {
            top: 22px;
            right: 22px;
        }

        .chat-modal-dismiss {
            position: static;
            flex-shrink: 0;
            min-width: 44px;
            min-height: 44px;
            padding: 0 12px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: rgba(233, 237, 239, 0.9);
            background: rgba(32, 44, 51, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
        }

        .chat-modal-dismiss:hover,
        .chat-modal-dismiss:focus-visible {
            border-color: rgba(244, 212, 140, 0.35);
            color: var(--gold-soft);
        }

        .modal-card h2 {
            margin: 0;
            font-family: "Bebas Neue", sans-serif;
            letter-spacing: 0.05em;
            font-size: clamp(2.2rem, 6vw, 3.8rem);
        }

        .modal-plan strong,
        .modal-price strong {
            color: var(--gold-soft);
        }

        .paypal-card {
            width: min(100%, 640px);
            gap: 16px;
            padding: 34px 34px 30px;
            border-radius: 30px;
            background: radial-gradient(circle at top right, rgba(255, 143, 82, 0.16), transparent 28%),
                        linear-gradient(180deg, rgba(18, 22, 31, 0.98), rgba(7, 9, 15, 0.99));
            border-color: rgba(244, 212, 140, 0.14);
        }

        .paypal-card .section-kicker {
            max-width: calc(100% - 62px);
        }

        .paypal-card h2 {
            padding-right: 48px;
            color: var(--text);
            font-size: clamp(2.6rem, 6vw, 4.2rem);
        }

        .paypal-summary {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        @media (max-width: 520px) {
            .paypal-summary {
                grid-template-columns: 1fr;
            }
        }

        .paypal-summary p {
            margin: 0;
            padding: 13px 14px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.035);
        }

        .paypal-profile-grid {
            display: grid;
            gap: 12px;
        }

        .paypal-card .modal-field label {
            color: rgba(255, 255, 255, 0.76);
            font-size: 0.8rem;
        }

        .paypal-card .modal-field input[readonly] {
            border-color: rgba(244, 212, 140, 0.12);
            background: rgba(255, 255, 255, 0.045);
            color: rgba(255, 255, 255, 0.9);
        }

        .paypal-card .modal-actions {
            margin-top: 8px;
        }

        .modal-field {
            display: grid;
            gap: 8px;
        }

        .modal-helper {
            margin: 0;
            color: rgba(255, 255, 255, 0.72);
            line-height: 1.72;
        }

        .modal-legal {
            margin: -6px 0 0;
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.82rem;
            line-height: 1.68;
        }

        .modal-preview {
            margin: 0;
            padding: 18px;
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
            color: rgba(255, 255, 255, 0.86);
        }

        .modal-feedback {
            min-height: 24px;
            margin: 0;
            color: var(--gold-soft);
            font-size: 0.9rem;
        }

        /* CHAT STYLES */
        .chat-img-shell {
            margin-top: 8px;
            width: fit-content;
            max-width: min(100%, 340px);
            margin-inline: auto 0;
            border-radius: 14px;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.22);
            line-height: 0;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        }

        .chat-bubble.is-owner .chat-img-shell {
            margin-inline: 0 auto;
        }

        .chat-img-shell:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
        }

        .chat-image-attachment {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: min(260px, 46vh);
            object-fit: contain;
            vertical-align: middle;
        }

        .chat-launcher {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 170;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 999px;
            color: var(--text);
            background: radial-gradient(circle at top, rgba(255, 190, 92, 0.2), transparent 42%), 
                        rgba(11, 13, 18, 0.94);
            box-shadow: 0 22px 36px rgba(0, 0, 0, 0.32);
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .chat-launcher:hover {
            transform: translateY(-2px);
        }

        .chat-launcher i {
            color: var(--gold-soft);
        }

        .chat-launcher span {
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-size: 0.82rem;
        }

        .bs-chat-notify-badge {
            position:absolute; top:-7px; right:-7px; min-width:24px; height:24px; padding:0 7px;
            border-radius:999px; background:linear-gradient(135deg,#ff8f52,#f4d48c); color:#05070b;
            display:none; place-items:center; font-size:.72rem; font-weight:1000; box-shadow:0 0 18px rgba(255,143,82,.45);
        }
        .bs-chat-notify-badge.is-visible { display:inline-grid; }
        .bs-chat-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px; }
        .bs-chat-tab { border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); color:var(--muted); border-radius:14px; padding:10px 12px; font-weight:900; cursor:pointer; }
        .bs-chat-tab.is-active { color:#05070b; background:linear-gradient(135deg,var(--gold-soft),#ff8f52); border-color:transparent; }
        .bs-chat-tab-badge { margin-left:6px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ff5959; color:#fff; display:none; place-items:center; font-size:.68rem; }
        .bs-chat-tab-badge.is-visible { display:inline-grid; }
        .bs-chat-privacy-note { text-align:center;color:#8696a0;font-size:.75rem;margin:0 0 10px; }
        .bs-vip-lock-panel { border:1px solid rgba(244,212,140,.24); background:linear-gradient(135deg,rgba(244,212,140,.10),rgba(255,143,82,.06)); border-radius:18px; padding:18px; text-align:center; color:#e9edef; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); }
        .bs-vip-lock-panel h3 { margin:8px 0 8px; color:var(--gold-soft); font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:1.55rem; }
        .bs-vip-lock-panel p { margin:0 auto 14px; max-width:560px; color:#b7c1ca; line-height:1.5; }
        .bs-vip-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; }
        .bs-vip-action { border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:11px 16px; font-weight:900; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
        .bs-vip-action.primary { background:linear-gradient(135deg,var(--gold-soft),#ff8f52); color:#05070b; border-color:transparent; }
        .bs-vip-action.ghost { background:rgba(255,255,255,.05); color:#e9edef; }
        .bs-vip-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 10px; background:rgba(244,212,140,.14); color:var(--gold-soft); border:1px solid rgba(244,212,140,.22); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
        .bs-vip-status-card { margin:0 0 12px; padding:12px 14px; border-radius:18px; border:1px solid rgba(244,212,140,.22); background:linear-gradient(135deg,rgba(244,212,140,.10),rgba(255,143,82,.045)); }
        .bs-vip-status-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; color:#e9edef; font-size:.80rem; font-weight:900; }
        .bs-vip-status-bar { width:min(280px,100%); height:9px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
        .bs-vip-status-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold-soft),#ff8f52); box-shadow:0 0 14px rgba(244,212,140,.28); transition:width .35s ease; }
        .bs-vip-status-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; color:#9fb0bd; font-size:.70rem; max-width:340px; }
        .bs-typing-line { display:flex; align-items:center; gap:8px; margin:8px 0 0 8px; color:#8fa3b8; font-size:.78rem; }
        .bs-typing-dots { display:inline-flex; gap:3px; align-items:center; }
        .bs-typing-dots i { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.35; animation:bsTypingPulse 1s infinite ease-in-out; }
        .bs-typing-dots i:nth-child(2){ animation-delay:.15s; } .bs-typing-dots i:nth-child(3){ animation-delay:.3s; }
        @keyframes bsTypingPulse { 0%,80%,100%{ transform:translateY(0); opacity:.28;} 40%{ transform:translateY(-3px); opacity:.9;} }

        .chat-thread {
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-height: 360px;
            max-height: 540px;
            padding: 24px;
            overflow-y: auto;
            border-radius: 18px;
            border: none;
            background: #0b141a;
            background-image: radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 100%);
        }

        .chat-bubble {
            max-width: min(92%, 620px);
            padding: 12px 14px 22px;
            border-radius: 12px;
            position: relative;
            font-size: 1rem;
            line-height: 1.45;
            color: #e9edef;
        }

        .chat-bubble p {
            margin: 0;
            word-break: break-word;
        }

        .chat-bubble.is-user {
            background-color: #005c4b;
            margin-left: auto;
            border-top-right-radius: 0;
            box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        }
        /* VIP messages from OTHER users should NOT float right */
        .bs-chat-message-row.is-vip-row:not(.is-mine) .chat-bubble.is-user {
            margin-left: 0 !important;
            margin-right: auto !important;
        }

        .chat-bubble.is-owner {
            background-color: #202c33;
            margin-right: auto;
            border-top-left-radius: 0;
            box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        }

        .chat-bubble.is-system {
            background-color: #182229;
            color: #8696a0;
            margin: 5px auto;
            text-align: center;
            border-radius: 12px;
            font-size: 0.8rem;
            padding: 6px 14px;
            max-width: 90%;
        }

        .chat-bubble-meta {
            position: absolute;
            bottom: 4px;
            right: 8px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.65rem;
        }

        .chat-input-area {
            display: flex;
            gap: 10px;
            background: #202c33;
            padding: 14px;
            border-radius: 18px;
            margin-top: 10px;
        }

        .chat-input-area textarea {
            flex: 1;
            min-height: 54px;
            max-height: 150px;
            background: #2a3942;
            color: #e9edef;
            border: none;
            border-radius: 24px;
            padding: 15px 18px;
            resize: none;
            font-family: inherit;
            outline: none;
        }

        .chat-input-area button {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: #00a884;
            color: #fff;
            border: none;
            display: grid;
            place-items: center;
            cursor: pointer;
            transition: background 0.2s;
            flex-shrink: 0;
        }

        .chat-input-area button:hover {
            background: #008f6f;
        }

        .chat-input-area button:disabled {
            background: #3e5450;
            color: #888;
            cursor: not-allowed;
        }

        .chat-modal-card {
            width: min(94vw, 820px);
        }

        .chat-modal-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding-bottom: 12px;
            margin-bottom: 12px;
        }

        .chat-modal-head h2 {
            font-size: clamp(1rem, 3.8vw, 1.35rem);
            color: #e9edef;
            font-family: "Manrope", sans-serif;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            min-width: 0;
        }

        #chat-modal .chat-thread {
            min-height: min(360px, 42vh);
            max-height: min(520px, 56vh);
        }

        /* Schermate strette tipo smartphone / 9:16 */
        @media (max-aspect-ratio: 9/16), (max-width: 540px) {
            .modal-shell {
                padding: max(10px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
            }

            #chat-modal .chat-modal-card {
                width: 100%;
                max-width: min(96vw, 520px);
            }

            .chat-thread {
                min-height: 36vh;
                max-height: 48vh;
            }

            #chat-modal .chat-thread {
                min-height: min(280px, 38vh);
                max-height: min(42vh, 360px);
            }

            .chat-image-attachment {
                max-height: min(200px, 36vh);
            }

            .chat-img-shell {
                max-width: min(100%, 88vw);
            }

            .chat-launcher span {
                display: none;
            }

            .chat-launcher {
                padding: 12px 14px;
                right: max(12px, env(safe-area-inset-right));
                bottom: max(12px, env(safe-area-inset-bottom));
            }
        }

        /* FILE BUTTON IN CHAT */
        .chat-input-area .file-btn {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: #2a3942;
            color: #8696a0;
            border: none;
            display: grid;
            place-items: center;
            cursor: pointer;
            transition: background 0.2s;
            flex-shrink: 0;
        }
        .chat-input-area .file-btn:hover {
            background: #3b4a54;
        }

        /* Pannello strumenti admin (banner, fatturato, â€¦) */
        #view-admin .admin-tools {
            background: #111b21;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            padding: 18px 22px 22px;
            color: var(--text);
        }

        #view-admin .admin-tools h3 {
            margin: 18px 0 8px;
            font-size: 0.95rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--gold-soft);
        }

        #view-admin .admin-tools h3:first-child {
            margin-top: 0;
        }

        #view-admin .admin-tools .admin-hint {
            margin: 0 0 8px;
            font-size: 0.8rem;
            color: var(--muted);
            line-height: 1.55;
        }

        .admin-slot-grid {
            display: grid;
            gap: 10px;
            grid-template-columns: 1fr;
        }

        @media (min-width: 720px) {
            .admin-slot-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .admin-slot-grid .slot-field label {
            display: block;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 4px;
        }

        .admin-slot-grid textarea {
            width: 100%;
            min-height: 52px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,0.05);
            color: var(--text);
            resize: vertical;
            font-size: 0.88rem;
            line-height: 1.45;
        }

        .admin-banner-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: flex-end;
            margin-top: 12px;
        }

        .admin-banner-meta label {
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .admin-banner-meta input {
            width: 100px;
            margin-top: 4px;
            padding: 8px 10px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,0.05);
            color: var(--text);
        }

        /* ==============================
           ADMIN VIEW LAYOUT
           ============================== */
        #view-admin .admin-layout {
            display: grid;
            grid-template-columns: 320px 1fr;
            min-height: calc(100vh - 100px);
            background: #0b141a;
            border-top: 1px solid var(--border);
        }

        .admin-sidebar {
            border-right: 1px solid rgba(255,255,255,0.08);
            background: #111b21;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .admin-sidebar-header {
            padding: 16px;
            background: #202c33;
            color: #e9edef;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .admin-thread-list {
            flex: 1;
            overflow-y: auto;
        }

        .admin-thread-item {
            padding: 14px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.2s;
        }

        .admin-thread-item:hover {
            background: #202c33;
        }

        .admin-thread-item.active {
            background: #2a3942;
        }

        .admin-thread-item .info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .admin-thread-item strong {
            color: #e9edef;
            font-size: 0.95rem;
        }

        .admin-thread-item small {
            color: #8696a0;
            font-size: 0.75rem;
        }

        .admin-chat-area {
            display: flex;
            flex-direction: column;
            background: #0b141a;
            position: relative;
        }

        .admin-chat-header {
            padding: 16px;
            background: #202c33;
            color: #e9edef;
            font-weight: 600;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.72s ease, transform 0.72s ease;
        }

        .reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* CORREZIONE: Alzato a 1150px. CosÃ¬ sui monitor piÃ¹ piccoli diventa un menu a tendina prima che gli elementi sbattano tra loro */
        @media (max-width: 1150px) {
            .nav-wrap {
                position: relative;
                flex-wrap: wrap;
                border-radius: 28px;
            }

            .nav-toggle {
                display: inline-flex;
                margin-left: auto;
            }

            .nav-links {
                display: none;
                width: 100%;
                flex-direction: column;
                align-items: flex-start;
                padding-top: 14px;
            }

            .nav-wrap.is-open .nav-links {
                display: flex;
            }

        }

        @media (max-width: 860px) {
            .hero-layout,
            .spotlight-card,
            .hub-grid,
            .package-grid,
            .form-grid {
                grid-template-columns: 1fr;
            }

            .hero-title,
            .section-title,
            .spotlight-card h2 {
                font-size: clamp(2.8rem, 12vw, 5rem);
            }

            #view-admin .admin-layout {
                grid-template-columns: 1fr;
            }

            .admin-sidebar {
                display: none;
            }

            .admin-sidebar.show-mobile {
                display: flex;
                height: 100%;
            }

            .admin-chat-area {
                display: none;
            }

            .admin-chat-area.show-mobile {
                display: flex;
                height: 100%;
            }
        }

        @media (max-width: 640px) {
            .container {
                width: min(100% - 22px, 1180px);
            }

            .page-hero,
            .section {
                padding: 60px 0;
            }

            .button {
                width: 100%;
            }

            .price-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .price-row .button {
                width: 100%;
            }

            .media-panel,
            .card,
            .spotlight-card,
            .brief-form,
            .modal-card {
                padding: 22px;
            }

            .footer-wrap {
                flex-direction: column;
            }
            .modal-close {
                top: 14px;
                right: 14px;
                width: 32px;
                height: 32px;
                min-width: 32px;
                min-height: 32px;
                border-radius: 10px;
            }
            
            /* Impedisce che la tastiera copra il login su schermi molto bassi */
            .auth-gate { padding: 10px; }
            .auth-gate-card { padding: 30px 20px; }
        }
    

        /* =========================================================
           FIX HERO DESKTOP: testo separato dall'immagine
           Ogni titolo rimane dentro la sua colonna, senza invadere
           la card immagine a destra.
           ========================================================= */
        .hero-layout,
        .split-layout {
            grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.72fr);
            gap: clamp(22px, 2.4vw, 36px);
            align-items: center;
        }

        .hero-copy,
        .split-copy {
            min-width: 0;
            max-width: 100%;
            overflow-wrap: normal;
        }

        .hero-title {
            max-width: 100%;
            font-size: clamp(3rem, 4.7vw, 4.95rem);
            line-height: 0.96;
            white-space: normal;
            overflow-wrap: normal;
            word-break: normal;
            hyphens: none;
        }

        .hero-lead {
            max-width: 620px;
        }

        .hero-visual,
        .split-visual {
            min-width: 0;
            width: 100%;
            max-width: 520px;
            justify-self: end;
        }

        .hero-visual .media-panel,
        .split-visual .media-panel,
        .hero-visual img,
        .split-visual img {
            max-width: 100%;
        }

        @media (max-width: 1100px) {
            .hero-layout,
            .split-layout {
                grid-template-columns: 1fr;
            }

            .hero-title {
                font-size: clamp(2.8rem, 11vw, 5rem);
            }

            .hero-visual,
            .split-visual {
                justify-self: center;
                max-width: 720px;
            }
        }

        @media (min-width: 1101px) and (max-width: 1320px) {
            .hero-title {
                font-size: clamp(3rem, 4.35vw, 4.55rem);
            }

            .hero-visual,
            .split-visual {
                max-width: 500px;
            }
        }


        /* =========================================================
           FIX DEFINITIVO HERO DESKTOP
           Blocca il testo nella colonna sinistra e impedisce overlap
           con immagine/card a destra anche con titoli molto lunghi.
           ========================================================= */
        .page-hero .hero-layout,
        .page-hero .split-layout {
            grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.82fr) !important;
            gap: clamp(34px, 4vw, 64px) !important;
            align-items: center !important;
        }

        .page-hero .hero-copy,
        .page-hero .split-copy {
            min-width: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow: visible !important;
            z-index: 2;
        }

        .page-hero .hero-title {
            max-width: 100% !important;
            font-size: clamp(2.85rem, 3.55vw, 4rem) !important;
            line-height: 0.98 !important;
            letter-spacing: 0.035em !important;
            white-space: normal !important;
            overflow-wrap: normal !important;
            word-break: normal !important;
            hyphens: none !important;
        }

        .page-hero .hero-lead {
            max-width: 100% !important;
        }

        .page-hero .hero-visual,
        .page-hero .split-visual {
            position: relative;
            z-index: 1;
            min-width: 0 !important;
            width: 100% !important;
            max-width: 560px !important;
            justify-self: end !important;
        }

        .page-hero .hero-visual .media-panel,
        .page-hero .split-visual .media-panel,
        .page-hero .hero-visual img,
        .page-hero .split-visual img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            object-fit: cover !important;
        }

        @media (min-width: 1101px) and (max-width: 1500px) {
            .page-hero .hero-layout,
            .page-hero .split-layout {
                grid-template-columns: minmax(0, 0.84fr) minmax(330px, 0.76fr) !important;
                gap: clamp(30px, 3.4vw, 52px) !important;
            }

            .page-hero .hero-title {
                font-size: clamp(2.65rem, 3.25vw, 3.65rem) !important;
                letter-spacing: 0.025em !important;
            }

            .page-hero .hero-visual,
            .page-hero .split-visual {
                max-width: 500px !important;
            }
        }

        @media (max-width: 1100px) {
            .page-hero .hero-layout,
            .page-hero .split-layout {
                grid-template-columns: 1fr !important;
                gap: 28px !important;
            }

            .page-hero .hero-title {
                font-size: clamp(2.8rem, 10vw, 5rem) !important;
            }

            .page-hero .hero-visual,
            .page-hero .split-visual {
                justify-self: center !important;
                max-width: 720px !important;
            }
        }


        /* =========================================================
           FIX REALE HERO: nessun testo sotto/sopra l'immagine
           - la colonna immagine resta fisica e separata
           - il titolo viene auto-ridimensionato via JS se l'admin
             inserisce testi lunghi tipo COLLABORAZIONI
           ========================================================= */
        .page-hero .container.hero-layout,
        .page-hero .container.split-layout {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) minmax(360px, 500px) !important;
            column-gap: clamp(44px, 5vw, 86px) !important;
            row-gap: 32px !important;
            align-items: center !important;
        }

        .page-hero .hero-copy,
        .page-hero .split-copy {
            grid-column: 1 !important;
            min-width: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow: visible !important;
            position: relative !important;
            z-index: 1 !important;
        }

        .page-hero .hero-visual,
        .page-hero .split-visual {
            grid-column: 2 !important;
            min-width: 0 !important;
            width: 100% !important;
            max-width: 500px !important;
            justify-self: end !important;
            align-self: center !important;
            position: relative !important;
            z-index: 2 !important;
        }

        .page-hero .hero-title {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            margin-right: 0 !important;
            white-space: normal !important;
            text-wrap: balance;
            overflow-wrap: normal !important;
            word-break: normal !important;
            hyphens: none !important;
            line-height: 0.94 !important;
            letter-spacing: 0.025em !important;
            font-size: clamp(3rem, 4.05vw, 4.8rem) !important;
        }

        .page-hero .hero-title.bs-title-break-safe {
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
        }

        .page-hero .hero-visual .media-panel,
        .page-hero .split-visual .media-panel {
            width: 100% !important;
            max-width: 100% !important;
            overflow: hidden !important;
        }

        .page-hero .hero-visual img,
        .page-hero .split-visual img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            object-fit: cover !important;
        }

        @media (min-width: 1101px) and (max-width: 1450px) {
            .page-hero .container.hero-layout,
            .page-hero .container.split-layout {
                grid-template-columns: minmax(0, 1fr) minmax(320px, 470px) !important;
                column-gap: clamp(42px, 4.6vw, 70px) !important;
            }

            .page-hero .hero-visual,
            .page-hero .split-visual {
                max-width: 470px !important;
            }

            .page-hero .hero-title {
                font-size: clamp(2.55rem, 3.6vw, 4.05rem) !important;
            }
        }

        @media (max-width: 1100px) {
            .page-hero .container.hero-layout,
            .page-hero .container.split-layout {
                grid-template-columns: 1fr !important;
                gap: 28px !important;
            }

            .page-hero .hero-copy,
            .page-hero .split-copy,
            .page-hero .hero-visual,
            .page-hero .split-visual {
                grid-column: 1 !important;
                justify-self: center !important;
                max-width: 720px !important;
            }

            .page-hero .hero-title {
                font-size: clamp(2.8rem, 10vw, 5rem) !important;
            }
        }


        
        /* ==============================
           BLACK SIX PATCH: Alleanza + resource image toggles
           ============================== */
        html, body, * {
            scrollbar-width: none !important;
        }
        html::-webkit-scrollbar,
        body::-webkit-scrollbar,
        *::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
            display: none !important;
            background: transparent !important;
        }

        .hero-war-image {
            width: 100%;
            border-radius: 24px;
            box-shadow: 0 24px 56px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.05) inset;
            filter: saturate(1.08) contrast(1.04);
        }
        .media-panel:has(.hero-war-image) {
            background: linear-gradient(180deg, rgba(18,22,31,.94), rgba(8,10,15,.98));
            box-shadow: 0 24px 56px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
        }
        .media-panel:has(.hero-war-image)::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: radial-gradient(circle at 78% 18%, rgba(255,122,44,.16), transparent 22%), radial-gradient(circle at 16% 86%, rgba(255,180,64,.10), transparent 28%);
        }
        .fire-title {
            background: linear-gradient(180deg, #fff7d9 0%, #ffd77a 18%, #ffb45c 48%, #ff7b3d 72%, #ffe7a6 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 12px rgba(255,146,69,0.18), 0 0 26px rgba(255,93,34,0.10);
            filter: drop-shadow(0 12px 20px rgba(255,116,0,0.12));
        }
        .spotlight-card.spotlight-profile {
            grid-template-columns: minmax(0, 0.94fr) minmax(360px, 0.78fr);
            gap: 30px;
            align-items: center;
        }
        .spotlight-card.spotlight-profile h2 {
            font-size: clamp(3.2rem, 5vw, 5.8rem);
            line-height: .95;
            max-width: 100%;
            overflow-wrap: anywhere;
            margin: 12px 0 18px;
        }
        .spotlight-profile .profile-figure {
            position: relative;
            overflow: visible;
            border-radius: 30px;
            border: 1px solid rgba(255,180,90,0.18);
            background: linear-gradient(180deg, rgba(18,22,31,.95), rgba(8,10,15,.98));
            box-shadow: 0 26px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,128,0,.06);
            padding: 14px;
        }
        .spotlight-profile .profile-figure::before {
            content: '';
            position: absolute;
            inset: -12px;
            border-radius: 36px;
            background: radial-gradient(circle at 80% 10%, rgba(255,128,54,.42), transparent 24%), radial-gradient(circle at 18% 84%, rgba(255,180,70,.26), transparent 28%), linear-gradient(135deg, rgba(255,170,82,.18), transparent 35%, rgba(255,84,24,.12) 78%, transparent 100%);
            box-shadow: 0 0 24px rgba(255,122,44,.20), 0 0 52px rgba(255,98,0,.12);
            z-index: 0;
            pointer-events: none;
        }
        .spotlight-profile .profile-figure img {
            position: relative;
            z-index: 1;
            width: 100%;
            border-radius: 22px !important;
            box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.06) inset;
            filter: saturate(1.06) contrast(1.03);
        }
        .spotlight-profile .profile-badge {
            position: absolute;
            z-index: 2;
            top: 18px;
            left: 18px;
            background: rgba(6,8,12,.78);
            border: 1px solid rgba(244,212,140,.26);
            box-shadow: 0 10px 20px rgba(0,0,0,.28);
        }

        .alliance-offer-card {
            position: relative;
            max-width: 980px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(240px, 0.36fr);
            gap: 24px;
            align-items: center;
            padding: 34px;
            border-radius: 30px;
            border: 1px solid rgba(244, 212, 140, 0.18);
            background:
                radial-gradient(circle at 88% 12%, rgba(255,146,69,0.14), transparent 28%),
                radial-gradient(circle at 14% 85%, rgba(122,217,255,0.08), transparent 32%),
                linear-gradient(145deg, rgba(14,18,25,0.96), rgba(8,10,15,0.98));
            box-shadow: 0 24px 58px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.06);
            overflow: hidden;
        }
        .alliance-offer-card .offer-topline {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 34px;
            padding: 0 16px;
            border-radius: 999px;
            border: 1px solid rgba(244,212,140,0.20);
            background: rgba(255,255,255,0.04);
            color: var(--gold-soft);
            font-size: .76rem;
            font-weight: 900;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .alliance-offer-card .alliance-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(3rem, 7vw, 5.4rem);
            line-height: .9;
            letter-spacing: .05em;
            margin: 16px 0 12px;
        }
        .alliance-offer-card .alliance-copy {
            color: var(--muted-soft);
            line-height: 1.75;
            max-width: 36rem;
        }
        .alliance-offer-main {
            min-width: 0;
        }
        .alliance-plan-shell {
            display: grid;
            gap: 18px;
            margin-top: 24px;
        }
        .alliance-promo-card {
            display: grid;
            grid-template-columns: minmax(0, .8fr) minmax(180px, .55fr);
            gap: 14px;
            align-items: center;
            margin-top: 22px;
            padding: 16px;
            border-radius: 22px;
            border: 1px solid rgba(244,212,140,.28);
            background:
                radial-gradient(circle at 0% 0%, rgba(255,210,112,.16), transparent 34%),
                linear-gradient(135deg, rgba(32,24,14,.82), rgba(10,12,18,.92));
            box-shadow: 0 18px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
        }
        .alliance-promo-copy {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 5px;
        }
        .alliance-promo-copy span,
        .alliance-promo-field span {
            color: var(--gold-soft);
            font-size: .72rem;
            font-weight: 900;
            letter-spacing: .14em;
            text-transform: uppercase;
        }
        .alliance-promo-copy strong {
            color: var(--gold-bright);
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2.1rem, 4vw, 3.2rem);
            line-height: .9;
            letter-spacing: .06em;
        }
        .alliance-promo-field {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 7px;
        }
        .alliance-promo-controls {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 8px;
            min-width: 0;
        }
        .alliance-promo-field input {
            width: 100%;
            min-height: 48px;
            border-radius: 16px;
            border: 1px solid rgba(244,212,140,.22);
            background: rgba(0,0,0,.22);
            color: var(--gold-bright);
            padding: 0 14px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .alliance-promo-validate {
            min-height: 42px;
            border: 1px solid rgba(244,212,140,.28);
            border-radius: 14px;
            background: linear-gradient(135deg, #f6d28b, #ff9350);
            color: #120d08;
            font-size: .74rem;
            font-weight: 1000;
            letter-spacing: .12em;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow: 0 12px 24px rgba(255,143,82,.18);
        }
        .alliance-promo-validate:disabled {
            opacity: .68;
            cursor: progress;
        }
        .alliance-promo-card small {
            grid-column: 1 / -1;
            color: rgba(247,242,232,.66);
            line-height: 1.45;
        }
        .alliance-promo-card.is-active {
            border-color: rgba(158,230,184,.48);
            box-shadow: 0 18px 38px rgba(0,0,0,.24), 0 0 28px rgba(158,230,184,.10), inset 0 1px 0 rgba(255,255,255,.07);
        }
        .alliance-promo-card.is-active small {
            color: var(--green);
            font-weight: 800;
        }
        .alliance-plan-group {
            min-width: 0;
            padding: 16px;
            border-radius: 22px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.025);
        }
        .alliance-plan-group[hidden],
        .alliance-bank-transfer[hidden] {
            display: none !important;
        }
        .alliance-plan-heading {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
            text-transform: uppercase;
        }
        .alliance-plan-heading span {
            color: var(--gold-bright);
            font-size: .78rem;
            font-weight: 900;
            letter-spacing: .14em;
        }
        .alliance-plan-heading small {
            color: rgba(247,242,232,.58);
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .08em;
            white-space: nowrap;
        }
        .alliance-plan-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }
        .alliance-plan-option {
            position: relative;
            display: block;
            min-width: 0;
            cursor: pointer;
        }
        .alliance-plan-radio {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .alliance-plan-content {
            display: flex;
            min-height: 94px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 14px 10px;
            border-radius: 18px;
            border: 1px solid rgba(255,255,255,0.10);
            background: linear-gradient(180deg, rgba(20,24,32,.72), rgba(9,11,16,.86));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
            text-align: center;
            transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
        }
        .alliance-plan-option:hover .alliance-plan-content,
        .alliance-plan-option.is-selected .alliance-plan-content,
        .alliance-plan-option:has(.alliance-plan-radio:checked) .alliance-plan-content {
            transform: translateY(-2px);
            border-color: rgba(244,212,140,.42);
            background:
                radial-gradient(circle at 80% 12%, rgba(255,152,76,.18), transparent 36%),
                linear-gradient(180deg, rgba(35,30,24,.82), rgba(12,13,18,.94));
            box-shadow: 0 16px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
        }
        .alliance-plan-bots {
            color: rgba(255,255,255,.84);
            font-size: .82rem;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .alliance-plan-price {
            color: var(--gold-bright);
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2.25rem, 5vw, 3.15rem);
            line-height: .9;
            letter-spacing: .04em;
        }
        .alliance-selected-preview {
            display: flex;
            width: 100%;
            min-width: 0;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 18px 14px;
            border-radius: 22px;
            border: 1px solid rgba(244,212,140,.16);
            background: rgba(0,0,0,.16);
        }
        .alliance-selected-preview small,
        .alliance-form-summary span {
            color: rgba(247,242,232,.62);
            font-size: .72rem;
            font-weight: 900;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .alliance-selected-preview span {
            color: rgba(255,255,255,.82);
            font-weight: 900;
            letter-spacing: .04em;
            text-align: center;
        }
        #alliance-open-form {
            width: min(100%, 210px);
            justify-content: center;
            align-self: center;
        }
        .alliance-offer-price {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 14px;
            width: min(100%, 300px);
            min-height: 0;
            margin-left: auto;
            align-self: center;
            padding: 24px 24px 26px;
            border-radius: 26px;
            border: 1px solid rgba(255,255,255,0.10);
            background:
                radial-gradient(circle at 50% 0%, rgba(255,255,255,0.07), transparent 36%),
                linear-gradient(180deg, rgba(18,20,27,.84), rgba(7,9,14,.92));
            backdrop-filter: blur(12px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
        }
        .alliance-offer-price strong {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(4rem, 8vw, 6rem);
            line-height: .86;
            color: var(--gold-bright);
            letter-spacing: .02em;
        }
        .alliance-offer-price .js-usd-price {
            color: var(--cyan);
            font-weight: 900;
            white-space: nowrap;
            font-size: 1.55rem;
        }
        .alliance-form-wrap[hidden] { display: none !important; }
        .alliance-form-wrap {
            max-width: 980px;
            margin: 28px auto 0;
            padding: 30px;
            border-radius: 28px;
            border: 1px solid rgba(244, 212, 140, 0.18);
            background: linear-gradient(180deg, rgba(15,18,25,0.96), rgba(8,10,15,0.98));
            box-shadow: 0 18px 42px rgba(0,0,0,0.28);
        }
        .alliance-form-summary {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 6px 18px;
            align-items: center;
            margin: 0 0 22px;
            padding: 16px 18px;
            border-radius: 20px;
            border: 1px solid rgba(244,212,140,.16);
            background:
                radial-gradient(circle at 92% 0%, rgba(255,143,82,.12), transparent 30%),
                rgba(255,255,255,.035);
        }
        .alliance-form-summary strong {
            color: var(--gold-bright);
            font-size: 1.08rem;
            letter-spacing: .02em;
        }
        .alliance-form-summary small {
            color: rgba(255,255,255,.78);
            font-weight: 900;
            text-align: right;
        }
        .alliance-payment-section {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            margin-top: 22px;
        }
        .alliance-payment-option {
            position: relative;
            display: grid;
            grid-template-columns: 48px minmax(0, 1fr);
            gap: 14px;
            align-items: flex-start;
            min-width: 0;
            padding: 16px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,.10);
            background: linear-gradient(180deg, rgba(20,24,32,.70), rgba(9,11,16,.88));
            cursor: pointer;
            transition: border-color .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease;
        }
        .alliance-payment-option input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .alliance-payment-option:hover,
        .alliance-payment-option.is-selected,
        .alliance-payment-option:has(.alliance-payment-radio:checked) {
            transform: translateY(-2px);
            border-color: rgba(244,212,140,.38);
            background:
                radial-gradient(circle at 88% 0%, rgba(255,143,82,.14), transparent 34%),
                linear-gradient(180deg, rgba(29,25,22,.78), rgba(10,12,18,.92));
            box-shadow: 0 16px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
        }
        .alliance-payment-option.is-disabled {
            opacity: .46;
            cursor: not-allowed;
            pointer-events: none;
            transform: none !important;
            filter: grayscale(.25);
        }
        .alliance-payment-icon {
            display: grid;
            width: 48px;
            height: 48px;
            place-items: center;
            border-radius: 16px;
            color: var(--gold-bright);
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(244,212,140,.14);
            font-size: 1.15rem;
        }
        .alliance-payment-text {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 7px;
        }
        .alliance-payment-text strong {
            color: rgba(255,255,255,.9);
            font-size: .96rem;
        }
        .alliance-payment-text small {
            color: rgba(247,242,232,.66);
            line-height: 1.5;
        }
        .crypto-wallet-panel[hidden] {
            display: none !important;
        }
        .crypto-wallet-panel {
            display: grid;
            gap: 14px;
            margin-top: 18px;
            padding: 16px;
            border-radius: 20px;
            border: 1px solid rgba(244,212,140,.18);
            background:
                radial-gradient(circle at 92% 0%, rgba(0,168,132,.12), transparent 34%),
                linear-gradient(180deg, rgba(13,18,24,.82), rgba(7,9,14,.92));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        .crypto-wallet-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            text-transform: uppercase;
        }
        .crypto-wallet-head span {
            color: var(--gold-bright);
            font-size: .78rem;
            font-weight: 900;
            letter-spacing: .12em;
        }
        .crypto-wallet-head small {
            color: rgba(247,242,232,.58);
            font-size: .70rem;
            font-weight: 900;
            letter-spacing: .08em;
            text-align: right;
        }
        .crypto-wallet-list {
            display: grid;
            gap: 10px;
        }
        .crypto-wallet-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 12px;
            align-items: center;
            padding: 12px;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.035);
        }
        .crypto-wallet-row strong {
            display: block;
            color: rgba(255,255,255,.88);
            font-size: .82rem;
            margin-bottom: 6px;
        }
        .crypto-wallet-row code {
            display: block;
            max-width: 100%;
            color: rgba(247,242,232,.76);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: .78rem;
            line-height: 1.45;
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: normal;
        }
        .wallet-copy-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 38px;
            padding: 0 13px;
            border-radius: 999px;
            border: 1px solid rgba(244,212,140,.22);
            background: rgba(244,212,140,.10);
            color: var(--gold-bright);
            font-size: .72rem;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform .18s ease, background .18s ease, border-color .18s ease;
        }
        .wallet-copy-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(244,212,140,.42);
            background: rgba(244,212,140,.16);
        }
        .crypto-wallet-note {
            margin: 0;
            color: rgba(247,242,232,.64);
            font-size: .78rem;
            line-height: 1.5;
        }
        .modal-wallet-panel {
            margin-top: 18px;
        }
        .alliance-submit-actions {
            justify-content: center !important;
            text-align: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .alliance-submit-actions #alliance-submit {
            justify-content: center;
            min-width: min(100%, 320px);
        }
        .alliance-submit-actions #alliance-submit.is-incomplete {
            opacity: .72;
            filter: saturate(.86);
        }
        .alliance-bank-transfer {
            justify-content: center;
            min-width: min(100%, 320px);
        }
        @media (max-width: 700px) {
            .alliance-promo-card {
                grid-template-columns: 1fr;
            }
        }
        .alliance-offer-card.is-stock-locked .alliance-plan-option,
        .alliance-form-wrap.is-stock-locked .alliance-payment-option {
            pointer-events: none;
        }
        .button[disabled], .button.is-disabled {
            opacity: .46;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important;
            filter: grayscale(.25);
        }

        .resource-toggle-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
            margin-top: 18px;
        }
        .resource-choice {
            position: relative;
            border: 1px solid rgba(255,255,255,0.10);
            border-radius: 26px;
            background: linear-gradient(180deg, rgba(18,22,31,.88), rgba(10,12,18,.96));
            padding: 16px;
            box-shadow: 0 16px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
            transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
            min-height: 182px;
        }
        .resource-choice:has(.resource-check:checked) {
            border-color: rgba(244,212,140,0.42);
            box-shadow: 0 18px 38px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(244,212,140,0.08);
        }
        .resource-choice:hover {
            transform: translateY(-2px);
        }
        .resource-pill {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            min-height: 84px;
            padding: 12px 14px;
            border-radius: 22px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.07);
            cursor: pointer;
            user-select: none;
        }
        .resource-check {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .resource-info {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }
        .resource-info img {
            width: 74px;
            height: 74px;
            object-fit: contain;
            border-radius: 18px;
            filter: drop-shadow(0 10px 18px rgba(0,0,0,.34));
            flex: 0 0 auto;
        }
        .resource-text {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .resource-info strong {
            display: block;
            color: var(--text);
            font-weight: 900;
            line-height: 1.05;
            font-size: 1.22rem;
            white-space: nowrap;
        }
        .resource-info small {
            display: block;
            color: rgba(255,255,255,0.58);
            font-size: 0.86rem;
            line-height: 1.1;
        }
        .ios-switch {
            width: 58px;
            height: 34px;
            min-width: 58px;
            padding: 3px;
            border-radius: 999px;
            background: rgba(255,255,255,0.14);
            border: 1px solid rgba(255,255,255,0.10);
            transition: background .22s ease, border-color .22s ease;
        }
        .ios-switch span {
            display: block;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 4px 12px rgba(0,0,0,0.35);
            transition: transform .22s ease;
        }
        .resource-check:checked ~ .ios-switch {
            background: linear-gradient(135deg, var(--gold-soft), var(--copper));
            border-color: rgba(244,212,140,0.52);
        }
        .resource-check:checked ~ .ios-switch span {
            transform: translateX(24px);
        }
        .resource-qty-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 108px;
            gap: 12px;
            margin-top: 16px;
        }
        .resource-qty,
        .resource-unit {
            width: 100%;
            min-height: 50px;
            border-radius: 18px;
            border: 1px solid rgba(255,255,255,0.09);
            background: rgba(255,255,255,0.035);
            color: var(--text);
            padding: 0 16px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }
        .resource-qty::placeholder {
            color: rgba(255,255,255,0.32);
        }
        .resource-unit {
            font-weight: 900;
            letter-spacing: .05em;
            text-transform: uppercase;
            appearance: none;
            background-image: linear-gradient(45deg, transparent 50%, rgba(244,212,140,.95) 50%), linear-gradient(135deg, rgba(244,212,140,.95) 50%, transparent 50%);
            background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
            background-size: 6px 6px, 6px 6px;
            background-repeat: no-repeat;
            padding-right: 34px;
        }
        .resource-choice:not(:has(.resource-check:checked)) .resource-qty,
        .resource-choice:not(:has(.resource-check:checked)) .resource-unit {
            opacity: .62;
        }
        @media (max-width: 760px) {
            .resource-toggle-grid {
                grid-template-columns: 1fr;
            }
            .resource-choice {
                min-height: 170px;
                padding: 14px;
            }
            .resource-pill {
                min-height: 80px;
                padding: 12px;
            }
            .resource-info img {
                width: 68px;
                height: 68px;
            }
            .resource-qty-row {
                grid-template-columns: minmax(0, 1fr) 98px;
            }
        }

    
        /* ==============================
           CONTADINO / PACKAGE CARDS UPGRADE + USD DYNAMIC
           ============================== */
        #packages-list .card,
        #premium-subscriptions .card,
        #abbonamenti .card,
        #bot-pc .card {
            background:
                radial-gradient(circle at 84% 12%, rgba(122,217,255,0.08), transparent 24%),
                radial-gradient(circle at 16% 0%, rgba(255,163,83,0.10), transparent 28%),
                linear-gradient(180deg, rgba(16,20,28,0.96), rgba(8,10,15,0.98));
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 28px;
            box-shadow: 0 22px 52px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05);
            padding: 26px;
        }
        #packages-list .card::after,
        #premium-subscriptions .card::after,
        #abbonamenti .card::after,
        #bot-pc .card::after {
            content: '';
            position: absolute;
            inset: auto 18px 0 18px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,181,98,0.30), transparent);
            pointer-events: none;
        }
        #packages-list .card:hover,
        #premium-subscriptions .card:hover,
        #abbonamenti .card:hover,
        #bot-pc .card:hover {
            border-color: rgba(244,212,140,0.24);
            box-shadow: 0 28px 62px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06);
        }
        #packages-list .price-badge,
        #premium-subscriptions .price-badge,
        #abbonamenti .price-badge,
        #bot-pc .price-badge {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid rgba(244,212,140,0.14);
            background: rgba(255, 143, 82, 0.10);
            color: #ffd8b5;
            font-size: .74rem;
            font-weight: 900;
            letter-spacing: .11em;
            text-transform: uppercase;
        }
        #packages-list .card h3,
        #premium-subscriptions .card h3,
        #abbonamenti .card h3,
        #bot-pc .card h3 {
            font-size: clamp(2rem, 3vw, 2.5rem);
            margin-top: 14px;
            margin-bottom: 16px;
        }
        #packages-list .package-list,
        #premium-subscriptions .package-list,
        #abbonamenti .package-list,
        #bot-pc .package-list {
            gap: 12px;
            min-height: 164px;
        }
        #premium-subscriptions .package-list,
        #abbonamenti .package-list,
        #bot-pc .package-list { min-height: 96px; }
        #packages-list .price-row,
        #premium-subscriptions .price-row,
        #abbonamenti .price-row,
        #bot-pc .price-row {
            align-items: flex-end;
            gap: 14px;
        }
        .price-stack {
            display: grid;
            gap: 4px;
            min-width: 108px;
        }
        .price-stack strong {
            font-size: 1.95rem;
            line-height: 1;
            letter-spacing: -.01em;
        }
        .price-stack .js-auto-usd-price,
        .price-stack .js-usd-price {
            color: var(--cyan);
            font-size: .98rem;
            font-weight: 800;
            white-space: nowrap;
        }

        /* Valuta unica: gli span secondari restano dati tecnici, non visibili */
        .js-usd-price,
        .js-auto-usd-price {
            display: none !important;
        }
        #packages-list .price-row,
        #premium-subscriptions .price-row,
        #abbonamenti .price-row,
        #bot-pc .price-row {
            display: grid;
            grid-template-columns: minmax(0,1fr) auto;
            grid-template-areas:
                "price info"
                "attiva attiva";
            align-items: center;
            gap: 14px 12px;
        }
        #packages-list .price-row .price-stack,
        #premium-subscriptions .price-row .price-stack,
        #abbonamenti .price-row .price-stack,
        #bot-pc .price-row .price-stack {
            grid-area: price;
            align-self: center;
            min-width: 0;
        }
        #packages-list .price-row .receipt-trigger,
        #premium-subscriptions .price-row .receipt-trigger,
        #abbonamenti .price-row .receipt-trigger,
        #bot-pc .price-row .receipt-trigger {
            grid-area: info;
            margin-left: 0;
            justify-self: end;
            width: 44px;
            min-width: 44px;
            height: 44px;
            min-height: 44px;
            padding: 0;
            border-radius: 999px;
            font-size: 0 !important;
            color: transparent !important;
            text-indent: -9999px;
            overflow: hidden;
            position: relative;
            border: 1px solid rgba(244, 212, 140, 0.38);
            background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.10), rgba(42, 81, 119, 0.22) 42%, rgba(7, 16, 28, 0.86));
            box-shadow: 0 10px 22px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.10);
            flex: 0 0 auto;
        }
        #packages-list .price-row .receipt-trigger::before,
        #premium-subscriptions .price-row .receipt-trigger::before,
        #abbonamenti .price-row .receipt-trigger::before,
        #bot-pc .price-row .receipt-trigger::before {
            content: 'i';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-indent: 0;
            color: #edf7ff;
            font-size: 1.05rem;
            font-weight: 900;
            font-style: italic;
            letter-spacing: 0;
            text-transform: none;
        }
        #packages-list .price-row .receipt-trigger:hover,
        #premium-subscriptions .price-row .receipt-trigger:hover,
        #abbonamenti .price-row .receipt-trigger:hover,
        #bot-pc .price-row .receipt-trigger:hover {
            transform: translateY(-1px) scale(1.03);
            box-shadow: 0 14px 26px rgba(0,0,0,.34), 0 0 0 4px rgba(244,212,140,0.10);
        }
        #packages-list .price-row .paypal-trigger,
        #premium-subscriptions .price-row .paypal-trigger,
        #abbonamenti .price-row .paypal-trigger,
        #bot-pc .price-row .paypal-trigger,
        #bot-pc .price-row .bs-free-trial-trigger {
            grid-area: attiva;
            justify-self: center;
            align-self: center;
            min-width: 156px;
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding-top: 0;
            padding-bottom: 0;
            text-align: center;
        }
        #bot-pc .card {
            display: flex;
            flex-direction: column;
        }
        #bot-pc .price-row {
            margin-top: auto;
        }
        #premium-subscriptions .premium-intro-card {
            display: grid;
            gap: 10px;
            margin-bottom: 26px;
            padding: 24px;
            border-radius: 28px;
            border: 1px solid rgba(244,212,140,0.16);
            background:
                radial-gradient(circle at 8% 0%, rgba(255,186,96,0.14), transparent 28%),
                radial-gradient(circle at 92% 20%, rgba(122,217,255,0.10), transparent 30%),
                rgba(8,10,15,0.74);
            box-shadow: 0 22px 52px rgba(0,0,0,0.24);
        }
        #premium-subscriptions .premium-intro-card strong {
            color: var(--gold-soft);
            font-size: clamp(1.35rem, 2.2vw, 2.1rem);
        }
        #premium-subscriptions .premium-intro-card span {
            color: var(--muted);
            font-weight: 700;
        }
        #premium-subscriptions .premium-price-table {
            display: grid;
            gap: 12px;
            margin-top: 18px;
        }
        #premium-subscriptions .premium-price-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 14px;
            align-items: center;
            padding: 12px 12px 12px 14px;
            border-radius: 18px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.035);
        }
        #premium-subscriptions .premium-plan-name {
            display: grid;
            gap: 3px;
            color: #fff8ec;
            font-weight: 900;
        }
        #premium-subscriptions .premium-plan-name small {
            color: var(--muted);
            font-weight: 800;
            letter-spacing: .02em;
        }
        #premium-subscriptions .premium-price-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
        }
        #premium-subscriptions .premium-section-label {
            margin: 18px 0 4px;
            color: var(--cyan);
            font-weight: 950;
            letter-spacing: .10em;
            text-transform: uppercase;
            font-size: .78rem;
        }
        #premium-subscriptions .premium-hot {
            color: #ffbf47;
            font-weight: 950;
        }
        #premium-subscriptions .premium-best {
            color: var(--gold-soft);
            font-weight: 950;
        }
        @media (max-width: 760px) {
            #packages-list .package-list { min-height: auto; }
            .price-stack strong { font-size: 1.7rem; }
        }

        @media (max-width: 760px) {
            #premium-subscriptions .premium-price-row {
                grid-template-columns: 1fr;
                align-items: stretch;
            }
            #premium-subscriptions .premium-price-actions {
                justify-content: space-between;
                width: 100%;
            }
            #premium-subscriptions .premium-price-actions .paypal-trigger {
                min-width: 118px;
            }
        }

    
        /* FINAL FIX: resource switch layout + alliance image */
        .resource-choice {
            min-height: 190px !important;
            padding: 16px !important;
        }
        .resource-pill {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) 60px !important;
            align-items: center !important;
            gap: 14px !important;
            padding: 12px 14px !important;
            min-height: 92px !important;
            overflow: hidden !important;
        }
        .resource-info {
            display: grid !important;
            grid-template-columns: 82px minmax(0, 1fr) !important;
            align-items: center !important;
            gap: 14px !important;
            min-width: 0 !important;
        }
        .resource-info img {
            width: 82px !important;
            height: 82px !important;
            object-fit: contain !important;
            flex: 0 0 auto !important;
            filter: drop-shadow(0 12px 18px rgba(0,0,0,.42)) !important;
        }
        .resource-text {
            min-width: 0 !important;
            overflow: hidden !important;
        }
        .resource-info strong,
        .resource-info small {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
        .ios-switch {
            position: relative !important;
            z-index: 2 !important;
            justify-self: end !important;
            margin: 0 !important;
        }
        .resource-qty-row {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) 108px !important;
            gap: 12px !important;
            margin-top: 14px !important;
            padding-left: 0 !important;
        }
        .resource-qty {
            min-width: 0 !important;
        }
        .alliance-help-image {
            width: min(100%, 230px);
            height: auto;
            margin: 0 auto 8px;
            display: block;
            border-radius: 22px;
            filter: drop-shadow(0 18px 26px rgba(0,0,0,.42));
        }
        .alliance-offer-price {
            text-align: center;
            align-items: center;
        }
        .alliance-offer-price .price-line {
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 12px;
            flex-wrap: wrap;
        }
        @media (max-width: 760px) {
            .resource-info {
                grid-template-columns: 72px minmax(0, 1fr) !important;
            }
            .resource-info img {
                width: 72px !important;
                height: 72px !important;
            }
            .resource-pill {
                grid-template-columns: minmax(0, 1fr) 58px !important;
            }
        }

    
        /* === FINAL PATCH: ripristino profilo, risorse sistemate davvero === */
        #view-resources .resource-toggle-grid{
            display:grid !important;
            grid-template-columns:repeat(2,minmax(330px,1fr)) !important;
            gap:22px !important;
            margin-top:18px !important;
            max-width:860px !important;
            padding-top:0 !important;
        }
        #view-resources .resource-choice{
            position:relative !important;
            min-height:auto !important;
            padding:16px !important;
            border-radius:26px !important;
            border:1px solid rgba(255,255,255,.10) !important;
            background:linear-gradient(180deg,rgba(18,22,31,.92),rgba(10,12,18,.98)) !important;
            box-shadow:0 16px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
            overflow:visible !important;
        }
        #view-resources .resource-choice:has(.resource-check:checked){
            border-color:rgba(244,212,140,.48) !important;
            box-shadow:0 20px 42px rgba(0,0,0,.28),0 0 0 1px rgba(244,212,140,.08), inset 0 1px 0 rgba(255,255,255,.06) !important;
        }
        #view-resources .resource-pill{
            display:grid !important;
            grid-template-columns:88px minmax(0,1fr) 62px !important;
            align-items:center !important;
            gap:14px !important;
            min-height:98px !important;
            padding:12px 14px !important;
            border-radius:22px !important;
            border:1px solid rgba(255,255,255,.08) !important;
            background:rgba(255,255,255,.035) !important;
            cursor:pointer !important;
        }
        #view-resources .resource-check{
            position:absolute !important;
            opacity:0 !important;
            pointer-events:none !important;
        }
        #view-resources .resource-img-wrap{
            width:88px !important;
            height:88px !important;
            display:grid !important;
            place-items:center !important;
            border-radius:20px !important;
            overflow:visible !important;
        }
        #view-resources .resource-img-wrap img{
            width:88px !important;
            height:88px !important;
            object-fit:contain !important;
            max-width:none !important;
            filter:drop-shadow(0 12px 18px rgba(0,0,0,.42)) !important;
            border-radius:20px !important;
        }
        #view-resources .resource-text{
            display:flex !important;
            flex-direction:column !important;
            gap:5px !important;
            min-width:0 !important;
            overflow:visible !important;
        }
        #view-resources .resource-text strong{
            display:block !important;
            font-size:1.45rem !important;
            line-height:1.05 !important;
            font-weight:900 !important;
            color:var(--text) !important;
            white-space:normal !important;
        }
        #view-resources .resource-text small{
            display:block !important;
            font-size:.92rem !important;
            line-height:1.1 !important;
            color:rgba(255,255,255,.66) !important;
            white-space:normal !important;
        }
        #view-resources .ios-switch{
            width:56px !important;
            height:32px !important;
            min-width:56px !important;
            padding:3px !important;
            border-radius:999px !important;
            background:rgba(255,255,255,.15) !important;
            border:1px solid rgba(255,255,255,.12) !important;
            justify-self:end !important;
            align-self:center !important;
            position:relative !important;
            z-index:3 !important;
            margin:0 !important;
        }
        #view-resources .ios-switch span{
            display:block !important;
            width:24px !important;
            height:24px !important;
            border-radius:50% !important;
            background:#fff !important;
            box-shadow:0 4px 12px rgba(0,0,0,.35) !important;
            transition:transform .22s ease !important;
        }
        #view-resources .resource-check:checked ~ .ios-switch{
            background:linear-gradient(135deg,var(--gold-soft),var(--copper)) !important;
            border-color:rgba(244,212,140,.55) !important;
        }
        #view-resources .resource-check:checked ~ .ios-switch span{
            transform:translateX(24px) !important;
        }
        #view-resources .resource-qty-row{
            display:grid !important;
            grid-template-columns:minmax(0,1fr) 98px !important;
            gap:12px !important;
            margin-top:14px !important;
            padding-left:0 !important;
        }
        #view-resources .resource-qty,
        #view-resources .resource-unit{
            width:100% !important;
            min-height:50px !important;
            border-radius:16px !important;
            border:1px solid rgba(255,255,255,.09) !important;
            background:rgba(0,0,0,.18) !important;
            color:var(--text) !important;
            padding:0 14px !important;
            font-size:1rem !important;
        }
        #view-resources .resource-qty::placeholder{
            color:rgba(255,255,255,.40) !important;
        }
        #view-resources .resource-unit{
            font-weight:900 !important;
            letter-spacing:.05em !important;
            text-transform:uppercase !important;
            appearance:none !important;
        }
        @media (max-width: 760px){
            #view-resources .resource-toggle-grid{
                grid-template-columns:1fr !important;
                max-width:100% !important;
            }
            #view-resources .resource-pill{
                grid-template-columns:76px minmax(0,1fr) 56px !important;
            }
            #view-resources .resource-img-wrap,
            #view-resources .resource-img-wrap img{
                width:76px !important;
                height:76px !important;
            }
            #view-resources .resource-text strong{
                font-size:1.25rem !important;
            }
            #view-resources .resource-text small{
                font-size:.86rem !important;
            }
            #view-resources .resource-qty-row{
                grid-template-columns:minmax(0,1fr) 84px !important;
            }
        }


        /* === PATCH RUSLAN 04-05 FIX: upload logo sticker, game nick editabile, preview sticker random === */
        #view-stickers .logo-upload-box {
            position: relative;
            display: grid;
            grid-template-columns: 74px minmax(0, 1fr);
            gap: 14px;
            align-items: center;
            min-height: 92px;
            padding: 14px;
            border-radius: 20px;
            border: 1px dashed rgba(244,212,140,.34);
            background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
            cursor: pointer;
            transition: border-color .22s ease, transform .22s ease, background .22s ease;
        }
        #view-stickers .logo-upload-box:hover {
            border-color: rgba(244,212,140,.62);
            transform: translateY(-1px);
            background: linear-gradient(180deg, rgba(244,212,140,.08), rgba(255,255,255,.025));
        }
        #view-stickers .logo-upload-box input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
        }
        #view-stickers .logo-upload-icon {
            width: 74px;
            height: 74px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            font-size: 1.9rem;
            color: var(--gold-soft);
            background: radial-gradient(circle at 30% 20%, rgba(244,212,140,.22), transparent 58%), rgba(0,0,0,.18);
            border: 1px solid rgba(255,255,255,.08);
            overflow: hidden;
        }
        #view-stickers .logo-upload-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        #view-stickers .logo-upload-copy strong {
            display: block;
            color: var(--text);
            font-weight: 900;
            margin-bottom: 4px;
        }
        #view-stickers .logo-upload-copy span {
            display: block;
            color: rgba(255,255,255,.58);
            font-size: .9rem;
            line-height: 1.35;
        }
        #view-stickers #sticker-logo-file-name {
            color: var(--gold-soft);
            font-weight: 800;
            margin-top: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        #view-stickers .sticker-preview-card {
            position: sticky;
            top: 116px;
            align-self: start;
            border-radius: 28px;
            border: 1px solid rgba(244,212,140,.18);
            background:
                radial-gradient(circle at 80% 10%, rgba(244,212,140,.16), transparent 30%),
                radial-gradient(circle at 16% 84%, rgba(122,217,255,.10), transparent 34%),
                linear-gradient(180deg, rgba(18,22,31,.82), rgba(7,9,14,.96));
            box-shadow: 0 22px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
            padding: 22px;
            min-height: 520px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }
        #view-stickers .sticker-preview-top {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-bottom: 16px;
            min-height: 86px;
        }
        #view-stickers .sticker-preview-top h3 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2.3rem, 3.5vw, 3.8rem);
            line-height: .92;
            letter-spacing: .04em;
            margin: 0 auto;
            width: 100%;
            text-align: center;
        }
        #view-stickers .sticker-preview-emoji {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 74px;
            height: 74px;
            border-radius: 22px;
            display: grid;
            place-items: center;
            font-size: 2.6rem;
            background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
            border: 1px solid rgba(255,255,255,.09);
            box-shadow: 0 16px 28px rgba(0,0,0,.26), 0 0 0 1px rgba(244,212,140,.08) inset;
            transition: transform .28s ease, filter .28s ease;
        }
        #view-stickers .sticker-preview-frame {
            position: relative;
            min-height: 310px;
            border-radius: 24px;
            border: 1px solid rgba(255,255,255,.08);
            background: radial-gradient(circle at center, rgba(244,212,140,.10), transparent 60%), rgba(0,0,0,.22);
            display: grid;
            place-items: center;
            overflow: hidden;
        }
        #view-stickers .sticker-preview-frame img {
            width: min(100%, 430px);
            max-height: 310px;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 18px 28px rgba(0,0,0,.48));
            transition: transform .28s ease, opacity .28s ease, filter .28s ease;
        }
        #view-stickers .sticker-preview-card.is-changing .sticker-preview-frame img {
            opacity: .25;
            transform: scale(.94) rotate(-1.5deg);
            filter: blur(.6px) drop-shadow(0 18px 28px rgba(0,0,0,.48));
        }
        #view-stickers .sticker-preview-card.is-changing .sticker-preview-emoji {
            transform: translateY(-50%) scale(.9) rotate(-6deg);
            filter: blur(.3px);
        }
        #view-stickers .sticker-preview-card p {
            color: rgba(255,255,255,.66);
            line-height: 1.55;
            margin: 16px 0 0;
        }
        #view-stickers .sticker-preview-bottom {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid rgba(255,255,255,.08);
            color: rgba(244,212,140,.82);
            font-weight: 900;
            font-size: .82rem;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        @media (max-width: 980px) {
            #view-stickers .sticker-preview-card { position: relative; top: auto; min-height: auto; }
        }
        #resource-game:not([disabled]) {
            border-color: rgba(244,212,140,.22) !important;
            box-shadow: 0 0 0 1px rgba(244,212,140,.04) inset;
        }
        #custom-request .spotlight-card {
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
            gap: 28px;
        }
        .quote-side-card {
            position: sticky;
            top: 116px;
            align-self: start;
            border-radius: 28px;
            border: 1px solid rgba(244,212,140,.18);
            background:
                radial-gradient(circle at 80% 10%, rgba(244,212,140,.16), transparent 30%),
                radial-gradient(circle at 16% 84%, rgba(122,217,255,.10), transparent 34%),
                linear-gradient(180deg, rgba(18,22,31,.82), rgba(7,9,14,.96));
            box-shadow: 0 22px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
            padding: 24px;
            min-height: 390px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }
        .quote-side-card::before {
            content: "";
            position: absolute;
            inset: -80px -80px auto auto;
            width: 190px;
            height: 190px;
            border-radius: 50%;
            background: rgba(244,212,140,.08);
            filter: blur(6px);
            pointer-events: none;
        }
        .quote-side-emoji {
            width: 108px;
            height: 108px;
            display: grid;
            place-items: center;
            border-radius: 28px;
            font-size: 4.2rem;
            background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
            border: 1px solid rgba(255,255,255,.09);
            box-shadow: 0 18px 32px rgba(0,0,0,.28), 0 0 0 1px rgba(244,212,140,.08) inset;
            transition: transform .28s ease, filter .28s ease;
        }
        .quote-side-emoji.is-changing {
            transform: scale(.92) rotate(-5deg);
            filter: blur(.3px);
        }
        .quote-side-card h3 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2.5rem, 4vw, 4.2rem);
            line-height: .92;
            letter-spacing: .04em;
            margin: 20px 0 10px;
        }
        .quote-side-card p {
            color: rgba(255,255,255,.66);
            line-height: 1.65;
            margin: 0;
        }
        .quote-side-list {
            display: grid;
            gap: 10px;
            margin-top: 18px;
        }
        .quote-side-list span {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 42px;
            padding: 0 14px;
            border-radius: 999px;
            background: rgba(255,255,255,.045);
            border: 1px solid rgba(255,255,255,.075);
            color: rgba(255,255,255,.78);
            font-weight: 800;
            font-size: .9rem;
        }
        .quote-side-bottom {
            margin-top: 22px;
            padding: 14px;
            border-radius: 18px;
            background: rgba(0,0,0,.18);
            border: 1px solid rgba(244,212,140,.12);
            color: var(--gold-soft);
            font-weight: 900;
            letter-spacing: .04em;
            text-transform: uppercase;
            font-size: .78rem;
        }
        @media (max-width: 1100px) {
            #custom-request .spotlight-card { grid-template-columns: 1fr !important; }
            .quote-side-card { position: relative; top: auto; min-height: 300px; }
        }


        /* === PATCH FINALE: stickers piÃ¹ piccoli + sezioni centrate === */
        html, body {
            overflow-x: hidden;
        }
        .container,
        .site-header .container.header-shell,
        .page-hero .container.hero-layout,
        .page-hero .container.split-layout,
        .section > .container {
            margin-left: auto !important;
            margin-right: auto !important;
        }
        #view-resources #custom-request .spotlight-card,
        #view-stickers .section-muted .spotlight-card {
            width: min(1040px, 100%) !important;
            margin-left: auto !important;
            margin-right: auto !important;
            align-items: center !important;
            justify-content: center !important;
        }
        #view-stickers .section-muted .spotlight-card {
            grid-template-columns: minmax(0, 1fr) minmax(300px, 390px) !important;
        }
        #view-stickers .sticker-preview-card {
            width: 100%;
            max-width: 390px;
            margin-left: auto;
            margin-right: auto;
            min-height: 470px;
            text-align: center;
        }
        #view-stickers .sticker-preview-top {
            justify-content: center;
            text-align: center;
        }
        #view-stickers .sticker-preview-frame {
            min-height: 260px;
        }
        #view-stickers .sticker-preview-frame img {
            width: min(80%, 344px) !important;
            max-height: 248px !important;
        }
        #view-stickers .sticker-preview-card p {
            max-width: 340px;
            margin-left: auto;
            margin-right: auto;
        }
        #view-resources .resource-grid,
        #view-resources .resource-options-grid,
        #view-resources .resource-card-grid {
            margin-left: auto !important;
            margin-right: auto !important;
            justify-content: center !important;
        }
        #view-resources .resources-form,
        #view-resources .spotlight-copy {
            margin-left: auto !important;
            margin-right: auto !important;
        }
        @media (max-width: 980px) {
            #view-stickers .section-muted .spotlight-card {
                grid-template-columns: 1fr !important;
                max-width: 720px !important;
            }
            #view-stickers .sticker-preview-card {
                max-width: 420px;
            }
        }


        /* === FIX: Anteprima Stickers alta, pulita, senza emoji === */
        #view-stickers .section-muted .spotlight-card {
            align-items: flex-start !important;
        }
        #view-stickers .sticker-preview-card {
            transform: translateY(-118px) !important;
            margin-top: 0 !important;
            padding: 26px !important;
            border-color: rgba(244,212,140,.22) !important;
            box-shadow: 0 28px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07) !important;
        }
        #view-stickers .sticker-preview-top {
            min-height: auto !important;
            margin-bottom: 18px !important;
            display: block !important;
            text-align: center !important;
        }
        #view-stickers .sticker-preview-top h3 {
            width: 100% !important;
            text-align: center !important;
            margin: 0 auto !important;
            padding: 0 !important;
        }
        #view-stickers .sticker-preview-emoji {
            display: none !important;
        }
        #view-stickers .sticker-preview-frame {
            min-height: 285px !important;
        }
        #view-stickers .sticker-preview-frame img {
            width: min(88%, 380px) !important;
            max-height: 270px !important;
        }
        @media (max-width: 980px) {
            #view-stickers .sticker-preview-card {
                transform: none !important;
            }
        }

    

        /* === GODMOD: manutenzione premium + blocchi risorse live === */
        body.site-maintenance-active { overflow: hidden; }
        body.site-maintenance-active .site-lock-screen { display: grid; }
        body.site-maintenance-active .site-lock-card {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            background:
                radial-gradient(circle at 16% 18%, rgba(255,139,55,.20), transparent 28%),
                radial-gradient(circle at 86% 12%, rgba(122,217,255,.12), transparent 30%),
                linear-gradient(145deg, rgba(18,22,31,.98), rgba(5,7,11,.99));
        }
        .maintenance-gear {
            width: 86px; height: 86px; margin: 0 auto 8px;
            display: grid; place-items: center; border-radius: 50%;
            border: 1px solid rgba(244,212,140,.22);
            background: rgba(255,255,255,.045);
            box-shadow: 0 0 34px rgba(255,130,45,.18), inset 0 1px 0 rgba(255,255,255,.08);
            animation: bsGearSpin 5s linear infinite;
        }
        .maintenance-gear i { font-size: 2.35rem; color: var(--gold-soft); filter: drop-shadow(0 0 16px rgba(244,212,140,.28)); }
        @keyframes bsGearSpin { to { transform: rotate(360deg); } }
        .maintenance-pulse {
            margin: 22px auto 0; height: 9px; width: min(360px, 100%); border-radius: 999px; overflow: hidden;
            background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08);
        }
        .maintenance-pulse span { display:block; height:100%; width:46%; border-radius:999px; background: linear-gradient(90deg, rgba(244,212,140,.18), rgba(244,212,140,.92), rgba(122,217,255,.82)); animation: bsPulseRail 2.3s ease-in-out infinite alternate; }
        @keyframes bsPulseRail { from { transform: translateX(-40%); } to { transform: translateX(150%); } }
        .resource-stock-alert {
            margin: 0 auto 24px; max-width: 980px; padding: 18px 20px; border-radius: 24px;
            border: 1px solid rgba(244,212,140,.22);
            background: radial-gradient(circle at 92% 0%, rgba(255,139,55,.15), transparent 30%), linear-gradient(145deg, rgba(18,22,31,.96), rgba(7,9,14,.98));
            box-shadow: 0 18px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
            color: rgba(255,255,255,.86);
        }
        .resource-stock-alert strong { display:block; color:var(--gold-bright); font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:6px; }
        .resource-stock-meter { margin-top:12px; height:10px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }
        .resource-stock-meter span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, #ff3b30 0%, #ff7a18 22%, #ffbf47 48%, #c9f65a 74%, #2fd06f 100%); transition:width .45s ease, background .45s ease; box-shadow:0 0 18px rgba(47,208,111,.18); }
        .resource-stock-label { display:flex; justify-content:space-between; gap:10px; margin-top:8px; color:rgba(255,255,255,.62); font-size:.78rem; font-weight:800; }
        .resource-choice.is-stock-locked, .card.is-stock-locked, .alliance-offer-card.is-stock-locked { opacity:.58; filter:grayscale(.32); }
        .resource-choice.is-stock-locked::after, .card.is-stock-locked::after, .alliance-offer-card.is-stock-locked::after {
            content:'RISORSA TERMINATA'; position:absolute; inset:auto 14px 14px auto; z-index:5; padding:8px 12px; border-radius:999px;
            background:rgba(8,10,15,.92); color:var(--gold-bright); border:1px solid rgba(244,212,140,.24); font-size:.68rem; font-weight:900; letter-spacing:.10em;
        }


        /* ==============================
           MOBILE COMPATIBILITY PATCH
           ============================== */
        .nav-links,
        .hero-copy,
        .hero-visual,
        .spotlight-copy,
        .spotlight-media,
        .section-head,
        .brief-form,
        .form-grid,
        .package-grid,
        .resource-grid,
        .resource-options-grid,
        .resource-card-grid,
        .hub-grid,
        .hero-stat-grid,
        .benefit-grid,
        .grid-2,
        .grid-3,
        .plans-grid,
        .cta-grid {
            min-width: 0;
        }
        .nav-links a,
        .button,
        .button-ghost,
        .button-primary,
        .button-compact {
            touch-action: manipulation;
        }
        @media (max-width: 980px) {
            .site-header .container.header-shell {
                width: min(100% - 20px, 1180px) !important;
                gap: 12px;
            }
            .header-user-rail {
                width: 100%;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 10px;
                padding: 12px 14px;
                border-radius: 18px;
            }
            .nav-wrap {
                width: 100%;
                padding: 14px;
                gap: 12px;
                border-radius: 22px;
            }
            .brand {
                min-width: 0;
                flex: 1;
            }
            .brand-copy {
                min-width: 0;
            }
            .brand-copy strong,
            .brand-copy span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .nav-links {
                gap: 8px;
            }
            .nav-links a,
            .nav-links .telegram-trigger {
                width: 100%;
                padding: 12px 14px;
                border-radius: 14px;
            }
            .hero-layout,
            .split-layout,
            .spotlight-card,
            .hub-grid,
            .package-grid,
            .form-grid,
            .resource-grid,
            .resource-options-grid,
            .resource-card-grid,
            .grid-2,
            .grid-3,
            .hero-stat-grid,
            .benefit-grid,
            .plans-grid,
            .cta-grid {
                grid-template-columns: 1fr !important;
            }
            .page-hero,
            .section {
                padding: 54px 0;
            }
            .page-hero .container.hero-layout,
            .page-hero .container.split-layout,
            .section > .container {
                width: min(100% - 20px, 1180px) !important;
            }
            .hero-title,
            .section-title,
            .spotlight-card h2 {
                font-size: clamp(2.25rem, 9.5vw, 4rem) !important;
                line-height: .96;
            }
            .hero-actions,
            .form-actions,
            .price-row,
            .section-chip-row {
                display: flex;
                flex-direction: column;
                align-items: stretch !important;
                gap: 10px;
            }
            .price-row .price-stack {
                width: 100%;
            }
            .button,
            .button-ghost,
            .button-primary,
            .button-compact {
                width: 100%;
                justify-content: center;
            }
            .card,
            .spotlight-card,
            .panel,
            .media-panel,
            .brief-form,
            .resource-card,
            .resource-option,
            .resource-option-card {
                padding: 20px !important;
                border-radius: 22px !important;
            }
            .scrolling-banner {
                padding: 12px 0;
            }
            .scrolling-text span {
                padding: 0 24px;
                font-size: .92rem;
            }
            .hero-war-image,
            .spotlight-media img,
            .profile-figure img {
                width: 100%;
            }
            .modal-card,
            .modal-shell,
            .site-lock-card {
                width: min(100% - 20px, 720px) !important;
                max-width: calc(100vw - 20px);
            }
            .site-lock-card {
                padding: 24px 18px !important;
            }
        }
        @media (max-width: 640px) {
            .container,
            .site-header .container.header-shell,
            .page-hero .container.hero-layout,
            .page-hero .container.split-layout,
            .section > .container {
                width: min(100% - 16px, 1180px) !important;
            }
            .header-user-rail {
                padding: 10px 12px;
                justify-content: center;
            }
            .nav-wrap {
                padding: 12px;
                border-radius: 18px;
            }
            .brand-mark {
                width: 42px;
                height: 42px;
            }
            .brand-copy strong {
                font-size: .92rem;
            }
            .brand-copy span {
                font-size: .72rem;
            }
            .nav-toggle {
                width: 44px;
                height: 44px;
                border-radius: 14px;
            }
            .hero-title,
            .section-title,
            .spotlight-card h2 {
                font-size: clamp(1.95rem, 10vw, 3rem) !important;
            }
            .hero-lead,
            .section-copy,
            .spotlight-copy p,
            .card p,
            .package-list li,
            .form-field label {
                font-size: .95rem;
            }
            .card,
            .spotlight-card,
            .panel,
            .media-panel,
            .brief-form,
            .resource-card,
            .resource-option,
            .resource-option-card,
            .site-lock-card {
                padding: 16px !important;
                border-radius: 18px !important;
            }
            .hero-stat-grid,
            .section-chip-row,
            .hero-actions,
            .form-actions,
            .price-row {
                gap: 8px;
            }
            .price-badge,
            .panel-tag,
            .hero-kicker,
            .section-kicker,
            .profile-badge {
                max-width: 100%;
                white-space: normal;
                text-align: center;
            }
            .scrolling-text span {
                padding: 0 18px;
                font-size: .84rem;
            }
            .maintenance-gear {
                width: 72px;
                height: 72px;
            }
            .maintenance-gear i {
                font-size: 2rem;
            }
            .maintenance-pulse {
                width: 100%;
            }
        }
        @media (max-width: 420px) {
            .header-user-rail {
                align-items: stretch;
            }
            .nav-user-chip,
            .online-counter,
            #btn-logout {
                width: 100%;
                justify-content: center;
            }
            .brand-copy strong,
            .brand-copy span {
                white-space: normal;
            }
            .hero-title,
            .section-title,
            .spotlight-card h2 {
                font-size: clamp(1.7rem, 11vw, 2.45rem) !important;
            }
            .scrolling-banner::before,
            .scrolling-banner::after {
                width: 36px;
            }
        }


        /* ==============================
           RESPONSIVE SYSTEM PATCH V2
           desktop + tablet + smartphone
           ============================== */
        .site-header,
        .site-header .container.header-shell,
        .nav-wrap,
        .header-user-rail,
        .page-hero .container.hero-layout,
        .page-hero .container.split-layout,
        .spotlight-card,
        .package-grid,
        .form-grid,
        .resource-grid,
        .resource-options-grid,
        .resource-card-grid,
        .hub-grid,
        .hero-stat-grid,
        .price-row,
        .section-head,
        .spotlight-copy,
        .spotlight-media,
        .card,
        .panel,
        .media-panel {
            min-width: 0;
        }
        .package-grid > *,
        .resource-grid > *,
        .resource-options-grid > *,
        .resource-card-grid > *,
        .hub-grid > *,
        .hero-stat-grid > *,
        .form-grid > *,
        .spotlight-card > * {
            min-width: 0;
        }
        #live-toasts {
            max-width: calc(100vw - 20px);
        }
        @media (min-width: 981px) and (max-width: 1280px) {
            .site-header .container.header-shell,
            .page-hero .container.hero-layout,
            .page-hero .container.split-layout,
            .section > .container {
                width: min(100% - 28px, 1180px) !important;
            }
            .nav-wrap {
                gap: 14px;
                padding: 13px 16px;
            }
            .nav-links {
                gap: 12px;
            }
            .nav-links a {
                font-size: .76rem;
                letter-spacing: .11em;
            }
            .brand-copy strong {
                font-size: 1.34rem;
            }
            .hero-layout,
            .split-layout,
            .spotlight-card {
                gap: 22px;
            }
            .hero-title,
            .section-title,
            .spotlight-card h2 {
                font-size: clamp(2.7rem, 5vw, 4.35rem);
            }
            .package-grid,
            .hub-grid,
            .resource-grid,
            .resource-options-grid,
            .resource-card-grid,
            .grid-3 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 1024px) {
            .header-user-rail {
                position: static;
                right: auto;
                top: auto;
                width: 100%;
                max-width: none;
                padding: 0;
                justify-content: flex-end;
                align-items: center;
            }
            .nav-wrap {
                margin-top: 0;
            }
            .site-header {
                padding-top: max(12px, env(safe-area-inset-top));
            }
            .site-header.is-scrolled {
                box-shadow: 0 12px 26px rgba(0,0,0,.20);
            }
        }
        @media (max-width: 980px) {
            .nav-wrap.is-open .nav-links {
                padding-top: 12px;
                margin-top: 8px;
                border-top: 1px solid rgba(255,255,255,.08);
            }
            .nav-links a,
            .nav-links .telegram-trigger {
                background: rgba(255,255,255,.035);
                border: 1px solid rgba(255,255,255,.06);
            }
            .hero-copy,
            .hero-visual,
            .spotlight-copy,
            .spotlight-media {
                width: 100%;
            }
            .hero-visual .panel,
            .spotlight-media,
            .media-panel {
                max-width: 100%;
            }
            .spotlight-card {
                align-items: stretch !important;
            }
            .price-row {
                align-items: stretch !important;
            }
            .price-stack {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }
            #live-toasts {
                left: 10px !important;
                right: 10px !important;
                bottom: 10px !important;
            }
        }
        @media (max-width: 768px) {
            .header-user-rail {
                justify-content: center;
            }
            .nav-user-chip {
                max-width: 100%;
            }
            .online-counter,
            #btn-logout,
            .nav-user-chip {
                min-height: 38px;
            }
            .hero-copy,
            .section-head,
            .spotlight-copy {
                text-align: left;
            }
            .section-head {
                margin-bottom: 28px;
            }
            .package-list {
                gap: 8px;
            }
            .package-list li {
                align-items: flex-start;
            }
        }
        @media (max-width: 640px) {
            .header-user-rail {
                gap: 8px;
            }
            .nav-links a,
            .nav-links .telegram-trigger {
                font-size: .8rem;
                letter-spacing: .08em;
            }
            .hero-actions .button,
            .form-actions .button,
            .price-row .button,
            .section-chip-row .button {
                min-height: 46px;
            }
            .form-field input,
            .form-field textarea,
            .form-field select,
            .brief-form input,
            .brief-form textarea,
            .brief-form select {
                width: 100%;
                min-height: 46px;
            }
            .form-grid,
            .brief-form,
            .package-grid,
            .resource-grid,
            .resource-options-grid,
            .resource-card-grid,
            .hub-grid {
                gap: 14px !important;
            }
            .hero-stat {
                padding: 14px;
            }
        }


        /* ==============================
           FIX BANNER BLOCCATO / MARQUEE FLUIDO
           ============================== */
        .scrolling-banner {
            width: 100%;
        }
        .scrolling-container {
            display: block !important;
            width: 100%;
            min-width: 0;
            overflow: hidden;
        }
        .scrolling-track {
            display: flex;
            align-items: center;
            width: max-content;
            min-width: max-content;
            white-space: nowrap;
            will-change: transform;
            animation: bsSmoothMarquee var(--bs-marquee-duration, 48s) linear infinite;
        }
        .scrolling-track span {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            padding: 0 48px;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--gold-soft);
            letter-spacing: 0.05em;
        }
        @keyframes bsSmoothMarquee {
            from { transform: translate3d(0,0,0); }
            to { transform: translate3d(var(--bs-marquee-distance, -50%),0,0); }
        }
        .site-system-banner {
            position: fixed !important;
            left: 0 !important;
            right: 0 !important;
            top: max(0px, env(safe-area-inset-top)) !important;
            transform: none !important;
            z-index: 240 !important;
            width: 100% !important;
            max-width: none !important;
            min-height: 54px;
            padding: 0 !important;
            border-radius: 0 !important;
            border-left: 0 !important;
            border-right: 0 !important;
            overflow: hidden !important;
            display: flex;
            align-items: center;
            background: rgba(6, 8, 13, 0.94) !important;
            backdrop-filter: blur(16px);
            box-shadow: 0 14px 32px rgba(0,0,0,.38), inset 0 -1px 0 rgba(244,212,140,.12) !important;
            text-align: left !important;
        }
        .site-system-banner-track {
            display: flex;
            align-items: center;
            width: max-content;
            min-width: max-content;
            white-space: nowrap;
            will-change: transform;
            animation: bsSystemBannerRun var(--bs-system-banner-duration, 48s) linear infinite;
        }
        .site-system-banner-track span {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex: 0 0 auto;
            padding: 0 46px;
            min-height: 54px;
            color: var(--gold-bright);
            font-weight: 900;
            font-size: clamp(.92rem, 1.35vw, 1.12rem);
            letter-spacing: .05em;
        }
        @keyframes bsSystemBannerRun {
            from { transform: translate3d(0,0,0); }
            to { transform: translate3d(var(--bs-system-banner-distance, -50%),0,0); }
        }
        .site-system-banner:hover .site-system-banner-track,
        .scrolling-banner:hover .scrolling-track {
            animation-play-state: running !important;
        }
        body:has(.site-system-banner) .site-header {
            margin-top: 54px;
        }
        @supports not selector(:has(*)) {
            body.site-maintenance-active .site-header,
            body.site-locked .site-header {
                margin-top: 54px;
            }
        }
        @media (max-width: 640px) {
            .scrolling-track span {
                padding: 0 24px;
                font-size: .88rem;
            }
            .site-system-banner {
                min-height: 48px;
            }
            .site-system-banner-track span {
                min-height: 48px;
                padding: 0 28px;
                font-size: .86rem;
                letter-spacing: .03em;
            }
            body:has(.site-system-banner) .site-header {
                margin-top: 48px;
            }
            @supports not selector(:has(*)) {
                body.site-maintenance-active .site-header,
                body.site-locked .site-header {
                    margin-top: 48px;
                }
            }
        }

    

        /* === MOBILE HOTFIX 05-05: alliance card + form truly responsive === */
        .alliance-offer-card,
        .alliance-form-wrap {
            min-width: 0;
        }
        .alliance-offer-card > div,
        .alliance-form-wrap > * {
            min-width: 0;
        }
        .alliance-offer-card .package-list,
        .alliance-offer-card .alliance-copy,
        .alliance-offer-card .form-actions,
        .alliance-form-wrap .section-copy {
            max-width: 100%;
        }
        .alliance-offer-card .alliance-title,
        .alliance-offer-card .alliance-copy,
        .alliance-offer-card .package-list li,
        .alliance-form-wrap h2,
        .alliance-form-wrap p {
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .alliance-offer-price > * {
            min-width: 0;
            max-width: 100%;
        }
        .alliance-offer-price .section-kicker,
        .alliance-offer-price .js-usd-price,
        .alliance-offer-price strong {
            text-align: center;
        }
        @media (max-width: 980px) {
            .alliance-offer-card {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
                padding: 22px !important;
                border-radius: 24px !important;
            }
            .alliance-offer-price {
                width: min(100%, 320px);
                margin: 0 auto;
                padding: 22px 18px !important;
                border-radius: 22px !important;
            }
            .alliance-form-wrap {
                padding: 22px 18px !important;
                border-radius: 24px !important;
            }
        }
        @media (max-width: 640px) {
            #view-alliance .section .container {
                width: min(100% - 16px, 1180px) !important;
            }
            #view-alliance .section-head {
                margin-bottom: 22px !important;
            }
            .alliance-offer-card {
                padding: 16px !important;
                gap: 16px !important;
                border-radius: 16px !important;
            }
            .alliance-offer-card .offer-topline,
            .alliance-offer-price .section-kicker {
                width: 100% !important;
                justify-content: center !important;
                text-align: center !important;
                white-space: normal !important;
            }
            .alliance-offer-card .alliance-title {
                font-size: clamp(2.3rem, 13vw, 3.4rem) !important;
                margin: 12px 0 10px !important;
            }
            .alliance-offer-card .alliance-copy {
                line-height: 1.6 !important;
            }
            .alliance-offer-card .package-list {
                margin-top: 14px !important;
            }
            .alliance-offer-card .package-list li {
                align-items: flex-start !important;
                gap: 10px !important;
            }
            .alliance-help-image {
                grid-row: 1 / span 3 !important;
                width: 108px !important;
                margin: 0 !important;
            }
            .alliance-offer-price {
                order: -1 !important;
                display: grid !important;
                grid-template-columns: 112px minmax(0, 1fr) !important;
                align-items: center !important;
                width: 100% !important;
                max-width: none !important;
                padding: 12px !important;
                gap: 10px !important;
                border-radius: 18px !important;
            }
            .alliance-offer-price .section-kicker {
                grid-column: 2 !important;
                min-height: 34px !important;
                padding: 0 10px !important;
                font-size: .68rem !important;
            }
            .alliance-selected-preview {
                grid-column: 2 !important;
                padding: 12px 10px !important;
                border-radius: 16px !important;
                gap: 5px !important;
            }
            #alliance-open-form {
                grid-column: 1 / -1 !important;
                width: 100% !important;
                max-width: none !important;
            }
            .alliance-offer-price .price-line {
                flex-direction: column !important;
                gap: 6px !important;
            }
            .alliance-offer-price strong {
                font-size: clamp(2.8rem, 14vw, 3.8rem) !important;
                line-height: .92 !important;
            }
            .alliance-offer-price .js-usd-price {
                font-size: 1.15rem !important;
                white-space: normal !important;
            }
            .alliance-form-wrap {
                margin-top: 18px !important;
                padding: 18px 14px !important;
                border-radius: 16px !important;
            }
            .alliance-form-wrap .form-grid {
                grid-template-columns: 1fr !important;
                gap: 12px !important;
            }
            .alliance-form-wrap .form-field.full {
                grid-column: auto !important;
            }
            .alliance-form-wrap input,
            .alliance-form-wrap select,
            .alliance-form-wrap textarea {
                width: 100% !important;
                min-width: 0 !important;
            }
            .alliance-payment-section {
                grid-template-columns: 1fr !important;
            }
            .alliance-form-summary {
                grid-template-columns: 1fr !important;
            }
            .alliance-form-summary small {
                text-align: left !important;
            }
        }
        @media (max-width: 520px) {
            .alliance-plan-group {
                padding: 12px !important;
                border-radius: 16px !important;
            }
            .alliance-plan-heading {
                align-items: flex-start !important;
                flex-direction: column !important;
                gap: 4px !important;
            }
            .alliance-plan-heading small {
                white-space: normal !important;
            }
            .alliance-plan-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 8px !important;
            }
            .alliance-plan-option:nth-child(3) {
                grid-column: 1 / -1 !important;
            }
            .alliance-plan-content {
                min-height: 82px !important;
                padding: 12px 6px !important;
                border-radius: 14px !important;
            }
            .alliance-plan-bots {
                font-size: .72rem !important;
            }
            .alliance-plan-price {
                font-size: clamp(2rem, 13vw, 2.75rem) !important;
            }
            .alliance-payment-option {
                grid-template-columns: 42px minmax(0, 1fr) !important;
                padding: 14px !important;
                border-radius: 16px !important;
            }
            .alliance-payment-icon {
                width: 42px !important;
                height: 42px !important;
                border-radius: 14px !important;
            }
            .crypto-wallet-panel {
                padding: 12px !important;
                border-radius: 16px !important;
            }
            .crypto-wallet-head {
                align-items: flex-start !important;
                flex-direction: column !important;
                gap: 4px !important;
            }
            .crypto-wallet-head small {
                text-align: left !important;
            }
            .crypto-wallet-row {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
            }
            .wallet-copy-btn {
                width: 100% !important;
            }
        }



        /* BLACK SIX PATCH SAFE: Sold Out per pacchetto */
        .card.bs-package-soldout { position: relative; overflow: hidden; filter: grayscale(.44) saturate(.42) brightness(.76); }
        .card.bs-package-soldout::before { content:''; position:absolute; inset:0; z-index:9; pointer-events:none; background:linear-gradient(180deg, rgba(178,184,196,.08), rgba(96,103,117,.16)); }
        .card .bs-soldout-overlay { position:absolute; inset:0; z-index:18; pointer-events:none; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22)); }
        .card .bs-soldout-overlay img { width:min(78%, 260px); height:auto; object-fit:contain; transform:rotate(-7deg); filter:drop-shadow(0 16px 28px rgba(0,0,0,.55)) saturate(1.14) brightness(1.06); }
        .card .bs-soldout-message { position:absolute; left:16px; right:16px; bottom:16px; z-index:19; color:#f7f2e8; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; background:rgba(5,7,10,.90); border:1px solid rgba(244,212,140,.20); border-radius:16px; padding:10px 12px 12px; box-shadow:0 10px 28px rgba(0,0,0,.35); backdrop-filter:blur(5px); }
        .card .bs-soldout-text { text-align:center; font-weight:800; line-height:1.3; margin-bottom:9px; }
        .card .bs-soldout-progress { height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
        .card .bs-soldout-progress > span { display:block; width:0%; height:100%; border-radius:999px; background:linear-gradient(90deg, #ff3b30 0%, #ff7a18 28%, #ffbf47 54%, #b7f146 77%, #2fd06f 100%); box-shadow:0 0 18px rgba(47,208,111,.15); transition:width .45s ease, filter .45s ease; }
        .card .bs-soldout-meta { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:7px; font-size:.62rem; color:rgba(255,255,255,.74); font-weight:900; letter-spacing:.08em; }
        .card .bs-soldout-disabled-btn { width:100%; margin-top:10px; display:inline-flex; justify-content:center; align-items:center; min-height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(155,158,165,.28), rgba(88,92,102,.28)); color:rgba(247,242,232,.62); font-weight:900; letter-spacing:.18em; text-transform:uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); opacity:.95; cursor:not-allowed; }
        @media (max-width: 768px) {
            #packages-list .price-row,
            #premium-subscriptions .price-row,
            #abbonamenti .price-row,
            #bot-pc .price-row {
                grid-template-columns: minmax(0,1fr) auto;
                grid-template-areas:
                    "price info"
                    "attiva attiva";
                align-items: center !important;
            }
            #packages-list .price-row .paypal-trigger,
            #premium-subscriptions .price-row .paypal-trigger,
            #abbonamenti .price-row .paypal-trigger,
            #bot-pc .price-row .paypal-trigger,
            #bot-pc .price-row .bs-free-trial-trigger,
            #packages-list .price-row .button.button-primary,
            #premium-subscriptions .price-row .button.button-primary,
            #abbonamenti .price-row .button.button-primary,
            #bot-pc .price-row .button.button-primary {
                width: auto !important;
                min-width: 160px;
                justify-self: center;
            }
            #packages-list .price-row .receipt-trigger,
            #premium-subscriptions .price-row .receipt-trigger,
            #abbonamenti .price-row .receipt-trigger,
            #bot-pc .price-row .receipt-trigger {
                width: 46px;
                min-width: 46px;
                height: 46px;
                min-height: 46px;
            }
        }

        .card.bs-package-soldout .price-row { padding-bottom:72px; }
        .card.bs-package-soldout .paypal-trigger { display:none !important; }
        .card.bs-package-soldout .button-primary { pointer-events:none; opacity:.40; filter:grayscale(.55); }
        .card[data-package-id]::selection { background: transparent; }
        .package-internal-id { display:none !important; }

        /* ===== BLACK SIX MULTILINGUA EUROPEO ===== */
        .nav-links .bs-lang-fab {
            position: relative;
            right: auto;
            top: auto;
            bottom: auto;
            z-index: 240;
            flex: 0 0 auto;
        }
        .bs-lang-trigger {
            width: 42px;
            height: 42px;
            min-height: 42px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            border: 1px solid rgba(244,212,140,.22);
            background: linear-gradient(180deg, rgba(10,14,20,.94), rgba(7,10,16,.90));
            color:#f7f2e8;
            cursor:pointer;
            box-shadow: 0 12px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
            backdrop-filter: blur(14px);
            transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
        }
        .bs-lang-trigger:hover {
            transform: translateY(-1px);
            border-color: rgba(244,212,140,.38);
            box-shadow: 0 16px 34px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.07);
            background: linear-gradient(180deg, rgba(18,23,32,.98), rgba(10,14,20,.94));
        }
        .bs-lang-trigger:focus-visible {
            outline: 2px solid rgba(244,212,140,.55);
            outline-offset: 3px;
        }
        .bs-lang-trigger .bs-gear-wrap {
            position: relative;
            width: 22px;
            height: 22px;
            display: inline-grid;
            place-items: center;
        }
        .bs-lang-trigger .bs-gear-icon {
            font-size: 1.16rem;
            color: rgba(247,242,232,.92);
            filter: drop-shadow(0 0 10px rgba(244,212,140,.12));
        }
        .bs-lang-trigger .bs-globe-badge {
            position: absolute;
            right: -4px;
            bottom: -4px;
            width: 14px;
            height: 14px;
            display:grid;
            place-items:center;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(255,231,174,.98), rgba(244,212,140,.92));
            color: #11161d;
            border: 1px solid rgba(10,14,20,.72);
            box-shadow: 0 4px 12px rgba(244,212,140,.24);
        }
        .bs-lang-trigger .bs-globe-badge i {
            font-size: .47rem;
            line-height: 1;
        }
        .bs-lang-meta,
        .bs-lang-chevron,
        .bs-lang-kicker,
        .bs-lang-current {
            display: none !important;
        }
        .bs-lang-fab.is-open .bs-lang-trigger {
            border-color: rgba(244,212,140,.42);
            background: linear-gradient(180deg, rgba(24,30,40,.98), rgba(10,14,20,.94));
        }
        .bs-lang-fab.is-open .bs-gear-icon {
            transform: rotate(28deg);
            transition: transform .22s ease;
        }
        .bs-lang-menu {
            position:absolute;
            top: calc(100% + 10px);
            right:0;
            width:min(300px, calc(100vw - 24px));
            max-height: 60vh;
            overflow:auto;
            border-radius: 22px;
            border: 1px solid rgba(244,212,140,.18);
            background:
                radial-gradient(circle at 10% 0%, rgba(255,137,52,.10), transparent 30%),
                linear-gradient(180deg, rgba(11,15,22,.97), rgba(7,10,16,.95));
            box-shadow: 0 24px 60px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.04);
            padding: 10px;
            opacity:0;
            transform: translateY(-8px) scale(.98);
            pointer-events:none;
            transition: opacity .18s ease, transform .18s ease;
            backdrop-filter: blur(16px);
        }
        .bs-lang-fab.is-open .bs-lang-menu {
            opacity:1;
            transform: translateY(0) scale(1);
            pointer-events:auto;
        }
        .bs-lang-title {
            display:flex;
            align-items:center;
            gap:8px;
            padding: 6px 10px 10px;
            font-size:.66rem;
            color: rgba(247,242,232,.58);
            text-transform:uppercase;
            letter-spacing:.16em;
            font-weight:900;
        }
        .bs-lang-options {
            display:grid;
            grid-template-columns: 1fr;
            gap:8px;
        }
        .bs-lang-option {
            width:100%;
            border: 1px solid rgba(255,255,255,.05);
            background: rgba(255,255,255,.03);
            color:#f7f2e8;
            border-radius: 16px;
            padding: 11px 12px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            cursor:pointer;
            transition: transform .18s ease, border-color .18s ease, background .18s ease;
        }
        .bs-lang-option:hover {
            transform: translateX(-2px);
            border-color: rgba(244,212,140,.24);
            background: rgba(255,255,255,.055);
        }
        .bs-lang-option.is-active {
            border-color: rgba(244,212,140,.32);
            background: linear-gradient(180deg, rgba(244,212,140,.09), rgba(255,255,255,.04));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        }
        .bs-lang-option-left {
            display:flex;
            align-items:center;
            gap:10px;
            min-width:0;
        }
        .bs-lang-flag {
            font-size:1rem;
            width:24px;
            text-align:center;
            filter: drop-shadow(0 0 12px rgba(255,255,255,.10));
        }
        .bs-lang-labels {
            display:flex;
            flex-direction:column;
            align-items:flex-start;
            min-width:0;
        }
        .bs-lang-name {
            font-size:.84rem;
            font-weight:800;
            color:#f7f2e8;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .bs-lang-native {
            font-size:.64rem;
            font-weight:700;
            color: rgba(247,242,232,.52);
            margin-top:2px;
        }
        .bs-lang-check {
            color: var(--gold-bright, #f4d48c);
            font-size:.76rem;
            opacity:0;
            transition: opacity .18s ease;
        }
        .bs-lang-option.is-active .bs-lang-check { opacity:1; }
        .goog-te-banner-frame,
        .goog-te-balloon-frame,
        .goog-te-gadget,
        .goog-te-gadget-icon,
        .goog-logo-link,
        .skiptranslate,
        #goog-gt-tt,
        .goog-tooltip,
        .goog-tooltip:hover,
        iframe.skiptranslate,
        iframe[id^=":"] {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        body { top: 0 !important; }
        #google_translate_element {
            position: fixed;
            left: -99999px;
            top: -99999px;
            height: 0;
            width: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
        }
        body.bs-translating .skiptranslate { display:none !important; }
        @media (max-width: 820px) {
            .bs-lang-menu {
                right: 50%;
                transform: translate(50%, -8px) scale(.98);
                width:min(290px, calc(100vw - 20px));
                max-height: 54vh;
            }
            .bs-lang-fab.is-open .bs-lang-menu {
                transform: translate(50%, 0) scale(1);
            }
        }
        @media (max-width: 520px) {
            .bs-lang-trigger {
                width: 40px;
                height: 40px;
                min-height: 40px;
            }
            .bs-lang-menu {
                width:min(270px, calc(100vw - 20px));
            }
        }


        .nav-links .bs-lang-fab {
            margin-left: 2px;
        }
        .nav-links .bs-lang-trigger {
            transform: translateY(-1px);
        }
        .nav-links .bs-lang-menu {
            left: 50%;
            right: auto;
            transform: translate(-50%, -8px) scale(.98);
        }
        .nav-links .bs-lang-fab.is-open .bs-lang-menu {
            transform: translate(-50%, 0) scale(1);
        }
        @media (max-width: 980px) {
            .nav-links .bs-lang-fab {
                width: 100%;
                display: flex;
                justify-content: center;
                margin-top: 8px;
            }
            .nav-links .bs-lang-menu {
                top: calc(100% + 10px);
                left: 50%;
                right: auto;
            }
        }

        /* Durante il cambio lingua o il ripristino sessione non mostrare il form login */
        body.auth-resolving .auth-gate {
            display: grid !important;
            background: radial-gradient(circle at center, rgba(0, 24, 12, 0.20), rgba(0, 0, 0, 0.86) 68%, #000 100%);
        }
        body.auth-resolving .auth-gate-card {
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
        }
        body.auth-resolving #login-matrix-canvas {
            opacity: 0.24;
            visibility: visible;
        }
        body.auth-resolving .auth-gate::after {
            content: 'Sincronizzazione sessione...';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 14px 18px;
            border-radius: 999px;
            border: 1px solid rgba(244,212,140,.18);
            background: rgba(10,12,18,.86);
            color: rgba(247,242,232,.86);
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            box-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
            white-space: nowrap;
        }
    

        /* === ALLIANCE HERO TITLE UPGRADE 06-05: cinematic metal/glow text === */
        #view-alliance .alliance-hero-title {
            position: relative;
            display: inline-block;
            isolation: isolate;
            margin: 0 auto 16px;
            padding: 0 18px 10px;
            font-size: clamp(5.2rem, 12.5vw, 10.8rem);
            line-height: .78;
            letter-spacing: .035em;
            color: transparent;
            -webkit-text-stroke: 2px rgba(255, 196, 105, .82);
            text-shadow:
                0 2px 0 rgba(112, 52, 20, .95),
                0 5px 0 rgba(63, 30, 14, .95),
                0 10px 20px rgba(0, 0, 0, .92),
                0 0 16px rgba(255, 128, 37, .82),
                0 0 38px rgba(255, 93, 18, .45);
            background:
                linear-gradient(180deg,
                    #fff5d4 0%,
                    #d7b073 13%,
                    #8a5b31 30%,
                    #f9c878 44%,
                    #fff0ba 55%,
                    #8c5126 72%,
                    #2a160d 100%);
            -webkit-background-clip: text;
            background-clip: text;
            filter: drop-shadow(0 0 18px rgba(255, 111, 24, .28));
        }

        #view-alliance .alliance-hero-title::before {
            content: attr(data-title);
            position: absolute;
            inset: 0 18px 10px;
            z-index: -1;
            color: rgba(41, 18, 8, .86);
            -webkit-text-stroke: 8px rgba(74, 33, 15, .85);
            transform: translate(8px, 9px);
            filter: blur(.3px);
            opacity: .9;
        }

        #view-alliance .alliance-hero-title::after {
            content: "";
            position: absolute;
            left: 4%;
            right: 4%;
            bottom: -4px;
            height: 4px;
            border-radius: 999px;
            background: linear-gradient(90deg,
                transparent,
                rgba(255, 114, 30, .9),
                rgba(255, 227, 145, .96),
                rgba(255, 114, 30, .9),
                transparent);
            box-shadow:
                0 0 14px rgba(255, 112, 24, .9),
                0 0 34px rgba(255, 74, 18, .45);
            opacity: .95;
        }

        #view-alliance .section-head:has(.alliance-hero-title) {
            max-width: 1180px;
            margin-bottom: 20px !important;
        }

        #view-alliance .section-head:has(.alliance-hero-title) .section-copy {
            position: relative;
            z-index: 2;
            max-width: 760px;
            margin: 2px auto 0;
            color: rgba(255, 255, 255, .92);
            text-shadow: 0 2px 12px rgba(0,0,0,.82);
        }

        @supports not selector(:has(*)) {
            #view-alliance .section-head .alliance-hero-title + .section-copy {
                max-width: 760px;
                margin: 2px auto 0;
                color: rgba(255, 255, 255, .92);
                text-shadow: 0 2px 12px rgba(0,0,0,.82);
            }
        }

        @media (max-width: 860px) {
            #view-alliance .alliance-hero-title {
                font-size: clamp(3.7rem, 17vw, 7.2rem);
                -webkit-text-stroke-width: 1.35px;
                letter-spacing: .025em;
                padding-inline: 8px;
            }
            #view-alliance .alliance-hero-title::before {
                inset: 0 8px 10px;
                transform: translate(5px, 6px);
                -webkit-text-stroke-width: 5px;
            }
        }

        @media (max-width: 520px) {
            #view-alliance .alliance-hero-title {
                font-size: clamp(3.15rem, 18vw, 5.2rem);
                line-height: .86;
                text-shadow:
                    0 2px 0 rgba(112, 52, 20, .9),
                    0 5px 14px rgba(0,0,0,.92),
                    0 0 22px rgba(255, 93, 18, .44);
            }
            #view-alliance .alliance-hero-title::after {
                left: 12%;
                right: 12%;
            }
        }



        /* BLACK SIX SAFE PATCH 2026-05-07 */
        .fire-title {
            background: linear-gradient(100deg, #fff8df 0%, #f4d48c 42%, #ff8f52 74%, #fff2b9 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            color: transparent !important;
            text-shadow: 0 0 26px rgba(255,143,82,.22);
        }
        .premium-price-actions { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top:18px; }
        .premium-price-actions .button { justify-content:center; min-height:44px; padding-inline:14px; }
        /* Numerazione pacchetti: dentro la pillola, visibile solo su hover/focus */
        .bs-package-number { display: none !important; }
        .card[data-card-number] .price-badge {
            position: relative;
            overflow: hidden;
            transition: padding-left .22s ease, border-color .22s ease, background-color .22s ease;
        }
        .card[data-card-number] .price-badge::before {
            content: attr(data-card-number) " ·";
            display: inline-block;
            max-width: 0;
            opacity: 0;
            margin-right: 0;
            overflow: hidden;
            white-space: nowrap;
            transform: translateX(-6px);
            transition: max-width .22s ease, opacity .18s ease, margin-right .22s ease, transform .22s ease;
        }
        .card[data-card-number]:hover .price-badge::before,
        .card[data-card-number]:focus-within .price-badge::before {
            max-width: 56px;
            opacity: 1;
            margin-right: 7px;
            transform: translateX(0);
        }
        .card[data-card-number]:hover .price-badge,
        .card[data-card-number]:focus-within .price-badge {
            border-color: rgba(244,212,140,.26);
            background: rgba(255,143,82,.12);
        }
        .payment-option-note { font-size:.78rem; color:rgba(247,242,232,.68); margin-top:10px; text-align:center; }
        @media (max-width: 760px) {
            .premium-price-actions { grid-template-columns: 1fr; }
            .modal-actions { flex-direction:column; }
            .modal-actions .button { width:100%; justify-content:center; }
            .package-grid { grid-template-columns: 1fr !important; }
            .card { overflow-wrap:anywhere; }
        }



        /* FIX 2026-05-07: info dentro la pillola titolo, non flottante nella card */
        #packages-list .price-badge,
        #premium-subscriptions .price-badge,
        #abbonamenti .price-badge,
        #bot-pc .price-badge {
            gap: 9px;
            width: fit-content;
            max-width: 100%;
            overflow: visible !important;
            white-space: nowrap;
        }

        .price-badge .bs-badge-label {
            display: inline-flex;
            align-items: center;
            min-width: 0;
        }

        .price-badge .receipt-trigger.bs-info-in-badge {
            position: relative !important;
            inset: auto !important;
            grid-area: unset !important;
            justify-self: unset !important;
            align-self: center !important;
            width: 25px !important;
            min-width: 25px !important;
            height: 25px !important;
            min-height: 25px !important;
            margin: 0 -5px 0 2px !important;
            padding: 0 !important;
            border-radius: 999px !important;
            border: 1px solid rgba(244, 212, 140, 0.30) !important;
            background: linear-gradient(180deg, rgba(255, 238, 190, 0.12), rgba(6, 10, 16, 0.72)) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 6px 14px rgba(0,0,0,.22) !important;
            color: transparent !important;
            text-indent: -9999px !important;
            overflow: hidden !important;
            flex: 0 0 auto !important;
            transform: none !important;
        }

        .price-badge .receipt-trigger.bs-info-in-badge::before {
            content: 'i' !important;
            position: absolute !important;
            inset: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-indent: 0 !important;
            color: var(--gold-bright) !important;
            font-size: 0.86rem !important;
            line-height: 1 !important;
            font-weight: 900 !important;
            font-family: Georgia, 'Times New Roman', serif !important;
            font-style: italic !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
        }

        .price-badge .receipt-trigger.bs-info-in-badge:hover,
        .price-badge .receipt-trigger.bs-info-in-badge:focus-visible {
            border-color: rgba(244, 212, 140, 0.58) !important;
            background: linear-gradient(180deg, rgba(244, 212, 140, 0.22), rgba(9, 14, 20, 0.88)) !important;
            box-shadow: 0 0 0 4px rgba(244,212,140,.08), 0 8px 18px rgba(0,0,0,.26) !important;
        }

        #packages-list .price-row,
        #premium-subscriptions .price-row,
        #abbonamenti .price-row,
        #bot-pc .price-row {
            grid-template-columns: minmax(0,1fr) !important;
            grid-template-areas:
                "price"
                "attiva" !important;
        }

        #packages-list .price-row .receipt-trigger:not(.bs-info-in-badge),
        #premium-subscriptions .price-row .receipt-trigger:not(.bs-info-in-badge),
        #abbonamenti .price-row .receipt-trigger:not(.bs-info-in-badge),
        #bot-pc .price-row .receipt-trigger:not(.bs-info-in-badge) {
            display: none !important;
        }

        /* Numero pacchetto: dentro la pillola e visibile solo su hover/focus */
        .card[data-card-number] .price-badge::before {
            content: attr(data-card-number) " ·";
        }

.bs-chat-selected-packages {
    margin: 10px 0 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(244,212,140,.18);
    background: linear-gradient(135deg, rgba(244,212,140,.08), rgba(10,12,18,.52));
}
.bs-chat-selected-packages .bs-chat-selected-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:#fff3c2;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.10em;
    text-transform:uppercase;
    margin-bottom:9px;
}
.bs-chat-selected-packages .bs-chat-clear-selection {
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:var(--muted);
    border-radius:999px;
    padding:5px 9px;
    font-size:.68rem;
    font-weight:800;
    cursor:pointer;
}
.bs-chat-selected-packages .bs-chat-clear-selection:hover { color:#fff; border-color:rgba(244,212,140,.26); }
.bs-chat-selected-list {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.bs-chat-selected-chip {
    display:inline-flex;
    align-items:center;
    gap:7px;
    max-width:100%;
    border:1px solid rgba(47,210,125,.22);
    background:rgba(47,210,125,.10);
    color:#dfffea;
    border-radius:999px;
    padding:7px 10px;
    font-size:.76rem;
    font-weight:800;
}
.bs-chat-selected-chip button {
    display:inline-grid;
    place-items:center;
    width:18px;
    height:18px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#fff;
    cursor:pointer;
}
.bs-package-chat-select-btn {
    width:100%;
    margin-top:12px;
    border:1px solid rgba(244,212,140,.20);
    background:rgba(244,212,140,.07);
    color:#fff3c2;
    border-radius:12px;
    padding:10px 12px;
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
    cursor:pointer;
}
.bs-package-chat-select-btn:hover,
.bs-package-chat-select-btn.is-selected {
    background:linear-gradient(135deg, rgba(47,210,125,.16), rgba(244,212,140,.12));
    border-color:rgba(47,210,125,.35);
    color:#eafff1;
}
.bs-package-chat-select-btn i { margin-right:7px; }



/* === mobile refinements: nickname chip + chat modal === */
@media (max-width: 540px) {
  .header-user-rail {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .nav-user-chip,
  .nav-user-chip.is-admin {
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 7px 9px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.07em !important;
    line-height: 1.1 !important;
  }

  .nav-user-chip .admin-star {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    font-size: 0.62rem !important;
  }

  .nav-user-chip .admin-name {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .nav-user-chip .admin-pill {
    flex: 0 0 auto !important;
    gap: 3px !important;
    padding: 2px 5px !important;
    font-size: 0.46rem !important;
    letter-spacing: 0.09em !important;
  }

  #btn-logout {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .modal-shell {
    padding: max(8px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom)) !important;
  }

  #chat-modal .chat-modal-card {
    width: min(100vw - 16px, 520px) !important;
    max-width: min(100vw - 16px, 520px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 14px !important;
    border-radius: 22px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #chat-modal .chat-modal-head {
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
  }

  #chat-modal .chat-modal-head h2 {
    font-size: 1rem !important;
  }

  #chat-modal .chat-thread {
    flex: 1 1 auto !important;
    min-height: 220px !important;
    max-height: calc(100dvh - 240px) !important;
  }

  .chat-bubble {
    padding: 9px 11px !important;
  }

  .chat-input-area {
    gap: 8px !important;
    padding-top: 8px !important;
    align-items: flex-end !important;
  }

  .chat-input-area textarea {
    min-height: 44px !important;
    max-height: 104px !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
  }

  .chat-input-area .file-btn,
  .chat-input-area button {
    width: 34px !important;
    height: 34px !important;
    min-width: 44px !important;
  }
}



/* ==========================================================
   BLACK SIX CHAT MODERN â€” Supporto + Community stile gruppo
   ========================================================== */
.chat-launcher {
    right: 20px !important;
    bottom: 20px !important;
    padding: 8px 12px 8px 8px !important;
    gap: 10px !important;
    min-height: 58px;
    border: 1px solid rgba(244,212,140,.22) !important;
    background:
        radial-gradient(circle at 18% 10%, rgba(244,212,140,.28), transparent 34%),
        linear-gradient(135deg, rgba(12,18,27,.96), rgba(7,10,16,.96)) !important;
    box-shadow: 0 20px 42px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,255,255,.035) !important;
    backdrop-filter: blur(14px);
}
.bs-launcher-orb {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(244,212,140,.30);
    background: rgba(244,212,140,.08);
    box-shadow: 0 0 18px rgba(244,212,140,.16);
}
.bs-launcher-orb img { width: 100%; height: 100%; object-fit: cover; }
.bs-launcher-copy { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.bs-launcher-copy strong {
    color: #fff3c2;
    font-size: .78rem;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.bs-launcher-copy small {
    color: #92a4b2;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.bs-social-chat-card.chat-modal-card {
    width: min(96vw, 980px) !important;
    height: min(88dvh, 820px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
    border-radius: 28px !important;
    border: 1px solid rgba(244,212,140,.20) !important;
    background:
        radial-gradient(circle at 12% -10%, rgba(244,212,140,.16), transparent 34%),
        radial-gradient(circle at 90% 0%, rgba(0,168,132,.12), transparent 30%),
        linear-gradient(180deg, rgba(14,20,30,.98), rgba(7,10,16,.98)) !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.bs-social-chat-head.chat-modal-head {
    margin: 0 !important;
    padding: 18px 20px 14px !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}
.bs-social-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bs-social-logo {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244,212,140,.26);
    background: rgba(244,212,140,.08);
    flex: 0 0 auto;
}
.bs-social-logo img { width: 100%; height: 100%; object-fit: cover; }
.bs-social-chat-head h2 { margin: 0 !important; font-size: 1.08rem !important; color: #f7f2e8 !important; }
.bs-social-chat-head p { margin: 3px 0 0; color: #8fa3b8; font-size: .78rem; font-weight: 700; }
.chat-modal-dismiss {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.045) !important;
    color: #d9e4ea !important;
}
.bs-chat-tabs {
    margin: 0 !important;
    padding: 12px 14px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    background: rgba(5,8,13,.34);
}
.bs-chat-tab {
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.035) !important;
    color: #a8bac7 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}
.bs-chat-tab .bs-tab-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.055);
    color: #f4d48c;
}
.bs-chat-tab.is-active {
    color: #061015 !important;
    background: linear-gradient(135deg, #f4d48c, #ff8f52) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(255,143,82,.18) !important;
}
.bs-chat-tab.is-active .bs-tab-icon { background: rgba(0,0,0,.12); color: #071016; }
.bs-chat-tab.is-locked:not(.is-active)::after {
    content: 'ðŸ”’';
    font-size: .72rem;
    opacity: .85;
}
.bs-chat-context-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px 12px;
    background: rgba(5,8,13,.34);
}
.bs-chat-members { display: flex; align-items: center; padding-left: 8px; min-width: 94px; }
.bs-chat-members span {
    width: 28px;
    height: 28px;
    margin-left: -8px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid #0d141d;
    background: linear-gradient(135deg, rgba(244,212,140,.9), rgba(255,143,82,.9));
    color: #081015;
    font-size: .58rem;
    font-weight: 1000;
}
#user-chat-id-display.modal-helper,
#user-chat-id-display {
    margin: 0 !important;
    color: #8fa3b8 !important;
    font-size: .74rem !important;
    text-align: center !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bs-chat-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 10px;
    border: 1px solid rgba(47,210,125,.20);
    background: rgba(47,210,125,.08);
    color: #bfffd6;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.bs-chat-live-pill i { font-size: .46rem; color: #2fd27d; filter: drop-shadow(0 0 7px rgba(47,210,125,.8)); }
.bs-chat-privacy-note {
    margin: 0 18px 10px !important;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(244,212,140,.14);
    background: rgba(244,212,140,.055);
}
#chat-modal .chat-thread,
.chat-thread {
    margin: 0 14px !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    padding: 18px 18px 20px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    background:
        radial-gradient(circle at 25% 10%, rgba(244,212,140,.035), transparent 24%),
        radial-gradient(circle at 80% 20%, rgba(0,168,132,.04), transparent 25%),
        linear-gradient(180deg, #0a1218, #081015) !important;
    scrollbar-width: none;
}
#chat-modal .chat-thread::-webkit-scrollbar { width: 0; height: 0; }
.chat-bubble {
    max-width: min(76%, 620px) !important;
    padding: 10px 13px 21px !important;
    border-radius: 18px !important;
    font-size: .94rem !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.16) !important;
}
.chat-bubble.is-user {
    border-top-right-radius: 5px !important;
    background: linear-gradient(135deg, #075e54, #087968) !important;
    border: 1px solid rgba(104,255,214,.12);
}
.chat-bubble.is-owner {
    border-top-left-radius: 5px !important;
    background: linear-gradient(135deg, #1c2a33, #17242c) !important;
    border: 1px solid rgba(255,255,255,.055);
}
.chat-bubble.is-system {
    max-width: min(92%, 620px) !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    background: rgba(244,212,140,.075) !important;
    border: 1px solid rgba(244,212,140,.13);
    color: #9fb0bd !important;
    font-size: .73rem !important;
    box-shadow: none !important;
}
.bs-chat-message-row { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.bs-chat-message-row.is-mine { justify-content: flex-end; }
.bs-chat-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(244,212,140,.18);
    background: linear-gradient(135deg, rgba(244,212,140,.22), rgba(255,255,255,.05));
    color: #fff3c2;
    font-size: .68rem;
    font-weight: 1000;
    margin-bottom: 3px;
}
.bs-chat-message-row.is-mine .bs-chat-avatar { display: none; }
.bs-chat-sender {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff3c2;
    font-size: .70rem;
    font-weight: 1000;
    margin-bottom: 4px;
    letter-spacing: .02em;
}
.bs-chat-role-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 2px 6px;
    min-height: 14px;
    line-height: 1;
    font-size: .58rem;
    font-weight: 1000;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(244,212,140,.12);
    color: #f4d48c;
    border: 1px solid rgba(244,212,140,.16);
}
.chat-bubble-meta { bottom: 5px !important; right: 10px !important; font-size: .62rem !important; color: rgba(233,237,239,.58) !important; }
.chat-input-area {
    margin: 10px 14px 14px !important;
    padding: 10px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.075);
    background: rgba(23,34,42,.94) !important;
    align-items: flex-end;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}
.chat-input-area textarea {
    min-height: 46px !important;
    max-height: 132px !important;
    padding: 13px 16px !important;
    border-radius: 18px !important;
    background: rgba(42,57,66,.95) !important;
    border: 1px solid rgba(255,255,255,.045) !important;
    line-height: 1.35;
}
.chat-input-area button,
.chat-input-area .file-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    color: #dbe8ee !important;
}
#chat-submit-btn:not(:disabled) {
    background: linear-gradient(135deg, #00a884, #2fd27d) !important;
    color: #04100c !important;
    box-shadow: 0 10px 22px rgba(0,168,132,.20);
}
#chat-submit-btn:disabled { opacity: .48; }
#chat-feedback.modal-feedback,
#chat-feedback { margin: -8px 14px 10px !important; min-height: 16px; color: #ffb4a8; }
.bs-vip-lock-panel {
    max-width: 680px;
    margin: 16px auto !important;
    border-radius: 26px !important;
    padding: 24px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(244,212,140,.18), transparent 34%),
        linear-gradient(135deg, rgba(244,212,140,.08), rgba(255,143,82,.045)) !important;
}
.bs-vip-status-card {
    margin: 0 0 12px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(244,212,140,.115), rgba(0,168,132,.055)) !important;
}
.bs-vip-status-card.is-expiring {
    border-color: rgba(255,89,89,.45) !important;
    box-shadow: 0 0 0 1px rgba(255,89,89,.18), 0 0 24px rgba(255,89,89,.18) !important;
    animation: bsVipExpiryPulse 1.7s ease-in-out infinite;
}
.bs-vip-status-card.is-expiring .bs-vip-status-fill { background: linear-gradient(90deg,#ff5959,#ffb86b) !important; }
@keyframes bsVipExpiryPulse { 0%,100%{ filter:none; } 50%{ filter:brightness(1.12); } }
.bs-vip-status-bar { width: 100% !important; max-width: 360px; }
.bs-typing-line { margin-left: 40px !important; }
@media (max-width: 760px) {
    .bs-social-chat-card.chat-modal-card {
        width: calc(100vw - 14px) !important;
        height: calc(100dvh - 14px) !important;
        border-radius: 22px !important;
    }
    .bs-social-chat-head.chat-modal-head { padding: 14px 14px 10px !important; }
    .bs-social-logo { width: 38px; height: 38px; border-radius: 14px; }
    .bs-social-chat-head h2 { font-size: .98rem !important; }
    .bs-social-chat-head p { font-size: .70rem; }
    .bs-chat-tabs { padding: 10px 10px 8px !important; gap: 7px !important; }
    .bs-chat-tab { min-height: 43px; padding: 7px 8px !important; font-size: .76rem !important; }
    .bs-chat-tab .bs-tab-icon { width: 24px; height: 24px; }
    .bs-chat-context-row { padding: 0 12px 10px; gap: 8px; }
    .bs-chat-members { min-width: 72px; }
    .bs-chat-members span { width: 24px; height: 24px; font-size: .52rem; }
    .bs-chat-live-pill { padding: 5px 8px; font-size: .60rem; }
    #chat-modal .chat-thread { margin: 0 9px !important; padding: 14px 10px 16px !important; border-radius: 16px !important; }
    .chat-bubble { max-width: 84% !important; font-size: .88rem !important; }
    .bs-chat-avatar { width: 26px; height: 26px; font-size: .60rem; }
    .chat-input-area { margin: 8px 9px 10px !important; border-radius: 16px !important; }
    .chat-input-area textarea { font-size: 16px !important; min-height: 44px !important; }
    .chat-input-area button, .chat-input-area .file-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 15px !important; }
    .bs-launcher-copy small { display: none; }
}
@media (max-width: 440px) {
    .bs-launcher-copy { display: none; }
    .chat-launcher { padding: 8px !important; min-height: 54px; }
    .bs-launcher-orb { width: 40px; height: 40px; }
    .bs-social-chat-head p { display: none; }
    .bs-chat-context-row { flex-wrap: nowrap; }
    #user-chat-id-display { font-size: .66rem !important; }
    .bs-chat-tab span:not(.bs-tab-icon):not(.bs-chat-tab-badge) { white-space: nowrap; }
}


/* ==========================================================
   BLACK SIX VIP BUBBLES â€” Admin/Premium come mockup neon
   ========================================================== */
#chat-modal .chat-thread,
.chat-thread {
    padding: 22px 24px 24px !important;
    background:
        radial-gradient(circle at 16% 14%, rgba(244,212,140,.05), transparent 26%),
        radial-gradient(circle at 78% 22%, rgba(0,245,220,.07), transparent 28%),
        linear-gradient(180deg, rgba(4,9,12,.98), rgba(5,10,15,.99)) !important;
    border-color: rgba(244,212,140,.16) !important;
}
.bs-chat-message-row {
    position: relative;
    margin: 14px 0 24px !important;
    align-items: center !important;
}
.bs-chat-message-row.is-mine,
.bs-chat-message-row.is-vip-row.is-mine {
    justify-content: flex-end !important;
}
.bs-chat-message-row.is-vip-row:not(.is-mine) {
    justify-content: flex-start !important;
}
/* Fix: VIP non-mine bubbles use is-user class which has margin-left:auto;
   inside a column-flex bubbleCol this would push them right â€” override it */
.bs-chat-message-row.is-vip-row:not(.is-mine) .chat-bubble {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.bs-chat-message-row.is-admin-row {
    justify-content: flex-start !important;
}
/* ── Creator pill nella chat — ORO con luce bianca animata ────── */
.bs-chat-role-pill.is-creator-pill {
    background: linear-gradient(105deg,
        #b8860b 0%, #d4a017 14%, #ffd700 30%, #fffde7 48%,
        #ffd700 66%, #d4a017 82%, #b8860b 100%
    ) !important;
    background-size: 250% 100% !important;
    color: #1a0a00 !important;
    -webkit-text-fill-color: #1a0a00 !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    border: 1px solid rgba(255, 220, 50, 0.70) !important;
    box-shadow: 0 0 14px rgba(255,215,0,0.65), 0 0 28px rgba(255,180,0,0.25) !important;
    text-shadow: 0 1px 2px rgba(100,60,0,0.30) !important;
    animation: bs-creator-gold-sweep 2.2s ease-in-out infinite !important;
}
/* Bolla chat del creator — ORO PIENO con shimmer bianco */
.chat-bubble.is-creator-bubble {
    background: linear-gradient(135deg, #e6a800, #ffd700, #ffe066, #ffd700, #c8960c) !important;
    background-size: 100% 100% !important;
    animation: none !important;
    border: 2px solid rgba(255, 235, 80, 1) !important;
    box-shadow:
        0 0 28px rgba(255, 215, 0, 0.70),
        0 0 56px rgba(255, 180, 0, 0.35),
        0 4px 20px rgba(0,0,0,0.35) !important;
    position: relative !important;
    overflow: hidden !important;
}
/* Shimmer bianco che scorre sulla bolla — garantito su tutti i dispositivi */
.chat-bubble.is-creator-bubble::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    left: -80% !important;
    width: 60% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent) !important;
    animation: bs-creator-shine 2.4s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
@keyframes bs-creator-shine {
    0%   { left: -80%; }
    100% { left: 160%; }
}
/* Testo scuro leggibile sopra sfondo oro */
.chat-bubble.is-creator-bubble p,
.chat-bubble.is-creator-bubble span,
.chat-bubble.is-creator-bubble .bs-chat-msg-text {
    color: #1a0900 !important;
    position: relative !important;
    z-index: 1 !important;
}
.chat-bubble.is-creator-bubble .bs-chat-sender {
    color: #3d1f00 !important;
    position: relative !important;
    z-index: 1 !important;
}
/* Badge ufficiale rotondo nella bolla Creator */
.bs-creator-official-badge {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin: 6px 0 4px 0;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.80)) drop-shadow(0 0 4px rgba(255,180,0,0.60));
    animation: bs-badge-float 3s ease-in-out infinite;
    border-radius: 50%;
}
@keyframes bs-badge-float {
    0%,100% { transform: translateY(0) scale(1);    filter: drop-shadow(0 0 8px rgba(255,215,0,0.80)) drop-shadow(0 0 4px rgba(255,180,0,0.60)); }
    50%     { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 0 16px rgba(255,255,180,1)) drop-shadow(0 0 10px rgba(255,215,0,0.90)); }
}
/* Badge ufficiale a sinistra nella zona nera — solo nei messaggi mine del Creator */
.bs-creator-side-badge {
    position: absolute;
    left: 8px;
    bottom: 0;
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    animation: bs-badge-float 3s ease-in-out infinite, bs-side-badge-pulse 2.4s ease-in-out infinite alternate;
}
/* Badge a DESTRA — messaggi Creator visti dagli altri utenti (mine=false, bolla a sinistra) */
.bs-creator-side-badge--other {
    left: auto;
    right: 8px;
}
@keyframes bs-side-badge-pulse {
    0%   { filter: drop-shadow(0 0 8px rgba(255,215,0,0.85)) drop-shadow(0 0 4px rgba(255,180,0,0.65)); transform-origin: center bottom; }
    100% { filter: drop-shadow(0 0 22px rgba(255,255,160,1)) drop-shadow(0 0 12px rgba(255,220,0,1));    transform-origin: center bottom; }
}

/* Avatar ring oro pulsante — tutti i messaggi del Creator (qualsiasi combinazione di classi) */
.bs-chat-message-row.is-creator-row .bs-chat-avatar,
.bs-chat-message-row .chat-bubble.is-creator-bubble ~ * .bs-chat-avatar,
.is-creator-row .bs-chat-avatar {
    border: 3px solid rgba(255, 215, 0, 1) !important;
    box-shadow:
        0 0 0 2px rgba(255,180,0,0.35),
        0 0 18px rgba(255,215,0,0.90),
        0 0 38px rgba(255,180,0,0.55) !important;
    outline: none !important;
    animation: bs-creator-avatar-glow 2s ease-in-out infinite !important;
}
@keyframes bs-creator-avatar-glow {
    0%,100% {
        box-shadow: 0 0 0 2px rgba(255,180,0,0.30), 0 0 16px rgba(255,215,0,0.80), 0 0 32px rgba(255,180,0,0.40);
        border-color: rgba(255,215,0,0.95);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(255,215,0,0.50), 0 0 30px rgba(255,255,180,1), 0 0 60px rgba(255,215,0,0.65);
        border-color: rgba(255,255,200,1);
    }
}
.bs-chat-message-row.is-mine .bs-chat-avatar {
    display: none !important;
}
.bs-chat-avatar {
    width: 34px !important;
    height: 34px !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(244,212,140,.72) !important;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,239,178,.38), transparent 34%),
        linear-gradient(145deg, rgba(25,20,10,.96), rgba(5,7,10,.98)) !important;
    color: #f4d48c !important;
    box-shadow: 0 0 22px rgba(244,184,68,.38), inset 0 0 0 1px rgba(255,255,255,.06) !important;
    font-size: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.bs-chat-avatar::before {
    content: '';
    font-size: .98rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(244,212,140,.7));
}
.bs-chat-avatar.has-photo::before,
.bs-chat-avatar.has-default-photo::before {
    content: none !important;
}
.chat-bubble:not(.is-system) {
    position: relative !important;
    min-width: min(245px, 62vw) !important;
    max-width: min(34%, 390px) !important;
    padding: 12px 18px 25px !important;
    border-radius: 16px !important;
    overflow: visible !important;
    font-size: .88rem !important;
    line-height: 1.34 !important;
    backdrop-filter: blur(16px) saturate(125%);
}
.chat-bubble:not(.is-system) p {
    margin: 8px 0 0 !important;
    color: rgba(255,255,255,.94) !important;
    font-size: .88rem !important;
}
.chat-bubble.is-owner,
.chat-bubble.is-admin {
    border: 1px solid rgba(244,212,140,.70) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,220,118,.20), transparent 34%),
        linear-gradient(145deg, rgba(18,14,7,.96), rgba(4,6,9,.98) 72%) !important;
    box-shadow:
        0 0 0 1px rgba(244,212,140,.08),
        0 0 28px rgba(244,184,68,.27),
        0 22px 46px rgba(0,0,0,.42),
        inset 0 0 24px rgba(244,212,140,.055) !important;
}
.chat-bubble.is-user,
.chat-bubble.is-vip {
    border: 1px solid rgba(0,255,232,.72) !important;
    background:
        radial-gradient(circle at 92% 2%, rgba(0,255,232,.25), transparent 30%),
        linear-gradient(145deg, rgba(0,73,70,.58), rgba(4,11,16,.98) 76%) !important;
    box-shadow:
        0 0 0 1px rgba(0,255,232,.08),
        0 0 30px rgba(0,255,232,.30),
        0 22px 46px rgba(0,0,0,.42),
        inset 0 0 26px rgba(0,255,232,.075) !important;
}
.chat-bubble.is-owner::before,
.chat-bubble.is-admin::before {
    content: '';
    position: absolute;
    left: -11px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%) rotate(45deg);
    background: inherit;
    border-left: 1px solid rgba(244,212,140,.70);
    border-bottom: 1px solid rgba(244,212,140,.70);
    box-shadow: -8px 8px 18px rgba(244,184,68,.14);
    z-index: -1;
}
.chat-bubble.is-user::before,
.chat-bubble.is-vip::before {
    content: '';
    position: absolute;
    right: -11px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%) rotate(45deg);
    background: inherit;
    border-right: 1px solid rgba(0,255,232,.72);
    border-top: 1px solid rgba(0,255,232,.72);
    box-shadow: 8px -8px 18px rgba(0,255,232,.16);
    z-index: -1;
}
.chat-bubble.is-owner::after,
.chat-bubble.is-admin::after,
.chat-bubble.is-user::after,
.chat-bubble.is-vip::after {
    position: absolute;
    top: -13px;
    right: -7px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 900;
    z-index: 3;
    backdrop-filter: blur(12px);
}
.chat-bubble.is-owner::after,
.chat-bubble.is-admin::after {
    content: 'â™›';
    color: #f4d48c;
    border: 1px solid rgba(244,212,140,.76);
    background: linear-gradient(145deg, rgba(32,24,8,.98), rgba(7,8,12,.96));
    box-shadow: 0 0 18px rgba(244,212,140,.44), inset 0 0 16px rgba(244,212,140,.08);
}
.chat-bubble.is-user::after,
.chat-bubble.is-vip::after {
    content: 'â—‡';
    color: #f4d48c;
    border: 1px solid rgba(0,255,232,.78);
    background: linear-gradient(145deg, rgba(0,81,78,.98), rgba(8,19,24,.96));
    box-shadow: 0 0 20px rgba(0,255,232,.46), inset 0 0 16px rgba(0,255,232,.08);
}
.bs-chat-sender {
    display: block !important;
    width: calc(100% - 26px);
    padding-bottom: 6px;
    margin: 0 0 2px !important;
    border-bottom: 1px solid currentColor;
    font-size: .70rem !important;
    letter-spacing: .055em !important;
    text-transform: uppercase;
}
.chat-bubble.is-owner .bs-chat-sender,
.chat-bubble.is-admin .bs-chat-sender {
    color: #ffd86f !important;
    border-bottom-color: rgba(244,212,140,.42);
}
.chat-bubble.is-user .bs-chat-sender,
.chat-bubble.is-vip .bs-chat-sender {
    color: #ffd86f !important;
    border-bottom-color: rgba(244,212,140,.46);
}
.bs-chat-role-pill {
    margin-left: 5px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 14px !important;
    min-height: 14px !important;
    padding: 0 7px !important;
    line-height: 1 !important;
    text-align: center !important;
    font-size: .50rem !important;
    color: #071016 !important;
    background: linear-gradient(135deg, #f4d48c, #ffbd5e) !important;
    border: 0 !important;
}
.chat-bubble.is-vip-agent .bs-chat-sender {
    color: #dfffee !important;
}
.chat-bubble.is-vip-agent .bs-chat-role-pill {
    min-width: 58px !important;
    color: #03140f !important;
    background: linear-gradient(135deg, #00ff88, #f4d48c) !important;
}
.bs-chat-message-row.is-agent-row .bs-chat-avatar {
    border-color: rgba(0,255,136,.48) !important;
    box-shadow: 0 0 0 1px rgba(0,255,136,.16), 0 0 18px rgba(0,255,136,.16);
}
.chat-bubble-meta {
    right: 16px !important;
    bottom: 8px !important;
    color: rgba(255,255,255,.64) !important;
    font-size: .64rem !important;
}
.chat-bubble.is-user .chat-bubble-meta::after,
.chat-bubble.is-vip .chat-bubble-meta::after {
    content: ' \2713\2713';
    color: #00ffe8;
    font-weight: 900;
    letter-spacing: -.08em;
    margin-left: 4px;
}
.chat-bubble.is-system {
    margin: 6px auto 18px !important;
}
@media (max-width: 760px) {
    #chat-modal .chat-thread, .chat-thread { padding: 18px 12px 20px !important; }
    .chat-bubble:not(.is-system) {
        min-width: 0 !important;
        max-width: 78% !important;
        padding: 10px 14px 22px !important;
        font-size: .82rem !important;
    }
    .chat-bubble-meta {
        position: absolute !important;
        bottom: 5px !important;
        right: 10px !important;
        left: auto !important;
        display: block !important;
        text-align: right !important;
        margin-top: 0 !important;
    }
    .chat-bubble:not(.is-system) p { font-size: .82rem !important; }
    .chat-bubble.is-owner::after,
    .chat-bubble.is-admin::after,
    .chat-bubble.is-user::after,
    .chat-bubble.is-vip::after {
        width: 30px;
        height: 30px;
        top: -10px;
        right: -6px;
        border-radius: 9px;
    }
    .bs-chat-avatar { width: 28px !important; height: 28px !important; margin-right: 5px !important; }
    .bs-chat-avatar::before { font-size: .82rem; }
    .bs-chat-sender { font-size: .58rem !important; width: calc(100% - 22px); }
}
@media (max-width: 440px) {
    .chat-bubble:not(.is-system) { max-width: 82% !important; }
    .bs-chat-message-row { margin: 10px 0 20px !important; }
}


#chat-modal .chat-img-shell,
.admin-chat-area .chat-img-shell,
#admin-chat-thread .chat-img-shell{
    max-width:min(280px,72%)!important;
    display:block!important;
    border-radius:14px!important;
    overflow:hidden!important;
    cursor:pointer!important;
}
#chat-modal .chat-img-shell a,
.admin-chat-area .chat-img-shell a,
#admin-chat-thread .chat-img-shell a{display:block!important;line-height:0!important;}
#chat-modal .chat-image-attachment,
.admin-chat-area .chat-image-attachment,
#admin-chat-thread .chat-image-attachment{display:block!important;object-fit:contain!important;}
#chat-modal .chat-img-shell,
.admin-chat-area .chat-img-shell,
#admin-chat-thread .chat-img-shell{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:rgba(0,0,0,.18)!important;
  border:1px solid rgba(244,212,140,.18)!important;
}
#chat-modal .chat-img-shell a,
.admin-chat-area .chat-img-shell a,
#admin-chat-thread .chat-img-shell a{display:block!important;line-height:0!important;}
#chat-modal .chat-image-attachment,
.admin-chat-area .chat-image-attachment,
#admin-chat-thread .chat-image-attachment{display:block!important;object-fit:contain!important;}
.chat-file-attachment,.chat-file-fallback{margin-top:7px;display:flex;align-items:center;gap:8px;border:1px solid rgba(244,212,140,.18);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.04);font-size:.78rem;max-width:100%;}
.chat-file-attachment a{color:var(--gold-soft,#f4d48c);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-file-fallback{color:#ffb4b4;}
.delete-file-btn{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.68);color:#fff;border:0;border-radius:12px;width:28px;height:28px;font-size:.72rem;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.35);}

/* === AUTH GATE + USER ACCOUNT TRIGGER === */
.user-account-trigger {
    display:none;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(244,212,140,.28);
    background:rgba(244,212,140,.10);
    color:var(--gold-bright);
    font-size:1rem;
    font-weight:900;
    line-height:1;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.user-account-trigger.is-visible { display:inline-flex; }
.user-account-trigger:hover,
.user-account-trigger:focus-visible {
    background:linear-gradient(135deg, rgba(244,212,140,.20), rgba(201,122,61,.22));
    border-color:rgba(244,212,140,.44);
    color:#fff4ca;
    transform:translateY(-1px);
}
.bs-account-modal-card {
    width:min(1180px,80vw);
    max-width:min(1180px,80vw);
    max-height:min(86vh,940px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:22px;
}
.bs-account-modal-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding-right:42px;
    margin-bottom:14px;
}
.bs-account-head-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bs-account-head-actions.bs-account-split-pill {
    display:inline-flex;
    align-items:center;
    gap:0;
    padding:2px;
    border:1px solid rgba(244,212,140,.20);
    border-radius:999px;
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
    overflow:hidden;
    flex-wrap:nowrap;
}
.bs-account-split-pill .bs-account-split-btn {
    border:0;
    border-radius:0;
    background:transparent;
    min-height:36px;
    padding:8px 14px;
    box-shadow:none;
    white-space:nowrap;
}
.bs-account-split-pill .bs-account-split-btn + .bs-account-split-btn {
    border-left:1px solid rgba(244,212,140,.18);
}
.bs-account-split-pill .bs-account-split-btn:hover {
    background:rgba(244,212,140,.08);
}
.bs-account-modal-stats {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:12px;
    margin-bottom:14px;
}
.bs-account-stat-card {
    border:1px solid rgba(255,255,255,.07);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border-radius:16px;
    padding:14px 16px;
    min-height:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.bs-account-stat-card .label {
    color:var(--muted);
    font-size:.74rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:800;
    margin-bottom:8px;
}
.bs-account-stat-card .value {
    color:#fff;
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:.06em;
    font-size:1.6rem;
    line-height:1;
}
.bs-account-modal-scroll {
    overflow:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-right:4px;
}
.bs-account-modal-scroll::-webkit-scrollbar { width:0; height:0; display:none; }
.bs-account-loading,
.bs-account-empty {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:180px;
    border:1px dashed rgba(255,255,255,.09);
    border-radius:18px;
    color:var(--muted);
    background:rgba(255,255,255,.02);
    text-align:center;
    padding:24px;
}
.bs-account-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:12px;
    margin-bottom:14px;
}
.bs-account-panel {
    border:1px solid rgba(255,255,255,.07);
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
    border-radius:18px;
    padding:16px;
}
.bs-account-panel h4 {
    margin:0 0 12px;
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Bebas Neue', sans-serif;
    font-size:1.08rem;
    letter-spacing:.08em;
    color:var(--gold-soft);
}
.bs-account-photo-box {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 12px;
    padding:10px;
    border:1px solid rgba(244,212,140,.14);
    border-radius:16px;
    background:rgba(8,10,15,.38);
}
.bs-account-photo-preview {
    width:54px;
    height:54px;
    min-width:54px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg, rgba(244,212,140,.28), rgba(122,217,255,.12));
    border:1px solid rgba(244,212,140,.32);
    color:var(--gold-soft);
    font-weight:900;
    letter-spacing:.06em;
    background-size:cover;
    background-position:center;
    overflow:hidden;
}
.bs-account-photo-preview.has-photo,
.bs-account-photo-preview.has-default-photo { color:transparent; }
.bs-account-photo-copy { min-width:0; display:grid; gap:5px; }
.bs-account-photo-copy strong { color:#fff; font-size:.9rem; }
.bs-account-photo-copy span { color:var(--muted); font-size:.78rem; line-height:1.35; }
.bs-account-photo-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
.bs-account-photo-actions .button {
    width:auto;
    min-width:0;
    min-height:32px;
    padding:7px 11px;
    border-radius:999px;
    font-size:.68rem;
    line-height:1;
}
#bs-account-photo-feedback { min-height:16px; margin:0; font-size:.76rem; }
.bs-account-notify-setting {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 14px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(255,255,255,.035);
}
.bs-account-notify-setting div {
    display:grid;
    gap:3px;
    min-width:0;
}
.bs-account-notify-setting strong {
    color:#fff;
    font-size:.86rem;
}
.bs-account-notify-setting span {
    color:var(--muted);
    font-size:.74rem;
    line-height:1.25;
}
.bs-account-notify-setting .bs-chat-sound-toggle {
    min-width:74px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(244,212,140,.26);
    background:rgba(244,212,140,.10);
    color:#f4d48c;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 12px;
    cursor:pointer;
    font-weight:900;
    letter-spacing:.08em;
    font-size:.72rem;
}
.bs-account-notify-setting .bs-chat-sound-toggle.is-muted {
    color:#8fa3b8;
    border-color:rgba(255,255,255,.10);
    background:rgba(255,255,255,.035);
}
.bs-account-notify-setting .bs-chat-sound-toggle:hover {
    border-color:rgba(244,212,140,.38);
    background:rgba(244,212,140,.14);
}
.bs-account-notify-setting .bs-loader-video-toggle {
    min-width:74px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(122,217,255,.28);
    background:rgba(122,217,255,.10);
    color:#bdf1ff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 12px;
    cursor:pointer;
    font-weight:900;
    letter-spacing:.08em;
    font-size:.72rem;
}
.bs-account-notify-setting .bs-loader-video-toggle.is-muted {
    color:#8fa3b8;
    border-color:rgba(255,255,255,.10);
    background:rgba(255,255,255,.035);
}
.bs-account-notify-setting .bs-loader-video-toggle.is-admin-locked,
.bs-account-notify-setting .bs-loader-video-toggle:disabled {
    cursor:not-allowed;
    opacity:.82;
}
.bs-account-notify-setting .bs-loader-video-toggle:hover {
    border-color:rgba(122,217,255,.42);
    background:rgba(122,217,255,.14);
}
.bs-profile-crop-modal[hidden] { display:none !important; }
.bs-profile-crop-modal {
    position:fixed;
    inset:0;
    z-index:10050;
    display:grid;
    place-items:center;
    padding:18px;
}
.bs-profile-crop-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
}
.bs-profile-crop-card {
    position:relative;
    width:min(360px, 94vw);
    border:1px solid rgba(244,212,140,.18);
    border-radius:20px;
    background:linear-gradient(180deg, rgba(22,25,33,.98), rgba(8,10,15,.98));
    box-shadow:0 24px 80px rgba(0,0,0,.48);
    padding:18px;
    color:#fff;
}
.bs-profile-crop-close {
    position:absolute;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:#fff;
    cursor:pointer;
}
.bs-profile-crop-head {
    display:grid;
    gap:4px;
    padding-right:38px;
    margin-bottom:14px;
}
.bs-profile-crop-head strong {
    font-size:1rem;
    letter-spacing:.04em;
}
.bs-profile-crop-head span {
    color:var(--muted);
    font-size:.82rem;
}
.bs-profile-crop-frame {
    position:relative;
    width:220px;
    height:220px;
    margin:0 auto 14px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(244,212,140,.75);
    background:#05070b;
    cursor:grab;
    touch-action:none;
}
.bs-profile-crop-frame:active { cursor:grabbing; }
.bs-profile-crop-frame img {
    position:absolute;
    top:0;
    left:0;
    max-width:none;
    user-select:none;
    pointer-events:none;
    transform-origin:top left;
}
.bs-profile-crop-range {
    display:grid;
    gap:7px;
    color:var(--muted);
    font-size:.78rem;
    margin-bottom:14px;
}
.bs-profile-crop-range input { width:100%; }
.bs-profile-crop-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
.bs-profile-crop-actions .button {
    width:auto;
    min-height:36px;
    padding:9px 14px;
}
.bs-account-kv { display:grid; gap:8px; }
.bs-account-kv-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    font-size:.9rem;
    border-bottom:1px dashed rgba(255,255,255,.06);
    padding-bottom:8px;
}
.bs-account-kv-row:last-child { border-bottom:none; padding-bottom:0; }
.bs-account-kv-row span:first-child { color:var(--muted); min-width:92px; }
.bs-account-kv-row span:last-child { color:#fff; text-align:right; word-break:break-word; }
.bs-account-section {
    border:1px solid rgba(255,255,255,.07);
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
    border-radius:18px;
    padding:16px;
    margin-bottom:14px;
}
.bs-account-section.bs-account-accordion,
.bs-account-panel.bs-account-accordion,
.bs-account-visual-panel.bs-account-accordion {
    padding:0;
    overflow:hidden;
}
.bs-account-section h4 {
    margin:0 0 12px;
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Bebas Neue', sans-serif;
    font-size:1.1rem;
    letter-spacing:.08em;
    color:var(--gold-soft);
}
.bs-account-accordion-head {
    width:100%;
    min-height:62px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:12px;
    border:0;
    background:transparent;
    color:var(--gold-soft);
    padding:16px;
    cursor:pointer;
    text-align:left;
}
.bs-account-accordion-head:not(:has(strong)) {
    grid-template-columns:minmax(0,1fr) auto;
}
.bs-account-accordion-head span {
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Bebas Neue', sans-serif;
    font-size:1.1rem;
    letter-spacing:.08em;
    line-height:1.1;
}
.bs-account-accordion-head strong {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:28px;
    padding:0 10px;
    border-radius:999px;
    background:linear-gradient(135deg,#fff2bd,#f4d48c);
    color:#11140c;
    font-size:.72rem;
    letter-spacing:.08em;
    font-weight:950;
}
.bs-account-accordion-head > i:last-child {
    transition:transform .22s ease;
}
.bs-account-accordion.is-open .bs-account-accordion-head > i:last-child {
    transform:rotate(180deg);
}
.bs-account-accordion-body {
    padding:0 16px 16px;
}
.bs-account-accordion-body[hidden] {
    display:none !important;
}
.bs-account-package-list,
.bs-account-timeline { display:grid; gap:10px; }
.bs-account-package-item,
.bs-account-timeline-item {
    border:1px solid rgba(255,255,255,.07);
    background:rgba(8,10,15,.52);
    border-radius:16px;
    padding:14px;
}
.bs-account-package-top,
.bs-account-timeline-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.bs-account-package-name,
.bs-account-timeline-title {
    color:#fff;
    font-weight:800;
    font-size:.98rem;
    line-height:1.3;
}
.bs-account-package-meta,
.bs-account-timeline-meta {
    color:var(--muted);
    font-size:.82rem;
    line-height:1.4;
}
.bs-account-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
}
.bs-account-badge.active { background:rgba(39,174,96,.18); color:#9ee6b8; border:1px solid rgba(39,174,96,.28); }
.bs-account-badge.pending { background:rgba(244,212,140,.12); color:var(--gold-soft); border:1px solid rgba(244,212,140,.2); }
.bs-account-badge.expired { background:rgba(239,83,80,.16); color:#ffb0ac; border:1px solid rgba(239,83,80,.28); }
.bs-account-badge.permanent { background:rgba(122,217,255,.12); color:var(--cyan); border:1px solid rgba(122,217,255,.22); }
.bs-account-money {
    color:#fff3c2;
    font-family:'Bebas Neue', sans-serif;
    font-size:1.35rem;
    letter-spacing:.06em;
    white-space:nowrap;
}
.bs-progress-wrap { display:grid; gap:8px; margin-top:10px; }
.bs-progress-meta {
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:var(--muted);
    font-size:.8rem;
    flex-wrap:wrap;
}
.bs-progress-track {
    width:100%;
    height:12px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.06);
}
.bs-progress-fill {
    height:100%;
    width:0;
    border-radius:999px;
    background:linear-gradient(90deg, #2fd27d, #f4d48c, #c97a3d);
    box-shadow:0 0 18px rgba(244,212,140,.22);
}
.bs-account-subgrid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:10px;
    margin-top:8px;
}
.bs-account-mini {
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    padding:12px;
    background:rgba(255,255,255,.02);
}
.bs-account-mini .label { color:var(--muted); font-size:.73rem; text-transform:uppercase; letter-spacing:.11em; margin-bottom:6px; }
.bs-account-mini .value { color:#fff; font-weight:700; line-height:1.4; word-break:break-word; }

.bs-copy-id-slim {
    min-height:36px !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    font-size:.72rem !important;
    letter-spacing:.16em !important;
    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(244,212,140,.18) !important;
    color:rgba(255,244,202,.92) !important;
    box-shadow:none !important;
}
.bs-copy-id-slim:hover {
    background:rgba(244,212,140,.10) !important;
    border-color:rgba(244,212,140,.34) !important;
}
.bs-account-visual-panel {
    grid-column:span 1;
    border:1px solid rgba(244,212,140,.10);
    background:
      radial-gradient(circle at 20% 15%, rgba(244,212,140,.13), transparent 32%),
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
    border-radius:18px;
    padding:16px;
}
.bs-account-visual-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.bs-account-visual-tile {
    min-height:84px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px;
    padding:12px;
    background:rgba(3,5,9,.36);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.bs-account-visual-tile::after {
    content:"";
    position:absolute;
    inset:auto -30% -42% -30%;
    height:70%;
    background:radial-gradient(circle, rgba(244,212,140,.12), transparent 65%);
    pointer-events:none;
}
.bs-account-visual-tile .mini-label {
    color:var(--muted);
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
    line-height:1.25;
}
.bs-account-visual-tile .mini-value {
    margin-top:8px;
    color:#fff;
    font-family:'Bebas Neue',sans-serif;
    font-size:1.55rem;
    line-height:1;
    letter-spacing:.05em;
}
.bs-account-summary-progress {
    margin-top:14px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    padding:14px;
    background:rgba(3,5,9,.34);
    text-align:center;
}
.bs-account-summary-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.bs-account-summary-top > div:first-child {
    flex:1;
    min-width:0;
}
.bs-account-summary-title {
    color:#fff;
    font-weight:800;
    line-height:1.35;
}
.bs-account-summary-subtitle {
    color:var(--muted);
    font-size:.84rem;
    line-height:1.45;
    margin-top:2px;
}
.bs-account-summary-percent {
    color:#fff3c2;
    font-family:'Bebas Neue',sans-serif;
    font-size:1.5rem;
    line-height:1;
    letter-spacing:.05em;
    white-space:nowrap;
}
.bs-account-bar-track {
    width:100%;
    height:14px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.06);
}
.bs-account-bar-fill {
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, #2fd27d 0%, #f4d48c 70%, #c97a3d 100%);
    box-shadow:0 0 18px rgba(244,212,140,.22);
    transition:width 1.2s cubic-bezier(.2,.8,.2,1);
}
.bs-account-bar-fill.is-countdown {
    background:linear-gradient(90deg, #ef5350 0%, #f4b942 45%, #2fd27d 100%);
}
.bs-account-bar-fill.is-low {
    background:linear-gradient(90deg, #ef5350, #ff9a86);
    box-shadow:0 0 18px rgba(239,83,80,.24);
}
.bs-account-bar-fill.is-mid {
    background:linear-gradient(90deg, #f4b942, #f4d48c);
}
.bs-account-bar-fill.is-high {
    background:linear-gradient(90deg, #2fd27d, #9ee6b8);
}
.bs-account-summary-foot {
    margin-top:8px;
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:.78rem;
    text-align:center;
}
.bs-account-toggle-btn {
    width:100%;
    margin-top:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid rgba(244,212,140,.18);
    border-radius:14px;
    background:rgba(244,212,140,.06);
    color:#fff2c7;
    padding:11px 13px;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.05em;
}
.bs-account-toggle-btn i { transition:transform .25s ease; }
.bs-account-toggle-btn.is-open i { transform:rotate(180deg); }

.bs-account-package-submenu {
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
    animation:bsSubmenuReveal .28s ease both;
}
@keyframes bsSubmenuReveal { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.bs-account-package-submenu[hidden],
.bs-account-package-submenu.is-collapsed {
    display:none !important;
}
.bs-account-package-mini {
    position:relative;
    overflow:hidden;
    border:1px solid rgba(244,212,140,.12);
    border-radius:18px;
    padding:14px;
    background:
        radial-gradient(circle at 16% 0%, rgba(244,212,140,.16), transparent 34%),
        linear-gradient(145deg, rgba(17,20,29,.96), rgba(7,9,14,.98));
    box-shadow:0 12px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
}
.bs-account-package-mini::before {
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    background:linear-gradient(180deg, #f4d48c, #2fd27d);
    opacity:.9;
}
.bs-account-package-mini::after {
    content:"";
    position:absolute;
    inset:-40% -20% auto auto;
    width:140px;
    height:140px;
    border-radius:50%;
    background:rgba(122,217,255,.08);
    filter:blur(2px);
    pointer-events:none;
}
.bs-account-package-mini-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
    position:relative;
    z-index:1;
}
.bs-account-package-mini-name {
    color:#fff;
    font-weight:900;
    line-height:1.25;
    font-size:.98rem;
}
.bs-account-package-mini-meta {
    color:rgba(232,235,242,.68);
    font-size:.76rem;
    margin-top:5px;
    line-height:1.45;
}
.bs-account-package-mini-right {
    text-align:right;
    white-space:nowrap;
}
.bs-account-package-mini-right .pct {
    color:#fff3c2;
    font-family:'Bebas Neue',sans-serif;
    font-size:1.65rem;
    line-height:.95;
    letter-spacing:.04em;
}
.bs-account-package-chipline {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
    position:relative;
    z-index:1;
}
.bs-account-package-chip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:6px 9px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.045);
    color:rgba(255,255,255,.82);
    font-size:.7rem;
    font-weight:800;
}
.bs-account-package-mini .bs-account-bar-track { position:relative; z-index:1; height:10px; margin-top:10px; }
.bs-account-package-mini .bs-account-bar-fill { box-shadow:0 0 18px rgba(47,210,125,.26); }
.bs-account-service-overview {
    margin-top:14px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.012));
    padding:14px;
}
.bs-account-service-overview-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.bs-account-service-overview-head strong {
    color:#fff;
    font-size:.95rem;
}
.bs-account-service-pill {
    color:#10140c;
    background:linear-gradient(135deg,#fff2bd,#f4d48c);
    border-radius:999px;
    padding:6px 10px;
    font-size:.68rem;
    letter-spacing:.12em;
    font-weight:950;
    text-transform:uppercase;
}

.bs-progress-fill.is-countdown {
    background:linear-gradient(90deg, #ef5350 0%, #f4b942 45%, #2fd27d 100%);
}
.bs-progress-fill.is-low {
    background:linear-gradient(90deg, #ef5350, #ff9a86);
    box-shadow:0 0 18px rgba(239,83,80,.24);
}
.bs-progress-fill.is-mid {
    background:linear-gradient(90deg, #f4b942, #f4d48c);
}
.bs-progress-fill.is-high {
    background:linear-gradient(90deg, #2fd27d, #9ee6b8);
}

@media (max-width: 900px) {
    .bs-account-modal-card {
        width:min(96vw,96vw);
        max-width:min(96vw,96vw);
        max-height:90vh;
        padding:16px;
    }
    .bs-account-modal-head { flex-direction:column; padding-right:32px; }
}
@media (max-width: 640px) {
    .user-account-trigger {
        min-width:34px;
        height:34px;
        padding:0 10px;
        font-size:.95rem;
    }
    .bs-account-stat-card .value { font-size:1.35rem; }
    .bs-account-kv-row { flex-direction:column; gap:3px; }
    .bs-account-kv-row span:last-child { text-align:left; }
    .bs-account-package-top,
    .bs-account-timeline-top,
    .bs-account-summary-top,
    .bs-account-package-mini-top { flex-direction:column; }
    .bs-account-visual-grid { grid-template-columns:1fr; }
    .bs-account-summary-percent { font-size:1.35rem; }
    .bs-account-section {
        border-radius:16px;
        margin-bottom:10px;
    }
    .bs-account-accordion-head {
        min-height:56px;
        padding:14px;
        grid-template-columns:minmax(0,1fr) auto auto;
        gap:8px;
    }
    .bs-account-accordion-head span {
        font-size:1rem;
        letter-spacing:.06em;
        overflow-wrap:normal;
        word-break:normal;
    }
    .bs-account-accordion-head strong {
        min-width:30px;
        height:26px;
        padding:0 9px;
        font-size:.68rem;
    }
    .bs-account-accordion-body {
        padding:0 12px 12px;
    }
}
/* ================================================================
   BLACK SIX â€” MOBILE FAB LAUNCHER (Black Six chat style)
   Su mobile diventa tondo pulsante con colori BS gold/teal
   ================================================================ */

/* Desktop: fab icon nascosta, layout pill normale */
.bs-launcher-fab-icon { display: none; }

/* â”€â”€ PULSE ANIMATIONS â”€â”€ */
@keyframes bsLauncherIdle {
  0%   { box-shadow: 0 0 0 0  rgba(244,212,140,.40), 0 14px 36px rgba(0,0,0,.44); }
  70%  { box-shadow: 0 0 0 12px rgba(244,212,140,0),  0 14px 36px rgba(0,0,0,.44); }
  100% { box-shadow: 0 0 0 0  rgba(244,212,140,0),  0 14px 36px rgba(0,0,0,.44); }
}
@keyframes bsLauncherUnread {
  0%   { box-shadow: 0 0 0 0  rgba(0,168,132,.60), 0 14px 36px rgba(0,0,0,.44); filter: saturate(1.1); }
  70%  { box-shadow: 0 0 0 16px rgba(0,168,132,0),  0 14px 36px rgba(0,0,0,.44); }
  100% { box-shadow: 0 0 0 0  rgba(0,168,132,0),  0 14px 36px rgba(0,0,0,.44); }
}

@media (max-width: 760px) {
  /* Trasforma il pill in FAB circolare */
  .chat-launcher {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    gap: 0 !important;
    right: 18px !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(120% 120% at 30% 20%, rgba(244,212,140,.95) 0%, rgba(0,168,132,.9) 55%, rgba(4,40,30,.98) 100%) !important;
    border: 1px solid rgba(244,212,140,.30) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.44) !important;
    animation: bsLauncherIdle 2.4s infinite !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Con messaggi non letti: pulse teal piÃ¹ vivace */
  .chat-launcher.has-unread {
    animation: bsLauncherUnread 1s infinite !important;
    background:
      radial-gradient(120% 120% at 30% 20%, #6ee7b7 0%, #00a884 45%, #024030 100%) !important;
    border-color: rgba(0,230,170,.55) !important;
  }

  /* Nasconde logo e testo, mostra solo l'icona chat */
  .chat-launcher .bs-launcher-orb,
  .chat-launcher .bs-launcher-copy { display: none !important; }

  .chat-launcher .bs-launcher-fab-icon {
    display: block !important;
    font-size: 24px !important;
    color: #fff !important;
    line-height: 1 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.30);
  }

  /* Badge: angolo in alto a destra del cerchio */
  .chat-launcher .bs-chat-notify-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: 2px solid #06101a !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    color: #fff !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(239,68,68,.45) !important;
  }
  .chat-launcher .bs-chat-notify-badge.is-visible {
    display: flex !important;
  }

  .chat-launcher:active { transform: scale(.92) !important; }
}

/* Small phones */
@media (max-width: 380px) {
  .chat-launcher {
    width: 52px !important;
    height: 52px !important;
    right: 14px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
  .chat-launcher .bs-launcher-fab-icon { font-size: 21px !important; }
}

/* ================================================================
   BLACK SIX PATCH: translation-safe layout
   Lingue con parole lunghe non devono sovrapporre bottoni, badge e card.
   ================================================================ */
body.bs-translating,
html.translated-ltr body,
html.translated-rtl body {
    overflow-wrap: anywhere;
}

body.bs-translating .button,
body.bs-translating button,
body.bs-translating .nav-links a,
body.bs-translating .price-badge,
body.bs-translating .section-kicker,
body.bs-translating .panel-tag,
body.bs-translating .badge,
body.bs-translating .bs-account-badge,
html.translated-ltr body .button,
html.translated-ltr body button,
html.translated-ltr body .nav-links a,
html.translated-ltr body .price-badge,
html.translated-ltr body .section-kicker,
html.translated-ltr body .panel-tag,
html.translated-ltr body .badge,
html.translated-rtl body .button,
html.translated-rtl body button,
html.translated-rtl body .nav-links a,
html.translated-rtl body .price-badge,
html.translated-rtl body .section-kicker,
html.translated-rtl body .panel-tag,
html.translated-rtl body .badge {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.2;
    letter-spacing: .02em !important;
}

body.bs-translating .price-row,
body.bs-translating .form-actions,
body.bs-translating .alliance-submit-actions,
body.bs-translating .auth-social-grid,
html.translated-ltr body .price-row,
html.translated-ltr body .form-actions,
html.translated-ltr body .alliance-submit-actions,
html.translated-ltr body .auth-social-grid,
html.translated-rtl body .price-row,
html.translated-rtl body .form-actions,
html.translated-rtl body .alliance-submit-actions,
html.translated-rtl body .auth-social-grid {
    align-items: stretch;
    flex-wrap: wrap;
}

body.bs-translating .price-row > *,
body.bs-translating .form-actions > *,
body.bs-translating .alliance-submit-actions > *,
html.translated-ltr body .price-row > *,
html.translated-ltr body .form-actions > *,
html.translated-ltr body .alliance-submit-actions > *,
html.translated-rtl body .price-row > *,
html.translated-rtl body .form-actions > *,
html.translated-rtl body .alliance-submit-actions > * {
    min-width: min(100%, 180px);
    flex: 1 1 auto;
}

body.bs-translating .card,
body.bs-translating .panel,
body.bs-translating .modal-card,
body.bs-translating .auth-gate-card,
html.translate
/* ══════════════════════════════════════════════════════
   STICKER PICKER
══════════════════════════════════════════════════════ */
.bs-sticker-picker {
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 256px;
    background: #1a2230;
    border: 1px solid rgba(244,212,140,.22);
    border-radius: 14px;
    padding: 8px;
    z-index: 999;
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
    max-height: 210px;
    overflow-y: auto;
}
.bs-sticker-grid {
    display: grid;
    grid-template-columns: repeat(5, 44px);
    gap: 4px;
}
.bs-sticker-item {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 7px;
    cursor: pointer;
    transition: transform .15s, background .15s;
    padding: 2px;
    box-sizing: border-box;
}
.bs-sticker-item:hover { transform: scale(1.18); background: rgba(244,212,140,.10); }

/* Sticker nella chat */
.bs-chat-sticker {
    width: 110px;
    height: 110px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    margin: 2px 0;
}

/* ══════════════════════════════════════════════════════
   REPLY PREVIEW (sopra l'input)
══════════════════════════════════════════════════════ */
.bs-reply-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(244,212,140,.09);
    border-left: 3px solid #f4d48c;
    border-radius: 10px;
    padding: 7px 12px;
    margin: 0 0 6px;
    font-size: .78rem;
}
.bs-reply-preview-inner { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.bs-reply-preview-bar { width: 3px; min-height: 30px; background: #f4d48c; border-radius: 2px; flex-shrink: 0; }
.bs-reply-preview-content { display: flex; flex-direction: column; min-width: 0; }
.bs-reply-preview-sender { color: #f4d48c; font-weight: 700; font-size: .75rem; }
.bs-reply-preview-text { color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; font-size: .73rem; }
.bs-reply-cancel { background: none; border: none; color: #888; cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: .9rem; flex-shrink: 0; }
.bs-reply-cancel:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ══════════════════════════════════════════════════════
   QUOTED MESSAGE (dentro la bolla)
══════════════════════════════════════════════════════ */
.bs-reply-quote {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.22);
    border-left: 3px solid #f4d48c;
    border-radius: 8px;
    padding: 5px 9px;
    margin-bottom: 6px;
    cursor: pointer;
    max-width: 100%;
}
.bs-reply-quote-sender { color: #f4d48c; font-size: .68rem; font-weight: 700; margin-bottom: 1px; }
.bs-reply-quote-text { color: rgba(255,255,255,.65); font-size: .70rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* ══════════════════════════════════════════════════════
   REPLY BUTTON (appare sulla bolla)
══════════════════════════════════════════════════════ */
.bs-reply-btn {
    position: absolute;
    bottom: 4px;
    left: 6px;
    background: none;
    border: none;
    color: rgba(255,255,255,.35);
    font-size: .72rem;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity .2s, color .2s;
    line-height: 1;
}
.chat-bubble:hover .bs-reply-btn { opacity: 1; }
.bs-reply-btn:hover { color: #f4d48c; }
@media (max-width: 760px) {
    .bs-reply-btn { opacity: 1; color: rgba(255,255,255,.45); }
    .bs-sticker-picker { width: 230px; bottom: 60px; }
    .bs-sticker-grid { grid-template-columns: repeat(5, 38px); gap: 3px; }
    .bs-sticker-item { width: 38px; height: 38px; }
    .bs-chat-sticker { width: 80px; height: 80px; }
}
