/* --- Music Tab Custom Styles --- */
.music-dropdown {
    background: rgba(40, 30, 70, 0.85);
    border: 2px solid var(--primary);
    border-radius: 14px;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(147, 112, 219, 0.10);
    transition: border-color 0.18s, box-shadow 0.18s;
    padding: 0.9rem 3.5rem 0.9rem 1.25rem;
    margin-bottom: 0.5rem;
}

.music-dropdown:focus,
.music-dropdown:hover {
    border-color: var(--light-blue);
    box-shadow: 0 0 0 3px rgba(0, 206, 209, 0.13);
    background: transparent;
}

.music-slider {
    width: 100%;
    max-width: 500px;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    background: linear-gradient(90deg, rgba(147, 112, 219, 0.25), rgba(0, 206, 209, 0.25));
    border-radius: 10px;
    outline: none;
    margin: 0;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
    display: block;
}

.music-volume-wrapper {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.75rem;
}

.music-volume-display {
    min-width: 45px;
    text-align: right;
    font-weight: 700;
    color: #00CED1;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.music-slider:hover {
    background: linear-gradient(90deg, rgba(147, 112, 219, 0.35), rgba(0, 206, 209, 0.35));
    box-shadow: 0 0 12px rgba(147, 112, 219, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
.music-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00CED1, #9370DB);
    box-shadow: 0 0 16px rgba(0, 206, 209, 0.7), 0 0 8px rgba(147, 112, 219, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.music-slider:focus::-webkit-slider-thumb, .music-slider:hover::-webkit-slider-thumb {
    box-shadow: 0 0 28px rgba(0, 206, 209, 0.95), 0 0 14px rgba(147, 112, 219, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 1);
}
.music-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00CED1, #9370DB);
    box-shadow: 0 0 16px rgba(0, 206, 209, 0.7), 0 0 8px rgba(147, 112, 219, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.music-slider:focus::-moz-range-thumb, .music-slider:hover::-moz-range-thumb {
    box-shadow: 0 0 28px rgba(0, 206, 209, 0.95), 0 0 14px rgba(147, 112, 219, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 1);
}
.music-slider::-ms-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00CED1, #9370DB);
    box-shadow: 0 0 16px rgba(0, 206, 209, 0.7), 0 0 8px rgba(147, 112, 219, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.music-slider:focus::-ms-thumb, .music-slider:hover::-ms-thumb {
    box-shadow: 0 0 28px rgba(0, 206, 209, 0.95), 0 0 14px rgba(147, 112, 219, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 1);
}
.music-slider::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(90deg, rgba(0, 206, 209, 0.6), rgba(147, 112, 219, 0.6));
    border-radius: 10px;
}
.music-slider::-moz-range-track {
    height: 8px;
    background: linear-gradient(90deg, rgba(0, 206, 209, 0.6), rgba(147, 112, 219, 0.6));
    border-radius: 10px;
    border: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
.music-slider::-moz-range-progress {
    background: linear-gradient(90deg, #00CED1, #9370DB);
    height: 8px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 206, 209, 0.4);
}
.music-slider::-ms-fill-lower {
    background: linear-gradient(90deg, #00CED1, #9370DB);
    border-radius: 10px;
}
.music-slider::-ms-fill-upper {
    background: linear-gradient(90deg, rgba(0, 206, 209, 0.3), rgba(147, 112, 219, 0.3));
    border-radius: 10px;
}
.music-slider:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 206, 209, 0.3);
}
.music-slider:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Dashboard Specific Styles */

/* Base Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark, #7c5fd3));
    color: white;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.3), 0 0 20px rgba(147, 112, 219, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #a88be6, var(--primary));
    box-shadow: 0 0 25px rgba(147, 112, 219, 0.6), 0 0 45px rgba(0, 206, 209, 0.4);
}

.btn-secondary {
    background: var(--card-bg, #2a2a4a);
    color: var(--text, #ffffff);
    border: 1px solid var(--border, #3a3a6a);
}

.btn-secondary:hover {
    background: var(--border, #3a3a6a);
    border-color: var(--primary, #9370DB);
}

/* GIF Mode Buttons */
.gif-mode-btn {
    position: relative;
    padding: 10px 12px;
    transition: all 0.3s ease;
}

.gif-mode-btn.active {
    background: linear-gradient(135deg, #9370DB, #7B68EE);
    border-color: #9370DB;
    color: white;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.3);
}

.gif-mode-btn.active:hover {
    background: linear-gradient(135deg, #7B68EE, #9370DB);
    border-color: #7B68EE;
}

/* Performance Optimizations */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* FIX: Prevent double scrollbars - only body should scroll */
html {
    overflow-x: hidden;
    overflow-y: auto;
    filter: contrast(1.08) saturate(1.08) brightness(1.015);
}

body {
    overflow-x: hidden;
    overflow-y: visible;
}

/* Navbar */
.navbar {
    background: rgba(10, 12, 18, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    animation: slideDown 0.4s ease;
    will-change: transform;
    transform: translateZ(0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

@keyframes slideDown {
    from {
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(147, 112, 219, 0.3), 0 0 40px rgba(147, 112, 219, 0.15);
    }
    50% {
        box-shadow: 0 0 30px rgba(147, 112, 219, 0.5), 0 0 60px rgba(147, 112, 219, 0.25);
    }
}

.nav-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(147, 112, 219, 0.1);
    border: 1px solid rgba(147, 112, 219, 0.3);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.back-btn:hover {
    background: rgba(147, 112, 219, 0.15);
    border-color: rgba(147, 112, 219, 0.5);
    box-shadow: 0 4px 12px rgba(147, 112, 219, 0.2);
}

.server-info {
    display: none;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 5px 10px 5px 5px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.15s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: visible;
    height: auto;
    max-width: fit-content;
}

.server-info::before {
    content: none;
}

.server-info::after {
    content: none;
}

.server-info:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
}

.server-info:active {
    transform: translateY(0);
}

.server-icon-nav {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: rgba(147, 112, 219, 0.1);
    object-fit: cover;
    flex-shrink: 0;
}

/* Server info text handled inline in markup */

.server-info h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.2;
}

.server-info-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    opacity: 0.35;
    flex-shrink: 0;
    margin-left: 2px;
    transition: opacity 0.15s ease;
}

.server-info:hover .server-info-hamburger {
    opacity: 0.6;
}

/* Tier badge in navbar - smaller styling */
.server-info .tier-badge {
    padding: 0.2rem 0.45rem !important;
    font-size: 0.6rem !important;
    border-radius: 6px !important;
    vertical-align: middle;
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

.nav-brand {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 0.2px;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: var(--text);
    background: rgba(30, 36, 56, 0.7);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-btn:hover {
    background: rgba(45, 55, 88, 0.85);
    border-color: rgba(147, 112, 219, 0.45);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.4);
    transform: translateY(-1px);
}

.nav-btn-primary {
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.9), rgba(0, 206, 209, 0.75));
    border-color: transparent;
    color: white;
}

.nav-btn-primary:hover {
    background: linear-gradient(135deg, rgba(147, 112, 219, 1), rgba(0, 206, 209, 0.9));
}

.nav-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(30, 41, 59, 0.6);
    color: #cbd5f5;
}

.nav-pill--success {
    background: rgba(16, 185, 129, 0.14);
    color: #8ef5b6;
    border-color: rgba(16, 185, 129, 0.45);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    transition: opacity 0.15s ease;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.user-avatar:hover {
    opacity: 0.85;
}

.user-avatar::after {
    content: attr(data-user-id);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--text);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0s;
    z-index: 1000;
}

.user-avatar:hover::after {
    opacity: 1;
}

.user-name {
    font-weight: 500;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
}

.logout-btn {
    padding: 0.5rem 1.5rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s linear, border-color 0.15s linear;
}

.logout-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* Profile Dropdown */
.profile-dropdown {
    position: relative;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.profile-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.profile-btn svg {
    transition: transform 0.2s ease;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.profile-btn.active svg {
    transform: rotate(180deg);
}

.profile-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 280px;
    background: rgba(10, 11, 18, 0.94);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.18s ease,
                transform 0.18s ease,
                visibility 0.18s;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.03);
    z-index: 1000;
    overflow: hidden;
}

.profile-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Profile menu header */
.profile-menu-header {
    padding: 1rem 1rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-menu-header-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.profile-menu-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    flex-shrink: 0;
}

.profile-menu-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.profile-menu-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-menu-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-block;
    width: fit-content;
    letter-spacing: 0.3px;
}

/* Mini stats row */
.profile-menu-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}

.profile-menu-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    flex: 1;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.profile-menu-stat svg {
    color: var(--primary);
    opacity: 0.85;
    flex-shrink: 0;
}

.profile-menu-stat span:not(.profile-menu-stat-label) {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text);
}

.profile-menu-stat-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    font-weight: 500;
}

.profile-menu-stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.07);
    flex-shrink: 0;
}

/* Section labels */
.profile-menu-section-label {
    padding: 0.5rem 1.1rem 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
    opacity: 0.6;
}

/* Divider */
.profile-menu-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0.3rem 0;
}

/* Menu items */
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 1.1rem;
    background: transparent;
    border: none;
    color: var(--text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    font-weight: 500;
    font-size: 0.88rem;
    box-sizing: border-box;
    font-family: inherit;
}

.profile-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.profile-menu-item:hover .menu-item-icon {
    color: var(--primary);
}

.menu-item-icon {
    flex-shrink: 0;
    color: var(--text-dim);
    transition: color 0.12s ease;
}

/* Toggle items */
.profile-menu-toggle-item {
    justify-content: space-between;
    cursor: default;
}

.profile-menu-toggle-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.menu-toggle-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
}

/* Compact inline toggle for menu */
.menu-toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

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

.menu-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    transition: background 0.2s ease, border-color 0.2s ease;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.menu-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    transition: left 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.menu-toggle-switch input:checked + .menu-toggle-slider {
    background: #3b82f6;
    border-color: #3b82f6;
}

.menu-toggle-switch input:checked + .menu-toggle-slider::before {
    left: 21px;
    transform: translateY(-50%);
}

/* Logout item */
.profile-menu-item.logout-item {
    color: #f87171;
    margin-bottom: 0.25rem;
}

.profile-menu-item.logout-item:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

.profile-menu-item.logout-item .menu-item-icon {
    color: #f87171;
}

/* Responsive: ensure menu doesn't overflow small screens */
@media (max-width: 480px) {
    .profile-menu {
        min-width: calc(100vw - 2rem);
        right: -0.5rem;
    }
}

/* Prevent clipping on short/landscape viewports */
@media (max-height: 600px) {
    .profile-menu {
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: rgba(26, 26, 46, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    animation: slideUp 0.25s ease;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 112, 219, 0.5) rgba(255, 255, 255, 0.05);
}

/* Styled scrollbars for modal (WebKit browsers) */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(147, 112, 219, 0.5);
    border-radius: 10px;
    transition: background 0.15s;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(147, 112, 219, 0.7);
}

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

.modal-header h2 {
    margin: 0;
    color: var(--primary);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.12rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.modal-close:hover {
    color: var(--error);
}

.modal-body {
    padding: 2rem;
}

.profile-stats-section h3 {
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.stats-grid-mini {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.stat-card-mini {
    background: rgba(26, 26, 46, 0.7);
    border: 2px solid rgba(147, 112, 219, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.stat-card-mini:hover {
    border-color: rgba(147, 112, 219, 0.6);
    box-shadow: 0 6px 16px rgba(147, 112, 219, 0.3);
}

.stat-card-mini .stat-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
}

.stat-card-mini .stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.stat-card-mini .stat-label {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.per-server-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.server-stat-card {
    background: rgba(26, 26, 46, 0.7);
    border: 2px solid rgba(147, 112, 219, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.server-stat-card:hover {
    border-color: rgba(147, 112, 219, 0.6);
    box-shadow: 0 6px 16px rgba(147, 112, 219, 0.3);
}

.server-stat-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.server-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--primary);
}

.server-stat-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
}

.server-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
}

.server-stat-item {
    text-align: center;
}

.server-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--light-blue);
    margin-bottom: 0.25rem;
}

.server-stat-label {
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* Dashboard Container */
.dashboard-container {
    width: 100%;
    max-width: 100vw;
    margin-left: 0;
    margin-top: 60px;
    padding: 3rem;
    position: relative;
    z-index: 20;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    flex: 1 0 auto;
    min-height: calc(100vh - 60px);
    overflow: visible;
    isolation: isolate;
}

/* Adjust when sidebar is visible (after server selected) */
body.server-selected .dashboard-container {
    margin-left: 240px;
    width: calc(100vw - 240px);
    max-width: calc(100vw - 240px);
}

/* Adjust width when sidebar is collapsed */
.dashboard-container.collapsed {
    margin-left: 0;
    width: 100vw;
    max-width: 100vw;
}

/* ===== REDESIGNED SERVER SELECTION PAGE - CLEAN LAYOUT ===== */

.server-selection-redesigned {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 0;
    animation: fadeIn 0.5s ease-out;
    width: 100%;
}

/* Hero Section */
.server-hero-section {
    background: linear-gradient(135deg, rgba(22, 24, 38, 0.9) 0%, rgba(18, 20, 32, 0.85) 100%);
    border: 1px solid rgba(147, 112, 219, 0.25);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 20px 50px rgba(147, 112, 219, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem;
    animation: heroFloat 6s ease-in-out infinite, fadeIn 0.5s ease-out;
}

@keyframes heroFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.server-hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 206, 209, 0.08) 0%, transparent 70%);
    pointer-events: none;
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.hero-left {
    flex: 1;
    position: relative;
    z-index: 1;
}

.server-hero-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.hero-username {
    background: linear-gradient(135deg, var(--primary) 0%, var(--light-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.server-hero-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

.hero-stats-row {
    display: flex;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.hero-stat {
    background: rgba(12, 14, 22, 0.5);
    border: 1px solid rgba(147, 112, 219, 0.2);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    min-width: 90px;
}

.hero-stat:hover {
    border-color: rgba(147, 112, 219, 0.4);
    background: rgba(18, 20, 32, 0.6);
}

.stat-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--light-blue);
    margin-bottom: 0.3rem;
    animation: countUp 0.8s ease-out;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Quick Actions Section */
.quick-actions-section {
    animation: fadeIn 0.5s ease-out 0.1s backwards;
}

.action-card-large {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.15) 0%, rgba(0, 206, 209, 0.1) 100%);
    border: 1.5px solid rgba(147, 112, 219, 0.3);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.action-card-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.action-card-large:hover::before {
    left: 100%;
}

.action-card-large:hover {
    border-color: rgba(147, 112, 219, 0.5);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.22) 0%, rgba(0, 206, 209, 0.15) 100%);
    box-shadow: 0 16px 50px rgba(147, 112, 219, 0.2);
    transform: translateY(-4px);
}

.action-icon {
    font-size: 3.5rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.action-text {
    flex: 1;
    position: relative;
    z-index: 1;
}

.action-text h3 {
    margin: 0 0 0.4rem 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
}

.action-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
}

.action-arrow {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.action-card-large:hover .action-arrow {
    color: white;
    transform: translateX(6px);
}

/* Servers Main Section */
.servers-main-section {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    animation: fadeIn 0.5s ease-out 0.2s backwards;
}

.servers-subsection {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(147, 112, 219, 0.1);
}

.subsection-header > div {
    flex: 1;
}

.subsection-header > div p {
    text-align: right;
}

.subsection-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    margin: 0;
    line-height: 1.2;
    position: relative;
    display: inline-block;
    letter-spacing: -0.02em;
}

.subsection-header h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--light-blue));
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.servers-subsection:hover .subsection-header h2::after {
    width: 100%;
}

.subsection-header p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 0.95rem;
}

.subsection-header > div {
    flex: 1;
}

.add-server-btn-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.3) 0%, rgba(0, 206, 209, 0.2) 100%);
    border: 1.5px solid rgba(147, 112, 219, 0.4);
    border-radius: 11px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.add-server-btn-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.add-server-btn-header:hover {
    border-color: rgba(147, 112, 219, 0.6);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.4) 0%, rgba(0, 206, 209, 0.3) 100%);
    box-shadow: 0 8px 24px rgba(147, 112, 219, 0.3),
                0 0 30px rgba(0, 206, 209, 0.2);
    transform: translateY(-2px);
}

.add-server-btn-header:hover::before {
    width: 300px;
    height: 300px;
}

/* Server Grid */
.server-grid-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2.5rem;
    width: 100%;
    padding: 0.5rem;
}

.server-card-item {
    background: linear-gradient(135deg, rgba(22, 24, 38, 0.5) 0%, rgba(18, 20, 32, 0.6) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(147, 112, 219, 0.2);
    border-radius: 24px;
    padding: 2rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: 0 15px 40px rgba(10, 12, 20, 0.5), 
                inset 0 1px 2px rgba(255, 255, 255, 0.08);
    animation: cardSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    isolation: isolate;
}

.server-card-item:nth-child(1) { animation-delay: 0s; }
.server-card-item:nth-child(2) { animation-delay: 0.08s; }
.server-card-item:nth-child(3) { animation-delay: 0.16s; }
.server-card-item:nth-child(4) { animation-delay: 0.24s; }
.server-card-item:nth-child(5) { animation-delay: 0.32s; }
.server-card-item:nth-child(6) { animation-delay: 0.4s; }
.server-card-item:nth-child(7) { animation-delay: 0.48s; }
.server-card-item:nth-child(8) { animation-delay: 0.56s; }
.server-card-item:nth-child(9) { animation-delay: 0.64s; }
.server-card-item:nth-child(10) { animation-delay: 0.72s; }

.server-card-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 30%,
        rgba(147, 112, 219, 1) 35%,
        rgba(0, 206, 209, 1) 50%,
        rgba(147, 112, 219, 1) 65%,
        transparent 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.server-card-item::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: none;
    opacity: 0;
    transform: rotate(0deg);
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.server-card-item:hover {
    border-color: rgba(147, 112, 219, 0.3);
    box-shadow: 0 20px 60px rgba(147, 112, 219, 0.15),
                0 0 30px rgba(0, 206, 209, 0.08),
                inset 0 2px 3px rgba(255, 255, 255, 0.15);
}

.server-card-item:hover::before {
    animation: shineTravel 12s linear infinite;
    opacity: 1;
}

.server-card-item:hover::after {
    opacity: 0;
}
.server-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.server-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    border: 3px solid rgba(147, 112, 219, 0.3);
    flex-shrink: 0;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    position: relative;
}

.server-card-item:hover .server-card-icon {
    border-color: rgba(147, 112, 219, 0.8);
    box-shadow: 0 0 30px rgba(147, 112, 219, 0.7),
                0 0 60px rgba(0, 206, 209, 0.4),
                0 12px 24px rgba(0, 0, 0, 0.5);
    transform: scale(1.15) rotate(-5deg);
    filter: brightness(1.2);
}

.server-card-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.server-card-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: white;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease;
    letter-spacing: -0.01em;
}

.server-card-item:hover .server-card-name {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 25px rgba(147, 112, 219, 0.8),
                 0 0 40px rgba(0, 206, 209, 0.5);
    transform: translateX(3px);
}

.server-card-members {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.4rem 0 0 0;
    transition: color 0.15s ease, text-shadow 0.15s ease;
    font-weight: 500;
}

.server-card-item:hover .server-card-members {
    color: rgba(0, 206, 209, 1);
    text-shadow: 0 0 8px rgba(0, 206, 209, 0.3);
}

.server-card-action {
    padding: 1rem 1.6rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.25), rgba(0, 206, 209, 0.15));
    border: 2px solid rgba(147, 112, 219, 0.35);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.server-card-action::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.5), rgba(0, 206, 209, 0.4));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.server-card-action::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.server-card-item:hover .server-card-action {
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.6), rgba(0, 206, 209, 0.4));
    border-color: rgba(147, 112, 219, 0.8);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(147, 112, 219, 0.4),
                0 0 40px rgba(0, 206, 209, 0.3);
}

.server-card-action:hover::before {
    opacity: 1;
}

.server-card-action:active::after {
    width: 400px;
    height: 400px;
    transition: width 0s, height 0s;
}

.empty-state {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(18, 20, 32, 0.6) 0%, rgba(22, 24, 38, 0.7) 100%);
    border: 2px dashed rgba(147, 112, 219, 0.25);
    border-radius: 18px;
    padding: 3.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.empty-state::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(147, 112, 219, 0.08),
        transparent
    );
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

.empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    animation: bounce 2s infinite;
    display: inline-block;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.empty-state h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem 0;
    position: relative;
    z-index: 1;
}

.empty-state p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

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

/* Info Cards Section */
.info-cards-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.8rem;
    margin-top: 1rem;
    animation: fadeIn 0.5s ease-out 0.3s backwards;
}

.info-card {
    background: linear-gradient(135deg, rgba(22, 24, 38, 0.85) 0%, rgba(18, 20, 32, 0.8) 100%);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 16px;
    padding: 1.8rem;
    box-shadow: 0 8px 24px rgba(10, 12, 20, 0.25);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    position: relative;
    overflow: hidden;
    animation: slideUpFade 0.5s ease-out backwards;
}

.info-card:nth-child(1) { animation-delay: 0.1s; }
.info-card:nth-child(2) { animation-delay: 0.2s; }
.info-card:nth-child(3) { animation-delay: 0.3s; }

.info-card:hover {
    border-color: rgba(147, 112, 219, 0.2);
}

.premium-card {
    position: relative;
    overflow: hidden;
}

.premium-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(147, 112, 219, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.premium-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.08) 50%,
        transparent 100%
    );
    animation: shimmer 5s linear infinite;
}

.card-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    background: rgba(147, 112, 219, 0.18);
    border: 1px solid rgba(147, 112, 219, 0.35);
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #a78bfa;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.info-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.7rem 0;
    position: relative;
    z-index: 1;
}

.info-card p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.2rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

.features-list {
    list-style: none;
    margin: 1.2rem 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.features-list li {
    color: rgba(255, 255, 255, 0.75);
    padding: 0.4rem 0;
    font-size: 0.88rem;
}

.card-btn {
    width: 100%;
    padding: 0.8rem 1rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.3) 0%, rgba(0, 206, 209, 0.15) 100%);
    border: 1.5px solid rgba(147, 112, 219, 0.4);
    border-radius: 10px;
    color: white;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
    text-align: center;
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.card-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.5), rgba(0, 206, 209, 0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-btn:hover {
    border-color: rgba(147, 112, 219, 0.7);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.4) 0%, rgba(0, 206, 209, 0.25) 100%);
    box-shadow: 0 8px 24px rgba(147, 112, 219, 0.35),
                0 0 30px rgba(0, 206, 209, 0.2);
}

.card-btn:hover::before {
    opacity: 1;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    position: relative;
    z-index: 1;
}

.about-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem;
    background: rgba(12, 14, 22, 0.5);
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s ease;
}

.about-item:hover {
    background: rgba(18, 20, 32, 0.6);
}

.about-emoji {
    font-size: 1.4rem;
}

.about-item span:last-child {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.resource-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.88rem;
    position: relative;
    z-index: 1;
}

.resource-link:hover {
    color: white;
    padding-left: 0.3rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dashboard-container {
        margin-left: 0;
        padding: 2rem 1.5rem;
        width: 100%;
        max-width: 100vw;
        min-height: 0;
    }
    
    .server-hero-section {
        flex-direction: column;
        padding: 2rem;
        text-align: center;
        gap: 2rem;
        border-radius: 20px;
    }
    
    .server-hero-title {
        font-size: 1.8rem;
    }
    
    .hero-stats-row {
        justify-content: center;
        width: 100%;
    }
    
    .action-card-large {
        flex-direction: column;
        text-align: center;
        padding: 1.75rem 1.5rem;
        gap: 1rem;
    }
    
    .action-text h3 {
        font-size: 1.1rem;
    }
    
    .action-text p {
        font-size: 0.85rem;
    }
    
    .subsection-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .add-server-btn-header {
        width: 100%;
        justify-content: center;
    }
    
    .server-grid-main {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.5rem;
    }
    
    .server-card-item {
        padding: 1.5rem;
    }
    
    .info-cards-section {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .about-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.server-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 206, 209, 0.08) 0%, transparent 70%);
    pointer-events: none;
    animation: float 6s ease-in-out infinite;
}

.server-hero-section::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(147, 112, 219, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.server-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
}

.server-hero-text {
    max-width: 600px;
}

.server-hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: white;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.hero-username {
    background: linear-gradient(135deg, var(--primary) 0%, var(--light-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.server-hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.6;
}

.server-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    min-width: 280px;
}

.hero-stat-card {
    background: rgba(12, 14, 22, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 14px;
    padding: 1.25rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.hero-stat-card:hover {
    border-color: rgba(147, 112, 219, 0.3);
    background: rgba(18, 20, 32, 0.8);
}

.hero-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.4rem;
}

.hero-stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Quick Actions */
.server-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    animation: fadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
    opacity: 0;
}

.action-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(0, 206, 209, 0.1) 100%);
    border: 2px solid rgba(34, 197, 94, 0.3);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.action-card:hover::before {
    left: 100%;
}

.action-card:hover {
    border-color: rgba(34, 197, 94, 0.6);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(0, 206, 209, 0.15) 100%);
    box-shadow: 0 12px 40px rgba(34, 197, 94, 0.25);
    transform: translateY(-4px);
}

.action-card-primary {
    border-color: rgba(147, 112, 219, 0.3);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.15) 0%, rgba(0, 206, 209, 0.1) 100%);
}

.action-card-primary:hover {
    border-color: rgba(147, 112, 219, 0.6);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.25) 0%, rgba(0, 206, 209, 0.15) 100%);
    box-shadow: 0 12px 40px rgba(147, 112, 219, 0.2);
}

.action-card-icon {
    font-size: 3rem;
    flex-shrink: 0;
}

.action-card-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.action-card-content h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.action-card-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
}

.action-card-arrow {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.action-card:hover .action-card-arrow {
    color: white;
    transform: translateX(4px);
}

/* Content Grid with Sidebar */
.server-content-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
}

.server-section {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.section-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.section-header p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 0.95rem;
}

.add-server-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.3) 0%, rgba(0, 206, 209, 0.2) 100%);
    border: 1.5px solid rgba(147, 112, 219, 0.4);
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.add-server-btn:hover {
    border-color: rgba(147, 112, 219, 0.7);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.4) 0%, rgba(0, 206, 209, 0.3) 100%);
    box-shadow: 0 8px 24px rgba(147, 112, 219, 0.2);
    transform: translateY(-2px);
}

/* Server Grid */
.server-grid-redesigned {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    animation: fadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
    opacity: 0;
}

.server-card-item {
    background: linear-gradient(135deg, rgba(22, 24, 38, 0.8) 0%, rgba(18, 20, 32, 0.75) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(10, 12, 20, 0.3);
    isolation: isolate;
}

.server-card-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 30%,
        rgba(229, 231, 235, 1) 35%,
        rgba(148, 163, 184, 1) 50%,
        rgba(229, 231, 235, 1) 65%,
        transparent 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.server-card-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: radial-gradient(circle at 68% 68%, rgba(229, 231, 235, 0.14) 0%, rgba(148, 163, 184, 0.1) 32%, rgba(15, 23, 42, 0) 72%);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
    z-index: 0;
}

.server-card-item:hover {
    border-color: rgba(226, 232, 240, 0.45);
    box-shadow: 0 16px 50px rgba(226, 232, 240, 0.18), 0 0 40px rgba(148, 163, 184, 0.16);
    transform: translateY(-6px);
}

.server-card-item:hover::before {
    animation: shineTravel 3.6s linear infinite;
    opacity: 1;
}

.server-card-item:hover::after {
    opacity: 1;
}

.server-card-item.server-card-owner:hover {
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 16px 52px rgba(251, 191, 36, 0.22), 0 0 42px rgba(245, 158, 11, 0.22);
}

.server-card-item.server-card-owner:hover::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 30%,
        rgba(253, 224, 71, 1) 35%,
        rgba(251, 191, 36, 1) 50%,
        rgba(245, 158, 11, 1) 65%,
        transparent 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shineTravel 3.6s linear infinite;
    opacity: 1;
}

.server-card-item.server-card-owner:hover::after {
    background: radial-gradient(circle at 68% 68%, rgba(253, 224, 71, 0.18) 0%, rgba(251, 191, 36, 0.12) 32%, rgba(15, 23, 42, 0) 72%);
}

.server-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.server-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: 2px solid rgba(147, 112, 219, 0.2);
    flex-shrink: 0;
    object-fit: cover;
    transition: all 0.3s ease;
}

.server-card-item:hover .server-card-icon {
    border-color: rgba(147, 112, 219, 0.5);
    box-shadow: 0 0 20px rgba(147, 112, 219, 0.3);
    transform: scale(1.08);
}

.server-card-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.server-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.server-card-members {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.25rem 0 0 0;
}

.server-card-action {
    padding: 0.75rem 1.25rem;
    background: rgba(147, 112, 219, 0.2);
    border: 1px solid rgba(147, 112, 219, 0.3);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    position: relative;
    z-index: 1;
}

.server-card-item:hover .server-card-action {
    background: rgba(147, 112, 219, 0.4);
    border-color: rgba(147, 112, 219, 0.6);
    color: white;
}

.no-servers-message {
    grid-column: 1 / -1;
    background: rgba(18, 20, 32, 0.8);
    border: 2px dashed rgba(147, 112, 219, 0.3);
    border-radius: 18px;
    padding: 4rem 2rem;
    text-align: center;
}

.no-servers-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.no-servers-message h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem 0;
}

.no-servers-message p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1.5rem 0;
    font-size: 1rem;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.3) 0%, rgba(0, 206, 209, 0.2) 100%);
    border: 1.5px solid rgba(147, 112, 219, 0.4);
    border-radius: 12px;
    color: white;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    border-color: rgba(147, 112, 219, 0.7);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.4) 0%, rgba(0, 206, 209, 0.3) 100%);
    box-shadow: 0 8px 24px rgba(147, 112, 219, 0.2);
    transform: translateY(-2px);
}

/* Sidebar */
.server-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar-card {
    background: linear-gradient(135deg, rgba(22, 24, 38, 0.85) 0%, rgba(18, 20, 32, 0.8) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(10, 12, 20, 0.3);
    transition: all 0.3s ease;
    animation: fadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
    opacity: 0;
}

.sidebar-card:hover {
    border-color: rgba(147, 112, 219, 0.3);
    box-shadow: 0 16px 50px rgba(147, 112, 219, 0.15);
    transform: translateY(-4px);
}

/* Premium Promo Card */
.premium-promo-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(22, 24, 38, 0.85) 0%, rgba(18, 20, 32, 0.8) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(10, 12, 20, 0.3);
    transition: all 0.3s ease;
    animation: fadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
    opacity: 0;
}

.premium-promo-card:hover {
    border-color: rgba(147, 112, 219, 0.3);
    box-shadow: 0 16px 50px rgba(147, 112, 219, 0.15);
    transform: translateY(-4px);
}

.about-card:hover {
    border-color: rgba(147, 112, 219, 0.3);
    box-shadow: 0 16px 50px rgba(147, 112, 219, 0.15);
    transform: translateY(-4px);
}

.quick-links-card:hover {
    border-color: rgba(147, 112, 219, 0.3);
    box-shadow: 0 16px 50px rgba(147, 112, 219, 0.15);
    transform: translateY(-4px);
}

.premium-badge {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    background: rgba(147, 112, 219, 0.2);
    border: 1px solid rgba(147, 112, 219, 0.4);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #a78bfa;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.premium-promo-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem 0;
    position: relative;
    z-index: 1;
}

.premium-promo-card > p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

.premium-features {
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.premium-features li {
    color: rgba(255, 255, 255, 0.75);
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

.btn-premium {
    width: 100%;
    padding: 0.8rem 1rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.4) 0%, rgba(0, 206, 209, 0.2) 100%);
    border: 1.5px solid rgba(147, 112, 219, 0.5);
    border-radius: 10px;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    text-align: center;
    text-decoration: none;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

.btn-premium:hover {
    border-color: rgba(147, 112, 219, 0.8);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.5) 0%, rgba(0, 206, 209, 0.3) 100%);
    box-shadow: 0 8px 24px rgba(147, 112, 219, 0.3);
    transform: translateY(-2px);
}

/* About Card */
.about-card {
    display: flex !important;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(22, 24, 38, 0.85) 0%, rgba(18, 20, 32, 0.8) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(10, 12, 20, 0.3);
    transition: all 0.3s ease;
    animation: fadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
    opacity: 0;
}

.about-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.75rem 0;
}

.about-card p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.about-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem;
    background: rgba(12, 14, 22, 0.6);
    border-radius: 10px;
    text-align: center;
}

.feature-icon {
    font-size: 1.5rem;
}

.feature-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

/* Quick Links Card */
.quick-links-card {
    display: flex !important;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(22, 24, 38, 0.85) 0%, rgba(18, 20, 32, 0.8) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(10, 12, 20, 0.3);
    transition: all 0.3s ease;
    animation: fadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
    opacity: 0;
}

.quick-links-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin: 0 0 1rem 0;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0;
    padding-left: 0;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    position: relative;
}

.quick-link:hover {
    color: white;
    padding-left: 0.4rem;
}

.quick-link::before {
    content: '';
    position: absolute;
    left: -8px;
    width: 3px;
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.quick-link:hover::before {
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .server-content-grid {
        grid-template-columns: 1fr;
    }
    
    .server-sidebar {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
    }
    
    .premium-promo-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .server-hero-section {
        padding: 2rem;
    }
    
    .server-hero-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .server-hero-title {
        font-size: 2rem;
    }
    
    .server-hero-subtitle {
        font-size: 1rem;
    }
    
    .server-hero-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        min-width: auto;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .add-server-btn {
        width: 100%;
        justify-content: center;
    }
    
    .server-grid-redesigned {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1rem;
    }
    
    .server-sidebar {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .about-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dashboard-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.8rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--primary) 0%, var(--light-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.subtitle {
    color: var(--text-dim);
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 3rem;
    line-height: 1.6;
    letter-spacing: 0.3px;
}

/* Server Grid */
.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
    margin-top: 2.5rem;
    padding: 0 0.5rem;
}

.server-card {
    background: linear-gradient(135deg, rgba(32, 32, 52, 0.95) 0%, rgba(26, 26, 46, 0.9) 100%);
    border: 1.5px solid rgba(147, 112, 219, 0.25);
    border-radius: 20px;
    padding: 2rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 30px rgba(147, 112, 219, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 140px;
    justify-content: space-between;
}

.server-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.2) 0%, rgba(0, 206, 209, 0.12) 100%);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity;
    pointer-events: none;
}

.server-card:hover {
    border-color: rgba(147, 112, 219, 0.35);
    background: linear-gradient(135deg, rgba(40, 40, 65, 0.96) 0%, rgba(32, 32, 52, 0.92) 100%);
}

.server-card:active {
    transform: none;
}

.server-card:hover::before {
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.server-card-content {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.server-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 2px solid rgba(147, 112, 219, 0.3);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: border-color, box-shadow, transform;
    flex-shrink: 0;
    object-fit: cover;
}

.server-card:hover .server-icon {
    border-color: rgba(147, 112, 219, 0.45);
    box-shadow: none;
    transform: none;
}

.server-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: white;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.custom-bot-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #8ef5b6;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.35);
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.18);
    white-space: nowrap;
}

.server-members {
    color: var(--text-dim);
    font-size: 0.875rem;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Configuration View */
.config-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    margin-top: 0;
    animation: fadeIn 0.5s ease-out;
    justify-content: flex-start;
    padding: 0;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(26, 26, 46, 0.7);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.back-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(147, 112, 219, 0.3);
}

.server-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 0;
    flex-shrink: 0;
}

.server-icon-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    box-shadow: 0 0 20px var(--glow);
}

.server-info h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.server-id {
    color: var(--text-dim);
}

/* Tabs - Sticky Navigation */
.tabs-wrapper {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Navigation wrapper with scroll buttons */
.tabs-navigation-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* View toggle button */
.tab-view-toggle {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(147, 112, 219, 0.1);
    border: 1px solid rgba(147, 112, 219, 0.3);
    border-radius: 10px;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    backdrop-filter: blur(10px);
}

.tab-view-toggle:hover {
    background: rgba(147, 112, 219, 0.2);
    border-color: var(--primary);
}

.tab-view-toggle:active {
    opacity: 0.8;
}

/* Scroll buttons */
.tab-scroll-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(147, 112, 219, 0.1);
    border: 1px solid rgba(147, 112, 219, 0.3);
    border-radius: 10px;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(10px);
}

.tab-scroll-btn.visible {
    opacity: 1;
    pointer-events: all;
}

.tab-scroll-btn:hover {
    background: rgba(147, 112, 219, 0.2);
    border-color: var(--primary);
}

.tab-scroll-btn:active {
    opacity: 0.8;
}

/* Tabs container with gradient fades */
.config-tabs-container {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.config-tabs-container::before,
.config-tabs-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.config-tabs-container::before {
    left: 0;
    background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
}

.config-tabs-container::after {
    right: 0;
    background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
}

.config-tabs-container.show-left-fade::before {
    opacity: 1;
}

.config-tabs-container.show-right-fade::after {
    opacity: 1;
}

.config-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding: 0.5rem 0;
}

/* Hide scrollbar on Chrome/Safari */
.config-tabs::-webkit-scrollbar {
    display: none;
}

/* Block/Grid view for tabs */
.config-tabs.block-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    overflow-x: visible;
    overflow-y: visible;
    border-bottom: none;
    padding: 1rem;
}

.config-tabs.block-view .tab-btn {
    padding: 1.5rem 1rem;
    border-radius: 12px;
    background: rgba(147, 112, 219, 0.05);
    border: 1px solid rgba(147, 112, 219, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    height: 100%;
    min-height: 80px;
}

.config-tabs.block-view .tab-btn::after {
    display: none;
}

.config-tabs.block-view .tab-btn::before {
    border-radius: 12px;
}

.config-tabs.block-view .tab-btn.active {
    background: rgba(147, 112, 219, 0.15);
    border-color: var(--primary);
    box-shadow: 0 4px 15px rgba(147, 112, 219, 0.3);
}

.config-tabs.block-view .tab-btn:hover {
    border-color: var(--light-blue);
    box-shadow: 0 6px 20px rgba(0, 206, 209, 0.2);
}

.tab-btn {
    padding: 1rem 2rem;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    flex-shrink: 0;
    flex-basis: auto;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--light-blue));
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform 0.15s ease;
    z-index: 1;
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    color: var(--primary);
    background: rgba(147, 112, 219, 0.1);
}

.tab-btn.active::after {
    transform: scaleX(1);
}


.config-content {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    max-height: none;
    height: auto;
    flex: 1;
    min-height: 0;
}

/* Tab Content */
.tab-content {
    display: none;
    animation: fadeInUp 0.3s ease-out;
    overflow: visible; /* Prevent double scrollbars in tabs */
    max-height: none; /* Remove height constraints */
}

.tab-content.active {
    display: block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Smooth scrolling optimization */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    filter: contrast(1.08) saturate(1.08) brightness(1.015);
}

/* Config Cards with Premium Animations */
.config-card {
    background: rgba(18, 20, 32, 0.7);
    border: 1px solid rgba(147, 112, 219, 0.2);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 1px rgba(147, 112, 219, 0.05);
}

.config-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 30%,
        rgba(147, 112, 219, 1) 35%,
        rgba(0, 206, 209, 1) 50%,
        rgba(147, 112, 219, 1) 65%,
        transparent 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.config-card:hover {
    border-color: rgba(147, 112, 219, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 1px rgba(147, 112, 219, 0.08);
}

.config-card:hover::before {
    opacity: 0;
}

@keyframes slidingBorder {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

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

.config-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 1) 0%, rgba(0, 206, 209, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Form Elements */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.875rem 1.125rem;
    background: rgba(26, 26, 46, 0.7);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    box-sizing: border-box;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%239370DB' d='M10 13L5 8h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    background-size: 20px;
    padding-right: 3.5rem;
    font-weight: 500;
    position: relative;
}

.form-group select:hover {
    border-color: var(--primary);
    background: rgba(26, 26, 46, 0.8);
}

.form-group select option {
    background: #1a1a2e;
    color: var(--text);
    padding: 1rem;
    font-weight: 500;
    border-radius: 8px;
}

.form-group select option:hover {
    background: rgba(147, 112, 219, 0.2);
}

.form-group select option:checked {
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.3), rgba(0, 206, 209, 0.3));
    color: white;
    font-weight: 600;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(26, 26, 46, 0.9);
    box-shadow: 0 0 0 3px rgba(147, 112, 219, 0.2);
}

.form-group input:hover,
.form-group textarea:hover {
    border-color: rgba(147, 112, 219, 0.5);
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 1rem;
    align-items: end;
}

/* XP Multiplier */
.xp-multiplier-container {
    text-align: center;
    padding: 2rem;
}

.multiplier-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.multiplier-value {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--light-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.multiplier-label {
    font-size: 2rem;
    color: var(--text-dim);
}

.multiplier-slider {
    width: 100%;
    max-width: 600px;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border-radius: 10px;
    outline: none;
    margin: 2rem auto;
    display: block;
    padding: 0 12px; /* Add padding for thumb clearance */
    box-sizing: border-box;
}

.multiplier-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, var(--primary), var(--light-blue));
    border-radius: 10px;
}

.multiplier-slider::-moz-range-track {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, var(--primary), var(--light-blue));
    border-radius: 10px;
}

.multiplier-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 12px var(--glow);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
    margin-top: -8px;
}

.multiplier-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 12px var(--glow);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
    border: none;
}

.multiplier-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 16px var(--glow);
}

.multiplier-slider::-moz-range-thumb:hover {
    box-shadow: 0 0 16px var(--glow);
}

.multiplier-labels {
    display: flex;
    justify-content: space-between;
    color: var(--text-dim);
    font-size: 0.9rem;
    max-width: 600px;
    margin: 0 auto;
}

.multiplier-info {
    margin-top: 2rem;
    color: var(--text-dim);
}

/* Rewards List */
.rewards-list {
    margin-top: 2rem;
}

.reward-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(26, 26, 46, 0.7);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    animation: fadeIn 0.25s ease-out;
}

.reward-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

.reward-info {
    display: flex;
    gap: 2rem;
}

.reward-level {
    font-weight: 600;
    color: var(--primary);
}

.delete-btn {
    padding: 0.5rem 1rem;
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid rgba(239, 68, 68, 0.4);
    border-radius: 10px;
    color: var(--error);
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s linear, border-color 0.15s linear, color 0.15s linear;
    position: relative;
    overflow: hidden;
}

.delete-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
    color: white;
}

.edit-btn {
    padding: 0.5rem 1rem;
    background: rgba(0, 206, 209, 0.15);
    border: 2px solid rgba(0, 206, 209, 0.4);
    border-radius: 10px;
    color: var(--light-blue);
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s linear, border-color 0.15s linear, color 0.15s linear;
    position: relative;
    overflow: hidden;
    margin-right: 0.5rem;
}

.edit-btn:hover {
    background: rgba(0, 206, 209, 0.3);
    border-color: rgba(0, 206, 209, 0.6);
    color: white;
}

/* Buttons */
.save-btn,
.add-btn {
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s linear, box-shadow 0.15s linear;
    position: relative;
    overflow: hidden;
}

.save-btn:hover,
.add-btn:hover {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.save-btn:active,
.add-btn:active {
    opacity: 0.8;
}

/* Discord Emoji Button */
.discord-emoji-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(79, 84, 92, 0.3);
    border: none;
    border-radius: 8px;
    color: #b9bbbe;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.discord-emoji-btn:hover {
    background: rgba(79, 84, 92, 0.5);
    color: #dcddde;
}

.discord-emoji-btn:active {
    background: rgba(79, 84, 92, 0.6);
}

.discord-emoji-btn svg {
    flex-shrink: 0;
}

/* Notifications */
.notification {
    position: fixed;
    top: 100px;
    right: 2rem;
    padding: 1.25rem 2.5rem;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(139, 92, 246, 0.4);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
    transform: translateX(400px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1000;
    font-weight: 500;
    color: white;
    opacity: 0;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification.success {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 15px 50px rgba(16, 185, 129, 0.4),
                0 5px 20px rgba(0, 0, 0, 0.3);
}

.notification.error {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 15px 50px rgba(239, 68, 68, 0.4),
                0 5px 20px rgba(0, 0, 0, 0.3);
}

.notification.info {
    border-color: rgba(147, 112, 219, 0.6);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.2), rgba(26, 26, 46, 0.95));
    box-shadow: 0 15px 50px rgba(147, 112, 219, 0.5),
                0 5px 20px rgba(0, 0, 0, 0.3);
}

.session-expired-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.session-expired-overlay.show {
    display: flex;
}

.session-expired-card {
    background: rgba(26, 26, 46, 0.98);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.15);
    animation: fadeInUp 0.35s ease;
}

.session-expired-icon {
    color: rgba(239, 68, 68, 0.85);
    margin-bottom: 1.25rem;
}

.session-expired-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.75rem 0;
}

.session-expired-message {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

.session-expired-btn {
    display: inline-block;
    padding: 0.85rem 2.5rem;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.session-expired-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.6);
}

/* Info Box */
.info-box {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.info-box ul {
    list-style: none;
    padding-left: 0;
}

.info-box li {
    padding: 0.5rem 0;
    color: var(--text-dim);
}

.info-box.premium-info {
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.15) 0%, rgba(0, 206, 209, 0.1) 100%);
    border: 2px solid rgba(147, 112, 219, 0.4);
}

/* Premium Feature Cards */
.premium-feature {
    position: relative;
    border: 2px solid rgba(147, 112, 219, 0.4) !important;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.7) 0%, rgba(26, 26, 46, 0.5) 100%) !important;
}

.premium-feature::before {
    background: radial-gradient(circle, rgba(147, 112, 219, 0.2) 0%, transparent 70%) !important;
}

.premium-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.3);
    z-index: 10;
}


.coming-soon {
    text-align: center;
    font-size: 1.5rem;
    color: var(--text-dim);
    padding: 2rem;
}

/* Custom Command */
.subtitle-text {
    color: var(--text-dim);
    margin-bottom: 2rem;
}

/* ===== UNIFIED TOGGLE SWITCHES ===== */
/* All toggles use the same blue style: 42×24px track, 18px thumb, #3b82f6 checked */

.toggle-label,
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    transform: translateZ(0);
    will-change: transform;
}

.toggle-label input[type="checkbox"],
.toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label .toggle-slider,
.toggle-switch .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(148, 163, 184, 0.25);
    transition: background 0.2s ease, border-color 0.2s ease;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.toggle-label .toggle-slider::before,
.toggle-switch .toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    transition: left 0.2s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider,
.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
    background: #3b82f6;
    border-color: #3b82f6;
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider::before,
.toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
    left: 21px;
    transform: translateY(-50%);
}

.toggle-label .toggle-slider:hover,
.toggle-switch .toggle-slider:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider:hover,
.toggle-switch input[type="checkbox"]:checked + .toggle-slider:hover {
    background: #2563eb;
}

.toggle-label input[type="checkbox"]:focus + .toggle-slider,
.toggle-switch input[type="checkbox"]:focus + .toggle-slider {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}


/* ===== MODERN RADIO BUTTON GROUPS ===== */
.radio-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.radio-option {
    position: relative;
}

.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-option label {
    display: block;
    padding: 0.5rem 1rem;
    border: 2px solid rgba(147, 112, 219, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.15s ease;
}

.radio-option input[type="radio"]:checked + label {
    background: rgba(147, 112, 219, 0.2);
    border-color: #9370DB;
    color: #9370DB;
}

.radio-option label:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(147, 112, 219, 0.5);
}

/* Mobile toggle improvements */
@media (max-width: 768px) {
    .toggle-label {
        margin-bottom: 1rem;
    }
    
    /* Make config cards more mobile-friendly */
    .config-card {
        padding: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .config-card h3 {
        font-size: 1.3rem !important;
    }
    
    .subtitle-text {
        font-size: 0.9rem !important;
    }
    
    /* Mobile-friendly select dropdowns - especially for logging tab */
    .form-group select,
    #logChannel {
        min-height: 48px !important; /* Larger touch target */
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 1rem 3.5rem 1rem 1.25rem !important;
        background-size: 24px !important; /* Larger arrow icon for mobile */
        background-position: right 1rem center !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        touch-action: manipulation; /* Improve touch responsiveness */
    }
    
    /* Ensure select options are readable on mobile */
    .form-group select option,
    #logChannel option {
        padding: 0.75rem;
        font-size: 16px;
        background: #1a1a2e;
        color: var(--text);
    }
    
    /* Make sure save bar respects show class on mobile */
    #unifiedSaveBar .save-btn-unified {
        width: 100% !important;
        min-height: 48px !important; /* Larger touch target */
        font-size: 1.1rem !important;
        padding: 0.875rem 1.5rem !important;
    }
}

.button-group {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.button-group .delete-btn {
    flex: 1;
}

.button-group .save-btn {
    flex: 2;
}

/* Analytics */
.analytics-hero {
    display: grid;
    grid-template-columns: minmax(280px, 1.2fr) minmax(280px, 1fr);
    gap: 1.75rem;
    padding: 2rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(15, 23, 42, 0.92));
    border: 1px solid rgba(94, 234, 212, 0.2);
    box-shadow: 0 18px 40px rgba(10, 12, 20, 0.45);
    margin-bottom: 2rem;
}

.analytics-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    color: rgba(94, 234, 212, 0.8);
    margin-bottom: 0.6rem;
}

.analytics-hero-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.analytics-hero-subtitle {
    color: var(--text-dim);
    margin: 0;
    max-width: 34rem;
}

.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.analytics-kpi {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 16px;
    border: 1px solid rgba(94, 234, 212, 0.18);
    padding: 1rem 1.1rem;
}

.analytics-kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}

.analytics-kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.analytics-grid--two {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.analytics-panel {
    background: rgba(18, 20, 32, 0.75);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    padding: 1.5rem;
    box-shadow: 0 12px 28px rgba(8, 10, 16, 0.35);
}

.analytics-panel--primary {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(15, 23, 42, 0.85);
}

.analytics-panel--wide {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .analytics-hero {
        grid-template-columns: 1fr;
    }

    .analytics-panel--wide {
        grid-column: span 1;
    }
}

.analytics-panel-header h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1.1rem;
    color: var(--text);
}

.analytics-panel-header p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.analytics-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
    margin-top: 1.2rem;
}

.analytics-metric {
    background: rgba(10, 12, 20, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(94, 234, 212, 0.12);
    padding: 0.85rem 1rem;
}

.analytics-metric-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 0.35rem;
}

.analytics-metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.analytics-bar-group {
    margin-top: 1.2rem;
    display: grid;
    gap: 1rem;
}

.analytics-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}

.analytics-bar-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    overflow: hidden;
}

.analytics-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.9), rgba(56, 189, 248, 0.95));
    transition: width 0.4s ease;
}

.analytics-table-wrapper {
    margin-top: 1rem;
    overflow-x: auto;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.analytics-table th,
.analytics-table td {
    padding: 0.75rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 0.9rem;
}

.analytics-table th {
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.analytics-table tbody tr:hover {
    background: rgba(15, 23, 42, 0.6);
}

.analytics-member-name {
    font-weight: 600;
    color: var(--text);
}

.analytics-member-tag {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.analytics-table-empty {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-dim);
}

.analytics-spotlight {
    margin-top: 1rem;
    padding: 1.2rem;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.analytics-spotlight-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.analytics-spotlight-subtitle {
    color: var(--text-dim);
    margin: 0.35rem 0 0.8rem;
    font-size: 0.9rem;
}

.analytics-spotlight-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.analytics-spotlight-stat {
    background: rgba(10, 12, 20, 0.7);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(56, 189, 248, 0.12);
}

.analytics-spotlight-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 0.25rem;
}

.analytics-spotlight-value {
    font-weight: 700;
    color: var(--text);
}

.analytics-momentum {
    margin-top: 1rem;
    display: grid;
    gap: 0.8rem;
}

.analytics-momentum-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    background: rgba(10, 12, 20, 0.7);
    border: 1px solid rgba(94, 234, 212, 0.12);
}

.analytics-momentum-label {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.analytics-momentum-value {
    font-weight: 700;
    color: var(--text);
}

/* ===== General Tab Styles ===== */
.general-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2.5rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(15, 23, 42, 0.92));
    border: 1px solid rgba(129, 140, 248, 0.2);
    box-shadow: 0 18px 40px rgba(10, 12, 20, 0.45);
    margin-bottom: 2rem;
}

.general-hero-left {
    flex: 1;
}

.general-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.4rem;
}

.general-subtitle {
    color: var(--text-dim);
    margin: 0;
    font-size: 0.95rem;
}

.general-hero-right {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
}

.general-quick-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(15, 23, 42, 0.6);
    padding: 0.75rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(129, 140, 248, 0.2);
    flex: 1;
    min-width: 0;
}

.general-quick-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.general-quick-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.general-quick-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.general-quick-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.general-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 1.5rem;
    align-items: start;
}

.general-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.general-section {
    background: rgba(18, 20, 32, 0.75);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    padding: 0;
    box-shadow: 0 12px 28px rgba(8, 10, 16, 0.35);
    overflow: visible;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.general-section:hover {
    border-color: rgba(129, 140, 248, 0.3);
}

.general-section-compact {
    /* Compact variant for sidebar - Reserved for future use */
    padding: 12px;
}

.general-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(15, 23, 42, 0.4));
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 18px 18px 0 0;
}

.general-section-icon {
    font-size: 2rem;
    line-height: 1;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(129, 140, 248, 0.15));
    border-radius: 12px;
    border: 1px solid rgba(129, 140, 248, 0.3);
}

.general-section-icon-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(248, 113, 113, 0.15));
    border-color: rgba(239, 68, 68, 0.3);
}

.general-section-icon-pink {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(244, 114, 182, 0.15));
    border-color: rgba(236, 72, 153, 0.3);
}

.general-section-icon-gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(252, 211, 77, 0.15));
    border-color: rgba(251, 191, 36, 0.3);
}

.general-section-info {
    flex: 1;
}

.general-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.2rem;
}

.general-section-desc {
    color: var(--text-dim);
    margin: 0;
    font-size: 0.85rem;
}

.general-section-body {
    padding: 2rem;
}

.general-field {
    margin-bottom: 1.25rem;
}

.general-field:last-child {
    margin-bottom: 0;
}

.general-field-half {
    flex: 1;
}

.general-field-row {
    display: flex;
    gap: 1rem;
}

.general-label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.general-field-hint {
    display: block;
    color: var(--text-dim);
    font-size: 0.8rem;
    margin-top: 0.4rem;
    line-height: 1.4;
}

.general-field-hint code {
    background: rgba(129, 140, 248, 0.12);
    color: rgba(129, 140, 248, 0.95);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    margin: 0 0.1rem;
}

.general-select,
.general-input,
.general-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.7);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.general-select:focus,
.general-input:focus,
.general-textarea:focus {
    outline: none;
    border-color: rgba(129, 140, 248, 0.5);
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
}

.general-textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.no-spin[type="number"]::-webkit-outer-spin-button,
.no-spin[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spin[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.general-color-compact {
    width: 100%;
    height: 42px;
    padding: 0.3rem;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.7);
    cursor: pointer;
    transition: border-color 0.2s;
}

.general-color-compact:focus,
.general-color-compact:hover {
    border-color: rgba(129, 140, 248, 0.5);
}

.general-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.general-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    transition: background 0.2s, border-color 0.2s;
}

.general-option:hover {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(148, 163, 184, 0.2);
}

.general-option-primary {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(129, 140, 248, 0.2);
}

.general-option-primary:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(129, 140, 248, 0.3);
}

.general-option-info {
    flex: 1;
}

.general-option-label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

.general-option-desc {
    color: var(--text-dim);
    font-size: 0.78rem;
}

.general-embed-config {
    margin-top: 1rem;
    padding: 1.5rem;
    background: rgba(99, 102, 241, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(129, 140, 248, 0.15);
}

.general-embed-config-title {
    font-weight: 700;
    color: var(--text);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    color: rgba(129, 140, 248, 0.9);
}

.general-embed-fields {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.general-embed-fields:last-child {
    margin-bottom: 0;
}

.general-preview {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.general-preview-label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    display: block;
}

.general-preview-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 10px;
    min-height: 80px;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

/* Responsive adjustments */
@media (max-width: 1100px) {
    .general-layout {
        grid-template-columns: 1fr;
    }

    .general-column-sidebar {
        grid-row: 1;
    }

    .general-column-main {
        grid-row: 2;
    }
}

@media (max-width: 768px) {
    .general-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }

    .general-hero-right {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .general-quick-stat {
        width: 100%;
    }

    .general-title {
        font-size: 1.6rem;
    }

    .general-section-header {
        padding: 1.25rem 1.5rem;
    }

    .general-section-body {
        padding: 1.5rem;
    }

    .general-embed-fields {
        flex-direction: column;
    }

    .general-field-row {
        flex-direction: column;
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: rgba(26, 26, 46, 0.7);
    border: 2px solid rgba(147, 112, 219, 0.2);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.stat-card:hover {
    border-color: rgba(147, 112, 219, 0.6);
    box-shadow: 0 6px 16px rgba(147, 112, 219, 0.3);
}

.stat-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--light-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.top-members-list {
    margin: 1.5rem 0 3rem;
}

.top-member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.top-member-item:hover {
    border-color: var(--primary);
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.3);
}

.member-rank {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary);
    min-width: 3rem;
}

.member-info {
    flex: 1;
    margin-left: 1rem;
}

.member-name-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.member-display-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.member-username-toggle {
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--primary);
    transition: transform 0.15s ease;
    user-select: none;
}

.member-username-toggle:hover {
    color: var(--light-blue);
}

.member-details-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.member-details-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.member-details-dropdown > div {
    padding: 0.25rem 0;
}

.member-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-dim);
    flex-wrap: wrap;
}

.level-distribution {
    margin-top: 1.5rem;
}

.distribution-bar {
    margin-bottom: 1.5rem;
}

.distribution-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.distribution-range {
    font-weight: 600;
}

.distribution-count {
    color: var(--text-dim);
}

.bar-container {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 30px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--light-blue));
    border-radius: 8px;
    transition: width 1s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.75rem;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Footer Styles */
.site-footer {
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--border);
    padding: 3rem 2rem;
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-brand {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: var(--text);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.footer-links a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s ease;
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-copyright {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.footer-made-in {
    margin-top: 0.5rem;
    color: var(--text-dim);
    font-size: 0.85rem;
    opacity: 0.75;
    letter-spacing: 0.02em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

.footer-flag-img {
    height: 1em;
    width: auto;
    vertical-align: middle;
    display: inline-block;
}

body.server-selected .site-footer .footer-content {
    padding-left: 240px;
}

body.server-selected .dashboard-container.collapsed ~ .site-footer .footer-content {
    padding-left: 0;
}

@media (max-width: 768px) {
    body.server-selected .site-footer .footer-content {
        padding-left: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .config-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    
    .server-grid {
        grid-template-columns: 1fr;
        padding: 0 0.75rem;
        gap: 1.25rem;
    }
    
    .dashboard-title {
        font-size: 2.2rem;
        margin-bottom: 0.5rem;
    }
    
    .subtitle {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    /* Center pricing cards on mobile */
    .pricing-plans {
        padding: 0 1rem;
        justify-content: center;
    }
    
    /* Center all form elements */
    .config-section {
        padding: 1.5rem 1rem;
    }
    
    /* Ensure buttons are centered and full width on mobile */
    .save-btn,
    .btn-primary {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }
    
    
    /* Mobile scroll indicators */
    .tabs-wrapper::before,
    .tabs-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 2px;
        width: 40px;
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .tabs-wrapper::before {
        left: 0;
        background: linear-gradient(90deg, var(--darker-bg) 0%, transparent 100%);
    }
    
    .tabs-wrapper::after {
        right: 0;
        background: linear-gradient(270deg, var(--darker-bg) 0%, transparent 100%);
    }
    
    .tabs-wrapper.show-left-shadow::before {
        opacity: 1;
    }
    
    .tabs-wrapper.show-right-shadow::after {
        opacity: 1;
    }
    
    /* Mobile scroll hint */
    .tabs-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        color: var(--text-dim);
        font-size: 0.85rem;
        text-align: center;
        animation: slideHintFade 2s ease-in-out infinite;
    }
    
    .tabs-scroll-hint svg {
        width: 16px;
        height: 16px;
        animation: slideHintArrows 2s ease-in-out infinite;
    }
    
    @keyframes slideHintFade {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }
    
    @keyframes slideHintArrows {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(4px); }
    }
    
    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Command Management Styles */
.command-category {
    margin-bottom: 2rem;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}

.category-icon {
    font-size: 1.5rem;
}

.category-info h4 {
    font-size: 1.2rem;
    color: var(--text);
    margin: 0 0 0.25rem 0;
}

.category-info p {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin: 0;
}

.command-list {
    display: grid;
    gap: 0.75rem;
}

.command-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.music-command-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(29, 185, 84, 0.3);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.music-command-item:hover {
    border-color: rgba(29, 185, 84, 0.6);
    background: rgba(29, 185, 84, 0.05);
    box-shadow: 0 0 12px rgba(29, 185, 84, 0.1);
}

.music-command-item code {
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.music-command-item span {
    font-size: 0.9rem;
    color: var(--text-dim);
}

.command-item:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
}

.command-info-wrapper {
    flex: 1;
}

.command-name {
    font-weight: 600;
    color: var(--primary);
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.command-description {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.command-permissions {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(88, 101, 242, 0.1);
    border: 1px solid rgba(88, 101, 242, 0.3);
    border-radius: 4px;
    font-size: 0.8rem;
    color: #7289da;
    margin-top: 0.25rem;
}

.command-toggle input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.commands-loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-dim);
}

.commands-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-dim);
}

/* ============================================
   ENHANCED MOBILE DASHBOARD STYLES
   ============================================ */

/* Tablet and medium mobile devices */
@media (max-width: 768px) {
    /* Top Navigation */
    .top-nav {
        padding: 0.75rem 1rem;
    }
    
    .current-server {
        font-size: 0.95rem;
    }
    
    .current-server-icon {
        width: 32px;
        height: 32px;
    }
    
    .user-menu {
        padding: 0.5rem;
    }
    
    .user-avatar {
        width: 36px;
        height: 36px;
    }
    
    /* Server Selection */
    .server-select-container {
        padding: 2rem 1rem;
    }
    
    .server-select-title {
        font-size: 2rem;
    }
    
    .server-card {
        padding: 1rem;
    }
    
    .server-name {
        font-size: 1rem;
    }
    
    .server-icon {
        width: 50px;
        height: 50px;
    }
    
    /* Configuration Panel */
    .config-container {
        padding: 1rem;
    }
    
    .config-header h2 {
        font-size: 1.5rem;
    }
    
    .back-btn {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Tabs */
    .config-tabs {
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
    
    .tab-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
        white-space: nowrap;
        min-width: auto;
    }
    
    /* Form Elements */
    .form-group label {
        font-size: 0.95rem;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.875rem 1rem;
        min-height: 48px;
    }
    
    .form-group textarea {
        min-height: 120px;
    }
    
    .slider-container {
        margin: 1.5rem 0;
    }
    
    .slider {
        height: 8px;
    }
    
    .slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }
    
    .slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
    
    /* Buttons */
    .btn-primary,
    .save-btn,
    .add-btn {
        min-height: 48px;
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }
    
    .delete-btn,
    .remove-btn {
        min-height: 40px;
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Rewards and Custom Commands */
    .reward-item,
    .custom-command-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .reward-info,
    .command-display-info {
        width: 100%;
    }
    
    /* Command Management */
    .command-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem 1rem;
    }
    
    .command-info-wrapper {
        width: 100%;
    }
    
    .command-toggle {
        align-self: flex-end;
    }
    
    .category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .category-icon {
        font-size: 1.75rem;
    }
    
    /* Analytics */
    .analytics-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.25rem 1rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .leaderboard-item {
        padding: 1rem;
    }
    
    .member-rank {
        font-size: 1.25rem;
        min-width: 35px;
    }
    
    .member-avatar {
        width: 45px;
        height: 45px;
    }
    
    .member-info {
        flex: 1;
        min-width: 0;
    }
    
    .member-name {
        font-size: 1rem;
    }
    
    .member-stats {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .stat-badge {
        font-size: 0.8rem;
        padding: 0.25rem 0.625rem;
    }
    
    /* Notifications */
    .notification {
        max-width: calc(100vw - 2rem);
        margin: 1rem;
        padding: 1rem;
        font-size: 0.95rem;
    }
    
    /* Modals */
    .profile-modal-content {
        width: 95%;
        max-width: none;
        margin: 1rem;
        padding: 1.5rem;
    }
    
    .modal-header h3 {
        font-size: 1.5rem;
    }
    
    .close-modal-btn {
        width: 100%;
        margin-top: 1rem;
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
    .top-nav {
        padding: 0.625rem 0.75rem;
    }
    
    .current-server {
        font-size: 0.85rem;
    }
    
    .current-server-name {
        max-width: 120px;
    }
    
    /* Extra padding for small phones to prevent edge-to-edge */
    .dashboard-container,
    .config-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Center all content on very small screens */
    .server-select-section {
        padding: 1rem;
    }
    
    .analytics-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .server-select-title {
        font-size: 1.75rem;
    }
    
    .config-header h2 {
        font-size: 1.25rem;
    }
    
    .tab-btn {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }
    
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    .stat-card {
        padding: 1rem 0.875rem;
    }
    
    .stat-value {
        font-size: 1.75rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    .leaderboard-item {
        padding: 0.875rem;
    }
    
    .member-avatar {
        width: 40px;
        height: 40px;
    }
    
    .member-name {
        font-size: 0.95rem;
    }
    
    .notification {
        font-size: 0.9rem;
    }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .server-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .analytics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Touch-specific improvements */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .server-card:hover,
    .tab-btn:hover,
    .command-item:hover {
        transform: none;
    }
    
    /* Add active states for touch feedback */
    .server-card:active {
        transform: scale(0.98);
    }
    
    .tab-btn:active {
        background: rgba(155, 89, 182, 0.3);
    }
    
    .btn-primary:active,
    .save-btn:active {
        transform: translateY(1px);
    }
    
    /* Larger touch targets */
    .toggle-slider {
        min-width: 60px;
        min-height: 30px;
    }
    
    button,
    .btn,
    a.btn {
        min-height: 44px;
    }
}

/* Mobile-specific accessibility */
@media (max-width: 768px) {
    /* Ensure readable font sizes on mobile */
    * {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* Better touch scrolling */
    .config-tabs,
    .server-grid,
    .analytics-grid {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent accidental zoom on inputs */
    input[type="text"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Giveaway Cards */
.giveaways-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.giveaway-card {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.giveaway-card:hover {
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
}

.giveaway-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.giveaway-prize {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
}

.giveaway-status {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.giveaway-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.giveaway-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.giveaway-actions button {
    flex: 1;
    min-width: 80px;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.giveaway-actions button:hover {
    opacity: 0.9;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.5);
}

.giveaway-actions button.danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--error);
}

.giveaway-actions button.danger:hover {
    background: var(--error);
    color: white;
}

.giveaway-actions a {
    flex: 1;
    min-width: 80px;
    padding: 0.5rem 1rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    text-align: center;
    transition: all 0.15s ease;
}

.giveaway-actions a:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* Tickets List */
.ticket-toggle-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(147, 112, 219, 0.1);
}
.ticket-toggle-row:last-child { border-bottom: none; }
.ticket-toggle-info { flex: 1; }
.ticket-toggle-info label { font-weight: 600; cursor: pointer; font-size: 0.95rem; display: block; }
.ticket-toggle-info small { display: block; margin-top: 0.15rem; color: var(--text-secondary); font-size: 0.8rem; }

.ticket-rating-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
}
.ticket-rating-bar .bar-label { width: 20px; text-align: right; color: var(--text-secondary); }
.ticket-rating-bar .bar-track { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.ticket-rating-bar .bar-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s ease; }
.ticket-rating-bar .bar-count { width: 24px; text-align: right; color: var(--text-secondary); font-size: 0.8rem; }

.ticket-recent-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    border: 1px solid rgba(255,255,255,0.04);
}
.ticket-recent-item:hover { background: rgba(147,112,219,0.06); }
.ticket-recent-num { font-weight: 600; color: var(--primary); margin-right: 0.5rem; }
.ticket-recent-status {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ticket-recent-status.open { background: rgba(46,204,113,0.15); color: #2ecc71; }
.ticket-recent-status.closed { background: rgba(149,165,166,0.15); color: #95a5a6; }

.tickets-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ticket-item {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.ticket-item:hover {
    border-color: var(--primary);
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.3);
}

/* Panels List */
.panels-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.panel-item {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.panel-item:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

.panel-info {
    flex: 1;
}

.panel-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.panel-details {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.panel-actions {
    display: flex;
    gap: 0.5rem;
}

/* Button Groups */
.button-group .save-btn {
    flex: 1;
    min-width: 150px;
}

/* Embed Builder Styles */
.embed-builder-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.embed-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.embed-preview-section {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.embed-preview-section h5 {
    color: var(--text);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.discord-embed {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
}

.embed-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    float: right;
    margin-left: 1rem;
}

/* Pricing Section */
.pricing-section {
    width: 100%;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.plan-card {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid var(--border);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.plan-card:hover {
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
}

.plan-card.free {
    border-color: var(--text-dim);
}

.plan-card.premium {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
}

.plan-card.ultimate {
    border-color: var(--light-blue);
}

.popular-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.plan-card h4 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--text);
}

.price {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.price span {
    font-size: 1rem;
    color: var(--text-dim);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.plan-features li {
    padding: 0.75rem 0;
    color: var(--text);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border);
}

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

.plan-btn {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.plan-btn.current {
    background: rgba(139, 92, 246, 0.2);
    color: var(--text-dim);
    cursor: not-allowed;
}

.plan-btn.upgrade {
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    color: white;
}

.plan-btn.upgrade:hover {
    opacity: 0.9;
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.5);
}

/* Channel Rules */
.subtitle-text {
    color: var(--text-dim);
    margin-bottom: 1.5rem;
}

.plan-info {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.plan-info a {
    color: var(--primary);
    text-decoration: none;
}

.plan-info a:hover {
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .embed-builder-container {
        grid-template-columns: 1fr;
    }
    
    .plans-grid {
        grid-template-columns: 1fr;
    }
}

/* Enhanced Profile Modal */
.profile-modal-large {
    max-width: 1000px;
}

.profile-header-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.profile-modal-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    box-shadow: 0 0 20px var(--glow);
}

.profile-plan-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary) 0%, var(--light-blue) 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.profile-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.profile-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.profile-action-btn:hover {
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    border-color: var(--primary);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.5);
}

.profile-action-btn span {
    font-size: 1.5rem;
}

/* Enhanced Pricing Section */
.pricing-header {
    text-align: center;
    margin-bottom: 3rem;
}

.pricing-title {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--light-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.pricing-subtitle {
    font-size: 1.2rem;
    color: var(--text-dim);
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.plan-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
}

.plan-card.featured {
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

.plan-card.featured:hover {
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.5);
}

.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.plan-header {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.plan-name {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 1rem;
}

.plan-price {
    margin-bottom: 0.5rem;
}

.price-amount {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price-period {
    font-size: 1rem;
    color: var(--text-dim);
    font-weight: 500;
}

.plan-description {
    color: var(--text-dim);
    font-size: 0.95rem;
}

.plan-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    flex-grow: 1;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    color: var(--text);
}

.feature-item.included {
    opacity: 1;
}

.feature-item.excluded {
    opacity: 0.4;
}

.feature-icon {
    flex-shrink: 0;
    font-size: 1.2rem;
}

.plan-button {
    width: 100%;
    padding: 1rem 2rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.plan-button.current-plan {
    background: rgba(139, 92, 246, 0.2);
    color: var(--text-dim);
    cursor: not-allowed;
}

.plan-button.upgrade-button {
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    color: white;
}

.plan-button.upgrade-button:hover {
    opacity: 0.9;
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.5);
}

.plan-button.upgrade-button.ultimate {
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef);
}

/* Pricing FAQ */
.pricing-faq {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    margin-top: 3rem;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.pricing-faq h3 {
    text-align: center;
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 2rem;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.faq-item {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.faq-item:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

.faq-item h4 {
    color: var(--light-blue);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.faq-item p {
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0;
}

/* Plan-specific colors */
.free-plan .plan-name {
    color: #10b981;
}

.premium-plan .plan-name {
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ultimate-plan .plan-name {
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 968px) {
    .plans-grid {
        grid-template-columns: 1fr;
    }
    
    .plan-card.featured {
        transform: scale(1);
    }
    
    .plan-card.featured:hover {
        box-shadow: 0 20px 40px rgba(139, 92, 246, 0.5);
    }
}

/* Ticket Panel Preview */
.ticket-panel-preview,
#selfrolePanelPreview {
    background: #2b2d31;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ticket-panel-preview .embed,
.embed-preview {
    background: #1e1f22;
    border-left: 4px solid;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.embed-preview .embed-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.embed-preview .embed-title-block {
    flex: 1;
}

.embed-preview .embed-thumbnail {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.ticket-panel-preview .embed-title,
.embed-preview .embed-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.ticket-panel-preview .embed-description,
.embed-preview .embed-description {
    font-size: 0.9rem;
    color: #b5bac1;
    line-height: 1.4;
    white-space: pre-wrap;
}

.embed-preview .embed-helper {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #cfd4db;
}

.embed-preview .embed-image {
    margin-top: 0.75rem;
    border-radius: 4px;
    overflow: hidden;
    background: #0f1012;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.embed-preview .embed-image img {
    display: block;
    width: 100%;
    height: auto;
}

.ticket-panel-preview .embed-footer,
.embed-preview .embed-footer {
    font-size: 0.75rem;
    color: #949ba4;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.discord-select-card {
    background: #2b2d31;
    border: 1px solid #202225;
    border-radius: 6px;
    padding: 0.75rem;
    color: #e3e5e8;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.discord-select-label {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.discord-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: #1e1f22;
    border: 1px solid #111214;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.35rem;
}

.discord-option:last-child {
    margin-bottom: 0;
}

.discord-option-emoji {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.discord-option-emoji img.custom-emoji {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.discord-option-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.discord-option-title {
    font-weight: 700;
    color: #f2f3f5;
    font-size: 0.95rem;
}

.discord-option-description {
    font-size: 0.85rem;
    color: #b5bac1;
}

.discord-option-caret {
    color: #949ba4;
    font-size: 0.9rem;
}

.ticket-panel-preview .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #5865f2;
    color: white;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: not-allowed;
}

.discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 1rem;
    color: #fff;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: default;
    user-select: none;
    line-height: 1.4;
}
.discord-btn-primary { background: #5865f2; }
.discord-btn-success { background: #248046; }
.discord-btn-danger  { background: #da373c; }
.discord-btn-secondary { background: #4e5058; }

/* ─── Discord-style Emoji Picker ─── */
.emoji-picker-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: transparent;
    z-index: 10000;
    justify-content: flex-end;
    align-items: flex-start;
    padding: clamp(64px, 11vh, 120px) clamp(10px, 6vw, 140px) 0 10px;
}

.emoji-picker-modal.active {
    display: flex;
}

.emoji-picker-content {
    background: #2b2d31;
    border-radius: 10px;
    width: 365px;
    height: 445px;
    display: flex;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    overflow: hidden;
    position: fixed;
}

/* Category sidebar */
.emoji-cat-sidebar {
    width: 44px;
    background: #1e1f22;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0;
    gap: 2px;
    overflow-y: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.emoji-cat-sidebar::-webkit-scrollbar { display: none; }

.emoji-cat-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.55;
    flex-shrink: 0;
}
.emoji-cat-btn:hover {
    background: rgba(255,255,255,0.09);
    opacity: 0.9;
}
.emoji-cat-btn--active {
    background: rgba(88,101,242,0.3);
    opacity: 1;
}

.emoji-cat-divider {
    width: 22px; height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 4px 0;
    flex-shrink: 0;
}

/* Main picker area */
.emoji-picker-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.emoji-picker-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.emoji-picker-search-input {
    flex: 1;
    background: #111214;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: #dcddde;
    padding: 6px 10px;
    font-size: 0.9rem;
    min-width: 0;
}
.emoji-picker-search-input:focus {
    outline: none;
    border-color: rgba(88,101,242,0.6);
}

.emoji-picker-close {
    width: 26px; height: 26px;
    border: none;
    background: transparent;
    color: #b5bac1;
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.emoji-picker-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

.emoji-picker-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 4px 8px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.emoji-picker-body::-webkit-scrollbar { width: 4px; }
.emoji-picker-body::-webkit-scrollbar-track { background: transparent; }
.emoji-picker-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 1px;
}

.emoji-item {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    cursor: pointer;
    border-radius: 6px;
}
.emoji-item:hover { background: rgba(255,255,255,0.1); }
.emoji-item.custom-emoji { overflow: hidden; }
.emoji-item.custom-emoji img { width: 100%; height: 100%; object-fit: contain; }
.emoji-item .emoji-unicode-static {
    width: 22px;
    height: 22px;
    image-rendering: auto;
    user-select: none;
    pointer-events: none;
}

@media (max-width: 900px) {
    .emoji-picker-modal {
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .emoji-picker-content {
        position: static;
    }
}

.emoji-category { margin-bottom: 10px; }
.emoji-category-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: #b5bac1;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    padding: 0 2px;
}

/* Legacy tab elements (now hidden) */
.emoji-picker-tabs, .emoji-picker-search, .emoji-picker-header h3 { display: none; }
.emoji-tab { display: none; }

/* Unified Save Bar - Floating, Sleek Design */
.unified-save-bar {
    position: fixed;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 3rem);
    max-width: 650px;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.2), rgba(0, 206, 209, 0.1));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 2px solid rgba(147, 112, 219, 0.4);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(147, 112, 219, 0.25), 0 0 20px rgba(0, 206, 209, 0.1);
    z-index: 9999;
    transition: bottom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    padding: 1rem 1.75rem;
    opacity: 0;
}

.unified-save-bar.show {
    bottom: 2rem;
    transform: translateX(-50%);
    opacity: 1;
}

.save-bar-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.save-bar-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
}

.save-bar-message svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.save-bar-actions {
    display: flex;
    gap: 0.75rem;
}

.discard-btn {
    padding: 0.65rem 1.8rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.discard-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.discard-btn:active {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

.save-btn-unified {
    padding: 0.7rem 2.2rem;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px rgba(147, 112, 219, 0.4);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.save-btn-unified:hover {
    box-shadow: 0 0 28px rgba(147, 112, 219, 0.6), 0 0 45px rgba(0, 206, 209, 0.4);
}

.save-btn-unified:active {
    box-shadow: 0 0 18px rgba(147, 112, 219, 0.5);
}

@media (max-width: 768px) {
    .unified-save-bar {
        bottom: -200px;
        width: calc(100% - 2rem);
        padding: 0.75rem 1rem;
        border-radius: 40px;
    }
    
    .unified-save-bar.show {
        bottom: 1rem;
    }
    
    .save-bar-content {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .save-bar-actions {
        width: 100%;
    }
    
    .save-bar-actions button {
        flex: 1;
    }
}

/* User Settings Section */
.user-settings-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(147, 112, 219, 0.05);
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}

.setting-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary), var(--light-blue));
    opacity: 0;
    transition: opacity 0.15s ease;
}

.setting-item:hover {
    background: rgba(147, 112, 219, 0.08);
    border-color: rgba(147, 112, 219, 0.5);
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.2);
}

.setting-item:hover::before {
    opacity: 1;
}

.setting-info {
    flex: 1;
    padding-right: 1.5rem;
}

.setting-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.setting-title img {
    flex-shrink: 0;
}

.setting-description {
    font-size: 0.95rem;
    color: var(--text-dim);
    line-height: 1.6;
}

/* Global dashboard performance fallback classes (set early in dashboard.html) */

html.perf-low-end .navbar,
html.perf-low-end .modal-content,
html.perf-low-end .config-card,
html.perf-low-end .server-card,
html.perf-low-end .stat-card,
html.perf-low-end .command-category {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.perf-low-end .server-info::before,
html.perf-low-end .premium-card::after,
html.perf-low-end .empty-state::before,
html.perf-low-end .empty-icon,
html.perf-low-end .server-hero-section,
html.perf-low-end .server-hero-section::before,
html.perf-low-end .stats-card-shine,
html.perf-low-end .nebula-bg,
html.perf-low-end .premium-progress-fill::before,
html.perf-low-end .premium-badge::before {
    animation: none !important;
}

html.perf-low-end .navbar,
html.perf-low-end .server-info,
html.perf-low-end .premium-card,
html.perf-low-end .overview-panel,
html.perf-low-end .info-card {
    box-shadow: none !important;
}

html.perf-low-end .navbar,
html.perf-low-end .server-card,
html.perf-low-end .command-category,
html.perf-low-end .ticket-panel,
html.perf-low-end .welcome-card-preview-container {
    will-change: auto !important;
    transform: none !important;
}

/* Duplicate toggle-switch styles removed - now using unified toggle styles above */

/* Performance Optimizations for Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .server-card,
    .config-card,
    .command-category,
    .stat-card {
        animation: none !important;
    }
    
    .toggle-slider:before {
        transition: transform 0.1s ease !important;
    }
    
    .navbar {
        animation: none !important;
    }
}

/* Reduce heavy blur effects on lower-end devices */
@media (max-width: 1024px) {
    .navbar {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    .config-card,
    .server-card,
    .stat-card,
    .modal-content,
    .command-category {
        backdrop-filter: blur(10px) saturate(150%);
        -webkit-backdrop-filter: blur(10px) saturate(150%);
    }
}

/* Command Sub-Tabs (MEE6 Style) */
.command-subtabs {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.command-subtabs::-webkit-scrollbar {
    display: none;
}

.command-subtab {
    padding: 0.6rem 1.25rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.command-subtab:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--primary);
    color: var(--text);
}

.command-subtab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Command Cards Grid (MEE6 Style) */
.command-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.command-card {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 1.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.command-card:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
}

.command-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.command-card-icon {
    font-size: 2rem;
    line-height: 1;
}

.command-card-info {
    flex: 1;
}

.command-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.command-card-description {
    font-size: 0.875rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.command-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(139, 92, 246, 0.1);
}

.command-card-status {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    overflow: visible;
    min-width: fit-content;
    display: inline-flex;
    align-items: center;
}

.command-card-status.active {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.command-card-status.inactive {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.command-card-status.pending {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    animation: pulse-pending 2s ease-in-out infinite;
}

@keyframes pulse-pending {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Command Card Toggle Switch - Unified Blue Style */
.command-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
}

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

.command-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(148, 163, 184, 0.25);
    transition: background 0.2s ease, border-color 0.2s ease;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.command-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    transition: left 0.2s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.command-toggle input:checked + .command-toggle-slider {
    background: #3b82f6;
    border-color: #3b82f6;
}

.command-toggle input:checked + .command-toggle-slider:before {
    left: 21px;
    transform: translateY(-50%);
}

.command-toggle-slider:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.command-toggle input:checked + .command-toggle-slider:hover {
    background: #2563eb;
}

/* Filter Hidden State */
.command-card.hidden {
    display: none;
}

/* ===== UNSAVED STATUS BADGES ===== */
/* Universal unsaved indicator for all toggles */
.unsaved-badge {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: fit-content;
    /* Glassmorphism badge */
    background: rgba(251, 191, 36, 0.15);
    border: 1.5px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 
        0 2px 8px rgba(251, 191, 36, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    animation: pulse-badge 2s ease-in-out infinite;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

@keyframes pulse-badge {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

.unsaved-badge:hover {
    background: rgba(251, 191, 36, 0.25);
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 
        0 4px 12px rgba(251, 191, 36, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* ===== OVERVIEW TAB STYLES ===== */
.overview-hero {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(260px, 1fr);
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: 18px;
    background: rgba(18, 20, 32, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 18px 45px rgba(10, 12, 20, 0.4);
    margin-bottom: 1.75rem;
}

.overview-hero-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.overview-hero-subtitle {
    color: var(--text-dim);
    margin: 0;
}

.overview-hero-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 0.9rem;
}

.overview-kpi {
    background: rgba(12, 14, 22, 0.7);
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    padding: 0.9rem 1rem;
}

.overview-kpi-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

.overview-kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.overview-grid--two {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.overview-panel {
    background: rgba(18, 20, 32, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 14px 30px rgba(10, 12, 20, 0.32);
}

.overview-panel--primary {
    background: rgba(22, 24, 38, 0.8);
    border-color: rgba(147, 112, 219, 0.35);
}

.overview-panel-header h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1.1rem;
    color: var(--text);
}

.overview-panel-header p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.overview-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.9rem;
    margin-top: 1.2rem;
}

.overview-metric {
    background: rgba(12, 14, 22, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    padding: 0.85rem 1rem;
}

.overview-metric-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
}

.overview-metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.overview-chart {
    height: 160px;
    margin-top: 1.1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(147, 112, 219, 0.18), rgba(10, 12, 20, 0.4));
    border: 1px solid rgba(148, 163, 184, 0.16);
    position: relative;
    overflow: hidden;
}

.overview-chart::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.5;
}

.overview-chart::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 22%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 206, 209, 0.9), rgba(147, 112, 219, 0.95));
    box-shadow: 0 0 18px rgba(147, 112, 219, 0.6);
}

.overview-chart-caption {
    margin-top: 0.75rem;
    color: var(--text-dim);
    font-size: 0.85rem;
}

@media (max-width: 1000px) {
    .overview-hero {
        grid-template-columns: 1fr;
    }

    .overview-hero-kpis {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* ----- Overview: Staggered reveal (Neon / Startit style) ----- */
@keyframes overviewReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes overviewShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes overviewValueIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Lightweight reusable tab-enter animation for non-overview tabs */
@keyframes tabSectionReveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-content.tab-animated > * {
    opacity: 0;
    transform: translateY(14px);
    animation: tabSectionReveal 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.tab-content.tab-animated > *:nth-child(1) { animation-delay: 0ms; }
.tab-content.tab-animated > *:nth-child(2) { animation-delay: 45ms; }
.tab-content.tab-animated > *:nth-child(3) { animation-delay: 90ms; }
.tab-content.tab-animated > *:nth-child(4) { animation-delay: 135ms; }
.tab-content.tab-animated > *:nth-child(5) { animation-delay: 180ms; }

/* Initial state before reveal */
#overviewTab .overview-hero,
#overviewTab .overview-grid,
#analyticsTab .analytics-hero,
#analyticsTab .analytics-grid,
#generalTab .general-hero,
#generalTab .general-layout {
    opacity: 0;
    transform: translateY(20px);
}

#overviewTab.overview-animated .overview-hero,
#analyticsTab.analytics-animated .analytics-hero,
#generalTab.general-animated .general-hero {
    animation: overviewReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0ms;
}

#overviewTab.overview-animated .overview-grid,
#analyticsTab.analytics-animated .analytics-grid,
#generalTab.general-animated .general-layout {
    animation: overviewReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 80ms;
}

#overviewTab.overview-animated .overview-grid.overview-grid--two,
#analyticsTab.analytics-animated .analytics-grid.analytics-grid--two {
    animation: overviewReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 160ms;
}

/* Panel stagger (children of second grid) */
#overviewTab.overview-animated .overview-grid--two .overview-panel:nth-child(1),
#analyticsTab.analytics-animated .analytics-grid--two .analytics-panel:nth-child(1) {
    animation: overviewReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 240ms;
    opacity: 0;
    transform: translateY(16px);
}

#overviewTab.overview-animated .overview-grid--two .overview-panel:nth-child(2),
#analyticsTab.analytics-animated .analytics-grid--two .analytics-panel:nth-child(2) {
    animation: overviewReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 320ms;
    opacity: 0;
    transform: translateY(16px);
}

/* Skeleton loading state */
#overviewTab.overview-loading .overview-kpi-value,
#overviewTab.overview-loading .overview-metric-value,
#overviewTab.overview-loading .overview-engagement-value,
#overviewTab.overview-loading .overview-activity-value,
#analyticsTab.analytics-loading .analytics-kpi-value,
#analyticsTab.analytics-loading .analytics-metric-value {
    position: relative;
    color: transparent !important;
}

#overviewTab.overview-loading .overview-kpi-value::after,
#overviewTab.overview-loading .overview-metric-value::after,
#overviewTab.overview-loading .overview-engagement-value::after,
#overviewTab.overview-loading .overview-activity-value::after,
#analyticsTab.analytics-loading .analytics-kpi-value::after,
#analyticsTab.analytics-loading .analytics-metric-value::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    min-width: 48px;
    max-width: 80px;
    height: 0.85em;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.12) 0%,
        rgba(148, 163, 184, 0.22) 50%,
        rgba(148, 163, 184, 0.12) 100%
    );
    background-size: 200% 100%;
    animation: overviewShimmer 1.5s ease-in-out infinite;
}

#overviewTab.overview-loading .overview-engagement-metric--simple .overview-engagement-value::after {
    width: 50%;
}

/* Hover: KPI cards (subtle lift + glow) */
.overview-kpi {
    transition: box-shadow 0.2s ease,
                border-color 0.2s ease;
}

.overview-kpi:hover {
    box-shadow: none;
    border-color: rgba(147, 112, 219, 0.2);
}

/* Hover: metric cells */
.overview-metric {
    transition: box-shadow 0.2s ease,
                border-color 0.2s ease;
}

.overview-metric:hover {
    box-shadow: none;
    border-color: rgba(148, 163, 184, 0.18);
}

/* Hover: panels (subtle border glow) */
.overview-panel {
    transition: border-color 0.2s ease;
}

.overview-panel:hover {
    box-shadow: none;
    border-color: rgba(148, 163, 184, 0.18);
}

.overview-panel--primary:hover {
    border-color: rgba(147, 112, 219, 0.25);
}

.overview-panel--engagement:hover,
.overview-panel--activity:hover {
    border-color: rgba(147, 112, 219, 0.25);
}

/* Hover: activity stat rows */
.overview-activity-stat {
    transition: transform 0.2s ease,
                background 0.2s ease,
                border-color 0.2s ease;
}

.overview-activity-stat:hover {
    transform: translateX(4px);
    background: rgba(12, 14, 22, 0.8);
    border-color: rgba(120, 120, 150, 0.35);
}

.overview-activity-icon {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.overview-activity-stat:hover .overview-activity-icon {
    transform: scale(1.08);
}

/* Engagement metric hover */
.overview-engagement-metric {
    transition: transform 0.22s ease,
                border-color 0.2s ease,
                box-shadow 0.22s ease;
}

.overview-engagement-metric:hover {
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 6px 16px rgba(10, 12, 20, 0.25);
}

/* Engagement bar: smoother fill + subtle glow */
.overview-engagement-bar-fill {
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.35);
}

/* Value pop-in when data loads (optional class from JS) */
.overview-value-pop .overview-kpi-value,
.overview-value-pop .overview-metric-value,
.overview-value-pop .overview-engagement-value,
.overview-value-pop .overview-activity-value {
    animation: overviewValueIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #overviewTab .overview-hero,
    #overviewTab .overview-grid,
    #overviewTab .overview-grid--two .overview-panel {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .overview-kpi,
    .overview-metric,
    .overview-panel,
    .overview-activity-stat,
    .overview-engagement-metric {
        transition-duration: 0.01ms !important;
    }
    .overview-kpi:hover,
    .overview-metric:hover,
    .overview-activity-stat:hover {
        transform: none !important;
    }
    .overview-engagement-bar-fill {
        transition-duration: 0.2s;
    }
    #overviewTab.overview-loading .overview-kpi-value::after,
    #overviewTab.overview-loading .overview-metric-value::after,
    #overviewTab.overview-loading .overview-engagement-value::after,
    #overviewTab.overview-loading .overview-activity-value::after {
        animation: none;
    }
}

/* Member Activity Panel */
.overview-panel--activity {
    background: linear-gradient(135deg, rgba(18, 20, 32, 0.95), rgba(12, 14, 24, 0.95));
    border: 1px solid rgba(147, 112, 219, 0.35);
}

.overview-activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.9rem;
    margin-top: 1.2rem;
}

.overview-activity-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(8, 10, 16, 0.6);
    border: 1px solid rgba(120, 120, 150, 0.2);
    border-radius: 12px;
    padding: 1rem;
}

.overview-activity-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.overview-activity-info {
    flex: 1;
    min-width: 0;
}

.overview-activity-label {
    font-size: 0.75rem;
    color: rgba(200, 200, 220, 0.65);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.overview-activity-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
}

.feature-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    animation: fadeInUp 0.25s ease;
}

.feature-status-grid--compact {
    gap: 0.75rem;
}

.feature-status-grid--compact .feature-status-card {
    background: rgba(15, 17, 28, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
    box-shadow: 0 10px 22px rgba(10, 12, 20, 0.28);
}

.feature-status-grid--compact .feature-status-icon {
    font-size: 1.1rem;
}

.feature-status-grid--compact .feature-status-label {
    font-size: 0.82rem;
}

.feature-status-card {
    background: rgba(26, 26, 46, 0.7);
    border: 2px solid rgba(147, 112, 219, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.feature-status-card:hover {
    border-color: var(--light-blue);
    box-shadow: 0 4px 12px rgba(0, 206, 209, 0.25);
}

.feature-status-card.enabled {
    border-color: rgba(34, 197, 94, 0.4);
}

.feature-status-card.enabled:hover {
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}

.feature-status-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.feature-status-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    position: relative;
    z-index: 1;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .overview-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .feature-status-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }
    
    .overview-stat-card {
        padding: 1rem;
    }
    
    .overview-stat-card .stat-icon {
        font-size: 2rem;
    }
    
    .overview-stat-card .stat-value {
        font-size: 1.5rem;
    }
}

/* Channel placeholder hint styles */
.channels-hint {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-left: 0.35rem;
    vertical-align: middle;
    cursor: help;
}
.dim {
    color: var(--text-dim);
}


/* ===== AUTOMATION BUILDER ===== */
.automations-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.automation-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.automation-option {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.automation-option:hover {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(91, 159, 255, 0.15), rgba(147, 112, 219, 0.1));
    box-shadow: 0 0 20px rgba(91, 159, 255, 0.3), 0 0 35px rgba(147, 112, 219, 0.2);
}

.automation-option.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(91, 159, 255, 0.2);
}

.automation-option strong {
    font-size: 0.95rem;
    color: var(--text-primary);
}

#automationBuilderModal .modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

#automationBuilderModal .modal-body {
    padding: 1.5rem;
}

@media (max-width: 768px) {
    .automation-options-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.75rem;
    }
    
    .automation-option {
        padding: 1rem;
    }
    
    .automation-option span {
        font-size: 1.5rem;
    }
}

/* Visual Builder CTA Button */
.visual-builder-cta {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.25) 0%, rgba(0, 206, 209, 0.15) 100%);
    border-radius: 18px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(147, 112, 219, 0.4);
    max-width: 650px;
    box-shadow: 0 12px 40px rgba(147, 112, 219, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.visual-builder-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 206, 209, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.visual-builder-cta:hover {
    box-shadow: 0 20px 60px rgba(147, 112, 219, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 0 60px rgba(0, 206, 209, 0.2);
    border-color: rgba(147, 112, 219, 0.7);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.35) 0%, rgba(0, 206, 209, 0.25) 100%);
    transform: translateY(-4px);
}

.visual-builder-cta:hover::before {
    opacity: 1;
}

.visual-builder-cta:active {
    transform: translateY(-1px);
}

.visual-builder-icon {
    font-size: 3.5rem;
    filter: drop-shadow(0 4px 8px rgba(147, 112, 219, 0.3));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.visual-builder-cta:hover .visual-builder-icon {
    transform: scale(1.15) rotate(8deg);
}

.visual-builder-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    text-align: left;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.visual-builder-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
    margin-top: 0.5rem;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

.visual-builder-cta svg {
    color: white;
    opacity: 0.9;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.visual-builder-cta:hover svg {
    opacity: 1;
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .visual-builder-cta {
        flex-direction: column;
        text-align: center;
        padding: 1.75rem 1.5rem;
        gap: 1.25rem;
    }
    
    .visual-builder-title,
    .visual-builder-desc {
        text-align: center;
    }
    
    .visual-builder-cta svg {
        display: none;
    }
}

/* ===== AI Assistant Tab ===== */
.ai-config-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    margin-top: 24px;
}

.ai-config-container > .rr-page-header {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
    .ai-config-container {
        grid-template-columns: 1fr;
    }
}

.ai-config-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ai-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ===== XP & Leveling Tab ===== */
.xp-config-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

/* Master switch spans full width at top */
.xp-config-container .selfroles-master-switch,
.xp-config-container .rr-page-header {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
    .xp-config-container {
        grid-template-columns: 1fr;
    }
}

.xp-config-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.xp-config-panel .config-card {
    background: rgba(18, 20, 32, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 14px 30px rgba(10, 12, 20, 0.32);
}

.xp-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.xp-preview-panel .config-card {
    background: rgba(18, 20, 32, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 14px 30px rgba(10, 12, 20, 0.32);
}

.xp-status-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.xp-status-card .status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.xp-status-card .status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.xp-status-card .status-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(147, 112, 219, 0.3);
    transform: translateX(4px);
}

.xp-status-card .status-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    min-width: 120px;
}

.xp-status-card .status-value {
    font-weight: 700;
    color: var(--text);
    font-size: 16px;
    text-align: right;
}

/* Emoji rendering fix */
span.emoji {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* XP Exclusion Sections */
.exclusion-section {
    margin-bottom: 0.5rem;
    padding: 14px;
    background: rgba(147, 112, 219, 0.05);
    border: 1px solid rgba(147, 112, 219, 0.15);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.exclusion-section:hover {
    background: rgba(147, 112, 219, 0.08);
    border-color: rgba(147, 112, 219, 0.25);
}

.xp-config-panel .exclusion-section {
    background: rgba(18, 20, 32, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.xp-config-panel .exclusion-section:hover {
    background: rgba(18, 20, 32, 0.7);
    border-color: rgba(148, 163, 184, 0.25);
}

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

.exclusion-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

/* Compact Radio Groups */
.radio-group.inline {
    display: flex;
    gap: 8px;
}

.radio-group.compact .radio-option {
    padding: 6px 10px;
    margin: 0;
}

.radio-option.mini {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(147, 112, 219, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.radio-option.mini::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(147, 112, 219, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.radio-option.mini:hover {
    background: rgba(26, 26, 46, 0.8);
    border-color: rgba(147, 112, 219, 0.4);
}

.radio-option.mini:hover::before {
    transform: translateX(100%);
}

.radio-option.mini:has(input:checked) {
    background: rgba(147, 112, 219, 0.25);
    border-color: rgba(147, 112, 219, 0.6);
    box-shadow: 0 0 12px rgba(147, 112, 219, 0.3);
}

.radio-option.mini input {
    display: none;
}

.radio-option.mini span {
    color: var(--text-dim);
    transition: color 0.2s ease;
}

.radio-option.mini:has(input:checked) span {
    color: var(--primary);
    font-weight: 600;
}

/* Compact XP Multiplier */
.xp-multiplier-container.compact {
    padding: 16px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 12px;
}

.xp-multiplier-container.compact .multiplier-labels {
    justify-content: space-between;
}

/* Exclusion Content Wrapper */
.exclusion-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Tags List Styling */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    min-height: 32px;
    padding: 8px;
    background: rgba(26, 26, 46, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(147, 112, 219, 0.1);
    color: var(--text-dim);
}

/* Exclusion dropdowns */
.role-select,
.channel-select {
    width: 100%;
    max-width: 100%;
    padding: 11px 14px 11px 12px;
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(147, 112, 219, 0.35);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    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='%239370db' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.role-select:hover,
.channel-select:hover {
    border-color: rgba(147, 112, 219, 0.5);
    background: rgba(26, 26, 46, 0.9);
}

.role-select:focus,
.channel-select:focus {
    border-color: rgba(147, 112, 219, 0.7);
    box-shadow: 0 0 0 3px rgba(147, 112, 219, 0.2);
    background: rgba(26, 26, 46, 0.95);
}

.role-select option,
.channel-select option {
    background: #1a1a2e;
    color: var(--text);
    padding: 8px;
}

.tags-list .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(147, 112, 219, 0.15);
    border: 1px solid rgba(147, 112, 219, 0.3);
    border-radius: 16px;
    font-size: 12px;
    color: var(--text);
}

.tags-list .tag .remove-tag {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.tags-list .tag .remove-tag:hover {
    opacity: 1;
}

/* Personality Grid */
.personality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

@media (max-width: 768px) {
    .personality-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.personality-card {
    background: rgba(26, 26, 46, 0.7);
    border: 2px solid rgba(147, 112, 219, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.personality-card:hover {
    border-color: #9370DB;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.18), rgba(0, 206, 209, 0.12));
    box-shadow: 0 0 20px rgba(147, 112, 219, 0.4), 0 0 35px rgba(0, 206, 209, 0.25);
}

.personality-card.selected {
    border-color: #9370DB;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.2), rgba(0, 206, 209, 0.1));
    box-shadow: 0 0 20px rgba(147, 112, 219, 0.4);
}

.personality-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.personality-name {
    font-weight: 600;
    margin-bottom: 4px;
    color: #fff;
    font-size: 14px;
}

.personality-description {
    font-size: 11px;
    color: #999;
    line-height: 1.4;
}

/* AI Behavior Sliders */
.ai-slider-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
}

.ai-slider-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
}

.ai-slider-header {
    margin-bottom: 8px;
}

.ai-slider-title {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}

.ai-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 0 2px;
}

.ai-slider-labels span {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

.ai-behavior-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #9370DB, #00CED1);
    outline: none;
    cursor: pointer;
    margin: 4px 0;
}

.ai-behavior-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #9370DB;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ai-behavior-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 12px rgba(147, 112, 219, 0.5);
}

.ai-behavior-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #9370DB;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ai-slider-description {
    margin-top: 8px;
    font-size: 13px;
    color: #9370DB;
    font-style: italic;
    min-height: 20px;
}

/* Custom Prompt Section */
.custom-prompt-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(147, 112, 219, 0.3);
}

.custom-prompt-section h4 {
    margin-bottom: 0.5rem;
}

.premium-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* AI Status Card */
.ai-status-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(26, 26, 46, 0.7));
}

/* AI Settings Card - Disabled State */
#ai-settings-card,
.ai-dependent-settings {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

#ai-settings-card.disabled,
.ai-dependent-settings.disabled,
.selfroles-preview-section.disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    filter: grayscale(1) brightness(0.6) !important;
    transition: all 0.3s ease !important;
}

.xp-dependent-settings.disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    filter: grayscale(1) brightness(0.6) !important;
    transition: all 0.3s ease !important;
}

.xp-dependent-settings.disabled.config-card,
.xp-dependent-settings.disabled.config-card:hover {
    opacity: 0.3 !important;
    pointer-events: none !important;
    filter: grayscale(1) brightness(0.6) !important;
}

/* Economy Dependent Settings - Disabled State */
.economy-dependent-settings.disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    filter: grayscale(1) brightness(0.6) !important;
    transition: all 0.3s ease !important;
}

.economy-dependent-settings.disabled.config-card,
.economy-dependent-settings.disabled.config-card:hover {
    opacity: 0.3 !important;
    pointer-events: none !important;
    filter: grayscale(1) brightness(0.6) !important;
}

.selfroles-preview-section.disabled.config-card,
.selfroles-preview-section.disabled.config-card:hover {
    opacity: 0.3 !important;
    pointer-events: none !important;
    filter: grayscale(1) brightness(0.6) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.selfroles-preview-section.disabled.config-card::before {
    opacity: 0 !important;
}

#ai-settings-card.disabled .personality-card,
.ai-dependent-settings.disabled .personality-card,
.selfroles-preview-section.disabled {
    cursor: not-allowed;
}

#ai-settings-card.disabled .personality-card:hover,
.ai-dependent-settings.disabled .personality-card:hover {
    transform: none;
    border-color: rgba(147, 112, 219, 0.3);
    background: rgba(26, 26, 46, 0.7);
    box-shadow: none;
}

/* Self-Roles Preview Toggle Styles */
.expand-toggle {
    transition: transform 0.3s ease, color 0.3s ease;
}

.expand-toggle.expanded {
    transform: rotate(180deg);
    color: var(--primary);
}

/* Self-Role Variant Picker */
.variant-picker {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.variant-option {
    cursor: pointer;
    flex: 1;
    min-width: 80px;
}

.variant-option input[type="radio"] {
    display: none;
}

.variant-option-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}

.variant-option input[type="radio"]:checked + .variant-option-body {
    border-color: var(--primary, #9370DB);
    background: rgba(147, 112, 219, 0.15);
}

.variant-option:hover .variant-option-body {
    border-color: rgba(147, 112, 219, 0.5);
    background: rgba(255,255,255,0.07);
}

.variant-icon {
    font-size: 22px;
    line-height: 1;
}

.variant-label {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 500;
    white-space: nowrap;
}

.variant-option input[type="radio"]:checked + .variant-option-body .variant-label {
    color: var(--text);
}

/* Button columns picker */
.btn-columns-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.btn-col-opt {
    cursor: pointer;
}
.btn-col-opt input[type="radio"] {
    display: none;
}
.btn-col-opt span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn-col-opt input[type="radio"]:checked + span {
    border-color: var(--primary, #9370DB);
    background: rgba(147, 112, 219, 0.2);
    color: var(--text);
}
.btn-col-opt:hover span {
    border-color: rgba(147, 112, 219, 0.5);
}

/* Button style/color picker */
.btn-style-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.btn-style-opt {
    cursor: pointer;
}
.btn-style-opt input[type="radio"] {
    display: none;
}
.btn-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid transparent;
    transition: opacity 0.15s, border-color 0.15s;
    opacity: 0.65;
}
.btn-style-opt input[type="radio"]:checked + .btn-swatch {
    opacity: 1;
    border-color: rgba(255,255,255,0.4);
}
.btn-swatch-gray  { background: rgba(79,84,92,0.85);   color: #fff; }
.btn-swatch-blue  { background: rgba(88,101,242,0.85);  color: #fff; }
.btn-swatch-green { background: rgba(87,242,135,0.2);   color: #57f287; border-color: rgba(87,242,135,0.5); }
.btn-swatch-red   { background: rgba(237,66,69,0.2);    color: #ed4245; border-color: rgba(237,66,69,0.5); }

/* Reaction role preview bubbles */
.discord-reactions-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 8px 4px;
}
.discord-reaction-bubble {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
}
.discord-reaction-bubble:hover {
    background: rgba(255,255,255,0.13);
}
.reaction-emoji {
    font-size: 17px;
    line-height: 1;
}
.reaction-count {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
}

#selfrolePrevewContainer {
    max-height: 400px;
    overflow-y: auto;
    transition: max-height 0.3s ease;
}

#selfrolePrevewContainer.expanded {
    max-height: 80vh;
    overflow-y: auto;
}

/* Self-Roles 1:1 Scale Preview */
#selfrolePanelPreview.scale-1-1 {
    transform: scale(1);
    transform-origin: top left;
}

#selfrolePanelPreview.scale-1-1 .embed-preview {
    max-width: 516px;
    font-size: 14px;
}

#selfrolePanelPreview.scale-1-1 .embed-title {
    font-size: 16px;
    font-weight: 600;
}

#selfrolePanelPreview.scale-1-1 .embed-description {
    font-size: 14px;
    line-height: 1.375;
}

#selfrolePanelPreview.scale-1-1 .embed-footer {
    font-size: 12px;
}

#selfrolePanelPreview.scale-1-1 .discord-select-card {
    max-width: 516px;
    font-size: 14px;
}

#selfrolePanelPreview.scale-1-1 .discord-option {
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

#selfrolePanelPreview.scale-1-1 .discord-option-emoji {
    font-size: 22px;
    width: 22px;
    height: 22px;
    min-width: 22px;
    flex-shrink: 0;
}

#selfrolePanelPreview.scale-1-1 .discord-option-emoji img.custom-emoji {
    width: 22px !important;
    height: 22px !important;
}

#selfrolePanelPreview.scale-1-1 .discord-option-content {
    gap: 0.3rem;
}

#selfrolePanelPreview.scale-1-1 .discord-option-title {
    font-size: 16px;
    line-height: 1.2;
}

#selfrolePanelPreview.scale-1-1 .discord-option-description {
    font-size: 14px;
    line-height: 1.375;
    color: #949ba4;
}

.status-grid {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.status-label {
    font-size: 13px;
    color: #999;
}

.status-value {
    font-weight: 600;
    color: #fff;
}

.status-badge {
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.status-enabled {
    background: rgba(45, 122, 79, 0.8);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.5);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
}

.status-disabled {
    background: rgba(68, 68, 68, 0.5);
    color: #999;
    border: 1px solid #666;
}

/* Preview Chat */
.ai-preview-chat {
    background: rgba(10, 10, 10, 0.6);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    min-height: 200px;
    border: 1px solid rgba(147, 112, 219, 0.2);
}

.preview-message {
    margin-bottom: 16px;
}

.preview-message:last-child {
    margin-bottom: 0;
}

.message-author {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #9370DB;
}

.ai-message .message-author {
    color: #00CED1;
}

.message-content {
    background: rgba(26, 26, 46, 0.6);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid #9370DB;
    transition: opacity 0.3s ease;
    color: var(--text);
    line-height: 1.5;
}

.ai-message .message-content {
    border-left-color: #00CED1;
}

/* Feature List */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.feature-list li {
    padding: 0.65rem 1rem;
    color: #c5c5d8;
    font-size: 0.95rem;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border-left: 2px solid transparent;
}

.feature-list li:hover {
    color: #e0e0ff;
    background: rgba(147, 112, 219, 0.08);
    border-left-color: var(--primary);
    transform: translateX(4px);
}

/* Example Commands */
.example-commands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.example-commands code {
    background: rgba(147, 112, 219, 0.15);
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    border: 1px solid rgba(0, 206, 209, 0.3);
    font-size: 0.85rem;
    color: var(--light-blue);
    font-family: 'Courier New', monospace;
    font-weight: 500;
    display: inline-block;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.example-commands code:hover {
    background: rgba(0, 206, 209, 0.25);
    border-color: var(--light-blue);
    box-shadow: 0 0 18px rgba(0, 206, 209, 0.4), 0 0 30px rgba(147, 112, 219, 0.2);
}

/* Custom Commands List */
.custom-commands-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.custom-command-card {
    background: rgba(26, 26, 46, 0.7);
    border: 2px solid rgba(147, 112, 219, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.2s ease;
    animation: fadeIn 0.3s ease;
}

.custom-command-card:hover {
    border-color: rgba(147, 112, 219, 0.6);
    box-shadow: 0 0 20px rgba(147, 112, 219, 0.3), 0 0 35px rgba(0, 206, 209, 0.2);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.1), rgba(0, 206, 209, 0.05));
}

.custom-command-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.custom-command-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-command-name code {
    background: rgba(147, 112, 219, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--light-blue);
}

.custom-command-actions {
    display: flex;
    gap: 0.5rem;
}

.custom-command-response {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid rgba(147, 112, 219, 0.5);
    max-height: 120px;
    overflow-y: auto;
}

.custom-command-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.custom-command-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.enabled {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.disabled {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.custom-commands-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-dim);
}

.custom-commands-empty h3 {
    color: var(--text);
    margin-bottom: 0.5rem;
}

.custom-commands-empty p {
    margin-bottom: 1.5rem;
}

/* ===== MEE6-style Collapsible Cards ===== */
.collapsible-card {
    overflow: hidden;
}

.collapsible-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0;
    margin: -1.5rem;
    padding: 1.5rem;
    transition: background 0.2s ease;
}

.collapsible-card .card-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.collapsible-card .card-header h3 {
    margin: 0;
}

.collapsible-card .collapse-icon {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    color: var(--text-dim);
}

.collapsible-card.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.collapsible-card .card-content {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.collapsible-card.collapsed .card-content {
    display: none;
}

/* ===== Radio Group Styles (MEE6-style) ===== */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.radio-option:hover {
    background: rgba(147, 112, 219, 0.1);
}

.radio-option input[type="radio"] {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.radio-option input[type="radio"]:checked + .radio-label strong {
    color: var(--primary);
}

.radio-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.radio-label strong {
    color: var(--text);
    font-weight: 600;
}

.radio-label small {
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* ===== Variable Chips (MEE6-style) ===== */
.variable-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.variable-chip {
    background: rgba(147, 112, 219, 0.2);
    color: var(--light-blue);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: 'Fira Code', monospace;
    cursor: pointer;
    border: 1px solid rgba(147, 112, 219, 0.3);
    transition: all 0.2s ease;
}

.variable-chip:hover {
    background: rgba(147, 112, 219, 0.35);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* ===== Tags List (for No-XP roles/channels) ===== */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 40px;
    margin-top: 0.75rem;
}

.tag-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(99, 102, 241, 0.2);
    color: var(--text);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 1px solid rgba(99, 102, 241, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: tagSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tagSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.tag-chip:hover {
    box-shadow: 0 0 15px rgba(147, 112, 219, 0.3), 0 0 25px rgba(0, 206, 209, 0.2);
    border-color: rgba(147, 112, 219, 0.5);
}

.tag-chip .tag-remove {
    cursor: pointer;
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1;
    transition: all 0.2s ease;
    padding: 2px 4px;
    border-radius: 4px;
}

.tag-chip .tag-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    transform: scale(1.1);
}

.tag-chip.role-tag {
    background: rgba(147, 112, 219, 0.2);
    border-color: rgba(147, 112, 219, 0.3);
}

.tag-chip.role-tag:hover {
    background: rgba(147, 112, 219, 0.3);
    border-color: rgba(147, 112, 219, 0.5);
}

.tag-chip.channel-tag {
    background: rgba(0, 206, 209, 0.2);
    border-color: rgba(0, 206, 209, 0.3);
}

.tag-chip.channel-tag:hover {
    background: rgba(0, 206, 209, 0.3);
    border-color: rgba(0, 206, 209, 0.5);
}

/* ===== Rank Card Preview ===== */
.rank-card-preview {
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.3), rgba(0, 206, 209, 0.2));
    border-radius: 12px;
    padding: 1rem;
    overflow: hidden;
}

.rank-card-sample {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    position: relative;
}

.rank-card-avatar {
    position: relative;
    flex-shrink: 0;
}

.rank-card-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--primary);
}

.rank-card-avatar .online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: #22c55e;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.5);
}

.rank-card-info {
    flex: 1;
    min-width: 0;
}

.rank-card-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

.rank-card-xp {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.rank-card-progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.rank-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--light-blue));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.rank-card-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.rank-badge, .level-badge {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 600;
}

.rank-badge span, .level-badge span {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

/* ===== Rank Card Editor Modal ===== */
.rank-card-modal {
    max-width: 600px;
}

.rank-card-modal .modal-body {
    padding: 1.5rem;
}

.color-picker-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.color-swatch:hover, .color-swatch.active {
    transform: scale(1.1);
    border-color: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.background-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.background-option {
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.background-option:hover, .background-option.active {
    border-color: var(--primary);
    transform: scale(1.02);
}

.background-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.background-option.empty {
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.opacity-slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.opacity-slider-container input[type="range"] {
    flex: 1;
}

.opacity-value {
    min-width: 40px;
    text-align: right;
    color: var(--text);
    font-weight: 600;
}

/* ==========================================
   MEE6-Style Plugins Page
   ========================================== */

/* Plugins Hero Banner */
.plugins-hero {
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.3), rgba(0, 206, 209, 0.2));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
    border: 1px solid rgba(147, 112, 219, 0.3);
}

.plugins-hero h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #fff, #9370DB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plugins-hero p {
    color: var(--text-dim);
    font-size: 1.1rem;
}

/* Filter Chips */
.plugins-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.filter-chip {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Plugin Sections */
.plugins-section {
    margin-bottom: 2.5rem;
}

.plugins-section .section-title {
    font-size: 1.3rem;
    color: var(--text);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}

/* Plugins Grid */
.plugins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Plugin Card */
.plugin-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plugin-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(147, 112, 219, 0.25), 0 0 35px rgba(0, 206, 209, 0.15);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.1), rgba(0, 206, 209, 0.05));
}

.plugin-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.plugin-card h3 {
    font-size: 1rem;
    color: var(--text);
    margin: 0;
}

.plugin-card p {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.4;
    flex-grow: 1;
}

/* Plugin Toggle Button */
.plugin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
}

.plugin-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.plugin-toggle.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
    color: #22c55e;
}

.plugin-toggle.active:hover {
    background: rgba(34, 197, 94, 0.25);
}

.plugin-toggle.premium-only {
    background: rgba(147, 112, 219, 0.15);
    border-color: rgba(147, 112, 219, 0.5);
    color: #9370DB;
}

.plugin-toggle.premium-only:hover {
    background: rgba(147, 112, 219, 0.25);
}

.toggle-icon {
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .plugins-grid {
        grid-template-columns: 1fr;
    }
    
    .plugins-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }
    
    .filter-chip {
        white-space: nowrap;
    }
    
    .plugins-hero h1 {
        font-size: 1.5rem;
    }
}
/* ============= AUDIT LOGS & REPUTATION STYLES ============= */

/* Logging controls and compact layout */
/* ============= LOGGING CONFIGURATION SECTION ============= */

/* Logs Sub-Tab Navigation */
.logs-subtab-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}

.logs-subtab-btn {
    padding: 0.65rem 1.2rem;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.logs-subtab-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(147, 112, 219, 0.08);
}

.logs-subtab-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Logs Sub-Tab Panels */
.logs-subtab-panel {
    display: none;
}

.logs-subtab-panel.active {
    display: block;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Server Logs Header */
.server-logs-header-wrap {
    margin-bottom: 2rem;
}

.server-logs-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.server-logs-header-text {
    flex: 1;
    min-width: 0;
}

.server-logs-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
}

.server-logs-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.server-logs-tier-badge {
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.server-logs-tier-inner {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

.server-logs-channel-usage {
    color: var(--text-secondary);
    margin-top: 0.25rem;
    display: block;
    font-size: 0.82rem;
}

.server-logs-search-wrap {
    margin-top: 1.5rem;
}

.server-logs-upgrade-prompt {
    margin-top: 1.5rem;
    display: none;
}

.server-logs-upgrade-btn {
    margin-top: 0.5rem;
}

/* Log event card name container */
.log-event-name-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.log-event-category-emoji {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.log-event-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

/* Log error/empty state message */
.log-status-message {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.log-status-message.log-status-error {
    color: var(--error, #ef4444);
}

/* Main logging controls wrapper */
.log-controls {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Info/Help box */
.log-info-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 1rem;
    line-height: 1.5;
    font-size: 0.9rem;
}

.log-info-box strong {
    color: rgb(147, 112, 219);
    display: block;
    margin-bottom: 0.5rem;
}

/* Search input section */
.log-search-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.log-search-input {
    width: 100%;
    max-width: 500px;
    padding: 0.7rem 1rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
}

.log-search-input::placeholder {
    color: var(--text-secondary);
}

.log-search-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 8px rgba(147, 112, 219, 0.2);
}

/* Quick action buttons */
.log-quick-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.log-quick-actions button {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.log-quick-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(147, 112, 219, 0.1);
}

/* Hint text */
.log-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.75rem;
    line-height: 1.5;
}

/* Categories container */
.log-categories-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Category card (expandable section) */
.log-category-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-bg);
    transition: all 0.2s ease;
}

.log-category-card:hover {
    border-color: rgba(147, 112, 219, 0.5);
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.1);
}

/* Category header (clickable to expand/collapse) */
.log-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.2rem;
    background: linear-gradient(90deg, rgba(147, 112, 219, 0.06), rgba(147, 112, 219, 0.02));
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.log-category-header:hover {
    background: linear-gradient(90deg, rgba(147, 112, 219, 0.1), rgba(147, 112, 219, 0.05));
}

.log-category-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}

.log-category-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.log-category-count {
    font-size: 0.75rem;
    color: rgba(147, 112, 219, 0.8);
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(147, 112, 219, 0.15);
    border: 1px solid rgba(147, 112, 219, 0.25);
    font-weight: 600;
    flex-shrink: 0;
}

.log-collapse-btn {
    background: none;
    border: none;
    color: rgba(147, 112, 219, 0.7);
    cursor: pointer;
    padding: 0.4rem;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.log-collapse-btn:hover {
    color: var(--primary);
    transform: scale(1.15);
}

/* When collapsed, just show header */
.log-category-card.collapsed .log-collapse-btn {
    transform: rotate(-90deg);
}

.log-category-card.collapsed .log-collapse-btn:hover {
    transform: rotate(-90deg) scale(1.15);
}

/* Category body - grid layout for compact display */
.log-category-body {
    padding: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.9rem;
}

.log-category-card.collapsed .log-category-body {
    display: none;
}

.log-category-card.empty-search {
    opacity: 0.5;
}

/* Individual event row (compact card style) */
.log-event-row {
    display: grid;
    grid-template-columns: 28px 1fr 36px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.05), rgba(147, 112, 219, 0.02));
    transition: all 0.2s ease;
}

.log-event-row:hover {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.12), rgba(147, 112, 219, 0.06));
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.15);
    transform: translateY(-1px);
}

/* Event toggle/status indicator */
.log-event-toggle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.log-event-toggle.enabled {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

.log-event-toggle.enabled::after {
    content: '✓';
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
}

.log-event-toggle.disabled {
    background: rgba(107, 114, 128, 0.1);
    border-color: #9ca3af;
}

/* Event name */
.log-event-name {
    font-weight: 500;
    color: var(--text);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Channel dropdown - always visible in card layout */
.log-channel-select {
    display: block;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background: rgba(26, 30, 50, 0.8);
    border: 1px solid rgba(147, 112, 219, 0.35);
    border-radius: 12px;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    appearance: none;
    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='%239370DB' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    min-height: 44px;
}

.log-channel-select:hover,
.log-channel-select:focus {
    border-color: rgba(147, 112, 219, 0.65);
    background: rgba(32, 36, 56, 0.9);
    box-shadow: 0 0 12px rgba(147, 112, 219, 0.25);
    outline: none;
}

.log-channel-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(20, 24, 40, 0.6);
    border-color: rgba(100, 100, 120, 0.2);
}

/* Color picker */
.log-color-picker {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px;
    flex-shrink: 0;
}

.log-color-picker:hover {
    border-color: var(--primary);
    transform: scale(1.12);
    box-shadow: 0 0 14px rgba(147, 112, 219, 0.4);
}

.log-color-picker:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Filter Container */
#auditActionFilter,
#auditStartDate {
    background: var(--input-bg, #1a1a2e);
    border: 1px solid var(--border, #3a3a6a);
    color: var(--text, #ffffff);
    padding: 0.6rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
}

#auditActionFilter:hover,
#auditStartDate:hover {
    border-color: var(--primary, #9370DB);
}

/* Searchable Combobox for Audit Filters */
.audit-combobox {
    position: relative;
    width: 100%;
}

.audit-combobox-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--input-bg, #1a1a2e);
    border: 1px solid var(--border, #3a3a6a);
    color: var(--text, #ffffff);
    padding: 0.6rem 2rem 0.6rem 0.6rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: text;
    transition: border-color 0.15s ease;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23a78bfa" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 18px 18px;
}

.audit-combobox-input::placeholder {
    color: var(--text-secondary, #888);
}

.audit-combobox-input:focus,
.audit-combobox-input:hover {
    outline: none;
    border-color: var(--primary, #9370DB);
}

.audit-combobox.open .audit-combobox-input {
    border-color: var(--primary, #9370DB);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.audit-combobox-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--primary, #9370DB);
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.audit-combobox.open .audit-combobox-dropdown {
    display: block;
}

.audit-combobox-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text, #fff);
    transition: background 0.1s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.audit-combobox-option:hover,
.audit-combobox-option.highlighted {
    background: rgba(147, 112, 219, 0.15);
    color: var(--primary, #a78bfa);
}

.audit-combobox-option.selected {
    background: rgba(147, 112, 219, 0.2);
    font-weight: 600;
}

.audit-combobox-option.all-option {
    color: var(--text-secondary, #888);
    font-style: italic;
    border-bottom: 1px solid var(--border, #3a3a6a);
    margin-bottom: 2px;
}

.audit-combobox-option .option-id {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.audit-combobox-no-results {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
    font-style: italic;
}

/* Button Styles for Audit */
.btn-secondary {
    transition: all 0.2s ease;
}

.btn-success {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid #22c55e;
}

.btn-success:hover {
    background: rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}

/* Audit Log Table */
table {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

thead tr {
    background: var(--card-bg, #2a2a4a);
}

tbody tr:hover {
    background: rgba(147, 112, 219, 0.05);
}

/* Code blocks in tables */
code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* Pagination Controls */
#auditPrevBtn:disabled,
#auditNextBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Stats Cards */
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(147, 112, 219, 0.1);
}

/* Leaderboard Table Specific */
tbody tr {
    transition: background 0.2s ease;
}

tbody tr:nth-child(even) {
    background: rgba(147, 112, 219, 0.02);
}

/* Medal Emojis */
[style*="medal"] {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

/* Loading State */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Audit Logs Styling */
/* ===== AUDIT LOGS REDESIGN ===== */
.audit-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.audit-title {
    margin: 0 0 0.25rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.audit-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    background: rgba(0, 206, 209, 0.12);
    border: 1px solid rgba(0, 206, 209, 0.3);
    border-radius: 8px;
    color: #00ced1;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.audit-export-btn:hover {
    background: rgba(0, 206, 209, 0.22);
    border-color: rgba(0, 206, 209, 0.55);
    box-shadow: 0 0 14px rgba(0, 206, 209, 0.2);
}

.audit-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.audit-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.audit-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.audit-stat-total::before { background: linear-gradient(135deg, rgba(147, 112, 219, 0.08), transparent 60%); }
.audit-stat-month::before  { background: linear-gradient(135deg, rgba(0, 206, 209, 0.08), transparent 60%); }
.audit-stat-topmod::before { background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), transparent 60%); }

.audit-stat-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.audit-stat-card:hover::before { opacity: 1; }

.audit-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
}

.audit-stat-total .audit-stat-icon { background: rgba(147, 112, 219, 0.15); color: #9370db; }
.audit-stat-month  .audit-stat-icon { background: rgba(0, 206, 209, 0.15); color: #00ced1; }
.audit-stat-topmod .audit-stat-icon { background: rgba(255, 193, 7, 0.15); color: #ffc107; }

.audit-stat-content { position: relative; z-index: 1; }

.audit-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.audit-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 0.15rem;
}

/* Filter Bar */
.audit-filter-bar {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
}

.audit-filter-row {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.audit-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 160px;
}

.audit-filter-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.audit-filter-select,
.audit-filter-input {
    padding: 0.6rem 0.9rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.audit-filter-select:focus,
.audit-filter-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(147, 112, 219, 0.18);
}

.audit-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-shrink: 0;
}

.audit-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.audit-search-btn:hover {
    background: var(--primary-hover, #7b5ea7);
    box-shadow: 0 4px 14px rgba(147, 112, 219, 0.35);
}

.audit-reset-btn {
    padding: 0.6rem 0.9rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.audit-reset-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* Table */
.audit-table-container {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.audit-table thead {
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border);
}

.audit-table th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.audit-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background-color 0.15s ease;
}

.audit-table tbody tr:last-child { border-bottom: none; }

.audit-table tbody tr:hover {
    background: rgba(147, 112, 219, 0.05);
}

.audit-table td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
}

.audit-empty-state {
    text-align: center;
    padding: 3rem 1rem !important;
    color: var(--text-secondary);
    vertical-align: middle;
}

.audit-empty-state > * {
    display: block;
    margin: 0 auto;
}

/* Action Badge Pills */
.audit-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.audit-action-badge.badge-ban    { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.audit-action-badge.badge-kick   { background: rgba(249,115,22,0.15); color: #fb923c; border: 1px solid rgba(249,115,22,0.25); }
.audit-action-badge.badge-warn   { background: rgba(234,179,8,0.15); color: #facc15; border: 1px solid rgba(234,179,8,0.25); }
.audit-action-badge.badge-mute   { background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.25); }
.audit-action-badge.badge-unmute { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.audit-action-badge.badge-kudos  { background: rgba(168,85,247,0.15); color: #c084fc; border: 1px solid rgba(168,85,247,0.25); }
.audit-action-badge.badge-lock   { background: rgba(156,163,175,0.15); color: #9ca3af; border: 1px solid rgba(156,163,175,0.25); }
.audit-action-badge.badge-other  { background: rgba(147,112,219,0.12); color: var(--primary); border: 1px solid rgba(147,112,219,0.2); }

/* User ID chips */
.audit-uid-chip {
    display: inline-block;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    font-family: monospace;
    font-size: 0.82rem;
    color: var(--text-secondary);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Avatar + username user chip */
.audit-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
}

.audit-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
}

.audit-user-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(147, 112, 219, 0.25);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
}

.audit-user-chip-inner {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}

.audit-user-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.audit-user-name-unresolved {
    color: var(--text-secondary);
    font-family: monospace;
    font-size: 0.82rem;
}

/* ID revealed on chip hover — hidden by default, shown on hover */
.audit-user-id-reveal {
    font-family: monospace;
    font-size: 0.7rem;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.18s ease, opacity 0.18s ease;
}

.audit-user-chip:hover .audit-user-id-reveal {
    max-height: 1.2em;
    opacity: 1;
    pointer-events: auto;
}

.audit-user-id-reveal:hover {
    text-decoration: underline;
}

/* Combobox option with avatar - additional elements */
.audit-combobox-option-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.audit-combobox-option-avatar-placeholder {
    background: rgba(147, 112, 219, 0.25);
    color: var(--primary);
}

.audit-combobox-option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.05rem;
}

.audit-combobox-option-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-combobox-option-id {
    font-family: monospace;
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Top mod stat card with avatar */
.audit-topmod-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.audit-topmod-count {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: 0.1rem;
}

.audit-stat-topmod .audit-stat-value {
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Date styling */
.audit-date-primary {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
}

.audit-date-secondary {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Reason text */
.audit-reason {
    color: var(--text-secondary);
    font-size: 0.88rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pagination */
.audit-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.audit-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.audit-page-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--text-primary);
    background: rgba(147, 112, 219, 0.08);
}

.audit-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.audit-page-info {
    font-size: 0.88rem;
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 80px;
    text-align: center;
}

#auditPageInfo {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Server Logs Grid & Cards Styling */
.logs-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.log-event-card {
    background: linear-gradient(135deg, rgba(20, 24, 40, 0.65) 0%, rgba(25, 30, 55, 0.6) 60%),
                radial-gradient(1200px circle at 0% 0%, rgba(147, 112, 219, 0.15), transparent 40%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(147, 112, 219, 0.35);
    border-radius: 22px;
    padding: 1.85rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Neon glow effect on hover */
.log-event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(147, 112, 219, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 20px;
}

.log-event-card:hover {
    border-color: rgba(147, 112, 219, 0.6);
    transform: translateY(-3px);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(147, 112, 219, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(22, 26, 46, 0.75) 0%, rgba(28, 34, 62, 0.7) 60%);
}

.log-event-card:hover::before {
    opacity: 1;
}

.log-event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.log-event-card-disabled {
    opacity: 0.45;
    background: linear-gradient(135deg, rgba(40, 45, 70, 0.45) 0%, rgba(35, 40, 65, 0.4) 60%);
    border-color: rgba(120, 120, 140, 0.22);
}

.log-event-card-disabled:hover {
    border-color: rgba(100, 100, 120, 0.2);
    box-shadow: none;
    transform: none;
}

.log-event-card-disabled .log-channel-select,
.log-event-card-disabled .log-color-picker {
    pointer-events: none;
}

.log-event-card-disabled .log-color-picker:hover,
.log-event-card-disabled .log-channel-select:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(100, 100, 120, 0.2);
}

.log-event-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

/* Channel Control */
.log-channel-control {
    width: 100%;
    margin-bottom: 1.5rem;
}

.log-channel-control label {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.log-channel-select {
    width: 100%;
    padding: 0.85rem 2.5rem 0.85rem 1rem;
    background: rgba(24, 28, 48, 0.7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(147, 112, 219, 0.35);
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23a78bfa" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    min-height: 2.25rem;
    box-sizing: border-box;
}

.log-channel-select:hover {
    border-color: rgba(147, 112, 219, 0.6);
    background: rgba(26, 32, 58, 0.75);
    box-shadow: 0 0 18px rgba(147, 112, 219, 0.18);
}

.log-channel-select:focus {
    outline: none;
    border-color: rgba(147, 112, 219, 0.8);
    box-shadow: 0 0 0 3px rgba(147, 112, 219, 0.22);
    background: rgba(28, 34, 62, 0.8);
}

/* Color Control */
.log-color-control {
    width: 100%;
}

.log-color-control label {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    text-align: center;
}

.log-color-picker {
    width: 100%;
    height: 56px;
    border: 1px solid rgba(147, 112, 219, 0.35);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: none;
    padding: 0;
    box-sizing: border-box;
}

.log-color-picker:hover {
    box-shadow: 0 0 18px rgba(147, 112, 219, 0.28), inset 0 0 12px rgba(147, 112, 219, 0.08);
    border-color: rgba(147, 112, 219, 0.55);
}

.log-color-picker:focus {
    outline: none;
    box-shadow: 0 0 22px rgba(147, 112, 219, 0.36), inset 0 0 12px rgba(147, 112, 219, 0.12);
    border-color: rgba(147, 112, 219, 0.75);
}

/* Rounded color swatch for WebKit */
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 16px;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 16px;
}

/* Firefox color input rounding */
input[type="color"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 16px;
}

/* Responsive Tables */
@media (max-width: 1024px) {
    table {
        font-size: 0.85rem;
    }
    
    table th,
    table td {
        padding: 0.75rem !important;
    }
    
    .audit-filters-grid {
        grid-template-columns: 1fr;
    }
    
    .audit-actions-buttons {
        flex-direction: column;
    }
    
    .audit-actions-buttons button {
        width: 100%;
    }
    
    .logs-events-grid {
        grid-template-columns: 1fr;
    }
    
    .logs-header-section {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .logs-actions-group {
        width: 100%;
    }
    
    .logs-actions-group button {
        flex: 1;
    }
}
/* ===== REPUTATION REDESIGN ===== */
.rep-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.rep-title {
    margin: 0 0 0.25rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Segmented Control */
.rep-segment-wrap {
    margin-bottom: 1.75rem;
}

.rep-segment {
    display: inline-flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    flex-wrap: wrap;
}

.rep-segment-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.rep-segment-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}

.rep-segment-btn.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.35);
}

/* Stats Grid */
.rep-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.rep-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.rep-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.rep-stat-members::before { background: linear-gradient(135deg, rgba(147, 112, 219, 0.08), transparent 60%); }
.rep-stat-total::before   { background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), transparent 60%); }
.rep-stat-avg::before     { background: linear-gradient(135deg, rgba(0, 206, 209, 0.08), transparent 60%); }

.rep-stat-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.rep-stat-card:hover::before { opacity: 1; }

.rep-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
}

.rep-stat-members .rep-stat-icon { background: rgba(147, 112, 219, 0.15); color: #9370db; }
.rep-stat-total   .rep-stat-icon { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.rep-stat-avg     .rep-stat-icon { background: rgba(0, 206, 209, 0.15); color: #00ced1; }

.rep-stat-content { position: relative; z-index: 1; }

.rep-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.rep-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 0.15rem;
}

/* Leaderboard Table */
.rep-table-container {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.rep-table thead {
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border);
}

.rep-table th {
    padding: 0.85rem 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rep-rank-col { text-align: center; width: 70px; }
.rep-member-col { text-align: left; }
.rep-points-col { text-align: right; width: 130px; }

.rep-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background-color 0.15s ease;
}

.rep-table tbody tr:last-child { border-bottom: none; }

.rep-table tbody tr:hover {
    background: rgba(147, 112, 219, 0.05);
}

.rep-table td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
}

/* Rank medal display */
.rep-rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.88rem;
}

.rep-rank-1 { background: linear-gradient(135deg, #ffd700, #ffa500); color: #3a1a00; }
.rep-rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #1a1a1a; }
.rep-rank-3 { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #1a0a00; }
.rep-rank-n  { background: rgba(255,255,255,0.08); color: var(--text-secondary); }

/* User display in leaderboard */
.rep-user-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rep-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(147,112,219,0.4), rgba(0,206,209,0.3));
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
}

.rep-user-id {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.rep-user-badges {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Points display */
.rep-score-value {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.rep-score-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Empty state for rep table */
.rep-empty-state {
    text-align: center;
    padding: 3.5rem 1rem !important;
    color: var(--text-secondary);
    vertical-align: middle;
}

.rep-empty-state > * {
    display: block;
    margin: 0 auto;
}

.rep-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.75rem 0 0.35rem;
}

.rep-empty-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Responsive Tables */
@media (max-width: 1024px) {
    table {
        font-size: 0.85rem;
    }
    
    table th,
    table td {
        padding: 0.75rem !important;
    }
    
    .audit-filter-row {
        flex-direction: column;
    }

    .audit-filter-field {
        min-width: unset;
        width: 100%;
    }

    .audit-filter-actions {
        width: 100%;
    }

    .audit-search-btn,
    .audit-reset-btn {
        flex: 1;
    }
}

@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    table tr {
        display: inline-block;
        border: 1px solid var(--border);
        border-radius: 4px;
        margin-bottom: 0.5rem;
        padding: 1rem;
    }
    
    table th {
        display: none;
    }
    
    table td {
        display: block;
        text-align: right;
        padding: 0.5rem 0 !important;
    }

    /* Override generic table styles for audit & rep tables */
    .audit-table,
    .rep-table {
        display: table;
        white-space: normal;
    }

    .audit-table tr,
    .rep-table tr {
        display: table-row;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        margin-bottom: 0;
        padding: 0;
        border-radius: 0;
    }

    .audit-table th,
    .rep-table th {
        display: table-cell;
    }

    .audit-table td,
    .rep-table td {
        display: table-cell;
        text-align: left;
    }

    .rep-segment {
        width: 100%;
    }

    .rep-segment-btn {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }

    .audit-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .audit-export-btn {
        width: 100%;
        justify-content: center;
    }
    
    table td::before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.7rem;
        color: var(--text-secondary);
    }
}

/* Music Status Card Styles */
.music-status-card .status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.music-status-card .status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.music-status-card .status-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(147, 112, 219, 0.3);
    transform: translateX(4px);
}

.music-status-card .status-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    min-width: 120px;
}

.music-status-card .status-value {
    font-weight: 700;
    color: var(--text);
    font-size: 16px;
    text-align: right;
}

/* Config Hint */
.config-hint {
    display: block;
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    line-height: 1.4;
    opacity: 0.8;
}

/* Music Tab Grid Responsive */
.music-tab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 1200px) {
    .music-tab-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ==================== SCROLLBAR STYLING ==================== */
/* Hide scrollbars while maintaining scroll functionality */

::-webkit-scrollbar {
    display: none;
}

/* Firefox */
* {
    scrollbar-width: none;
}

/* IE and Edge */
html {
    -ms-overflow-style: none;
}

/* ==================== END SCROLLBAR STYLING ==================== */
/* Visual Builder Navigation Button */
.visual-builder-nav-btn:hover {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.4) !important;
}

.visual-builder-nav-btn:active {
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35) !important;
}

/* ===== Self-Roles Tab ===== */
.selfroles-config-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 18px;
}

.selfroles-config-container > .rr-page-header {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
    .selfroles-config-container {
        grid-template-columns: 1fr;
    }
}

/* Master Switch with Circulating Light Animation */
.selfroles-master-switch {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(15, 10, 30, 0.8), rgba(10, 5, 25, 0.8));
    border: 1px solid rgba(147, 112, 219, 0.15);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

/* White light circulating border */
.selfroles-master-switch::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.selfroles-master-switch:hover {
    border-color: rgba(147, 112, 219, 0.2);
    background: rgba(0, 0, 0, 0.5);
}

.selfroles-master-switch:hover::before {
    animation: masterShineTravel 12s linear infinite;
    opacity: 1;
}

@keyframes masterShineTravel {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.master-switch-icon {
    font-size: 2rem;
    filter: drop-shadow(0 3px 8px rgba(147, 112, 219, 0.4));
    transition: all 0.3s ease;
}

.selfroles-master-switch:hover .master-switch-icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 4px 12px rgba(147, 112, 219, 0.6));
}

.master-switch-content {
    flex: 1;
}

.master-switch-title {
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(147, 112, 219, 1), rgba(0, 206, 209, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.master-switch-title .unsaved-badge {
    -webkit-text-fill-color: #fbbf24 !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.15) !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}

.master-switch-description {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-weight: 500;
}

/* Master Toggle Switch - Unified Blue Style */
.master-toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    transform: translateZ(0);
    will-change: transform;
}

.master-toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.master-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(148, 163, 184, 0.25);
    transition: background 0.2s ease, border-color 0.2s ease;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.master-toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    transition: left 0.2s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.master-toggle-switch input[type="checkbox"]:checked + .master-toggle-slider {
    background: #3b82f6;
    border-color: #3b82f6;
}

.master-toggle-switch input[type="checkbox"]:checked + .master-toggle-slider::before {
    left: 21px;
    transform: translateY(-50%);
}

.master-toggle-slider:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.master-toggle-switch input[type="checkbox"]:checked + .master-toggle-slider:hover {
    background: #2563eb;
}

.master-toggle-switch input[type="checkbox"]:focus + .master-toggle-slider {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

/* ===== System Enable Row — "Active ON" style ===== */
.system-enable-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    background: linear-gradient(135deg, rgba(15, 10, 30, 0.8), rgba(10, 5, 25, 0.8));
    border: 1px solid rgba(147, 112, 219, 0.15);
    border-radius: 12px;
    margin-bottom: 0;
    transition: border-color 0.2s ease;
}

.system-enable-row:hover {
    border-color: rgba(147, 112, 219, 0.3);
}

.system-enable-row-title {
    font-size: 1.15rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(147, 112, 219, 1), rgba(0, 206, 209, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.system-enable-row-controls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.system-enable-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.system-enable-state-pill {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
    min-width: 2.4rem;
    text-align: center;
}

.system-enable-state-pill.pill-on {
    background: rgba(74, 222, 128, 0.18);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.system-enable-state-pill.pill-off {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.25);
}

.selfroles-config-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.selfroles-config-panel .config-card {
    padding: 1.1rem;
    margin-bottom: 0;
    background: rgba(18, 20, 32, 0.7);
    border: 1px solid rgba(147, 112, 219, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 1px rgba(147, 112, 219, 0.05);
    position: relative;
    transition: all 0.25s ease;
}

.selfroles-config-panel .config-card:hover {
    border-color: rgba(147, 112, 219, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 1px rgba(147, 112, 219, 0.08);
}

.selfroles-config-panel .config-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.selfroles-config-panel .config-card .premium-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.4rem 0.8rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.8), rgba(0, 206, 209, 0.8));
    border: 1px solid rgba(147, 112, 219, 0.6);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.3);
}

.selfroles-config-panel .form-group {
    margin-bottom: 0.85rem;
}

.selfroles-config-panel .form-group label {
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}

.selfroles-config-panel .form-group small {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: var(--text-dim);
}

.selfroles-config-panel .form-group input[type="range"] {
    margin-top: 0.5rem;
    cursor: pointer;
}

/* Collapsible Buttons */
.collapsible-btn {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: rgba(147, 112, 219, 0.12);
    border: 1px solid rgba(147, 112, 219, 0.25);
    border-radius: 8px;
    color: var(--text);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
    margin-bottom: 0.75rem;
    text-align: left;
}

.collapsible-btn:hover {
    background: rgba(147, 112, 219, 0.2);
    border-color: rgba(147, 112, 219, 0.4);
}

.collapsible-icon {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    transition: transform 0.2s ease;
    min-width: 16px;
}

.collapsible-btn[aria-expanded="true"] .collapsible-icon {
    transform: rotate(90deg);
}

.collapsible-content {
    padding: 0.75rem 1rem;
    background: rgba(147, 112, 219, 0.06);
    border: 1px solid rgba(147, 112, 219, 0.15);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.collapsible-content .form-group:last-child {
    margin-bottom: 0;
}

.collapsible-content .form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
    align-items: end;
}

.collapsible-content .form-row .form-group {
    margin-bottom: 0;
}

.selfroles-config-panel .role-multiselect {
    max-height: 150px;
    overflow-y: auto;
    resize: none;
}

/* Checkbox List for Roles */
.roles-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
}

.role-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    user-select: none;
}

.role-checkbox-item:hover {
    background: rgba(139, 92, 246, 0.15);
}

/* Custom Checkbox Styling */
.role-checkbox-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(139, 92, 246, 0.4);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    position: relative;
}

.role-checkbox-item input[type="checkbox"]:hover {
    border-color: rgba(139, 92, 246, 0.7);
    background: rgba(139, 92, 246, 0.08);
}

.role-checkbox-item input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    border-color: var(--primary);
    box-shadow: 0 0 8px rgba(147, 112, 219, 0.4);
}

.role-checkbox-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.role-checkbox-item label {
    flex: 1;
    margin: 0;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text);
    transition: color 0.15s ease;
}

.role-checkbox-item input[type="checkbox"]:checked + label {
    color: var(--primary);
    font-weight: 600;
}

/* Range Slider Styling */
.selfroles-config-panel input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(147, 112, 219, 0.3), rgba(0, 206, 209, 0.3));
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-top: 0.75rem;
    cursor: pointer;
}

.selfroles-config-panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    cursor: pointer;
    box-shadow: 0 0 12px rgba(147, 112, 219, 0.6), 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
}

.selfroles-config-panel input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 16px rgba(147, 112, 219, 0.8), 0 0 8px rgba(0, 206, 209, 0.6);
    transform: scale(1.1);
}

.selfroles-config-panel input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    cursor: pointer;
    box-shadow: 0 0 12px rgba(147, 112, 219, 0.6), 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
}

.selfroles-config-panel input[type="range"]::-moz-range-thumb:hover {
    box-shadow: 0 0 16px rgba(147, 112, 219, 0.8), 0 0 8px rgba(0, 206, 209, 0.6);
    transform: scale(1.1);
}

.selfroles-config-panel input[type="range"]::-moz-range-track {
    background: transparent;
    border: none;
}

.selfroles-config-panel input[type="range"]:focus {
    outline: none;
}

.selfroles-config-panel .save-btn {
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    border: none;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
}

.selfroles-config-panel .save-btn:hover {
    box-shadow: 0 6px 20px rgba(147, 112, 219, 0.4);
}

.selfroles-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}

.selfroles-status-card .status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.selfroles-status-card .status-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    gap: 2rem;
}

.selfroles-status-card .status-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(147, 112, 219, 0.3);
    transform: translateX(4px);
}

.selfroles-status-card .status-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
}

.selfroles-status-card .status-value {
    font-weight: 700;
    color: var(--text);
    font-size: 15px;
    text-align: right;
    flex-shrink: 0;
}

/* Panel Item Improvements */
.panel-item {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(0, 206, 209, 0.04));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.panel-item:hover {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(147, 112, 219, 0.5), 0 0 40px rgba(0, 206, 209, 0.3), inset 0 0 30px rgba(147, 112, 219, 0.1);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(0, 206, 209, 0.08));
}

.panel-item.panel-item-warning {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: inset 0 0 20px rgba(245, 158, 11, 0.12);
}

.panel-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.panel-details {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
}

.panel-actions {
    display: flex;
    gap: 0.75rem;
}

.panel-action-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.panel-action-btn.delete {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.panel-action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.25);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.panel-action-btn.edit {
    background: rgba(147, 112, 219, 0.15);
    color: var(--primary);
}

.panel-action-btn.edit:hover {
    background: rgba(147, 112, 219, 0.25);
    box-shadow: 0 4px 12px rgba(147, 112, 219, 0.2);
}

/* Role ordering list */
.role-order-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    min-height: 56px;
}

.role-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 8px;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.role-order-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.role-order-item.drag-over {
    border-color: var(--primary);
    background: rgba(139, 92, 246, 0.2);
    transform: scale(1.02);
}

.role-order-drag-handle {
    cursor: grab;
    color: var(--text-dim);
    font-size: 1.4rem;
    letter-spacing: -4px;
    flex-shrink: 0;
    user-select: none;
    transition: all 0.15s ease;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.role-order-item:hover .role-order-drag-handle {
    cursor: grab;
    color: var(--text);
    background: rgba(139, 92, 246, 0.15);
}

.role-order-item:active .role-order-drag-handle,
.role-order-item.dragging .role-order-drag-handle {
    cursor: grabbing;
    background: rgba(139, 92, 246, 0.25);
}

.role-order-name {
    font-weight: 600;
    color: var(--text);
}

.role-order-controls {
    display: flex;
    gap: 0.35rem;
}

.role-order-preview {
    font-size: 0.85rem;
    color: var(--text-dim);
    flex: 1;
    text-align: center;
}

.order-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-btn:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
}

.order-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.role-order-empty {
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* Role customization modal */
.role-customization-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.role-customization-content {
    background: var(--bg-secondary);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.role-customization-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.role-customization-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

.role-customization-close {
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.role-customization-close:hover {
    background: rgba(139, 92, 246, 0.1);
}

.role-customization-body {
    padding: 1.5rem;
}

.role-customization-body .form-group {
    margin-bottom: 1rem;
}

.role-customization-preview {
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
}

.role-customization-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(139, 92, 246, 0.15);
}

.role-custom-save,
.role-custom-cancel {
    flex: 1;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s ease;
}

.role-custom-save {
    background: rgba(139, 92, 246, 0.3);
    color: var(--text);
    border: 1px solid rgba(139, 92, 246, 0.4);
}

.role-custom-save:hover {
    background: rgba(139, 92, 246, 0.4);
    border-color: rgba(139, 92, 246, 0.6);
}

.role-custom-cancel {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.role-custom-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

/* ===== MUSIC BETA WARNING STYLES ===== */
.music-beta-warning {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.04));
    border: 1.5px solid rgba(251, 191, 36, 0.25);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.music-beta-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    line-height: 1;
}

.music-beta-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
}

.music-beta-warning:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.08));
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
}

/* ============= CUSTOM BOT STYLING ============= */

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.custom-bot-hero {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(0, 206, 209, 0.1));
    border: 2px solid var(--primary);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.custom-bot-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

.custom-bot-hero-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.custom-bot-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

.custom-bot-hero h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.custom-bot-hero p {
    margin: 0.5rem 0 0;
    color: var(--text-dim);
    font-size: 1.05rem;
}

.custom-bot-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    position: relative;
    z-index: 1;
}

.custom-bot-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.custom-bot-feature:hover {
    background: rgba(139, 92, 246, 0.12);
    transform: translateX(5px);
}

.custom-bot-feature-icon {
    color: var(--success);
    font-weight: bold;
    font-size: 1.2rem;
}

.custom-bot-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    color: white;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    position: relative;
    z-index: 1;
}

.custom-bot-guide-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
    text-decoration: none;
}

.custom-bot-token-input-wrapper {
    position: relative;
}

.custom-bot-token-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1.3rem;
    padding: 0.5rem;
    transition: all 0.2s ease;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-bot-token-toggle:hover {
    color: var(--primary);
    background: rgba(139, 92, 246, 0.1);
}

.custom-bot-token-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

.custom-bot-warning-card {
    margin-top: 1.5rem;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
}

.custom-bot-warning-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.custom-bot-warning-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.custom-bot-warning-title {
    margin: 0 0 0.75rem;
    color: #eab308;
    font-weight: 600;
    font-size: 1.1rem;
}

.custom-bot-warning-card ul {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--text-dim);
}

.custom-bot-warning-card li {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.custom-bot-button-group {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.custom-bot-test-btn {
    background: rgba(59, 130, 246, 0.15);
    border: 2px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-bot-test-btn:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

@media (max-width: 768px) {
    .config-grid {
        grid-template-columns: 1fr;
    }
    
    .custom-bot-hero-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .custom-bot-features {
        grid-template-columns: 1fr;
    }
    
    .custom-bot-button-group {
        flex-direction: column;
    }
    
    .custom-bot-button-group button,
    .custom-bot-button-group .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Custom Bot Status Preview */
.custom-bot-preview {
    background: rgba(26, 26, 46, 0.5);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.custom-bot-preview-title {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.custom-bot-preview-card {
    background: rgba(40, 40, 60, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.custom-bot-preview-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    position: relative;
}

.custom-bot-preview-avatar::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: #23a55a;
    border: 3px solid rgba(26, 26, 46, 0.9);
    border-radius: 50%;
}

.custom-bot-preview-info {
    flex: 1;
}

.custom-bot-preview-name {
    font-weight: 700;
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-bot-preview-badge {
    background: #5865f2;
    color: white;
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.custom-bot-preview-status {
    font-size: 0.875rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.custom-bot-preview-status-icon {
    font-size: 0.75rem;
}

/* Modern Number Input Styles */
.modern-number-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.modern-number-input input[type="number"] {
    flex: 1;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text, #e2e8f0);
    background: rgba(26, 30, 50, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    transition: border-color 0.2s;
}

.modern-number-input input[type="number"]:hover {
    border-color: rgba(148, 163, 184, 0.35);
}

.modern-number-input input[type="number"]:focus {
    outline: none;
    border-color: var(--primary, #9370db);
}

/* Hide default number input spinners */
.modern-number-input input[type="number"]::-webkit-inner-spin-button,
.modern-number-input input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.modern-number-input input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.modern-number-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(26, 30, 50, 0.6);
    color: var(--text-dim, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.modern-number-btn:hover {
    border-color: var(--primary, #9370db);
    color: var(--primary, #9370db);
}

.modern-number-btn:active {
    opacity: 0.7;
}

.modern-number-btn svg {
}

.modern-number-btn.decrease,
.modern-number-btn.increase {
}

.modern-number-btn.decrease:hover,
.modern-number-btn.increase:hover {
    border-color: var(--primary, #9370db);
    color: var(--primary, #9370db);
}

.modern-number-btn:active::after {
    display: none;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ripple 0.6s ease-out;
}
/* Force warning system to always be visible and interactive */
#moderationTab .selfroles-config-panel,
#moderationTab .selfroles-config-panel *,
#moderationTab .config-card,
#moderationTab .form-group,
#moderationTab input,
#moderationTab textarea,
#moderationTab button {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Engagement Metrics Panel */
.overview-panel--engagement {
    background: linear-gradient(135deg, rgba(18, 20, 32, 0.95), rgba(12, 14, 24, 0.95));
    border: 1px solid rgba(147, 112, 219, 0.35);
}

.overview-engagement-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin-top: 1.2rem;
}

.overview-engagement-metric {
    background: rgba(8, 10, 16, 0.6);
    border: 1px solid rgba(120, 120, 150, 0.2);
    border-radius: 12px;
    padding: 1.2rem;
}

.overview-engagement-metric--simple {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.overview-engagement-label {
    font-size: 0.75rem;
    color: rgba(200, 200, 220, 0.65);
    margin-bottom: 0.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overview-engagement-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.overview-engagement-metric--simple .overview-engagement-label {
    margin-bottom: 0.8rem;
}

.overview-engagement-metric--simple .overview-engagement-value {
    font-size: 2.2rem;
    margin-bottom: 0;
}

.overview-engagement-bar { width: 100%; height: 8px; background: rgba(60, 60, 80, 0.4); border-radius: 8px; overflow: hidden; position: relative; }

.overview-engagement-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7C3AED, #06B6D4);
    border-radius: 8px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
}

@media (max-width: 768px) {
    .overview-engagement-grid {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
}

/* Two-column layout for economy Advanced Features and Donations */
.economy-feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 900px) {
    .economy-feature-row {
        grid-template-columns: 1fr;
    }
}

/* Disable hover lighting on cards/panels (master switches remain unchanged) */
.server-card:hover,
.info-card:hover,
.config-card:hover,
.stat-card:hover,
.server-stat-card:hover,
.hero-stat-card:hover,
.audit-stat-card:hover,
.reputation-stat-card:hover,
.overview-panel:hover,
.overview-panel--primary:hover,
.overview-panel--engagement:hover,
.overview-panel--activity:hover,
.overview-kpi:hover,
.overview-metric:hover,
.overview-engagement-metric:hover,
.overview-activity-stat:hover,
.feature-status-card:hover,
.feature-status-card.enabled:hover,
.selfroles-config-panel .config-card:hover {
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.overview-kpi:hover,
.overview-metric:hover,
.overview-panel:hover {
    border-color: rgba(148, 163, 184, 0.12) !important;
}

.overview-panel--primary:hover,
.overview-panel--engagement:hover,
.overview-panel--activity:hover {
    border-color: rgba(147, 112, 219, 0.35) !important;
}

.overview-engagement-metric:hover,
.overview-activity-stat:hover {
    border-color: rgba(120, 120, 150, 0.2) !important;
}

.overview-activity-stat:hover {
    background: rgba(8, 10, 16, 0.6) !important;
}

.feature-status-card:hover {
    border-color: rgba(147, 112, 219, 0.2) !important;
}

.feature-status-card.enabled:hover {
    border-color: rgba(34, 197, 94, 0.4) !important;
}

.overview-activity-stat:hover .overview-activity-icon,
.server-card:hover .server-icon {
    transform: none !important;
    box-shadow: none !important;
}

.config-card:hover::before,
.server-card:hover::before {
    opacity: 0 !important;
}

/* Global calm-hover mode for panel/card-like elements across all dashboard tabs */
#configView :is(
    .general-section,
    .config-card,
    .server-card,
    .server-card-item,
    .stat-card,
    .server-stat-card,
    .hero-stat-card,
    .action-card,
    .action-card-large,
    .sidebar-card,
    .premium-promo-card,
    .about-card,
    .quick-links-card,
    .ticket-item,
    .panel-item,
    .plan-card,
    .faq-item,
    .command-card,
    .music-command-item,
    .command-item,
    .giveaway-card,
    .top-member-item,
    .overview-panel,
    .overview-kpi,
    .overview-metric,
    .overview-engagement-metric,
    .overview-activity-stat,
    .feature-status-card,
    .automation-option,
    .exclusion-section,
    .personality-card,
    .custom-command-card,
    .plugin-card,
    .log-category-card,
    .log-event-card,
    .audit-stat-card,
    .reputation-stat-card,
    .role-checkbox-item,
    .variant-option .variant-option-body
):hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

#configView :is(.overview-panel, .overview-panel--primary, .overview-panel--activity, .overview-panel--engagement):hover {
    opacity: 1 !important;
}

#configView :is(
    .config-card,
    .server-card,
    .server-card-item,
    .action-card,
    .action-card-large,
    .log-event-card,
    .feature-status-card,
    .giveaway-card,
    .ticket-item,
    .panel-item
):hover::before,
#configView :is(
    .server-card-item,
    .action-card,
    .action-card-large,
    .feature-status-card,
    .log-event-card
):hover::after {
    opacity: 0 !important;
}

#configView :is(
    .overview-activity-stat,
    .overview-engagement-metric,
    .feature-status-card,
    .server-card-item,
    .log-event-row,
    .xp-status-card .status-row,
    .music-status-card .status-row,
    .selfroles-status-card .status-row
):hover {
    background: unset !important;
}

#configView :is(
    .server-card-item,
    .action-card,
    .action-card-large,
    .overview-activity-stat,
    .log-category-card,
    .log-event-card,
    .custom-command-card,
    .plugin-card,
    .plan-card,
    .ticket-item,
    .panel-item
):hover :is(
    .action-arrow,
    .action-card-arrow,
    .server-card-action,
    .server-card-icon,
    .server-card-name,
    .server-card-members,
    .overview-activity-icon,
    .log-collapse-btn,
    svg
) {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Explicitly preserve master switch hover behavior */
.selfroles-master-switch:hover {
    border-color: rgba(147, 112, 219, 0.2) !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.selfroles-master-switch:hover::before {
    animation: masterShineTravel 12s linear infinite !important;
    opacity: 1 !important;
}

.selfroles-master-switch:hover .master-switch-icon {
    transform: scale(1.1) rotate(5deg) !important;
    filter: drop-shadow(0 4px 12px rgba(147, 112, 219, 0.6)) !important;
}

.master-toggle-slider:hover {
    border-color: rgba(59, 130, 246, 0.5) !important;
}

.master-toggle-switch input[type="checkbox"]:checked + .master-toggle-slider:hover {
    background: #2563eb !important;
}

/* Flat panel surfaces: remove persistent rim-light/glow in giveaways and other tabs */
#configView :is(
    .config-card,
    .giveaway-card,
    .ticket-item,
    .panel-item,
    .plugin-card,
    .log-category-card,
    .log-event-card,
    .audit-stat-card,
    .reputation-stat-card,
    .custom-command-card,
    .plan-card,
    .sidebar-card,
    .premium-promo-card,
    .about-card,
    .quick-links-card,
    .general-section
) {
    box-shadow: none !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
    background-image: none !important;
}

#configView :is(
    .config-card,
    .giveaway-card,
    .ticket-item,
    .panel-item,
    .plugin-card,
    .log-category-card,
    .log-event-card,
    .audit-stat-card,
    .reputation-stat-card,
    .custom-command-card,
    .plan-card,
    .sidebar-card,
    .premium-promo-card,
    .about-card,
    .quick-links-card,
    .general-section
):hover {
    box-shadow: none !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    background-image: none !important;
}

#configView :is(
    .log-event-card,
    .config-card,
    .panel-item,
    .giveaway-card,
    .plugin-card
)::before,
#configView :is(
    .log-event-card,
    .config-card,
    .panel-item,
    .giveaway-card,
    .plugin-card
)::after {
    box-shadow: none !important;
    filter: none !important;
}

/* Server list cleanup: no rim-light hover, no animated title underline, static hero */
.subsection-header h2::after {
    content: none !important;
    display: none !important;
}

.servers-subsection:hover .subsection-header h2::after {
    width: 0 !important;
}

.server-card-item:hover {
    border-color: rgba(147, 112, 219, 0.2) !important;
    box-shadow: 0 15px 40px rgba(10, 12, 20, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(135deg, rgba(22, 24, 38, 0.5) 0%, rgba(18, 20, 32, 0.6) 100%) !important;
}

.server-card-item:hover::before,
.server-card-item:hover::after {
    opacity: 0 !important;
    animation: none !important;
}

.server-card-item:hover .server-card-icon,
.server-card-item:hover .server-card-name,
.server-card-item:hover .server-card-members,
.server-card-item:hover .server-card-action {
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

.server-hero-section,
.server-hero-section::before,
.server-hero-section::after {
    animation: none !important;
    transform: none !important;
}

/* Server selection spacing normalization */
#serverSelection.server-selection-redesigned {
    gap: 2.6rem !important;
    margin-top: -0.5rem !important;
}

#serverSelection .servers-main-section {
    gap: 2.4rem !important;
    margin-top: 2.6rem !important;
}

/* Logs: restore lightweight hover motion (no heavy glow) */
#configView .log-category-card {
    transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
}

#configView .log-category-card:hover {
    border-color: rgba(147, 112, 219, 0.35) !important;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.12) !important;
}

#configView .log-category-header {
    transition: background 0.16s ease !important;
}

#configView .log-category-header:hover {
    background: linear-gradient(90deg, rgba(147, 112, 219, 0.1), rgba(147, 112, 219, 0.05)) !important;
}

#configView .log-collapse-btn:hover {
    transform: scale(1.08) !important;
}

#configView .log-event-row {
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

#configView .log-event-row:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(147, 112, 219, 0.45) !important;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.1), rgba(147, 112, 219, 0.04)) !important;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.12) !important;
}

#configView .log-event-card {
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

#configView .log-event-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(147, 112, 219, 0.45) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
    background: linear-gradient(135deg, rgba(22, 26, 46, 0.72) 0%, rgba(28, 34, 62, 0.66) 60%) !important;
}

#configView .log-event-card:hover::before {
    opacity: 0.25 !important;
}

/* Restore previous logs design (kept because user prefers it) */
#configView .log-category-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

#configView .log-category-card:hover {
    border-color: rgba(147, 112, 219, 0.5) !important;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.1) !important;
}

#configView .log-category-card:hover .log-collapse-btn {
    color: var(--primary) !important;
    transform: scale(1.15) !important;
}

#configView .log-event-row:hover {
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.12), rgba(147, 112, 219, 0.06)) !important;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.15) !important;
    transform: translateY(-1px) !important;
}

#configView .log-event-card {
    background: linear-gradient(135deg, rgba(20, 24, 40, 0.65) 0%, rgba(25, 30, 55, 0.6) 60%),
                radial-gradient(1200px circle at 0% 0%, rgba(147, 112, 219, 0.15), transparent 40%) !important;
    border: 1px solid rgba(147, 112, 219, 0.35) !important;
    box-shadow: none !important;
}

#configView .log-event-card::before {
    background: radial-gradient(circle at 30% 30%, rgba(147, 112, 219, 0.1) 0%, transparent 50%) !important;
}

#configView .log-event-card:hover {
    border-color: rgba(147, 112, 219, 0.6) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35),
                0 0 24px rgba(147, 112, 219, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(135deg, rgba(22, 26, 46, 0.75) 0%, rgba(28, 34, 62, 0.7) 60%) !important;
}

#configView .log-event-card:hover::before {
    opacity: 1 !important;
}

#serverSelection .servers-subsection {
    gap: 1.5rem !important;
}

#serverSelection .subsection-header {
    gap: 1.5rem !important;
    padding-bottom: 0.6rem !important;
}

#serverSelection .server-grid-main {
    gap: 1.6rem !important;
    padding: 0.15rem !important;
}

#serverSelection .info-cards-section {
    margin-top: 2rem !important;
}

#serverSelection .server-card-item {
    padding: 1.5rem !important;
    gap: 1.2rem !important;
}

#serverSelection .empty-state {
    padding: 2.6rem 1.6rem !important;
}




/* =========================================================
   REACTION ROLES (MEE6-style redesign)
   ========================================================= */

/* ---- LIST VIEW ---- */
.rr-list-view {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 0 2rem 0;
}

.rr-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--card-bg, rgba(30,33,50,0.85));
    border-radius: 12px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
}

.rr-page-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    margin: 0;
}

.rr-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rr-active-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dim, #94a3b8);
}

/* MEE6-style big blue toggle */
.rr-master-toggle {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    user-select: none;
}

.rr-master-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rr-toggle-track {
    display: flex;
    align-items: center;
    width: 64px;
    height: 30px;
    border-radius: 15px;
    background: rgba(148,163,184,0.25);
    border: 1px solid rgba(148,163,184,0.3);
    position: relative;
    transition: background 0.25s, border-color 0.25s;
    padding: 0 4px;
}

.rr-master-toggle input:checked ~ .rr-toggle-track {
    background: #3b82f6;
    border-color: #3b82f6;
}

.rr-toggle-thumb {
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    transition: transform 0.25s;
    flex-shrink: 0;
}

.rr-master-toggle input:checked ~ .rr-toggle-track .rr-toggle-thumb {
    transform: translateX(34px);
}

.rr-toggle-on-text {
    position: absolute;
    left: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.rr-master-toggle input:checked ~ .rr-toggle-track .rr-toggle-on-text {
    opacity: 1;
}

/* Active panels section */
.rr-active-panels-list {
    margin-bottom: 1.5rem;
}

.rr-active-panels-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.rr-active-panels-right {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.rr-messages-heading {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text, #e2e8f0);
}

.rr-messages-subheading {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-dim, #94a3b8);
}

.rr-messages-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.28);
    background: rgba(148,163,184,0.12);
    color: var(--text-dim, #94a3b8);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.rr-messages-count--full {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.45);
    color: #f87171;
}

.rr-create-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.15rem;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.rr-create-new-btn:hover {
    background: #2563eb;
}
.rr-create-new-btn:disabled {
    background: rgba(148,163,184,0.15);
    color: var(--text-dim, #94a3b8);
    cursor: not-allowed;
    opacity: 0.6;
}
.rr-create-new-btn:disabled:hover {
    background: rgba(148,163,184,0.15);
}

.rr-panel-cards {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.rr-panel-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--card-bg, rgba(30,33,50,0.85));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.rr-panel-card:hover {
    border-color: rgba(59,130,246,0.5);
    background: rgba(59,130,246,0.06);
}

.rr-panel-card-left {
    display: flex;
    align-items: center;
    gap: 0.82rem;
    min-width: 0;
}

.rr-panel-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(147,112,219,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.12rem;
    flex-shrink: 0;
}

.rr-panel-card-info {
    min-width: 0;
}

.rr-panel-card-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rr-panel-card-meta {
    font-size: 0.8rem;
    color: var(--text-dim, #94a3b8);
    margin-top: 3px;
}

.rr-panel-card-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.rr-panel-card-quota {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dim, #94a3b8);
}

.rr-panel-card-menu {
    position: relative;
}

.rr-panel-card-menu-btn {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: 7px;
    background: rgba(148,163,184,0.12);
    color: var(--text-dim, #94a3b8);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.rr-panel-card-menu-btn:hover {
    background: rgba(148,163,184,0.2);
    color: var(--text, #e2e8f0);
}

.rr-panel-card-menu-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 132px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(19,23,35,0.98);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    padding: 6px;
    z-index: 8;
    display: none;
}

.rr-panel-card-menu.open .rr-panel-card-menu-pop {
    display: block;
}

.rr-panel-menu-item {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text, #e2e8f0);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
    cursor: pointer;
}

.rr-panel-menu-item:hover {
    background: rgba(255,255,255,0.08);
}

.rr-panel-menu-item-danger {
    color: #f87171;
}

.rr-panel-menu-item-danger:hover {
    background: rgba(239,68,68,0.2);
}

/* Templates section */
.rr-template-section {
    text-align: center;
    padding: 2.25rem 1.2rem;
}

.rr-illustration {
    width: 124px;
    height: 124px;
    margin: 0 auto 1.35rem auto;
    background: rgba(147,112,219,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rr-illustration-emoji {
    font-size: 3rem;
}

.rr-template-heading {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    margin: 0 0 0.6rem 0;
}

.rr-template-subheading {
    font-size: 0.95rem;
    color: var(--text-dim, #94a3b8);
    margin: 0 0 2.25rem 0;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.rr-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    text-align: left;
    max-width: 1240px;
    margin: 0 auto;
}

.rr-template-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.35rem 1.25rem;
    min-height: 116px;
    background: var(--card-bg, rgba(30,33,50,0.85));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    position: relative;
}

.rr-template-card:hover {
    border-color: rgba(59,130,246,0.55);
    transform: translateY(-2px);
}

.rr-template-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.rr-template-info {
    flex: 1;
    min-width: 0;
}

.rr-template-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text, #e2e8f0);
}

.rr-template-desc {
    font-size: 0.84rem;
    color: var(--text-dim, #94a3b8);
    margin-top: 4px;
}

.rr-template-tags {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.45rem;
    flex-wrap: wrap;
}

.rr-tag {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.rr-tag-essential { background: rgba(59,130,246,0.2); color: #60a5fa; }
.rr-tag-function  { background: rgba(16,185,129,0.2); color: #34d399; }
.rr-tag-fun       { background: rgba(239,68,68,0.2);  color: #f87171; }

.rr-template-arrow {
    font-size: 1.7rem;
    color: var(--text-dim, #94a3b8);
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .rr-active-panels-header {
        flex-direction: column;
        align-items: stretch;
    }

    .rr-active-panels-right {
        justify-content: space-between;
    }

    .rr-panel-card {
        padding: 0.9rem;
    }

    .rr-templates-grid {
        grid-template-columns: 1fr;
    }

    .rr-template-card {
        min-height: 94px;
        padding: 1rem;
    }
}

/* ---- EDITOR VIEW ---- */
.rr-editor-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    z-index: 25;
    overflow: visible;
    width: 100%;
    max-width: min(1120px, 100%);
    margin: 0 auto;
}

/* ── RR Confirm / Warning Modal ───────────────────────── */
.rr-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    animation: rrFadeIn 0.15s ease;
}
@keyframes rrFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rr-confirm-card {
    position: relative;
    background: var(--card-bg, #1e2132);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 16px;
    padding: 2rem 1.75rem 1.5rem;
    width: min(480px, 90vw);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    animation: rrSlideUp 0.18s ease;
}
@keyframes rrSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.rr-confirm-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: none;
    border: none;
    color: var(--text-dim, #94a3b8);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.rr-confirm-close:hover { color: var(--text, #e2e8f0); background: rgba(255,255,255,0.08); }
.rr-confirm-message {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text, #e2e8f0);
    line-height: 1.4;
    margin: 0 0 0.5rem;
    padding-right: 1.5rem;
}
.rr-confirm-subtext {
    font-size: 0.9rem;
    color: var(--text-dim, #94a3b8);
    line-height: 1.55;
    margin: 0 0 1.25rem;
}
.rr-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.5rem;
}
.rr-confirm-cancel {
    padding: 0.55rem 1.15rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: var(--text, #e2e8f0);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.rr-confirm-cancel:hover { background: rgba(255,255,255,0.13); }
.rr-confirm-ok {
    padding: 0.55rem 1.25rem;
    background: #3b82f6;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.rr-confirm-ok:hover { background: #2563eb; }
.rr-confirm-ok.rr-confirm-ok--danger { background: #b91c1c; }
.rr-confirm-ok.rr-confirm-ok--danger:hover { background: #991b1b; }

/* Override global .form-group input for panel name field */
.rr-editor-topbar .rr-editor-panel-name,
.rr-editor-topbar .rr-editor-panel-name:hover,
.rr-editor-topbar .rr-editor-panel-name:focus {
    width: auto !important;
    padding: 0.25rem 0.5rem !important;
    background: transparent !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--text, #e2e8f0) !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.rr-rename-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    margin-top: 0.75rem;
    background: rgba(10, 13, 26, 0.9);
    border: 1.5px solid rgba(86, 101, 139, 0.5);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.95rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.rr-rename-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.18);
}

.rr-editor-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--card-bg, rgba(30,33,50,0.95));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    margin-bottom: 1.25rem;
    position: sticky;
    top: 12px;
    z-index: 50;
    backdrop-filter: blur(12px);
}

.rr-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text, #e2e8f0);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.rr-back-btn:hover { background: rgba(255,255,255,0.12); }

.rr-editor-title-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.rr-editor-panel-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text, #e2e8f0);
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 7px;
    padding: 0.25rem 0.5rem;
    width: 100%;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    box-shadow: none;
    /* override global .form-group input */
    height: auto;
    box-sizing: border-box;
}

.rr-editor-title-wrap .rr-editor-panel-name {
    width: auto;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 7px;
    box-shadow: none;
}

.rr-editor-title-wrap .rr-editor-panel-name:hover {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
}

.rr-editor-title-wrap .rr-editor-panel-name:focus {
    border-color: #3b82f6;
    background: rgba(59,130,246,0.08);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.18);
    cursor: text;
}

.rr-panel-name-pencil {
    color: var(--text-dim, #94a3b8);
    flex-shrink: 0;
    pointer-events: none;
    opacity: 0.55;
    margin-left: -2px;
}

.rr-editor-actions {
    display: flex;
    gap: 0.55rem;
    flex-shrink: 0;
}

.rr-btn-discard {
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    color: var(--text, #e2e8f0);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.rr-btn-discard:hover { background: rgba(255,255,255,0.12); }

.rr-btn-save {
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 7px;
    color: var(--text, #e2e8f0);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.rr-btn-save:hover { background: rgba(255,255,255,0.12); }

.rr-btn-publish {
    padding: 0.5rem 1.1rem;
    background: #3b82f6;
    border: none;
    border-radius: 7px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.rr-btn-publish:hover { background: #2563eb; }

/* Editor body */
.rr-editor-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: none;
    margin: 0;
    width: 100%;
    position: relative;
    z-index: 25;
    overflow: visible;
    --rr-content-max: 680px;
}

/* Collapsible sections */
.rr-section {
    background: var(--card-bg, rgba(30,33,50,0.85));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    overflow: hidden;
}

.rr-section-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    gap: 0.6rem;
}

.rr-section-header:hover {
    background: rgba(255,255,255,0.03);
}

.rr-section-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    margin: 0;
}

.rr-roles-counter {
    font-size: 0.8rem;
    color: var(--text-dim, #94a3b8);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 2px 8px;
    border-radius: 10px;
}

.rr-section-chevron {
    font-size: 0.8rem;
    color: var(--text-dim, #94a3b8);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.rr-section:not(.rr-section-open) .rr-section-chevron {
    transform: rotate(180deg);
}

.rr-section-body {
    padding: 0 1.25rem 1.25rem 1.25rem;
    display: block;
}

#rrMessageSection,
#rrMessageSection .rr-section-body {
    overflow: visible;
}

#rrChannelSection,
#rrChannelSection .rr-section-body {
    overflow: visible;
}

#rrChannelSection .rr-section-body {
    padding-bottom: 0.8rem;
}

#rrRolesSection,
#rrRolesSection .rr-section-body {
    overflow: visible;
}

#statsBasicSection,
#statsBasicSection .rr-section-body,
#statsRoleSection,
#statsRoleSection .rr-section-body {
    overflow: visible;
}

.rr-section:not(.rr-section-open) .rr-section-body {
    display: none;
}

/* Labels & inputs */
.rr-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dim, #94a3b8);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rr-required { color: #f87171; margin-left: 2px; }

.rr-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(15,17,30,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color: var(--text, #e2e8f0);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.rr-input:focus {
    border-color: rgba(148,163,184,0.4);
}

select.rr-input,
select.rr-select-styled {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.25rem;
    cursor: pointer;
}

select.rr-select-styled {
    width: 100%;
    padding: 0.6rem 2.25rem 0.6rem 0.85rem;
    background-color: rgba(15,17,30,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color: var(--text, #e2e8f0);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

select.rr-select-styled:focus {
    border-color: rgba(148,163,184,0.4);
}

select.rr-select-styled option {
    background: #1a1d2e;
    color: #e2e8f0;
}

.rr-textarea {
    resize: vertical;
    min-height: 72px;
}

/* Channel select */
.rr-channel-picker {
    position: relative;
    width: min(420px, 100%);
    z-index: 40;
}

.rr-channel-picker-trigger {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    background: #10131d;
    border: 1px solid rgba(86, 101, 139, 0.45);
    border-radius: 9px;
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.rr-channel-picker .rr-channel-picker-inline-search {
    border: none;
    outline: none;
    background: transparent;
    color: #dbe5f6;
    font-size: 0.95rem;
    font-weight: 400;
    width: auto;
    min-width: 120px;
    flex: 1;
    display: none;
    padding: 0 0 0 6px;
    margin-left: 2px;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    height: auto;
}

.rr-channel-picker .rr-channel-picker-inline-search::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.rr-channel-picker .rr-channel-picker-inline-search:focus,
.rr-channel-picker .rr-channel-picker-inline-search:hover {
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
}

.rr-channel-picker.is-open .rr-channel-picker-inline-search {
    display: block;
    width: auto;
    padding: 0 0 0 6px;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: none;
}

.rr-channel-picker.is-open .rr-channel-picker-name {
    display: inline;
}

.rr-channel-picker:hover .rr-channel-picker-trigger {
    border-color: rgba(124, 145, 198, 0.68);
    background: #101521;
}

.rr-channel-picker.is-open .rr-channel-picker-trigger,
.rr-channel-picker-trigger:focus-visible {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.24);
    outline: none;
}

.rr-channel-picker.is-open .rr-channel-picker-trigger {
    border-radius: 9px;
}

.rr-channel-picker-hash {
    color: #f8fafc;
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 600;
    margin-top: -1px;
    flex-shrink: 0;
}

.rr-channel-picker-name {
    color: #f1f5f9;
    font-size: 1.05rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rr-channel-picker-name.is-placeholder {
    color: #e2e8f0;
    font-weight: 400;
}

.rr-channel-picker-chevron {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%239aa6bd' d='M10 13L5 8h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    transform: rotate(0deg);
    transition: transform 0.18s ease;
}

.rr-channel-picker.is-open .rr-channel-picker-chevron {
    transform: rotate(180deg);
}

.rr-channel-picker-menu {
    position: absolute;
    z-index: 120;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #10141f;
    border: 1px solid rgba(72, 86, 119, 0.44);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.45);
    overflow: hidden;
}

.rr-channel-picker-label {
    padding: 10px 10px 6px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #7f8ba3;
    letter-spacing: 0.08em;
}

.rr-channel-picker-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 0 6px 6px;
}

.rr-channel-picker-item {
    width: 100%;
    border: none;
    background: transparent;
    color: #d7dfef;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 400;
    transition: background 0.16s ease, color 0.16s ease;
}

.rr-channel-picker-item:hover {
    background: rgba(55, 65, 92, 0.45);
    color: #f8fafc;
}

.rr-channel-picker-item.is-selected {
    background: rgba(55, 65, 92, 0.58);
    color: #f8fafc;
}

.rr-channel-picker-item-hash {
    font-size: 1rem;
    color: #f1f5f9;
    line-height: 1;
    font-weight: 600;
    margin-top: -1px;
}

.rr-channel-picker-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rr-channel-picker-item-check {
    color: #3b82f6;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    margin-left: auto;
}

.rr-channel-picker-empty {
    padding: 12px 10px;
    border-radius: 6px;
    background: rgba(33, 41, 66, 0.35);
    color: #94a3b8;
    font-size: 0.85rem;
}

.rr-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    background: none !important;
    box-shadow: none !important;
}

.rr-select {
    flex: 1;
    padding: 0.6rem 0.85rem 0.6rem 0;
    background: transparent;
    border: none;
    color: var(--text, #e2e8f0);
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    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='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

.rr-select option { background: #1e2030; }

@media (max-width: 900px) {
    .rr-channel-picker {
        width: 100%;
    }

    .rr-channel-picker-trigger {
        min-height: 40px;
        border-radius: 9px;
    }

    .rr-channel-picker-hash,
    .rr-channel-picker-item-hash {
        font-size: 0.95rem;
    }

    .rr-channel-picker-name,
    .rr-channel-picker-inline-search,
    .rr-channel-picker-item {
        font-size: 0.95rem;
    }
}

/* Embed builder */
.rr-embed-builder-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text, #e2e8f0);
    margin-bottom: 0.2rem;
}

.rr-embed-builder-sublabel {
    font-size: 0.8rem;
    color: var(--text-dim, #94a3b8);
    margin-bottom: 1rem;
}

/* Discord-style message preview */
.rr-msg-preview {
    display: flex;
    gap: 0.85rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    margin-bottom: 0.75rem;
    overflow: visible;
}

.rr-msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0f1628;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid rgba(132, 151, 196, 0.28);
    position: relative;
}

.rr-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.rr-avatar-fallback {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    position: absolute;
}

.rr-msg-right { flex: 1; min-width: 0; }

.rr-msg-topline-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: min(var(--rr-content-max), 100%);
    max-width: 100%;
}

.rr-msg-topline {
    flex: 1;
    background: #0f1420;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 1.05rem;
    color: #f8fafc;
    font-weight: 500;
    line-height: 1.45;
    border: 1px solid rgba(148, 163, 184, 0.18);
    white-space: pre-wrap;
    word-break: break-word;
}

textarea.rr-msg-topline {
    resize: none;
    overflow: hidden;
    min-height: 44px;
}

.rr-msg-topline-render {
    display: none;
}

.rr-msg-topline-previewlike {
    background: transparent;
    border-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    min-height: 0;
    color: #f8fafc;
}

.rr-msg-topline-previewlike:focus {
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    outline: none;
}

.rr-msg-topline.rr-inline-edit:focus {
    border-color: rgba(96,165,250,0.9);
    background: #0c111d;
}

.rr-msg-info-btn {
    width: 34px;
    height: 34px;
    border-radius: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.rr-msg-info-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.95;
    filter: invert(1) brightness(0.62) saturate(0);
}

.rr-msg-info-btn:hover {
    background: transparent;
}

.rr-add-embed-btn {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: #e5e7eb;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.rr-add-embed-btn:hover {
    background: rgba(255,255,255,0.14);
}

.rr-embed-preview-wrap {
    display: block;
    width: min(var(--rr-content-max), 100%);
    max-width: 100%;
    position: relative;
    overflow: visible;
}

.rr-embed-side-tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
    position: absolute;
    left: -54px;
    top: 0;
    z-index: 12;
}

.rr-color-popover {
    position: absolute;
    left: -4px;
    top: 42px;
    width: 352px;
    border-radius: 14px;
    background: #1a1f31;
    border: 1px solid rgba(146, 161, 204, 0.22);
    box-shadow: 0 24px 44px rgba(0,0,0,0.5);
    padding: 18px;
    z-index: 70;
}

.rr-color-popover-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 8px;
}

.rr-color-preset-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}

.rr-color-history-row {
    display: flex;
    gap: 10px;
    min-height: 24px;
    margin-bottom: 16px;
}

.rr-color-history-chip {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.35);
    cursor: pointer;
}

.rr-color-surface {
    width: 100%;
    height: 235px;
    border-radius: 12px;
    position: relative;
    cursor: crosshair;
    border: 1px solid rgba(160,180,220,0.35);
    margin-bottom: 12px;
    background: hsl(260, 100%, 50%);
    overflow: hidden;
}

.rr-color-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #ffffff, rgba(255,255,255,0));
}

.rr-color-surface::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #000000, rgba(0,0,0,0));
}

.rr-color-surface-knob {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 3px solid #e2e8f0;
    background: transparent;
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(2,6,23,0.65);
    pointer-events: none;
    z-index: 2;
}

.rr-hue-wrap {
    margin-bottom: 14px;
}

.rr-hue-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 16px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.2);
    background: linear-gradient(90deg,
        #ff0000 0%,
        #ffff00 16.67%,
        #00ff00 33.33%,
        #00ffff 50%,
        #0000ff 66.67%,
        #ff00ff 83.33%,
        #ff0000 100%);
}

.rr-hue-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 20px;
    border-radius: 3px;
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,0.75);
    cursor: pointer;
}

.rr-hue-slider::-moz-range-thumb {
    width: 8px;
    height: 20px;
    border-radius: 3px;
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,0.75);
    cursor: pointer;
}

.rr-color-picker-wrap {
    margin-bottom: 10px;
}

.rr-color-picker-wrap input[type="color"] {
    width: 100%;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.rr-color-inputs-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 8px;
}

.rr-embed-tool-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.rr-embed-tool-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.rr-embed-tool-btn:hover,
.rr-embed-tool-btn.active {
    background: rgba(59,130,246,0.42);
    border-color: rgba(120,177,255,0.95);
    color: #f0f7ff;
    transform: translateY(-1px);
}

.rr-embed-tool-tip {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #0f1424;
    border: 1px solid rgba(96,165,250,0.35);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.75rem;
    white-space: nowrap;
    padding: 6px 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 120;
}

.rr-embed-tool-btn:hover .rr-embed-tool-tip {
    opacity: 1;
}

.rr-msg-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.rr-msg-botname {
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
}

.rr-msg-bot-badge {
    font-size: 0.66rem;
    font-weight: 700;
    background: #5865F2;
    color: #fff;
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.02em;
}

.rr-msg-time {
    font-size: 0.72rem;
    color: #72767d;
}

.rr-embed-card {
    display: flex;
    background: #111521;
    border-radius: 5px;
    overflow: visible;
    max-width: 680px;
    width: 100%;
    border: 1px solid rgba(95,122,191,0.22);
    position: relative;
}

.rr-embed-card.rr-embed-compact {
    cursor: pointer;
}
#tkpEmbedCard.rr-embed-compact .rr-inline-edit,
#tkwEmbedCard.rr-embed-compact .rr-inline-edit { display: none; }
#tkpEmbedCard.rr-embed-compact .rr-embed-preview-desc-render,
#tkpEmbedCard.rr-embed-compact .rr-embed-preview-title-render,
#tkpEmbedCard.rr-embed-compact .rr-embed-meta-header-preview,
#tkpEmbedCard.rr-embed-compact .rr-embed-footer-preview,
#tkwEmbedCard.rr-embed-compact .rr-embed-preview-desc-render,
#tkwEmbedCard.rr-embed-compact .rr-embed-preview-title-render,
#tkwEmbedCard.rr-embed-compact .rr-embed-meta-header-preview,
#tkwEmbedCard.rr-embed-compact .rr-embed-footer-preview { display: block; }
#tkpEmbedCard:not(.rr-embed-compact) .rr-inline-edit,
#tkwEmbedCard:not(.rr-embed-compact) .rr-inline-edit { display: block; }
#tkpEmbedCard:not(.rr-embed-compact) .rr-embed-preview-desc-render,
#tkpEmbedCard:not(.rr-embed-compact) .rr-embed-preview-title-render,
#tkpEmbedCard:not(.rr-embed-compact) .rr-embed-meta-header-preview,
#tkpEmbedCard:not(.rr-embed-compact) .rr-embed-footer-preview,
#tkwEmbedCard:not(.rr-embed-compact) .rr-embed-preview-desc-render,
#tkwEmbedCard:not(.rr-embed-compact) .rr-embed-preview-title-render,
#tkwEmbedCard:not(.rr-embed-compact) .rr-embed-meta-header-preview,
#tkwEmbedCard:not(.rr-embed-compact) .rr-embed-footer-preview { display: none; }

.rr-embed-hover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 22, 0.34);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
    z-index: 2;
}

.rr-embed-card.rr-embed-compact:hover .rr-embed-hover-overlay {
    opacity: 1;
}

.rr-embed-hover-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}

.rr-embed-card.rr-embed-compact .rr-embed-card-inner {
    padding: 1.05rem 1rem 1.15rem;
}

.rr-embed-card.rr-embed-compact .rr-embed-preview-title {
    margin-bottom: 0.7rem;
}

.rr-msg-delete-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(253,118,128,0.35);
    background: rgba(253,118,128,0.2);
    color: #fb7185;
    font-size: 1.05rem;
    cursor: pointer;
    position: absolute;
    right: -58px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rr-msg-delete-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.95;
}

.rr-msg-delete-btn:hover {
    background: rgba(253,118,128,0.32);
}

@media (max-width: 900px) {
    .rr-msg-topline-wrap {
        width: 100%;
    }

    .rr-embed-preview-wrap {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

    .rr-entries-list,
    .rr-mode-tabs {
        width: 100%;
    }

    .rr-embed-side-tools {
        position: relative;
        left: auto;
        top: auto;
    }

    .rr-msg-delete-btn {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        align-self: center;
    }

    .rr-color-popover {
        left: 54px;
    }
}

.rr-embed-meta-header {
    font-size: 0.92rem;
    color: #8b93a9;
    font-weight: 600;
    margin-bottom: 0;
}

.rr-embed-meta-header-preview {
    font-size: 0.92rem;
    color: #8b93a9;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
}

.rr-embed-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    min-width: 0;
}

.rr-embed-header-icon,
.rr-embed-header-icon-image {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.rr-embed-header-icon {
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #66728f;
    background: transparent;
    cursor: pointer;
    position: relative;
    padding: 0;
}

.rr-embed-header-icon-image {
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.24);
    cursor: pointer;
}

.rr-embed-header-icon-wrap {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.rr-embed-asset-remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(251, 113, 133, 0.42);
    background: rgba(90, 18, 31, 0.88);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 4;
}

.rr-embed-asset-remove img {
    width: 10px;
    height: 10px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.rr-embed-asset-remove:hover {
    background: rgba(120, 24, 43, 0.95);
}

.rr-embed-asset-remove--tiny {
    width: 16px;
    height: 16px;
    top: -6px;
    right: -6px;
}

.rr-embed-asset-remove--tiny img {
    width: 8px;
    height: 8px;
}

.rr-inline-edit {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    font: inherit;
    outline: none;
    border-radius: 6px;
    padding: 0;
}

.rr-inline-edit::placeholder {
    color: #6b7280;
}

.rr-inline-edit:focus {
    border-color: rgba(96,165,250,0.6);
    background: rgba(59,130,246,0.06);
    padding: 2px 4px;
}

.rr-embed-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.rr-embed-title-link-wrap {
    position: relative;
    flex-shrink: 0;
}

.rr-embed-title-link-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(74, 161, 255, 0.35);
    background: rgba(15, 26, 44, 0.75);
    color: #24a2ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    position: relative;
}

.rr-embed-title-link-btn:hover {
    border-color: rgba(74, 161, 255, 0.7);
    background: rgba(19, 38, 64, 0.92);
}

.rr-embed-title-link-btn.rr-active {
    border-color: rgba(59, 130, 246, 0.95);
    background: rgba(29, 78, 216, 0.3);
}

/* ─── Inline field tools (contextual emoji/URL controls) ─── */
.rr-title-field-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Show tools on focus-within for inline field wraps */
.rr-field-tools {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.rr-title-field-wrap:focus-within .rr-field-tools,
.rr-desc-field-wrap:focus-within .rr-field-tools--overlay,
.rr-meta-field-wrap:focus-within .rr-field-tools,
.rr-footer-field-wrap:focus-within .rr-field-tools { opacity: 1; pointer-events: auto; }

/* Keep tools visible when a child popover input is focused */
.rr-title-field-wrap:focus-within .rr-embed-title-link-wrap .rr-embed-title-url-popover { display: block; }
.rr-meta-field-wrap:focus-within .rr-embed-title-link-wrap .rr-embed-title-url-popover { display: block; }

.rr-field-tool-btn {
    width: 26px; height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(74,161,255,0.25);
    background: rgba(10,20,40,0.72);
    color: #8da8cc;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1;
    transition: border-color 0.13s, background 0.13s, color 0.13s;
    flex-shrink: 0;
}
.rr-field-tool-btn:hover {
    border-color: rgba(74,161,255,0.65);
    background: rgba(20,40,80,0.92);
    color: #fff;
}

/* Description textarea wrap – tools overlay at bottom-right */
.rr-desc-field-wrap {
    position: relative;
}
.rr-field-tools--overlay {
    position: absolute;
    bottom: 5px;
    right: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 2;
}

/* Header field wrap inside meta row */
.rr-meta-field-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}
.rr-meta-tool {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.rr-meta-field-wrap:focus-within .rr-meta-tool { opacity: 1; pointer-events: auto; }

/* Footer field wrap inside footer row */
.rr-footer-field-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}
.rr-footer-tool {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.rr-footer-field-wrap:focus-within .rr-footer-tool { opacity: 1; pointer-events: auto; }

.rr-embed-title-url-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(440px, 56vw);
    background: #101624;
    border: 1px solid rgba(113, 167, 255, 0.32);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.46);
    z-index: 85;
}

.rr-header-link-wrap .rr-embed-header-url-popover {
    right: auto;
    left: 0;
}

.rr-embed-title-url-input {
    width: 100%;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(8, 13, 23, 0.95);
    color: #d7deee;
    padding: 10px 12px;
    font-size: 1.05rem;
    font-weight: 600;
}

.rr-embed-title-url-input:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.95);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.rr-embed-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.2);
    object-fit: cover;
    background: rgba(255,255,255,0.03);
    flex-shrink: 0;
}

.rr-embed-thumb-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.rr-embed-thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7f8aa1;
    background: #111521;
    cursor: pointer;
    position: relative;
}

.rr-upload-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    opacity: 0.92;
    filter: brightness(0) invert(1);
}

.rr-upload-icon-sm {
    width: 20px;
    height: 20px;
}

.rr-embed-accent {
    width: 4px;
    flex-shrink: 0;
    background: #9370DB;
}

.rr-embed-card-inner {
    padding: 0.85rem 1rem;
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.rr-embed-preview-title {
    font-weight: 700;
    font-size: 1.04rem;
    color: #fff;
    margin-bottom: 0.35rem;
}

.rr-embed-preview-title-render {
    white-space: pre-wrap;
    word-break: break-word;
}

.rr-embed-title-link {
    color: #ffffff;
    text-decoration: none;
}

.rr-embed-title-link:hover {
    text-decoration: underline;
}

input.rr-embed-preview-title {
    display: block;
}

.rr-embed-preview-desc {
    font-size: 0.99rem;
    color: #dcddde;
    line-height: 1.5;
    resize: none;
    overflow: hidden;
}

.rr-embed-preview-desc-render {
    white-space: pre-wrap;
    word-break: break-word;
}

textarea.rr-embed-preview-desc {
    min-height: 58px;
}

.rr-embed-fields-list {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
}

.rr-embed-fields-list.rr-embed-fields-editing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
}

.rr-embed-fields-list.rr-embed-fields-editing .rr-embed-field-editor {
    grid-column: 1 / -1;
}

.rr-embed-fields-list.rr-embed-fields-editing .rr-embed-field-editor.rr-embed-field-inline {
    grid-column: auto;
}

.rr-add-field-btn {
    margin-top: 12px;
    padding: 0;
    border: none;
    background: transparent;
    color: #4ea1ff;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.rr-add-field-btn:hover {
    color: #78b8ff;
}

.rr-embed-field-item {
    min-width: 0;
}

.rr-embed-field-item:not(.rr-embed-field-inline) {
    grid-column: 1 / -1;
}

.rr-embed-field-editor {
    display: block;
}

.rr-embed-field-editor-inputs {
    min-width: 0;
}

.rr-embed-field-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.rr-embed-field-name-input,
.rr-embed-field-value-input {
    width: 100%;
    display: block;
}

.rr-embed-field-name-input {
    font-weight: 700;
    font-size: 1.04rem;
    color: #fff;
    margin-bottom: 0.4rem;
}

.rr-embed-field-value-input {
    margin-top: 6px;
    min-height: 58px;
    resize: none;
    overflow: hidden;
    font-size: 0.99rem;
    color: #dcddde;
    line-height: 1.5;
}

.rr-embed-field-delete {
    border: none;
    background: transparent;
    color: #fb7185;
    cursor: pointer;
    font-size: 1rem;
}

.rr-embed-field-move,
.rr-embed-field-drag,
.rr-embed-field-layout,
.rr-embed-field-emoji {
    border: 1px solid rgba(96, 165, 250, 0.32);
    background: rgba(11, 22, 40, 0.8);
    color: #60a5fa;
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 7px;
}

.rr-embed-field-move[disabled] {
    color: #475569;
    cursor: not-allowed;
    border-color: rgba(71, 85, 105, 0.4);
    background: rgba(9, 15, 28, 0.72);
}

.rr-embed-field-drag {
    letter-spacing: -2px;
    font-weight: 700;
    cursor: grab;
}

.rr-embed-field-emoji {
    min-width: 30px;
    padding: 3px 8px;
    font-size: 0.95rem;
}

.rr-embed-field-name-emoji {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.rr-embed-field-editor.rr-embed-field-dragging {
    opacity: 0.65;
}

.rr-embed-field-delete {
    border: 1px solid rgba(251,113,133,0.3);
    background: rgba(52, 14, 20, 0.55);
    color: #fb7185;
    border-radius: 7px;
    width: 28px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rr-embed-field-name {
    font-size: 0.94rem;
    color: #9aa3b7;
    font-weight: 700;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rr-embed-field-value {
    margin-top: 2px;
    font-size: 0.92rem;
    color: #8e98ad;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rr-embed-main-image {
    display: block;
    width: 100%;
    max-height: 210px;
    margin-top: 0;
    border-radius: 8px;
    object-fit: cover;
    border: 1px dashed rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.03);
}

.rr-embed-main-image-wrap {
    position: relative;
    margin-top: 10px;
}

.rr-embed-main-image-placeholder {
    margin-top: 0;
    width: 100%;
    height: 170px;
    border-radius: 10px;
    border: 1px dashed rgba(159,177,209,0.45);
    background: #0f1420;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7f8aa1;
    font-size: 1.8rem;
    cursor: pointer;
    position: relative;
}

.rr-embed-asset-remove--main {
    top: 6px;
    right: 8px;
}

.rr-embed-preview-footer {
    margin-top: 10px;
    font-size: 0.75rem;
    color: #9ca3af;
}

.rr-embed-footer-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8d97ab;
    font-size: 0.92rem;
    font-weight: 600;
}

.rr-embed-footer-row .rr-inline-edit,
.rr-footer-field-wrap .rr-inline-edit {
    flex: 1;
    min-width: 0;
}

.rr-embed-footer-preview {
    flex: 1;
    min-width: 0;
    color: #8d97ab;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
}

.rr-embed-footer-preview code,
.rr-embed-preview-desc-render code,
.rr-embed-preview-title-render code,
.rr-embed-meta-header-preview code,
.rr-embed-field-name code,
.rr-embed-field-value code {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 4px;
    padding: 1px 4px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.9em;
}

.rr-embed-footer-row.rr-footer-no-icon {
    gap: 0;
}

.rr-embed-footer-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #687088;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.rr-embed-footer-icon-wrap {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.rr-embed-footer-icon-image {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.28);
    cursor: pointer;
}

.rr-msg-delete-btn .rr-embed-tool-tip,
.rr-msg-info-btn .rr-embed-tool-tip {
    position: absolute;
    left: auto;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    z-index: 120;
}

.rr-msg-delete-btn:hover .rr-embed-tool-tip,
.rr-msg-info-btn:hover .rr-embed-tool-tip,
.rr-embed-header-icon:hover .rr-embed-tool-tip,
.rr-embed-thumb-placeholder:hover .rr-embed-tool-tip,
.rr-embed-main-image-placeholder:hover .rr-embed-tool-tip,
.rr-embed-footer-icon:hover .rr-embed-tool-tip {
    opacity: 1;
}

.rr-embed-card-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.rr-embed-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--text-dim, #94a3b8);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.rr-embed-action-btn:hover {
    background: rgba(255,255,255,0.14);
    color: var(--text, #e2e8f0);
}

.rr-embed-edit-fields {
    padding: 1rem;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rr-color-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rr-color-preset {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.rr-color-preset:hover {
    transform: scale(1.15);
    border-color: #ffffff;
}

/* Type tabs */
.rr-type-tabs {
    display: flex;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 0.85rem;
    width: fit-content;
}

.rr-type-tab {
    padding: 0.45rem 1.1rem;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-dim, #94a3b8);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.rr-type-tab.active {
    background: rgba(255,255,255,0.1);
    color: var(--text, #e2e8f0);
}

.rr-type-tab:hover:not(.active) {
    background: rgba(255,255,255,0.06);
}

/* Allow multiple toggle (inline) */
.rr-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.rr-inline-toggle {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    flex-shrink: 0;
}

.rr-inline-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rr-inline-track {
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background: rgba(148,163,184,0.25);
    border: 1px solid rgba(148,163,184,0.3);
    position: relative;
    transition: background 0.2s;
    display: block;
}

.rr-inline-toggle input:checked ~ .rr-inline-track {
    background: #3b82f6;
    border-color: #3b82f6;
}

.rr-inline-thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: left 0.2s;
}

.rr-inline-toggle input:checked ~ .rr-inline-track .rr-inline-thumb {
    left: 21px;
}

.rr-toggle-text {
    font-size: 0.875rem;
    color: var(--text, #e2e8f0);
}

/* Role entries */
.rr-entries-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    width: min(var(--rr-content-max), 100%);
    max-width: 100%;
}

.rr-entry {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    position: relative;
}

.rr-entry-wrap {
    position: relative;
}

.rr-entry-emoji-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px dashed rgba(255,255,255,0.2);
    color: var(--text, #e2e8f0);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.rr-entry-emoji-btn:hover { background: rgba(255,255,255,0.12); }

.rr-entry-plus {
    color: rgba(148,163,184,0.95);
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rr-entry-role-trigger {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    background: rgba(15,17,30,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    color: var(--text, #e2e8f0);
    font-size: 0.875rem;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-align: left;
}

.rr-entry-role-trigger:hover,
.rr-entry-role-trigger:focus {
    border-color: rgba(59,130,246,0.7);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

.rr-entry-role-trigger-plus {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(148,163,184,0.55);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rr-entry-role-trigger-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    overflow: hidden;
    min-width: 0;
}

.rr-entry-role-placeholder {
    color: #94a3b8;
}

.rr-entry-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(148,163,184,0.16);
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    max-width: 165px;
    overflow: hidden;
    font-size: 0.82rem;
}

.rr-entry-role-chip-text {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rr-entry-role-chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rr-entry-role-chip-remove {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #f1f5f9;
    background: rgba(15,23,42,0.45);
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
}

.rr-entry-role-chip-remove:hover {
    background: rgba(239,68,68,0.3);
}

.rr-entry-role-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 56px;
    width: min(460px, max(320px, calc(100vw - 96px)));
    max-width: calc(100vw - 40px);
    background: #161a27;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.6rem;
    z-index: 11050;
    box-shadow: 0 14px 34px rgba(0,0,0,0.4);
    max-height: min(70vh, 640px);
    overflow: auto;
}

.rr-entry-role-menu.uni-rs-menu {
    right: auto;
    left: 0;
}

.rr-entry-role-menu.rr-entry-role-menu--creator-open {
    max-height: none;
}

.rr-entry-role-menu.rr-entry-role-menu--custom-open {
    overflow: auto;
    max-height: min(78vh, 720px);
}

.rr-entry-role-menu.rr-entry-role-menu--open-up {
    top: auto;
    bottom: calc(100% + 4px);
}

.rr-entry-role-creator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.rr-entry-role-creator-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #e2e8f0;
    font-weight: 700;
}

.rr-entry-role-creator-title img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.rr-entry-role-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rr-entry-role-search {
    flex: 1;
    background: rgba(15,17,30,0.7);
    border: 1px solid rgba(96,165,250,0.55);
    border-radius: 10px;
    color: #dbe5ff;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    outline: none;
}

.rr-entry-role-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #fb7185;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.rr-entry-role-create {
    margin-top: 0.5rem;
    width: 100%;
    border: none;
    background: rgba(255,255,255,0.05);
    color: #cbd5e1;
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
}

.rr-entry-role-create img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.9;
}

.rr-entry-role-creator {
    margin-top: 0.45rem;
    padding: 0.65rem;
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 10px;
    background: rgba(15,23,42,0.45);
}

.rr-entry-role-creator--standalone {
    margin-top: 0;
}

.rr-entry-role-creator-name {
    width: 100%;
    background: rgba(2,6,23,0.55);
    border: 1px solid rgba(148,163,184,0.32);
    color: #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    outline: none;
}

.rr-entry-role-creator-name:focus {
    border-color: rgba(96,165,250,0.75);
}

.rr-entry-role-creator-colors {
    margin-top: 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.rr-entry-role-color {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.18);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.rr-entry-role-color:hover {
    transform: scale(1.15);
    border-color: #ffffff;
}

.rr-entry-role-color.is-selected {
    border-color: #f8fafc;
    box-shadow: 0 0 0 2px rgba(96,165,250,0.4);
}

.rr-entry-role-custom-toggle {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    margin-left: 0.1rem;
    flex-shrink: 0;
}

.rr-entry-role-custom-toggle .rr-embed-tool-icon {
    width: 16px;
    height: 16px;
}

.rr-entry-role-custom-popover {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 0.7rem;
    box-shadow: none;
    border-radius: 12px;
    background: rgba(9, 13, 27, 0.92);
}

.rr-entry-role-create-save {
    margin-top: 0.65rem;
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 0.52rem 0.65rem;
    background: #2563eb;
    color: #eff6ff;
    cursor: pointer;
    font-weight: 600;
}

.rr-entry-role-create-save:disabled {
    background: rgba(37,99,235,0.4);
    cursor: not-allowed;
}

.rr-entry-role-options {
    margin-top: 0.55rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 0.55rem;
    max-height: 190px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rr-entry-role-option-btn {
    border: none;
    background: transparent;
    color: #dbe5ff;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-align: left;
    padding: 0.4rem 0.25rem;
    border-radius: 7px;
    cursor: pointer;
}

.rr-entry-role-option-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rr-entry-role-option-btn:hover {
    background: rgba(255,255,255,0.06);
}

.rr-entry-role-option-btn.is-selected {
    background: rgba(88,101,242,0.18);
}

.rr-entry-role-match {
    color: #facc15;
    font-weight: 700;
}

.rr-entry-role-empty {
    color: #94a3b8;
    font-size: 0.88rem;
}

.rr-entry-delete {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(239,68,68,0.18);
    border: 1px solid rgba(239,68,68,0.3);
    color: #fb7185;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-size: 0.85rem;
}
.rr-entry-delete img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}
.rr-entry-delete:hover {
    background: rgba(239,68,68,0.28);
    border-color: rgba(239,68,68,0.45);
    color: #fda4af;
}

/* Button-type entry preview button */
.rr-entry-btn-preview {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 1rem;
    background: rgba(79,84,92,0.95);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 220px;
    transition: filter 0.15s, background 0.15s;
}
.rr-entry-btn-preview:hover { filter: brightness(1.06); }

.rr-entry-btn-preview-label,
.rr-entry-btn-preview-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.14s ease;
}

.rr-entry-btn-preview-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.05rem;
}

.rr-entry-btn-preview-edit {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.rr-entry-btn-preview-edit img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.rr-entry-btn-preview:hover .rr-entry-btn-preview-label {
    opacity: 0;
}

.rr-entry-btn-preview:hover .rr-entry-btn-preview-edit {
    opacity: 1;
}

.rr-entry-btn-preview--blue {
    background: #5865F2;
    border-color: rgba(0,0,0,0.08);
}
.rr-entry-btn-preview--gray {
    background: #4F545C;
    border-color: rgba(0,0,0,0.08);
}
.rr-entry-btn-preview--green {
    background: #3BA55D;
    border-color: rgba(0,0,0,0.08);
}
.rr-entry-btn-preview--red {
    background: #ED4245;
    border-color: rgba(0,0,0,0.08);
}

/* Dropdown-type entry option label */
.rr-entry-option-label {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-dim, #94a3b8);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rr-entry-dropdown-option {
    flex: 1;
    min-width: 220px;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.06);
    color: #e5eaf6;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    text-align: left;
    position: relative;
}

.rr-entry-dropdown-option-emoji {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.rr-entry-dropdown-option-inner {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.rr-entry-dropdown-option-title {
    font-size: 1rem;
    font-weight: 700;
    color: #d6dceb;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.14s ease;
}

.rr-entry-dropdown-option-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.14s ease;
}

.rr-entry-dropdown-option:hover .rr-entry-dropdown-option-desc {
    opacity: 0;
}

.rr-entry-dropdown-option-edit {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #e4e8f5;
    font-size: 0.98rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.14s ease;
}

.rr-entry-dropdown-option-edit img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.rr-entry-dropdown-option:hover .rr-entry-dropdown-option-title {
    opacity: 0;
}

.rr-entry-dropdown-option:hover .rr-entry-dropdown-option-edit {
    opacity: 1;
}

/* Inline expanded editor for a single entry (button / dropdown) */
.rr-entry-editor {
    padding: 0.85rem 0.9rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -8px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rr-entry-editor-title {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #c7cfdd;
}

.rr-entry-emoji-btn-inline {
    width: 36px;
    height: 36px;
    border-radius: 0;
    font-size: 1.15rem;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.rr-entry-emoji-btn-inline:hover {
    background: transparent;
}

.rr-more-emoji-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    opacity: 0.88;
    filter: invert(83%) sepia(7%) saturate(293%) hue-rotate(184deg) brightness(97%) contrast(92%);
}

.rr-entry-editor .rr-label {
    color: #8f99b0;
    font-weight: 600;
}

.rr-entry-editor .rr-input {
    color: #d5dceb;
}

.rr-entry-editor .rr-input::placeholder {
    color: #7f889d;
}

.rr-btn-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.25rem 0;
}
.rr-btn-editor {
    background: rgba(30, 33, 45, 0.85);
    border: 1px solid rgba(147, 112, 219, 0.18);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-top: 0.4rem;
}
.rr-btn-editor-inner {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.rr-btn-editor-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.rr-btn-editor-row > label {
    min-width: 50px;
    font-size: 0.82rem;
    color: #b9bbbe;
    font-weight: 500;
}
.rr-btn-editor-row > input {
    flex: 1;
    min-width: 0;
}
.tk-btn-editor-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: #b9bbbe;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.tk-btn-editor-grid {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.tk-btn-editor-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.tk-btn-editor-field-label-input {
    flex: 1;
    min-width: 120px;
}
.tk-btn-editor-field-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #72767d;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tk-btn-emoji-wrap {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.tk-btn-emoji-input {
    width: 38px;
    height: 38px;
    text-align: center;
    font-size: 1.2rem;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #fff;
    padding: 0;
    cursor: text;
}
.tk-btn-emoji-input::placeholder {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.25);
}
.tk-btn-emoji-clear {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(237,66,69,0.15);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.tk-btn-emoji-clear:hover { opacity: 1; }
.tk-btn-label-input {
    height: 38px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #dcddde;
    padding: 0 0.6rem;
    font-size: 0.88rem;
    width: 100%;
}
.tk-btn-color-dots {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    height: 38px;
}
.tk-btn-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    padding: 0;
    outline: none;
}
.tk-btn-color-dot:hover {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}
.tk-btn-color-dot.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}
.tk-dot-primary { background: #5865F2; }
.tk-dot-secondary { background: #6d6f78; }
.tk-dot-success { background: #57F287; }
.tk-dot-danger { background: #ED4245; }

.tk-entry-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    gap: 0;
    user-select: none;
}
.tk-entry-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.tk-entry-toggle-track {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 8px;
    border-radius: 14px;
    background: rgba(148,163,184,0.25);
    transition: background 0.2s;
    height: 28px;
    min-width: 58px;
    justify-content: center;
}
.tk-entry-toggle input:checked ~ .tk-entry-toggle-track {
    background: #22c55e;
}
.tk-entry-toggle-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #94a3b8;
    transition: color 0.2s;
}
.tk-entry-toggle input:checked ~ .tk-entry-toggle-track .tk-entry-toggle-label {
    color: #fff;
}
.tk-entry-toggle-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.2s;
    flex-shrink: 0;
    border: 2px solid #3b82f6;
}
.tk-entry-toggle input:not(:checked) ~ .tk-entry-toggle-track .tk-entry-toggle-knob {
    border-color: #94a3b8;
}
.tk-entry-categories {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.tk-entry-categories .form-group {
    margin: 0;
}
.tk-entry-categories label {
    font-size: 0.82rem;
    color: #94a3b8;
    margin-bottom: 0.3rem;
    display: block;
}
.tk-entry-categories select {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #e2e8f0;
    padding: 0.6rem 0.8rem;
    font-size: 0.875rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}
.tk-entry-categories select:focus {
    outline: none;
    border-color: rgba(147,112,219,0.5);
}
.tk-required {
    color: #ef4444;
    font-weight: 700;
}

.rr-save-bar {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0;
}

.tk-entry-categories select option {
    background: #1e2130;
    color: #e2e8f0;
}

.tk-dropdown-option {
    background: rgba(30, 33, 45, 0.85);
    border: 1px solid rgba(147, 112, 219, 0.18);
    border-radius: 10px;
    margin-top: 0.5rem;
    overflow: hidden;
}
.tk-dropdown-option-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}
.tk-dropdown-option-preview:hover {
    background: rgba(255,255,255,0.03);
}
.tk-dropdown-option-emoji {
    font-size: 1.15rem;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.tk-dropdown-option-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.tk-dropdown-option-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text, #e2e8f0);
}
.tk-dropdown-option-desc {
    font-size: 0.78rem;
    color: #72767d;
}
.tk-dropdown-option-delete {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(237,66,69,0.12);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}
.tk-dropdown-option-delete:hover {
    opacity: 1;
    background: rgba(237,66,69,0.25);
}
.tk-dropdown-option-editor {
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(147, 112, 219, 0.12);
}
.tk-dropdown-add-btn {
    background: none;
    border: 1px dashed rgba(147, 112, 219, 0.3);
    border-radius: 10px;
    color: #72767d;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.6rem 1rem;
    width: 100%;
    transition: border-color 0.15s, color 0.15s;
}
.tk-dropdown-add-btn:hover {
    border-color: rgba(147, 112, 219, 0.5);
    color: var(--text, #e2e8f0);
}

.tk-embed-toggle-row {
    display: flex;
    align-items: center;
    margin: 0.5rem 0 0.25rem 0;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
}
.tk-embed-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    user-select: none;
}
.tk-embed-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary, #7c3aed);
    cursor: pointer;
}
.tk-embed-toggle-text {
    font-weight: 500;
}
.rr-embed-preview-wrap.tk-embed-disabled {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.5);
    transition: opacity 0.25s, filter 0.25s;
}

.tk-toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

.tk-toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.tk-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(148, 163, 184, 0.25);
    transition: background 0.2s ease, border-color 0.2s ease;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.tk-toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    transition: left 0.2s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.tk-toggle-switch input[type="checkbox"]:checked + .tk-toggle-slider {
    background: #3b82f6;
    border-color: #3b82f6;
}

.tk-toggle-switch input[type="checkbox"]:checked + .tk-toggle-slider::before {
    left: 21px;
    transform: translateY(-50%);
}

.tk-toggle-slider:hover {
    border-color: rgba(59, 130, 246, 0.4);
}

.tk-toggle-switch input[type="checkbox"]:checked + .tk-toggle-slider:hover {
    background: #2563eb;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.tk-toggle-switch input[type="checkbox"]:focus + .tk-toggle-slider {
    outline: 2px solid rgba(59, 130, 246, 0.4);
    outline-offset: 2px;
}

.tk-add-embed-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin: 8px 0;
    background: rgba(147, 112, 219, 0.08);
    border: 1.5px dashed rgba(147, 112, 219, 0.35);
    border-radius: 8px;
    color: rgba(147, 112, 219, 0.85);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tk-add-embed-btn:hover {
    background: rgba(147, 112, 219, 0.14);
    border-color: rgba(147, 112, 219, 0.55);
    color: rgba(180, 150, 240, 1);
}

.tk-embed-delete-btn {
    opacity: 0.6;
    transition: opacity 0.18s ease;
}

.tk-embed-delete-btn:hover {
    opacity: 1;
}

.ticket-picker {
    width: min(420px, 100%);
    position: relative;
}
.ticket-picker.is-open {
    z-index: 340;
}
.ticket-picker .rr-channel-picker-menu {
    z-index: 330;
}
#tkSettingsArea .birthday-grid-2 {
    overflow: visible;
}
#tkSettingsArea .form-group {
    overflow: visible;
}

.tk-panel-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.tk-panel-status--published {
    background: #43b581;
    box-shadow: 0 0 4px rgba(67, 181, 129, 0.4);
}

.tk-panel-status--draft {
    background: #72767d;
}

.rr-panel-card-dot {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 2px;
}

.rr-panel-card-date {
    color: var(--text-secondary, #72767d);
    font-size: 0.8rem;
}

#ticketGeneralSection,
#ticketGeneralSection .rr-section-body,
#ticketTranscriptSection,
#ticketTranscriptSection .rr-section-body,
#ticketGlobalSettingsSection,
#ticketGlobalSettingsSection .rr-section-body,
#ticketPanelSection,
#ticketPanelSection .rr-section-body,
#ticketWelcomeSection,
#ticketWelcomeSection .rr-section-body {
    overflow: visible;
}

.mod-dm-template {
    min-height: 90px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.mod-template-vars {
    display: block;
    margin-top: 0.5rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.mod-how-it-works {
    background: rgba(26, 30, 50, 0.5);
    padding: 1.25rem;
    border-radius: 8px;
    border-left: 3px solid rgba(147, 112, 219, 0.5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    font-size: 0.95rem;
}

.mod-how-col ul {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.6;
}

.mod-how-heading {
    font-weight: 600;
    color: #9370db;
    margin-bottom: 0.5rem;
}

.warn-how-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.warn-how-card {
    background: rgba(26, 30, 50, 0.6);
    border: 1px solid rgba(147, 112, 219, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    transition: border-color 0.2s;
}

.warn-how-card:hover {
    border-color: rgba(147, 112, 219, 0.45);
}

.warn-how-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary, #9370db);
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.warn-how-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.warn-how-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text, #e2e8f0);
    line-height: 1.4;
}

.warn-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(147, 112, 219, 0.15);
    border: 1px solid rgba(147, 112, 219, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--primary, #9370db);
}

.warn-how-step code {
    background: rgba(147, 112, 219, 0.15);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--primary, #9370db);
}

@media (max-width: 640px) {
    .warn-how-grid {
        grid-template-columns: 1fr;
    }
}

.mod-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.mod-stat-card {
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.15), rgba(0, 206, 209, 0.08));
    border-radius: 12px;
    border: 2px solid rgba(147, 112, 219, 0.3);
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mod-stat-label {
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.mod-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #9370db;
    line-height: 1;
}

.mod-stat-unit {
    font-size: 0.9rem;
    color: #999;
    font-weight: 500;
}

.rr-emoji-editor-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    min-width: max-content !important;
}

.rr-emoji-editor-group .rr-label {
    width: 100%;
    text-align: left;
}

/* Keep button editor fields compact and aligned (avoid global .form-group input sizing) */
.rr-entry-editor .form-group .rr-input,
.rr-entry-editor .form-group input.rr-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: rgba(15,17,30,0.7);
    border: 1px solid rgba(96,165,250,0.35);
    border-radius: 10px;
    color: #d5dceb;
    font-size: 0.95rem;
    box-shadow: none;
    outline: none;
    box-sizing: border-box;
}

.rr-entry-editor .form-group .rr-input:focus,
.rr-entry-editor .form-group input.rr-input:focus {
    border-color: rgba(148,163,184,0.4);
}

.rr-clear-emoji-btn {
    margin-top: 0;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(251, 113, 133, 0.42);
    background: rgba(90, 18, 31, 0.88);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 25px;
    right: -7px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.rr-clear-emoji-btn:hover {
    background: rgba(120, 24, 43, 0.95);
}

.rr-emoji-editor-group:hover .rr-clear-emoji-btn:not(.rr-clear-emoji-btn-hidden),
.rr-emoji-editor-group:focus-within .rr-clear-emoji-btn:not(.rr-clear-emoji-btn-hidden) {
    opacity: 1;
    pointer-events: auto;
}

.rr-clear-emoji-btn img {
    width: 8px;
    height: 8px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.rr-clear-emoji-btn-hidden {
    visibility: hidden;
    pointer-events: none;
}

.rr-btn-color-swatches {
    display: flex;
    gap: 0.5rem;
}

.rr-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.rr-color-swatch.rr-swatch-selected,
.rr-color-swatch:hover {
    border-color: #fff;
    transform: scale(1.15);
}

.rr-swatch-blue  { background: rgb(88,101,242); }
.rr-swatch-gray  { background: rgb(79,84,92); }
.rr-swatch-green { background: rgb(87,242,135); }
.rr-swatch-red   { background: rgb(237,66,69); }

/* Add new entry button */
.rr-add-entry-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 8px;
    color: var(--text-dim, #94a3b8);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

@media (max-width: 760px) {
    .rr-entry {
        gap: 0.5rem;
        padding: 0.65rem 0.72rem;
    }

    .rr-entry-delete {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .rr-entry-role-trigger {
        font-size: 0.82rem;
    }

    .rr-entry-btn-preview,
    .rr-entry-option-label {
        max-width: 110px;
    }

    .rr-entry-role-menu {
        right: 0;
        width: min(460px, calc(100vw - 32px));
    }
}

.rr-add-entry-btn:hover {
    border-color: rgba(59,130,246,0.5);
    color: #60a5fa;
    background: rgba(59,130,246,0.05);
}

/* Reaction Mode options */
/* Reaction Mode — segmented tab design */
.rr-mode-tabs {
    display: flex;
    background: rgba(6, 8, 18, 0.7);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
    padding: 4px;
    gap: 4px;
    width: min(var(--rr-content-max), 100%);
    max-width: 100%;
}

.rr-mode-tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.rr-mode-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.17s ease;
    user-select: none;
}

.rr-mode-tab:hover {
    background: rgba(255,255,255,0.05);
}

.rr-mode-tabs input[type="radio"]:checked + .rr-mode-tab {
    background: rgba(59, 130, 246, 0.14);
    outline: 1px solid rgba(59, 130, 246, 0.35);
}

.rr-mode-tab-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #d1d5db;
    line-height: 1;
}

.rr-mode-tabs input[type="radio"]:checked + .rr-mode-tab .rr-mode-tab-title {
    color: #93c5fd;
}

.rr-mode-tab-desc {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

/* Emoji picker floating container re-used for rr */
.rr-emoji-picker-wrap {
    position: relative;
    display: inline-block;
}

/* Responsive */
@media (max-width: 640px) {
    .rr-editor-topbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .rr-editor-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .rr-templates-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Birthday Builder ===== */
.birthday-builder {
    padding: 2rem 2.25rem 2.5rem;
}

.birthday-feature-switch {
    margin-bottom: 1.25rem;
}

.birthday-editor-body {
    --rr-content-max: 680px;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.birthday-editor-body .rr-section,
.economy-editor-body .rr-section {
    border-color: var(--border, rgba(255,255,255,0.08));
    background: var(--card-bg, rgba(30,33,50,0.85));
    box-shadow: none;
}

.birthday-editor-body .rr-section-header:hover,
.economy-editor-body .rr-section-header:hover {
    background: rgba(255,255,255,0.03);
}

.birthday-editor-body .rr-section-body,
.economy-editor-body .rr-section-body {
    padding-bottom: 1.25rem;
}

.economy-editor-body .rr-section + .rr-section {
    margin-top: 0.75rem;
}

.economy-editor-body .ticket-toggle-row {
    padding: 0.75rem 0;
}

.economy-editor-body .ticket-toggle-row:first-of-type {
    padding-top: 0.25rem;
}

.economy-plan-limits {
    padding: 0.875rem 1rem;
    background: rgba(147, 112, 219, 0.06);
    border: 1px solid rgba(147, 112, 219, 0.15);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.economy-plan-limits a {
    color: var(--primary);
    font-size: 0.85rem;
}

#economyRewardsSection .rr-section-body,
#economyModulesSection .rr-section-body,
#economyJobsSection .rr-section-body,
#economyQuestsSection .rr-section-body,
#economyShopSection .rr-section-body,
#economyAdminSection .rr-section-body {
    overflow: visible;
}

#birthdayAnnouncementSection,
#birthdayAnnouncementSection .rr-section-body,
#birthdayMessageSection,
#birthdayMessageSection .rr-section-body,
#botSettingsSection,
#botSettingsSection .rr-section-body {
    overflow: visible;
}

.birthday-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    overflow: visible;
}

#birthdayAnnouncementSection .birthday-grid-2 .form-group {
    position: relative;
    z-index: 1;
}

#botSettingsSection .birthday-grid-2 .form-group {
    position: relative;
    z-index: 1;
}

#birthdayAnnouncementSection .birthday-grid-2 .form-group:focus-within {
    z-index: 300;
}

#botSettingsSection .birthday-grid-2 .form-group:focus-within {
    z-index: 300;
}

.birthday-picker {
    width: 100%;
}

.birthday-picker .rr-channel-picker-name {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.birthday-role-picker .rr-channel-picker-trigger {
    border-radius: 10px;
    border-color: rgba(255,255,255,0.1);
    background: rgba(15,17,30,0.6);
}

.birthday-role-picker .rr-channel-picker-trigger:hover,
.birthday-role-picker.is-open .rr-channel-picker-trigger,
.birthday-role-picker .rr-channel-picker-trigger:focus-visible {
    border-color: rgba(59,130,246,0.7);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

.birthday-role-picker .rr-channel-picker-name.is-placeholder {
    color: #94a3b8;
}

.birthday-select-picker .rr-channel-picker-trigger {
    border-radius: 9px;
    border-color: rgba(86, 101, 139, 0.45);
    background: #10131d;
    min-height: 46px;
    padding: 0 12px;
}

.birthday-select-picker .rr-channel-picker-trigger:hover,
.birthday-select-picker.is-open .rr-channel-picker-trigger,
.birthday-select-picker .rr-channel-picker-trigger:focus-visible {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.24);
}

.birthday-select-picker .rr-channel-picker-name {
    color: #f1f5f9;
    font-size: 1.05rem;
    font-weight: 400;
}

.birthday-select-picker .rr-channel-picker-menu {
    background: #10141f;
    border: 1px solid rgba(72, 86, 119, 0.44);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.45);
    padding: 0;
}

.birthday-select-picker .rr-channel-picker-label {
    color: #7f8ba3;
    padding: 10px 10px 6px;
}

.birthday-select-picker .rr-channel-picker-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 0 6px 6px;
    display: flex;
    flex-direction: column;
}

.birthday-select-option-btn {
    width: 100%;
    border: none;
    background: transparent;
    color: #d7dfef;
    font-size: 1.05rem;
    font-weight: 400;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
}

.birthday-select-option-btn:hover {
    background: rgba(55, 65, 92, 0.45);
    color: #f8fafc;
}

.birthday-select-option-btn.is-selected {
    background: rgba(55, 65, 92, 0.58);
    color: #f8fafc;
}

.birthday-select-option-label {
    display: block;
}

#birthdayLeapDayPicker .birthday-select-option-btn {
    font-size: 0.94rem;
    line-height: 1.35;
    padding: 8px 10px;
}

.birthday-role-trigger-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.birthday-role-trigger-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.65);
    flex-shrink: 0;
}

.birthday-role-trigger-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.birthday-role-picker .rr-channel-picker-menu {
    background: #161a27;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.4);
    padding: 0.5rem;
}

.birthday-role-picker .rr-channel-picker-label {
    color: #94a3b8;
    padding: 6px 8px 6px;
}

.birthday-role-picker .rr-channel-picker-list {
    max-height: 220px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.birthday-role-option-btn {
    width: 100%;
    border: none;
    background: transparent;
    color: #dbe5ff;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-align: left;
    padding: 0.45rem 0.55rem;
    border-radius: 7px;
    cursor: pointer;
}

.birthday-role-option-btn:hover {
    background: rgba(255,255,255,0.06);
}

.birthday-role-option-btn.is-selected {
    background: rgba(88,101,242,0.18);
}

.birthday-role-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#birthdayAnnouncementSection .birthday-picker.is-open {
    z-index: 320;
}

#botSettingsSection .birthday-picker.is-open {
    z-index: 320;
}

#birthdayAnnouncementSection .birthday-picker .rr-channel-picker-menu {
    z-index: 330;
}

#botSettingsSection .birthday-picker .rr-channel-picker-menu {
    z-index: 330;
}

.birthday-picker .rr-channel-picker-trigger,
.birthday-native-select {
    min-height: 46px;
}

.birthday-native-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #10131d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%239AA6BD' d='M7 10.1 2.3 5.4l1-1L7 8.1l3.7-3.7 1 1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    border: 1px solid rgba(86, 101, 139, 0.45);
    border-radius: 9px;
    color: #e2e8f0;
    padding: 0 42px 0 12px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.birthday-native-select:hover {
    border-color: rgba(124, 145, 198, 0.68);
    background-color: #101521;
}

.birthday-native-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
    outline: none;
}

.birthday-native-select option {
    background: #161a27;
    color: #dbe5ff;
}

.birthday-variable-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.birthday-avatar-auto-row {
    margin-bottom: 1rem;
    max-width: 360px;
}

.birthday-avatar-auto-row .rr-label {
    display: block;
    margin-bottom: 0.35rem;
}

.birthday-avatar-auto-row small {
    display: block;
    margin-top: 0.4rem;
}

.birthday-timezone-link {
    color: #86b7ff;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed rgba(134, 183, 255, 0.7);
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    border-radius: 4px;
    padding: 0 2px;
}

.birthday-timezone-link:hover {
    color: #c5dcff;
    border-bottom-color: rgba(197, 220, 255, 0.95);
    background: rgba(59, 130, 246, 0.12);
}

.birthday-timezone-link:focus-visible {
    outline: 2px solid rgba(59,130,246,0.7);
    outline-offset: 2px;
}

.birthday-variable-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    background: rgba(147, 112, 219, 0.16);
    border: 1px solid rgba(147, 112, 219, 0.28);
    color: #ece9ff;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.birthday-builder-textarea {
    min-height: 108px;
    padding-bottom: 2rem !important;
    resize: vertical;
}

.birthday-message-fields {
    margin-top: 1rem;
}

.birthday-dual-builders {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

.birthday-builder-block {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    overflow: visible;
}

.birthday-builder-block-title {
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.birthday-embed-editors-grid {
    align-items: start;
}

.birthday-inline-editor-card {
    width: 100%;
}

.birthday-inline-editor-card .rr-embed-card-inner {
    padding-top: 0.8rem;
    padding-bottom: 0.75rem;
}

.birthday-inline-editor-card .rr-embed-title,
.birthday-inline-editor-card .rr-embed-desc {
    width: 100%;
}

.birthday-inline-editor-card .rr-embed-desc {
    min-height: 112px;
    resize: vertical;
}

.birthday-inline-editor-count {
    margin-top: 0.45rem;
    color: var(--text-dim);
    font-size: 0.74rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bday-textarea-wrap {
    position: relative;
}

.bday-char-count {
    position: absolute;
    right: 0.8rem;
    bottom: 0.65rem;
    color: var(--text-dim);
    font-size: 0.72rem;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.birthday-toggle-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1rem;
    margin-bottom: 0.9rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.12), rgba(94, 234, 212, 0.06));
    border: 1px solid rgba(147, 112, 219, 0.2);
}

.birthday-toggle-card:last-child {
    margin-bottom: 0;
}

.birthday-toggle-title {
    color: var(--text);
    font-size: 0.94rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.birthday-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
}

.birthday-preview-toolbar-inline {
    margin-top: 0.9rem;
}

.birthday-color-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.2rem 0 1rem;
}

.birthday-color-label {
    color: var(--text-dim);
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 0.1rem;
}

.birthday-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}

.birthday-color-hex {
    width: 110px;
    margin-left: 0.3rem;
    text-transform: uppercase;
}

.birthday-role-dot {
    font-size: 0.9rem;
    line-height: 1;
}

.birthday-preview-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #d5dbee;
    font-size: 0.78rem;
    font-weight: 600;
}

.birthday-preview-tab {
    padding: 0.44rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-dim);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.birthday-preview-tab.is-active {
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.26), rgba(0, 206, 209, 0.18));
    border-color: rgba(147, 112, 219, 0.45);
    color: #f8faff;
}

.birthday-preview-tab.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.birthday-msg-preview {
    width: min(var(--rr-content-max), 100%);
    margin-top: 0.2rem;
    margin-bottom: 0.75rem;
}

.birthday-msg-preview .rr-avatar-fallback {
    display: none;
}

.birthday-embed-preview-wrap {
    width: min(var(--rr-content-max), 100%);
    margin-top: 0.65rem;
    overflow: visible;
}

.birthday-embed-card {
    width: min(var(--rr-content-max), 100%);
}

.birthday-preview-context {
    margin-bottom: 0.1rem;
    color: #a8b0c9;
    font-size: 0.88rem;
    line-height: 1.5;
}

.birthday-preview-topline {
    color: #f8fafc;
}

.birthday-preview-extra {
    margin-top: 0.1rem;
    color: #c4cae0;
    font-size: 0.84rem;
    line-height: 1.5;
    padding-top: 0;
    border-top: none;
}

.birthday-preview-hint {
    margin-top: 0.9rem;
    color: var(--text-dim);
    font-size: 0.78rem;
    line-height: 1.5;
}

.birthday-board-status {
    padding: 0.95rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.12), rgba(0, 206, 209, 0.08));
    border: 1px solid rgba(147, 112, 219, 0.18);
    color: var(--text-dim);
    font-size: 0.84rem;
    line-height: 1.55;
}

.birthday-board-preview-card {
    margin-top: 1rem;
    max-width: 760px;
}

.birthday-board-preview-desc {
    margin-bottom: 0.75rem;
}

.birthday-board-month-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.birthday-board-month-card {
    padding: 0.6rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.birthday-board-month-title {
    color: #f3f6ff;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.35rem;
}

.birthday-board-entry {
    color: #cfd7ef;
    font-size: 0.73rem;
    line-height: 1.4;
}

.birthday-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    max-width: 760px;
}

.birthday-command-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.birthday-command-item span {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.birthday-command-item small {
    color: var(--text-dim);
    font-size: 0.76rem;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .birthday-editor-body {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .birthday-builder {
        padding: 1.25rem;
    }

    .birthday-grid-2 {
        grid-template-columns: 1fr;
    }

    .birthday-command-grid {
        grid-template-columns: 1fr;
    }

    .birthday-board-month-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== AI BUDDY STYLES ===== */

.beta-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 6px;
    position: relative;
    top: -1px;
    user-select: none;
}

.buddy-avatar-upload-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.buddy-avatar-preview-area {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px dashed rgba(147, 112, 219, 0.4);
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.buddy-avatar-preview-area:hover {
    border-color: rgba(147, 112, 219, 0.7);
    box-shadow: 0 0 12px rgba(147, 112, 219, 0.2);
}

.buddy-avatar-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.buddy-avatar-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
}

.buddy-avatar-placeholder .rr-upload-icon {
    width: 28px;
    height: 28px;
    opacity: 0.5;
}

.buddy-avatar-remove-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 80, 80, 0.15);
    border: 1px solid rgba(255, 80, 80, 0.3);
    color: #ff6b6b;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    margin-top: 28px;
}

.buddy-avatar-remove-btn:hover {
    background: rgba(255, 80, 80, 0.25);
    border-color: rgba(255, 80, 80, 0.5);
}

.buddy-slider-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.04);
    transition: border-color 0.2s;
}

.buddy-slider-item:hover {
    border-color: rgba(147, 112, 219, 0.2);
}

.buddy-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    min-height: 48px;
    align-items: center;
    transition: border-color 0.2s;
}

.buddy-tag-container:focus-within {
    border-color: rgba(147, 112, 219, 0.4);
}

.buddy-tag-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 180px;
}

.buddy-tag-plus {
    color: rgba(147,112,219,0.5);
    font-size: 18px;
    pointer-events: none;
}

.buddy-tag-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    flex: 1;
    padding: 4px 0;
}

.buddy-tag-input::placeholder {
    color: rgba(255,255,255,0.25);
}

.buddy-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(147,112,219,0.15);
    border: 1px solid rgba(147,112,219,0.3);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 13px;
    color: #c4b5fd;
    white-space: nowrap;
    transition: all 0.15s;
}

.buddy-tag:hover {
    background: rgba(147,112,219,0.25);
}

.buddy-tag-remove {
    cursor: pointer;
    color: rgba(255,255,255,0.4);
    font-size: 16px;
    line-height: 1;
    transition: color 0.15s;
}

.buddy-tag-remove:hover {
    color: #ff6b6b;
}

.buddy-tag-count {
    color: rgba(255,255,255,0.35);
    font-weight: 400;
    font-size: 13px;
}

.buddy-channel-select-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.buddy-channel-dropdown {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.buddy-channel-dropdown:hover {
    border-color: rgba(147,112,219,0.4);
}

.buddy-channel-dropdown:focus {
    outline: none;
    border-color: rgba(147,112,219,0.6);
    box-shadow: 0 0 0 3px rgba(147,112,219,0.15);
}

.buddy-channel-dropdown option {
    background: #1a1a2e;
    color: #fff;
    padding: 8px;
}

.buddy-channel-dropdown optgroup {
    background: #12121f;
    color: #9370DB;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.buddy-add-channel-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(147,112,219,0.3), rgba(99,102,241,0.3));
    border: 1px solid rgba(147,112,219,0.4);
    color: #c4b5fd;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.buddy-add-channel-btn:hover {
    background: linear-gradient(135deg, rgba(147,112,219,0.5), rgba(99,102,241,0.5));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(147,112,219,0.2);
}

.buddy-channels-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    min-height: 0;
}

.buddy-channels-list .buddy-tag {
    background: rgba(0,206,209,0.12);
    border-color: rgba(0,206,209,0.3);
    color: #7dd3d4;
}

.buddy-channels-list .buddy-tag:hover {
    background: rgba(0,206,209,0.22);
}

.buddy-channels-list .buddy-tag::before {
    content: '#';
    opacity: 0.5;
    margin-right: 2px;
}

.buddy-nsfw-warning {
    margin-top: 8px;
    padding: 12px;
    background: rgba(255,165,0,0.1);
    border: 1px solid rgba(255,165,0,0.3);
    border-radius: 8px;
    color: #fbbf24;
    font-size: 13px;
    line-height: 1.5;
}

/* Buddy Chat Preview */
.buddy-chat-preview {
    background: #1a1a2e;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}

.buddy-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.buddy-chat-name {
    font-weight: 600;
    color: #fff;
    font-size: 15px;
}

.buddy-chat-status {
    color: #22c55e;
    font-size: 12px;
}

.buddy-chat-messages {
    padding: 16px;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.buddy-chat-intro {
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    padding: 20px 0;
}

.buddy-chat-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.buddy-chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(99,102,241,0.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #c4b5fd;
}

.buddy-chat-msg-content {
    flex: 1;
}

.buddy-chat-msg-name {
    font-weight: 600;
    font-size: 13px;
    color: #c4b5fd;
    margin-bottom: 2px;
}

.buddy-chat-msg-name.user-msg {
    color: #60a5fa;
}

.buddy-chat-msg-text {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
}

.buddy-chat-input-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.2);
}

.buddy-chat-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.buddy-chat-input:focus {
    border-color: rgba(99,102,241,0.5);
}

.buddy-chat-reset {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}

.buddy-chat-reset:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.buddy-chat-send {
    background: rgba(99,102,241,0.5);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.buddy-chat-send:hover {
    background: rgba(99,102,241,0.7);
}

.buddy-chat-typing {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    font-style: italic;
    padding: 4px 0;
}

.stats-counters-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.stats-counter-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    transition: background 0.15s;
}

.stats-counter-card:hover {
    background: rgba(0,0,0,0.3);
}

.stats-counter-voice-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #94a3b8;
    opacity: 0.7;
}

.stats-counter-body {
    flex: 1;
    min-width: 0;
}

.stats-counter-name {
    font-weight: 600;
    color: var(--text, #e2e8f0);
    font-size: 0.88rem;
}

.stats-counter-edit-row {
    margin-top: 4px;
}

.stats-counter-edit-input {
    width: 100%;
    max-width: 320px;
    padding: 0.4rem 0.7rem;
    background: rgba(15,17,30,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color: var(--text, #e2e8f0);
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
}

.stats-counter-edit-input:focus {
    border-color: rgba(59,130,246,0.6);
}

.stats-counter-preview {
    color: var(--text-dim, #94a3b8);
    font-size: 0.78rem;
    margin-top: 3px;
}

.stats-counter-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.stats-counter-save-btn {
    padding: 0.35rem 0.7rem;
    background: #3b82f6;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.stats-counter-save-btn:hover {
    background: #2563eb;
}

.stats-counter-discard-btn {
    padding: 0.35rem 0.7rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: var(--text, #e2e8f0);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.stats-counter-discard-btn:hover {
    background: rgba(255,255,255,0.12);
}

.stats-counter-delete-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.stats-counter-delete-btn:hover {
    background: rgba(239,68,68,0.25);
}

.stats-counter-delete-btn svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.stats-add-form {
    margin-top: 0.75rem;
    padding: 1rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}

.stats-add-form .form-group {
    margin-bottom: 0.75rem;
}

.stats-add-form .form-group:last-of-type {
    margin-bottom: 0;
}

.stats-help-text {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-dim, #94a3b8);
}

.stats-help-text code {
    background: rgba(255,255,255,0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.76rem;
}

.stats-form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.stats-channel-preview {
    background: rgba(88,101,242,0.08);
    border: 1px solid rgba(88,101,242,0.15);
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    color: var(--text, #e2e8f0);
    font-family: 'gg sans', 'Noto Sans', sans-serif;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stats-no-counters {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-dim, rgba(255,255,255,0.4));
    font-size: 0.88rem;
    font-style: italic;
}

.stats-info-list {
    color: var(--text-dim, #94a3b8);
    line-height: 1.8;
    padding-left: 1.2rem;
    margin: 0;
    font-size: 0.88rem;
}

.stats-info-list strong {
    color: var(--text, #e2e8f0);
}

.stats-picker {
    position: relative;
    z-index: 40;
}

.rr-channel-picker-option {
    width: 100%;
    border: none;
    background: transparent;
    color: #d7dfef;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 400;
    transition: background 0.16s ease, color 0.16s ease;
}

.rr-channel-picker-option:hover {
    background: rgba(55, 65, 92, 0.45);
    color: #f8fafc;
}

.rr-channel-picker-option.is-selected {
    background: rgba(55, 65, 92, 0.58);
    color: #f8fafc;
}

/* Ticket UX overhaul styles */
#tkSettingsArea .rr-section + .rr-section {
    margin-top: 0.75rem;
}

.rr-settings-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: var(--card-bg, rgba(30,33,50,0.85));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 8px;
    color: var(--text, #e2e8f0);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.rr-settings-toggle-btn:hover {
    background: rgba(255,255,255,0.07);
}

.rr-settings-toggle-chevron {
    margin-left: 0.25rem;
    transition: transform 0.2s;
    opacity: 0.7;
}

.rr-settings-toggle-btn.is-open .rr-settings-toggle-chevron {
    transform: rotate(180deg);
}

.rr-tk-static-title {
    cursor: default !important;
    opacity: 0.7;
    pointer-events: none;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- Custom Icon Assets --- */

.plugin-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}

.tab-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    margin-right: 2px;
    position: relative;
    top: -1px;
    filter: brightness(0) invert(1);
}

.profile-menu-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.profile-action-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.activity-icon-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    margin: auto;
    filter: brightness(0) invert(1);
}

.master-switch-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}

.section-header-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -2px;
    filter: brightness(0) invert(1);
}

.cmd-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}

.stat-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: brightness(0) invert(1);
}

.general-quick-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}

.general-section-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}

/* Server-switch loading overlay */
#serverSwitchOverlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, rgba(20, 34, 78, 0.35), rgba(4, 8, 24, 0.9));
    backdrop-filter: blur(3px);
    color: #d6e7ff;
    font-size: 0.98rem;
    letter-spacing: 0.2px;
    flex-direction: column;
    gap: 1.2rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    visibility: hidden;
}

#serverSwitchOverlay.visible {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

#serverSwitchOverlay.fading-out {
    opacity: 0;
    pointer-events: none;
}

.server-switch-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
    background: rgba(147, 112, 219, 0.12);
    box-shadow: 0 0 32px rgba(147, 112, 219, 0.28), 0 4px 24px rgba(0,0,0,0.45);
}

.server-switch-name {
    font-size: 1.18rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.3px;
    max-width: 340px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-switch-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(147, 112, 219, 0.2);
    border-top-color: rgba(147, 112, 219, 0.85);
    border-radius: 50%;
    animation: serverSwitchSpin 0.75s linear infinite;
}

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

/* ============================================================
   MOBILE RESPONSIVENESS - Dashboard Sections
   Comprehensive fixes for ≤480px phones and ≤768px tablets
   ============================================================ */

/* --- Navbar mobile polish --- */
@media (max-width: 480px) {
    .nav-content {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }

    .nav-brand {
        font-size: 0.95rem;
    }

    .nav-user {
        gap: 0.4rem;
    }

    .user-name {
        display: none;
    }

    .server-info h3 {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.78rem;
    }

    .server-info-hamburger {
        display: none;
    }

    /* Hide tier badge in server info on phones */
    .server-info .tier-badge {
        display: none !important;
    }

    .back-btn span {
        display: none;
    }

    .back-btn {
        padding: 0.5rem;
        min-width: 40px;
        justify-content: center;
    }
}

/* --- Save bar mobile fix --- */
@media (max-width: 480px) {
    .unified-save-bar {
        width: calc(100% - 1rem);
        left: 0.5rem;
        transform: none;
        border-radius: 14px;
        padding: 0.75rem;
        bottom: -200px;
    }

    .unified-save-bar.show {
        bottom: 0.75rem;
        transform: none;
    }

    .save-bar-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .save-bar-message {
        font-size: 0.85rem;
    }

    .save-bar-actions {
        display: flex;
        gap: 0.5rem;
    }

    .discard-btn,
    .save-btn-unified {
        flex: 1;
        padding: 0.75rem 0.5rem;
        min-height: 44px;
        font-size: 0.85rem;
    }
}

/* --- Touch-friendly tap targets --- */
@media (max-width: 768px) {
    /* All toggles, buttons, selects, inputs get min 44px height */
    .toggle-switch,
    .form-toggle,
    select,
    .channel-picker,
    .role-picker,
    .rr-channel-picker,
    .dropdown-select {
        min-height: 44px;
    }

    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important; /* Prevent iOS zoom */
        min-height: 44px;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    button.tab-btn,
    .sidebar-item,
    .server-card-action,
    .role-chip-remove,
    .modal-close {
        min-height: 44px;
    }

    /* Toggle switches touch targets */
    .toggle-switch {
        display: inline-flex;
        align-items: center;
    }

    .setting-item {
        padding: 1rem;
        flex-wrap: wrap;
    }

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

/* --- Overview section --- */
@media (max-width: 480px) {
    .overview-hero {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .overview-hero-kpis {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    .overview-kpi {
        min-width: 80px;
        flex: 1;
    }

    .overview-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .overview-metric-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .overview-panel {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }

    .overview-metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Analytics charts --- */
@media (max-width: 768px) {
    .analytics-chart-wrapper,
    .chart-wrapper,
    .chart-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    canvas {
        max-width: 100%;
    }

    .analytics-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .analytics-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Leveling / rank card previews --- */
@media (max-width: 768px) {
    .rank-card-preview,
    .level-card-preview {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .xp-leaderboard-list {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .xp-rewards-grid,
    .level-rewards-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Giveaways / Tickets / Self-Roles panels --- */
@media (max-width: 768px) {
    .giveaway-card,
    .ticket-panel-card,
    .selfrole-panel-card {
        padding: 1rem;
    }

    .giveaway-card-actions,
    .ticket-panel-actions,
    .selfrole-panel-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .giveaway-card-actions .btn,
    .ticket-panel-actions .btn,
    .selfrole-panel-actions .btn {
        flex: 1;
        min-width: 120px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .giveaway-info-grid,
    .tickets-stats-grid {
        grid-template-columns: 1fr;
    }

    .selfrole-role-list {
        gap: 0.5rem;
    }

    .role-chip {
        padding: 0.5rem 0.75rem;
        min-height: 44px;
    }
}

/* --- Self-roles save bar --- */
@media (max-width: 480px) {
    .rr-save-bar {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .rr-save-bar .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* --- AI config panels --- */
@media (max-width: 480px) {
    .ai-config-grid,
    .ai-features-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Logs table --- */
@media (max-width: 768px) {
    .logs-table-wrapper,
    .log-table-container {
        overflow-x: auto;
        width: 100%;
        max-width: 100%;
    }

    .logs-table {
        min-width: 500px;
    }
}

/* --- Premium / billing section --- */
@media (max-width: 768px) {
    .premium-plans-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .premium-plan-card,
    .pricing-card {
        padding: 1.25rem;
    }
}

/* --- General grids and overflow prevention --- */
@media (max-width: 480px) {
    .tab-content {
        overflow-x: hidden;
    }

    .form-row,
    .config-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .stats-grid,
    .server-stats-grid,
    .feature-cards-grid {
        grid-template-columns: 1fr;
    }

    .config-content {
        overflow-x: hidden;
    }

    /* Card padding reduction */
    .config-card,
    .rr-section,
    .feature-card {
        padding: 1rem;
    }

    /* Modals on mobile */
    .modal-content {
        width: 95%;
        border-radius: 14px;
        max-height: 85vh;
    }

    .modal-header,
    .modal-body {
        padding: 1rem;
    }

    /* Remove bottom whitespace gap on phone-sized screens */
    .dashboard-container {
        min-height: 0;
        padding-bottom: 1.5rem;
    }

    body.server-selected .dashboard-container {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================================
   WEBHOOKS TAB - Discohook-style embed editor
   ============================================================ */

body.webhooks-tab-active .dashboard-container {
    padding: 0;
    margin-top: 60px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.webhooks-tab-active.server-selected .dashboard-container {
    padding: 0;
}

body.webhooks-tab-active .site-footer {
    display: none;
}

body.webhooks-tab-active #configView {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

body.webhooks-tab-active #configView .tabs-wrapper,
body.webhooks-tab-active #configView .config-header {
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
}

body.webhooks-tab-active .config-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#webhooksTab {
    flex: 1;
    display: none;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    min-height: 0;
    max-height: none;
}

#webhooksTab.active {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.wh-layout {
    display: flex;
    flex: 1;
    gap: 0;
    height: 100%;
    overflow: hidden;
    min-height: 0;
}

/* ---- Editor Panel (Left) ---- */
.wh-editor-panel {
    width: 560px;
    min-width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #1e1e3a);
    border-right: 1px solid var(--border, #2a2a4a);
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.wh-section {
    border-bottom: 1px solid var(--border, #2a2a4a);
    padding: 1rem;
}

.wh-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.wh-section-icon {
    color: var(--primary, #9370DB);
}

/* Webhook connection */
.wh-connected-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: rgba(147, 112, 219, 0.08);
    border: 1px solid rgba(147, 112, 219, 0.25);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(147,112,219,0.06);
}

.wh-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(147,112,219,0.2);
}

.wh-connected-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wh-connection-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.wh-paste-row {
    display: flex;
    gap: 0.5rem;
}

.wh-create-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wh-existing-list {
    margin-top: 0.5rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wh-existing-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    padding: 0.5rem 0.75rem 0.25rem;
    margin: 0;
}

.wh-existing-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}
.wh-existing-item:hover {
    background: rgba(255,255,255,0.06);
}
.wh-existing-item--disabled {
    opacity: 0.45;
    cursor: default;
}
.wh-existing-item--disabled:hover {
    background: transparent;
}

.wh-existing-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.wh-existing-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text, #fff);
}

.wh-existing-channel {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
}

.wh-or-divider {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    user-select: none;
}

/* Shared inputs */
.wh-input {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 10px;
    color: var(--text, #fff);
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-width: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wh-input:focus {
    border-color: rgba(147,112,219,0.6);
    background: rgba(0,0,0,0.4);
    box-shadow: 0 0 0 3px rgba(147,112,219,0.1), inset 0 0 0 1px rgba(147,112,219,0.05);
}

.wh-textarea {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 10px;
    color: var(--text, #fff);
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-width: 0;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wh-textarea:focus {
    border-color: rgba(147,112,219,0.6);
    background: rgba(0,0,0,0.4);
    box-shadow: 0 0 0 3px rgba(147,112,219,0.1), inset 0 0 0 1px rgba(147,112,219,0.05);
}

/* Hidden native select — channel select replaced by custom dropdown */
.wh-create-row .wh-select {
    display: none;
}

/* Modal selects remain as native selects with glassmorphism styling */
.wh-modal-body .wh-select {
    display: block;
    flex: 1;
    width: 100%;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 10px;
    color: var(--text, #fff);
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.wh-modal-body .wh-select:focus {
    border-color: rgba(147,112,219,0.6);
    box-shadow: 0 0 0 3px rgba(147,112,219,0.1);
}
.wh-modal-body .wh-select option {
    background: #1a1a2e;
    color: #fff;
}

/* Custom channel dropdown */
.wh-custom-select {
    position: relative;
    flex: 1;
    min-width: 0;
    user-select: none;
}
.wh-custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 10px;
    color: var(--text, #fff);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wh-custom-select-trigger:hover {
    background: rgba(0,0,0,0.45);
    border-color: rgba(147,112,219,0.45);
    box-shadow: 0 0 0 3px rgba(147,112,219,0.08);
}
.wh-custom-select.open .wh-custom-select-trigger {
    border-color: rgba(147,112,219,0.65);
    box-shadow: 0 0 0 3px rgba(147,112,219,0.12);
}
.wh-custom-select-trigger-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,0.85);
}
.wh-custom-select-trigger-text.placeholder {
    color: rgba(255,255,255,0.35);
}
.wh-custom-select-chevron {
    flex-shrink: 0;
    color: rgba(255,255,255,0.4);
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.wh-custom-select.open .wh-custom-select-chevron {
    transform: rotate(180deg);
}
.wh-custom-select-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: rgba(20,18,42,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,92,246,0.08);
    z-index: 10000;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease;
}
.wh-custom-select.open .wh-custom-select-dropdown {
    max-height: 260px;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
}
.wh-custom-select-option {
    padding: 0.5rem 0.85rem;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.wh-custom-select-option:hover {
    background: rgba(147,112,219,0.15);
    color: rgba(255,255,255,0.95);
}
.wh-custom-select-option.selected {
    background: rgba(147,112,219,0.2);
    color: #b794f4;
    font-weight: 600;
}
.wh-custom-select-option-placeholder {
    color: rgba(255,255,255,0.3);
    font-style: italic;
}

/* Buttons */
.wh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap;
    flex-shrink: 0;
}
.wh-btn--primary {
    background: linear-gradient(135deg, rgba(147,112,219,0.85), rgba(109,40,217,0.85));
    color: #fff;
    border: 1px solid rgba(147,112,219,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wh-btn--primary:hover {
    background: linear-gradient(135deg, rgba(168,130,232,0.9), rgba(124,58,237,0.9));
    box-shadow: 0 0 16px rgba(147,112,219,0.35);
}
.wh-btn--secondary {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(139,92,246,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wh-btn--secondary:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(139,92,246,0.35);
    box-shadow: 0 0 10px rgba(139,92,246,0.15);
}
.wh-btn--ghost {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wh-btn--ghost:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.2);
}
.wh-btn--ghost.wh-btn--danger:hover {
    background: rgba(237, 66, 69, 0.15);
    border-color: rgba(237,66,69,0.4);
    color: #f87171;
}
.wh-btn--send {
    background: linear-gradient(135deg, rgba(88,101,242,0.85), rgba(147,112,219,0.85));
    color: #fff;
    padding: 0.55rem 1.25rem;
    font-size: 0.9rem;
    border: 1px solid rgba(88,101,242,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wh-btn--send:hover {
    background: linear-gradient(135deg, rgba(114,137,218,0.9), rgba(168,130,232,0.9));
    box-shadow: 0 0 20px rgba(88,101,242,0.45);
}

.wh-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.wh-icon-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
}
.wh-icon-btn--danger:hover {
    background: rgba(237,66,69,0.15);
    border-color: rgba(237,66,69,0.3);
    color: #f87171;
}

/* Labels and char counts */
.wh-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 0.35rem;
}

.wh-char-count {
    font-weight: 400;
    color: rgba(255,255,255,0.35);
    text-transform: none;
    letter-spacing: 0;
}

.wh-field-group {
    margin-bottom: 0.65rem;
}

.wh-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

/* Message card */
.wh-message-card {
    border-bottom: 1px solid var(--border, #2a2a4a);
    background: transparent;
}

.wh-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    cursor: pointer;
    background: rgba(0,0,0,0.12);
    transition: background 0.18s;
    user-select: none;
}
.wh-message-header:hover {
    background: rgba(147,112,219,0.07);
}

.wh-message-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wh-message-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.wh-message-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wh-message-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wh-collapse-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0;
    transition: transform 0.18s, color 0.15s;
}
.wh-collapse-btn:hover {
    color: rgba(255,255,255,0.75);
}
.wh-collapse-btn.collapsed svg {
    transform: rotate(-90deg);
}

/* Send toggle — custom switch */
.wh-send-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    user-select: none;
}
.wh-send-toggle input {
    display: none;
}
.wh-toggle-track {
    position: relative;
    width: 28px;
    height: 15px;
    background: rgba(148, 163, 184, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.wh-toggle-track::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.wh-send-toggle input:checked + .wh-toggle-track {
    background: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 0 8px rgba(59,130,246,0.4);
}
.wh-send-toggle input:checked + .wh-toggle-track::after {
    left: 15px;
    transform: translateY(-50%);
}
.wh-send-toggle-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Collapsible sections inside embed/message */
.wh-collapsible-section {
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.4rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.2s;
}
.wh-collapsible-section:hover {
    border-color: rgba(139,92,246,0.25);
}

.wh-collapsible-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    background: rgba(0,0,0,0.18);
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    user-select: none;
    transition: background 0.18s;
}
.wh-collapsible-header:hover {
    background: rgba(147,112,219,0.1);
}

.wh-chevron {
    transition: transform 0.18s;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
}
.wh-collapsible-header.collapsed .wh-chevron {
    transform: rotate(-90deg);
}

.wh-collapsible-body {
    padding: 0.75rem;
    background: rgba(0,0,0,0.08);
}

/* Embed card */
.wh-embed-card {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(139,92,246,0.18);
    margin-bottom: 0.5rem;
    background: rgba(0,0,0,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wh-embed-card:hover {
    border-color: rgba(139,92,246,0.3);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(139,92,246,0.08);
}

.wh-embed-sidebar {
    width: 4px;
    flex-shrink: 0;
    background: #5865F2;
}

.wh-embed-inner {
    flex: 1;
    min-width: 0;
}

.wh-embed-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0,0,0,0.12);
}

.wh-embed-label {
    flex: 1;
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}

.wh-embed-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.wh-embed-body {
    padding: 0.5rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Color picker row */
.wh-color-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.wh-color-picker {
    width: 36px;
    height: 32px;
    padding: 2px;
    border-radius: 10px;
    border: 1px solid rgba(139,92,246,0.25);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s;
}
.wh-color-picker:hover {
    border-color: rgba(139,92,246,0.5);
}

/* Add embed / add message buttons */
.wh-add-embed-btn,
.wh-add-field-btn,
.wh-add-btnrow-btn,
.wh-add-btn-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px dashed rgba(147,112,219,0.35);
    background: rgba(147,112,219,0.05);
    color: rgba(147,112,219,0.85);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
    margin-top: 0.3rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.wh-add-embed-btn:hover,
.wh-add-field-btn:hover,
.wh-add-btnrow-btn:hover,
.wh-add-btn-btn:hover {
    background: rgba(147,112,219,0.12);
    border-color: rgba(147,112,219,0.6);
    border-style: solid;
    box-shadow: 0 0 12px rgba(147,112,219,0.15);
}

.wh-add-message-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    border-top: 1px solid var(--border, #2a2a4a);
    border-bottom: 1px solid var(--border, #2a2a4a);
    background: rgba(88,101,242,0.08);
    color: #7289da;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
}
.wh-add-message-btn:hover {
    background: rgba(88,101,242,0.15);
}

/* Action bar */
.wh-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border, #2a2a4a);
    background: rgba(0,0,0,0.15);
    flex-shrink: 0;
    gap: 0.5rem;
    margin-top: auto;
}

.wh-action-bar-left {
    display: flex;
    gap: 0.5rem;
}

/* Field items */
.wh-field-item {
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.4rem;
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.2s;
}
.wh-field-item:hover {
    border-color: rgba(139,92,246,0.25);
}

.wh-field-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.wh-field-item-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wh-field-item-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.wh-inline-check {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    user-select: none;
}
.wh-inline-check input {
    accent-color: var(--primary, #9370DB);
}

/* Button rows */
.wh-btnrow-card {
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 10px;
    padding: 0.65rem;
    margin-bottom: 0.4rem;
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.2s;
}
.wh-btnrow-card:hover {
    border-color: rgba(139,92,246,0.25);
}

.wh-btnrow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.wh-btnrow-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wh-button-item {
    margin-bottom: 0.4rem;
}

.wh-button-item-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

/* ---- Preview Panel (Right) ---- */
.wh-preview-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #313338;
    overflow: hidden;
}

.wh-preview-header {
    padding: 0.65rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.wh-preview-discord {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #313338;
    display: flex;
    flex-direction: column;
}

.wh-preview-discord-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.wh-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex: 1;
    min-height: 200px;
    color: rgba(255,255,255,0.3);
    font-size: 0.88rem;
}

/* Discord message preview */
.wh-discord-message {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0 0.5rem 0;
    animation: fadeIn 0.15s ease;
}

.wh-discord-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #5865F2;
    flex-shrink: 0;
    overflow: hidden;
}
.wh-discord-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wh-discord-content {
    flex: 1;
    min-width: 0;
}

.wh-discord-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.wh-discord-username {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.wh-discord-time {
    font-size: 0.73rem;
    color: rgba(255,255,255,0.3);
}

.wh-discord-app-tag {
    font-size: 0.65rem;
    font-weight: 600;
    background: #5865F2;
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wh-discord-text {
    font-size: 0.93rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Discord embed preview */
.wh-discord-embed {
    display: flex;
    max-width: 520px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.35rem;
    background: #2b2d31;
}

.wh-discord-embed-sidebar {
    width: 4px;
    flex-shrink: 0;
    background: #5865F2;
}

.wh-discord-embed-body {
    flex: 1;
    padding: 0.75rem 1rem;
    min-width: 0;
}

.wh-discord-embed-author {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.wh-discord-embed-author-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.wh-discord-embed-author-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.wh-discord-embed-author-name a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}
.wh-discord-embed-author-name a:hover {
    text-decoration: underline;
}

.wh-discord-embed-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.3rem;
    line-height: 1.3;
}
.wh-discord-embed-title a {
    color: #00b0f4;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}
.wh-discord-embed-title a:hover {
    text-decoration: underline;
}

.wh-preview-discord a {
    pointer-events: auto;
    cursor: pointer;
}

.wh-discord-text a,
.wh-discord-embed-description a,
.wh-discord-embed-field-value a,
a.wh-md-link {
    color: #00b0f4;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}
.wh-discord-text a:hover,
.wh-discord-embed-description a:hover,
.wh-discord-embed-field-value a:hover,
a.wh-md-link:hover {
    text-decoration: underline;
}

.wh-discord-embed-description {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.75);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
    margin-bottom: 0.4rem;
}

/* Fields in grid */
.wh-discord-embed-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.wh-discord-embed-field {
    min-width: 0;
}
.wh-discord-embed-field.inline {
    flex: 1;
    min-width: 100px;
}

.wh-discord-embed-field-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 0.1rem;
}

.wh-discord-embed-field-value {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    white-space: pre-wrap;
    word-break: break-word;
}

.wh-discord-embed-image {
    display: block;
    max-width: 100%;
    border-radius: 4px;
    margin-top: 0.4rem;
}

.wh-discord-embed-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.wh-discord-embed-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.wh-discord-embed-footer-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.wh-discord-embed-footer-text {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
}

/* Discord button rows preview */
.wh-discord-btn-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.wh-discord-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.wh-discord-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 1rem;
    background: #4e5058;
    border-radius: 4px;
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.15s ease, filter 0.15s ease;
}

a.wh-discord-link-btn:hover {
    background: #5d6169;
    filter: brightness(1.1);
    text-decoration: none;
    color: rgba(255,255,255,0.95);
}

/* ---- Modals ---- */
.wh-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}

.wh-modal {
    background: var(--card-bg, #1e1e3a);
    border: 1px solid var(--border, #2a2a4a);
    border-radius: 12px;
    width: 440px;
    max-width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.wh-modal--wide {
    width: 560px;
}

.wh-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border, #2a2a4a);
}
.wh-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.wh-modal-body {
    padding: 1rem 1.25rem;
}

.wh-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border, #2a2a4a);
}

/* Backups list */
.wh-backups-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 280px;
    overflow-y: auto;
}

.wh-backup-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
}

.wh-backup-name {
    flex: 1;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wh-backup-date {
    font-size: 0.73rem;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}

.wh-empty-state {
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: 0.85rem;
    padding: 1rem;
}

/* Input with upload button */
.wh-input-with-upload {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.wh-input-with-upload .wh-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.wh-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
    background: rgba(147,112,219,0.1);
    border: 1px solid rgba(139,92,246,0.2);
    border-left: none;
    border-radius: 0 10px 10px 0;
    color: rgba(147,112,219,0.85);
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wh-upload-btn:hover {
    background: rgba(147,112,219,0.25);
    border-color: rgba(147,112,219,0.4);
    color: #b794f4;
    box-shadow: 0 0 8px rgba(147,112,219,0.2);
}

/* Textarea wrap with mentions button */
.wh-textarea-wrap {
    position: relative;
}
.wh-textarea-wrap .wh-textarea {
    padding-right: 2.5rem;
}
.wh-mentions-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(147,112,219,0.12);
    border: 1px solid rgba(147,112,219,0.25);
    border-radius: 8px;
    color: rgba(147,112,219,0.85);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.wh-mentions-btn:hover {
    background: rgba(147,112,219,0.25);
    border-color: rgba(147,112,219,0.5);
    color: #b794f4;
    box-shadow: 0 0 8px rgba(147,112,219,0.3);
}

/* Mentions popup */
.wh-mentions-popup {
    position: fixed;
    z-index: 9999;
    width: 280px;
    max-height: 320px;
    background: var(--card-bg, #1e1e3a);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wh-mentions-search {
    padding: 0.5rem;
    flex-shrink: 0;
}
.wh-mentions-search .wh-input {
    width: 100%;
    font-size: 0.82rem;
    padding: 0.4rem 0.6rem;
}
.wh-mentions-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.wh-mentions-category {
    padding: 0.35rem 0.75rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.35);
}
.wh-mentions-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
}
.wh-mentions-item:hover {
    background: rgba(147,112,219,0.12);
}
.wh-mentions-item-icon {
    font-size: 1rem;
    opacity: 0.6;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.wh-mentions-item-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- New Discohook-style Popup Layout ---- */
.wh-mentions-popup {
    flex-direction: row !important;
    width: 360px;
    max-height: 420px;
}

.wh-mp-sidebar {
    width: 44px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0;
    gap: 0.25rem;
    background: rgba(0,0,0,0.15);
    border-right: 1px solid rgba(255,255,255,0.06);
}

.wh-mp-sidebar-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}

.wh-mp-sidebar-btn:hover {
    background: rgba(147,112,219,0.15);
    color: rgba(255,255,255,0.75);
}

.wh-mp-sidebar-btn.active {
    background: rgba(147,112,219,0.22);
    color: var(--primary, #9370DB);
}

.wh-mp-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.wh-mp-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.wh-mp-panel.active {
    display: flex;
}

.wh-mp-panel-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.wh-mp-filter-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.wh-mp-filter-btn {
    flex: 1;
    padding: 0.3rem 0.4rem;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.wh-mp-filter-btn:hover {
    background: rgba(147,112,219,0.12);
    color: rgba(255,255,255,0.7);
}

.wh-mp-filter-btn.active {
    background: rgba(147,112,219,0.2);
    color: var(--primary, #9370DB);
}

.wh-mp-empty {
    padding: 1rem 0.75rem;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Time tab */
.wh-mp-time-panel {
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
    overflow-y: auto;
}

.wh-mp-time-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.wh-mp-time-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.4);
}

.wh-mp-style-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.1rem;
}

.wh-mp-style-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    border: 1px solid transparent;
}

.wh-mp-style-item:hover {
    background: rgba(147,112,219,0.1);
}

.wh-mp-style-item.selected {
    background: rgba(147,112,219,0.18);
    border-color: rgba(147,112,219,0.3);
}

.wh-mp-style-example {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
}

.wh-mp-style-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
}

.wh-mp-insert-btn {
    margin-top: 0.25rem;
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
}

/* Emoji grid */
.wh-mp-emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    padding: 0.35rem;
}

.wh-mp-emoji-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.35rem;
    padding: 0.2rem;
    border-radius: 5px;
    line-height: 1;
    transition: background 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wh-mp-emoji-btn:hover {
    background: rgba(147,112,219,0.15);
}

.wh-mp-emoji-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.wh-mp-emoji-cat-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.wh-mp-emoji-cats {
    display: flex;
    gap: 2px;
    padding: 0.3rem 0.35rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    overflow-x: auto;
}

.wh-mp-emoji-cat-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem 0.3rem;
    border-radius: 5px;
    transition: background 0.1s;
    flex-shrink: 0;
    opacity: 0.55;
}

.wh-mp-emoji-cat-btn:hover {
    background: rgba(147,112,219,0.15);
    opacity: 0.9;
}

.wh-mp-emoji-cat-btn.active {
    background: rgba(147,112,219,0.22);
    opacity: 1;
}

/* ---- Discord Markdown Preview Styles ---- */
.wh-discord-text strong,
.wh-discord-embed-description strong,
.wh-discord-embed-field-value strong {
    font-weight: 700;
    color: inherit;
}

.wh-discord-text em,
.wh-discord-embed-description em,
.wh-discord-embed-field-value em {
    font-style: italic;
}

.wh-discord-text u,
.wh-discord-embed-description u,
.wh-discord-embed-field-value u {
    text-decoration: underline;
}

.wh-discord-text del,
.wh-discord-embed-description del,
.wh-discord-embed-field-value del {
    text-decoration: line-through;
    opacity: 0.75;
}

.wh-md-inline-code {
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 0.1em 0.35em;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.875em;
    color: #e0d0ff;
}

.wh-md-codeblock {
    background: rgba(0,0,0,0.35);
    border-radius: 6px;
    padding: 0.6em 0.85em;
    margin: 0.3em 0;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.85em;
    color: #c9b0ff;
    white-space: pre-wrap;
    word-break: break-word;
}

.wh-md-blockquote {
    border-left: 4px solid rgba(255,255,255,0.25);
    padding-left: 0.65rem;
    margin: 0.25rem 0;
    color: rgba(255,255,255,0.75);
}

.wh-md-spoiler {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    padding: 0 0.2em;
    color: transparent;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    user-select: none;
}

.wh-md-spoiler:hover {
    color: inherit;
    background: rgba(255,255,255,0.06);
}

.wh-md-mention {
    display: inline-block;
    background: rgba(88,101,242,0.25);
    color: #8FA3FF;
    border-radius: 3px;
    padding: 0 0.3em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wh-md-mention:hover {
    background: rgba(88,101,242,0.6);
    color: #ffffff;
}

.wh-md-mention--channel { background: rgba(88,101,242,0.18); color: #8FA3FF; }
.wh-md-mention--channel:hover { background: rgba(88,101,242,0.55); color: #ffffff; }
.wh-md-mention--role { background: rgba(147,112,219,0.2); color: #c9b0ff; }
.wh-md-mention--role:hover { background: rgba(147,112,219,0.5); color: #ffffff; }
.wh-md-mention--user { background: rgba(88,101,242,0.22); color: #8FA3FF; }
.wh-md-mention--user:hover { background: rgba(88,101,242,0.55); color: #ffffff; }
.wh-md-mention--special { background: rgba(88,101,242,0.22); color: #8FA3FF; }
.wh-md-mention--special:hover { background: rgba(88,101,242,0.55); color: #ffffff; }

.wh-md-custom-emoji {
    width: 1.375em;
    height: 1.375em;
    vertical-align: -0.3em;
    object-fit: contain;
}

.wh-md-timestamp {
    background: rgba(88,101,242,0.18);
    color: #8FA3FF;
    border-radius: 3px;
    padding: 0 0.3em;
    font-size: 0.9em;
}

/* Responsive */
@media (max-width: 900px) {
    .wh-layout {
        flex-direction: column;
        overflow: visible;
    }

    #webhooksTab.active {
        height: auto;
        overflow: visible;
    }

    .wh-editor-panel {
        width: 100%;
        overflow: visible;
    }

    .wh-preview-panel {
        min-height: 350px;
    }

    body.webhooks-tab-active #configView {
        flex: none;
        overflow: visible;
        min-height: 0;
    }

    body.webhooks-tab-active .config-content {
        overflow: visible;
        min-height: 0;
    }
}

@media (max-width: 600px) {
    .wh-row-2 {
        grid-template-columns: 1fr;
    }

    .wh-button-item-row {
        flex-wrap: wrap;
    }
}

.inv-analytics-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.75rem;
    padding: 1.75rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.18), rgba(15, 23, 42, 0.92));
    border: 1px solid rgba(147, 112, 219, 0.25);
    box-shadow: 0 14px 32px rgba(10, 12, 20, 0.4);
    margin-bottom: 1.25rem;
}

.inv-analytics-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.68rem;
    color: rgba(196, 167, 255, 0.8);
    margin-bottom: 0.5rem;
}

.inv-analytics-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    margin: 0 0 0.4rem 0;
}

.inv-analytics-subtitle {
    color: var(--text-dim, #94a3b8);
    margin: 0;
    font-size: 0.85rem;
    max-width: 30rem;
}

.inv-analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    align-content: center;
}

.inv-analytics-kpi {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 14px;
    border: 1px solid rgba(147, 112, 219, 0.18);
    padding: 0.9rem 1rem;
}

.inv-analytics-kpi--accent {
    border-color: rgba(147, 112, 219, 0.4);
    background: rgba(147, 112, 219, 0.1);
}

.inv-analytics-kpi-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim, #94a3b8);
    margin-bottom: 0.3rem;
}

.inv-analytics-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text, #e2e8f0);
}

.inv-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.25rem;
}

.inv-analytics-panel {
    background: rgba(18, 20, 32, 0.75);
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    padding: 1.25rem;
    box-shadow: 0 8px 20px rgba(8, 10, 16, 0.3);
}

.inv-analytics-panel--wide {
    grid-column: span 1;
}

.inv-analytics-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    margin: 0 0 0.25rem 0;
}

.inv-analytics-panel-desc {
    font-size: 0.78rem;
    color: var(--text-dim, #94a3b8);
    margin: 0 0 1rem 0;
}

.inv-analytics-bar-group {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.inv-analytics-bar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.inv-analytics-bar-label {
    width: 55px;
    font-size: 0.78rem;
    color: var(--text-dim, #94a3b8);
    flex-shrink: 0;
}

.inv-analytics-bar-track {
    flex: 1;
    height: 10px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 999px;
    overflow: hidden;
}

.inv-analytics-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
    min-width: 0;
}

.inv-analytics-bar-fill--success {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.9), rgba(56, 189, 248, 0.95));
}

.inv-analytics-bar-fill--warning {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.85), rgba(245, 158, 11, 0.95));
}

.inv-analytics-bar-fill--danger {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.85), rgba(220, 38, 127, 0.9));
}

.inv-analytics-bar-value {
    width: 35px;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text, #e2e8f0);
    flex-shrink: 0;
}

.inv-analytics-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
}

.inv-analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.inv-analytics-table th {
    text-align: left;
    padding: 0.65rem 0.85rem;
    color: var(--text-dim, #94a3b8);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.inv-analytics-table td {
    padding: 0.65rem 0.85rem;
    color: var(--text, #e2e8f0);
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.inv-analytics-table tbody tr {
    transition: background 0.15s;
}

.inv-analytics-table tbody tr:hover {
    background: rgba(147, 112, 219, 0.08);
}

.inv-analytics-table tbody tr:first-child td {
    color: #ffd700;
    font-weight: 600;
}

.inv-analytics-table tbody tr:nth-child(2) td {
    color: #c0c0c0;
    font-weight: 600;
}

.inv-analytics-table tbody tr:nth-child(3) td {
    color: #cd7f32;
    font-weight: 600;
}

.inv-analytics-empty {
    text-align: center;
    color: var(--text-dim, #94a3b8);
    padding: 2rem 1rem;
}

.inv-analytics-rank {
    font-weight: 700;
    font-size: 0.9rem;
}

.inv-analytics-member {
    display: flex;
    flex-direction: column;
}

.inv-analytics-member-name {
    font-weight: 600;
    color: var(--text, #e2e8f0);
}

.inv-analytics-member-id {
    font-size: 0.72rem;
    color: var(--text-dim, #94a3b8);
}

.inv-analytics-net {
    font-weight: 700;
    color: rgba(147, 112, 219, 0.95);
}

.inv-duration-picker {
    display: flex;
    gap: 8px;
    align-items: center;
}

.inv-duration-picker .inv-duration-value {
    width: 90px;
    flex-shrink: 0;
}

.inv-duration-picker .inv-duration-unit {
    flex: 1;
    min-width: 100px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(147, 112, 219, 0.2);
    border-radius: 6px;
    color: var(--text-primary, #e0d0ff);
    padding: 8px 10px;
    font-size: 0.875rem;
    cursor: pointer;
    appearance: auto;
}

.invite-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.invite-placeholder-item {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(147, 112, 219, 0.12);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invite-placeholder-item code {
    color: var(--text-primary, #c9b0ff);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Fira Code', 'Consolas', monospace;
    background: rgba(147, 112, 219, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    width: fit-content;
}

.invite-placeholder-item span {
    color: var(--text-dim, #9a8bba);
    font-size: 0.75rem;
}

.invite-welcome-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(88, 101, 242, 0.06);
    border: 1px solid rgba(88, 101, 242, 0.15);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary, #b0a0d0);
    line-height: 1.5;
}

.invite-welcome-tip svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(88, 101, 242, 0.7);
}

.invite-link-to-general {
    color: rgba(88, 101, 242, 0.9);
    text-decoration: underline;
    font-weight: 500;
}

.invite-link-to-general:hover {
    color: rgba(88, 101, 242, 1);
}

.invite-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    margin-bottom: 12px;
}

.invite-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invite-toggle-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #e0d0ff);
}

.invite-toggle-desc {
    font-size: 0.78rem;
    color: var(--text-dim, #9a8bba);
}

.invite-reward-role-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(147, 112, 219, 0.1);
    border-radius: 8px;
    transition: border-color 0.15s;
}

.invite-reward-role-row:hover {
    border-color: rgba(147, 112, 219, 0.25);
}

.invite-reward-role-row .invite-rr-label {
    font-size: 0.75rem;
    color: var(--text-dim, #9a8bba);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    margin-bottom: 4px;
}

.invite-reward-role-row input[type="number"] {
    width: 90px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(147, 112, 219, 0.2);
    border-radius: 6px;
    color: var(--text-primary, #e0d0ff);
    padding: 8px 10px;
    font-size: 0.875rem;
    transition: border-color 0.15s;
}

.invite-reward-role-row input[type="number"]:focus {
    border-color: rgba(147, 112, 219, 0.5);
    outline: none;
}

.invite-reward-role-row select {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(147, 112, 219, 0.2);
    border-radius: 6px;
    color: var(--text-primary, #e0d0ff);
    padding: 8px 10px;
    font-size: 0.875rem;
    transition: border-color 0.15s;
}

.invite-reward-role-row select:focus {
    border-color: rgba(147, 112, 219, 0.5);
    outline: none;
}

.invite-reward-role-row .invite-remove-role-btn {
    background: transparent;
    border: 1px solid rgba(231, 76, 60, 0.25);
    color: rgba(231, 76, 60, 0.7);
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.invite-reward-role-row .invite-remove-role-btn:hover {
    background: rgba(231, 76, 60, 0.12);
    border-color: rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.invite-add-rule-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    background: transparent;
    border: 1px dashed rgba(147, 112, 219, 0.3);
    border-radius: 8px;
    color: var(--text-secondary, #b0a0d0);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.invite-add-rule-btn:hover {
    background: rgba(147, 112, 219, 0.06);
    border-color: rgba(147, 112, 219, 0.5);
    color: var(--text-primary, #e0d0ff);
}

.invite-giveaway-section {
    background: rgba(88, 101, 242, 0.05);
    border: 1px solid rgba(88, 101, 242, 0.15);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.invite-giveaway-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.invite-giveaway-header span {
    font-size: 1.25rem;
}

.invite-giveaway-header label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.invite-giveaway-header small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-secondary);
}

#inviteLeaderboardSection .rr-section-body,
#inviteRewardRolesSection .rr-section-body {
    overflow: visible;
}

#inviteLbChannelPicker {
    position: relative;
}

#inviteLbChannelPickerMenu {
    z-index: 100;
}

.invite-reward-role-row {
    position: relative;
}

@media (max-width: 768px) {
    .inv-analytics-hero {
        grid-template-columns: 1fr;
    }

    .inv-analytics-grid {
        grid-template-columns: 1fr;
    }

    .invite-placeholder-grid {
        grid-template-columns: 1fr;
    }

    .invite-reward-role-row {
        flex-wrap: wrap;
    }

    .inv-duration-picker {
        flex-wrap: wrap;
    }
}

@media (max-width: 500px) {
    .inv-analytics-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ar-multi-select removed — replaced by uniRS */

/* ============================================================
   Settings Tab — Blocked Channels & Bot Masters
   ============================================================ */

.settings-tag-picker {
    background: rgba(20, 16, 40, 0.7);
    border: 1.5px solid rgba(147, 112, 219, 0.3);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.18s;
}

.settings-tag-picker:focus-within {
    border-color: rgba(147, 112, 219, 0.65);
    box-shadow: 0 0 0 3px rgba(147, 112, 219, 0.12);
}

.settings-tag-picker-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 24px;
    align-items: center;
}

.settings-tag-picker-empty {
    color: var(--text-dim, rgba(255,255,255,0.35));
    font-size: 0.88rem;
    font-style: italic;
}

.settings-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(147, 112, 219, 0.18);
    border: 1px solid rgba(147, 112, 219, 0.4);
    border-radius: 6px;
    padding: 0.22rem 0.55rem;
    font-size: 0.85rem;
    color: rgba(220, 200, 255, 0.95);
    font-weight: 500;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-tag-chip.channel-chip {
    background: rgba(0, 206, 209, 0.12);
    border-color: rgba(0, 206, 209, 0.35);
    color: rgba(180, 240, 240, 0.95);
}

.settings-tag-chip.role-chip {
    background: rgba(147, 112, 219, 0.18);
    border-color: rgba(147, 112, 219, 0.4);
    color: rgba(220, 200, 255, 0.95);
}

.settings-tag-chip .tag-remove-btn {
    cursor: pointer;
    opacity: 0.55;
    font-size: 1rem;
    line-height: 1;
    transition: opacity 0.15s;
    flex-shrink: 0;
    padding: 0 2px;
    border: none;
    background: none;
    color: inherit;
}

.settings-tag-chip .tag-remove-btn:hover {
    opacity: 1;
}

.settings-tag-picker-select {
    background: transparent;
    border: none;
    color: rgba(147, 112, 219, 0.85);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0;
    outline: none;
    align-self: flex-start;
    max-width: 100%;
}

.settings-tag-picker-select option {
    background: #1a1530;
    color: #d4c8f0;
}

.settings-tag-readonly {
    background: rgba(20, 16, 40, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.settings-tag-readonly .settings-tag-chip {
    opacity: 0.75;
    cursor: default;
}

#blockedChannelsSection,
#blockedChannelsSection .rr-section-body,
#botMastersSection,
#botMastersSection .rr-section-body {
    overflow: visible;
}

.bot-masters-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.5rem;
}

.bot-masters-info-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.bot-masters-info-text {
    font-size: 0.9rem;
    color: rgba(255, 220, 120, 0.9);
    line-height: 1.6;
}

.bot-masters-info-text strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #eab308;
    font-weight: 700;
}

/* ============================================================
   Channel Rules V3 — modal overlay + role picker + count badges
   ============================================================ */

.cr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
    padding: 1rem;
}

.cr-modal {
    background: var(--card-bg, #1e1e3a);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 14px;
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.65);
    padding: 1.5rem 1.75rem 1.75rem;
    animation: crSlideIn 0.2s ease;
}

@keyframes crSlideIn {
    from { opacity: 0; transform: scale(0.97) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.cr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.cr-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-modal-close {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 0.25rem 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cr-modal-close:hover {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
}

/* Count badge next to section title */
.cr-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(139, 92, 246, 0.25);
    border: 1px solid rgba(139, 92, 246, 0.5);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #c4b5fd;
    line-height: 1;
    vertical-align: middle;
    margin-left: 0.35rem;
}

/* Rule mini-cards */
.cr-rule-card {
    cursor: pointer;
}

.cr-rule-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.cr-rule-card-channel {
    font-weight: 700;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
}

.cr-rule-card-summary {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
}

.cr-rule-card-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.cr-rule-card-edit,
.cr-rule-card-delete {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.cr-rule-card-edit:hover {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.4);
}

.cr-rule-card-delete:hover {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.4);
}

.cr-cards-list {
    margin-bottom: 0.75rem;
}

.cr-create-btn {
    margin-top: 0.25rem;
}

/* cr-role-picker removed — replaced by uniRS */

/* ============================================================
   Channel Rules V2 — shared design system styles
   ============================================================ */

.cr-plan-strip {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    padding: 0.6rem 1rem;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.cr-plan-strip a {
    color: var(--primary, #9370DB);
    text-decoration: none;
    font-weight: 600;
}

.cr-plan-strip a:hover { text-decoration: underline; }

/* Channel tags inside rr-section-body */
.cr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 26px;
}

.cr-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c4b5fd;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-tag:hover {
    background: rgba(139, 92, 246, 0.3);
}

.cr-tag-close {
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.cr-tag-close:hover {
    opacity: 1;
    color: #f87171;
}

.cr-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.7rem;
    border: 1px dashed rgba(139, 92, 246, 0.45);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(139, 92, 246, 0.85);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    margin-top: 0.5rem;
}

.cr-new-btn:hover {
    border-color: rgba(139, 92, 246, 0.8);
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.08);
}

/* Inline config panel */
.cr-inline-panel {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 1.25rem 1.5rem 1.5rem;
    margin: 1rem 0 0.5rem;
    animation: crSlideDown 0.2s ease;
    overflow: visible;
}

@keyframes crSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cr-inline-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.cr-inline-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}

.cr-panel-close {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem 0.55rem;
    transition: background 0.15s;
    flex-shrink: 0;
}

.cr-panel-close:hover {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
}

.cr-section-label {
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(139, 92, 246, 0.9);
    margin: 1.1rem 0 0.65rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.18);
}

.cr-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    margin-bottom: 0.5rem;
}

.cr-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
    color: rgba(255,255,255,0.85);
}

.cr-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}

.cr-check input[type="checkbox"]:checked {
    background: #3B82F6;
    border-color: #3B82F6;
}

.cr-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.cr-check input[type="checkbox"]:hover:not(:checked) {
    border-color: rgba(59,130,246,0.6);
    background: rgba(59,130,246,0.1);
}

/* Emoji tags inside panel */
.cr-emoji-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 28px;
}

.cr-emoji-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    background: rgba(0, 206, 209, 0.12);
    border: 1px solid rgba(0, 206, 209, 0.35);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #a5f3fc;
}

.cr-emoji-tag-remove {
    cursor: pointer;
    opacity: 0.65;
    font-size: 0.85rem;
    transition: opacity 0.15s;
}

.cr-emoji-tag-remove:hover {
    opacity: 1;
    color: #f87171;
}

.cr-add-emoji-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.08);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cr-add-emoji-btn:hover {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.7);
}

/* Suggestion reactions row */
.cr-suggestion-reactions {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cr-suggestion-reaction-field {
    min-width: 140px;
}

.cr-emoji-input-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.cr-emoji-preview {
    font-size: 1.6rem;
    line-height: 1;
}

[id^="crSection_"] .rr-section-body {
    overflow: visible;
}

/* ============================================================
   STP — Settings Tag Picker custom dropdown
   ============================================================ */

.stp-dropdown {
    position: relative;
}

.stp-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(147, 112, 219, 0.35);
    border-radius: 7px;
    color: rgba(147, 112, 219, 0.9);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.22rem 0.6rem 0.22rem 0.5rem;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}

.stp-trigger:hover {
    background: rgba(147, 112, 219, 0.1);
    border-color: rgba(147, 112, 219, 0.55);
}

.stp-open .stp-trigger {
    background: rgba(147, 112, 219, 0.12);
    border-color: rgba(147, 112, 219, 0.65);
}

.stp-trigger-hash {
    font-size: 0.9rem;
    opacity: 0.85;
}

.stp-trigger-label {
    flex: 1;
}

.stp-trigger-chevron {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%239370db' d='M7 9L3 5h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.stp-open .stp-trigger-chevron {
    transform: rotate(180deg);
}

.stp-menu {
    position: absolute;
    z-index: 120;
    left: 0;
    top: calc(100% + 4px);
    min-width: 220px;
    max-width: 320px;
    background: #10141f;
    border: 1px solid rgba(72, 86, 119, 0.44);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.5);
    overflow: hidden;
}

.stp-search-wrap {
    padding: 8px 8px 4px;
}

.stp-search {
    width: 100%;
    box-sizing: border-box;
    background: rgba(30, 36, 60, 0.8);
    border: 1px solid rgba(100, 116, 160, 0.3);
    border-radius: 6px;
    color: #dbe5f6;
    font-size: 0.88rem;
    padding: 0.35rem 0.6rem;
    outline: none;
    transition: border-color 0.15s;
}

.stp-search:focus {
    border-color: rgba(147, 112, 219, 0.55);
}

.stp-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0 6px 6px;
}

.stp-item {
    width: 100%;
    border: none;
    background: transparent;
    color: #d7dfef;
    border-radius: 6px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    text-align: left;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 400;
    transition: background 0.14s ease, color 0.14s ease;
}

.stp-item:hover {
    background: rgba(55, 65, 92, 0.45);
    color: #f8fafc;
}

.stp-item-selected {
    background: rgba(55, 65, 92, 0.58);
    color: #f8fafc;
}

.stp-item-prefix {
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.stp-item-selected .stp-item-prefix {
    color: #a78bfa;
}

.stp-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stp-item-check {
    color: #a78bfa;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}

.stp-empty {
    padding: 10px 8px;
    color: #94a3b8;
    font-size: 0.84rem;
}

/* General tab channel pickers — full width to match old general-select */
.general-channel-picker {
    width: 100%;
}

.general-channel-picker .rr-channel-picker-trigger {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(148, 163, 184, 0.2);
}

.general-channel-picker:hover .rr-channel-picker-trigger {
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.85);
}

.general-channel-picker.is-open .rr-channel-picker-trigger,
.general-channel-picker .rr-channel-picker-trigger:focus-visible {
    border-color: rgba(147, 112, 219, 0.6);
    box-shadow: 0 0 0 2px rgba(147, 112, 219, 0.2);
}

/* ============================================================
   AutoMod Dashboard Styles
   ============================================================ */

/* Sub-tabs */
.automod-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1.5rem;
}

.automod-subtab {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    position: relative;
    top: 1px;
}

.automod-subtab:hover {
    color: var(--text-primary);
}

.automod-subtab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-blue, #4F8EF7);
}

.automod-subtab-content {
    display: none;
}

.automod-subtab-content.active {
    display: block;
}

/* Rule cards grid */
.automod-rules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
}

@media (max-width: 900px) {
    .automod-rules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .automod-rules-grid {
        grid-template-columns: 1fr;
    }
}

.automod-rule-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.automod-rule-card:hover {
    border-color: rgba(79, 142, 247, 0.4);
    background: rgba(255,255,255,0.05);
}

.automod-rule-card.rule-enabled {
    border-color: rgba(79, 142, 247, 0.5);
    background: rgba(79, 142, 247, 0.05);
}

.automod-rule-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.automod-rule-card-icon {
    color: var(--text-dim);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.automod-rule-card-name {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    flex: 1;
    line-height: 1.2;
}

/* Rule card toggle */
.automod-rule-toggle {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.automod-rule-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.automod-rule-track {
    display: flex;
    align-items: center;
    width: 36px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.automod-rule-toggle input:checked + .automod-rule-track {
    background: var(--accent-blue, #4F8EF7);
}

.automod-rule-thumb {
    position: absolute;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.2s;
}

.automod-rule-toggle input:checked ~ .automod-rule-track .automod-rule-thumb {
    left: 19px;
}

/* Status button on rule card */
.automod-rule-status-btn {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: center;
}

.automod-rule-status-btn:hover {
    background: rgba(255,255,255,0.1);
}

.automod-rule-status-btn.configured {
    background: rgba(79, 142, 247, 0.15);
    color: #4F8EF7;
}

/* Automated actions */
.automod-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.automod-actions-empty {
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.875rem;
}

.automod-action-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    flex-wrap: wrap;
}

.automod-action-row .automod-inline-select {
    background: rgba(79, 142, 247, 0.12);
    border: 1px solid rgba(79, 142, 247, 0.3);
    border-radius: 6px;
    color: #4F8EF7;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    outline: none;
    transition: background 0.15s;
}

.automod-action-row .automod-inline-select:hover {
    background: rgba(79, 142, 247, 0.2);
}

.automod-action-row .automod-inline-select option {
    background: var(--bg-secondary, #1e1e2e);
    color: var(--text-primary);
}

.automod-action-text {
    color: var(--text-dim);
    font-size: 0.875rem;
}

.automod-action-move-btns {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.automod-action-move-btn {
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.7rem;
    line-height: 1;
}

.automod-action-move-btn:hover {
    background: rgba(255,255,255,0.12);
}

.automod-action-delete-btn {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    color: #ef4444;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1;
    transition: background 0.15s;
}

.automod-action-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Add button */
.automod-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 0.4rem 0.875rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.automod-add-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

/* Restricted channels */
.automod-restricted-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.automod-restricted-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    flex-wrap: wrap;
}

.automod-restricted-row select {
    flex: 1;
    min-width: 140px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    outline: none;
}

.automod-restricted-toggles {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.automod-restricted-toggle-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-dim);
    font-size: 0.875rem;
}

.automod-restricted-toggle-item input[type="checkbox"] {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.automod-restricted-toggle-item input[type="checkbox"]:checked {
    background: var(--accent-blue, #4F8EF7);
    border-color: var(--accent-blue, #4F8EF7);
}

/* Multi-select pickers */
.automod-multiselect {
    position: relative;
}

.automod-multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s;
}

.automod-multiselect-trigger:hover {
    border-color: rgba(255,255,255,0.2);
}

.automod-multiselect-placeholder {
    color: var(--text-dim);
    font-size: 0.875rem;
}

.automod-multiselect-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
    max-height: 200px;
    overflow: hidden;
    flex-direction: column;
}

.automod-multiselect.open .automod-multiselect-dropdown {
    display: flex;
}

.automod-multiselect-search {
    background: rgba(255,255,255,0.05);
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    padding: 0.5rem 0.75rem;
}

.automod-multiselect-list {
    overflow-y: auto;
    max-height: 150px;
    padding: 0.25rem;
}

.automod-multiselect-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: background 0.1s;
}

.automod-multiselect-item:hover {
    background: rgba(255,255,255,0.06);
}

.automod-multiselect-item.selected {
    color: #4F8EF7;
}

.automod-multiselect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.automod-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(79, 142, 247, 0.15);
    border: 1px solid rgba(79, 142, 247, 0.3);
    border-radius: 100px;
    color: #4F8EF7;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
}

.automod-chip-remove {
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.9rem;
    line-height: 1;
}

.automod-chip-remove:hover {
    opacity: 1;
}

/* Rule detail slide-in panel */
.automod-rule-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(540px, 100%);
    height: 100%;
    background: var(--bg-primary, #12121f);
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: -8px 0 32px rgba(0,0,0,0.5);
    z-index: 1000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.automod-rule-panel.open {
    right: 0;
}

.automod-rule-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: var(--bg-secondary, #1a1a2e);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.automod-rule-panel-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.automod-rule-panel-body {
    flex: 1;
    padding: 0;
}

/* Response type selector (like ProBot) */
.automod-response-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-bottom: 0.625rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: rgba(255,255,255,0.02);
}

.automod-response-option:hover {
    border-color: rgba(255,255,255,0.2);
}

.automod-response-option.selected {
    border-color: rgba(79, 142, 247, 0.6);
    background: rgba(79, 142, 247, 0.06);
}

.automod-response-option input[type="checkbox"] {
    display: none;
}

.automod-response-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 2px;
}

.automod-response-option.selected .automod-response-check {
    background: #4F8EF7;
    border-color: #4F8EF7;
}

.automod-response-option.selected .automod-response-check::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.automod-response-icon {
    color: var(--text-dim);
    font-size: 1.1rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.automod-response-text h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.2rem;
}

.automod-response-text p {
    font-size: 0.8125rem;
    color: var(--text-dim);
    margin: 0;
}

/* Tag input for word lists */
.automod-tag-input-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    min-height: 42px;
    align-items: flex-start;
    cursor: text;
}

.automod-tag-input-wrap:focus-within {
    border-color: rgba(79, 142, 247, 0.5);
    box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.1);
}

.automod-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(79, 142, 247, 0.15);
    border: 1px solid rgba(79, 142, 247, 0.3);
    border-radius: 100px;
    color: #4F8EF7;
    font-size: 0.8rem;
    padding: 0.15rem 0.45rem;
}

.automod-tag-remove {
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.85rem;
}

.automod-tag-remove:hover {
    opacity: 1;
}

.automod-tag-input-field {
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    min-width: 80px;
    flex: 1;
    padding: 0.1rem 0;
}

/* Commands grid */
.automod-commands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.automod-cmd-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.875rem 1rem;
}

.automod-cmd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.automod-cmd-name {
    font-family: monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: #4F8EF7;
}

.automod-cmd-desc {
    color: var(--text-dim);
    font-size: 0.8125rem;
    margin: 0;
}

/* Backdrop for rule panel on mobile */
.automod-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.automod-panel-backdrop.open {
    display: block;
}

/* Redesigned rule panel sections */
.rp-section {
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rp-section:last-child {
    border-bottom: none;
}

.rp-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-dim, #94a3b8);
    text-transform: uppercase;
    margin-bottom: 0.875rem;
}

.rp-desc {
    color: var(--text-dim, #94a3b8);
    font-size: 0.8125rem;
    margin: 0 0 0.875rem 0;
}

/* Response options in redesigned panel */
.rp-section .automod-response-option {
    margin-bottom: 0.5rem;
}

/* Permission radio toggle pattern */
.rp-perm-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.rp-radio-opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-dim, #94a3b8);
    background: rgba(255,255,255,0.02);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
}

.rp-radio-opt input[type="radio"] {
    display: none;
}

.rp-radio-opt.active,
.rp-radio-opt:has(input:checked) {
    border-color: rgba(79, 142, 247, 0.55);
    background: rgba(79, 142, 247, 0.08);
    color: #4F8EF7;
}

.rp-radio-opt:hover:not(.active) {
    border-color: rgba(255,255,255,0.2);
    color: var(--text-primary, #e2e8f0);
}

.rp-picker-wrap {
    margin-bottom: 0.5rem;
}

.rp-note {
    display: block;
    color: var(--text-dim, #94a3b8);
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

/* Slider inputs for threshold settings */
.rp-slider-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rp-slider-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rp-slider-label {
    font-size: 0.875rem;
    color: var(--text-primary, #e2e8f0);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rp-slider-val {
    color: #4F8EF7;
    font-weight: 700;
    min-width: 2ch;
    display: inline-block;
}

.rp-slider-range-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.rp-range-min,
.rp-range-max {
    font-size: 0.75rem;
    color: var(--text-dim, #94a3b8);
    flex-shrink: 0;
    min-width: 2ch;
}

.rp-range-max {
    text-align: right;
}

.rp-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
    outline: none;
    cursor: pointer;
    accent-color: #4F8EF7;
}

.rp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4F8EF7;
    cursor: pointer;
    border: 2px solid var(--bg-primary, #12121f);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    transition: transform 0.1s;
}

.rp-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.rp-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4F8EF7;
    cursor: pointer;
    border: 2px solid var(--bg-primary, #12121f);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Multiselect dropdown: position fixed so it escapes overflow containers */
.automod-multiselect-dropdown {
    position: fixed !important;
    width: auto !important;
    min-width: 200px;
    max-width: 460px;
    z-index: 1100 !important;
}

.automod-multiselect.open .automod-multiselect-dropdown {
    display: flex;
}

/* Response check checked style fix */
.automod-response-check.checked {
    background: #4F8EF7;
    border-color: #4F8EF7;
}

.automod-response-check.checked::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    display: block;
}