:root {
            --accent: #f39c12;
            --accent-dark: #d68910;
            --bg-deep: #FFFFFF;
            --bg-mid: #F5F6FA;
            --bg-panel: #FFFFFF;
            --bg-card: #FFFFFF;
            --bg-alt: #F2F4F8;
            --border: #E5E9F0;
            --border-hover: rgba(243,156,18,0.5);
            --border-06: #EAEDF3;
            --border-08: #E2E6EF;
            --border-10: #DCE1EB;
            --hover-04: #F1F3F8;
            --hover-05: #EEF0F6;
            --text-muted: #6b7280;
            --text-soft: #55606f;
            --text-main: #1E2229;
            --text-heading: #10131A;
            --grid-line: rgba(243,156,18,0.06);
            --nav-bg: rgba(255,255,255,0.88);
            --content-overlay: rgba(245,246,250,0.6);
            --drawer-bg: rgba(255,255,255,0.97);
            --shadow: rgba(20,20,30,0.06);
        }

        /* Mode nuit — écrase les variables ci-dessus */
        [data-theme="dark"] {
            --bg-deep: #121316;
            --bg-mid: #17181c;
            --bg-panel: #1a1b1f;
            --bg-card: #1c1d22;
            --bg-alt: #17181c;
            --border: rgba(255,255,255,0.08);
            --border-hover: rgba(243,156,18,0.4);
            --border-06: rgba(255,255,255,0.07);
            --border-08: rgba(255,255,255,0.09);
            --border-10: rgba(255,255,255,0.12);
            --hover-04: rgba(255,255,255,0.05);
            --hover-05: rgba(255,255,255,0.06);
            --text-muted: #8b8d94;
            --text-soft: #b4b6bd;
            --text-main: #e4e5e8;
            --text-heading: #ffffff;
            --grid-line: transparent;
            --nav-bg: rgba(18,19,22,0.9);
            --content-overlay: rgba(18,19,22,0.4);
            --drawer-bg: rgba(18,19,22,0.97);
            --shadow: rgba(0,0,0,0.35);
        }

        * { box-sizing: border-box; }

        body {
            background: var(--bg-deep);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            transition: background-color 0.25s, color 0.25s;
        }

        #root-shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }

        nav {
            height: 60px;
            background: var(--nav-bg);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 28px;
            position: sticky;
            top: 0;
            z-index: 200;
        }

        .nav-logo {
            
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: var(--text-heading);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 9px;
        }
        .nav-logo img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
        .nav-logo span { color: var(--accent); }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .nav-link {
            color: var(--text-soft);
            font-size: 0.8rem;
            font-weight: 500;
            padding: 6px 13px;
            border-radius: 7px;
            text-decoration: none;
            transition: color 0.15s, background 0.15s;
            white-space: nowrap;
        }
        .nav-link:hover { color: var(--text-heading); background: var(--border-06); }
        .nav-link.active { color: var(--accent); }

        .nav-right { display: flex; align-items: center; gap: 12px; }

        .btn-login {
            background: var(--accent);
            color: #000;
            font-weight: 700;
            font-size: 0.78rem;
            padding: 7px 16px;
            border-radius: 8px;
            text-decoration: none;
            transition: background 0.15s, transform 0.1s;
            white-space: nowrap;
        }
        .btn-login:hover { background: var(--accent-dark); transform: translateY(-1px); }

        .theme-toggle {
            background: none;
            border: 1px solid var(--border);
            width: 34px;
            height: 34px;
            border-radius: 10px;
            cursor: pointer;
            color: var(--text-main);
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        .theme-toggle:hover { border-color: var(--border-hover); background: var(--hover-04); }

        /* ── Menu Paramètres (dropdown "Menu Rapide") ─────────────── */
        #settings-dropdown {
            position: absolute;
            top: 44px;
            right: 0;
            width: 250px;
            background: var(--bg-alt);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px;
            box-shadow: 0 14px 34px rgba(0,0,0,0.35);
            z-index: 600;
            display: none;
        }
        #settings-dropdown.open { display: block; }
        .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .settings-row-label { font-size: 0.8rem; color: var(--text-heading); font-weight: 700; }
        .settings-row-desc { font-size: 0.66rem; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }

        .qm-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; display: inline-block; }
        .qm-switch input { opacity: 0; width: 0; height: 0; }
        .qm-switch-slider {
            position: absolute; inset: 0; background: var(--border-10, rgba(255,255,255,0.15));
            border-radius: 22px; cursor: pointer; transition: background 0.2s;
        }
        .qm-switch-slider::before {
            content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
            background: #fff; border-radius: 50%; transition: transform 0.2s;
        }
        .qm-switch input:checked + .qm-switch-slider { background: var(--accent); }
        .qm-switch input:checked + .qm-switch-slider::before { transform: translateX(18px); }
        .qm-switch input:disabled + .qm-switch-slider { opacity: 0.5; cursor: not-allowed; }

        /* ── Menu Rapide : bulle flottante + options radiales ─────── */
        .quick-menu-fab-wrap {
            position: fixed;
            right: 22px;
            bottom: 22px;
            width: 56px;
            height: 56px;
            z-index: 500;
        }
        .quick-menu-fab {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--accent);
            color: #08090c;
            border: none;
            font-size: 1.4rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 22px rgba(0,0,0,0.4);
            transition: transform 0.25s ease, background 0.2s;
        }
        .quick-menu-fab:hover { background: var(--accent-dark); }
        .quick-menu-fab.open { transform: rotate(75deg); }

        .quick-menu-option {
            position: absolute;
            top: 0; left: 0;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--bg-alt);
            border: 1px solid var(--border);
            color: var(--text-heading);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            cursor: pointer;
            box-shadow: 0 6px 16px rgba(0,0,0,0.35);
            opacity: 0;
            pointer-events: none;
            transform: translate(0, 0) scale(0.4);
            transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), opacity 0.2s ease;
        }
        .quick-menu-fab-wrap.open .quick-menu-option {
            opacity: 1;
            pointer-events: auto;
            transform: translate(var(--tx), var(--ty)) scale(1);
        }
        .quick-menu-option.active { border-color: var(--accent); color: var(--accent); }
        .quick-menu-option-label {
            position: absolute;
            right: 56px;
            white-space: nowrap;
            font-size: 0.68rem;
            background: rgba(0,0,0,0.8);
            color: #fff;
            padding: 3px 8px;
            border-radius: 6px;
            opacity: 0;
            transition: opacity 0.15s;
            pointer-events: none;
        }
        .quick-menu-option:hover .quick-menu-option-label { opacity: 1; }

        /* Le mode Menu Rapide masque le menu latéral classique, remplacé par la bulle */
        body.quick-menu-active #category-sidebar { display: none !important; }

        @media (max-width: 640px) {
            .quick-menu-fab-wrap { right: 16px; bottom: 16px; }
        }

        #main-container { display: flex; flex: 1; }

        #server-sidebar {
            width: 72px;
            background: var(--bg-alt);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
            gap: 10px;
            overflow-y: auto;
            flex-shrink: 0;
        }

        .sidebar-label {
            font-size: 9px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 4px;
        }

        .server-sidebar-separator {
            width: 40px;
            border: none;
            border-bottom: 1px dashed var(--border-10);
            margin: 6px 0;
        }

        #dashboard-content {
            flex: 1;
            background: var(--content-overlay);
            padding: 36px 40px;
            overflow-y: auto;
        }

        #category-sidebar {
            width: 160px;
            background: var(--bg-alt);
            border-left: 1px solid var(--border);
            padding: 24px 14px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex-shrink: 0;
        }

        .cat-label {
            font-size: 9px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 8px;
            padding: 0 8px;
        }

        .cat-btn {
            width: 100%;
            text-align: left;
            font-size: 0.78rem;
            font-weight: 600;
            padding: 8px 10px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: all 0.15s;
            border-left: 2px solid transparent;
            background: transparent;
        }
        .cat-btn.active { color: var(--text-heading); background: rgba(243,156,18,0.08); border-left-color: var(--accent); }
        .cat-btn:not(.active) { color: var(--text-soft); }
        .cat-btn:not(.active):hover { color: var(--text-heading); background: var(--hover-04); }

        .card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 22px;
            transition: border-color 0.2s;
            position: relative;
        }
        .card:hover { border-color: var(--border-10); }

        .card-title {
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 6px;
        }

        .card-desc {
            font-size: 0.73rem;
            color: var(--text-soft);
            line-height: 1.6;
        }

        .badge-premium {
            position: absolute;
            top: -12px;
            right: -12px;
            background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
            color: #000;
            font-size: 0.65rem;
            font-weight: 800;
            padding: 4px 10px;
            border-radius: 20px;
            box-shadow: 0 4px 12px rgba(243,156,18,0.3);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            border: 1px solid #ffb84d;
            z-index: 10;
        }

        .drop-zone {
            border: 2px dashed var(--border-10);
            border-radius: 10px;
            padding: 28px 16px;
            text-align: center;
            font-size: 0.72rem;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            background: var(--bg-alt);
        }
        .drop-zone:hover, .drop-zone.drag-over {
            border-color: var(--accent);
            background: rgba(243,156,18,0.04);
            color: var(--text-heading);
        }

        .field-input {
            width: 100%;
            background: var(--bg-alt);
            border: 1px solid var(--border-08);
            border-radius: 9px;
            padding: 10px 14px;
            font-size: 0.82rem;
            color: var(--text-heading);
            
            outline: none;
            transition: border-color 0.15s;
        }
        .field-input:focus { border-color: var(--accent); }
        .field-input::placeholder { color: var(--text-muted); }

        .btn-primary {
            background: var(--accent);
            color: #000;
            font-weight: 700;
            font-size: 0.78rem;
            padding: 10px 18px;
            border-radius: 9px;
            border: none;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
            width: 100%;
        }
        .btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }

        .btn-danger {
            background: rgba(239,68,68,0.08);
            border: 1px solid rgba(239,68,68,0.2);
            color: #f87171;
            font-weight: 700;
            font-size: 0.73rem;
            padding: 8px 14px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .btn-danger:hover { background: rgba(239,68,68,0.15); }

        .btn-secondary {
            background: var(--border-06);
            color: var(--text-heading);
            font-weight: 600;
            font-size: 0.78rem;
            padding: 10px 18px;
            border-radius: 9px;
            border: 1px solid var(--border-08);
            cursor: pointer;
            transition: background 0.15s;
        }
        .btn-secondary:hover { background: rgba(255,255,255,1); }

        .server-icon-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
            background: none;
            padding: 0;
            appearance: none;
            -webkit-appearance: none;
        }
        .server-icon-btn img { display: block; }
        .server-icon-btn:hover { border-color: var(--accent); border-radius: 14px; transform: scale(1.05); }
        .server-icon-btn img { width: 100%; height: 100%; object-fit: cover; }
        .server-icon-btn.bot-missing { opacity: 0.3; filter: grayscale(1); }
        .server-icon-btn.bot-missing:hover { opacity: 0.8; filter: grayscale(0.3); }

        /* ── Cartes de commandes (remplace les classes Tailwind codées en dur) ── */
        .cmd-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 18px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            transition: border-color 0.2s;
        }
        .cmd-card:hover { border-color: var(--border-10); }
        .cmd-card-title { font-size: 0.85rem; font-weight: 700; color: var(--text-heading); margin: 0 0 8px 0; padding-right: 48px; }
        .cmd-card-desc { font-size: 0.72rem; color: var(--text-soft); line-height: 1.55; margin: 0; }

        .cmd-switch { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; cursor: pointer; }
        .cmd-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
        .cmd-switch-slider {
            width: 40px; height: 22px;
            background: var(--border-10);
            border-radius: 999px;
            position: relative;
            transition: background 0.15s;
        }
        .cmd-switch-slider::after {
            content: '';
            position: absolute;
            top: 2px; left: 2px;
            width: 18px; height: 18px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            transition: transform 0.15s;
        }
        .cmd-switch-input:checked + .cmd-switch-slider { background: var(--accent); }
        .cmd-switch-input:checked + .cmd-switch-slider::after { transform: translateX(18px); }

        .opacity-50 { opacity: 0.5; }
        .cursor-not-allowed { cursor: not-allowed; }
        .hidden { display: none !important; }

        #logged-out-view { flex: 1; display: flex; flex-direction: column; }

        .hero-section {
            padding: 72px 24px 48px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 20px;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(243,156,18,0.1);
            border: 1px solid rgba(243,156,18,0.25);
            border-radius: 99px;
            padding: 5px 14px;
            font-size: 0.73rem;
            font-weight: 600;
            color: var(--accent);
        }

        .hero-title {
            
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 700;
            color: var(--text-heading);
            line-height: 1.15;
            max-width: 680px;
        }
        .hero-title span { color: var(--accent); }

        .hero-sub {
            font-size: 0.95rem;
            color: var(--text-soft);
            max-width: 540px;
            line-height: 1.7;
        }

        .hero-cta {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 8px;
        }

        .cta-primary {
            background: var(--accent);
            color: #000;
            font-weight: 700;
            font-size: 0.88rem;
            padding: 12px 26px;
            border-radius: 10px;
            text-decoration: none;
            transition: background 0.15s, transform 0.1s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .cta-primary:hover { background: var(--accent-dark); transform: translateY(-2px); }

        .cta-secondary {
            background: var(--hover-05);
            color: var(--text-heading);
            font-weight: 600;
            font-size: 0.88rem;
            padding: 12px 26px;
            border-radius: 10px;
            text-decoration: none;
            border: 1px solid var(--border-10);
            transition: background 0.15s, transform 0.1s;
        }
        .cta-secondary:hover { background: rgba(255,255,255,0.09); transform: translateY(-2px); }

        .section-divider {
            width: 100%;
            max-width: 860px;
            margin: 0 auto;
            border: none;
            border-top: 1px solid var(--border);
        }

        .landing-section {
            padding: 40px 24px;
            max-width: 900px;
            margin: 0 auto;
            width: 100%;
        }

        .section-title {
            
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 6px;
        }

        .section-sub {
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-bottom: 24px;
        }

        .info-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px 32px;
            line-height: 1.75;
            font-size: 0.875rem;
        }

        .info-card p + p { margin-top: 12px; }

        .tag-lutra {
            display: inline-block;
            background: rgba(243,156,18,0.12);
            border: 1px solid rgba(243,156,18,0.2);
            color: var(--accent);
            font-size: 0.68rem;
            font-weight: 700;
            padding: 2px 9px;
            border-radius: 6px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* ── Hub des robots (page vitrine) ─────────────────────────── */
        .hub-section {
            padding: 20px 24px 64px;
            max-width: 1000px;
            margin: 0 auto;
            width: 100%;
        }

        .robots-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
            gap: 24px;
            margin-top: 8px;
        }

        .robot-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: all 0.25s ease;
        }
        .robot-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }

        .robot-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }

        .avatar-frame {
            width: 56px;
            height: 56px;
            background: var(--bg-alt);
            border: 1px solid var(--border);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            flex-shrink: 0;
        }
        .avatar-frame img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }

        .robot-identity h3 {
            
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-heading);
            margin: 0 0 6px 0;
        }

        .status-badge {
            display: inline-block;
            font-size: 0.68rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .status-badge.online { background: rgba(46,204,113,0.15); color: #2ecc71; }
        .status-badge.soon { background: var(--border-08); color: var(--text-muted); }

        .robot-desc {
            color: var(--text-soft);
            font-size: 0.85rem;
            line-height: 1.6;
            margin: 0 0 24px 0;
        }

        .robot-actions { display: flex; gap: 10px; }

        .btn-panel {
            flex: 1;
            background: var(--accent);
            color: #000;
            text-align: center;
            text-decoration: none;
            padding: 11px;
            border-radius: 9px;
            font-weight: 700;
            font-size: 0.85rem;
            transition: background 0.15s, transform 0.1s;
        }
        .btn-panel:hover { background: var(--accent-dark); transform: translateY(-1px); }

        .btn-disabled {
            flex: 1;
            background: var(--border-08);
            color: var(--text-muted);
            text-align: center;
            padding: 11px;
            border-radius: 9px;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: not-allowed;
        }

        /* ── Section Articles ──────────────────────────────────────── */
        .articles-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }

        .articles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 18px;
            margin-top: 16px;
        }

        .article-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .article-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }

        .article-card-banner {
            width: 100%;
            height: 120px;
            object-fit: cover;
            display: block;
            background: var(--bg-alt);
        }

        .article-card-body {
            padding: 14px 16px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
        }

        .article-card-title {
            font-size: 0.92rem;
            font-weight: 700;
            color: var(--text-heading);
            line-height: 1.35;
        }

        .article-card-excerpt {
            font-size: 0.78rem;
            color: var(--text-muted);
            line-height: 1.55;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex: 1;
        }

        .article-card-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.68rem;
            color: var(--text-muted);
            margin-top: 4px;
            gap: 8px;
        }

        .article-card-staff-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(243,156,18,0.9);
            color: #000;
            font-size: 0.62rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 6px;
            text-transform: uppercase;
        }

        .modal-box-wide { max-width: 720px; max-height: 88vh; overflow-y: auto; }

        .art-close-btn {
            background: var(--border-06);
            border: 1px solid var(--border-08);
            color: var(--text-muted);
            width: 30px;
            height: 30px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.85rem;
        }
        .art-close-btn:hover { color: var(--text-heading); }

        .art-detail-banner {
            width: 100%;
            max-height: 260px;
            object-fit: cover;
            border-radius: 12px;
            margin-bottom: 16px;
        }

        .art-detail-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 10px;
        }

        .art-detail-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-bottom: 18px;
        }
        .art-detail-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
        .art-detail-dot { opacity: 0.5; }

        .art-detail-content {
            font-size: 0.87rem;
            line-height: 1.75;
            color: var(--text-soft);
            word-break: break-word;
        }
        .art-detail-content img { max-width: 100%; border-radius: 10px; margin: 10px 0; display: block; }
        .art-detail-content a { color: var(--accent); }
        .art-detail-content strong { color: var(--text-heading); }
        .art-detail-content p { margin: 0 0 12px; }

        .art-reactions-bar {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px solid var(--border);
        }

        .art-reaction-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            background: var(--bg-alt);
            border: 1px solid var(--border-08);
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 0.78rem;
            color: var(--text-heading);
            cursor: pointer;
            transition: all 0.15s;
        }
        .art-reaction-btn:hover { border-color: var(--border-hover); }
        .art-reaction-btn.reacted { background: rgba(243,156,18,0.14); border-color: rgba(243,156,18,0.4); color: var(--accent); }

        .art-staff-actions {
            display: flex;
            gap: 10px;
            margin-top: 18px;
        }

        .art-md-toolbar {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
        }
        .art-md-toolbar button {
            background: var(--bg-alt);
            border: 1px solid var(--border-08);
            color: var(--text-heading);
            width: 30px;
            height: 30px;
            border-radius: 7px;
            cursor: pointer;
            font-size: 0.8rem;
        }
        .art-md-toolbar button:hover { border-color: var(--border-hover); }

        .art-editor-error {
            font-size: 0.78rem;
            color: #f87171;
            background: rgba(239,68,68,0.08);
            border: 1px solid rgba(239,68,68,0.2);
            border-radius: 8px;
            padding: 8px 12px;
        }

        .discord-banner {
            background: linear-gradient(135deg, rgba(88,101,242,0.12) 0%, rgba(88,101,242,0.04) 100%);
            border: 1px solid rgba(88,101,242,0.25);
            border-radius: 16px;
            padding: 28px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }

        .discord-banner-text h3 {
            
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 5px;
        }

        .discord-banner-text p {
            font-size: 0.8rem;
            color: var(--text-soft);
            line-height: 1.6;
            max-width: 480px;
        }

        .btn-discord {
            background: #5865f2;
            color: var(--text-heading);
            font-weight: 700;
            font-size: 0.82rem;
            padding: 10px 20px;
            border-radius: 9px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background 0.15s, transform 0.1s;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .btn-discord:hover { background: #4752c4; transform: translateY(-1px); }

        footer {
            background: var(--bg-alt);
            border-top: 1px solid var(--border);
            padding: 28px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        footer a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
        footer a:hover { color: var(--accent); }
        .footer-links { display: flex; gap: 20px; flex-wrap: wrap; }

        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.75);
            backdrop-filter: blur(4px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .modal-overlay.active { display: flex; }

        .modal-box {
            background: var(--bg-panel);
            border: 1px solid var(--border-08);
            border-radius: 18px;
            padding: 28px;
            max-width: 440px;
            width: 100%;
            margin: 16px;
            box-shadow: 0 24px 80px rgba(0,0,0,0.5);
        }

        .modal-title {
            
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 8px;
        }

        #save-commands-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: var(--bg-panel);
            border-top: 1px solid var(--accent);
            padding: 14px 24px;
            display: flex;
            justify-content: center;
            z-index: 100;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(.22,1,.36,1);
            box-shadow: 0 -8px 40px rgba(243,156,18,0.12);
        }
        #save-commands-bar.visible { transform: translateY(0); }

        .save-bar-inner {
            max-width: 800px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
        }

        #profile-status {
            font-size: 0.75rem;
            text-align: center;
            font-weight: 500;
            margin-top: 12px;
            display: none;
        }

        .reset-bar {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .server-header { margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
        .server-header h2 {  font-size: 1.5rem; font-weight: 700; color: var(--text-heading); }
        .server-header p { font-size: 0.73rem; color: var(--text-muted); margin-top: 3px; }
        .server-header p span { font-family: monospace; }

        #no-server-selected {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 12px;
            color: var(--text-muted);
        }

        /* Particle cursor */
        #particle-canvas {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 9999;
        }

        /* Profile panel styles */
        .user-profile-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 18px;
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 12px;
        }
        .user-profile-avatar {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: 2px solid var(--accent);
            flex-shrink: 0;
            object-fit: cover;
        }
        .user-profile-names { display: flex; flex-direction: column; gap: 2px; }
        .user-profile-display { font-weight: 700; font-size: 0.9rem; color: var(--text-heading); }
        .user-profile-username { font-size: 0.75rem; color: var(--text-soft); }
        .user-profile-id { font-size: 0.68rem; color: var(--text-muted); font-family: monospace; }

        .premium-inner-card {
            border-radius: 10px;
            padding: 12px 16px;
            font-size: 0.78rem;
            line-height: 1.55;
            margin-bottom: 12px;
        }
        .premium-inner-card.is-premium {
            background: linear-gradient(135deg, rgba(243,156,18,0.12) 0%, rgba(230,126,34,0.08) 100%);
            border: 1px solid rgba(243,156,18,0.35);
            color: #f5c842;
        }
        .premium-inner-card.not-premium {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.07);
            color: var(--text-soft);
        }
        .premium-inner-card a { color: var(--accent); text-decoration: none; font-weight: 600; }
        .premium-inner-card a:hover { text-decoration: underline; }

        .stats-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 16px 18px;
        }
        .stats-card-title {
            
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .stats-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 0;
            border-bottom: 1px solid var(--hover-04);
            font-size: 0.75rem;
        }
        .stats-row:last-child { border-bottom: none; }
        .stats-row-label { color: var(--text-soft); }
        .stats-row-value { color: var(--text-heading); font-weight: 700; font-family: monospace; }

        /* Command category labels */
        .cmd-category-label {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 10px;
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .cmd-category-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(243,156,18,0.18);
        }

        /* Page transition */
        body { opacity: 1; transition: opacity 0.25s ease; }
        body.page-leaving { opacity: 0; }

        /* Premium banner on profile */
        .premium-cta-banner {
            border-radius: 14px;
            padding: 20px 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            background: linear-gradient(135deg, rgba(243,156,18,0.13) 0%, rgba(230,126,34,0.07) 100%);
            border: 1px solid rgba(243,156,18,0.3);
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            text-decoration: none;
        }
        .premium-cta-banner:hover { border-color: rgba(243,156,18,0.6); background: linear-gradient(135deg, rgba(243,156,18,0.18) 0%, rgba(230,126,34,0.1) 100%); }
        .premium-cta-banner-text { flex: 1; }
        .premium-cta-banner-title {  font-weight: 700; font-size: 0.92rem; color: var(--text-heading); margin-bottom: 4px; }
        .premium-cta-banner-sub { font-size: 0.75rem; color: #c9a227; line-height: 1.55; }
        .premium-cta-banner-btn { background: var(--accent); color: #000; font-weight: 700; font-size: 0.75rem; padding: 8px 16px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; }

        /* Improved profile panel layout */
        .profile-panel-layout {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 14px;
            max-width: 100%;
        }
        @media (max-width: 900px) { .profile-panel-layout { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 700px) { .profile-panel-layout { grid-template-columns: 1fr; } }

        .profile-info-block {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px;
        }
        .profile-block-title {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 14px;
        }
        .profile-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 0;
            border-bottom: 1px solid var(--hover-04);
            font-size: 0.78rem;
        }
        .profile-info-row:last-child { border-bottom: none; }
        .profile-info-row-label { color: var(--text-muted); font-size: 0.73rem; }
        .profile-info-row-value { color: var(--text-heading); font-weight: 600; font-size: 0.78rem; max-width: 60%; text-align: right; word-break: break-all; }

        .discord-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 4px;
            font-size: 0.85rem;
        }

        /* ── Burger menu ──────────────────────────────────────────── */
        .burger-btn {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 36px;
            height: 36px;
            background: var(--hover-05);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            padding: 8px;
            transition: background 0.15s;
            flex-shrink: 0;
        }
        .burger-btn:hover { background: rgba(255,255,255,0.09); }
        .burger-btn span {
            display: block;
            height: 1.5px;
            background: #9ca3af;
            border-radius: 2px;
            transition: all 0.25s;
        }
        .burger-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--text-heading); }
        .burger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        .burger-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--text-heading); }

        /* Mobile drawer */
        #mobile-drawer {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--drawer-bg);
            backdrop-filter: blur(20px);
            z-index: 190;
            flex-direction: column;
            padding: 24px 20px;
            gap: 6px;
            overflow-y: auto;
            border-top: 1px solid var(--border);
        }
        #mobile-drawer.open { display: flex; }

        .mobile-drawer-section {
            margin-bottom: 8px;
        }
        .mobile-drawer-label {
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            padding: 0 10px;
            margin-bottom: 6px;
        }
        .mobile-nav-link {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #d1d5db;
            font-size: 0.9rem;
            font-weight: 500;
            padding: 13px 14px;
            border-radius: 10px;
            text-decoration: none;
            transition: background 0.15s, color 0.15s;
            border: 1px solid transparent;
        }
        .mobile-nav-link:hover { background: var(--hover-05); color: var(--text-heading); }
        .mobile-nav-link.active { color: var(--accent); background: rgba(243,156,18,0.07); border-color: rgba(243,156,18,0.18); }
        .mobile-nav-link .mobile-link-icon { font-size: 1.1rem; width: 24px; text-align: center; }

        .mobile-drawer-divider {
            border: none;
            border-top: 1px solid var(--border);
            margin: 10px 0;
        }

        /* Mobile profile zone in drawer */
        #mobile-profile-zone {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        #mobile-profile-zone img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; flex-shrink: 0; }
        #mobile-profile-zone .mpz-name { font-weight: 700; color: var(--text-heading); font-size: 0.85rem; }
        #mobile-profile-zone .mpz-tag { font-size: 0.72rem; color: var(--text-soft); }
        #mobile-profile-zone .mpz-logout { margin-left: auto; font-size: 0.7rem; color: #f87171; text-decoration: none; padding: 5px 10px; border: 1px solid rgba(248,113,113,0.25); border-radius: 7px; }

        /* ── Lutra badges ─────────────────────────────────────────── */
        .lutra-badges-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }
        .lutra-badge-wrap {
            position: relative;
            display: inline-flex;
        }
        .lutra-badge-img {
            width: 26px;
            height: 26px;
            border-radius: 5px;
            object-fit: contain;
            cursor: pointer;
            transition: transform 0.15s, filter 0.15s;
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
        }
        .lutra-badge-img:hover { transform: scale(1.18); }

        .lutra-badge-tooltip {
            display: none;
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #1a1d2e;
            border: 1px solid var(--border-10);
            border-radius: 10px;
            padding: 10px 13px;
            min-width: 170px;
            max-width: 220px;
            z-index: 500;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
            pointer-events: none;
        }
        .lutra-badge-wrap:hover .lutra-badge-tooltip { display: block; }
        .lutra-badge-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: var(--border-10);
        }
        .lutra-badge-tooltip::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 1px;
            border: 5px solid transparent;
            border-top-color: #1a1d2e;
            z-index: 1;
        }
        .lbt-name {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 4px;
            white-space: nowrap;
        }
        .lbt-desc { font-size: 0.68rem; color: var(--text-soft); line-height: 1.5; }

        /* Badge info "i" button */
        .badges-info-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.2);
            background: transparent;
            color: var(--text-muted);
            font-size: 0.6rem;
            font-weight: 700;
            cursor: pointer;
            position: relative;
            transition: border-color 0.15s, color 0.15s;
            flex-shrink: 0;
            font-style: italic;
        }
        .badges-info-btn:hover { border-color: var(--accent); color: var(--accent); }
        .badges-info-tooltip {
            display: none;
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #1a1d2e;
            border: 1px solid rgba(243,156,18,0.25);
            border-radius: 10px;
            padding: 10px 13px;
            min-width: 220px;
            max-width: 260px;
            z-index: 500;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
            pointer-events: none;
            font-style: normal;
        }
        .badges-info-btn:hover .badges-info-tooltip { display: block; }
        .badges-info-tooltip-text { font-size: 0.7rem; color: var(--text-soft); line-height: 1.6; }
        .badges-info-tooltip-text strong { color: var(--accent); font-weight: 600; }

        /* ── Responsive layout ────────────────────────────────────── */
        @media (max-width: 900px) {
            #category-sidebar { width: 130px; }
        }

        @media (max-width: 720px) {
            /* Server sidebar becomes horizontal strip on mobile */
            #server-sidebar {
                width: 100%;
                height: auto;
                flex-direction: row;
                border-right: none;
                border-bottom: 1px solid var(--border);
                padding: 12px 16px;
                overflow-x: auto;
                overflow-y: hidden;
                gap: 8px;
                align-items: center;
            }
            /* #server-icons-list a un style inline "flex-direction:column; width:100%"
               (posé en JS pour le mode bureau) qui écrase la règle ci-dessus sur mobile :
               les icônes restaient empilées verticalement sur toute la hauteur de la page,
               cassant l'affichage. On force donc explicitement la ligne horizontale ici. */
            #server-sidebar #server-icons-list {
                flex-direction: row !important;
                width: auto !important;
                flex-shrink: 0;
            }
            .sidebar-label { display: none; }
            .server-sidebar-separator {
                width: 1px;
                height: 36px;
                border-bottom: none;
                border-right: 1px dashed var(--border-10);
                margin: 0 2px;
            }

            /* Stack content vertically */
            #main-container > div[style*="display:flex"] { flex-direction: column !important; }
            #dashboard-content { padding: 18px 14px; }

            /* Category sidebar becomes bottom tab bar on mobile */
            #category-sidebar {
                width: 100%;
                flex-direction: row !important;
                border-left: none;
                border-top: 1px solid var(--border);
                padding: 8px 12px;
                gap: 6px;
                justify-content: center;
                order: 10;
                height: auto;
            }
            .cat-label { display: none; }
            .cat-btn {
                font-size: 0.7rem;
                padding: 7px 10px;
                border-left: none;
                border-bottom: 2px solid transparent;
                flex: 1;
                text-align: center;
                border-radius: 8px 8px 0 0;
            }
            .cat-btn.active { border-left-color: transparent; border-bottom-color: var(--accent); background: rgba(243,156,18,0.06); }
            #category-sidebar hr { display: none; }
            #category-sidebar > div[style*="flex:1"] { display: none; }

            .profile-panel-layout { grid-template-columns: 1fr; }

            /* Grid commands */
            #commands-grid-jeux, #commands-grid-social {
                grid-template-columns: 1fr !important;
            }
        }

        @media (max-width: 640px) {
            .hero-section { padding: 40px 16px 28px; }
            .landing-section { padding: 24px 14px; }
            .discord-banner { flex-direction: column; gap: 14px; }
            .discord-banner-text p { max-width: 100%; }
            footer { flex-direction: column; gap: 12px; text-align: center; }
            .footer-links { justify-content: center; }
            nav { padding: 0 14px; }
            .nav-links { display: none !important; }
            .burger-btn { display: flex; }
            .hero-title { font-size: clamp(1.5rem, 6vw, 2.2rem); }
            #auth-zone .desktop-auth { display: none; }
        }

        @media (min-width: 641px) {
            #mobile-drawer { display: none !important; }
        }

        /* ── Embed Builder ──────────────────────────────────────────── */
        #embed-builder-layout { display: grid; grid-template-columns: 1fr 280px; gap: 22px; align-items: start; }
        @media (max-width: 900px) { #embed-builder-layout { grid-template-columns: 1fr; } }

        .eb-block { margin-bottom: 18px; }
        .eb-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; display:block; }

        .eb-drafts-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
        .eb-drafts-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
        .eb-drafts-count { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 10px; }
        .eb-draft-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:9px; border:1px solid var(--border); background:var(--bg-alt); margin-bottom:8px; cursor:pointer; font-size:0.8rem; color:#d1d5db; transition: border-color .15s, background .15s; }
        .eb-draft-item:hover { border-color: rgba(243,156,18,0.35); }
        .eb-draft-item.active { border-color: var(--accent); background: rgba(243,156,18,0.07); color:var(--text-heading); }
        .eb-draft-item .eb-draft-sent-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; flex-shrink:0; }
        .eb-new-draft-btn { width:100%; background: var(--border-06); border:1px solid var(--border); color:var(--text-heading); font-weight:600; font-size:0.78rem; padding:9px 12px; border-radius:9px; cursor:pointer; transition: background .15s; }
        .eb-new-draft-btn:hover { background: var(--border-10); }
        .eb-new-draft-btn:disabled { opacity:0.4; cursor:not-allowed; }

        .eb-builder-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
        .eb-builder-tab-btn { background: var(--hover-05); border:1px solid var(--border); color: var(--text-soft); font-size:0.74rem; font-weight:600; padding:7px 13px; border-radius:8px; cursor:pointer; transition: all .15s; }
        .eb-builder-tab-btn:hover { color:var(--text-heading); }
        .eb-builder-tab-btn.active { background: var(--accent); color:#000; border-color: var(--accent); }

        .eb-preview-box { background:var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:16px; margin-top:14px; }
        .eb-preview-author { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
        .eb-preview-author img { width:34px; height:34px; border-radius:50%; object-fit:cover; }
        .eb-preview-author-name { font-weight:700; color:#fff; font-size:0.85rem; }
        .eb-preview-author-name .eb-app-tag { background:#5865f2; color:#fff; font-size:0.55rem; font-weight:700; padding:1px 5px; border-radius:4px; margin-left:6px; vertical-align:middle; }
        .eb-preview-time { color: var(--text-muted); font-size:0.68rem; margin-left:6px; }
        .eb-preview-content { font-size:0.83rem; color:#dcddde; white-space:pre-wrap; margin-bottom:8px; line-height:1.5; }
        .eb-preview-embed { border-left:4px solid var(--accent); background:rgba(255,255,255,0.02); border-radius:6px; padding:12px 14px; max-width:480px; }
        .eb-preview-embed-author { display:flex; align-items:center; gap:7px; font-size:0.76rem; font-weight:600; color:#fff; margin-bottom:6px; }
        .eb-preview-embed-author img { width:18px; height:18px; border-radius:50%; }
        .eb-preview-embed-title { font-weight:700; color:#fff; font-size:0.9rem; margin-bottom:5px; }
        .eb-preview-embed-desc { font-size:0.8rem; color:#dcddde; line-height:1.5; margin-bottom:8px; white-space:pre-wrap; }
        .eb-preview-embed-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
        .eb-preview-embed-field-name { font-size:0.75rem; font-weight:700; color:#fff; margin-bottom:2px; }
        .eb-preview-embed-field-value { font-size:0.75rem; color:#dcddde; }
        .eb-preview-embed-image { width:100%; max-width:300px; border-radius:6px; margin-top:6px; display:block; }
        .eb-preview-embed-thumb { width:64px; height:64px; border-radius:6px; object-fit:cover; float:right; }
        .eb-preview-embed-footer { display:flex; align-items:center; gap:6px; font-size:0.7rem; color:var(--text-muted); margin-top:8px; }
        .eb-preview-embed-footer img { width:16px; height:16px; border-radius:50%; }
        .eb-preview-components { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
        .eb-preview-btn { background:#4f545c; color:#fff; font-size:0.76rem; font-weight:600; padding:7px 14px; border-radius:6px; border:none; }
        .eb-preview-select { background:#2b2d31; border:1px solid #1e1f22; color:#dcddde; font-size:0.78rem; padding:8px 12px; border-radius:6px; width:100%; max-width:320px; }

        .eb-field-row { display:flex; gap:8px; margin-bottom:8px; align-items:flex-start; }
        .eb-field-row .field-input { flex:1; }
        .eb-remove-btn { background: rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.25); color:#f87171; font-size:0.75rem; font-weight:700; width:34px; height:34px; border-radius:8px; cursor:pointer; flex-shrink:0; }
        .eb-remove-btn:hover { background: rgba(239,68,68,0.2); }
        .eb-add-btn { background: rgba(243,156,18,0.08); border:1px solid rgba(243,156,18,0.25); color: var(--accent); font-size:0.76rem; font-weight:700; padding:8px 14px; border-radius:8px; cursor:pointer; width:100%; }
        .eb-add-btn:hover { background: rgba(243,156,18,0.15); }
        .eb-color-row { display:flex; align-items:center; gap:10px; }
        .eb-color-row input[type=color] { width:42px; height:38px; border:1px solid var(--border); border-radius:8px; background:none; cursor:pointer; padding:2px; }
        .eb-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .eb-save-status { font-size:0.7rem; color: var(--text-muted); margin-top:8px; min-height:14px; }
        .eb-footer-actions { display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:10px; flex-wrap:wrap; }
        .eb-limit-banner { background: linear-gradient(135deg,rgba(243,156,18,0.1) 0%,rgba(230,126,34,0.05) 100%); border:1px solid rgba(243,156,18,0.25); border-radius:10px; padding:12px 14px; font-size:0.74rem; color:#c9a227; margin-bottom:14px; }