/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* KRITISCH: Pseudo-Elemente sofort verstecken - muss ganz oben stehen */
.page-card::before,
.page-card::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

*:focus,
*:focus-visible {
    outline: none !important;
}

/* Fix für komische Kästchen bei Buttons */
.page-card:focus,
.page-card:focus-visible,
.action-button:focus,
.action-button:focus-visible,
.menu-item:focus,
.menu-item:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.page-card:focus::after,
.page-card:focus-visible::after,
.page-card:focus::before,
.page-card:focus-visible::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Pseudo-Elemente komplett verstecken während des Ladens */
body.page-loading .page-card::before,
body.page-loading .page-card::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}

.action-button:focus,
.action-button:focus-visible {
    border-color: #333 !important;
    background: rgba(30, 30, 30, 0.8) !important;
}

/* Login Modal - Standardmäßig versteckt */
.modal,
#loginModal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.modal[style*="display: block"],
.modal[style*="display:block"],
#loginModal[style*="display: block"],
#loginModal[style*="display:block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Permission-based Button Styles */
.page-card.disabled {
    display: flex !important;
    visibility: visible !important;
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
    filter: grayscale(80%);
    overflow: hidden !important;
}

.page-card.disabled .page-icon,
.page-card.disabled .page-info {
    display: flex !important;
    visibility: visible !important;
    opacity: 0.6;
}

.page-card.disabled .page-info h3 {
    color: var(--discord-text-muted);
}

.page-card.disabled .card-glow {
    display: none !important;
}

.page-card.loading {
    opacity: 0 !important;
    visibility: hidden !important;
    cursor: wait;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-card.loading .page-icon i {
    animation: spin 1s linear infinite;
}

/* Buttons ohne loading-Klasse sollen sichtbar sein */
.page-card:not(.loading) {
    visibility: visible !important;
    overflow: hidden !important;
}
.page-card:not(.loading):not(.disabled) {
    opacity: 1 !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
:root {
    /* Professional Dark Theme */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a24;
    --bg-elevated: #1f1f2e;
    
    --surface-primary: rgba(25, 25, 35, 0.95);
    --surface-secondary: rgba(30, 30, 42, 0.9);
    --surface-hover: rgba(40, 40, 55, 0.95);
    
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-medium: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
    
    --accent-primary: #5865f2;
    --accent-hover: #4752c4;
    --accent-glow: rgba(88, 101, 242, 0.3);
    
    --success: #3ba55d;
    --warning: #faa81a;
    --danger: #ed4245;
    
    --text-primary: #f0f0f5;
    --text-secondary: #b9bbbe;
    --text-muted: #72767d;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    
    /* Legacy Discord vars for compatibility */
    --discord-dark: #2c2f33;
    --discord-darker: #23272a;
    --discord-darkest: #18191c;
    --discord-light: #40444b;
    --discord-lighter: #4f545c;
    --discord-accent: #5865f2;
    --discord-accent-hover: #4752c4;
    --discord-green: #57f287;
    --discord-red: #ed4245;
    --discord-yellow: #fee75c;
    --discord-text: #dcddde;
    --discord-text-muted: #72767d;
    --discord-text-link: #00b0f4;
    --discord-border: #40444b;
    --discord-shadow: rgba(0, 0, 0, 0.5);
    --discord-glow: rgba(88, 101, 242, 0.4);
    --discord-card: #2c2f33;
    --discord-card-hover: #36393f;

    /* Dashboard-Kacheln: überall dieselbe feste Größe (--dash-tile-size) */
    --dash-tile-size: 80px;
    --dash-tile-gap: 0.5rem;
}

html {
    background: #000000; /* Schwarzer Fallback-Hintergrund, verhindert weißen Flash */
    overflow-x: hidden;
    max-width: 100%;
    scrollbar-gutter: stable;
}

/* Beim Fenster-Resize kurz keine Transitions → weniger „Flackern“ am Breakpoint */
html.dashboard-resize-tuning .navbar,
html.dashboard-resize-tuning .nav-container,
html.dashboard-resize-tuning .nav-logo,
html.dashboard-resize-tuning .nav-menu,
html.dashboard-resize-tuning .nav-menu a,
html.dashboard-resize-tuning .server-management-header,
html.dashboard-resize-tuning .server-header,
html.dashboard-resize-tuning .server-header-left,
html.dashboard-resize-tuning .server-header-right,
html.dashboard-resize-tuning .dashboard-content,
html.dashboard-resize-tuning .dashboard-container,
html.dashboard-resize-tuning .settings-section,
html.dashboard-resize-tuning .page-grid,
html.dashboard-resize-tuning .page-card,
html.dashboard-resize-tuning .server-settings-btn {
    transition: none !important;
}
html.dashboard-resize-tuning .server-settings-btn i {
    animation: none !important;
}

html::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: -3; /* Hinter allen Background-Effekten */
    pointer-events: none;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: transparent !important; /* Transparent, damit Background-Effekte sichtbar sind */
    color: var(--text-primary);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    position: relative;
}

@media (max-width: 900px) {
    /* Sicherstellen, dass versteckte Modals beim Scrollen nicht sichtbar werden */
    .modal:not([style*="display: block"]):not([style*="display:block"]) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
    
    #loginModal:not([style*="display: block"]):not([style*="display:block"]) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
    
    /* Versteckte Elemente beim Scrollen nicht sichtbar machen */
    [style*="display: none"],
    [style*="display:none"] {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Removed body::before to allow background effects to show through */
/* Navigation Styles - Professional & Elegant */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100%;
    background: rgba(15, 15, 15, 0.3);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1000;
    padding: 1rem 0;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
}
.nav-container {
    margin: 0 auto;
    padding: 0 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Header-Zentrierung ohne Snap-Punkt: width = min(1200px, viewport - 2rem).
       Wächst stetig mit dem Viewport bis 1200px und behält oberhalb mindestens
       16px Abstand zum Rand → kein ruckartiger Sprung der Header-Items beim
       Resize, und auf üblichen Desktop-Breiten wirkt die Navbar zentriert
       (statt — wie bei 1800px max-width — bis zum Rand gestreckt). */
    width: min(1200px, calc(100% - 2rem));
    min-width: 0;
    position: relative;
    box-sizing: border-box;
}
/* Tablet/Burger (721–900px): eine Navbar-Zeile + horizontal scrollen — kein Wrap am Burger-Breakpoint (sonst Server/Profil untereinander).
   Umbrechen nur optional ≤720px (eigener Block nach dem 900-Navbar-Set). */
@media (max-width: 900px) and (min-width: 721px) {
    .nav-container {
        padding: 0 1rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        align-items: center;
        gap: 0.75rem;
        justify-content: space-between;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
    }
    .nav-logo {
        flex-shrink: 0;
    }
    .nav-menu {
        flex-shrink: 0;
        gap: clamp(0.75rem, 2vw, 1.25rem);
    }
}
/* Ensure desktop styles are applied correctly on resize */
@media (min-width: 901px) {
    .nav-container {
        padding: 0 20px 0 0 !important;
    }
    .nav-logo {
        margin-left: -20px !important;
        padding-left: 20px !important;
    }
    /* FIX: Mobile-Versionen auf Desktop explizit verstecken — inkl. Container.
     * JS darf hier keinen inline display:block !important setzen, sonst
     * gewinnt das Inline-!important über diese CSS-Regel. */
    .nav-menu .mobile-auth-container,
    li.mobile-auth-container,
    #mobileAuthContainer,
    .nav-menu .mobile-auth-buttons,
    .nav-menu .mobile-auth-buttons .server-section,
    .nav-menu .mobile-auth-buttons .profile-section,
    #serverSectionMobile,
    #profileSectionMobile {
        display: none !important;
    }
}
.nav-logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--discord-accent);
    text-shadow: 0 0 10px var(--discord-glow);
    margin-left: -20px; /* Move logo to the very left edge */
    padding-left: 20px; /* Add padding to compensate for the removed left padding */
}
.logo-img {
    width: 40px;
    height: 40px;
    margin-right: 0.5rem;
    animation: glow 2s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 15px var(--discord-glow));
}
@keyframes glow {
    from { filter: drop-shadow(0 0 5px var(--discord-accent)); }
    to { filter: drop-shadow(0 0 15px var(--discord-accent)); }
}
.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 2rem;
    margin-left: auto; /* Push navigation to the right */
    margin-right: 1rem; /* Space before language switcher */
}

/* Adjust margin when not logged in - login button should not be too far right */
.nav-menu.not-logged-in {
    margin-right: 2.5rem;
}

/* Normal margin when logged in */
.nav-menu.logged-in {
    margin-right: 1rem;
}
.nav-menu a {
    text-decoration: none;
    color: var(--discord-text);
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
}
.nav-menu a:hover {
    color: #5865f2;
    background: rgba(114, 137, 218, 0.1);
    box-shadow: 0 0 10px rgba(114, 137, 218, 0.2);
}
.nav-menu a.active {
    color: var(--discord-accent);
    background: rgba(114, 137, 218, 0.2);
    box-shadow: 0 0 15px rgba(114, 137, 218, 0.3);
}
.login-btn {
    background: linear-gradient(135deg, var(--discord-accent), var(--discord-accent-hover));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--discord-glow);
}
.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--discord-glow);
}
.profile-section {
    position: relative;
    display: none; /* Hidden by default */
}
.profile-section.show {
    display: flex !important;
    align-items: center;
}
.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--discord-accent);
    transition: all 0.3s ease;
    object-fit: cover;
    background-color: var(--discord-dark);
}
.avatar-img:hover {
    border-color: var(--discord-accent-hover);
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--discord-glow);
}
.profile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 25px var(--discord-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    margin-top: 10px;
}
.profile-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.profile-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}
.profile-info {
    display: flex;
    flex-direction: column;
}
.username {
    font-weight: 600;
    color: #dcddde;
    font-size: 14px;
}
.discriminator {
    color: #72767d;
    font-size: 12px;
}
.profile-actions {
    padding: 8px 0;
}
.profile-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #dcddde;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: 14px;
}
.profile-link:hover {
    background: rgba(88, 101, 242, 0.1);
    color: #5865f2;
}
.profile-link.admin-only {
    color: #ed4245;
}
.profile-link.admin-only:hover {
    background: rgba(237, 66, 69, 0.1);
    color: #ed4245;
}
.profile-link i {
    width: 20px;
    margin-right: 0.75rem;
    font-size: 0.9rem;
}
.profile-link span {
    flex: 1;
}
/* Editor Container */
.editor-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
    background: transparent;
    margin-top: 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}
/* Removed ::before to allow body background to show through */
/* Server Management Header */
.server-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 70px;
    min-height: 70px;
    max-height: 70px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: rgba(15, 15, 15, 0.3);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 999;
    position: fixed;
    top: var(--kynx-navbar-offset);
    left: 0;
    right: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.server-management-header .header-right {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Toggle: Icon-Dreh-Animation (gespeichert pro Nutzer) */
.dashboard-spin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.3rem 0.65rem 0.3rem 0.75rem;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(88, 101, 242, 0.12), rgba(0, 0, 0, 0.25));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
    max-height: 36px;
    user-select: none;
    -webkit-user-select: none;
}
.dashboard-spin-toggle:hover {
    border-color: rgba(88, 101, 242, 0.35);
    background: linear-gradient(145deg, rgba(88, 101, 242, 0.18), rgba(0, 0, 0, 0.28));
}
.dashboard-spin-toggle__label {
    white-space: nowrap;
}
.dashboard-spin-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.dashboard-spin-toggle__switch {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.dashboard-spin-toggle__switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}
.dashboard-spin-toggle input:checked + .dashboard-spin-toggle__switch {
    background: rgba(88, 101, 242, 0.45);
    border-color: rgba(88, 101, 242, 0.55);
}
.dashboard-spin-toggle input:checked + .dashboard-spin-toggle__switch::after {
    transform: translateX(18px);
}
.dashboard-spin-toggle input:focus-visible + .dashboard-spin-toggle__switch {
    outline: 2px solid rgba(88, 101, 242, 0.7);
    outline-offset: 2px;
}
.dashboard-spin-toggle--hidden {
    display: none !important;
}

/* Server Management Menu */
.server-management-menu {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    display: block;
}
.server-management-menu:not(.active) {
    display: none !important;
}
.server-management-menu.active {
    display: block !important;
}
/* Action Buttons Grid */
.action-buttons-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid #333;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    padding: 0.75rem;
    min-height: 100px;
}
.action-button:hover {
    border-color: #5865f2;
    background: rgba(30, 30, 30, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(88, 101, 242, 0.2);
}
.action-button.active {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.1);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
}
.action-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}
.action-icon {
    width: 45px;
    height: 45px;
    background: rgba(88, 101, 242, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}
.action-button:hover .action-icon {
    background: rgba(88, 101, 242, 0.3);
    transform: scale(1.1);
}
.action-icon i {
    font-size: 1.3rem;
    color: #5865f2;
}
.action-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
}
/* Responsive Design für Action Buttons */
@media (max-width: 900px) {
    .action-buttons-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    .action-button {
        min-height: 100px;
        padding: 0.75rem;
    }
    .action-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0.5rem;
    }
    .action-icon i {
        font-size: 1.2rem;
    }
    .action-label {
        font-size: 0.8rem;
    }
}
@media (max-width: 480px) {
    .action-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .action-button {
        min-height: 90px;
        padding: 0.5rem;
    }
    .action-icon {
        width: 35px;
        height: 35px;
        margin-bottom: 0.4rem;
    }
    .action-icon i {
        font-size: 1rem;
    }
    .action-label {
        font-size: 0.75rem;
    }
}
.menu-item {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid #333;
    border-radius: 12px;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}
.menu-item:hover {
    border-color: #5865f2;
    background: rgba(30, 30, 30, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(88, 101, 242, 0.2);
}
.menu-item.active {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.1);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
}
.menu-icon {
    width: 60px;
    height: 60px;
    background: rgba(88, 101, 242, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    flex-shrink: 0;
}
.menu-icon i {
    font-size: 1.5rem;
    color: #5865f2;
}
.menu-content {
    flex: 1;
}
.menu-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
}
.menu-content p {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}
.menu-arrow {
    color: #666;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}
.menu-item:hover .menu-arrow {
    color: #5865f2;
    transform: translateX(5px);
}
/* Workflow Editor Section */
.workflow-editor-section {
    display: none;
    flex-direction: column;
    flex: 1;
    background: #0a0a0a;
}
.workflow-editor-section.active {
    display: flex;
}
.workflow-editor-section:not(.active) {
    display: none !important;
}
/* Admin Panel Section */
.admin-panel-section {
    display: none;
    flex-direction: column;
    flex: 1;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
    min-height: 100vh;
}
.admin-panel-section.active {
    display: flex;
}
.admin-panel-section:not(.active) {
    display: none !important;
}
.admin-panel-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.admin-panel-header {
    text-align: center;
    margin-bottom: 3rem;
}
.admin-panel-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(88, 101, 242, 0.5);
}
.admin-panel-header h2 i {
    color: #5865f2;
    margin-right: 1rem;
}
.admin-panel-header p {
    font-size: 1.1rem;
    color: #ccc;
    max-width: 600px;
    margin: 0 auto;
}
.admin-panel-content {
    width: 100%;
}
/* Admin Cards Grid */
.admin-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}
.admin-card {
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid #333;
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.admin-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #5865f2, #7289da);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.admin-card:hover {
    transform: translateY(-5px);
    border-color: #5865f2;
    box-shadow: 0 10px 30px rgba(88, 101, 242, 0.2);
}
.admin-card:hover::before {
    opacity: 1;
}
.admin-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}
.admin-card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #5865f2, #7289da);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}
.admin-card-icon i {
    font-size: 1.5rem;
    color: white;
}
.admin-card-title h3 {
    font-size: 1.3rem;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}
.admin-card-title p {
    color: #ccc;
    margin: 0;
    font-size: 0.9rem;
}
.admin-card-content {
    color: #ccc;
}
.admin-card-description {
    margin: 1rem 0 0 0;
    line-height: 1.5;
    font-size: 0.9rem;
}
.admin-card-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}
.stat-item {
    text-align: center;
}
.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #5865f2;
    margin-bottom: 0.25rem;
}
.stat-label {
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.admin-card-button {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #5865f2, #7289da);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.admin-card-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(88, 101, 242, 0.4);
}
.admin-card-button i {
    font-size: 0.9rem;
}
/* User Management Modal */
.user-management-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.user-management-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
}
.user-management-header {
    padding: 2rem;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(30, 30, 30, 0.5);
}
.user-management-header h2 {
    color: #ffffff;
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
}
.user-management-header h2 i {
    color: #5865f2;
    margin-right: 0.75rem;
}
.close-modal {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #444;
    border-radius: 8px;
    color: #ccc;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.close-modal:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: #666;
}
.user-management-body {
    padding: 2rem;
    overflow-y: auto;
    max-height: calc(90vh - 120px);
}
/* User Stats Overview */
.user-stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-card {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}
.stat-card:hover {
    border-color: #5865f2;
    transform: translateY(-2px);
}
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #5865f2, #7289da);
    flex-shrink: 0;
}
.stat-icon.premium {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
}
.stat-icon.servers {
    background: linear-gradient(135deg, #00d4aa, #01b89f);
}
.stat-icon i {
    font-size: 1.2rem;
    color: white;
}
.stat-info {
    display: flex;
    flex-direction: column;
}
.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}
.stat-title {
    font-size: 0.85rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* User Table */
.user-table-container {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
}
.user-table-header {
    padding: 1.5rem;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(20, 20, 20, 0.5);
}
.user-table-header h3 {
    color: #ffffff;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}
.user-search {
    position: relative;
    width: 300px;
}
.user-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.user-search input:focus {
    outline: none;
    border-color: #5865f2;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}
.user-search input::placeholder {
    color: #999;
}
.user-search i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 0.9rem;
}
.user-table-wrapper {
    overflow-x: auto;
}
.user-table {
    width: 100%;
    border-collapse: collapse;
}
.user-table th,
.user-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #333;
}
.user-table th {
    background: rgba(20, 20, 20, 0.5);
    color: #ccc;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.user-table td {
    color: #fff;
    font-size: 0.9rem;
}
.user-table tr:hover {
    background: rgba(88, 101, 242, 0.1);
}
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.user-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.user-status.normal {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid #6c757d;
}
.user-status.premium {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border: 1px solid #ffd700;
}
.user-actions {
    display: flex;
    gap: 0.5rem;
}
.action-btn {
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-btn.view {
    background: rgba(88, 101, 242, 0.2);
    color: #5865f2;
    border: 1px solid #5865f2;
}
.action-btn.edit {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid #ffc107;
}
.action-btn.delete {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid #dc3545;
}
.action-btn:hover {
    transform: scale(1.1);
    opacity: 0.8;
}
.loading-users {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #ccc;
}
.loading-users .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #333;
    border-top: 3px solid #5865f2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading-users p {
    margin: 0;
    font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 900px) {
    .admin-cards-grid {
        grid-template-columns: 1fr;
    }
    .admin-card-stats {
        gap: 1rem;
    }
    .user-stats-overview {
        grid-template-columns: 1fr;
    }
    .user-table-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    .user-search {
        width: 100%;
    }
    .user-management-modal {
        padding: 1rem;
    }
    .user-management-header {
        padding: 1.5rem;
    }
    .user-management-body {
        padding: 1.5rem;
    }
}
/* Welcome Messages Section */
.welcome-messages-section {
    display: none;
    flex-direction: column;
    flex: 1;
    background: transparent; /* Transparent, damit Background-Effekte sichtbar sind */
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
.welcome-messages-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(88, 101, 242, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(88, 101, 242, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(88, 101, 242, 0.05) 0%, transparent 50%);
    pointer-events: none;
}
.welcome-messages-section.active {
    display: flex;
    z-index: 10;
}
.welcome-messages-section:not(.active) {
    display: none !important;
}
/* Kick Settings Section */
.kick-settings-section {
    display: none;
    flex-direction: column;
    flex: 1;
    background: transparent; /* Transparent, damit Background-Effekte sichtbar sind */
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 10;
}
.kick-settings-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(88, 101, 242, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(88, 101, 242, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(88, 101, 242, 0.05) 0%, transparent 50%);
    pointer-events: none;
}
.kick-settings-section.active {
    display: flex;
}
.kick-settings-section:not(.active) {
    display: none !important;
}
.welcome-card-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    gap: 1.5rem;
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}
/* Main Section: Toggle, Preview & Controls */
.welcome-main-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* Top Row: Toggle */
.welcome-toggle-section {
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 15, 35, 0.6);
    border: 1px solid #40444b;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    min-width: 400px;
    max-width: 600px;
    flex: 1;
}
.toggle-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}
.toggle-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    min-width: 0;
}
.save-section-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex-shrink: 0;
}
.reset-button-compact {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
    white-space: nowrap;
    margin-right: 0.5rem;
    margin-top: 5px;
}
.reset-button-compact:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}
.reset-button-compact:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}
.save-button-compact {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #5865f2, #4752c4);
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3);
    white-space: nowrap;
}
.save-button-compact:hover {
    background: linear-gradient(135deg, #4752c4, #3c45a5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
}
.save-button-compact:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3);
}
.save-button-compact:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.test-buttons-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-right: 0.75rem;
}
.test-button-compact {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #10b981, #059669);
    border: 1px solid #40444b;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    white-space: nowrap;
    margin-right: 0;
    margin-top: 0;
    position: relative;
    flex-shrink: 0;
    min-width: 120px;
    height: 40px;
    backdrop-filter: blur(10px);
}
.download-button-compact {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: 1px solid #40444b;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    white-space: nowrap;
    margin-top: 0;
    position: relative;
    flex-shrink: 0;
    min-width: 120px;
    height: 40px;
    backdrop-filter: blur(10px);
}
.test-button-compact:hover:not(:disabled) {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    border-color: #10b981;
}
.test-button-compact:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.test-button-compact:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
    background: linear-gradient(135deg, #6b7280, #4b5563);
}
.download-button-compact:hover:not(:disabled) {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}
.download-button-compact:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.download-button-compact:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    background: linear-gradient(135deg, #6b7280, #4b5563);
}
.test-button-compact .cooldown-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fbbf24;
    animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse {
    from { opacity: 0.7; }
    to { opacity: 1; }
}
.save-status-compact {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.25rem;
    text-align: center;
    min-height: 1rem;
}
.save-status-compact.success {
    color: #43b581;
}
.save-status-compact.error {
    color: #f04747;
}
.save-status-compact.loading {
    color: #5865f2;
}
.channel-select-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.channel-select-container label {
    font-size: 0.7rem;
    font-weight: 500;
    color: #b9bbbe;
    margin: 0;
}
.channel-select-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.channel-select {
    flex: 1;
    padding: 0.4rem 0.75rem;
    background: #2c2f33;
    border: 1px solid #40444b;
    border-radius: 4px;
    color: #dcddde;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.refresh-channels-btn {
    padding: 0.4rem 0.5rem;
    background: #5865f2;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}
.refresh-channels-btn:hover {
    background: #4752c4;
}
.refresh-channels-btn:active {
    background: #3c45a5;
}
.refresh-channels-btn:disabled {
    background: #4f545c;
    cursor: not-allowed;
}
.channel-select:focus {
    outline: none;
    border-color: #5865f2;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}
.channel-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.channel-select:not(:disabled):hover {
    border-color: #5865f2;
    background: #36393f;
}
/* Main Row: Three Column Layout */
.welcome-content-section {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    min-height: 800px;
    position: relative;
    margin: 0;
    border: none;
    box-sizing: border-box;
}
/* Blueprint Background Container */
.blueprint-background-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent; /* Transparent, damit Background-Effekte sichtbar sind */
    border-radius: 15px;
    overflow: hidden;
    z-index: -1;
}
.blueprint-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle, rgba(88, 101, 242, 0.1) 1px, transparent 1px),
        radial-gradient(circle, rgba(88, 101, 242, 0.05) 1px, transparent 1px);
    background-size: 50px 50px, 100px 100px;
    background-position: 0 0, 25px 25px;
    animation: blueprintFloat 20s ease-in-out infinite;
}
@keyframes blueprintFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-5px) translateX(2px);
    }
    50% {
        transform: translateY(-2px) translateX(-3px);
    }
    75% {
        transform: translateY(3px) translateX(1px);
    }
}
.settings-left {
    flex: 0 0 300px;
    background: rgba(15, 15, 15, 0.3);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 800px;
    align-self: stretch;
    position: relative;
    z-index: 1;
    margin: 0;
    box-sizing: border-box;
}
.settings-left .text-settings-section {
    flex: 1;
}
.settings-columns {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex: 1;
}
.settings-columns .text-settings-section {
    flex: 1;
    min-width: 0;
}
.settings-right {
    flex: 0 0 300px;
    background: rgba(15, 15, 15, 0.3);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 800px;
    align-self: stretch;
    position: relative;
    z-index: 1;
    margin: 0;
    box-sizing: border-box;
}
.settings-right .control-group {
    padding: 0.8rem;
    gap: 0.5rem;
}
.settings-right .control-group label {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}
.settings-right .control-group input[type="text"] {
    padding: 0.5rem;
    font-size: 0.85rem;
}
.settings-right .control-group select {
    padding: 0.5rem;
    font-size: 0.85rem;
}
.settings-right .color-palette {
    gap: 0.5rem;
}
.settings-right .color-option {
    width: 22px;
    height: 22px;
}
.font-style-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.style-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: #ffffff;
}
.style-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #5865f2;
    cursor: pointer;
}
.style-checkbox span {
    user-select: none;
}
.background-upload-area {
    position: relative;
    width: 100%;
    min-height: 80px;
    border: 2px dashed #40444b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(15, 15, 35, 0.3);
}
.background-upload-area:hover {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.1);
}
.background-upload-area.drag-over {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.2);
}
.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #b9bbbe;
    font-size: 0.8rem;
}
.upload-placeholder i {
    font-size: 1.5rem;
    color: #5865f2;
}
.background-preview {
    position: relative;
    width: 100%;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}
.background-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.remove-background-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}
.remove-background-btn:hover {
    background: rgba(220, 53, 69, 0.8);
    transform: scale(1.1);
}
.text-settings-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex: 1;
}
.text-settings-row .text-settings-section {
    flex: 1;
    min-width: 0;
}
.welcome-preview-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    min-height: 400px;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    position: relative;
    z-index: 1;
    margin: 0;
    box-sizing: border-box;
    min-width: 600px;
    max-width: calc(100% - 600px);
}
/* Discord Message Container */
.discord-message-container {
    width: 100%;
    max-width: 1600px;
    background: #0e0e0e;
    border-radius: 8px;
    padding: 1rem;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 500px;
    margin: 0;
    box-sizing: border-box;
}
.discord-message {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.discord-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #5865f2;
}
.discord-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.discord-content {
    flex: 1;
    min-width: 0;
    width: 100%;
}
.discord-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.discord-username {
    font-weight: 600;
    color: #ffffff;
    font-size: 0.9rem;
}
.discord-timestamp {
    color: #72767d;
    font-size: 0.75rem;
}
.discord-message-label {
    color: #72767d;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    font-style: italic;
}
.discord-message-text {
    color: #dcddde;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    margin-bottom: 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    transition: border-color 0.2s;
}
.discord-message-text:hover {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.1);
}
.discord-message-text:focus {
    outline: none;
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.1);
    cursor: text;
}
.discord-message-text[contenteditable="true"] {
    cursor: text;
    min-height: 1.2em;
}
.discord-message-text[contenteditable="true"]:empty:before {
    content: "Klicke hier zum Bearbeiten...";
    color: #72767d;
    font-style: italic;
}
/* Discord Message Input Container */
.discord-message-input-container {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0.5rem;
}
.discord-message-input-container .discord-message-text {
    flex: 1;
    margin-bottom: 0;
}
.discord-emoji-btn {
    background: #4a5568;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.discord-emoji-btn:hover {
    background: #2d3748;
}
.discord-emoji-btn:active {
    transform: scale(0.95);
}
/* Discord Attachment (Welcome Card) */
.discord-attachment {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    overflow: visible;
    min-height: 450px;
    box-sizing: border-box;
}
.discord-attachment .welcome-card {
    width: 800px;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    background: none;
    border: none;
    margin: 0;
    transform: scale(1.0);
    transform-origin: top left;
}
/* Preset Section Styles */
.preset-section {
    margin: 0;
    padding: 1.5rem;
    background: rgba(15, 15, 35, 0.6);
    border: 1px solid #40444b;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    width: 100%;
    box-sizing: border-box;
}
.preset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #40444b;
}
.preset-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.preset-header h4::before {
    content: "🎨";
    font-size: 1rem;
}
.active-preset-indicator {
    padding: 0.5rem 1rem;
    background: rgba(88, 101, 242, 0.2);
    border: 1px solid #5865f2;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
}
.active-preset-indicator.active {
    background: rgba(87, 242, 135, 0.2);
    border-color: #57f287;
    color: #57f287;
}
.preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    justify-items: center;
}
.preset-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 240px;
}
.preset-preview {
    width: 240px;
    height: 120px;
    border-radius: 8px;
    border: 2px solid #40444b;
    background: rgba(32, 34, 37, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preset-preview:hover {
    border-color: #5865f2;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}
.preset-preview.active {
    border-color: #57f287;
    box-shadow: 0 0 15px rgba(87, 242, 135, 0.4);
}
.preset-preview.has-content {
    border-color: #5865f2;
}
.preset-preview.has-content:hover {
    border-color: #4752c4;
}
.preset-preview.loading {
    border-color: #5865f2;
    animation: preset-loading-pulse 1.5s ease-in-out infinite;
}
.preset-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(32, 34, 37, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    animation: fade-in 0.3s ease-in-out forwards;
}
.preset-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #40444b;
    border-top: 3px solid #5865f2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 8px;
}
.preset-loading-text {
    color: #b9bbbe;
    font-size: 0.8rem;
    font-weight: 500;
}
@keyframes preset-loading-pulse {
    0%, 100% {
        border-color: #5865f2;
        box-shadow: 0 0 10px rgba(88, 101, 242, 0.3);
    }
    50% {
        border-color: #4752c4;
        box-shadow: 0 0 20px rgba(88, 101, 242, 0.6);
    }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.preset-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #b9bbbe;
    font-size: 0.9rem;
    font-weight: 500;
}
.preset-placeholder i {
    font-size: 2rem;
    opacity: 0.6;
}
.preset-preview-card {
    width: 800px;
    height: 400px;
    border-radius: 6px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    transform-origin: center;
}
.preset-controls {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.preset-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.preset-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.preset-btn:disabled:hover {
    transform: none;
}
.save-btn {
    background: rgba(87, 242, 135, 0.2);
    color: #57f287;
    border: 1px solid #57f287;
}
.save-btn:hover:not(:disabled) {
    background: rgba(87, 242, 135, 0.3);
    transform: translateY(-1px);
}
.activate-btn {
    background: rgba(88, 101, 242, 0.2);
    color: #5865f2;
    border: 1px solid #5865f2;
}
.activate-btn:hover:not(:disabled) {
    background: rgba(88, 101, 242, 0.3);
    transform: translateY(-1px);
}
.activate-btn.active {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
    border: 1px solid #22c55e !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}
.activate-btn.active:hover {
    background: rgba(34, 197, 94, 0.3) !important;
    transform: translateY(-1px);
}
.delete-btn {
    background: rgba(237, 66, 69, 0.2);
    color: #ed4245;
    border: 1px solid #ed4245;
}
.delete-btn:hover:not(:disabled) {
    background: rgba(237, 66, 69, 0.3);
    transform: translateY(-1px);
}
/* Settings Headers */
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #40444b;
}
.settings-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}
/* Customization Header */
.customization-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #40444b;
}
.customization-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}
.customization-controls {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: flex-start;
}
.controls-left,
.controls-right {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
    background: rgba(15, 15, 35, 0.4);
    border: 1px solid #40444b;
    border-radius: 6px;
    backdrop-filter: blur(10px);
}
.text-settings-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(15, 15, 35, 0.6);
    border: 1px solid #40444b;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}
.text-settings-section h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.4rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #40444b;
}
.save-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(15, 15, 35, 0.8);
    border: 1px solid #40444b;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}
.save-button {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #5865f2, #4752c4);
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}
.save-button:hover {
    background: linear-gradient(135deg, #4752c4, #3c45a5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.4);
}
.save-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(88, 101, 242, 0.3);
}
.save-button:disabled {
    background: #40444b;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.save-status {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.save-status.success {
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid #2ecc71;
    color: #2ecc71;
    opacity: 1;
}
.save-status.error {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid #e74c3c;
    color: #e74c3c;
    opacity: 1;
}
.save-status.loading {
    background: rgba(52, 152, 219, 0.2);
    border: 1px solid #3498db;
    color: #3498db;
    opacity: 1;
}
.control-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.2rem;
}
/* Font Selector */
.font-selector {
    position: relative;
    display: flex;
    align-items: center;
}
.font-selector input {
    width: 100%;
    padding: 0.4rem;
    border: 1px solid #40444b;
    border-radius: 4px;
    background: rgba(30, 30, 30, 0.8);
    color: #ffffff;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}
.font-selector input:focus {
    outline: none;
    border-color: #5865f2;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
    background: rgba(30, 30, 30, 0.9);
}
.font-selector i {
    position: absolute;
    right: 0.75rem;
    color: #72767d;
    pointer-events: none;
}
/* Color Palette */
.color-palette {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}
.color-picker {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    background: none;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 2px #5865f2;
}
.color-picker:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px #5865f2;
}
.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
    border-radius: 50%;
}
.color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}
.color-option {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}
.color-option:hover {
    transform: scale(1.1);
    border-color: #ffffff;
}
.color-option.selected {
    border-color: #5865f2;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
}
/* Background Upload */
.background-upload {
    width: 100%;
    height: 60px;
    border: 2px dashed #5865f2;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5865f2;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(88, 101, 242, 0.1);
}
.background-upload:hover {
    border-color: #7289da;
    background: rgba(88, 101, 242, 0.2);
    color: #7289da;
    transform: translateY(-1px);
}
.background-upload.drag-over {
    border-color: #7289da;
    background: rgba(88, 101, 242, 0.3);
    color: #7289da;
    transform: scale(1.02);
}
/* Text Inputs */
.control-group input[type="text"] {
    padding: 0.4rem;
    border: 1px solid #40444b;
    border-radius: 4px;
    background: rgba(30, 30, 30, 0.8);
    color: #ffffff;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}
.control-group input[type="text"]:focus {
    outline: none;
    border-color: #5865f2;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
    background: rgba(30, 30, 30, 0.9);
}
/* Opacity Slider */
.opacity-slider {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.opacity-slider input[type="range"] {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
}
.opacity-slider input[type="range"]::-webkit-slider-thumb {
    background: #5865f2;
    border-radius: 50%;
    cursor: pointer;
}
.opacity-slider input[type="range"]::-webkit-slider-track {
    background: #333;
    border-radius: 2px;
}
.opacity-slider span {
    font-size: 0.75rem;
    color: #ccc;
    text-align: center;
}
/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    transition: 0.3s;
    border-radius: 24px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}
input:checked + .toggle-slider {
    background-color: #5865f2;
}
input:checked + .toggle-slider:before {
    transform: translateX(26px);
}
/* Channel Select */
.channel-select {
    padding: 0.4rem;
    border: 1px solid #333;
    border-radius: 4px;
    background: #1e1e1e;
    color: #ffffff;
    font-size: 0.8rem;
    min-width: 150px;
}
.channel-select:focus {
    outline: none;
    border-color: #5865f2;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}
/* Welcome Card Designer */
.welcome-card-designer {
    flex: 1;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #333;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}
.designer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #333;
    background: rgba(0, 0, 0, 0.5);
}
.designer-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.designer-actions {
    display: flex;
    gap: 1rem;
}
.btn-primary, .btn-secondary {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-primary {
    background: #5865f2;
    color: #fff;
}
.btn-primary:hover {
    background: #4752c4;
}
.btn-secondary {
    background: #333;
    color: #fff;
}
.btn-secondary:hover {
    background: #444;
}
.designer-content {
    display: flex;
    flex: 1;
    gap: 1.5rem;
    padding: 1rem;
}
/* Design Controls */
.design-controls {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}
.control-section {
    background: rgba(30, 30, 30, 0.3);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 1rem;
}
.control-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.control-group:last-child {
    margin-bottom: 0;
}
.control-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #ccc;
}
.control-group input,
.control-group select,
.control-group textarea {
    padding: 0.4rem;
    border: 1px solid #333;
    border-radius: 4px;
    background: #1e1e1e;
    color: #ffffff;
    font-size: 0.85rem;
}
.control-group input:focus,
.control-group select:focus,
.control-group textarea:focus {
    outline: none;
    border-color: #5865f2;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}
.control-group textarea {
    resize: vertical;
    min-height: 50px;
}

/**
 * Native <select>-Dropdowns (v. a. Windows/Chrome): ohne color-scheme ist die
 * aufklappende Liste oft weiß. `color-scheme: dark` verwendet dunkle Controls;
 * option-Styles greifen dort, wo Browser sie erlauben.
 */
body.page-scrollable select {
    color-scheme: dark;
}

body.page-scrollable select option,
body.page-scrollable select optgroup {
    background-color: #1e1f22;
    color: #f2f3f5;
}

.control-group input[type="range"] {
    background: transparent;
    border: none;
    padding: 0;
}
.control-group input[type="range"]::-webkit-slider-thumb {
    background: #5865f2;
    border-radius: 50%;
    cursor: pointer;
}
.control-group input[type="range"]::-webkit-slider-track {
    background: #333;
    border-radius: 2px;
}
/* Image Upload */
.image-upload {
    width: 100%;
    height: 60px;
    border: 2px dashed #72767d;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #72767d;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(114, 118, 125, 0.1);
}
.image-upload:hover {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.1);
    color: #5865f2;
}
.image-upload.drag-over {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.image-upload i {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}
/* Range Value Display */
.control-group span {
    font-size: 0.75rem;
    color: #888;
    text-align: center;
    margin-top: 0.2rem;
}
/* Live Preview */
.live-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.preview-header {
    padding: 0.75rem 0;
    border-bottom: 1px solid #333;
    margin-bottom: 0.75rem;
}
.preview-header h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.preview-container {
    flex: 1;
    background: #36393f;
    border-radius: 6px;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Welcome Card */
.welcome-card {
    width: 900px;
    height: 400px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateZ(0); /* Force hardware acceleration */
}
/* Override for Discord attachment version */
.discord-attachment .welcome-card {
    width: 900px;
    height: 400px;
    transform: scale(1.1);
    transform-origin: top left;
    margin-left: 20px;
    scale: 1;
}
/* Draggable Elements */
.draggable {
    position: absolute;
    cursor: move;
    user-select: none;
    transition: all 0.2s ease;
    z-index: 10;
    transform: translateZ(0); /* Force hardware acceleration */
}
.draggable:hover {
    outline: 2px solid #5865f2;
    outline-offset: 2px;
}
.draggable.dragging {
    z-index: 100;
    opacity: 0.8;
    transform: scale(1.05);
}
.draggable.resizing {
    z-index: 100;
    opacity: 0.8;
    cursor: se-resize;
}
/* Resize Handles */
.resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #5865f2;
    border: 2px solid #ffffff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 20;
}
.resize-handle.top-left {
    top: -6px;
    left: -6px;
    cursor: nw-resize;
}
.resize-handle.top-right {
    top: -6px;
    right: -6px;
    cursor: ne-resize;
}
.resize-handle.bottom-left {
    bottom: -6px;
    left: -6px;
    cursor: sw-resize;
}
.resize-handle.bottom-right {
    bottom: -6px;
    right: -6px;
    cursor: se-resize;
}
.draggable:hover .resize-handle {
    opacity: 1;
}
.resize-handle:hover {
    background: #7289da;
    transform: scale(1.3);
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.4);
}
/* Element-specific positioning with perfect alignment */
.user-avatar.draggable {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    cursor: move;
    will-change: transform, left, top;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.welcome-message.draggable {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.2rem;
    white-space: nowrap;
    cursor: move;
    will-change: transform, left, top;
    text-align: center;
    word-wrap: normal;
    overflow: visible;
}
.welcome-message.draggable .resize-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #5865f2;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}
.welcome-message.draggable .resize-handle.top-left {
    top: -4px;
    left: -4px;
    cursor: nw-resize;
}
.welcome-message.draggable .resize-handle.top-right {
    top: -4px;
    right: -4px;
    cursor: ne-resize;
}
.welcome-message.draggable .resize-handle.bottom-left {
    bottom: -4px;
    left: -4px;
    cursor: sw-resize;
}
.welcome-message.draggable .resize-handle.bottom-right {
    bottom: -4px;
    right: -4px;
    cursor: se-resize;
}
.welcome-message.draggable:hover .resize-handle {
    opacity: 1;
}
.username.draggable {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.4rem;
    white-space: nowrap;
    cursor: move;
    will-change: transform, left, top;
    text-align: center;
    word-wrap: normal;
    overflow: visible;
}
.username.draggable .resize-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #5865f2;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}
.username.draggable .resize-handle.top-left {
    top: -4px;
    left: -4px;
    cursor: nw-resize;
}
.username.draggable .resize-handle.top-right {
    top: -4px;
    right: -4px;
    cursor: ne-resize;
}
.username.draggable .resize-handle.bottom-left {
    bottom: -4px;
    left: -4px;
    cursor: sw-resize;
}
.username.draggable .resize-handle.bottom-right {
    bottom: -4px;
    right: -4px;
    cursor: se-resize;
}
.username.draggable:hover .resize-handle {
    opacity: 1;
}
.message.draggable {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    white-space: nowrap;
    cursor: move;
    will-change: transform, left, top;
    text-align: center;
}
.member-count.draggable {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.4rem;
    white-space: nowrap;
    cursor: move;
    will-change: transform, left, top;
    text-align: center;
    word-wrap: normal;
    overflow: visible;
}
.member-count.draggable .resize-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #5865f2;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}
.member-count.draggable .resize-handle.top-left {
    top: -4px;
    left: -4px;
    cursor: nw-resize;
}
.member-count.draggable .resize-handle.top-right {
    top: -4px;
    right: -4px;
    cursor: ne-resize;
}
.member-count.draggable .resize-handle.bottom-left {
    bottom: -4px;
    left: -4px;
    cursor: sw-resize;
}
.member-count.draggable .resize-handle.bottom-right {
    bottom: -4px;
    right: -4px;
    cursor: se-resize;
}
.member-count.draggable:hover .resize-handle {
    opacity: 1;
}
.card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Transparent, da die Layer das Rendering übernehmen */
    cursor: grab;
    user-select: none;
}
.card-background:hover {
    cursor: grab;
}
.card-background:active {
    cursor: grabbing;
}
/* Background Layer System */
.background-layer-base,
.background-layer-overlay {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Text Alignment Controls */
.section-header-with-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.section-header-with-controls h4 {
    margin: 0;
}
.text-alignment-controls {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 2px;
}
.alignment-btn {
    background: transparent;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    color: #b9bbbe;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alignment-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.alignment-btn.active {
    background: #5865f2;
    color: #ffffff;
}
.alignment-btn i {
    font-size: 0.75rem;
}
.background-layer-base {
    z-index: 1 !important; /* PNG/JPG layer - bottom */
}
.background-layer-overlay {
    z-index: 2 !important; /* GIF layer - top - will be overridden by JavaScript to 3 when active */
}
.card-content {
    position: relative;
    z-index: 3;
    height: 100%;
    width: 100%;
    padding: 0;
    text-align: center;
}
/* Legacy user-avatar styles removed to prevent conflicts with draggable version */
.user-avatar.draggable {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    /* Container sizing and background handled by JavaScript for solid borders */
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* Image sizing and positioning handled by JavaScript for seamless borders */
}
.welcome-text {
    position: relative;
    width: 100%;
    height: 100%;
}
.welcome-text .username {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 2.4rem;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    min-height: 30px;
    white-space: nowrap;
    word-wrap: normal;
    overflow: visible;
}
.welcome-text .message {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.8rem;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    min-height: 30px;
    white-space: nowrap;
    word-wrap: normal;
    line-height: 1.2;
    overflow: visible;
}
.welcome-text .member-count {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: #b9bbbe;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    min-height: 30px;
    white-space: nowrap;
    word-wrap: normal;
    overflow: visible;
}
/* Discord Message Styling */
.discord-message {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
}
.message-avatar {
    flex-shrink: 0;
}
.message-avatar .avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.message-content {
    flex: 1;
    min-width: 0;
}
.message-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.username {
    font-weight: 600;
    color: #ffffff;
    font-size: 0.9rem;
}
.timestamp {
    color: #72767d;
    font-size: 0.75rem;
}
/* Interactive Discord Embed Styling */
.embed {
    background: rgba(47, 49, 54, 0.6);
    border-left: 4px solid #5865f2;
    border-radius: 4px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    position: relative;
}
.interactive-embed {
    cursor: pointer;
}
.interactive-embed:hover {
    background: rgba(47, 49, 54, 0.8);
}
.embed-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* Editable Elements */
.editable {
    outline: none;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 2px 4px;
    transition: all 0.2s ease;
}
.editable:hover {
    border-color: rgba(88, 101, 242, 0.3);
    background: rgba(88, 101, 242, 0.1);
}
.editable:focus {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.15);
}
.editable:empty:before {
    content: attr(data-placeholder);
    color: #72767d;
    font-style: italic;
}
.embed-author {
    font-size: 0.875rem;
    color: #ffffff;
    font-weight: 500;
}
.embed-title {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}
.embed-title:hover {
    text-decoration: underline;
}
.embed-description {
    font-size: 0.875rem;
    color: #dcddde;
    line-height: 1.4;
    white-space: pre-wrap;
    min-height: 1.2em;
}
.embed-footer {
    font-size: 0.75rem;
    color: #72767d;
    margin-top: 0.5rem;
}
/* Image Placeholders */
.embed-thumbnail {
    align-self: flex-start;
    max-width: 80px;
    max-height: 80px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.embed-image {
    border-radius: 4px;
    overflow: hidden;
    max-width: 100%;
    position: relative;
}
.thumbnail-placeholder,
.image-placeholder {
    width: 100%;
    height: 80px;
    border: 2px dashed #72767d;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #72767d;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(114, 118, 125, 0.1);
}
.image-placeholder {
    height: 120px;
}
.thumbnail-placeholder:hover,
.image-placeholder:hover {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.1);
    color: #5865f2;
}
.thumbnail-placeholder.drag-over,
.image-placeholder.drag-over {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.thumbnail-placeholder i,
.image-placeholder i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.embed-thumbnail img,
.embed-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.embed-image img {
    max-height: 300px;
    height: auto;
}
/* Color Picker */
.embed-color-picker {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.interactive-embed:hover .embed-color-picker {
    opacity: 1;
}
.embed-color-picker input[type="color"] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: none;
}
.embed-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.embed-color-picker input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}
.embed-color-picker label {
    font-size: 0.7rem;
    color: #72767d;
    font-weight: 500;
}
/* Editor Header */
.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #333;
    backdrop-filter: blur(10px);
    z-index: 999;
}
.server-management-header .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    max-height: 70px;
    min-width: 0;
    overflow: hidden;
}
.server-management-header .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #ccc;
    height: 100%;
    max-height: 70px;
    overflow: hidden;
    line-height: 1;
}
.breadcrumb-separator {
    color: #666;
}
#serverName {
    color: #4f46e5;
    font-weight: 600;
}
.current-page {
    color: #ffffff;
    font-weight: 600;
}
.server-management-header .header-right {
    display: flex;
    gap: 1rem;
    height: 100%;
    max-height: 70px;
    overflow: hidden;
}
.server-management-header .save-btn,
.server-management-header .test-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    max-height: 40px;
    min-width: 120px;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    flex-shrink: 0;
}
.save-btn {
    background: #2563eb;
    color: #fff;
}
.save-btn:hover {
    background: #1d4ed8;
}
.test-btn {
    background: #059669;
    color: #fff;
}
.test-btn:hover {
    background: #047857;
}
/* Main Editor Area */
.editor-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}
/* Canvas Area */
.canvas-area {
    flex: 1;
    position: relative;
    background: #0a0a0a;
    overflow: hidden;
}
#workflow-canvas {
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle, #1a1a1a 1px, transparent 1px) 0 0 / 20px 20px,
        radial-gradient(circle, #1a1a1a 1px, transparent 1px) 10px 10px / 20px 20px;
    background-color: #0a0a0a;
    position: relative;
}
.canvas-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.placeholder-content {
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #333;
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    max-width: 400px;
}
.placeholder-content i {
    font-size: 3rem;
    color: #5865f2;
    margin-bottom: 1rem;
    display: block;
}
.placeholder-content h3 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.placeholder-content p {
    color: #ccc;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.canvas-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 1rem;
}
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.stat-label {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #5865f2;
}
/* Hide placeholder when nodes exist */
.canvas-placeholder.hidden {
    display: none;
}
/* Workflow Node Styles */
.workflow-node {
    position: absolute;
    background: #1e1e1e;
    border: 2px solid #333;
    border-left: 4px solid #5865f2;
    border-radius: 8px;
    padding: 12px;
    min-width: 180px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 20;
}
.workflow-node:hover {
    border-color: #4f46e5;
    box-shadow: 0 6px 12px rgba(79, 70, 229, 0.3);
    transform: translateY(-2px);
}
.workflow-node.selected {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
}
.node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.node-header i {
    color: #5865f2;
    width: 16px;
    text-align: center;
}
.node-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}
.node-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.node-ports {
    display: flex;
    gap: 8px;
}
.port {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}
.input-port {
    background: #10b981;
}
.output-port {
    background: #ef4444;
}
.port:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
/* Properties Panel Form Styles */
.properties-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #ccc;
}
.form-group input {
    padding: 0.5rem;
    border: 1px solid #333;
    border-radius: 4px;
    background: #1e1e1e;
    color: #ffffff;
    font-size: 0.9rem;
}
.form-group input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
/* React Flow Custom Styles */
.react-flow__node {
    background: #1e1e1e;
    border: 2px solid #333;
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    padding: 8px;
    min-width: 150px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}
.react-flow__node:hover {
    border-color: #4f46e5;
    box-shadow: 0 6px 12px rgba(79, 70, 229, 0.3);
}
.react-flow__node.selected {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
}
.react-flow__handle {
    background: #4f46e5;
    border: 2px solid #ffffff;
    width: 12px;
    height: 12px;
}
.react-flow__handle:hover {
    background: #6366f1;
}
.react-flow__edge {
    stroke: #4f46e5;
    stroke-width: 2;
}
.react-flow__edge:hover {
    stroke: #6366f1;
    stroke-width: 3;
}
.react-flow__edge.selected {
    stroke: #4f46e5;
    stroke-width: 3;
}
.react-flow__controls {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
}
.react-flow__controls button {
    background: #333;
    border: none;
    color: #fff;
    border-radius: 4px;
}
.react-flow__controls button:hover {
    background: #444;
}
.react-flow__minimap {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
}
.react-flow__background {
    background: 
        radial-gradient(circle, #1a1a1a 1px, transparent 1px) 0 0 / 20px 20px,
        radial-gradient(circle, #1a1a1a 1px, transparent 1px) 10px 10px / 20px 20px;
    background-color: #0a0a0a;
}
/* Properties Panel */
.properties-panel {
    width: 300px;
    background: rgba(0, 0, 0, 0.8);
    border-left: 1px solid #333;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}
.panel-header {
    padding: 1rem;
    border-bottom: 1px solid #333;
    background: rgba(0, 0, 0, 0.5);
}
.panel-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.panel-content {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}
.no-selection {
    color: #666;
    text-align: center;
    font-style: italic;
    margin-top: 2rem;
}
/* Node Properties Form */
.node-properties {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.property-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.property-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #ccc;
}
.property-group input,
.property-group textarea,
.property-group select {
    padding: 0.5rem;
    border: 1px solid #333;
    border-radius: 4px;
    background: #1e1e1e;
    color: #ffffff;
    font-size: 0.9rem;
}
.property-group input:focus,
.property-group textarea:focus,
.property-group select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
.property-group textarea {
    resize: vertical;
    min-height: 80px;
}
/* Context Menu */
.context-menu {
    position: fixed;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    min-width: 200px;
    z-index: 10000;
    display: none;
    backdrop-filter: blur(10px);
}
.context-menu-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #333;
    background: rgba(0, 0, 0, 0.3);
}
.context-menu-header h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.context-menu-content {
    padding: 0.5rem 0;
}
.context-menu-section {
    margin-bottom: 0.5rem;
}
.context-menu-section h5 {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.context-menu-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #ccc;
    transition: all 0.2s ease;
}
.context-menu-item:hover {
    background: #333;
    color: #ffffff;
}
.context-menu-item i {
    width: 16px;
    text-align: center;
}
/* Language Switcher - COPIED EXACTLY FROM HOME PAGE */
.language-switcher {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1006;
}
.lang-btn {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    outline: none;
}
.lang-btn:hover {
    background: rgba(88, 101, 242, 0.1);
    box-shadow: 0 0 15px var(--discord-glow);
    transform: scale(1.05);
}
.lang-btn:focus,
.lang-btn:focus-visible,
.lang-btn:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.flag-icon {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.language-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(15, 15, 15, 0.3);
    backdrop-filter: var(--kynx-blur);
    -webkit-backdrop-filter: var(--kynx-blur);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    min-width: 140px;
    max-height: 300px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px var(--discord-shadow);
    z-index: 9999;
}
.language-menu.show,
.language-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    color: var(--discord-text);
}
.lang-option:hover {
    background: rgba(88, 101, 242, 0.1);
    color: var(--discord-accent);
}
.lang-option span {
    font-size: 0.9rem;
    font-weight: 500;
}
/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1005;
}
.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--discord-text);
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}
/* Hamburger active state (turn into X) */
.hamburger.active span:nth-child(1) { 
    transform: translateY(6px) rotate(45deg) !important; 
}
.hamburger.active span:nth-child(2) { 
    opacity: 0 !important; 
}
.hamburger.active span:nth-child(3) { 
    transform: translateY(-6px) rotate(-45deg) !important; 
}
/* Responsive Design */
@media (max-width: 900px) {
	.hamburger {
		display: flex;
		margin-left: auto;
		z-index: 1005;
	}
	.navbar {
		padding: 1rem 0; /* Gleiche Höhe wie PC-View */
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		/* Keine explizite height - wird durch padding bestimmt wie in PC-View */
	}
	.nav-container {
		padding: 0 1rem;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		justify-content: space-between;
		align-items: center;
		gap: 0.75rem;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
		min-width: 0;
		position: relative;
		height: 100%;
	}
	.nav-logo {
		margin-left: 0;
		padding-left: 0;
		font-size: 1.5rem; /* Gleiche Größe wie PC-View */
	}
	.logo-img {
		width: 40px; /* Gleiche Größe wie PC-View */
		height: 40px;
	}
	.nav-menu {
		position: fixed;
		left: 0;
		top: var(--kynx-navbar-offset); /* Entspricht padding: 1rem 0 (16px + 40px Logo + 16px = ~72px) - gleiche Höhe wie PC-View */
		display: flex;
		flex-direction: column;
		background-color: rgba(0, 0, 0, 0.95);
		width: 100%;
		text-align: center;
		transition: 0.3s ease;
		box-shadow: 0 10px 27px rgba(0, 0, 0, 0.3);
		backdrop-filter: var(--kynx-blur);
		padding: 1rem 0.75rem 2rem;
		gap: 0.5rem;
		height: calc(100vh - var(--kynx-navbar-offset)); /* Entspricht der Header-Höhe mit padding: 1rem 0 */
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 1004;
		border-top: 1px solid #40444b;
		transform: translateX(-100%);
	}
	.nav-menu.active {
		transform: translateX(0) !important;
	}
	.nav-menu li { 
		width: 100%; 
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		pointer-events: auto !important;
		position: relative;
		z-index: 1005;
	}
	.nav-menu li * {
		pointer-events: auto !important;
	}
	.nav-menu a,
	.nav-menu .login-btn {
		display: block;
		width: 100%;
		padding: 0.9rem 1rem;
		border-radius: 10px;
		text-decoration: none;
		color: #dcddde;
		transition: all 0.3s ease;
		border: none;
		background: none;
		font-size: 1rem;
		font-weight: 500;
		text-align: center;
	}
	.nav-menu .login-btn {
		margin: 0 auto;
		max-width: 200px;
	}
	/* Mobile Auth Container - Server und Profile nebeneinander */
	.nav-menu .mobile-auth-container {
		width: 100%;
		margin: 0.5rem 0;
		padding: 0;
	}
	.nav-menu .mobile-auth-buttons {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 0.75rem;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.nav-menu .mobile-auth-buttons .server-section,
	.nav-menu .mobile-auth-buttons .profile-section {
		display: flex !important;
		width: auto;
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
		position: relative;
		align-items: center;
	}
	.nav-menu .profile-avatar {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
	/* Mobile Dropdowns zentrieren - vollständig zentriert im Menü */
	.nav-menu .mobile-auth-buttons .server-dropdown,
	.nav-menu .mobile-auth-buttons .profile-menu {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) translateY(-10px) !important;
		margin-top: 0 !important;
		z-index: 1020 !important;
		pointer-events: auto;
		max-width: 90vw;
		width: 280px;
		background: rgba(15, 15, 15, 0.98) !important;
		backdrop-filter: blur(50px) saturate(180%) !important;
		-webkit-backdrop-filter: blur(50px) saturate(180%) !important;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
	}
	.nav-menu .mobile-auth-buttons .profile-menu {
		background: rgba(15, 15, 15, 1.0) !important;
		backdrop-filter: blur(60px) saturate(200%) !important;
		-webkit-backdrop-filter: blur(60px) saturate(200%) !important;
		box-shadow: 0 8px 40px rgba(0, 0, 0, 0.95) !important;
	}
	.nav-menu .mobile-auth-buttons .server-dropdown .dropdown-close-btn,
	.nav-menu .mobile-auth-buttons .profile-menu .dropdown-close-btn {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.2);
		color: rgba(255, 255, 255, 0.9);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1021;
		transition: all 0.2s ease;
		font-size: 14px;
	}
	.nav-menu .mobile-auth-buttons .server-dropdown .dropdown-close-btn:hover,
	.nav-menu .mobile-auth-buttons .profile-menu .dropdown-close-btn:hover {
		background: rgba(255, 255, 255, 0.2);
		border-color: rgba(255, 255, 255, 0.3);
		color: #ffffff;
		transform: scale(1.1);
	}
	.nav-menu .mobile-auth-buttons .server-dropdown {
		max-height: 90vh !important;
		max-height: 90dvh !important;
		overflow-x: hidden !important;
		overflow-y: hidden !important;
	}
	.nav-menu .mobile-auth-buttons .server-dropdown .server-dropdown-list {
		overflow-x: hidden !important;
		max-height: calc(100vh - 12rem) !important;
		max-height: calc(100dvh - 12rem) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: thin !important;
		color-scheme: dark !important;
		scrollbar-color: #45454e #121214 !important;
	}
	.nav-menu .mobile-auth-buttons .server-dropdown .server-dropdown-list::-webkit-scrollbar {
		width: 8px !important;
	}
	.nav-menu .mobile-auth-buttons .server-dropdown .server-dropdown-list::-webkit-scrollbar-corner {
		background: #121214 !important;
	}
	.nav-menu .mobile-auth-buttons .server-dropdown .server-dropdown-list::-webkit-scrollbar-track {
		background: #121214 !important;
		border-radius: 8px !important;
	}
	.nav-menu .mobile-auth-buttons .server-dropdown .server-dropdown-list::-webkit-scrollbar-thumb {
		background: linear-gradient(180deg, #4a4a54 0%, #3a3a42 100%) !important;
		border-radius: 8px !important;
		border: 2px solid #121214 !important;
		min-height: 40px !important;
	}
	.nav-menu .mobile-auth-buttons .server-dropdown .server-dropdown-list::-webkit-scrollbar-thumb:hover {
		background: linear-gradient(180deg, #5c5c66 0%, #484850 100%) !important;
	}
	.nav-menu .mobile-auth-buttons .server-dropdown.active,
	.nav-menu .mobile-auth-buttons .profile-menu.active {
		transform: translate(-50%, -50%) translateY(0) !important;
		pointer-events: auto;
		opacity: 1 !important;
		visibility: visible !important;
		display: block !important;
	}
	
	/* Base hidden state for mobile dropdowns */
	.nav-menu .mobile-auth-buttons .server-dropdown:not(.active),
	.nav-menu .mobile-auth-buttons .profile-menu:not(.active) {
		opacity: 0 !important;
		visibility: hidden !important;
	}
	.nav-menu .mobile-auth-buttons .server-dropdown-btn {
		margin: 0;
		padding: 0.75rem 1rem;
		font-size: 0.9rem;
		white-space: nowrap;
		pointer-events: auto !important;
		position: relative;
		z-index: 1005 !important;
		cursor: pointer;
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 8px;
		color: #dcddde;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.nav-menu .mobile-auth-buttons .profile-avatar {
		display: flex !important;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
		margin: 0;
		padding: 0;
		pointer-events: auto !important;
		position: relative;
		z-index: 1009;
		cursor: pointer;
		flex-shrink: 0;
	}
	.nav-menu .mobile-auth-buttons .profile-avatar img {
		pointer-events: none;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	.nav-menu .mobile-auth-buttons .profile-avatar .avatar-img {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		min-height: 40px !important;
		border-radius: 50%;
		object-fit: cover;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		border: 2px solid var(--discord-accent);
		background-color: var(--discord-dark);
	}
	
	/* Ensure profile avatar image is visible in hamburger menu */
	.nav-menu.active .mobile-auth-buttons .profile-avatar,
	.nav-menu.active .mobile-auth-buttons .profile-avatar img,
	.nav-menu.active .mobile-auth-buttons .profile-avatar .avatar-img {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	.nav-menu a:hover,
	.nav-menu .login-btn:hover {
		background: rgba(114, 137, 218, 0.1);
		color: var(--discord-accent);
		transform: translateX(5px);
	}
	.language-switcher {
		position: absolute;
		right: 60px;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
		margin-left: 0;
		margin-right: 0;
	}
	.lang-btn {
		width: 32px;
		height: 32px;
		padding: 4px;
	}
	.flag-icon {
		width: 20px !important;
		height: 15px !important;
	}
	.language-menu {
		position: absolute;
		top: 100%;
		right: 0;
		width: 200px;
		background: rgba(15, 15, 15, 0.3);
		backdrop-filter: var(--kynx-blur);
		-webkit-backdrop-filter: var(--kynx-blur);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		box-shadow: 0 8px 25px var(--discord-shadow);
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: all 0.3s ease;
	}
	.language-menu.show,
	.language-menu.active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	/* Profile dropdown visible in header on mobile */
	.profile-section {
		position: relative;
		margin: 0 auto;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.profile-menu {
		position: absolute;
		top: 100%;
		right: 0;
		width: 280px;
		background: rgba(0, 0, 0, 0.95);
		backdrop-filter: var(--kynx-blur);
		-webkit-backdrop-filter: var(--kynx-blur);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		box-shadow: 0 8px 25px var(--discord-shadow);
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: all 0.3s ease;
	}
	.profile-menu.show {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.nav-menu.active { 
		transform: translateX(0) !important;
	}
}

/* Sehr schmale Phones: Header darf umbrechen; Tablet ~721–900 bleibt eine Zeile (siehe .nav-container oben) */
@media (max-width: 720px) {
	.nav-container {
		flex-wrap: wrap;
	}
}

/* Extra small devices (phones, 480px and down) */
@media (max-width: 480px) {
	/* Header-Größe bleibt unverändert - keine Verkleinerung */
	/* .navbar {
		height: 60px;
		padding: 0.5rem 0;
	} */
	.nav-container {
		padding: 0 1rem !important; /* Gleiche Dicke wie PC/Tablet-View */
	}
	/* .nav-logo {
		font-size: 1.1rem;
	} */
	/* Logo-Größe bleibt unverändert für Konsistenz (wie auf anderen Seiten) */
	.nav-menu {
		top: var(--kynx-navbar-offset);
		height: calc(100vh - var(--kynx-navbar-offset));
		padding: 0.75rem 0.5rem 1.5rem;
	}
	.language-switcher {
		right: 60px;
	}
	.lang-btn {
		width: 28px;
		height: 28px;
		padding: 3px;
	}
	.flag-icon {
		width: 18px !important;
		height: 13px !important;
	}
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #444;
}
/* Node Type Specific Styles */
.node-event {
    border-left: 4px solid #ef4444;
}
.node-action {
    border-left: 4px solid #10b981;
}
.node-logic {
    border-left: 4px solid #f59e0b;
}
.node-utility {
    border-left: 4px solid #8b5cf6;
}
/* Animation for new nodes */
@keyframes nodeAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.react-flow__node {
    animation: nodeAppear 0.3s ease-out;
}
/* Notification Styles */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
}
.notification {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    color: #fff;
    min-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.notification.success {
    border-color: #10b981;
    background: #064e3b;
}
.notification.error {
    border-color: #ef4444;
    background: #450a0a;
}
.notification.info {
    border-color: #3b82f6;
    background: #1e3a8a;
}
/* Background Controls Styles */
.zoom-slider {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 5px;
}
.zoom-slider input[type="range"] {
    width: 100%;
    height: 4px;
    background: #40444b;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}
.zoom-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #5865f2;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.zoom-slider input[type="range"]::-webkit-slider-track {
    background: #40444b;
    border-radius: 2px;
}
.zoom-slider span {
    font-size: 0.8rem;
    color: #b9bbbe;
    text-align: center;
}
/* Emoji Button Styles */
.text-input-with-emoji {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    width: 100%;
}
.text-input-with-emoji input,
.text-input-with-emoji textarea {
    flex: 1;
    resize: both;
    min-height: 32px;
    max-height: 120px;
    min-width: 150px;
    font-family: inherit;
    line-height: 1.4;
    padding: 6px 8px;
    border: 1px solid #4a5568;
    border-radius: 4px;
    background: #2d3748;
    color: white;
    font-size: 14px;
}
.text-input-with-emoji input:focus,
.text-input-with-emoji textarea:focus {
    outline: none;
    border-color: #5865f2;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}
.text-input-with-emoji textarea {
    resize: both;
}
.emoji-btn {
    background: #4a5568;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.emoji-btn:hover {
    background: #5865f2;
    transform: scale(1.05);
}
.emoji-btn:active {
    transform: scale(0.95);
}
/* Spezifische Anpassung für die rechten Container */
.settings-right .text-input-with-emoji {
    max-width: 100%;
}
.settings-right .text-input-with-emoji input,
.settings-right .text-input-with-emoji textarea {
    max-width: calc(100% - 40px);
}
/* Emoji Picker Modal Styles */
.emoji-picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.emoji-picker-content {
    background: #2d3748;
    border-radius: 12px;
    padding: 15px;
    max-width: 400px;
    width: 90%;
    max-height: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.emoji-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #4a5568;
}
.emoji-picker-header h3 {
    margin: 0;
    color: white;
    font-size: 18px;
}
.close-btn {
    background: none;
    border: none;
    color: #a0aec0;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s;
}
.close-btn:hover {
    background: #4a5568;
    color: white;
}
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-bottom: 0;
    max-height: 350px;
    overflow-y: auto;
}
.emoji-tabs {
    display: flex;
    border-bottom: 1px solid #4a5568;
    margin-bottom: 15px;
    gap: 2px;
}
.emoji-tab {
    flex: 1;
    background: #4a5568;
    border: none;
    color: #a0aec0;
    padding: 8px 4px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-tab:hover {
    background: #5865f2;
    color: white;
}
.emoji-tab.active {
    background: #5865f2;
    color: white;
}
.emoji-category {
    display: none;
    margin-bottom: 0;
}
.emoji-category.active {
    display: block;
}
.emoji-category h4 {
    display: none;
}
.emoji-grid button {
    background: #4a5568;
    border: none;
    border-radius: 6px;
    padding: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-grid button:hover {
    background: #5865f2;
    transform: scale(1.1);
}
.emoji-grid button:active {
    transform: scale(0.95);
}
.emoji-picker-btn {
    background: #4a5568;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-picker-btn:hover {
    background: #5865f2;
}
/* Admin Panel Styles */
.admin-setting-group {
    background: rgba(44, 47, 51, 0.8);
    border: 1px solid #40444b;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}
.setting-header h3 {
    color: #dcddde;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.setting-header p {
    color: #72767d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.setting-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.setting-label {
    color: #dcddde;
    font-weight: 500;
    font-size: 1rem;
}
.setting-description p {
    color: #72767d;
    font-size: 0.9rem;
    line-height: 1.4;
}
/* Inspector Button */
.inspector-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #5865f2, #4752c4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
    transition: all 0.3s ease;
    z-index: 10000;
    border: 2px solid rgba(255, 255, 255, 0.1);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.inspector-button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(88, 101, 242, 0.6);
}
.inspector-button i {
    color: white;
    font-size: 1.5rem;
}
.inspector-button.active {
    background: linear-gradient(135deg, #ed4245, #c03537);
    box-shadow: 0 4px 20px rgba(237, 66, 69, 0.4);
}
.inspector-button.active:hover {
    box-shadow: 0 8px 30px rgba(237, 66, 69, 0.6);
}
/* Inspector Panel */
.inspector-panel {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    background: rgba(44, 47, 51, 0.95);
    border: 1px solid #40444b;
    border-radius: 12px;
    backdrop-filter: var(--kynx-blur);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 10001;
    max-height: 80vh;
    overflow-y: auto;
    user-select: none;
    pointer-events: auto;
}
.inspector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #40444b;
    background: rgba(88, 101, 242, 0.1);
    border-radius: 12px 12px 0 0;
}
.inspector-header h3 {
    color: #dcddde;
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.inspector-close {
    background: none;
    border: none;
    color: #72767d;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.inspector-close:hover {
    background: rgba(237, 66, 69, 0.1);
    color: #ed4245;
}
.inspector-content {
    padding: 1.5rem;
}
.inspector-info {
    margin-bottom: 1.5rem;
}
.info-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(64, 68, 75, 0.3);
}
.info-group:last-child {
    border-bottom: none;
}
.info-group label {
    color: #72767d;
    font-size: 0.9rem;
    font-weight: 500;
}
.info-group span {
    color: #dcddde;
    font-size: 0.9rem;
    font-weight: 400;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}
.inspector-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.copy-btn {
    background: linear-gradient(135deg, #5865f2, #4752c4);
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.4);
}
.copy-btn:active {
    transform: translateY(0);
}
/* Inspector Mode Styles */
.inspector-mode .inspector-highlight {
    outline: 2px solid #5865f2 !important;
    outline-offset: 2px !important;
    background: rgba(88, 101, 242, 0.1) !important;
    position: relative;
}
.inspector-mode .inspector-highlight::before {
    content: attr(data-element-info);
    position: absolute;
    top: -30px;
    left: 0;
    background: #5865f2;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10002;
    pointer-events: none;
}
/* Draggable Inspector Button */
.inspector-button.draggable {
    cursor: grab;
    user-select: none;
}
.inspector-button.dragging {
    cursor: grabbing;
    opacity: 0.8;
}
/* Responsive Design */
@media (max-width: 900px) {
    .inspector-panel {
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
    }
    .inspector-button {
        right: 15px;
        bottom: 15px;
        width: 50px;
        height: 50px;
    }
    .inspector-button i {
        font-size: 1.2rem;
    }
}
/* Dashboard Styles - Ultra Compact */
.dashboard-content {
    padding: 1.35rem 1.25rem;
    margin-top: calc(var(--kynx-navbar-offset) + 70px);
    min-height: calc(100vh - var(--kynx-navbar-offset) - 70px);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.dashboard-container {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow-x: hidden;
}

.page-selection {
    text-align: center;
    margin-bottom: 1.35rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow-x: hidden;
}

.settings-section {
    margin-bottom: 1rem;
    background: rgba(18, 18, 24, 0.55);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-medium);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: relative;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.settings-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--accent-glow) 50%, 
        transparent 100%
    );
    opacity: 0.5;
}

.settings-section:hover {
    border-color: rgba(88, 101, 242, 0.28);
    box-shadow: var(--shadow-md);
    background: rgba(22, 22, 30, 0.62);
}

.settings-section:last-child {
    margin-bottom: 0;
}

/*
 * Kategorien-Reihe: jede Kategorie nur so breit wie ihre Kacheln; unterschiedliche Breiten ok.
 * min-width: 0 erlaubt Schrumpfen der Kacheln-Zeile innerhalb der Zeile.
 */
.settings-section-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.6rem, 1.4vw, 1rem);
    margin-bottom: 1rem;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.settings-section-row--top {
    margin-bottom: clamp(0.85rem, 1.6vw, 1.25rem);
    justify-content: center;
    align-items: flex-start;
}

.settings-section-row--top .settings-section {
    flex: 0 1 auto;
}

.settings-section-row--top #modPanelContainer.settings-section {
    margin-left: 0;
}

.settings-section-row .settings-section {
    flex: 0 1 auto;
    margin-bottom: 0;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

.settings-section-row .page-grid {
    max-width: 100%;
    margin: 0.5rem auto 0;
}

.settings-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-align: center;
    margin-bottom: 0.625rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-medium);
}

/*
 * Server-Header: konsistentes Layout in allen Größen.
 * Variablen steuern Logo/Button-Größe, Padding und Abstände einheitlich (clamp).
 */
.server-header {
    --sh-icon: clamp(44px, 7.5vw, 64px);
    --sh-radius-icon: clamp(12px, 1.4vw, 16px);
    --sh-pad-y: clamp(0.55rem, 1.1vw, 0.85rem);
    --sh-pad-x: clamp(0.7rem, 1.6vw, 1.1rem);
    --sh-gap: clamp(0.6rem, 1.4vw, 1rem);
    --sh-text-gap: clamp(0.5rem, 1.2vw, 0.85rem);

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--sh-gap);
    margin: 0 auto clamp(1rem, 2vw, 1.5rem);
    padding: var(--sh-pad-y) var(--sh-pad-x);
    background: rgba(15, 15, 15, 0.3);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: clamp(12px, 1.4vw, 16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    box-shadow: var(--shadow-md);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.server-header:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-lg);
    background: rgba(15, 15, 15, 0.4);
}

/* Linke Gruppe: Logo + Server-Texte. Schrumpft nicht künstlich – Header passt sich an Inhalt an. */
.server-header-left {
    display: flex;
    align-items: center;
    gap: var(--sh-text-gap);
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: nowrap;
}
/* Rechts: Premium + Zahnrad – feste Größe, schrumpft nicht. Kein margin-left:auto mehr → keine Riesen-Lücke. */
.server-header-right {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1vw, 0.65rem);
    flex: 0 0 auto;
    min-width: 0;
}

/* Premium-Slot: schrumpft, ohne den Zahnrad-Button zu verdrängen */
.server-header .server-header-premium-slot,
.server-header .header-premium-slot {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: clamp(7rem, 24vw, 18rem);
}
.server-header .header-premium-slot:empty {
    display: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
}
.server-header .header-premium-slot:not(:empty) {
    min-width: 0;
    flex: 0 1 auto;
}

/* Premium-Karte: gleiche Höhe wie Logo & Zahnrad-Button im Header */
.server-header .premium-mini-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: var(--sh-icon);
    min-height: var(--sh-icon);
    padding: 4px clamp(8px, 1.2vw, 12px);
    gap: 2px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
}
.server-header .premium-mini-card:has(.premium-mini-actions) {
    min-height: 0;
    height: auto;
}
.server-header .premium-mini-card:has(.premium-mini-foreign-hint) {
    min-height: 0;
    height: auto;
}
.server-header .premium-mini-foreign-hint {
    text-align: center;
    line-height: 1.2;
    margin-top: 2px;
    max-width: 11rem;
}
.server-header .premium-mini-foreign-hint strong {
    font-weight: 700;
    color: var(--text-primary, #f0f0f5);
}
.server-header .premium-mini-id {
    font-size: 0.62em;
    word-break: break-all;
}
.server-header .premium-mini-head {
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.server-header .premium-mini-status-row {
    justify-content: center;
    gap: 6px;
}
.server-header .premium-mini-status {
    font-size: 0.66rem;
}
.server-header .premium-mini-tag {
    font-size: 0.52rem;
    padding: 2px 6px;
}
.server-header .premium-mini-quota {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 4px;
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: none;
    padding-left: 0;
    margin-left: 0;
}
.server-header .premium-mini-quota-label {
    font-size: 0.55rem;
}
.server-header .premium-mini-quota-value {
    font-size: 0.8rem;
}
.server-header .premium-mini-actions {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.server-header .premium-mini-btn,
.server-header .premium-mini-btn--secondary {
    padding: 4px 10px;
    font-size: 0.62rem;
    white-space: nowrap;
}

.premium-mini-card {
    min-width: 118px;
    padding: 10px 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    background: rgba(15, 15, 15, 0.35);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.35));
}
.premium-mini-card--premium {
    border-color: rgba(88, 101, 242, 0.4);
    box-shadow: 0 4px 24px rgba(88, 101, 242, 0.12);
}
.premium-mini-card--free {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.premium-mini-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.premium-mini-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.premium-mini-status {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.premium-mini-status--premium {
    color: #949cf7;
    text-shadow: 0 0 14px rgba(88, 101, 242, 0.25);
}
.premium-mini-status--free {
    color: var(--discord-text-muted, #72767d);
    text-shadow: none;
}
.premium-mini-tag {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(88, 101, 242, 0.08));
    border: 1px solid rgba(88, 101, 242, 0.45);
    color: #c7c9ff;
}
.premium-mini-quota-hint {
    font-size: 0.58rem;
    color: #a1a1aa;
    text-align: center;
    line-height: 1.25;
    max-width: 160px;
}
.premium-mini-quota {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-top: 6px;
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.premium-mini-quota-label {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--discord-text-muted, #72767d);
}
.premium-mini-quota-value {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--discord-text, #dcddde);
    letter-spacing: 0.02em;
}
.premium-mini-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.premium-mini-btn {
    font-size: 0.65rem;
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--discord-accent, #5865f2), var(--discord-accent-hover, #4752c4));
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}
.premium-mini-btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--discord-text, #dcddde);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Server Settings Button */
.server-settings-btn {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.15) 0%, rgba(88, 101, 242, 0.05) 100%);
    border: 2px solid var(--border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.server-settings-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.server-settings-btn i {
    font-size: 1.8rem;
    color: var(--accent-primary);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.server-settings-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    box-shadow: 0 8px 24px rgba(88, 101, 242, 0.3), 0 0 0 1px rgba(88, 101, 242, 0.2);
}

.server-settings-btn:hover::before {
    opacity: 0.1;
}

.server-settings-btn:hover i {
    color: var(--accent-bright);
    animation: rotate 2s linear infinite;
}

.server-settings-btn:active {
    transform: translateY(0) scale(0.95);
}

/* Dashboard-Header: Logo, Settings-Button und Premium-Karte teilen sich die gleiche Größe */
.server-header .server-settings-btn {
    width: var(--sh-icon);
    height: var(--sh-icon);
    min-width: var(--sh-icon);
    min-height: var(--sh-icon);
    border-radius: var(--sh-radius-icon);
    box-sizing: border-box;
    flex-shrink: 0;
}
.server-header .server-settings-btn i {
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
}

.server-header .server-icon {
    width: var(--sh-icon);
    height: var(--sh-icon);
    flex: 0 0 auto;
}
.server-header .server-icon img {
    width: var(--sh-icon);
    height: var(--sh-icon);
    max-width: var(--sh-icon);
    max-height: var(--sh-icon);
    border-radius: var(--sh-radius-icon);
    border-width: 1.5px;
}
/* Hover-Scale im Dashboard-Header deaktivieren – sonst überschreitet das Icon die Headerhöhe */
.server-header .server-icon img:hover {
    transform: none;
}

.server-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.server-icon img {
    width: 80px;
    height: 80px;
    max-width: 80px;
    max-height: 80px;
    object-fit: cover;
    border-radius: 20px;
    border: 2px solid var(--border-strong);
    box-shadow: 
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.server-icon img:hover {
    transform: scale(1.05);
    border-color: var(--accent-primary);
    box-shadow: 
        var(--shadow-lg),
        0 0 0 4px var(--accent-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.server-info {
    text-align: left;
    flex: 1 1 220px;
    min-width: min(100%, 14rem);
    max-width: 100%;
}
/* Dashboard-Serverzeile: Texte einzeilig mit Ellipsis, einheitliche Schriftgrößen über clamp.
   flex 0 1 auto + max-width verhindert, dass die Info-Spalte den Header künstlich auseinanderzieht. */
.server-header .server-info {
    flex: 0 1 auto;
    min-width: 0;
    max-width: clamp(8rem, 32vw, 22rem);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.05rem, 0.4vw, 0.2rem);
}
.server-header .server-info h1 {
    font-size: clamp(0.95rem, 2.4vw, 1.35rem);
    line-height: 1.2;
    margin: 0;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.server-header .server-info p {
    font-size: clamp(0.7rem, 1.6vw, 0.85rem);
    line-height: 1.25;
    margin: 0;
    color: var(--text-secondary);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.server-info h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    word-break: normal;
    overflow-wrap: break-word;
}
.server-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    letter-spacing: -0.01em;
    word-break: normal;
    overflow-wrap: break-word;
}
/* Discord Message Container Styles - Removed */
/* Welcome Page Discord Message Styles */
.welcome-card-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}
.welcome-card-container h1 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--discord-text);
    font-size: 2rem;
}
.welcome-card-container p {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--discord-text-muted);
    font-size: 1.1rem;
}
.discord-message-container {
    margin-top: 2rem;
}
.discord-message {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--discord-card);
    border-radius: 8px;
    border: 1px solid var(--discord-border);
    box-shadow: 0 2px 10px var(--discord-shadow);
}
.discord-avatar {
    flex-shrink: 0;
}
.bot-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--discord-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.discord-content {
    flex: 1;
    min-width: 0;
}
.discord-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.discord-author {
    font-weight: 600;
    color: var(--discord-text);
    font-size: 1rem;
}
.bot-badge {
    background: var(--discord-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
}
.discord-timestamp {
    color: var(--discord-text-muted);
    font-size: 0.8rem;
}
.discord-text {
    margin-bottom: 1rem;
}
.discord-text p {
    color: var(--discord-text);
    margin: 0;
    line-height: 1.4;
}
.discord-attachments {
    margin-top: 1rem;
}
.welcome-preview-container {
    margin-top: 1rem;
}
.welcome-preview {
    width: 800px;
    height: 400px;
    background: var(--discord-card-hover);
    border: 2px dashed var(--discord-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.preview-placeholder {
    text-align: center;
    color: var(--discord-text-muted);
}
.preview-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}
.preview-placeholder p {
    font-size: 1.1rem;
    margin: 0;
}
.discord-content {
    flex: 1;
    min-width: 0;
}
.discord-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--discord-border);
}
.discord-author {
    font-weight: 700;
    color: var(--discord-text);
    font-size: 1.5rem;
    text-align: center;
    text-shadow: 0 0 20px var(--discord-glow);
}
.discord-timestamp {
    color: var(--discord-text-muted);
    font-size: 0.8rem;
}
.discord-text {
    margin-bottom: 1rem;
}
.discord-text p {
    color: var(--discord-text);
    margin: 0;
    line-height: 1.4;
}
.discord-attachments {
    margin-top: 1rem;
}
/*
 * Kacheln: eine Zeile, immer gleiche Button-Größe. Passt die Zeile nicht in die Kategorie,
 * nach rechts scrollen (statt Kacheln zu verkleinern).
 */
.page-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--dash-tile-gap);
    width: 100%;
    max-width: 100%;
    margin: 0.5rem auto 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.page-card {
    background: rgba(20, 20, 28, 0.72);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    padding: 0.45rem;
    cursor: pointer;
    /* KEINE Transitions/Animationen außer für Icons */
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
    animation: none !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 var(--dash-tile-size);
    width: var(--dash-tile-size);
    height: var(--dash-tile-size);
    min-width: var(--dash-tile-size);
    max-width: var(--dash-tile-size);
    min-height: var(--dash-tile-size);
    max-height: var(--dash-tile-size);
    box-sizing: border-box;
}

/* Pseudo-Elemente KOMPLETT entfernt - werden durch echte DOM-Elemente ersetzt */
.page-card::before,
.page-card::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

/* Ripple-Effekt beim Klick - überschreibt die allgemeine Regel */
.page-card.clicking::after {
    content: '' !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.page-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    border-color: rgba(88, 101, 242, 0.35);
    background: rgba(28, 28, 38, 0.85);
}

/* Pseudo-Elemente bleiben KOMPLETT entfernt - werden durch echte DOM-Elemente ersetzt */
body:not(.page-loading) .page-card:hover::before,
body:not(.page-loading) .page-card:hover::after,
.page-card:not(:hover)::before,
.page-card:not(:hover)::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    pointer-events: none !important;
}

.page-card:hover .page-icon {
    /* KEINE Hover-Animationen */
}

.page-card:hover .card-glow {
    opacity: 0.8;
    /* KEINE Transform-Animationen */
}

#modPanelContainer .page-card--subtle:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    border-color: rgba(88, 101, 242, 0.22);
    background: rgba(28, 28, 38, 0.78);
}

#modPanelContainer .page-card--subtle .card-glow,
#modPanelContainer .page-card--subtle:hover .card-glow {
    opacity: 0;
}

#modPanelContainer .page-card--subtle .card-hover-before,
#modPanelContainer .page-card--subtle .card-hover-after,
#modPanelContainer .page-card--subtle:hover .card-hover-before,
#modPanelContainer .page-card--subtle:hover .card-hover-after {
    display: none !important;
    opacity: 0 !important;
}

.page-card:active {
    /* KEINE Active-Animationen */
}

/* Moderne Klick-Animation - Button bleibt sichtbar */
.page-card.clicking {
    transform: scale(0.95) !important;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 25px rgba(88, 101, 242, 0.5) !important;
    border-color: rgba(88, 101, 242, 0.7) !important;
    background: rgba(88, 101, 242, 0.15) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ripple-Effekt beim Klick */
.page-card.clicking::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.4) 0%, transparent 70%) !important;
    transform: translate(-50%, -50%) !important;
    animation: clickRipple 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

@keyframes clickRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        width: 150px;
        height: 150px;
        opacity: 0;
    }
}
/* Loading-Animation für Weiterleitung - Glatter */
.page-card.loading {
    pointer-events: none;
    opacity: 0 !important;
    visibility: hidden !important;
    /* KEINE Transitions/Animationen */
    transition: none !important;
    animation: none !important;
    background: rgba(88, 101, 242, 0.3);
    border-color: rgba(88, 101, 242, 0.6);
    backdrop-filter: blur(25px);
}

/* Buttons ohne loading-Klasse sollen sichtbar sein */
.page-card:not(.loading) {
    visibility: visible !important;
    overflow: hidden !important;
}
.page-card:not(.loading):not(.disabled) {
    opacity: 1 !important;
}

/* Sicherstellen, dass Pseudo-Elemente auch während des Ladens versteckt bleiben */
.page-card.loading::before,
.page-card.loading::after {
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}
.page-card .page-icon i {
    animation: iconSpin 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.page-card.loading .page-icon i {
    animation: iconSpin 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* Nutzer kann Dreh-Animation aller Karten-Icons abschalten (Einstellung in DB) */
body.dashboard-icon-spin-disabled .page-card .page-icon i,
body.dashboard-icon-spin-disabled .page-card.loading .page-icon i {
    animation: none !important;
}

/* PERFORMANCE: Disable icon animations on mobile (small and very small views) */
@media (max-width: 768px) {
    .page-card .page-icon i,
    .page-card.loading .page-icon i {
        animation: none !important;
    }
    
    /* Disable server settings button icon rotation on mobile */
    .server-settings-btn i,
    .server-settings-btn:hover i {
        animation: none !important;
    }
    
    /* Also disable other spinning animations on mobile */
    .fa-spin,
    .loading-spinner,
    .spinner {
        animation: none !important;
    }
    
    @keyframes spin-dropdown {
        to { transform: rotate(0deg) !important; }
    }
    
    @keyframes rotate {
        from { transform: rotate(0deg) !important; }
        to { transform: rotate(0deg) !important; }
    }
}
@keyframes iconSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.page-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 0.2rem;
    /* KEINE Transitions - nur Icon-Animationen bleiben */
    transition: none !important;
    position: relative;
    z-index: 2;
}

.page-icon i {
    font-size: 1.35rem;
    color: var(--accent-primary);
}

.card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    /* KEINE Transitions */
    transition: none !important;
    z-index: 1;
    pointer-events: none;
    filter: blur(20px);
}

/* Card-glow nur anzeigen wenn Button nicht loading ist */
.page-card:not(.loading):not(.disabled) .card-glow {
    display: block !important;
    opacity: 0 !important;
    visibility: visible !important;
}

/* Spezifische Icon-Styles - Professionell & Elegant */
.welcome-icon i {
    color: #ff6b6b;
}

.farewell-icon i {
    color: #4ecdc4;
}

.timeout-icon i {
    color: #feca57;
}

.kick-icon i {
    color: #ff9ff3;
}

.ban-icon i {
    color: #ff6b6b;
}

.modpanel-icon i {
    color: #5865f2;
}

.voice-ai-icon i {
    color: #5865f2;
}

.embeds-icon i {
    color: #5865f2;
}

.giveaways-icon i {
    color: #f59e0b;
}

.tickets-icon i {
    color: #48c774;
}

.channels-icon i {
    color: #57F287;
}

.roles-mgmt-icon i {
    color: #5865f2;
}

/* Mod-Panel Modal Specific Styles */
.mod-panel-select {
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color-scheme: dark;
}

@media (hover: hover) {
    .mod-panel-select:hover {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(0, 0, 0, 0.4);
    }
}

.mod-panel-select:focus {
    outline: none;
    border-color: #5865f2;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.1);
}

.mod-panel-select option {
    background: #2c2f33;
    color: white;
    padding: 0.5rem;
}

.page-info h3 {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.page-info p {
    display: none;
}
/* Animation beim Laden */
/* KEINE cardSlideIn Animation mehr */
/* Cards während des Ladens komplett verstecken */
body.page-loading .page-card {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
    transition: none !important;
}

/* KEINE Animation mehr - Buttons erscheinen sofort */
body:not(.page-loading) .page-card {
    animation: none !important;
    opacity: 1;
    visibility: visible;
}

/* Sicherstellen, dass Pseudo-Elemente während der Animation und des Ladens versteckt bleiben */
.page-card::before,
.page-card::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

/* Nur beim Hover sichtbar machen - nur wenn Seite geladen ist */
body:not(.page-loading) .page-card:hover::before,
body:not(.page-loading) .page-card:hover::after {
    content: '' !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}
/* KEINE Animation-Delays mehr */
/* Responsive Dashboard */
@media (max-width: 900px) {
    .server-management-header {
        top: var(--kynx-navbar-offset);
        padding: 0 1rem;
        height: 70px;
        min-height: 70px;
        max-height: 70px;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    .server-management-header .header-left {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        width: auto;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .server-management-header .header-right {
        width: auto;
        justify-content: flex-end;
        flex-shrink: 0;
    }

    .server-management-header .breadcrumb {
        font-size: 0.875rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100vw - 120px);
    }

    .server-management-header .breadcrumb span:not(.breadcrumb-separator) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 150px;
    }

    .dashboard-content {
        padding: 0.65rem 0.75rem;
        margin-top: calc(var(--kynx-navbar-offset) + 70px);
        min-height: calc(100vh - var(--kynx-navbar-offset) - 70px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .dashboard-container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    
    .page-selection {
        padding: 0.5rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .page-selection h1 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    /* Kacheln: feste Größe wie Desktop, Zeile scrollbar wenn nötig */
    .page-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--dash-tile-gap);
        width: 100%;
        max-width: 100%;
        margin: 0.4rem auto 0;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }
    .page-grid.page-grid--embeds-updates {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--dash-tile-gap);
        max-width: 100%;
        margin-inline: auto;
    }
    .settings-section-row .page-grid {
        max-width: 100%;
        margin-top: 0.35rem;
    }
    .settings-section-row .page-grid.page-grid--embeds-updates {
        max-width: 100%;
    }
    .page-card {
        padding: 0.4rem;
        flex: 0 0 var(--dash-tile-size);
        width: var(--dash-tile-size);
        height: var(--dash-tile-size);
        min-width: var(--dash-tile-size);
        max-width: var(--dash-tile-size);
        min-height: var(--dash-tile-size);
        max-height: var(--dash-tile-size);
        box-sizing: border-box;
        margin: 0;
        border-radius: 10px;
    }
    /* Server-Header: Layout/Größen via clamp-Variablen geregelt → keine Tablet/Mobil-Overrides nötig.
       Premium-Slot bekommt nur eine engere Obergrenze, damit der Zahnrad-Button nicht abgeschnitten wird. */
    .server-header .server-header-premium-slot:not(:empty),
    .server-header .header-premium-slot:not(:empty) {
        max-width: clamp(6rem, 38vw, 12rem);
        flex-shrink: 1;
        min-width: 0;
    }
    .server-header .premium-mini-status {
        font-size: clamp(0.55rem, 1.5vw, 0.66rem);
    }
    .server-header .premium-mini-tag {
        font-size: clamp(0.45rem, 1.2vw, 0.52rem);
        padding: 1px 5px;
    }
    .server-header .premium-mini-quota-label {
        font-size: clamp(0.48rem, 1.3vw, 0.55rem);
    }
    .server-header .premium-mini-quota-value {
        font-size: clamp(0.66rem, 1.6vw, 0.8rem);
    }
    .server-header .premium-mini-btn,
    .server-header .premium-mini-btn--secondary {
        padding: 3px 8px;
        font-size: clamp(0.52rem, 1.4vw, 0.62rem);
    }
    .page-icon {
        width: min(46%, 44px);
        height: min(46%, 44px);
        margin: 0 auto 0.15rem;
    }
    .page-icon i {
        font-size: clamp(1.05rem, 5vw, 1.45rem);
    }
    .page-info h3 {
        font-size: clamp(0.6rem, 2.85vw, 0.72rem);
        line-height: 1.2;
        word-break: break-word;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .settings-section {
        padding: clamp(0.55rem, 2vw, 0.7rem) clamp(0.6rem, 2.5vw, 0.75rem);
        margin-bottom: clamp(0.65rem, 2.5vw, 0.85rem);
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 11px;
    }
    .settings-section-title {
        font-size: clamp(0.72rem, 2.4vw, 0.78rem);
        margin-bottom: 0.45rem;
        padding-bottom: 0.32rem;
        word-break: break-word;
        line-height: 1.25;
    }
    .settings-section-row {
        margin-bottom: clamp(0.75rem, 2.5vw, 1rem);
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Welcome Content Section - Mobile Layout */
    .welcome-content-section {
        flex-direction: column;
        gap: 1rem;
        min-height: auto;
        padding: 0.5rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .settings-left,
    .settings-right {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        min-width: 0;
    }
    
    .settings-columns {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 1rem;
    }
    
    .settings-columns .text-settings-section {
        width: 100%;
        max-width: 100%;
    }
}

/* Schmale Phones: nur kompakteres Padding/Schrift – Kachelgrößen bleiben fest, Container wrappen. */
@media (max-width: 640px) {
    .page-selection {
        padding: 0.4rem 0.35rem;
    }

    .page-selection h1 {
        font-size: 1rem;
        margin-bottom: 0.55rem;
    }

    .settings-section {
        padding: 0.55rem 0.6rem;
    }

    .settings-section-title {
        font-size: 0.7rem;
        margin-bottom: 0.4rem;
    }
}

/* Welcome Page Discord Message Styles */
.welcome-card-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(15, 15, 15, 0.3);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.welcome-card-container h1 {
    text-align: center;
    margin-bottom: 1rem;
    color: #dcddde;
    font-size: 2rem;
}
.welcome-card-container p {
    text-align: center;
    margin-bottom: 2rem;
    color: #72767d;
    font-size: 1.1rem;
}
.welcome-messages-section {
    margin-top: 2rem;
}
.discord-message-container {
    margin-top: 2rem;
    display: block;
}
.discord-message {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #2c2f33;
    border-radius: 8px;
    border: 1px solid #40444b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 1000px;
}
.discord-avatar {
    flex-shrink: 0;
    display: block;
}
.bot-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #5865f2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.discord-content {
    flex: 1;
    min-width: 0;
    display: block;
}
.discord-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.discord-author {
    font-weight: 600;
    color: #dcddde;
    font-size: 1rem;
}
.bot-badge {
    background: #5865f2;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
}
.discord-timestamp {
    color: #72767d;
    font-size: 0.8rem;
}
.discord-text {
    margin-bottom: 1rem;
    display: block;
}
.discord-text p {
    color: #dcddde;
    margin: 0;
    line-height: 1.4;
}
.discord-attachments {
    margin-top: 1rem;
    display: block;
}
.welcome-preview-container {
    margin-top: 1rem;
    display: block;
}
.welcome-preview {
    width: 800px;
    height: 400px;
    background: #36393f;
    border: 2px dashed #40444b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}
.preview-placeholder {
    text-align: center;
    color: #72767d;
    display: block;
}
.preview-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    display: block;
}
.preview-placeholder p {
    font-size: 1.1rem;
    margin: 0;
    display: block;
}

/* Server Settings Modal */
.settings-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.settings-modal-content {
    background: var(--surface-primary);
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-medium);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Server-Einstellungen: breiter, zweispaltig */
.settings-modal-content--server-wide {
    max-width: min(1120px, 96vw);
    max-height: 88vh;
    width: 94%;
}

/* Mod-Panel: großes Modal, kompakter Inhalt, zweispaltig im Bild-Modus */
.settings-modal-content--mod-panel {
    max-width: min(980px, 96vw);
    width: 94%;
    max-height: 90vh;
}

#modPanelModal.mod-panel-modal--image-mode .settings-modal-content--mod-panel {
    max-width: min(1080px, 96vw);
    width: 95%;
}

#modPanelModal .settings-modal-header {
    padding: 0.75rem 1.15rem;
    flex-shrink: 0;
}

#modPanelModal .settings-modal-header h2 {
    font-size: 1.15rem;
    gap: 0.5rem;
}

#modPanelModal .settings-btn-permissions {
    padding: 6px 12px;
    font-size: 0.82rem;
    gap: 6px;
}

#modPanelModal .settings-modal-body.mod-panel-modal-body {
    padding: 0.75rem 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

#modPanelModal.mod-panel-modal--image-mode .settings-modal-body.mod-panel-modal-body {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.5fr);
    gap: 0.65rem 1.1rem;
    align-items: start;
}

#modPanelModal:not(.mod-panel-modal--image-mode) .mod-panel-modal-col--design {
    display: none;
}

#modPanelModal .mod-panel-modal-col--main,
#modPanelModal .mod-panel-modal-col--design {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

#modPanelModal .setting-item {
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    margin-bottom: 0;
}

#modPanelModal .setting-header {
    margin-bottom: 0.25rem;
}

#modPanelModal .setting-title h3 {
    font-size: 0.88rem;
}

#modPanelModal .setting-description {
    font-size: 0.78rem;
    margin: 0 0 0.4rem;
    line-height: 1.35;
}

#modPanelModal .setting-item.mod-panel-channel-block,
#modPanelModal .setting-item.mod-panel-enable-row {
    border-radius: 10px;
}

#modPanelModal .mod-panel-channel-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

#modPanelModal .mod-panel-select--compact {
    flex: 1;
    padding: 8px 10px !important;
    font-size: 0.88rem !important;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-family: inherit;
    color-scheme: dark;
}

#modPanelModal .mod-panel-refresh-ch-btn {
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
    gap: 6px !important;
}

#modPanelModal .mod-panel-status-box,
#modPanelModal .mod-panel-cooldown-box {
    padding: 0.55rem 0.75rem !important;
}

#modPanelModal .mod-panel-status-inner,
#modPanelModal .mod-panel-cooldown-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

#modPanelModal .mod-panel-status-icon {
    color: #5865f2;
    font-size: 1rem;
    flex-shrink: 0;
}

#modPanelModal #modPanelStatus {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.82rem;
    line-height: 1.35;
}

#modPanelModal .mod-panel-cooldown-icon {
    color: #faa81a;
    font-size: 1rem;
    flex-shrink: 0;
}

#modPanelModal .mod-panel-cooldown-text {
    color: #faa81a;
    font-size: 0.82rem;
    font-weight: 500;
}

#modPanelModal .settings-modal-footer {
    padding: 0.65rem 1rem;
    flex-shrink: 0;
    border-top: 1px solid var(--border-medium);
}

@media (max-width: 720px) {
    #modPanelModal.mod-panel-modal--image-mode .settings-modal-body.mod-panel-modal-body {
        grid-template-columns: 1fr;
    }
    #modPanelModal:not(.mod-panel-modal--image-mode) .mod-panel-modal-col--design {
        display: none;
    }
}

.settings-modal-body--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 1.5rem 1.75rem;
}

.settings-modal-col--left,
.settings-modal-col--center,
.settings-modal-col--right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Server-Einstellungen: breiteres Modal + 3 Spalten auf großen Screens */
#serverSettingsModal .settings-modal-content.settings-modal-content--server-wide {
    max-width: min(1240px, 96vw);
    width: 94%;
    min-height: 0;
    background: linear-gradient(168deg, rgba(32, 34, 48, 0.98) 0%, rgba(16, 18, 26, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 28px 64px rgba(0, 0, 0, 0.52);
}

#serverSettingsModal .settings-modal-header,
#serverSettingsModal .settings-modal-footer {
    flex-shrink: 0;
}

#serverSettingsModal .server-settings-body-stack.settings-modal-body {
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#serverSettingsModal .server-settings-body-stack > .settings-modal-body--split {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Dreispalter-Basis + kompakteres Modal */
#serverSettingsModal .settings-modal-body--split.server-settings-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem 1.15rem;
    padding: 1rem 1.25rem 1.1rem;
}

#serverSettingsModal .settings-modal-header {
    padding: 0.65rem 1.1rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#serverSettingsModal .settings-modal-header h2 {
    font-size: 1.05rem;
}

#serverSettingsModal .settings-modal-footer {
    padding: 0.7rem 1.1rem;
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* /styles.css setzt .setting-item auf display:flex (Zeile) — hier zurück auf Karten-Stack */
#serverSettingsModal .setting-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    gap: 0;
}

#serverSettingsModal .setting-item:not(.whitelabel-card) {
    padding: 1rem 1.1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.045) 0%, transparent 48%),
        linear-gradient(180deg, var(--kynx-glass) 0%, rgba(10, 12, 20, 0.62) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 18px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

#serverSettingsModal .setting-item:not(.whitelabel-card):hover {
    border-color: rgba(114, 137, 218, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 6px 22px rgba(0, 0, 0, 0.26);
}

#serverSettingsModal .setting-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 0.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#serverSettingsModal .setting-title {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.55rem;
}

#serverSettingsModal .setting-header .toggle-switch {
    flex-shrink: 0;
}

#serverSettingsModal .setting-title i {
    font-size: 1.1rem;
}

#serverSettingsModal .setting-title h3 {
    font-size: 0.98rem;
}

#serverSettingsModal .setting-description {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

#serverSettingsModal .setting-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

#serverSettingsModal .server-settings-field-hint {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.01em;
}

#serverSettingsModal .server-settings-chip-surface {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#serverSettingsModal .auto-role-add-block {
    margin-top: 0.15rem;
    padding: 0.75rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#serverSettingsModal .server-publish-overview__body {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0.15rem;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.12) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    gap: 0.65rem;
}

#serverSettingsModal .server-publish-overview__actions {
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#serverSettingsModal .server-publish-overview__cta {
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.22);
}

#serverSettingsModal .setting-content > label:not(.setting-toggle-row):not(.server-visibility-tags-label) {
    margin-bottom: 0.35rem;
    font-size: 0.86rem;
}

#serverSettingsModal .server-visibility-tags-label {
    display: block;
    margin-top: 0.65rem;
    margin-bottom: 0.35rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.86rem;
}

#serverSettingsModal .server-visibility-description-block {
    margin-bottom: 0.35rem;
}

#serverSettingsModal .setting-toggle-stack {
    margin: 10px 0 12px;
    gap: 4px;
}

#serverSettingsModal .setting-toggle-row {
    padding: 8px 10px;
}

#serverSettingsModal .setting-toggle-row__text {
    font-size: 0.84rem;
}

#serverSettingsModal .bot-assistant-personality-block {
    margin-bottom: 8px;
}

#serverSettingsModal .server-setting-field-header {
    margin-bottom: 6px;
}

#serverSettingsModal .server-setting-metric-row {
    padding: 10px 12px;
    margin: 4px 0 10px;
}

#serverSettingsModal .settings-modal-col--left,
#serverSettingsModal .settings-modal-col--center,
#serverSettingsModal .settings-modal-col--right {
    gap: 0.85rem;
    min-width: 0;
}

#serverSettingsModal .settings-modal-col--center,
#serverSettingsModal .settings-modal-col--right {
    padding-top: 0.05rem;
}

#serverSettingsModal .whitelabel-card.setting-item {
    align-self: stretch;
    min-height: 100%;
}

#serverSettingsModal .whitelabel-gate-inner {
    padding: 0.85rem 0.95rem 0.9rem;
}

#serverSettingsModal .whitelabel-dash__routing {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.26);
}

#serverSettingsModal .server-setting-field-header .server-setting-field-header__label {
    margin-bottom: 0;
}

#serverSettingsModal #inviteLinkDisplay {
    margin-top: 10px;
    padding: 10px;
}

/* Auto-Rolle: eine Zeile [Dropdown · Nur-Icon-Refresh · Hinzufügen] */
#serverSettingsModal .auto-role-add-block > label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

#serverSettingsModal .auto-role-add-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#serverSettingsModal .auto-role-select-row {
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    gap: 8px;
    min-width: 0;
}

#serverSettingsModal .auto-role-role-select.role-select {
    flex: 1;
    min-width: 0;
    width: auto;
}

#serverSettingsModal .auto-role-refresh-icon-btn {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 2.85rem;
    min-width: 2.85rem;
    min-height: calc(2 * 0.75rem + 1.05em);
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: 0;
    border-radius: 10px;
    background: rgba(88, 101, 242, 0.2);
    border: 1px solid #5865f2;
    color: #5865f2;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#serverSettingsModal .auto-role-refresh-icon-btn:hover:not(:disabled) {
    background: rgba(88, 101, 242, 0.32);
    color: #e8eaf6;
}

#serverSettingsModal .auto-role-refresh-icon-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

#serverSettingsModal .auto-role-add-selected-btn {
    padding: 12px 18px;
    background: rgba(88, 101, 242, 0.35);
    border: 1px solid #5865f2;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

#serverSettingsModal .auto-role-add-toolbar .refresh-roles-btn {
    display: inline-flex;
}

@media (min-width: 1280px) {
    #serverSettingsModal .settings-modal-content.settings-modal-content--server-wide {
        max-width: min(1580px, 97vw);
        width: 96%;
    }

    #serverSettingsModal .settings-modal-body--split.server-settings-layout {
        grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.12fr) minmax(268px, 0.95fr);
        gap: 1rem 1.35rem;
        padding: 1.05rem 1.35rem 1.15rem;
    }

    #serverSettingsModal .settings-modal-col--left,
    #serverSettingsModal .settings-modal-col--center,
    #serverSettingsModal .settings-modal-col--right {
        grid-column: auto;
        grid-row: auto;
    }

    #serverSettingsModal .settings-modal-col--center,
    #serverSettingsModal .settings-modal-col--right {
        padding-left: 1.15rem;
        border-left: 1px solid rgba(255, 255, 255, 0.07);
    }
}

@media (min-width: 921px) and (max-width: 1279px) {
    #serverSettingsModal .settings-modal-body--split.server-settings-layout {
        grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr);
        grid-template-rows: auto auto;
        gap: 0.95rem 1.2rem;
        padding: 1rem 1.15rem;
    }

    #serverSettingsModal .settings-modal-col--left {
        grid-column: 1;
        grid-row: 1 / -1;
    }

    #serverSettingsModal .settings-modal-col--center {
        grid-column: 2;
        grid-row: 1;
        padding-left: 1rem;
        border-left: 1px solid rgba(255, 255, 255, 0.07);
    }

    #serverSettingsModal .settings-modal-col--right {
        grid-column: 2;
        grid-row: 2;
        padding-left: 1rem;
        border-left: none;
    }
}

/* KI-Reminder: breiteres Modal, Glas-Optik wie Server-Einstellungen */
#aiReminderModal .settings-modal-content.settings-modal-content--ai-reminder-wide {
    max-width: min(880px, 96vw);
    width: 94%;
    min-height: 0;
    max-height: min(94vh, 940px);
    background: linear-gradient(168deg, rgba(32, 34, 48, 0.98) 0%, rgba(16, 18, 26, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 28px 64px rgba(0, 0, 0, 0.52);
}

#aiReminderModal .settings-modal-header,
#aiReminderModal .settings-modal-footer,
#aiReminderModal .ai-reminder-modal-tabs-bar {
    flex-shrink: 0;
}

#aiReminderModal .ai-reminder-modal-header.settings-modal-header {
    padding: 0.65rem 1.1rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#aiReminderModal .ai-reminder-modal-header.settings-modal-header h2 {
    font-size: 1.05rem;
    gap: 0.5rem;
}

#aiReminderModal .settings-modal-body.ai-reminder-modal-body-scroll {
    padding: 1rem 1.25rem 1.1rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#aiReminderModal .ai-reminder-modal-tabs-bar {
    padding: 0.35rem 1.1rem 0.6rem;
    background: rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#aiReminderModal .ai-reminder-modal-footer.settings-modal-footer {
    padding: 0.7rem 1.1rem;
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#aiReminderModal .voice-ai-modal__toggle-row {
    flex-wrap: wrap;
    align-items: center;
}

#aiReminderModal .voice-ai-modal__toggle-text {
    flex: 1 1 12rem;
    min-width: 0;
}

#aiReminderModal .voice-ai-modal__toggle-row .toggle-switch {
    flex-shrink: 0;
}

@media (max-width: 720px) {
    #aiReminderModal .settings-modal-content.settings-modal-content--ai-reminder-wide {
        width: calc(100% - 1.25rem);
        max-width: none;
        max-height: min(96vh, 900px);
    }

    #aiReminderModal .settings-modal-body.ai-reminder-modal-body-scroll {
        padding: 0.85rem 0.9rem 0.95rem;
    }

    #aiReminderModal .ai-reminder-modal-tabs-bar {
        padding: 0.3rem 0.9rem 0.55rem;
    }

    #aiReminderModal .ai-reminder-modal-header.settings-modal-header {
        padding: 0.6rem 0.9rem;
    }

    #aiReminderModal .ai-reminder-modal-footer.settings-modal-footer {
        padding: 0.65rem 0.9rem;
    }
}

.setting-item--accent {
    border-color: rgba(88, 101, 242, 0.35);
    background: linear-gradient(145deg, rgba(88, 101, 242, 0.08), var(--surface-secondary));
}

/* Server-Einstellungen / Bot-Assistent: Unteroptionen als Zeilen mit Toggle rechts */
.setting-toggle-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 16px;
}

.setting-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.setting-toggle-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.setting-toggle-row__text {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.35;
}

.setting-toggle-row .toggle-switch.toggle-switch--inline {
    flex-shrink: 0;
}

.setting-content label.setting-toggle-row {
    display: flex;
    margin-bottom: 0;
}

/* Bot-Assistent: Persönlichkeit (auto-Höhe per JS), Zahlfeld, Bereichs-Slider */
.setting-content.bot-assistant-setting-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bot-assistant-personality-block {
    margin-bottom: 10px;
}

.server-setting-field-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.server-setting-field-header__label {
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.server-setting-field-header__meta {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.bot-assistant-personality-input,
.server-settings-expandable-textarea {
    width: 100%;
    min-height: 96px;
    max-height: 220px;
    padding: 12px 14px;
    margin: 0;
    box-sizing: border-box;
    resize: none;
    overflow-y: hidden;
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bot-assistant-personality-input::placeholder,
.server-settings-expandable-textarea::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.bot-assistant-personality-input:hover,
.server-settings-expandable-textarea:hover {
    border-color: rgba(88, 101, 242, 0.45);
}

.bot-assistant-personality-input:focus,
.server-settings-expandable-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.18);
}

.server-setting-metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    margin: 6px 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
}

.server-setting-metric-row__label-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.server-setting-metric-row__label {
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.server-setting-metric-row__hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.server-setting-number-input {
    width: 6.5rem;
    flex-shrink: 0;
    padding: 10px 12px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.server-setting-number-input:hover {
    border-color: rgba(88, 101, 242, 0.45);
}

.server-setting-number-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
}

/* Verhindere Spin-Buttons zu groß (Chrome) */
.server-setting-number-input::-webkit-outer-spin-button,
.server-setting-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.server-setting-number-input[type='number'] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.server-setting-slider-block {
    margin-top: 4px;
    padding: 14px 14px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.14);
}

.server-setting-slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.server-setting-slider-header__label {
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.server-setting-slider-value-pill {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-primary), #4752c4);
    box-shadow: 0 2px 10px rgba(88, 101, 242, 0.35);
}

.server-setting-slider-hint {
    margin: 0 0 12px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.server-setting-slider-track-wrap {
    padding: 6px 0 4px;
}

.server-setting-range-input {
    --range-pct: 75%;
    display: block;
    width: 100%;
    height: 24px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.server-setting-range-input:focus {
    outline: none;
}

.server-setting-range-input:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 6px;
    border-radius: 8px;
}

.server-setting-range-input::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--accent-primary) 0%,
        var(--accent-primary) var(--range-pct),
        rgba(255, 255, 255, 0.12) var(--range-pct),
        rgba(255, 255, 255, 0.12) 100%
    );
}

.server-setting-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -6px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.35),
        0 0 0 2px rgba(88, 101, 242, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.server-setting-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.07);
    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.4),
        0 0 0 3px rgba(88, 101, 242, 0.45);
}

.server-setting-range-input::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
}

.server-setting-range-input::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--accent-primary);
    border: none;
}

.server-setting-range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.35),
        0 0 0 2px rgba(88, 101, 242, 0.35);
    cursor: pointer;
}

.server-setting-slider-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding: 0 2px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.setting-content.bot-assistant-setting-content label.server-setting-field-header__label,
.setting-content.bot-assistant-setting-content label.server-setting-metric-row__label,
.setting-content.bot-assistant-setting-content label.server-setting-slider-header__label {
    margin-bottom: 0;
}

.bot-assistant-hint {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.bot-assistant-hint i {
    color: var(--accent-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

@media (max-width: 920px) {
    #serverSettingsModal .settings-modal-body--split.server-settings-layout {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        padding: 0.85rem 0.9rem;
        gap: 0.9rem;
    }

    #serverSettingsModal .settings-modal-col--left,
    #serverSettingsModal .settings-modal-col--center,
    #serverSettingsModal .settings-modal-col--right {
        grid-column: 1;
        grid-row: auto;
        padding-left: 0;
        border-left: none;
    }

    #serverSettingsModal .setting-item:not(.whitelabel-card) {
        padding: 0.95rem 1rem;
    }
}

/* Server-Einstellungen: Body-Stack um Split-Inhalt */
.server-settings-body-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

.settings-modal-col--right .whitelabel-card {
    margin-top: 0;
}

.whitelabel-card.setting-item {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(88, 101, 242, 0.32);
    border-radius: 18px;
    padding: 0;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(88, 101, 242, 0.18), transparent 55%),
        radial-gradient(90% 60% at 100% 100%, rgba(114, 137, 218, 0.1), transparent 50%),
        linear-gradient(165deg, rgba(22, 24, 32, 0.95), rgba(14, 15, 20, 0.98));
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.whitelabel-card.setting-item:hover {
    border-color: rgba(114, 137, 218, 0.42);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.whitelabel-card.whitelabel-card--connected:hover {
    border-color: rgba(87, 242, 135, 0.5);
}

.whitelabel-card.whitelabel-card--connected {
    border-color: rgba(67, 181, 129, 0.42);
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(67, 181, 129, 0.14), transparent 52%),
        radial-gradient(90% 55% at 100% 100%, rgba(88, 101, 242, 0.08), transparent 48%),
        linear-gradient(165deg, rgba(20, 32, 28, 0.95), rgba(14, 18, 17, 0.98));
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(67, 181, 129, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.whitelabel-gate {
    position: relative;
    border-radius: inherit;
}

.whitelabel-gate-inner {
    position: relative;
    z-index: 1;
    padding: 1rem 1.1rem 1.05rem;
}

.whitelabel-gate--locked .whitelabel-gate-inner {
    filter: grayscale(0.25) blur(0.5px);
    opacity: 0.42;
    pointer-events: none;
    user-select: none;
}

.whitelabel-dash {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.whitelabel-dash__header {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.whitelabel-dash__header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.65rem;
}

.whitelabel-dash__brand {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
}

.whitelabel-dash__icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(145deg, rgba(88, 101, 242, 0.35), rgba(88, 101, 242, 0.08));
    border: 1px solid rgba(114, 137, 218, 0.45);
    color: #c9cdff;
    font-size: 1.05rem;
    box-shadow: 0 2px 12px rgba(88, 101, 242, 0.2);
}

.whitelabel-dash__titles {
    min-width: 0;
}

.whitelabel-dash__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.2;
}

.whitelabel-dash__tagline.whitelabel-bot-tagline {
    margin: 0.28rem 0 0;
    font-size: 0.76rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.48);
    font-weight: 500;
    word-break: break-word;
}

.whitelabel-dash__header-actions.whitelabel-actions {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 0.12rem;
}

.whitelabel-dash__setup-btn--header {
    width: auto;
    max-width: min(220px, 46vw);
    padding: 0.38rem 0.72rem;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 10px;
    white-space: normal;
    text-align: center;
    hyphens: auto;
}

.whitelabel-dash__header-error.whitelabel-compact-error {
    margin: 0;
    max-width: 100%;
}

.whitelabel-dash__pills.whitelabel-status-indicators {
    margin-top: 0;
    justify-content: flex-start;
    width: 100%;
}

@media (max-width: 420px) {
    .whitelabel-dash__header-actions.whitelabel-actions {
        width: 100%;
        align-items: stretch;
    }

    .whitelabel-dash__setup-btn--header {
        max-width: none;
        width: 100%;
    }
}

.whitelabel-dash__routing {
    margin-top: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.whitelabel-dash__routing-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem 0.65rem;
    margin-bottom: 0.55rem;
}

.whitelabel-dash__profile-btn.whitelabel-mini-settings-btn {
    margin: 0;
    padding: 0.32rem 0.6rem;
    font-size: 0.74rem;
}

.whitelabel-dash__routing-hint.whitelabel-mini-hint {
    margin-top: 0.55rem;
    max-width: none;
}

.whitelabel-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    margin-top: 0;
    width: auto;
}

.whitelabel-status-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.whitelabel-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.75);
}

.whitelabel-status-pill[data-state='ok'] {
    border-color: rgba(67, 181, 129, 0.45);
    background: rgba(67, 181, 129, 0.12);
    color: #b5f0cf;
}

.whitelabel-status-pill[data-state='bad'] {
    border-color: rgba(237, 66, 69, 0.45);
    background: rgba(237, 66, 69, 0.1);
    color: #f6a5a7;
}

.whitelabel-status-pill[data-state='warn'] {
    border-color: rgba(250, 166, 26, 0.45);
    background: rgba(250, 166, 26, 0.1);
    color: #f0c15c;
}

.whitelabel-status-pill[data-state='neutral'] {
    opacity: 0.85;
}

.whitelabel-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.whitelabel-status-pill[data-state='ok'] .whitelabel-status-dot {
    background: #43b581;
    box-shadow: 0 0 8px rgba(67, 181, 129, 0.65);
}

.whitelabel-status-pill[data-state='bad'] .whitelabel-status-dot {
    background: #ed4245;
    box-shadow: 0 0 8px rgba(237, 66, 69, 0.45);
}

.whitelabel-status-pill[data-state='warn'] .whitelabel-status-dot {
    background: #faa61a;
    box-shadow: 0 0 8px rgba(250, 166, 26, 0.45);
}

.whitelabel-bot-tagline {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.whitelabel-dash__routing .whitelabel-bot-primary-caption {
    display: inline-block;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.whitelabel-bot-primary-caption {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 8px;
}

.whitelabel-bot-primary-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.whitelabel-bot-primary-side {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    min-width: 5rem;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

.whitelabel-bot-primary-side--active {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.toggle-switch.toggle-switch--whitelabel-primary {
    flex-shrink: 0;
}

.whitelabel-compact-error {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #f6a5a7;
    max-width: 56ch;
}

.whitelabel-intents-setup-warn {
    margin: 0 0 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    border: 1px solid rgba(237, 66, 69, 0.85);
    background: rgba(237, 66, 69, 0.12);
    color: rgba(255, 230, 230, 0.95);
    font-size: 0.78rem;
    line-height: 1.35;
    max-width: 100%;
}

.whitelabel-intents-setup-warn strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #ff8a8a;
    font-size: 0.82rem;
    font-weight: 700;
}

.whitelabel-intents-setup-warn__steps {
    margin: 0;
    white-space: normal;
}

.whitelabel-invite-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.whitelabel-invite-btn--detected {
    box-shadow: 0 0 0 1px rgba(250, 166, 26, 0.45);
}

.whitelabel-invite-btn--success {
    box-shadow: 0 0 0 1px rgba(87, 242, 135, 0.4);
}

.whitelabel-invite-btn-hint {
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.28rem 0 0;
    max-width: 100%;
    white-space: normal;
}

.whitelabel-mini-hint {
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    max-width: 52ch;
    white-space: pre-line;
}

.whitelabel-mini-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(88, 101, 242, 0.12);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.whitelabel-mini-settings-btn:hover {
    background: rgba(88, 101, 242, 0.22);
    border-color: rgba(88, 101, 242, 0.45);
}

.whitelabel-mini-settings-btn:active {
    transform: scale(0.98);
}

.whitelabel-mini-settings-btn i {
    font-size: 0.85rem;
    opacity: 0.9;
}

#whitelabelBotProfileModal.settings-modal.whitelabel-profile-modal {
    z-index: 10070;
}

.whitelabel-profile-modal__content.settings-modal-content {
    width: min(520px, calc(100vw - 28px));
    max-width: min(520px, calc(100vw - 28px));
    max-height: none;
    overflow: visible;
    border-radius: 18px;
}

.whitelabel-profile-modal .settings-modal-header {
    padding: 0.65rem 0.85rem;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.whitelabel-profile-modal__header h2 {
    font-size: 0.98rem;
    margin: 0;
    gap: 0.4rem;
    display: flex;
    align-items: center;
}

.whitelabel-profile-modal__body.settings-modal-body {
    padding: 0.7rem 1rem 0.85rem;
    overflow: visible;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.whitelabel-profile-modal__label {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.68);
    margin-top: 0.2rem;
}

.whitelabel-profile-modal__lead {
    margin: 0 0 0.25rem;
    font-size: 0.74rem;
    line-height: 1.38;
    color: rgba(255, 255, 255, 0.5);
}

.whitelabel-profile-modal__textarea {
    width: 100%;
    height: 5.5rem;
    min-height: 5.5rem;
    max-height: 5.5rem;
    resize: none;
    font-size: 0.8rem;
    line-height: 1.38;
    padding: 0.45rem 0.55rem;
    overflow-y: auto;
    box-sizing: border-box;
}

.whitelabel-profile-modal__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin: 0 0 0.15rem;
}

.whitelabel-profile-modal__meta-text {
    font-size: 0.68rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.42);
    flex: 1 1 10rem;
}

.whitelabel-profile-modal__counter {
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.38);
    flex-shrink: 0;
}

.whitelabel-profile-modal__activity-grid {
    display: grid;
    grid-template-columns: minmax(7.5rem, 32%) 1fr;
    gap: 0.5rem 0.65rem;
    align-items: end;
    margin-top: 0.15rem;
}

.whitelabel-profile-modal__activity-col {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

.whitelabel-profile-modal__activity-col .whitelabel-profile-modal__label {
    margin-top: 0;
}

.whitelabel-profile-modal__select {
    width: 100%;
    padding: 0.42rem 0.5rem;
    font-size: 0.78rem;
}

.whitelabel-profile-modal__activity-input {
    width: 100%;
    padding: 0.42rem 0.5rem;
    font-size: 0.78rem;
}

.whitelabel-profile-modal__foot-hint {
    margin: 0.1rem 0 0;
    font-size: 0.68rem;
    line-height: 1.32;
    color: rgba(255, 255, 255, 0.4);
}

.whitelabel-profile-modal__footer {
    padding: 0.55rem 0.85rem;
    flex-shrink: 0;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .whitelabel-profile-modal__activity-grid {
        grid-template-columns: 1fr;
    }
}

.whitelabel-locked-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 1.5rem;
    text-align: center;
    background: rgba(15, 16, 20, 0.72);
    border-radius: inherit;
    pointer-events: auto;
}

.whitelabel-locked-overlay i {
    font-size: 1.75rem;
    color: #faa61a;
}

.whitelabel-locked-overlay p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 28ch;
}

.whitelabel-gate--locked .whitelabel-locked-overlay {
    display: flex;
}

.whitelabel-encryption-warn {
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: rgba(250, 166, 26, 0.12);
    border: 1px solid rgba(250, 166, 26, 0.35);
    color: #f0b232;
    font-size: 0.76rem;
    line-height: 1.3;
    margin-bottom: 0.45rem;
}

#whitelabelSetupModal.settings-modal {
    z-index: 10060;
}

/* Sub-Modal: Sichtbarkeit & Veröffentlichung (über Server-Einstellungen) */
#serverPublishSetupModal.settings-modal {
    z-index: 10085;
}

.server-publish-setup-body.settings-modal-body {
    padding: 0;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#serverPublishSetupModal .server-publish-setup-body .setting-content {
    flex: 1 1 auto;
    min-height: 0;
}

/* sp-board = 3 Spalten; display:flex auf .setting-content würde das Grid überschreiben */
#serverPublishSetupModal .server-publish-setup-body .setting-content.sp-board {
    display: grid;
}

.server-publish-setup-footer.settings-modal-footer {
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 10px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.14);
    flex-shrink: 0;
}

.server-publish-setup-done {
    min-width: 96px;
    padding: 7px 16px !important;
    font-size: 0.82rem;
}

.server-publish-overview__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.server-publish-overview__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.server-publish-overview__primary {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
    opacity: 0.95;
    min-width: 140px;
}

.server-publish-overview__secondary {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

.server-publish-overview__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px !important;
    margin-top: 2px;
    width: 100%;
    justify-content: center;
}

@media (min-width: 480px) {
    .server-publish-overview__cta {
        width: auto;
        align-self: flex-start;
    }
}

.server-publish-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.server-publish-badge--off {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
}

.server-publish-badge--draft {
    background: rgba(250, 176, 5, 0.14);
    color: #fbbf24;
    border: 1px solid rgba(250, 176, 5, 0.32);
}

.server-publish-badge--live {
    background: rgba(35, 165, 90, 0.18);
    color: #57f287;
    border: 1px solid rgba(35, 165, 90, 0.4);
}

.server-publish-setup-modal-content.settings-modal-content {
    max-width: min(1140px, 98vw);
    width: min(1140px, 98vw);
    max-height: min(90vh, 640px);
    border-radius: 14px;
    border: 1px solid rgba(88, 101, 242, 0.28);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

/* Kompakte Topbar */
#serverPublishSetupModal .sp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(90deg, rgba(88, 101, 242, 0.12) 0%, transparent 70%);
    flex-shrink: 0;
}

#serverPublishSetupModal .sp-topbar__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#serverPublishSetupModal .sp-topbar__title > i {
    color: #8ea1ff;
    font-size: 0.95rem;
}

#serverPublishSetupModal .sp-topbar__title h2 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#serverPublishSetupModal .sp-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#serverPublishSetupModal .sp-visibility-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}

#serverPublishSetupModal .toggle-switch--compact {
    transform: scale(0.88);
    transform-origin: center;
}

#serverPublishSetupModal .sp-board {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 8px;
    padding: 8px 10px 10px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

#serverPublishSetupModal .sp-pane {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

#serverPublishSetupModal .sp-pane--text {
    flex: 1;
    min-height: 0;
}

#serverPublishSetupModal .sp-pane--text .sp-field--area {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#serverPublishSetupModal .sp-pane--text .sp-field--area .server-publish-textarea {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
    max-height: none !important;
    resize: none;
}

#serverPublishSetupModal .sp-pane--tags {
    min-height: 0;
}

#serverPublishSetupModal .sp-pane__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.72);
}

#serverPublishSetupModal .sp-pane__title > i {
    color: #8ea1ff;
    font-size: 0.7rem;
}

#serverPublishSetupModal .sp-pane__meta {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.45);
}

#serverPublishSetupModal .sp-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#serverPublishSetupModal .sp-field__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
}

.server-publish-field-required {
    color: #fbbf24;
    margin-left: 2px;
    font-weight: 700;
}

/* Legacy aliases (falls noch referenziert) */
.server-publish-sections {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.server-publish-section {
    padding: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.server-publish-section__head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.server-publish-section__head > i {
    color: #5865f2;
    margin-top: 2px;
    font-size: 1rem;
}

.server-publish-section__head h4 {
    margin: 0 0 4px;
    font-size: 0.92rem;
    font-weight: 600;
}

.server-publish-section__head p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.62);
}

#serverPublishSetupModal .server-publish-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #fff;
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.3;
}

#serverPublishSetupModal .server-publish-input:focus {
    outline: none;
    border-color: rgba(88, 101, 242, 0.6);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.12);
}

#serverPublishSetupModal .server-publish-textarea--compact {
    line-height: 1.4;
}

.server-publish-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
}

.server-publish-input:focus {
    outline: none;
    border-color: rgba(88, 101, 242, 0.65);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.15);
}

.server-publish-textarea {
    min-height: 72px;
}

#serverPublishSetupModal .sp-slideshow-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

#serverPublishSetupModal .sp-slideshow-strip.server-publish-slideshow-grid {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    gap: 5px;
    min-height: 44px;
    max-height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    scrollbar-width: thin;
}

#serverPublishSetupModal .sp-slideshow-strip .server-publish-slideshow-item {
    flex: 0 0 52px;
    width: 52px;
    height: 40px;
    aspect-ratio: unset;
    border-radius: 6px;
}

.server-publish-slideshow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    min-height: 56px;
}

#serverPublishSetupModal .server-publish-slideshow-empty {
    flex: 1;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 4px;
    white-space: nowrap;
}

.server-publish-slideshow-empty {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    padding: 8px 2px;
}

.server-publish-slideshow-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.server-publish-slideshow-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.server-publish-slideshow-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
}

#serverPublishSetupModal .sp-icon-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 8px;
}

#serverPublishSetupModal .sp-media-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#serverPublishSetupModal .sp-invite {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(35, 165, 90, 0.1);
    border: 1px solid rgba(35, 165, 90, 0.28);
}

#serverPublishSetupModal .sp-invite code {
    flex: 1;
    min-width: 0;
    font-size: 0.68rem;
    color: #57f287;
    word-break: break-all;
}

.server-publish-btn-secondary,
.server-publish-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

#serverPublishSetupModal .server-publish-btn-secondary,
#serverPublishSetupModal .server-publish-btn-primary {
    padding: 6px 10px;
    font-size: 0.76rem;
}

.server-publish-btn-secondary {
    background: rgba(88, 101, 242, 0.16);
    border: 1px solid rgba(88, 101, 242, 0.45);
    color: #c9cdfb;
}

.server-publish-btn-primary {
    background: #5865f2;
    color: #fff;
}

#serverPublishSetupModal .sp-tags-box.server-publish-tags-container {
    min-height: 38px;
    overflow: visible;
    padding: 8px 10px;
    margin: 0;
    gap: 6px;
    flex-shrink: 0;
    align-content: flex-start;
    background: rgba(88, 101, 242, 0.1);
    border: 1px solid rgba(88, 101, 242, 0.38);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#serverPublishSetupModal .server-publish-tags-empty {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.42);
    font-style: italic;
}

#serverPublishSetupModal .server-publish-tag-chip {
    padding: 5px 8px 5px 11px;
    font-size: 0.76rem;
    font-weight: 700;
    gap: 6px;
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 2px 10px rgba(88, 101, 242, 0.38);
}

#serverPublishSetupModal .server-publish-tag-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    opacity: 1;
    font-size: 0.62rem;
    transition: background 0.15s ease, color 0.15s ease;
}

#serverPublishSetupModal .server-publish-tag-chip button:hover {
    background: rgba(255, 68, 68, 0.55);
    color: #fff;
}

#serverPublishSetupModal .sp-quick-tags.server-publish-quick-tags {
    gap: 5px;
    margin: 0;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex: 1 1 auto;
    align-content: flex-start;
}

#serverPublishSetupModal .sp-quick-tags .sp-quick-tag-btn {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 28px;
    padding: 5px 9px 5px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    background: rgba(0, 0, 0, 0.22);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

#serverPublishSetupModal .sp-quick-tags .sp-quick-tag-btn:hover {
    background: rgba(88, 101, 242, 0.12);
    border-color: rgba(88, 101, 242, 0.35);
    border-style: solid;
    color: rgba(255, 255, 255, 0.82);
}

#serverPublishSetupModal .sp-quick-tags .sp-quick-tag-btn.is-added {
    opacity: 0.38;
    border-style: dashed;
    pointer-events: none;
}

#serverPublishSetupModal .sp-quick-tag-btn__icon {
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

#serverPublishSetupModal .sp-quick-tag-btn__label {
    white-space: nowrap;
}

#serverPublishSetupModal .sp-tag-add {
    margin-top: auto;
}

#serverPublishSetupModal .sp-tag-add-btn {
    width: 34px;
    min-width: 34px;
    padding: 0 !important;
    justify-content: center;
}

#serverPublishSetupModal .sp-social-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

#serverPublishSetupModal .sp-social-grid label {
    gap: 5px;
}

#serverPublishSetupModal .sp-social-grid label i {
    width: 14px;
    font-size: 0.72rem;
}

#serverPublishSetupModal .sp-social-website {
    grid-column: 1 / -1;
}

.server-publish-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

.server-publish-tags-empty {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.server-publish-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(88, 101, 242, 0.2);
    border: 1px solid rgba(88, 101, 242, 0.45);
    border-radius: 999px;
    font-size: 0.84rem;
    color: #c9cdfb;
}

.server-publish-tag-chip button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    opacity: 0.75;
}

.server-publish-quick-label {
    margin: 0 0 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}

.server-publish-quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.server-publish-quick-tags button {
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(88, 101, 242, 0.1);
    border: 1px solid rgba(88, 101, 242, 0.28);
    color: #aeb4f8;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
}

.server-publish-tag-input-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.server-publish-tag-input-row .server-publish-input {
    flex: 1;
    min-width: 140px;
}

.server-publish-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.server-publish-social-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.server-publish-social-grid label i {
    width: 18px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.server-publish-social-grid__wide {
    grid-column: 1 / -1;
}

.server-publish-invite-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.server-publish-invite-row code {
    flex: 1;
    min-width: 200px;
    color: #5865f2;
    font-size: 0.86rem;
    word-break: break-all;
}

#serverPublishSetupModal #inviteLinkDisplay {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
}

@media (max-width: 960px) {
    #serverPublishSetupModal .sp-board {
        grid-template-columns: 1fr 1fr;
    }

    #serverPublishSetupModal .sp-pane--text {
        grid-column: 1 / -1;
    }

    .server-publish-setup-modal-content.settings-modal-content {
        max-height: min(92vh, 720px);
    }

    .server-publish-setup-body.settings-modal-body {
        overflow-y: auto;
    }
}

@media (max-width: 600px) {
    #serverPublishSetupModal .sp-board {
        grid-template-columns: 1fr;
    }

    .server-publish-setup-modal-content.settings-modal-content {
        max-width: 96vw;
        width: 96vw;
    }

    #serverPublishSetupModal .sp-social-grid {
        grid-template-columns: 1fr 1fr;
    }
}

#serverPublishSetupModal .server-visibility-tags-label {
    display: block;
    margin-top: 0.65rem;
    margin-bottom: 0.35rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.86rem;
}

/* Sub-Modal: Bot-Assistent (KI) */
#botAssistantSetupModal.settings-modal {
    z-index: 10086;
}

.bot-assistant-setup-modal-content.settings-modal-content {
    max-width: min(560px, 96vw);
    width: min(560px, 96vw);
    max-height: min(88vh, 760px);
}

.bot-assistant-setup-body.settings-modal-body {
    padding: 0.85rem 1rem 1rem;
    overflow-y: auto;
}

#botAssistantSetupModal .setting-description--setup-lead {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

#botAssistantSetupModal .setting-header.server-publish-setup-toggle-row {
    margin-bottom: 0.65rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#botAssistantSetupModal .setting-content.bot-assistant-setting-content {
    margin-top: 0.55rem;
}

#botAssistantSetupModal .setting-toggle-stack {
    margin: 10px 0 12px;
    gap: 4px;
}

#botAssistantSetupModal .setting-toggle-row {
    padding: 8px 10px;
}

#botAssistantSetupModal .setting-toggle-row__text {
    font-size: 0.84rem;
}

#botAssistantSetupModal .bot-assistant-personality-block {
    margin-bottom: 8px;
}

#botAssistantSetupModal .server-setting-field-header {
    margin-bottom: 6px;
}

#botAssistantSetupModal .server-setting-metric-row {
    padding: 10px 12px;
    margin: 4px 0 10px;
}


.whitelabel-setup-modal.settings-modal-content--server-wide {
    max-width: min(440px, 94vw);
    width: 100%;
    max-height: min(85vh, 640px);
}

.whitelabel-setup-modal .settings-modal-header {
    padding: 0.65rem 0.85rem;
    flex-shrink: 0;
}

.whitelabel-setup-modal .settings-modal-header h2 {
    font-size: 1rem;
    margin: 0;
    gap: 0.35rem;
    display: flex;
    align-items: center;
}

.whitelabel-setup-modal .settings-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.whitelabel-setup-body {
    padding: 0.65rem 0.85rem 0.85rem;
}

.whitelabel-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 0.65rem;
}

.whitelabel-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.whitelabel-step--active {
    background: rgba(88, 101, 242, 0.35);
    border-color: #5865f2;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}

.whitelabel-step--done {
    background: rgba(67, 181, 129, 0.25);
    border-color: #43b581;
    color: #43b581;
}

.whitelabel-step--ready {
    background: rgba(87, 242, 135, 0.28);
    border-color: #57f287;
    color: #edffef;
    box-shadow: 0 0 0 2px rgba(87, 242, 135, 0.22);
}

.whitelabel-step-line {
    flex: 1;
    min-width: 18px;
    max-width: 56px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 3px;
}

.whitelabel-step-line--done {
    background: rgba(67, 181, 129, 0.55);
}

.whitelabel-step-panel h3 {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
}

.whitelabel-setup-body .whitelabel-step-panel__lead {
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.68);
}

.whitelabel-setup-body .whitelabel-step-panel label {
    font-size: 0.78rem;
}

.whitelabel-setup-body .whitelabel-step-panel .role-select {
    margin-bottom: 0.25rem;
}

.whitelabel-setup-modal .settings-modal-footer.whitelabel-setup-footer {
    padding: 0.55rem 0.85rem;
    gap: 8px;
    flex-shrink: 0;
}

.whitelabel-setup-modal .btn-save,
.whitelabel-setup-modal .btn-cancel {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-medium);
    background: var(--surface-secondary);
}

.settings-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-btn-permissions {
    background: rgba(88, 101, 242, 0.1);
    border: 1px solid rgba(88, 101, 242, 0.3);
    border-radius: 8px;
    color: #7289da;
    font-size: 0.9rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

.settings-btn-permissions:hover {
    background: rgba(88, 101, 242, 0.2);
    border-color: rgba(88, 101, 242, 0.5);
    transform: translateY(-1px);
}

.settings-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.settings-modal-header h2 i {
    color: var(--accent-primary);
}

.settings-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.2rem;
}

.settings-modal-close:hover {
    background: rgba(255, 68, 68, 0.1);
    border-color: #ff4444;
    color: #ff4444;
    transform: scale(1.05);
}

.settings-modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.setting-item {
    background: var(--surface-secondary);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid var(--border-subtle);
    transition: all 0.3s ease;
}

.setting-item.whitelabel-card {
    padding: 0;
}

.setting-item:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-sm);
}

.setting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.setting-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.setting-title i {
    font-size: 1.3rem;
    color: var(--accent-primary);
}

.setting-title h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.setting-description {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.setting-content {
    margin-top: 1rem;
}

.setting-content label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.role-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    color-scheme: dark;
}

.role-select option,
.role-select optgroup {
    background-color: #1e1f22;
    color: #f2f3f5;
}

.role-select:hover {
    border-color: var(--accent-primary);
}

.role-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.1);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 50px;
    height: 28px;
    display: inline-block;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border-medium);
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.toggle-slider:hover {
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.1);
}

.settings-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-medium);
    background: var(--surface-secondary);
}

.btn-cancel,
.btn-save {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: 'Inter', sans-serif;
}

.btn-cancel {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
}

.btn-cancel:hover {
    background: var(--border-subtle);
    border-color: var(--border-strong);
}

.btn-save {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

.btn-save:hover {
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.4);
    transform: translateY(-2px);
}

.btn-save:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 900px) {
    .settings-modal-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .settings-modal-header,
    .settings-modal-body,
    .settings-modal-footer {
        padding: 1rem;
    }

    #serverSettingsModal .server-settings-body-stack.settings-modal-body {
        padding: 0;
    }
    
    .settings-modal-header h2 {
        font-size: 1.2rem;
    }
    
    /* Fix Tag hinzufügen Button in mobile view */
    #serverTagsInput {
        min-width: 0 !important;
        font-size: 0.9rem !important;
    }
    
    #addTagButton {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }
    
    /* Stack input and button vertically on very small screens */
    @media (max-width: 400px) {
        #serverTagsInputContainer {
            flex-direction: column !important;
        }
        
        #serverTagsInput {
            width: 100% !important;
            min-width: 100% !important;
        }
        
        #addTagButton {
            width: 100% !important;
            padding: 10px !important;
        }
    }
    
    .server-settings-btn {
        width: 60px;
        height: 60px;
    }
    
    .server-settings-btn i {
        font-size: 1.4rem;
    }
}

/* Mod-Panel Permissions Styles */
.permission-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.permission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.permission-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.permission-title i {
    color: #7289da;
    font-size: 1.2rem;
}

.permission-title h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
}

.permission-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.role-selector-container {
    margin-top: 12px;
}

.add-role-btn {
    background: rgba(88, 101, 242, 0.1);
    border: 1px solid rgba(88, 101, 242, 0.3);
    border-radius: 8px;
    color: #7289da;
    font-size: 0.9rem;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    width: 100%;
    justify-content: center;
}

.add-role-btn:hover {
    background: rgba(88, 101, 242, 0.2);
    border-color: rgba(88, 101, 242, 0.5);
}

.selected-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.role-tag {
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-color-dot {
    flex-shrink: 0;
}

.permissions-description {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Mod-Panel »Berechtigungen«: schmales, dichtes Modal */
#modPanelPermissionsModal .settings-modal-content--mp-permissions {
    max-width: min(480px, 94vw);
    max-height: min(88vh, 680px);
}

#modPanelPermissionsModal .settings-modal-header {
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
}

#modPanelPermissionsModal .settings-modal-header h2 {
    font-size: 1rem;
    gap: 0.45rem;
}

#modPanelPermissionsModal .settings-modal-header h2 i {
    font-size: 0.95rem;
}

#modPanelPermissionsModal .mod-panel-permissions-body {
    padding: 0.45rem 0.7rem 0.55rem;
    max-height: min(56vh, 520px);
    overflow-y: auto;
}

#modPanelPermissionsModal .settings-modal-footer {
    padding: 0.45rem 0.7rem;
    gap: 0.45rem;
    flex-shrink: 0;
}

#modPanelPermissionsModal .settings-modal-footer .btn-primary,
#modPanelPermissionsModal .settings-modal-footer .btn-cancel {
    padding: 0.42rem 0.85rem;
    font-size: 0.82rem;
}

#modPanelPermissionsModal .permissions-description {
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.68);
}

#modPanelPermissionsModal .permission-section {
    padding: 9px 11px;
    margin-bottom: 6px;
    border-radius: 8px;
}

#modPanelPermissionsModal .permission-header {
    margin-bottom: 3px;
}

#modPanelPermissionsModal .permission-title {
    gap: 7px;
}

#modPanelPermissionsModal .permission-title i {
    font-size: 0.92rem;
}

#modPanelPermissionsModal .permission-title h3 {
    font-size: 0.86rem;
    font-weight: 600;
}

#modPanelPermissionsModal .permission-description {
    font-size: 0.72rem;
    margin-bottom: 5px;
    line-height: 1.3;
}

#modPanelPermissionsModal .role-selector-container {
    margin-top: 5px;
}

#modPanelPermissionsModal .add-role-btn {
    padding: 5px 10px;
    font-size: 0.76rem;
    border-radius: 6px;
}

#modPanelPermissionsModal .selected-roles {
    margin-top: 5px;
    gap: 5px;
}

#modPanelPermissionsModal .mod-panel-perm-no-roles {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    margin: 3px 0 2px;
}

#modPanelPermissionsModal .mod-panel-perm-role-tag {
    background: rgba(88, 101, 242, 0.1);
    border: 1px solid rgba(88, 101, 242, 0.28);
    border-radius: 5px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px;
}

#modPanelPermissionsModal .mod-panel-perm-role-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

#modPanelPermissionsModal .mod-panel-perm-role-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.76rem;
    line-height: 1.2;
}

#modPanelPermissionsModal .mod-panel-perm-role-remove {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0 0 0 2px;
    margin-left: auto;
    font-size: 0.72rem;
    line-height: 1;
}

#modPanelPermissionsModal .mod-panel-perm-role-remove:hover {
    color: #f04747;
}

#modPanelPermissionsModal .toggle-switch {
    width: 42px;
    height: 24px;
}

#modPanelPermissionsModal .toggle-slider {
    border-radius: 24px;
}

#modPanelPermissionsModal .toggle-slider:before {
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
}

#modPanelPermissionsModal .toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(18px);
}

/* Mod-Panel Role Selector Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    opacity: 1;
}

.modal-overlay .modal-content {
    background: #2f3136;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-overlay .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-overlay .modal-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-overlay .modal-header h3 i {
    color: #7289da;
}

.modal-overlay .modal-close-btn {
    background: rgba(240, 71, 71, 0.1);
    border: 1px solid rgba(240, 71, 71, 0.3);
    border-radius: 8px;
    color: #f04747;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px 12px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay .modal-close-btn:hover {
    background: rgba(240, 71, 71, 0.2);
    border-color: rgba(240, 71, 71, 0.5);
    transform: scale(1.05);
}

.modal-overlay .modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.role-selector-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}

.role-selector-list::-webkit-scrollbar {
    width: 8px;
}

.role-selector-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.role-selector-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.role-selector-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.role-selector-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.role-selector-item:hover {
    background: rgba(88, 101, 242, 0.1);
    border-color: rgba(88, 101, 242, 0.3);
    transform: translateX(4px);
}

.role-selector-item .role-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.role-selector-item .role-name {
    flex: 1;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
}

.role-selector-item i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.role-selector-item:hover i {
    color: #7289da;
    transform: scale(1.1);
}

.empty-state-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
    padding: 32px;
}

/* Embeds + Updates: zwei Karten immer nebeneinander, gleiche Schrumpf-Logik wie andere Kategorien */
.page-grid--embeds-updates {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--dash-tile-gap);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.settings-section-row .page-grid.page-grid--embeds-updates {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    margin: 1rem auto 0;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
}
.page-card-sub {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--discord-text-muted, #72767d);
    font-weight: 500;
}
/* Kein Hintergrund auf dem Icon-Container — sonst wirkt es wie ein fester Kasten neben der rotierenden Glyphe */
.qu-updates-icon {
    background: transparent !important;
}

.qu-updates-icon i {
    color: #facc15;
}

/* Schnell-Updates Wizard (Schritt 1+2 vor dem Hauptpanel) */
.qu-wizard-modal {
    z-index: 12050;
    background: rgba(0, 0, 0, 0.84);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.qu-wizard-modal-content.settings-modal-content {
    max-width: min(520px, 94vw);
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(250, 204, 21, 0.2);
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 56px rgba(250, 204, 21, 0.07);
}

.qu-wizard-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(250, 204, 21, 0.1) 0%, rgba(0, 0, 0, 0.14) 100%);
    flex-shrink: 0;
}

.qu-wizard-modal-header__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.qu-wizard-modal-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.24), rgba(234, 179, 8, 0.1));
    border: 1px solid rgba(250, 204, 21, 0.38);
    color: #facc15;
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(250, 204, 21, 0.14);
}

.qu-wizard-modal-header__text {
    min-width: 0;
}

.qu-wizard-modal-eyebrow {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(250, 204, 21, 0.78);
    margin-bottom: 2px;
}

.qu-wizard-modal-header h2 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
}

.qu-wizard-modal .settings-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
}

.qu-wizard-modal-body.settings-modal-body {
    padding: 1.05rem 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.qu-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.qu-wizard-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.48);
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.qu-wizard-step--active {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.32), rgba(234, 179, 8, 0.18));
    border-color: rgba(250, 204, 21, 0.72);
    color: #fef08a;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.14);
}

.qu-wizard-step--done {
    background: rgba(67, 181, 129, 0.22);
    border-color: rgba(67, 181, 129, 0.65);
    color: #57f287;
    font-size: 0.72rem;
}

.qu-wizard-step-line {
    flex: 1;
    min-width: 22px;
    max-width: 64px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
    border-radius: 1px;
}

.qu-wizard-step-line--done {
    background: linear-gradient(90deg, rgba(67, 181, 129, 0.65), rgba(250, 204, 21, 0.35));
}

.qu-wizard-step-caption {
    margin: 0;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(250, 204, 21, 0.72);
}

.qu-wizard-field-card {
    padding: 14px 16px 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.qu-wizard-field-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.qu-wizard-label {
    display: block;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.qu-wizard-optional-badge {
    flex-shrink: 0;
    font-size: 0.64rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.46);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qu-wizard-hint {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.54);
}

.qu-wizard-input,
.qu-wizard-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.38);
    color: #eceef2;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.qu-wizard-input:hover,
.qu-wizard-textarea:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.44);
}

.qu-wizard-input:focus,
.qu-wizard-textarea:focus {
    outline: none;
    border-color: rgba(250, 204, 21, 0.55);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.12);
    background: rgba(0, 0, 0, 0.48);
}

.qu-wizard-input::placeholder,
.qu-wizard-textarea::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

.qu-wizard-textarea {
    min-height: 156px;
    resize: vertical;
}

.qu-wizard-modal-footer.settings-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0.75rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.qu-wizard-modal-footer--split {
    justify-content: space-between;
}

.qu-wizard-footer-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.qu-wizard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.qu-wizard-btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.qu-wizard-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.88);
}

.qu-wizard-btn--back {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.qu-wizard-btn--back:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.qu-wizard-btn--primary {
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
    color: #1c1904;
    box-shadow: 0 4px 14px rgba(250, 204, 21, 0.28);
}

.qu-wizard-btn--primary:hover {
    box-shadow: 0 6px 20px rgba(250, 204, 21, 0.38);
    transform: translateY(-1px);
}

.qu-wizard-btn--primary:active {
    transform: translateY(0);
}

@media (max-width: 480px) {
    .qu-wizard-modal-header {
        padding: 0.85rem 0.95rem;
    }

    .qu-wizard-modal-body.settings-modal-body {
        padding: 0.95rem;
    }

    .qu-wizard-modal-footer.settings-modal-footer {
        padding: 0.65rem 0.95rem;
    }

    .qu-wizard-modal-footer--split {
        flex-direction: column;
        align-items: stretch;
    }

    .qu-wizard-footer-end {
        width: 100%;
        margin-left: 0;
    }

    .qu-wizard-footer-end .qu-wizard-btn {
        flex: 1;
    }

    .qu-wizard-btn--back {
        width: 100%;
    }
}

/* Schnell-Updates Overlay */
.qu-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 16px;
    box-sizing: border-box;
}
.qu-panel {
    width: 100%;
    max-width: 1180px;
    max-height: min(98vh, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    background: rgba(15, 15, 15, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.qu-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.qu-panel-head h2 {
    margin: 0;
    font-size: 1.15rem;
    color: #fff;
}
.qu-close {
    background: transparent;
    border: none;
    color: #b9bbbe;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}
.qu-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.qu-panel-body--layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}
.qu-main-row {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1.15fr) minmax(260px, 1fr);
    gap: 0;
    min-height: 0;
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.qu-preview-col,
.qu-center-col,
.qu-settings-col {
    padding: 14px 16px 18px;
    overflow-y: auto;
    min-height: 0;
    max-height: min(58vh, 520px);
}
.qu-preview-col {
    background: rgba(0, 0, 0, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.qu-center-col {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.qu-panel-section-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #72767d;
    margin: 0 0 10px;
}
.qu-textarea--main {
    min-height: 280px;
    flex: 1;
}
.qu-center-col {
    display: flex;
    flex-direction: column;
}
.qu-settings-panels {
    position: relative;
    min-height: 200px;
    margin-top: 4px;
}
.qu-settings-panel {
    display: none;
    flex-direction: column;
    gap: 0;
}
.qu-settings-panel.is-active {
    display: flex;
}
.qu-upload-block {
    margin-bottom: 8px;
}
.qu-upload-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.qu-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.qu-upload-hint {
    font-size: 0.7rem;
    color: #72767d;
    margin: 6px 0 0;
    line-height: 1.35;
}
.qu-btn--compact {
    padding: 8px 12px;
    font-size: 0.78rem;
    white-space: nowrap;
}
.qu-bottom-row {
    padding: 12px 14px 14px;
    background: rgba(0, 0, 0, 0.22);
    overflow: visible;
    max-height: none;
    flex-shrink: 0;
}
.qu-history-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-bottom: 8px;
}
.qu-bottom-row .qu-history-heading {
    margin: 0;
}
.qu-history-meta-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(88, 101, 242, 0.14);
    border: 1px solid rgba(88, 101, 242, 0.32);
    color: #b4b8ff;
    line-height: 1.2;
}
.qu-history-meta-tag--premium {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.28), rgba(99, 102, 241, 0.12));
    border-color: rgba(147, 156, 255, 0.45);
    color: #e8e9ff;
}
@media (max-width: 1024px) {
    .qu-main-row {
        grid-template-columns: 1fr;
        max-height: none;
    }
    .qu-preview-col,
    .qu-center-col,
    .qu-settings-col {
        max-height: none;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .qu-settings-col {
        border-bottom: none;
    }
}
.qu-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b9bbbe;
    margin: 10px 0 6px;
}
.qu-label:first-child {
    margin-top: 0;
}
.qu-input,
.qu-select,
.qu-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    color: #dcddde;
    font-family: inherit;
    font-size: 0.9rem;
}
.qu-textarea {
    resize: vertical;
    min-height: 100px;
}
.qu-color {
    height: 40px;
    padding: 4px;
    cursor: pointer;
}
.qu-details {
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.15);
}
.qu-details summary {
    cursor: pointer;
    font-weight: 600;
    color: #c7c9ff;
    font-size: 0.88rem;
}
.qu-details[open] summary {
    margin-bottom: 8px;
}
.qu-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b9bbbe;
    font-size: 0.88rem;
    cursor: pointer;
}
.qu-fields-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.qu-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 8px;
    align-items: start;
}
@media (max-width: 600px) {
    .qu-field-row {
        grid-template-columns: 1fr;
    }
}
.qu-settings-col .qu-field-row {
    grid-template-columns: 1fr;
}
@media (min-width: 601px) {
    .qu-settings-col .qu-field-row {
        grid-template-columns: 1fr 1fr auto auto;
    }
}
.qu-field-remove {
    background: rgba(237, 66, 69, 0.15);
    border: 1px solid rgba(237, 66, 69, 0.35);
    color: #ed4245;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.qu-inline-check {
    font-size: 0.75rem;
    color: #949ba4;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.qu-actions {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.qu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.qu-btn--primary {
    background: linear-gradient(135deg, var(--discord-accent, #5865f2), var(--discord-accent-hover, #4752c4));
    color: #fff;
    width: 100%;
}
.qu-btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    color: #dcddde;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.qu-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}
.qu-history-heading {
    margin: 0 0 6px;
    font-size: 0.95rem;
    color: #fff;
}
.qu-history-header-row .qu-history-heading {
    margin: 0;
}
.qu-history-hint {
    margin: 0 0 12px;
    font-size: 0.75rem;
    color: #72767d;
    line-height: 1.35;
}
.qu-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qu-load-more {
    width: 100%;
    margin-top: 12px;
}

/* Live-Embed-Vorschau (Discord-nah) */
.qu-embed-preview {
    font-size: 0.875rem;
    line-height: 1.375;
    color: #dcddde;
    border-radius: 4px;
    overflow: hidden;
    background: #2f3136;
    min-height: 100px;
}
.qu-embed-preview__inner {
    border-left: 4px solid #5865f2;
    padding: 10px 12px 12px;
    background: #2f3136;
    overflow: hidden;
}
.qu-embed-preview__inner::after {
    content: '';
    display: table;
    clear: both;
}
.qu-embed-preview__author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}
.qu-embed-preview__author img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.qu-embed-preview__author-link {
    color: #fff;
    text-decoration: none;
}
.qu-embed-preview__author-link:hover {
    text-decoration: underline;
}
.qu-embed-preview__title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}
.qu-embed-preview__desc {
    white-space: pre-wrap;
    word-break: break-word;
    color: #dcddde;
    font-size: 0.875rem;
}
.qu-embed-preview__thumb-wrap {
    float: right;
    margin: 0 0 8px 10px;
}
.qu-embed-preview__thumb {
    max-width: 84px;
    max-height: 84px;
    border-radius: 4px;
    display: block;
}
.qu-embed-preview__image {
    max-width: 100%;
    border-radius: 4px;
    margin-top: 10px;
    display: block;
}
.qu-embed-preview__fields {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    clear: both;
}
.qu-embed-preview__field--inline {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 6px);
    margin-right: 8px;
    box-sizing: border-box;
}
.qu-embed-preview__field-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}
.qu-embed-preview__field-value {
    font-size: 0.75rem;
    color: #dcddde;
    white-space: pre-wrap;
    word-break: break-word;
}
.qu-embed-preview__footer {
    margin-top: 10px;
    font-size: 0.75rem;
    color: #a3a6aa;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    clear: both;
}
.qu-embed-preview__footer img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}
.qu-embed-preview__ts {
    color: #72767d;
}
.qu-embed-preview__empty {
    color: #72767d;
    font-size: 0.8125rem;
    padding: 1.25rem 0.75rem;
    text-align: center;
    line-height: 1.45;
}

.qu-history-card {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
}
.qu-history-accent {
    width: 4px;
    flex-shrink: 0;
}
.qu-history-inner {
    padding: 10px 12px;
    min-width: 0;
    flex: 1;
}
.qu-history-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.72rem;
    color: #72767d;
    margin-bottom: 6px;
}
.qu-history-card-title {
    font-weight: 700;
    color: #fff;
    font-size: 0.88rem;
    margin-bottom: 4px;
}
.qu-history-desc {
    font-size: 0.78rem;
    color: #b9bbbe;
    line-height: 1.35;
    max-height: 4.2em;
    overflow: hidden;
}
.qu-history-author {
    font-size: 0.72rem;
    color: #949cf7;
    margin-top: 4px;
}
.qu-history-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.75rem;
    color: #00b0f4;
    text-decoration: none;
}
.qu-history-link:hover {
    text-decoration: underline;
}

/* Schnell-Updates: Header Kanal links, 2-Spalten-Layout, Embed wie /embeds */
.qu-head-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    min-width: 0;
}
.qu-header-channel-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.qu-header-channel-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8e9297;
    white-space: nowrap;
}
.qu-channel-select-shell {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}
.qu-channel-select-icon {
    position: absolute;
    left: 12px;
    z-index: 1;
    font-size: 0.85rem;
    font-weight: 700;
    color: #72767d;
    pointer-events: none;
    line-height: 1;
}
.qu-overlay .qu-select.qu-select--header,
.qu-select.qu-select--header {
    min-width: 200px;
    max-width: min(46vw, 340px);
    width: auto;
    flex: 1 1 auto;
    padding: 9px 14px 9px 34px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #1e1f22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b5bac1' d='M3 4.5h6L6 8 3 4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f2f3f5;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.qu-overlay .qu-select.qu-select--header:hover,
.qu-select.qu-select--header:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background-color: #232428;
}
.qu-overlay .qu-select.qu-select--header:focus,
.qu-select.qu-select--header:focus {
    outline: none;
    border-color: rgba(88, 101, 242, 0.75);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.qu-overlay .qu-select.qu-select--header option,
.qu-select.qu-select--header option {
    background: #1e1f22;
    color: #f2f3f5;
}
.qu-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;
}
.qu-chat-message-block {
    margin-bottom: 10px;
}
.qu-chat-message-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    max-height: 120px;
    resize: vertical;
    padding: 6px 2px 8px;
    font-size: 0.94rem;
    line-height: 1.45;
    border-radius: 0;
    border: none;
    background: transparent;
    color: #dcddde;
    box-shadow: none;
}
.qu-chat-message-input::placeholder {
    color: #72767d;
}
.qu-chat-message-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.qu-message-md-preview {
    display: none;
    margin-top: 4px;
    padding: 2px 0 0;
    font-size: 0.94rem;
    line-height: 1.45;
    color: #dcddde;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.qu-message-md-preview:not(:empty) {
    display: block;
}
.qu-discord-md .dm-codeblock {
    margin: 6px 0;
    padding: 8px 10px;
    border-radius: 4px;
    background: #2f3136;
    font-size: 0.85rem;
    white-space: pre-wrap;
    overflow-x: auto;
}
.qu-discord-md .dm-inline-code {
    padding: 1px 4px;
    border-radius: 3px;
    background: #2f3136;
    font-size: 0.88em;
}
.qu-discord-md .dm-strong {
    font-weight: 700;
}
.qu-discord-md .dm-em {
    font-style: italic;
}
.qu-discord-md .dm-u {
    text-decoration: underline;
}
.qu-discord-md .dm-s {
    text-decoration: line-through;
}
.qu-discord-md .dm-spoiler {
    background: #202225;
    color: #202225;
    border-radius: 3px;
    padding: 0 2px;
}
.qu-discord-md .dm-spoiler:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #dcddde;
}
.qu-discord-md .dm-link {
    color: #00aff4;
    text-decoration: none;
}
.qu-discord-md .dm-link:hover {
    text-decoration: underline;
}
.qu-discord-md .dm-mention {
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 500;
    background: rgba(88, 101, 242, 0.25);
    color: #dee0fc;
}
.qu-discord-md .dm-mention--role {
    font-weight: 600;
}
.qu-discord-md .dm-mention--channel {
    color: #00aff4;
    background: rgba(0, 175, 244, 0.12);
}
.qu-discord-md .dm-mention--everyone,
.qu-discord-md .dm-mention--here {
    background: rgba(250, 166, 26, 0.2);
    color: #faa61a;
    font-weight: 700;
}
.qu-field-md-preview {
    display: none;
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    font-size: 0.82rem;
    line-height: 1.4;
    color: #dcddde;
}
.qu-field-md-preview:not(:empty) {
    display: block;
}
/* Ein gemeinsamer Scroll erst wenn das Fenster die Viewport-Höhe erreicht — nicht vorher in Spalten scrollen */
.qu-panel-body--embed {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: visible;
}
.qu-embed-main-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    flex: 0 1 auto;
    align-items: start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.qu-panel-body--embed .qu-preview-col {
    padding: 14px 16px 18px;
    overflow: visible;
    min-height: 0;
    max-height: none;
    background: rgba(0, 0, 0, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.qu-panel-body--embed .qu-right-col {
    padding: 14px 18px 18px;
    overflow: visible;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: start;
    height: auto;
}

/* Schnell-Updates: KI-Buttons (kompakt) */
.qu-text-fields-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 10px;
}
.qu-text-fields-wrap--locked .qu-input {
    opacity: 0.55;
    pointer-events: none;
}
.qu-text-fields-wrap--locked + .qu-timestamp-ki-row .qu-improve-row .qu-btn--improve {
    pointer-events: none;
    opacity: 0.6;
}
.qu-timestamp-ki-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 8px;
}
.qu-timestamp-ki-row .qu-toggle--side {
    margin-top: 0;
}
.qu-timestamp-ki-row .qu-improve-row {
    margin-top: 0;
}
.qu-improve-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
/* Kompakte, ruhige KI-Aktionen neben dem Zeitstempel */
.qu-improve-row .qu-btn--compact-ki {
    padding: 5px 10px;
    min-height: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 6px;
    gap: 5px;
    line-height: 1.2;
}
.qu-improve-row .qu-btn--compact-ki > i {
    font-size: 0.72rem;
    opacity: 0.88;
}
.qu-btn--improve,
.qu-btn--undo,
.qu-btn--redo {
    gap: 5px;
    align-items: center;
    font-size: 0.78rem;
}
.qu-btn--undo:disabled,
.qu-btn--redo:disabled {
    opacity: 0.45;
}
/* Cooldown: leicht rötlicher Hinweis (30 s bis zum nächsten Klick) */
.qu-btn.qu-btn--ghost.qu-btn--improve.qu-btn--improve--cooldown:disabled {
    opacity: 1;
    cursor: not-allowed;
    border: 1px solid rgba(237, 66, 69, 0.45);
    background: rgba(237, 66, 69, 0.14);
    color: rgba(255, 230, 230, 0.95);
    box-shadow: inset 0 0 0 1px rgba(237, 66, 69, 0.12);
}
.qu-btn.qu-btn--ghost.qu-btn--improve.qu-btn--improve--cooldown:disabled:hover {
    background: rgba(237, 66, 69, 0.18);
}
.qu-improve-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(15, 17, 21, 0.72);
    border: 1px solid rgba(88, 101, 242, 0.25);
    border-radius: 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.qu-improve-overlay[hidden] {
    display: none !important;
}
.qu-improve-overlay-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(220, 221, 222, 0.95);
    text-align: center;
}
.qu-improve-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(88, 101, 242, 0.2);
    border-top-color: #5865f2;
    animation: qu-improve-spin 0.85s linear infinite;
}
@keyframes qu-improve-spin {
    to {
        transform: rotate(360deg);
    }
}
.qu-color-field {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.qu-embed-color-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.qu-embed-color-row .qu-label {
    margin-top: 0;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(185, 187, 190, 0.9);
}
.qu-color-field--under-preview {
    margin-top: 0;
}
.qu-color-field.qu-color-field--under-preview {
    gap: 8px;
}
.qu-color-picker--embed {
    position: relative;
    opacity: 1;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    flex-shrink: 0;
}
.qu-color-picker--embed::-webkit-color-swatch-wrapper {
    padding: 2px;
}
.qu-color-picker--embed::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}
.qu-color-hex {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(185, 187, 190, 0.75);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.qu-right-col .qu-input {
    user-select: text;
    -webkit-user-select: text;
}
.qu-right-col .qu-label {
    margin-top: 4px;
}
.qu-textarea--side {
    flex: 0 0 auto;
    min-height: 10rem;
    max-height: none;
    resize: none;
    overflow-y: hidden;
    overflow-x: hidden;
    line-height: 1.45;
    user-select: text;
    -webkit-user-select: text;
    field-sizing: content;
}
@supports not (field-sizing: content) {
    .qu-textarea--side {
        min-height: 12rem;
    }
}
.qu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin-top: 6px;
}
.qu-toggle--side {
    margin-top: 8px;
}
.qu-toggle-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    clip: rect(0, 0, 0, 0);
}
.qu-toggle-input:focus-visible + .qu-toggle-track {
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.45);
}
.qu-toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background: #4e5058;
    transition: background 0.18s ease;
    border: 1px solid rgba(0, 0, 0, 0.25);
}
.qu-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease;
}
.qu-toggle-input:checked + .qu-toggle-track {
    background: linear-gradient(135deg, #5865f2, #4752c4);
    border-color: transparent;
}
.qu-toggle-input:checked + .qu-toggle-track .qu-toggle-thumb {
    transform: translateX(18px);
}
.qu-toggle-text {
    font-size: 0.82rem;
    font-weight: 500;
    color: #b9bbbe;
    line-height: 1.3;
}
.qu-toggle:hover .qu-toggle-text {
    color: #dcddde;
}
.qu-actions--side {
    margin-top: auto;
    padding-top: 8px;
}
.qu-attachments-row {
    flex: 0 0 auto;
    padding: 6px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.08);
}
.qu-media-attach-options {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.qu-toggle--media-attach {
    margin-top: 0;
    align-items: flex-start;
    max-width: 100%;
}
.qu-toggle--media-attach .qu-toggle-text {
    flex: 1;
    min-width: 0;
}
.qu-overlay--edit-post .qu-bottom-row {
    display: none !important;
}
.qu-overlay--edit-post .qu-attachments-row {
    border-bottom: none;
}
.qu-media-dropzone {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.qu-media-dropzone:hover,
.qu-media-dropzone:focus-visible {
    border-color: rgba(88, 101, 242, 0.5);
    background: rgba(88, 101, 242, 0.06);
    box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.2);
}
.qu-media-dropzone--active {
    border-color: rgba(88, 101, 242, 0.75);
    background: rgba(88, 101, 242, 0.1);
    box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.35);
}
.qu-media-dropzone-icon {
    font-size: 0.95rem;
    color: #72767d;
    flex-shrink: 0;
}
.qu-media-dropzone:hover .qu-media-dropzone-icon,
.qu-media-dropzone:focus-visible .qu-media-dropzone-icon,
.qu-media-dropzone--active .qu-media-dropzone-icon {
    color: #949cf7;
}
.qu-media-dropzone-text {
    font-size: 0.82rem;
    font-weight: 500;
    color: #b9bbbe;
    text-align: center;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}
.qu-history-premium-banner {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(250, 166, 26, 0.4);
    background: rgba(250, 166, 26, 0.09);
    font-size: 0.78rem;
    color: #f0b232;
    line-height: 1.45;
}
.qu-history-premium-banner strong {
    color: #fff;
    font-weight: 600;
}
.qu-history-premium-banner--ok {
    border-color: rgba(88, 101, 242, 0.4);
    background: rgba(88, 101, 242, 0.08);
    color: #c7c9ff;
}
.qu-history-edit-btn {
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(88, 101, 242, 0.45);
    background: rgba(88, 101, 242, 0.15);
    color: #c7c9ff;
    cursor: pointer;
    font-family: inherit;
}
.qu-history-edit-btn:hover {
    background: rgba(88, 101, 242, 0.28);
}
.qu-history-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.qu-history-actions .qu-history-edit-btn {
    margin-top: 0;
}
.qu-history-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(237, 66, 69, 0.45);
    background: rgba(237, 66, 69, 0.12);
    color: #f6a8aa;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.qu-history-delete-btn:hover {
    background: rgba(237, 66, 69, 0.22);
    border-color: rgba(237, 66, 69, 0.65);
    color: #fff;
}
.qu-media-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.qu-media-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    align-items: flex-start;
}
.qu-media-strip:empty {
    display: none;
}
.qu-media-thumb {
    position: relative;
    flex: 0 0 calc((100% - 32px) / 5);
    width: calc((100% - 32px) / 5);
    min-width: 48px;
    max-width: 80px;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #202225;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: grab;
}
.qu-media-thumb--dragging {
    opacity: 0.55;
    cursor: grabbing;
    outline: 1px dashed rgba(88, 101, 242, 0.8);
}
.qu-media-thumb img,
.qu-media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.qu-media-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qu-media-thumb-remove:hover {
    background: #ed4245;
}
.qu-media-thumb-type {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: 0.6rem;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #dcddde;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* Schnell-Updates: Bildzonen auch ohne vorherigen „Edit“-Klick klickbar (embeds.css setzt sonst pointer-events: none) */
.qu-overlay .inline-embed-editor:not(.editing) .embed-thumbnail-upload,
.qu-overlay .inline-embed-editor:not(.editing) .embed-image-upload,
.qu-overlay .inline-embed-editor:not(.editing) .author-icon-upload,
.qu-overlay .inline-embed-editor:not(.editing) .footer-icon-upload {
    pointer-events: auto;
    cursor: pointer;
}
/* display:none am File-Input verhindert jeglichen Klick; nur im Bearbeitungsmodus als Overlay (embeds.css position/opacity) */
#qu-inline-embed.inline-embed-editor:not(.editing) .qu-embed-file-input,
#qu-inline-embed.inline-embed-editor:not(.editing) input[type='file'] {
    display: none !important;
}
#qu-inline-embed.inline-embed-editor.editing .qu-embed-file-input,
#qu-inline-embed.inline-embed-editor.editing input[type='file'] {
    display: block !important;
}
.qu-overlay .qu-embed-timestamp-preview {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.35rem;
    font-size: 0.75rem;
    color: #a3a6aa;
    text-align: right;
}
.qu-overlay #quColorBar.embed-color-bar {
    min-height: 10px;
    border-radius: 4px 4px 0 0;
}
.qu-overlay .embed-title-preview.qu-sync-from-right {
    color: #00aff4;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
}
.qu-overlay .embed-description-preview.qu-sync-from-right {
    color: #dcddde;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    white-space: normal;
    word-wrap: break-word;
}
/* Großes Bild über volle Breite der Embed-Vorschau (wie Discord) */
.qu-overlay .embed-image-upload.has-image {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
}
.qu-overlay .embed-image-upload.has-image img {
    width: 100%;
    max-width: 100%;
}
@media (max-width: 900px) {
    .qu-embed-main-row {
        grid-template-columns: 1fr;
    }
    .qu-preview-col {
        border-right: none;
        max-height: none;
    }
    .qu-right-col {
        max-height: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
}