:root {
    --bg: #f5f1e8;
    --bg-strong: #e8dcc7;
    --panel: rgba(255, 252, 245, 0.88);
    --panel-strong: #fffaf1;
    --border: rgba(90, 66, 39, 0.12);
    --text: #2b241c;
    --muted: #6d6254;
    --accent: #d0632c;
    --accent-strong: #8f3b16;
    --accent-soft: #f4bc7d;
    --mention-channel-bg: rgba(208, 99, 44, 0.12);
    --mention-channel-text: #8f3b16;
    --mention-role-bg: rgba(72, 110, 212, 0.14);
    --mention-role-text: #2f4ea8;
    --mention-user-bg: rgba(50, 150, 122, 0.16);
    --mention-user-text: #1d6f5b;
    --surface-soft: rgba(255, 250, 241, 0.78);
    --surface-soft-strong: rgba(255, 250, 241, 0.86);
    --button-ghost-bg: rgba(255, 250, 241, 0.9);
    --button-ghost-text: var(--text);
    --button-ghost-border: var(--border);
    --shadow: 0 20px 60px rgba(74, 49, 26, 0.14);
    --radius: 24px;
    --overlay-bg: var(--panel-strong);
    --overlay-border: var(--border);
    --input-bg: var(--surface-soft);
    --input-bg-strong: var(--surface-soft-strong);
    --hover-soft: color-mix(in srgb, var(--accent-strong) 18%, transparent);
}

body[data-theme="light-fall"] {
    --bg: #f5f1e8;
    --bg-strong: #e8dcc7;
    --panel: rgba(255, 252, 245, 0.88);
    --panel-strong: #fffaf1;
    --border: rgba(90, 66, 39, 0.12);
    --text: #2b241c;
    --muted: #6d6254;
    --accent: #d0632c;
    --accent-strong: #8f3b16;
    --accent-soft: #f4bc7d;
    --mention-channel-bg: rgba(208, 99, 44, 0.12);
    --mention-channel-text: #8f3b16;
    --mention-role-bg: rgba(72, 110, 212, 0.14);
    --mention-role-text: #2f4ea8;
    --mention-user-bg: rgba(50, 150, 122, 0.16);
    --mention-user-text: #1d6f5b;
    --surface-soft: rgba(255, 250, 241, 0.78);
    --surface-soft-strong: rgba(255, 250, 241, 0.86);
    --button-ghost-bg: rgba(255, 250, 241, 0.9);
    --button-ghost-text: #2b241c;
    --button-ghost-border: rgba(90, 66, 39, 0.18);
    --shadow: 0 20px 60px rgba(74, 49, 26, 0.14);
    --overlay-bg: var(--panel-strong);
    --input-bg: var(--surface-soft);
    --input-bg-strong: var(--surface-soft-strong);
}

html[data-theme="light-fall"] {
    background-color: #f5f1e8;
}

body[data-theme="charcoal"] {
    --bg: #080a0d;
    --bg-strong: #050608;
    --panel: rgba(17, 21, 27, 0.9);
    --panel-strong: #151a22;
    --border: rgba(132, 162, 194, 0.26);
    --text: #f2f6fd;
    --muted: #b9c8dd;
    --accent: #57b6ff;
    --accent-strong: #2f77bc;
    --accent-soft: #89ccff;
    --mention-channel-bg: rgba(87, 182, 255, 0.24);
    --mention-channel-text: #c8e8ff;
    --mention-role-bg: rgba(190, 120, 255, 0.24);
    --mention-role-text: #e2c8ff;
    --mention-user-bg: rgba(74, 212, 190, 0.24);
    --mention-user-text: #b8fff0;
    --surface-soft: rgba(28, 36, 48, 0.9);
    --surface-soft-strong: rgba(33, 42, 56, 0.94);
    --button-ghost-bg: linear-gradient(145deg, #1f2b3a, #253246);
    --button-ghost-text: #eaf3ff;
    --button-ghost-border: rgba(120, 168, 214, 0.38);
    --shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    --overlay-bg: var(--panel-strong);
    --input-bg: var(--surface-soft);
    --input-bg-strong: var(--surface-soft-strong);
}

html[data-theme="charcoal"] {
    background-color: #080a0d;
}

body[data-theme="sea-glass"] {
    --bg: #eef8f5;
    --bg-strong: #d6eee8;
    --panel: rgba(248, 255, 253, 0.9);
    --panel-strong: #f6fffd;
    --border: rgba(41, 96, 90, 0.16);
    --text: #1f3f3b;
    --muted: #4f7a74;
    --accent: #158f7b;
    --accent-strong: #0f6356;
    --accent-soft: #62c9b7;
    --mention-channel-bg: rgba(21, 143, 123, 0.14);
    --mention-channel-text: #0f6356;
    --mention-role-bg: rgba(40, 117, 180, 0.16);
    --mention-role-text: #1f628f;
    --mention-user-bg: rgba(164, 95, 205, 0.16);
    --mention-user-text: #7743a3;
    --surface-soft: rgba(241, 255, 251, 0.8);
    --surface-soft-strong: rgba(245, 255, 252, 0.9);
    --button-ghost-bg: rgba(230, 252, 246, 0.95);
    --button-ghost-text: #18453f;
    --button-ghost-border: rgba(21, 143, 123, 0.24);
    --shadow: 0 18px 50px rgba(20, 77, 68, 0.2);
    --overlay-bg: var(--panel-strong);
    --input-bg: var(--surface-soft);
    --input-bg-strong: var(--surface-soft-strong);
}

html[data-theme="sea-glass"] {
    background-color: #eef8f5;
}

body[data-theme="rose-night"] {
    --bg: #1c1422;
    --bg-strong: #140f1a;
    --panel: rgba(40, 28, 47, 0.87);
    --panel-strong: #4b3458;
    --border: rgba(225, 183, 230, 0.22);
    --text: #f7ecff;
    --muted: #c4a5d8;
    --accent: #e8729c;
    --accent-strong: #b14b77;
    --accent-soft: #f0a8c3;
    --mention-channel-bg: rgba(232, 114, 156, 0.24);
    --mention-channel-text: #ffc9dc;
    --mention-role-bg: rgba(99, 184, 255, 0.24);
    --mention-role-text: #bfe4ff;
    --mention-user-bg: rgba(161, 223, 124, 0.22);
    --mention-user-text: #d6f4bd;
    --surface-soft: rgba(67, 48, 82, 0.86);
    --surface-soft-strong: rgba(76, 55, 94, 0.92);
    --button-ghost-bg: rgba(87, 62, 110, 0.92);
    --button-ghost-text: #f8ebff;
    --button-ghost-border: rgba(240, 168, 195, 0.34);
    --shadow: 0 22px 58px rgba(6, 2, 12, 0.5);
    --overlay-bg: var(--panel-strong);
    --input-bg: var(--surface-soft);
    --input-bg-strong: var(--surface-soft-strong);
}

html[data-theme="rose-night"] {
    background-color: #1c1422;
}

body[data-theme="emerald"],
body[data-theme="charcoal"],
body[data-theme="rose-night"] {
    color-scheme: dark;
}

body[data-theme="light-fall"],
body[data-theme="sea-glass"],
body[data-theme="pinkwhiskey"] {
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body, "Inter", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(240, 172, 92, 0.42), transparent 26%),
        radial-gradient(circle at bottom right, rgba(208, 99, 44, 0.18), transparent 24%),
        linear-gradient(180deg, #fbf7ef 0%, var(--bg) 100%);
}
h1, h2, h3, h4, .brand strong, .save-banner {
    font-family: var(--font-display, "Sora", "Space Grotesk", "Inter", system-ui, sans-serif);
    letter-spacing: -0.01em;
}
code, pre, .dm-pre, .dm-code, .channel-pick-icon {
    font-family: var(--font-mono, "JetBrains Mono", "Fira Code", Consolas, monospace);
}

body[data-theme="charcoal"] {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 28%),
        radial-gradient(circle at bottom right, rgba(45, 119, 188, 0.14), transparent 26%),
        linear-gradient(180deg, #07090c 0%, var(--bg) 100%);
}

body[data-theme="rose-night"] {
    background:
        radial-gradient(circle at top left, rgba(232, 114, 156, 0.2), transparent 28%),
        radial-gradient(circle at bottom right, rgba(177, 75, 119, 0.16), transparent 26%),
        linear-gradient(180deg, #160f1d 0%, var(--bg) 100%);
}

.hidden {
    display: none !important;
}

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

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(43, 36, 28, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 36, 28, 0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at center, black, transparent 85%);
}

.page-shell {
    width: min(1680px, calc(100% - 32px));
    margin: 0 auto;
    padding: 20px 0 40px;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

body.page-transitioning .page-shell {
    opacity: 0.45;
    transform: translateY(3px);
}

.topbar,
.hero,
.server-card,
.sidebar-card,
.info-card,
.stack-panel,
.preview-card,
.empty-state,
.metric-card {
    backdrop-filter: blur(14px);
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    border-radius: calc(var(--radius) - 6px);
    margin-bottom: 20px;
    position: relative;
    z-index: 500;
    overflow: visible;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.brand small {
    display: block;
    color: var(--muted);
}

.brand-mark {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    box-shadow: 0 0 0 8px rgba(208, 99, 44, 0.12);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

.primary-button,
.ghost-button,
.danger-button,
.sidebar-link,
.pill {
    border-radius: 999px;
    padding: 12px 18px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}

.primary-button {
    border: none;
    color: #fff9f1;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    cursor: pointer;
}

.ghost-button {
    color: var(--button-ghost-text);
    border: 1px solid var(--button-ghost-border);
    background: var(--button-ghost-bg);
}

.danger-button {
    border: none;
    color: #fff9f1;
    background: linear-gradient(135deg, #c0392b, #962b1f);
    cursor: pointer;
}

.danger-button:hover {
    filter: brightness(1.08);
}

.pill {
    font-size: 0.92rem;
    border: 1px solid var(--border);
    background: var(--surface-soft);
}

.pill.warning {
    color: var(--accent-strong);
    background: rgba(244, 188, 125, 0.22);
}

.pill.muted {
    color: var(--muted);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 8px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
}

.user-menu {
    position: relative;
}

.user-menu-trigger-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.user-chip-button {
    border: 1px solid var(--border);
    cursor: pointer;
    color: var(--text);
    font: inherit;
}

.theme-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 180px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel-strong);
    box-shadow: var(--shadow);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 9999;
}

.theme-menu-title {
    margin: 0 0 4px;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.theme-option {
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
}

.theme-option:hover {
    border-color: rgba(208, 99, 44, 0.32);
}

.user-chip img {
    width: 28px;
    height: 28px;
    border-radius: 999px;
}

.hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    padding: 38px;
    border-radius: var(--radius);
}

.eyebrow {
    margin: 0 0 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-strong);
    font-size: 0.76rem;
}

.hero h1,
.dashboard-header h1,
.sidebar-card h1,
.section-hero h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 4.2rem);
    line-height: 0.95;
}

.hero-text,
.section-copy {
    max-width: 62ch;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.hero-actions,
.chip-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.panel-grid,
.card-grid,
.preview-grid,
.server-grid {
    display: grid;
    gap: 18px;
}

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

.metric-card,
.info-card,
.preview-card {
    border-radius: 20px;
    padding: 20px;
}

.metric-card span,
.preview-card span {
    color: var(--muted);
    display: block;
    margin-bottom: 8px;
}

.metric-card strong {
    display: block;
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.metric-card.accent {
    background: linear-gradient(145deg, rgba(208, 99, 44, 0.14), rgba(255, 250, 241, 0.9));
}

.dashboard-header {
    padding: 12px 4px 18px;
}

.server-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.server-card {
    border-radius: 22px;
    padding: 18px;
    color: inherit;
    text-decoration: none;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 16px;
    align-items: center;
}

.server-card img,
.server-fallback {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
}

.server-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent-soft), var(--accent));
    color: white;
    font-size: 1.8rem;
}

.guild-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-card,
.stack-panel {
    border-radius: 24px;
    padding: 18px;
}

.sync-button {
    margin-top: 10px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
    color: var(--text);
    border: 1px solid var(--border);
    background: var(--surface-soft-strong);
    padding: 10px 12px;
    border-radius: 10px;
    transition: color 0.15s ease, background 0.18s ease, border-color 0.18s ease, text-shadow 0.2s ease, transform 0.15s ease;
}
.sidebar-link .sidebar-link-icon {
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
    transition: filter 0.2s ease, transform 0.15s ease;
}
.sidebar-link:hover {
    color: var(--text);
    transform: translateX(2px);
    border-color: var(--accent);
}
.sidebar-link:hover .sidebar-link-icon {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.25));
}
.sidebar-link:active .sidebar-link-icon,
.sidebar-link.active .sidebar-link-icon {
    filter: drop-shadow(0 0 3px var(--accent, rgba(52, 211, 153, 0.45)));
}

.sidebar-link.active {
    background: linear-gradient(135deg, var(--accent-soft), var(--surface-soft-strong));
    border-color: var(--accent);
    color: var(--text);
    font-weight: 600;
}
.sidebar-link.active .sidebar-link-label {
    text-shadow: none;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.upload-form input[type="file"] {
    width: 100%;
    padding: 12px;
    border-radius: 16px;
    border: 1px dashed rgba(90, 66, 39, 0.24);
    background: rgba(255, 250, 241, 0.8);
}

.content-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-hero {
    padding: 10px 4px 0;
}

.info-card h3,
.stack-panel h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.15rem;
}

.info-card dl {
    margin: 0;
    display: grid;
    gap: 14px;
}

.info-card dl div {
    padding-top: 14px;
    border-top: 1px solid rgba(90, 66, 39, 0.1);
}

.info-card dl div:first-child {
    padding-top: 0;
    border-top: none;
}

.info-card dt {
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 6px;
}

.info-card dd {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

.preview-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.preview-card p {
    margin: 0;
    line-height: 1.5;
    white-space: pre-wrap;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
 td {
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(90, 66, 39, 0.1);
}

th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.activity-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
}

.empty-state {
    padding: 24px;
    border-radius: 24px;
}

.empty-state.wide {
    grid-column: 1 / -1;
}

.status-error {
    color: #9a2810;
    font-weight: 700;
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 6px 0;
    color: var(--muted);
    font-size: 0.92rem;
}

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

    .panel-grid,
    .card-grid {
        grid-template-columns: 1fr;
    }

    .embed-with-placeholder {
        grid-template-columns: 1fr;
    }

    .placeholder-picker {
        position: static;
    }
}

@media (max-width: 720px) {
    .page-shell {
        width: min(100% - 20px, 1680px);
    }

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

    .hero,
    .server-card,
    .sidebar-card,
    .info-card,
    .stack-panel,
    .preview-card,
    .empty-state,
    .metric-card {
        border-radius: 20px;
    }

    .hero {
        padding: 24px;
    }

    .server-card {
        grid-template-columns: 56px 1fr;
    }

    .server-card img,
    .server-fallback {
        width: 56px;
        height: 56px;
    }
}

/* ── Home page ────────────────────────────────────────────────────────────── */

.hero {
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 1;
    margin-bottom: 16px;
}

.hero-text {
    margin: 16px 0 28px;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.feature-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-item strong {
    display: block;
    margin-bottom: 4px;
}

.feature-item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.5;
}

.stats-strip {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.stats-card {
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-soft-strong);
    padding: 14px 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.stats-card p {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stats-card strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1.1;
}

/* ── Sidebar tweaks ───────────────────────────────────────────────────────── */

.sidebar-guild-name {
    margin: 6px 0 6px;
    font-size: 1.85rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.sidebar-guild-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
    margin-bottom: 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sidebar-guild-icon-fallback {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.muted-text {
    color: var(--muted);
    font-size: 0.9rem;
}

/* ── Dashboard header layout ─────────────────────────────────────────────── */

.dashboard-header-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0 6px;
}

.sync-corner-btn {
    font-size: 0.85rem;
    padding: 8px 14px;
}

/* ── Welcome subsections ──────────────────────────────────────────────────── */

.subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* When a subsection-header carries a long descriptive hint (e.g. the
   Webhook block), stack the title above the hint with a touch of vertical
   spacing instead of cramming them on one line. */
.subsection-header:has(.field-hint) {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.subsection-header h4 {
    margin: 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* ── Embed + placeholder picker layout ────────────────────────────────────── */

.embed-with-placeholder {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 18px;
    align-items: start;
}

.embed-form-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.placeholder-picker {
    position: sticky;
    top: 80px;
    background: var(--surface-soft-strong);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.placeholder-picker-title {
    margin: 0;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
}

.placeholder-focus-hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}

.placeholder-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.placeholder-group-label {
    margin: 0 0 4px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.placeholder-chip {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    font-family: monospace;
}

.placeholder-chip:hover {
    background: var(--surface-soft-strong);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Flash messages ───────────────────────────────────────────────────────── */

.flash {
    padding: 14px 18px;
    border-radius: 16px;
    font-weight: 600;
    border: 1px solid;
}

.flash-ok    { background: rgba(80, 160, 80, 0.12); border-color: rgba(80,160,80,0.3); color: #2d6a2d; }
.flash-error { background: rgba(200, 60, 60, 0.1);  border-color: rgba(200,60,60,0.3); color: #8a1f1f; }

/* ── Save banner ─────────────────────────────────────────────────────────── */

.save-banner {
    position: sticky;
    top: 10px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(208,99,44,0.14), rgba(255,250,241,0.92));
    border: 1px solid rgba(208,99,44,0.28);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(74,49,26,0.12);
    font-weight: 600;
}

.save-banner-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.save-banner.hidden { display: none; }

/* ── Form structure ──────────────────────────────────────────────────────── */

.section-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-section {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.form-section h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.form-section h4 {
    margin: 16px 0 10px;
    font-size: 0.95rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0 8px;
}

.save-status {
    font-size: 0.9rem;
    font-weight: 600;
}

.save-status.ok      { color: #3a8a3a; }
.save-status.err     { color: #a03030; }
.save-status.saving  { color: var(--muted); }

/* ── Fields ──────────────────────────────────────────────────────────────── */

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    margin-bottom: 18px;
}

.field-row .field,
.color-row .field {
    margin-bottom: 0;
}

.field-narrow {
    flex: 0 0 160px;
}

.field-row {
    display: flex;
    gap: 22px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.field > label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}

.field input[type="text"],
.field input[type="number"],
.field textarea,
.field select {
    padding: 13px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-soft-strong);
    color: var(--text);
    font-family: inherit;
    font-size: 0.97rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: rgba(208,99,44,0.5);
    box-shadow: 0 0 0 3px rgba(208,99,44,0.1);
}

.field textarea {
    resize: none;
    min-height: 98px;
    line-height: 1.4;
}

.field textarea[rows="2"] {
    min-height: 98px;
}

.field textarea[rows="3"] {
    min-height: 132px;
}

.field select {
    cursor: pointer;
}

.role-multi {
    min-height: 190px;
}

.picker-search {
    margin-bottom: 6px;
}

.create-panel-actions {
    justify-content: flex-end;
}

.field-hint {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.4;
}

.field-hint code {
    background: rgba(90,66,39,0.08);
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 0.82rem;
}

.id-preview {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.35;
}

.mention-channel,
.mention-role,
.mention-user {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
    margin-right: 4px;
}

.mention-channel {
    background: var(--mention-channel-bg);
    color: var(--mention-channel-text);
}

.mention-role {
    background: var(--mention-role-bg);
    color: var(--mention-role-text);
}

.mention-role.bad {
    background: rgba(180, 62, 62, 0.2);
    color: #a03030;
}

.mention-user {
    background: var(--mention-user-bg);
    color: var(--mention-user-text);
}

.id-preview.bad {
    color: #a03030;
}

.upload-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}

.upload-inline input[type="text"] {
    flex: 1;
}

.upload-pick {
    padding: 8px 12px;
    font-size: 0.88rem;
    cursor: pointer;
    white-space: nowrap;
}

.upload-preview {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-top: 10px;
    border: 1px solid var(--border);
    background: var(--surface-soft-strong);
}

.hidden-file {
    display: none;
}

/* ── Inline image-input with overlaid cloud upload icon ───────────────── */
.image-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.image-input-wrap .image-input-text {
    width: 100%;
    padding-right: 40px; /* room for the cloud icon */
}
.image-input-upload-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 6px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.image-input-upload-btn:hover {
    background: var(--surface-soft-strong);
    color: var(--accent);
}
.image-input-upload-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.image-input-status {
    display: block;
    min-height: 1em;
    margin-top: 4px;
}
.image-input-status.upload-error {
    color: #d04848;
}

/* ── Color picker row ────────────────────────────────────────────────────── */

.color-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.color-row-discord {
    background: rgba(88, 101, 242, 0.08);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
}

.color-row input[type="color"] {
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    background: transparent;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}
.color-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}
.color-row input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}
.color-row input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

.color-row input[type="text"] {
    flex: 1;
}

.emoji-field-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.emoji-open {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--border);
    background: rgba(88, 101, 242, 0.14);
    color: var(--text);
    border-radius: 999px;
    width: 30px;
    height: 30px;
    line-height: 1;
    cursor: pointer;
}

.emoji-field-wrap textarea + .emoji-open {
    top: 10px;
    transform: none;
}

.emoji-field-wrap input,
.emoji-field-wrap textarea {
    width: 100%;
    box-sizing: border-box;
    padding-right: 44px;
}

.emoji-layer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

.emoji-panel {
    position: absolute;
    width: 500px;
    max-width: calc(100vw - 20px);
    background: #1e2124;
    border: 1px solid #2b2f36;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    padding: 10px 10px 12px;
}

.emoji-body {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    min-height: 360px;
}

.emoji-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
}

.emoji-main {
    min-width: 0;
}

.emoji-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px 10px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b5bac1;
}

.emoji-close {
    border: 1px solid #363a43;
    background: #2b2f36;
    color: #dbdee1;
    border-radius: 8px;
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.emoji-tab {
    border: 0;
    background: transparent;
    color: #b5bac1;
    border-radius: 999px;
    font-size: 0.74rem;
    padding: 0;
    cursor: pointer;
}

.emoji-side-tab {
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    opacity: 0.72;
    transition: opacity 0.12s ease, filter 0.12s ease, transform 0.12s ease;
}

.emoji-side-tab:hover {
    border: 0;
    background: transparent;
    filter: brightness(1.15);
    opacity: 0.96;
    transform: scale(1.05);
}

.emoji-side-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.emoji-side-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    filter: grayscale(1) brightness(1.4) opacity(0.55);
    transition: filter 0.12s ease;
}

.emoji-side-tab:hover .emoji-side-img {
    filter: grayscale(1) brightness(1.9) opacity(0.85);
}

.emoji-tab.active .emoji-side-img,
.emoji-side-tab:active .emoji-side-img {
    filter: grayscale(1) brightness(2.2) opacity(1);
}

.emoji-side-divider {
    width: 28px;
    height: 1px;
    margin: 4px auto;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    flex-shrink: 0;
}

.emoji-side-server {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.emoji-side-tab:hover .emoji-side-server {
    transform: scale(1.07);
}

.emoji-side-label {
    display: none;
}

.emoji-tab.active {
    background: transparent;
    border-color: transparent;
    color: #fff;
    opacity: 1;
}

.emoji-tab.active .emoji-side-server {
    transform: scale(1.14);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.55);
}

.emoji-scroll {
    height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}

.emoji-section + .emoji-section {
    margin-top: 12px;
}

.emoji-section-head {
    width: 100%;
    border: 0;
    background: transparent;
    color: #bfc4cc;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 4px 5px;
    cursor: pointer;
}

.emoji-section-title {
    font-weight: 700;
}

.emoji-section-toggle {
    font-size: 0.85rem;
    opacity: 0.8;
    transition: transform 0.15s ease;
}

.emoji-section.collapsed .emoji-section-toggle {
    transform: rotate(-90deg);
}

.emoji-section.collapsed .emoji-section-grid {
    display: none;
}

.emoji-section-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 4px;
}

.emoji-grid {
    display: none;
}

.emoji-scroll,
.emoji-side {
    scrollbar-width: thin;
    scrollbar-color: #5b6068 #2b2f36;
}

.emoji-scroll::-webkit-scrollbar,
.emoji-grid::-webkit-scrollbar,
.emoji-side::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.emoji-scroll::-webkit-scrollbar-track,
.emoji-grid::-webkit-scrollbar-track,
.emoji-side::-webkit-scrollbar-track {
    background: #2b2f36;
    border-radius: 999px;
}

.emoji-grid::-webkit-scrollbar-thumb,
.emoji-scroll::-webkit-scrollbar-thumb,
.emoji-side::-webkit-scrollbar-thumb {
    background: #4f545c;
    border-radius: 999px;
}

.emoji-cell {
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 1.25rem;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    color: #fff;
    display: grid;
    place-items: center;
    line-height: 1;
}

.emoji-cell:hover {
    background: rgba(88, 101, 242, 0.24);
}

.emoji-cell img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.emoji-empty {
    color: #8e9297;
    font-size: 0.85rem;
    margin: 8px 2px;
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */

.toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.toggle input[type="checkbox"] {
    display: none;
}

.toggle-track {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: rgba(90,66,39,0.18);
    border: 1px solid var(--border);
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle input:checked + .toggle-track {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border-color: transparent;
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: left 0.2s;
}

.toggle input:checked + .toggle-track .toggle-thumb {
    left: 23px;
}

.toggle.saved-flash .toggle-track {
    box-shadow: 0 0 0 3px rgba(60,160,60,0.3);
}

/* ── Form tabs ───────────────────────────────────────────────────────────── */

.form-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.15s, border-color 0.15s;
}

.tab-btn.active {
    background: linear-gradient(135deg, rgba(208,99,44,0.18), rgba(244,188,125,0.24));
    border-color: rgba(208,99,44,0.28);
}

.tab-pane.hidden { display: none; }

/* ── Panel cards (reaction roles) ────────────────────────────────────────── */

.panel-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
}

.panel-card + .panel-card {
    margin-top: 14px;
}

.panel-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 600;
}

.panel-summary::-webkit-details-marker { display: none; }

.panel-summary::before {
    content: "▸";
    color: var(--accent);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.panel-card[open] > .panel-summary::before {
    transform: rotate(90deg);
}

.panel-name {
    flex: 1;
    font-size: 1.05rem;
}

.panel-body {
    padding: 0 22px 22px;
    border-top: 1px solid var(--border);
}

.panel-form {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rr-manager-row {
    align-items: end;
}

.rr-manager-actions .ghost-button {
    min-width: 130px;
}

.rr-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

/* Reactions vs Buttons segmented toggle (per-panel + create form) */
.rr-style-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}
.rr-style-toggle .rr-style-opt {
    border: none;
    background: transparent;
    color: var(--muted);
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 600;
}
.rr-style-toggle .rr-style-opt:hover {
    color: var(--text);
}
.rr-style-toggle .rr-style-opt.active {
    background: rgba(88, 101, 242, 0.25);
    color: var(--text);
}

/* Reaction-Roles sub-tabs (Panels / Logs) */
.rr-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.rr-tab {
    border: none;
    background: transparent;
    color: var(--muted);
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.92rem;
    border-bottom: 2px solid transparent;
}
.rr-tab:hover { color: var(--text); }
.rr-tab.active {
    color: var(--text);
    border-bottom-color: var(--accent-strong, #5865f2);
}
.rr-banner-suppressed { display: none !important; }

/* Reaction-role logs filters + list */
.rr-logs-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.rr-logs-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rr-logs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 560px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    background: var(--surface-soft-strong);
}
.rr-log-row {
    display: grid;
    grid-template-columns: 160px 90px minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr);
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
}
.rr-log-row:nth-child(odd) { background: var(--input-bg-strong); }
.rr-log-row:hover { background: var(--hover-soft); }
.rr-log-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.rr-log-action { font-weight: 700; }
.rr-log-added .rr-log-action { color: #4ade80; }
.rr-log-removed .rr-log-action { color: #f87171; }
.rr-logs-empty {
    padding: 24px;
    text-align: center;
    color: var(--muted);
}
.rr-logs-load-more-row {
    margin-top: 10px;
    text-align: center;
}
@media (max-width: 800px) {
    .rr-log-row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 10px;
    }
}

/* Moderation logs table-like rows */
.modlog-row {
    display: grid;
    grid-template-columns: 70px 160px 100px minmax(160px, 1fr) minmax(160px, 2fr) minmax(160px, 1fr);
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-soft-strong) 82%, var(--bg));
    font-size: 0.86rem;
}
.modlog-row:nth-child(odd) {
    background: color-mix(in srgb, var(--surface-soft-strong) 90%, var(--bg));
}
.modlog-row:hover { background: var(--hover-soft); }
.modlog-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modlog-case { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.modlog-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.modlog-action { font-weight: 700; }
.mod-log-warn .modlog-action { color: #facc15; }
.mod-log-mute .modlog-action,
.mod-log-tempban .modlog-action { color: #fb923c; }
.mod-log-kick .modlog-action { color: #f87171; }
.mod-log-ban .modlog-action { color: #ef4444; }
.mod-log-unmute .modlog-action,
.mod-log-unban .modlog-action { color: #4ade80; }
.mod-log-nickname .modlog-action,
.mod-log-nickname_moderation .modlog-action { color: #a78bfa; }
.modlog-reason { color: var(--text); white-space: normal; }
@media (max-width: 900px) {
    .modlog-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 12px;
    }
}

/* Inline Discord-style mention chip used in modlog rows */
.modlog-mention { display: inline-flex; }
.modlog-mention-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 2px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-strong) 40%, var(--border));
    background: color-mix(in srgb, var(--accent-strong) 16%, var(--surface-soft-strong));
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
}
.modlog-mention-btn:hover {
    background: color-mix(in srgb, var(--accent-strong) 24%, var(--surface-soft-strong));
    border-color: color-mix(in srgb, var(--accent-strong) 64%, var(--border));
    color: var(--text);
}
.modlog-mention-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-strong) 25%, var(--bg)) center/cover no-repeat;
    flex: 0 0 auto;
}

body[data-theme="emerald"] .modlog-row,
body[data-theme="charcoal"] .modlog-row,
body[data-theme="rose-night"] .modlog-row,
body[data-theme="emerald"] .rr-logs-list,
body[data-theme="charcoal"] .rr-logs-list,
body[data-theme="rose-night"] .rr-logs-list {
    background: var(--surface-soft-strong);
    border-color: var(--border);
}
.modlog-mention-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.modlog-mention-menu {
    position: absolute;
    z-index: 1300;
    background: #1f2227;
    border: 1px solid var(--border, #2c2f3d);
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.modlog-mention-menu.hidden { display: none; }
.modlog-mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text, #e7e9ee);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.modlog-mention-item:hover { background: rgba(88, 101, 242, 0.18); }
.modlog-mention-icon {
    width: 18px;
    text-align: center;
    opacity: 0.8;
    flex-shrink: 0;
}

/* Modlog filter user/moderator chip */
.modlog-user-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.modlog-user-pick-btn { white-space: nowrap; }
.modlog-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    border-radius: 999px;
    background: rgba(88, 101, 242, 0.18);
    border: 1px solid rgba(88, 101, 242, 0.4);
    max-width: 100%;
    overflow: hidden;
}
.modlog-filter-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12) center/cover no-repeat;
    flex: 0 0 auto;
}
.modlog-filter-meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    line-height: 1.15;
}
.modlog-filter-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.modlog-filter-id {
    font-size: 0.7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.modlog-filter-clear {
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 6px;
    border-radius: 50%;
}
.modlog-filter-clear:hover { color: #f87171; background: rgba(248, 113, 113, 0.15); }

.rr-role-row.dragging {
    opacity: 0.45;
}

.rr-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.rr-role-row {
    display: grid;
    grid-template-columns: 22px 44px minmax(0, 1fr) minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

/* Hide "remove role" pick unless panel mode is mixed */
.panel-editor:not([data-panel-mode="mixed"]) .rr-role-pick-remove {
    display: none;
}
.panel-editor:not([data-panel-mode="mixed"]) .rr-role-row {
    grid-template-columns: 22px 44px minmax(0, 1fr) 36px;
}

.rr-drag {
    width: 22px;
    text-align: center;
    cursor: grab;
    color: var(--muted);
    user-select: none;
    line-height: 1;
}

.rr-role-row .rr-drag:active {
    cursor: grabbing;
}

.rr-emoji-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px dashed var(--border);
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
}

.rr-emoji-btn:hover {
    border-style: solid;
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.12);
}

.rr-emoji-preview {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
}

.rr-emoji-preview img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.rr-emoji-preview.rr-emoji-empty {
    color: var(--muted);
    font-size: 1.4rem;
    font-weight: 600;
}

.rr-role-row .rr-remove-row-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    color: #f97a7a;
    border-color: rgba(249, 122, 122, 0.4);
}

.rr-role-row .rr-remove-row-btn:hover {
    background: rgba(249, 122, 122, 0.12);
}

/* Discord-style single role picker button */
.rr-role-pick {
    min-width: 0;
}

.role-pick-btn {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    text-align: left;
    overflow: hidden;
}

.role-pick-btn:hover {
    border-color: #5865f2;
}

.role-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.role-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-pop-empty {
    color: var(--muted);
    font-style: italic;
}

/* Required-role stack list */
.rr-role-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.rr-stack-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--input-bg);
    border: 1px solid var(--border);
}

.rr-stack-row .role-name {
    flex: 1;
}

.rr-stack-remove {
    border: none;
    background: transparent;
    color: #f97a7a;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 2px 8px;
    border-radius: 6px;
}

.rr-stack-remove:hover {
    background: rgba(249, 122, 122, 0.14);
}

.rr-stack-add-btn {
    align-self: flex-start;
}

/* Generic role popover */
.role-pop {
    position: absolute;
    z-index: 1300;
    background: var(--overlay-bg);
    border: 1px solid var(--overlay-border);
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.role-pop.hidden {
    display: none;
}

.role-pop-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 0.9rem;
}

.role-pop-list {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.role-pop-item {
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.role-pop-item:hover {
    background: var(--hover-soft);
}

.role-pop-item.active {
    background: color-mix(in srgb, var(--accent-strong) 30%, transparent);
}

/* User picker (members popover + stack) */
.user-pop {
    position: absolute;
    z-index: 1300;
    background: var(--overlay-bg);
    border: 1px solid var(--overlay-border);
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.user-pop.hidden { display: none; }
.user-pop-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 0.9rem;
}
.user-pop-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-pop-empty {
    padding: 10px;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}
.user-pop-item {
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}
.user-pop-item:hover { background: var(--hover-soft); }
.user-pop-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08) center/cover no-repeat;
    flex: 0 0 auto;
}
.user-pop-meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.user-pop-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-pop-sub {
    font-size: 0.72rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-picker-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.user-stack-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
}
.user-stack-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08) center/cover no-repeat;
    flex: 0 0 auto;
}
.user-stack-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.user-stack-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-stack-id {
    font-size: 0.72rem;
    color: var(--muted);
}
.user-stack-remove {
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 6px;
}
.user-stack-remove:hover { color: var(--text); }
.user-stack-add {
    align-self: flex-start;
}

.rr-row-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
}

/* ── Logs section ────────────────────────────────────────────────────────── */

.logs-channel-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.log-channel-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.log-channel-row > label {
    width: 160px;
    flex-shrink: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.log-channel-input {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.log-channel-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
}

.routing-note {
    font-size: 0.78rem;
    color: var(--accent-strong);
    font-weight: 600;
}

.routing-note.muted {
    color: var(--muted);
    font-weight: 500;
}

.log-channel-field {
    flex: 1;
    max-width: 300px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-soft-strong);
    font-family: inherit;
    font-size: 0.97rem;
    color: var(--text);
}

.log-channel-field:focus {
    outline: none;
    border-color: rgba(208,99,44,0.5);
    box-shadow: 0 0 0 3px rgba(208,99,44,0.1);
}

.log-channel-field.dirty {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 2px rgba(208,99,44,0.18);
}
[data-log-event].dirty + .toggle-track {
    box-shadow: 0 0 0 2px rgba(208,99,44,0.45);
}

.log-channel-status {
    font-weight: 700;
    width: 20px;
    text-align: center;
}

.log-channel-status.ok  { color: #3a8a3a; }
.log-channel-status.err { color: #a03030; }

.event-category {
    margin-bottom: 22px;
}

.event-category h4 {
    margin: 0 0 12px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.event-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.event-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    cursor: pointer;
    font-size: 0.93rem;
    font-weight: 600;
    transition: background 0.15s;
}

.event-toggle-row:hover {
    background: var(--surface-soft-strong);
}

/* ── Pill tag (used in roles tab) ────────────────────────────────────────── */

.pill-tag {
    display: inline-block;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(208,99,44,0.12);
    color: var(--accent-strong);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.empty-state {
    padding: 40px 24px;
    border-radius: 22px;
    text-align: center;
    color: var(--muted);
}

.empty-state code {
    background: rgba(90,66,39,0.08);
    padding: 2px 7px;
    border-radius: 6px;
}

.create-panel-block {
    margin-bottom: 14px;
}

/* ── Activity list (kept for backwards compat) ───────────────────────────── */

.activity-list {
    margin: 0;
    padding: 0 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--muted);
    font-size: 0.93rem;
}

.status-error {
    color: #a03030;
    margin-top: 12px;
}

/* ── Responsive ─────────────────────────────────────────────────────────────*/

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

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

    .sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-link {
        padding: 9px 14px;
        font-size: 0.9rem;
    }

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

    .field-narrow {
        flex: unset;
        width: 100%;
    }

    .log-channel-row {
        flex-wrap: wrap;
    }

    .log-channel-row > label {
        width: 100%;
    }

    .log-channel-meta {
        min-width: 100%;
    }
}

/* -- Embed live preview + Discord-style markdown ----------------------- */

.subsection-header {
    margin-top: 18px;
    margin-bottom: 12px;
}

.embed-preview-pane {
    position: sticky;
    top: 16px;
    align-self: start;
}

.embed-preview-sticky {
    background: #2b2d31;
    border: 1px solid #1f2024;
    border-radius: 14px;
    padding: 14px 16px 18px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.embed-preview-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #b5bac1;
    margin: 0 0 10px;
}

.discord-message-preview {
    font-family: 'gg sans', 'Segoe UI', Roboto, system-ui, sans-serif;
    color: #dbdee1;
    font-size: 0.95rem;
    line-height: 1.4;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: start;
}

.dm-message-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dm-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
}

.dm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5865f2, #7984f5);
    flex-shrink: 0;
    object-fit: cover;
    margin-top: 2px;
}

.dm-name {
    font-weight: 600;
    color: #f2f3f5;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dm-bot-tag {
    background: #5865f2;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dm-content {
    margin: 2px 0 6px;
    color: #dbdee1;
    word-wrap: break-word;
}

.dm-content:empty {
    display: none;
}

.dm-embed {
    display: grid;
    grid-template-columns: 4px 1fr;
    background: #2b2d31;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    max-width: 520px;
    margin-top: 4px;
    border: 1px solid #1f2024;
}

.dm-embed-color {
    background: #5865f2;
    width: 4px;
}

.dm-embed-body {
    background: #2b2d31;
    padding: 8px 16px 16px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-rows: auto;
    gap: 0 14px;
    min-width: 0;
}

.dm-embed-text {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-top: 2px;
}

.dm-embed-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #f2f3f5;
}

.dm-embed-author .dm-author-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.dm-embed-title {
    font-size: 1rem;
    font-weight: 600;
    color: #f2f3f5;
    word-wrap: break-word;
}

.dm-embed-description {
    font-size: 0.92rem;
    color: #dbdee1;
    white-space: normal;
    word-wrap: break-word;
}

.dm-embed-image {
    grid-column: 1 / -1;
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    border-radius: 4px;
    margin-top: 10px;
    background: #1f2024;
}

.dm-embed-thumbnail {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
    margin-top: 8px;
    margin-left: 4px;
    align-self: start;
    justify-self: end;
}

.dm-embed-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #b5bac1;
    margin-top: 8px;
}

.dm-embed-footer .dm-footer-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.dm-twemoji {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.2em;
    display: inline-block;
}

/* ── Live preview: components (buttons & reactions) ─────────────── */
.dm-components {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.dm-components.hidden { display: none; }
.dm-components.dm-components-buttons {
    gap: 8px;
}
.dm-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    min-height: 32px;
    background: #4e5058;
    color: #ffffff;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    border: none;
    cursor: default;
    user-select: none;
    transition: background 0.12s ease;
    max-width: 100%;
}
.dm-button:hover { background: #6d6f78; }
.dm-button .dm-twemoji,
.dm-button .dm-custom-emoji {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}
.dm-button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.dm-reaction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: #2b2d31;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #b5bac1;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    cursor: default;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.dm-reaction:hover {
    background: #36373d;
    border-color: rgba(255,255,255,0.08);
}
.dm-reaction .dm-twemoji,
.dm-reaction .dm-custom-emoji {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.dm-reaction-count { color: #b5bac1; }

.dm-pre {
    background: #1e1f22;
    border: 1px solid #1a1b1e;
    border-radius: 4px;
    padding: 8px 10px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.85rem;
    color: #dbdee1;
    overflow-x: auto;
    white-space: pre;
}

.dm-code {
    background: #1e1f22;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.85em;
    color: #dbdee1;
}

.dm-quote {
    border-left: 4px solid #4e5058;
    padding-left: 10px;
    color: #b5bac1;
    margin: 2px 0;
}

.dm-h1 { font-size: 1.4rem; font-weight: 700; color: #f2f3f5; margin: 4px 0; }
.dm-h2 { font-size: 1.2rem; font-weight: 700; color: #f2f3f5; margin: 4px 0; }
.dm-h3 { font-size: 1.05rem; font-weight: 700; color: #f2f3f5; margin: 4px 0; }

.dm-li { padding-left: 4px; }

.dm-spoiler {
    background: #202225;
    color: transparent;
    border-radius: 3px;
    padding: 0 2px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.dm-spoiler:hover {
    background: #36393f;
    color: #dcddde;
}

.dm-link {
    color: #00a8fc;
    text-decoration: none;
}
.dm-link:hover {
    text-decoration: underline;
}

/* -- Emoji shortcode autocomplete --------------------------------------- */

.emoji-autocomplete {
    position: absolute;
    z-index: 1400;
    background: #2b2d31;
    border: 1px solid #1f2024;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
    padding: 6px;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.emoji-autocomplete.hidden {
    display: none;
}

.emoji-ac-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b5bac1;
    padding: 4px 8px 2px;
}

.emoji-ac-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 220px;
}

.emoji-ac-item {
    border: none;
    background: transparent;
    color: #dbdee1;
    text-align: left;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.emoji-ac-item:hover,
.emoji-ac-item.active {
    background: #404249;
    color: #fff;
}

.emoji-ac-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.emoji-ac-name {
    color: #b5bac1;
    font-size: 0.88rem;
}

.emoji-ac-item.active .emoji-ac-name {
    color: #fff;
}

/* -- Discord-style mentions & custom emojis in preview ----------------- */

.dm-custom-emoji {
    width: 1.375em;
    height: 1.375em;
    vertical-align: -0.25em;
    object-fit: contain;
}

.dm-mention {
    color: #c9cdfb;
    background: rgba(88, 101, 242, 0.18);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s;
}

.dm-mention:hover {
    background: rgba(88, 101, 242, 0.32);
    color: #fff;
}

.dm-channel-mention {
    color: #c9cdfb;
}

.dm-user-mention {
    color: #c9cdfb;
}

/* -- Emerald theme ------------------------------------------------- */
html[data-theme="emerald"] { background-color: #06120c; }
body[data-theme="emerald"] {
    --bg: #06120c;
    --bg-strong: #0a1f15;
    --panel: rgba(14, 32, 24, 0.78);
    --panel-strong: #0f2a1e;
    --border: rgba(52, 211, 153, 0.22);
    --text: #d6f5e3;
    --muted: #86b29c;
    --accent: #10b981;
    --accent-strong: #34d399;
    --accent-soft: rgba(52, 211, 153, 0.22);
    --mention-channel-bg: rgba(52, 211, 153, 0.16);
    --mention-channel-text: #6ee7b7;
    --mention-role-bg: rgba(20, 184, 166, 0.18);
    --mention-role-text: #5eead4;
    --mention-user-bg: rgba(132, 204, 22, 0.16);
    --mention-user-text: #bef264;
    --surface-soft: rgba(14, 32, 24, 0.72);
    --surface-soft-strong: rgba(20, 42, 30, 0.86);
    --button-ghost-bg: rgba(15, 38, 28, 0.85);
    --button-ghost-text: #d1fae5;
    --button-ghost-border: rgba(52, 211, 153, 0.32);
    --shadow: 0 24px 60px rgba(0, 30, 20, 0.55);
    --radius: 18px;
    --font-display: "Sora", "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-body: "Inter", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.20), transparent 28%),
        radial-gradient(circle at bottom right, rgba(6, 78, 59, 0.45), transparent 30%),
        linear-gradient(180deg, #04100a 0%, #06120c 100%);
    /* rain palette tokens — read by base.html canvas script */
    --rain-head:  #d1fae5;
    --rain-trail: rgba(52, 211, 153, 0.85);
    --rain-gem-a: #34d399;
    --rain-gem-b: #22d3ee;
    --rain-fade:  rgba(4, 14, 9, 0.16);
    --rain-glow:  #34d399;
    /* exclusive bronze tones for unsaved + selection */
    --emera-bronze:        #c08a4f;
    --emera-bronze-strong: #8b5a2b;
    --emera-bronze-soft:   rgba(192, 138, 79, 0.22);
    --overlay-bg: var(--panel-strong);
    --input-bg: var(--surface-soft);
    --input-bg-strong: var(--surface-soft-strong);
}
body[data-theme="emerald"] .brand-mark-emerald svg {
    filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.55));
}

/* ── Emera variants ────────────────────────────────────────────────── */
body[data-theme="emerald"][data-emera-variant="teal"] {
    --accent:        #14b8a6;
    --accent-strong: #5eead4;
    --accent-soft:   rgba(45, 212, 191, 0.24);
    --border:        rgba(94, 234, 212, 0.26);
    --mention-channel-bg:   rgba(45, 212, 191, 0.18);
    --mention-channel-text: #99f6e4;
    --mention-role-bg:      rgba(34, 211, 238, 0.18);
    --mention-role-text:    #a5f3fc;
    --rain-head:  #ccfbf1;
    --rain-trail: rgba(94, 234, 212, 0.85);
    --rain-gem-a: #2dd4bf;
    --rain-gem-b: #22d3ee;
    --rain-glow:  #2dd4bf;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.24), transparent 32%),
        radial-gradient(circle at bottom right, rgba(8, 145, 178, 0.38), transparent 34%),
        linear-gradient(180deg, #04141a 0%, #06120c 100%);
}
body[data-theme="emerald"][data-emera-variant="lime"] {
    --accent:        #84cc16;
    --accent-strong: #facc15;
    --accent-soft:   rgba(190, 242, 100, 0.26);
    --border:        rgba(190, 242, 100, 0.28);
    --mention-channel-bg:   rgba(190, 242, 100, 0.18);
    --mention-channel-text: #ecfccb;
    --mention-role-bg:      rgba(250, 204, 21, 0.18);
    --mention-role-text:    #fde68a;
    --rain-head:  #f7fee7;
    --rain-trail: rgba(190, 242, 100, 0.85);
    --rain-gem-a: #a3e635;
    --rain-gem-b: #facc15;
    --rain-glow:  #a3e635;
    background:
        radial-gradient(circle at top left, rgba(132, 204, 22, 0.22), transparent 30%),
        radial-gradient(circle at bottom right, rgba(202, 138, 4, 0.30), transparent 34%),
        linear-gradient(180deg, #0a1306 0%, #06120c 100%);
}
body[data-theme="emerald"][data-emera-variant="magenta"] {
    --accent:        #10b981;
    --accent-strong: #f472b6;
    --accent-soft:   rgba(244, 114, 182, 0.24);
    --border:        rgba(244, 114, 182, 0.28);
    --mention-channel-bg:   rgba(52, 211, 153, 0.18);
    --mention-channel-text: #6ee7b7;
    --mention-role-bg:      rgba(244, 114, 182, 0.20);
    --mention-role-text:    #fbcfe8;
    --rain-head:  #fce7f3;
    --rain-trail: rgba(52, 211, 153, 0.85);
    --rain-gem-a: #34d399;
    --rain-gem-b: #f472b6;
    --rain-glow:  #f472b6;
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.22), transparent 30%),
        radial-gradient(circle at bottom right, rgba(219, 39, 119, 0.32), transparent 34%),
        linear-gradient(180deg, #100618 0%, #06120c 100%);
}

/* ── Bronze "unsaved changes" + selection (emerald exclusive) ─────── */
body[data-theme="emerald"] .save-banner {
    background: linear-gradient(135deg, rgba(192, 138, 79, 0.22), rgba(139, 90, 43, 0.16));
    border: 1px solid rgba(192, 138, 79, 0.55);
    color: #f3d9b5;
    box-shadow: 0 0 0 1px rgba(192, 138, 79, 0.18), 0 8px 28px rgba(50, 30, 10, 0.45);
}
body[data-theme="emerald"] .save-banner span,
body[data-theme="emerald"] .save-banner .save-status { color: #f3d9b5; }
body[data-theme="emerald"] ::selection {
    background: rgba(192, 138, 79, 0.55);
    color: #fff7ec;
}
body[data-theme="emerald"] ::-moz-selection {
    background: rgba(192, 138, 79, 0.55);
    color: #fff7ec;
}

/* ── Theme dropdown: Emera row + variant dots ─────────────────────── */
.theme-row-emera {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(34,211,238,0.06));
    border: 1px solid rgba(52, 211, 153, 0.22);
}
.theme-option-emera {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 6px 8px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
}
.theme-option-emera .theme-option-label {
    background: linear-gradient(90deg, #34d399, #22d3ee 60%, #a3e635);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 14px rgba(52, 211, 153, 0.18);
}
.emera-variants {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 4px;
}
.emera-variant-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.22);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.emera-variant-dot:hover { transform: scale(1.15); }
.emera-variant-dot.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 0 10px currentColor;
}
.emera-variant-dot.is-classic { background: linear-gradient(135deg, #10b981, #064e3b); color: #34d399; }
.emera-variant-dot.is-teal    { background: linear-gradient(135deg, #14b8a6, #22d3ee); color: #22d3ee; }
.emera-variant-dot.is-lime    { background: linear-gradient(135deg, #a3e635, #facc15); color: #a3e635; }
.emera-variant-dot.is-magenta { background: linear-gradient(135deg, #10b981, #f472b6); color: #f472b6; }
.emera-variant-dot.is-holo    {
    background: conic-gradient(from 0deg, #34d399, #22d3ee, #a3e635, #facc15, #f472b6, #34d399);
    color: #fbcfe8;
    animation: holo-dot-spin 4s linear infinite;
}
@keyframes holo-dot-spin {
    to { transform: rotate(360deg); }
}
.emera-variant-dot.is-holo.is-active {
    animation: holo-dot-spin 4s linear infinite;
}

/* ── Holographic variant ────────────────────────────────────────────
   Combines the best of each palette (emerald + cyan + lime gold +
   magenta orchid) into an animated rainbow theme. The page background,
   form fields, primary buttons, and toggles all run gentle gradient
   animations to give the page an iridescent feel. */
body[data-theme="emerald"][data-emera-variant="holo"] {
    --accent:        #22d3ee;
    --accent-strong: #f472b6;
    --accent-soft:   rgba(167, 139, 250, 0.26);
    --border:        rgba(167, 139, 250, 0.32);
    --mention-channel-bg:   rgba(34, 211, 238, 0.18);
    --mention-channel-text: #a5f3fc;
    --mention-role-bg:      rgba(244, 114, 182, 0.18);
    --mention-role-text:    #fbcfe8;
    --rain-head:  #fce7f3;
    --rain-trail: rgba(167, 139, 250, 0.85);
    --rain-gem-a: #34d399;
    --rain-gem-b: #f472b6;
    --rain-glow:  #a3e635;
    background:
        linear-gradient(135deg,
            rgba(52, 211, 153, 0.18) 0%,
            rgba(34, 211, 238, 0.22) 25%,
            rgba(167, 139, 250, 0.22) 50%,
            rgba(244, 114, 182, 0.22) 75%,
            rgba(163, 230, 53, 0.18) 100%),
        linear-gradient(180deg, #08101a 0%, #0d0618 100%);
    background-size: 300% 300%, 100% 100%;
    animation: holo-bg-shift 22s ease-in-out infinite;
}
@keyframes holo-bg-shift {
    0%   { background-position:   0% 50%, 0 0; }
    50%  { background-position: 100% 50%, 0 0; }
    100% { background-position:   0% 50%, 0 0; }
}

/* Animated holographic glow layer */
body[data-theme="emerald"][data-emera-variant="holo"] .emera-glow-layer {
    background:
        radial-gradient(60% 50% at 18% 20%, rgba(34, 211, 238, 0.32), transparent 70%),
        radial-gradient(55% 45% at 82% 78%, rgba(244, 114, 182, 0.30), transparent 72%),
        radial-gradient(50% 40% at 50% 50%, rgba(167, 139, 250, 0.22), transparent 75%),
        radial-gradient(40% 35% at 30% 80%, rgba(163, 230, 53, 0.18), transparent 75%);
    background-size: 200% 200%;
    animation: holo-glow-shift 16s ease-in-out infinite alternate;
}
@keyframes holo-glow-shift {
    0%   { background-position:   0% 0%, 100% 100%, 50% 50%, 30% 70%; }
    100% { background-position: 100% 100%,   0%   0%, 50% 50%, 70% 30%; }
}

/* Form sections, panel cards, fields — iridescent border that shifts hue */
body[data-theme="emerald"][data-emera-variant="holo"] .form-section,
body[data-theme="emerald"][data-emera-variant="holo"] .panel-card,
body[data-theme="emerald"][data-emera-variant="holo"] .save-banner {
    position: relative;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--panel), var(--panel)) padding-box,
        linear-gradient(135deg, #34d399, #22d3ee, #a78bfa, #f472b6, #a3e635, #34d399) border-box;
    background-size: auto, 300% 300%;
    animation: holo-border-shift 12s linear infinite;
}
@keyframes holo-border-shift {
    0%   { background-position: 0 0,   0% 50%; }
    100% { background-position: 0 0, 300% 50%; }
}

/* Inputs / selects / textareas — soft animated tint */
body[data-theme="emerald"][data-emera-variant="holo"] input[type="text"],
body[data-theme="emerald"][data-emera-variant="holo"] input[type="number"],
body[data-theme="emerald"][data-emera-variant="holo"] input[type="url"],
body[data-theme="emerald"][data-emera-variant="holo"] textarea,
body[data-theme="emerald"][data-emera-variant="holo"] select {
    background:
        linear-gradient(var(--surface-soft), var(--surface-soft)) padding-box,
        linear-gradient(135deg, #34d399, #22d3ee, #a78bfa, #f472b6, #34d399) border-box;
    background-size: auto, 250% 250%;
    border: 1px solid transparent;
    animation: holo-border-shift 14s linear infinite;
    transition: box-shadow 0.18s ease;
}
body[data-theme="emerald"][data-emera-variant="holo"] input[type="text"]:focus,
body[data-theme="emerald"][data-emera-variant="holo"] input[type="number"]:focus,
body[data-theme="emerald"][data-emera-variant="holo"] input[type="url"]:focus,
body[data-theme="emerald"][data-emera-variant="holo"] textarea:focus,
body[data-theme="emerald"][data-emera-variant="holo"] select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.45), 0 0 18px rgba(244, 114, 182, 0.30);
}

/* Primary + ghost buttons — animated rainbow sweep */
body[data-theme="emerald"][data-emera-variant="holo"] .primary-button {
    background: linear-gradient(115deg, #34d399, #22d3ee, #a78bfa, #f472b6, #a3e635, #34d399);
    background-size: 300% 100%;
    color: #0a0414;
    border: 0;
    font-weight: 700;
    animation: holo-btn-sweep 6s linear infinite;
    box-shadow: 0 6px 20px rgba(167, 139, 250, 0.30), 0 0 0 1px rgba(255,255,255,0.08) inset;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}
body[data-theme="emerald"][data-emera-variant="holo"] .primary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(244, 114, 182, 0.40), 0 0 0 1px rgba(255,255,255,0.18) inset;
}
@keyframes holo-btn-sweep {
    0%   { background-position:   0% 0%; }
    100% { background-position: 300% 0%; }
}
body[data-theme="emerald"][data-emera-variant="holo"] .ghost-button {
    background:
        linear-gradient(var(--surface-soft-strong), var(--surface-soft-strong)) padding-box,
        linear-gradient(115deg, #34d399, #22d3ee, #a78bfa, #f472b6, #34d399) border-box;
    background-size: auto, 300% 100%;
    border: 1px solid transparent;
    animation: holo-btn-sweep 9s linear infinite;
}

/* Toggle track — animated holographic gradient when checked */
body[data-theme="emerald"][data-emera-variant="holo"] .toggle input:checked + .toggle-track {
    background: linear-gradient(115deg, #34d399, #22d3ee, #a78bfa, #f472b6, #a3e635, #34d399);
    background-size: 300% 100%;
    animation: holo-btn-sweep 5s linear infinite;
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.40);
}
body[data-theme="emerald"][data-emera-variant="holo"] .toggle input:not(:checked) + .toggle-track {
    background: linear-gradient(115deg, rgba(167, 139, 250, 0.30), rgba(34, 211, 238, 0.30), rgba(244, 114, 182, 0.30));
    background-size: 250% 100%;
    animation: holo-btn-sweep 14s linear infinite;
}

/* Headings keep their normal color in this variant — the background-clip
   trick collapses letter-spacing on uppercase headings (and made some
   menu labels look squished). Use a soft accent glow instead. */
body[data-theme="emerald"][data-emera-variant="holo"] h1,
body[data-theme="emerald"][data-emera-variant="holo"] h2,
body[data-theme="emerald"][data-emera-variant="holo"] h3,
body[data-theme="emerald"][data-emera-variant="holo"] h4,
body[data-theme="emerald"][data-emera-variant="holo"] label {
    /* Preserve any per-element letter-spacing the base styles already set. */
    letter-spacing: inherit;
}

/* Native <select> dropdown options render with OS defaults (white bg) which
   is unreadable against our light text. Force them to the panel surface. */
body[data-theme="emerald"][data-emera-variant="holo"] select option,
body[data-theme="emerald"][data-emera-variant="holo"] select optgroup {
    background-color: #0f0a1a;
    color: var(--text);
}

/* Save banner gets the iridescent treatment too */
body[data-theme="emerald"][data-emera-variant="holo"] .save-banner {
    color: #fce7f3;
}

/* Respect users who'd rather not have constant motion */
@media (prefers-reduced-motion: reduce) {
    body[data-theme="emerald"][data-emera-variant="holo"],
    body[data-theme="emerald"][data-emera-variant="holo"] .form-section,
    body[data-theme="emerald"][data-emera-variant="holo"] .panel-card,
    body[data-theme="emerald"][data-emera-variant="holo"] .save-banner,
    body[data-theme="emerald"][data-emera-variant="holo"] input[type="text"],
    body[data-theme="emerald"][data-emera-variant="holo"] input[type="number"],
    body[data-theme="emerald"][data-emera-variant="holo"] input[type="url"],
    body[data-theme="emerald"][data-emera-variant="holo"] textarea,
    body[data-theme="emerald"][data-emera-variant="holo"] select,
    body[data-theme="emerald"][data-emera-variant="holo"] .primary-button,
    body[data-theme="emerald"][data-emera-variant="holo"] .ghost-button,
    body[data-theme="emerald"][data-emera-variant="holo"] .toggle input + .toggle-track,
    body[data-theme="emerald"][data-emera-variant="holo"] .emera-glow-layer,
    .emera-variant-dot.is-holo {
        animation: none !important;
    }
}

/* Hide variants row when not on emerald */
body:not([data-theme="emerald"]) .emera-variants { opacity: 0.45; }

/* Hide other-theme brand mark; show only emerald gem when emerald active */
.brand-mark-emerald { display: inline-flex; align-items: center; }

/* -- Matrix rain canvas (only visible in emerald) ------------------ */
.matrix-rain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}
body[data-theme="emerald"] .matrix-rain { opacity: 0.55; }

/* Soft radial bloom layer behind UI — boosts the "neon green glow" feel. */
.emera-glow-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    background:
        radial-gradient(60% 50% at 18% 20%, rgba(16, 185, 129, 0.28), transparent 70%),
        radial-gradient(55% 45% at 82% 78%, rgba(20, 184, 166, 0.22), transparent 72%),
        radial-gradient(40% 35% at 50% 50%, rgba(110, 231, 183, 0.10), transparent 75%);
    mix-blend-mode: screen;
    filter: blur(6px);
}
body[data-theme="emerald"] .emera-glow-layer { opacity: 1; }
body[data-theme="emerald"][data-emera-variant="teal"] .emera-glow-layer {
    background:
        radial-gradient(60% 50% at 18% 20%, rgba(20, 184, 166, 0.30), transparent 70%),
        radial-gradient(55% 45% at 82% 78%, rgba(34, 211, 238, 0.26), transparent 72%),
        radial-gradient(40% 35% at 50% 50%, rgba(94, 234, 212, 0.12), transparent 75%);
}
body[data-theme="emerald"][data-emera-variant="lime"] .emera-glow-layer {
    background:
        radial-gradient(60% 50% at 18% 20%, rgba(132, 204, 22, 0.28), transparent 70%),
        radial-gradient(55% 45% at 82% 78%, rgba(250, 204, 21, 0.22), transparent 72%),
        radial-gradient(40% 35% at 50% 50%, rgba(190, 242, 100, 0.12), transparent 75%);
}
body[data-theme="emerald"][data-emera-variant="magenta"] .emera-glow-layer {
    background:
        radial-gradient(60% 50% at 18% 20%, rgba(16, 185, 129, 0.26), transparent 70%),
        radial-gradient(55% 45% at 82% 78%, rgba(244, 114, 182, 0.26), transparent 72%),
        radial-gradient(40% 35% at 50% 50%, rgba(216, 180, 254, 0.12), transparent 75%);
}
.page-shell { position: relative; z-index: 1; }
.topbar { position: relative; z-index: 6000; }

/* -- Verified bot tag (Discord-exact) ------------------------------ */
.dm-bot-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #5865f2;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    padding: 0 4.4px;
    height: 15px;
    border-radius: 4px;
    line-height: 1;
    vertical-align: top;
    margin-left: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.dm-bot-tag .dm-bot-tag-check {
    color: #fff;
    margin-right: 1px;
    margin-left: -1px;
    flex-shrink: 0;
}
.dm-bot-tag .dm-bot-tag-text { line-height: 15px; }
.dm-bot-tag-verified { background: #5865f2; }

/* -- Editor grids (form + preview on the right) -------------------- */
.welcome-editor-grid,
.panel-editor-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}
.panel-editor-shell.is-hidden { display: none !important; }
.welcome-editor-grid > .form-section,
.welcome-editor-grid > form,
.panel-editor-grid > .panel-form,
.panel-editor-grid > .panel-card,
.panel-editor-grid > .panel-editor,
.panel-editor-grid > form {
    flex: 1 1 0 !important;
    min-width: 0;
    margin-bottom: 0;
    width: auto;
}
.welcome-editor-grid > .embed-preview-pane,
.panel-editor-grid > .embed-preview-pane {
    flex: 0 0 auto !important;
    width: clamp(420px, 38vw, 540px);
    position: sticky;
    top: 12px;
    align-self: flex-start;
    z-index: 5;
}
.welcome-editor-grid .embed-preview-sticky,
.panel-editor-grid .embed-preview-sticky {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
@media (max-width: 720px) {
    .welcome-editor-grid,
    .panel-editor-grid { flex-direction: column !important; }
    .welcome-editor-grid > .embed-preview-pane,
    .panel-editor-grid > .embed-preview-pane {
        flex: 1 1 auto !important;
        width: 100%;
        position: static;
    }
}

/* -- Reaction-role panel inner sections --------------------------------- */
/* The whole panel form is wrapped in one outer .form-section card (matches
   the welcome layout). Inner .form-section blocks inside the panel form
   should appear as plain groupings — no nested card chrome. */
.panel-form > .form-section { margin-bottom: 0; }
.panel-form .rr-inner-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 18px 0 0;
    box-shadow: none;
    backdrop-filter: none;
}
.panel-form .rr-inner-section > h4 {
    margin-top: 0;
}

/* Keep Name / Target Channel / Mode on a single row */
.panel-form .rr-field-row-nowrap { flex-wrap: nowrap; }
@media (max-width: 720px) {
    .panel-form .rr-field-row-nowrap { flex-wrap: wrap; }
}

/* Required Role + Role Limit side-by-side (Required on the left) */
.panel-form .rr-side-by-side {
    display: flex;
    gap: 22px;
    align-items: stretch;
    margin-top: 18px;
}
.panel-form .rr-side-by-side > .rr-inner-section {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
}
@media (max-width: 720px) {
    .panel-form .rr-side-by-side { flex-direction: column; }
}

/* -- Webhook row --------------------------------------------------- */
.webhook-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.webhook-row input[type="text"] { flex: 1 1 320px; min-width: 240px; }

/* -- Webhook setup widget (tabs + icon upload) --------------------- */
.webhook-setup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
}
.webhook-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-soft-strong);
    border: 1px solid var(--border);
    border-radius: 10px;
    align-self: flex-start;
}
.webhook-tab-btn {
    background: transparent;
    border: 0;
    color: var(--muted);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.webhook-tab-btn:hover { color: var(--text); }
.webhook-tab-btn.active {
    background: linear-gradient(135deg, var(--accent-soft), var(--surface-soft-strong));
    color: var(--text);
    border: 1px solid var(--accent);
}
.webhook-tab-pane.hidden { display: none; }
.webhook-icon-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.webhook-icon-preview {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-soft-strong);
    border: 1px dashed var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.webhook-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.webhook-icon-clear {
    /* Match the rectangular look of the "Upload" button so the two
       sit side-by-side as visual peers (was previously a circular icon). */
    padding: 8px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.webhook-enable-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.92rem;
    color: var(--muted);
}
.webhook-enable-row .webhook-enable-state {
    color: var(--accent-strong);
    text-transform: capitalize;
}
/* ── Live preview + editable name/icon for the existing-webhook tab ── */
.webhook-existing-edit {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.webhook-existing-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}
.webhook-existing-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.webhook-existing-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.webhook-existing-name { font-weight: 600; }
.webhook-existing-name.muted-text { color: var(--muted); font-weight: 400; font-style: italic; }
.webhook-validate-status.saving { color: var(--muted); }
.webhook-validate-status.ok     { color: var(--success, #22c55e); }
.webhook-validate-status.err    { color: var(--danger, #ef4444); }
.webhook-pending-hint, .webhook-existing-pending {
    color: var(--accent-strong);
    font-style: italic;
    font-size: 0.85rem;
}
.webhook-setup-body.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.3);
}
.danger-button {
    background: transparent;
    color: #f87171;
    border: 1px solid rgba(248,113,113,0.45);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    transition: background 0.15s, color 0.15s;
}
.danger-button:hover {
    background: rgba(248,113,113,0.12);
    color: #fca5a5;
}
.form-actions-danger {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.banner-cancel-btn {
    margin-left: 8px;
}
.webhook-create-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.webhook-current-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.webhook-current-status.hidden { display: none; }
.webhook-current-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #43b581;
    box-shadow: 0 0 6px rgba(67, 181, 129, 0.6);
}
.link-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
}
.link-btn:hover { color: var(--accent-strong); }

/* -- Auto-role buckets (Welcome → Auto-Roles tab) ------------------ */
.auto-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.auto-role-bucket {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
}
.auto-role-bucket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.auto-role-bucket-head label {
    margin: 0;
    font-weight: 600;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.auto-role-counter {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-soft-strong);
    border: 1px solid var(--border);
}
.auto-role-counter.full {
    color: #fff;
    background: var(--accent-strong, #d0632c);
    border-color: var(--accent-strong, #d0632c);
}
.auto-role-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 8px;
}
.auto-role-add-btn { align-self: flex-start; }
.mod-role-stack {
    gap: 8px;
    margin-bottom: 10px;
}
.field-head-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.mod-command-quick-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.mod-command-quick {
    display: inline-flex;
}
.mod-command-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    background: var(--surface-soft-strong);
    color: var(--text);
    border-radius: 999px;
    min-width: 142px;
    min-height: 42px;
    padding: 9px 12px 9px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.mod-command-chip:hover {
    border-color: var(--accent-strong);
}
.mod-command-chip-label {
    white-space: nowrap;
}
.mod-command-chip.is-disabled {
    opacity: 0.6;
    text-decoration: line-through;
}
.mod-command-chip-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-soft-strong) 84%, var(--bg));
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.mod-command-chip-dots:hover {
    color: var(--text);
    border-color: var(--accent-strong);
}
.mod-command-action-pop {
    position: fixed;
    z-index: 1400;
    min-width: 212px;
    background: var(--surface-soft-strong);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mod-command-action-item {
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 8px 10px;
    font: inherit;
    cursor: pointer;
}
.mod-command-action-item:hover {
    background: var(--hover-soft);
}
.mod-command-action-item.is-danger {
    color: #dc2626;
}
.mod-command-action-item.is-danger:hover {
    background: rgba(220, 38, 38, 0.14);
    color: #ef4444;
}
.mod-command-editor-wrap {
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--input-bg);
}
.mod-command-editor-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.mod-command-editor-head h4 {
    margin: 0;
}
.mod-command-editor-wrap .mod-command-card,
#mod-command-card-repo .mod-command-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    background: var(--input-bg);
}
.mod-command-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.mod-command-head h4 {
    margin: 0;
}
.mod-default-dm-card {
    margin-top: 10px;
    display: grid;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft-strong);
    padding: 12px;
}
.mod-default-dm-label {
    margin: 0 0 5px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.mod-default-dm-value {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text);
}
.mod-default-dm-desc {
    white-space: pre-wrap;
}

/* Keep moderator roles compact (chip-style) instead of full-width rows. */
#mod-modroles-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#mod-modroles-stack .rr-stack-row {
    display: inline-flex;
    width: auto;
    min-width: 140px;
    max-width: 320px;
    background: var(--surface-soft-strong);
}

/* Extra contrast tuning for dark themes in moderation settings. */
body[data-theme="emerald"] .mod-command-chip,
body[data-theme="charcoal"] .mod-command-chip,
body[data-theme="rose-night"] .mod-command-chip,
body[data-theme="emerald"] .mod-command-action-pop,
body[data-theme="charcoal"] .mod-command-action-pop,
body[data-theme="rose-night"] .mod-command-action-pop,
body[data-theme="emerald"] .mod-default-dm-card,
body[data-theme="charcoal"] .mod-default-dm-card,
body[data-theme="rose-night"] .mod-default-dm-card,
body[data-theme="emerald"] #mod-modroles-stack .rr-stack-row,
body[data-theme="charcoal"] #mod-modroles-stack .rr-stack-row,
body[data-theme="rose-night"] #mod-modroles-stack .rr-stack-row {
    background: var(--surface-soft-strong);
    border-color: var(--border);
}
.auto-role-error {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(200, 60, 60, 0.1);
    border: 1px solid rgba(200, 60, 60, 0.3);
    color: #c84040;
    font-size: 0.86rem;
}
.auto-role-error.hidden { display: none; }
.welcome-protected-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.welcome-protected-role-box {
    margin-top: 10px;
}
.welcome-owner-toggle-row {
    margin-top: 14px;
}
.welcome-elevated-settings {
    margin-top: 16px;
}
.welcome-elevated-permission-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.welcome-elevated-perm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}
.welcome-elevated-perm-row input {
    margin-top: 3px;
}
.welcome-elevated-perm-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.welcome-role-whitelist-box {
    margin-top: 14px;
}
.welcome-role-whitelist-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 8px;
}
.welcome-role-whitelist-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.16);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.welcome-role-whitelist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.welcome-role-whitelist-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.welcome-role-whitelist-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.welcome-role-whitelist-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 0.85rem;
}
.welcome-role-whitelist-chip.is-on {
    border-color: rgba(102, 187, 106, 0.45);
    background: rgba(102, 187, 106, 0.14);
}
.welcome-role-whitelist-chip.is-global {
    border-color: rgba(88, 172, 255, 0.42);
    background: rgba(88, 172, 255, 0.12);
}
.welcome-role-whitelist-chip input {
    margin: 0;
}
.toggle-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.pill-tag-warn {
    background: rgba(218, 166, 60, 0.18);
    color: #d8ad44;
    border: 1px solid rgba(218, 166, 60, 0.3);
}

/* -- RR mode description ------------------------------------------- */
.rr-mode-description {
    margin-top: 6px;
    padding: 10px 14px;
    border-left: 3px solid var(--accent);
    background: var(--surface-soft);
    border-radius: 0 10px 10px 0;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.45;
}
.rr-mode-description.hidden { display: none; }
.rr-mode-description strong { color: var(--accent-strong); }

/* -- Channel picker (custom popover) ------------------------------- */
.hidden-native-select { display: none !important; }
.channel-pick { position: relative; width: 100%; }
.channel-pick-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-soft);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.channel-pick-btn:hover { border-color: var(--accent); }
.channel-pick-caret { opacity: 0.6; margin-left: 8px; }
.channel-pick-pop {
    position: fixed;
    background: var(--panel-strong);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 8px;
    min-width: 260px;
    max-width: 360px;
    max-height: 380px;
    overflow-y: auto;
    z-index: 5000;
}
.channel-pick-head { padding: 4px 4px 8px; }
.channel-pick-search {
    width: 100%;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
    color: var(--text);
}
.channel-pick-group { margin-top: 4px; }
.channel-pick-cat {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    padding: 6px 8px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.channel-pick-chev { display: inline-block; transition: transform 0.15s ease; }
.channel-pick-group.collapsed .channel-pick-chev { transform: rotate(-90deg); }
.channel-pick-rows { display: flex; flex-direction: column; gap: 1px; }
.channel-pick-row {
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.channel-pick-row:hover { background: var(--accent-soft); }
.channel-pick-row.selected { background: var(--accent-soft); color: var(--accent-strong); }
.channel-pick-icon { color: var(--muted); font-weight: 600; min-width: 14px; text-align: center; }

/* -- Global thin themed scrollbar ------------------------------------ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-soft, rgba(120,120,120,0.35)) transparent;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--accent-soft, rgba(120,120,120,0.35));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--accent, rgba(120,120,120,0.55));
    background-clip: padding-box;
    border: 2px solid transparent;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* -- Emoji picker empty state ---------------------------------------- */
.emoji-empty {
    grid-column: 1 / -1;
    color: var(--muted, #888);
    font-size: 0.85rem;
    margin: 8px 4px;
}
.emoji-empty-server {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--border, rgba(255,255,255,0.12));
}
.emoji-empty-title {
    margin: 0;
    font-weight: 600;
    color: var(--text, #f0f0f0);
    font-size: 0.95rem;
}
.emoji-empty-hint {
    margin: 0;
    color: var(--muted, #9aa0a6);
    font-size: 0.82rem;
    line-height: 1.4;
}
.emoji-empty-refresh {
    margin-top: 4px;
    background: var(--accent, #5865f2);
    color: #fff;
    border: 0;
    padding: 7px 14px;
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.emoji-empty-refresh:hover:not(:disabled) { filter: brightness(1.12); }
.emoji-empty-refresh:active:not(:disabled) { transform: translateY(1px); }
.emoji-empty-refresh:disabled { opacity: 0.6; cursor: progress; }

/* -- Toast notifications (top-right, with countdown bar) ----------------- */
.sui-toast-host {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 360px;
    width: calc(100vw - 40px);
}
.sui-toast {
    pointer-events: auto;
    position: relative;
    background: var(--panel-strong, #2b2d31);
    color: var(--text, #f5f5f5);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 12px;
    padding: 12px 14px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    cursor: pointer;
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
    font-size: 0.92rem;
    line-height: 1.35;
}
.sui-toast.sui-toast-in {
    transform: translateX(0);
    opacity: 1;
}
.sui-toast.sui-toast-out {
    transform: translateX(110%);
    opacity: 0;
}
.sui-toast-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.sui-toast-message {
    flex: 1;
    word-wrap: break-word;
}
.sui-toast-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.sui-toast-bar-fill {
    width: 100%;
    height: 100%;
    background: var(--accent-strong, #d0632c);
    transform-origin: left center;
    transform: scaleX(1);
}
.sui-toast-info  { border-left: 3px solid var(--accent-strong, #d0632c); }
.sui-toast-info  .sui-toast-bar-fill { background: var(--accent-strong, #d0632c); }
.sui-toast-success { border-left: 3px solid #57f287; }
.sui-toast-success .sui-toast-bar-fill { background: #57f287; }
.sui-toast-warn  { border-left: 3px solid #f0b132; }
.sui-toast-warn  .sui-toast-bar-fill { background: #f0b132; }
.sui-toast-error { border-left: 3px solid #ed4245; }
.sui-toast-error .sui-toast-bar-fill { background: #ed4245; }

/* Reaction-roles: invalid mode/count highlight (warn-only) */
.rr-mode-invalid {
    border-color: #f0b132 !important;
    box-shadow: 0 0 0 1px rgba(240, 177, 50, 0.45);
}

/* ── Confirm modal (Discord-style) ──────────────────────────────────── */
.sui-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.18s ease;
    padding: 20px;
}
.sui-modal-overlay.sui-modal-in  { opacity: 1; }
.sui-modal-overlay.sui-modal-out { opacity: 0; }
.sui-modal {
    position: relative;
    background: var(--panel, #2b2d31);
    color: var(--text, #f5f5f5);
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    border-radius: 14px;
    padding: 24px 24px 20px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sui-modal-overlay.sui-modal-in .sui-modal { transform: translateY(0) scale(1); }
.sui-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: 0;
    color: var(--muted, #b5bac1);
    font-size: 1.5rem;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sui-modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.sui-modal-title {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
    padding-right: 32px;
}
.sui-modal-body {
    color: var(--muted, #b5bac1);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 22px;
}
.sui-modal-body strong { color: var(--text, #fff); font-weight: 600; }
.sui-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.sui-modal-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: 0;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.08s ease;
    min-width: 96px;
}
.sui-modal-btn:active { transform: translateY(1px); }
.sui-modal-cancel {
    background: transparent;
    color: var(--text, #f5f5f5);
}
.sui-modal-cancel:hover { background: rgba(255,255,255,0.06); }
.sui-modal-confirm {
    background: var(--accent, #5865f2);
    color: #fff;
}
.sui-modal-confirm:hover { filter: brightness(1.1); }
.sui-modal-confirm.is-danger {
    background: #da373c;
}
.sui-modal-confirm.is-danger:hover { background: #b3262a; }
@media (max-width: 480px) {
    .sui-modal { padding: 20px 18px 16px; }
    .sui-modal-actions { flex-direction: column-reverse; }
    .sui-modal-btn { width: 100%; }
}

.me-shell {
    align-items: flex-start;
}

.me-sidebar .sidebar-link {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
}

.me-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.me-theme-option {
    justify-content: center;
    padding: 12px 14px;
}

.compact-form {
    margin-top: 12px;
}

/* Inline callouts (used on Voice setup state notice). */
.callout {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    padding: 10px 12px;
    margin: 8px 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-size: 13.5px;
}
.callout.callout-ok {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.10);
}
.callout.callout-warn {
    border-color: rgba(244, 162, 97, 0.55);
    background: rgba(244, 162, 97, 0.12);
}
.callout strong { font-weight: 600; }
.callout code {
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
}

/* Chip-style user picker (used on /dashboard/me voice forms) */
.chip-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 44px;
    padding: 6px 8px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    background: var(--surface-color, rgba(0, 0, 0, 0.25));
}
.chip-picker .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 4px;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 999px;
    font-size: 13px;
    color: inherit;
    max-width: 220px;
}
.chip-picker .chip.loading {
    opacity: 0.6;
}
.chip-picker .chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08) center/cover no-repeat;
    flex: 0 0 auto;
}
.chip-picker .chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.chip-picker .chip-remove {
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
}
.chip-picker .chip-remove:hover {
    opacity: 1;
}
.chip-picker .chip-input-wrap {
    flex: 1 1 140px;
    display: inline-flex;
    min-width: 140px;
}
.chip-picker .chip-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 4px 6px;
}
/* -- Elevated permissions section ------------------------------------- */
.elevated-tabs { display:flex; gap:8px; margin:16px 0 12px; flex-wrap:wrap; }
.elevated-tab {
  background:var(--card-2,#1f2230); color:var(--text,#e7e9ee); border:1px solid var(--border,#2c2f3d);
  padding:8px 16px; border-radius:8px; cursor:pointer; font-weight:600; font-size:14px;
  transition:background .15s, border-color .15s;
}
.elevated-tab:hover { border-color:var(--accent,#5865f2); }
.elevated-tab.active { background:var(--accent,#5865f2); color:#fff; border-color:var(--accent,#5865f2); }
.elevated-panel.hidden { display:none; }
.elevated-card {
  background:var(--card-1,#181a24); border:1px solid var(--border,#2c2f3d);
  border-radius:10px; padding:16px; margin-bottom:14px;
}
.elevated-card-head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:10px;
}
.elevated-card-head h4 { margin:0 0 4px; font-size:15px; }
.elevated-bulk-actions { display:flex; gap:6px; flex-shrink:0; }
.elevated-perm-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px 12px;
}

/* Permission toggle pill — clear ON/OFF state across themes */
.elevated-perm-toggle {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px;
  background:rgba(120,120,140,0.08);
  border:1px solid rgba(120,120,140,0.22);
  cursor:pointer; user-select:none;
  font-size:13px; font-weight:500;
  transition:background .15s, border-color .15s, color .15s;
}
.elevated-perm-toggle:hover { border-color:var(--accent,#5865f2); }
.elevated-perm-toggle input { display:none; }
.elevated-perm-toggle .elevated-perm-dot {
  width:10px; height:10px; border-radius:50%;
  background:#9aa0b3; flex-shrink:0;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);
  transition:background .15s, box-shadow .15s;
}
.elevated-perm-toggle .elevated-perm-label { flex:1; min-width:0; }
.elevated-perm-toggle .elevated-perm-state {
  font-size:10px; font-weight:700; letter-spacing:.06em;
  padding:2px 8px; border-radius:10px;
  background:rgba(120,120,140,0.22); color:#9aa0b3;
  text-transform:uppercase;
}
.elevated-perm-toggle .elevated-perm-state::before { content:"OFF"; }
.elevated-perm-toggle.is-on {
  background:rgba(88,101,242,.18);
  border-color:var(--accent,#5865f2);
  color:var(--accent-text,#fff);
}
.elevated-perm-toggle.is-on .elevated-perm-dot {
  background:#57f287;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), 0 0 0 3px rgba(87,242,135,.18);
}
.elevated-perm-toggle.is-on .elevated-perm-state {
  background:rgba(87,242,135,.22); color:#57f287;
}
.elevated-perm-toggle.is-on .elevated-perm-state::before { content:"ON"; }
.elevated-perm-toggle:has(input:disabled) { opacity:.6; cursor:not-allowed; }
.elevated-target-list { display:flex; flex-direction:column; gap:10px; }
.elevated-target-card {
  background:var(--card-2,#1f2230); border:1px solid var(--border,#2c2f3d);
  border-radius:8px; padding:12px;
}
.elevated-target-head {
  display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px;
}
.elevated-target-title { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.elevated-target-title strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.elevated-target-actions { display:flex; gap:6px; flex-shrink:0; }
.elevated-avatar {
  width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.elevated-avatar-fallback { background:var(--card-1,#181a24); display:inline-block; }
.elevated-chip-grid {
  display:flex; flex-wrap:wrap; gap:6px;
}
.elevated-chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:14px;
  background:var(--card-1,#181a24); border:1px solid var(--border,#2c2f3d); cursor:pointer;
  font-size:12px; transition:background .12s, border-color .12s;
}
.elevated-chip:hover { border-color:var(--accent,#5865f2); }
.elevated-chip input { display:none; }
.elevated-chip.is-on { background:rgba(88,101,242,.18); border-color:var(--accent,#5865f2); color:var(--accent-text,#fff); }
.elevated-picker-search {
  width:100%; padding:8px 12px; border-radius:6px; background:var(--card-1,#181a24);
  border:1px solid var(--border,#2c2f3d); color:var(--text,#e7e9ee); margin-bottom:10px;
}
.elevated-picker-results {
  max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;
}
.elevated-picker-row {
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px;
  background:transparent; border:1px solid transparent; cursor:pointer; text-align:left;
  color:var(--text,#e7e9ee); width:100%;
}
.elevated-picker-row:hover { background:rgba(255,255,255,.05); border-color:var(--border,#2c2f3d); }
.elevated-picker-label { flex:1; font-weight:500; }
.role-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ============================================================
 * Phase: Theme catalog, profile dropdown, AFK editor, Admin
 * ============================================================ */

/* -- Pinkwhiskey theme ------------------------------------------------
   "soft ♡ lovely ♡ sfw ─ only sweet things here"
   Holographic panels, kawaii drifting clouds at the top, and a swaying
   field of pink/yellow flowers along the bottom. ------------------- */
html[data-theme="pinkwhiskey"] { background-color: #ffb1f7; }
body[data-theme="pinkwhiskey"] {
  --bg:                 #ffb1f7;
  --bg-strong:          #ff8fe8;
  --bg-soft:            #ffd6f9;
  --panel:              rgba(255, 255, 255, 0.92);
  --panel-strong:       #ffffff;
  --card-1:             #ffffff;
  --card-2:             #ffe4f7;
  --border:             rgba(172, 0, 100, 0.22);
  --text:               #3a0a30;
  --text-muted:         #7a3568;
  --muted:              #7a3568;
  --accent:             #ff34b1;
  --accent-strong:      #ac0072;
  --accent-text:        #ffffff;
  --accent-soft:        rgba(255, 177, 247, 0.42);
  --mention-channel-bg:   rgba(255, 52, 177, 0.14);
  --mention-channel-text: #ac0072;
  --mention-role-bg:      rgba(167, 95, 220, 0.16);
  --mention-role-text:    #6b2a9a;
  --mention-user-bg:      rgba(112, 180, 230, 0.20);
  --mention-user-text:    #1e5a82;
  --surface-soft:         rgba(255, 245, 252, 0.85);
  --surface-soft-strong:  rgba(255, 248, 253, 0.94);
  --button-ghost-bg:      rgba(255, 232, 250, 0.95);
  --button-ghost-text:    #3a0a30;
  --button-ghost-border:  rgba(172, 0, 100, 0.32);
  --shadow:               0 22px 60px rgba(160, 0, 110, 0.22);
  --radius:               20px;

  /* clean cloudy/pastel blue petal-rain palette */
  --rain-head:   #ffffff;
  --rain-trail:  rgba(207, 228, 255, 0.95);
  --rain-gem-a:  #cfe4ff;
  --rain-gem-b:  #ffffff;
  --rain-fade:   rgba(220, 140, 200, 0.16);
  --rain-glow:   #e6f0ff;
  --rain-glyphs: "♡✿❀✾❁❃·•✦✧❄";
  --rain-gems:   "✿❀❁♡✦";
  --rain-speed:  0.35;
  --overlay-bg: var(--panel-strong);
  --input-bg: var(--surface-soft);
  --input-bg-strong: var(--surface-soft-strong);

  /* Soft cotton-candy gradient background — bright bubblegum pink */
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 156, 232, 0.55), transparent 46%),
    radial-gradient(circle at 82% 78%, rgba(255, 199, 240, 0.50), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 218, 247, 0.40), transparent 60%),
    linear-gradient(180deg, #ffc6f7 0%, #ffb1f7 55%, #ff9be4 100%);
  background-size: 220% 220%, 220% 220%, 220% 220%, 100% 100%;
  background-attachment: fixed;
  animation: pw-bg-drift 60s ease-in-out infinite;
}
@keyframes pw-bg-drift {
  0%   { background-position:   0%   0%, 100% 100%, 50% 50%, 0 0; }
  50%  { background-position: 100% 100%,   0%   0%, 60% 40%, 0 0; }
  100% { background-position:   0%   0%, 100% 100%, 50% 50%, 0 0; }
}

/* Soft inner bloom layer behind UI */
body[data-theme="pinkwhiskey"]::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 30% at 25% 18%, rgba(255, 255, 255, 0.32), transparent 70%),
    radial-gradient(38% 32% at 78% 30%, rgba(255, 230, 250, 0.40), transparent 70%),
    radial-gradient(45% 35% at 50% 80%, rgba(255, 207, 240, 0.34), transparent 70%);
  background-size: 220% 220%;
  animation: pw-bloom-shift 38s ease-in-out infinite alternate;
  filter: blur(2px);
}
@keyframes pw-bloom-shift {
  0%   { background-position:   0% 0%, 100% 100%, 50% 50%; }
  100% { background-position: 100% 100%,   0%   0%, 50% 50%; }
}

/* ── Field of flowers along the bottom ───────────────────────────────
   Each flower is its own SVG <g> with an embedded <animateTransform>
   so it sways independently — like grass in a gentle breeze. The whole
   strip also drifts left for parallax. Pink + yellow + cream palette. */
body[data-theme="pinkwhiskey"]::after {
  content: "";
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 240px;
  pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 240' preserveAspectRatio='xMidYMax slice'><defs><radialGradient id='c1' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23fff7c2'/><stop offset='100%25' stop-color='%23ffe066'/></radialGradient><radialGradient id='c2' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%23ffb1f7'/></radialGradient><radialGradient id='c3' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23ffe7f8'/><stop offset='100%25' stop-color='%23ff7cdb'/></radialGradient><radialGradient id='c4' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23fff5d6'/><stop offset='100%25' stop-color='%23ffc57c'/></radialGradient></defs><g><g transform='translate(40 240)'><animateTransform attributeName='transform' type='rotate' values='-5;5;-5' dur='4.2s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q-2 -50 4 -110' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><g transform='translate(4 -110)'><circle cx='-10' cy='-2' r='10' fill='url(%23c2)'/><circle cx='10' cy='-2' r='10' fill='url(%23c2)'/><circle cx='-7' cy='-14' r='10' fill='url(%23c2)'/><circle cx='7' cy='-14' r='10' fill='url(%23c2)'/><circle cx='0' cy='-20' r='10' fill='url(%23c2)'/><circle cx='0' cy='-8' r='5' fill='url(%23c1)'/></g></g><g transform='translate(110 240)'><animateTransform attributeName='transform' type='rotate' values='4;-4;4' dur='5s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q3 -55 -2 -120' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M-2 -118 q-12 -8 -18 -2 q-2 8 4 12 q-10 4 -8 12 q4 6 14 4 q-4 8 4 12 q10 -2 10 -10 q10 6 14 -2 q-2 -8 -10 -10 q12 -6 8 -14 q-8 -4 -16 0 q4 -8 -4 -12 z' fill='%23ffb1f7'/><circle cx='-2' cy='-118' r='5' fill='url(%23c1)'/></g><g transform='translate(180 240)'><animateTransform attributeName='transform' type='rotate' values='-3;6;-3' dur='4.6s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q-3 -45 0 -100' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><g transform='translate(0 -100)'><circle cx='-9' cy='-2' r='9' fill='url(%23c4)'/><circle cx='9' cy='-2' r='9' fill='url(%23c4)'/><circle cx='-6' cy='-12' r='9' fill='url(%23c4)'/><circle cx='6' cy='-12' r='9' fill='url(%23c4)'/><circle cx='0' cy='-18' r='9' fill='url(%23c4)'/><circle cx='0' cy='-7' r='4.5' fill='%23ffae3a'/></g></g><g transform='translate(250 240)'><animateTransform attributeName='transform' type='rotate' values='5;-5;5' dur='3.8s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q2 -60 -3 -130' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><g transform='translate(-3 -130)'><circle cx='-11' cy='-3' r='11' fill='url(%23c3)'/><circle cx='11' cy='-3' r='11' fill='url(%23c3)'/><circle cx='-8' cy='-15' r='11' fill='url(%23c3)'/><circle cx='8' cy='-15' r='11' fill='url(%23c3)'/><circle cx='0' cy='-22' r='11' fill='url(%23c3)'/><circle cx='0' cy='-9' r='5' fill='url(%23c1)'/></g></g><g transform='translate(320 240)'><animateTransform attributeName='transform' type='rotate' values='-4;4;-4' dur='5.4s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q-2 -50 3 -108' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><g transform='translate(3 -108)'><circle cx='-9' cy='-2' r='9' fill='url(%23c2)'/><circle cx='9' cy='-2' r='9' fill='url(%23c2)'/><circle cx='-6' cy='-12' r='9' fill='url(%23c2)'/><circle cx='6' cy='-12' r='9' fill='url(%23c2)'/><circle cx='0' cy='-18' r='9' fill='url(%23c2)'/><circle cx='0' cy='-7' r='4.5' fill='url(%23c1)'/></g></g><g transform='translate(390 240)'><animateTransform attributeName='transform' type='rotate' values='6;-2;6' dur='4.4s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q4 -55 0 -118' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M0 -116 q-12 -8 -18 -2 q-2 8 4 12 q-10 4 -8 12 q4 6 14 4 q-4 8 4 12 q10 -2 10 -10 q10 6 14 -2 q-2 -8 -10 -10 q12 -6 8 -14 q-8 -4 -16 0 q4 -8 -4 -12 z' fill='%23fff7c2'/><circle cx='0' cy='-116' r='5' fill='%23ffae3a'/></g><g transform='translate(460 240)'><animateTransform attributeName='transform' type='rotate' values='-5;3;-5' dur='4.8s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q-2 -52 4 -114' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><g transform='translate(4 -114)'><circle cx='-10' cy='-2' r='10' fill='url(%23c3)'/><circle cx='10' cy='-2' r='10' fill='url(%23c3)'/><circle cx='-7' cy='-14' r='10' fill='url(%23c3)'/><circle cx='7' cy='-14' r='10' fill='url(%23c3)'/><circle cx='0' cy='-20' r='10' fill='url(%23c3)'/><circle cx='0' cy='-8' r='5' fill='url(%23c1)'/></g></g><g transform='translate(530 240)'><animateTransform attributeName='transform' type='rotate' values='4;-6;4' dur='4.0s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q3 -48 -2 -105' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><g transform='translate(-2 -105)'><circle cx='-9' cy='-2' r='9' fill='url(%23c4)'/><circle cx='9' cy='-2' r='9' fill='url(%23c4)'/><circle cx='-6' cy='-12' r='9' fill='url(%23c4)'/><circle cx='6' cy='-12' r='9' fill='url(%23c4)'/><circle cx='0' cy='-18' r='9' fill='url(%23c4)'/><circle cx='0' cy='-7' r='4.5' fill='%23ffae3a'/></g></g><g transform='translate(600 240)'><animateTransform attributeName='transform' type='rotate' values='-3;5;-3' dur='5.2s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q-3 -56 2 -124' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><g transform='translate(2 -124)'><circle cx='-11' cy='-3' r='11' fill='url(%23c2)'/><circle cx='11' cy='-3' r='11' fill='url(%23c2)'/><circle cx='-8' cy='-15' r='11' fill='url(%23c2)'/><circle cx='8' cy='-15' r='11' fill='url(%23c2)'/><circle cx='0' cy='-22' r='11' fill='url(%23c2)'/><circle cx='0' cy='-9' r='5' fill='url(%23c1)'/></g></g><g transform='translate(670 240)'><animateTransform attributeName='transform' type='rotate' values='5;-4;5' dur='4.6s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q3 -50 -2 -112' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M-2 -110 q-12 -8 -18 -2 q-2 8 4 12 q-10 4 -8 12 q4 6 14 4 q-4 8 4 12 q10 -2 10 -10 q10 6 14 -2 q-2 -8 -10 -10 q12 -6 8 -14 q-8 -4 -16 0 q4 -8 -4 -12 z' fill='%23ff7cdb'/><circle cx='-2' cy='-110' r='5' fill='url(%23c1)'/></g><g transform='translate(740 240)'><animateTransform attributeName='transform' type='rotate' values='-6;3;-6' dur='4.4s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q-2 -54 3 -118' stroke='%2360b070' stroke-width='3' fill='none' stroke-linecap='round'/><g transform='translate(3 -118)'><circle cx='-10' cy='-2' r='10' fill='url(%23c3)'/><circle cx='10' cy='-2' r='10' fill='url(%23c3)'/><circle cx='-7' cy='-14' r='10' fill='url(%23c3)'/><circle cx='7' cy='-14' r='10' fill='url(%23c3)'/><circle cx='0' cy='-20' r='10' fill='url(%23c3)'/><circle cx='0' cy='-8' r='5' fill='url(%23c1)'/></g></g><g transform='translate(75 240)'><animateTransform attributeName='transform' type='rotate' values='3;-3;3' dur='5.6s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q1 -32 -2 -70' stroke='%2360b070' stroke-width='2.5' fill='none' stroke-linecap='round'/><g transform='translate(-2 -70)'><circle cx='-6' cy='-2' r='6' fill='url(%23c1)'/><circle cx='6' cy='-2' r='6' fill='url(%23c1)'/><circle cx='0' cy='-9' r='6' fill='url(%23c1)'/><circle cx='0' cy='-4' r='3' fill='%23ffae3a'/></g></g><g transform='translate(215 240)'><animateTransform attributeName='transform' type='rotate' values='-4;4;-4' dur='5.0s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q-1 -36 2 -76' stroke='%2360b070' stroke-width='2.5' fill='none' stroke-linecap='round'/><g transform='translate(2 -76)'><circle cx='-6' cy='-2' r='6' fill='url(%23c2)'/><circle cx='6' cy='-2' r='6' fill='url(%23c2)'/><circle cx='0' cy='-9' r='6' fill='url(%23c2)'/><circle cx='0' cy='-4' r='3' fill='url(%23c1)'/></g></g><g transform='translate(355 240)'><animateTransform attributeName='transform' type='rotate' values='4;-4;4' dur='5.4s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q1 -34 -2 -72' stroke='%2360b070' stroke-width='2.5' fill='none' stroke-linecap='round'/><g transform='translate(-2 -72)'><circle cx='-6' cy='-2' r='6' fill='url(%23c3)'/><circle cx='6' cy='-2' r='6' fill='url(%23c3)'/><circle cx='0' cy='-9' r='6' fill='url(%23c3)'/><circle cx='0' cy='-4' r='3' fill='url(%23c1)'/></g></g><g transform='translate(495 240)'><animateTransform attributeName='transform' type='rotate' values='-3;5;-3' dur='4.8s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q-1 -38 2 -78' stroke='%2360b070' stroke-width='2.5' fill='none' stroke-linecap='round'/><g transform='translate(2 -78)'><circle cx='-6' cy='-2' r='6' fill='url(%23c4)'/><circle cx='6' cy='-2' r='6' fill='url(%23c4)'/><circle cx='0' cy='-9' r='6' fill='url(%23c4)'/><circle cx='0' cy='-4' r='3' fill='%23ffae3a'/></g></g><g transform='translate(635 240)'><animateTransform attributeName='transform' type='rotate' values='5;-3;5' dur='5.2s' repeatCount='indefinite' additive='sum'/><path d='M0 0 Q1 -36 -2 -74' stroke='%2360b070' stroke-width='2.5' fill='none' stroke-linecap='round'/><g transform='translate(-2 -74)'><circle cx='-6' cy='-2' r='6' fill='url(%23c1)'/><circle cx='6' cy='-2' r='6' fill='url(%23c1)'/><circle cx='0' cy='-9' r='6' fill='url(%23c1)'/><circle cx='0' cy='-4' r='3' fill='%23ffae3a'/></g></g></g></svg>");
  background-repeat: repeat-x;
  background-size: 800px 240px;
  background-position: 0 100%;
  animation: pw-field-drift 120s linear infinite;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to top, black 80%, transparent);
          mask-image: linear-gradient(to top, black 80%, transparent);
}
@keyframes pw-field-drift {
  from { background-position: 0 100%; }
  to   { background-position: -800px 100%; }
}

/* Lift the page content above background layers (canvas + ::before/::after) */
body[data-theme="pinkwhiskey"] .page-shell { position: relative; z-index: 2; }
body[data-theme="pinkwhiskey"] .matrix-rain-full { opacity: 0.85; z-index: 1; }

/* ── Aesthetic kawaii cloud band along the top ───────────────────────
   Two parallax layers: bigger frontside clouds + smaller, softer back
   clouds. Each cloud is a stack of fluffy circles with a soft-pink
   shadow underline and a small white highlight for that cute look. */
body[data-theme="pinkwhiskey"] .emera-glow-layer {
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
  background:
    /* Front layer: bright fluffy clouds */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 260' preserveAspectRatio='xMidYMin slice'><defs><filter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'><feGaussianBlur in='SourceAlpha' stdDeviation='3'/><feOffset dy='4'/><feComponentTransfer><feFuncA type='linear' slope='0.35'/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></defs><g filter='url(%23s)'><g transform='translate(110 90)'><ellipse cx='-44' cy='14' rx='32' ry='20' fill='%23ffe9f6'/><ellipse cx='42' cy='14' rx='34' ry='22' fill='%23ffe9f6'/><ellipse cx='-22' cy='2' rx='30' ry='24' fill='%23ffffff'/><ellipse cx='10' cy='-4' rx='34' ry='28' fill='%23ffffff'/><ellipse cx='34' cy='-2' rx='28' ry='22' fill='%23ffffff'/><ellipse cx='-46' cy='6' rx='24' ry='18' fill='%23ffffff'/><ellipse cx='-8' cy='-14' rx='22' ry='14' fill='%23fff7fc'/></g><g transform='translate(330 60)'><ellipse cx='-58' cy='18' rx='40' ry='24' fill='%23ffe9f6'/><ellipse cx='52' cy='18' rx='42' ry='26' fill='%23ffe9f6'/><ellipse cx='-26' cy='4' rx='36' ry='28' fill='%23ffffff'/><ellipse cx='14' cy='-4' rx='42' ry='34' fill='%23ffffff'/><ellipse cx='44' cy='0' rx='34' ry='26' fill='%23ffffff'/><ellipse cx='-58' cy='8' rx='28' ry='20' fill='%23ffffff'/><ellipse cx='-10' cy='-18' rx='26' ry='16' fill='%23fff7fc'/><ellipse cx='8' cy='-22' rx='14' ry='8' fill='%23ffffff' opacity='0.8'/></g><g transform='translate(560 100)'><ellipse cx='-40' cy='14' rx='28' ry='18' fill='%23ffe9f6'/><ellipse cx='40' cy='14' rx='30' ry='20' fill='%23ffe9f6'/><ellipse cx='-18' cy='2' rx='28' ry='22' fill='%23ffffff'/><ellipse cx='12' cy='-4' rx='32' ry='26' fill='%23ffffff'/><ellipse cx='34' cy='-2' rx='26' ry='20' fill='%23ffffff'/><ellipse cx='-42' cy='6' rx='22' ry='16' fill='%23ffffff'/><ellipse cx='-6' cy='-14' rx='20' ry='12' fill='%23fff7fc'/></g><g transform='translate(770 70)'><ellipse cx='-50' cy='16' rx='34' ry='22' fill='%23ffe9f6'/><ellipse cx='48' cy='16' rx='38' ry='24' fill='%23ffe9f6'/><ellipse cx='-22' cy='4' rx='32' ry='26' fill='%23ffffff'/><ellipse cx='14' cy='-4' rx='38' ry='30' fill='%23ffffff'/><ellipse cx='40' cy='-2' rx='30' ry='22' fill='%23ffffff'/><ellipse cx='-52' cy='8' rx='24' ry='18' fill='%23ffffff'/><ellipse cx='-8' cy='-16' rx='22' ry='14' fill='%23fff7fc'/></g></g></svg>"),
    /* Back layer: smaller, softer/translucent clouds for depth */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 260' preserveAspectRatio='xMidYMin slice'><g opacity='0.55'><g transform='translate(80 150)'><ellipse cx='-26' cy='8' rx='20' ry='12' fill='%23ffffff'/><ellipse cx='28' cy='8' rx='22' ry='14' fill='%23ffffff'/><ellipse cx='-10' cy='0' rx='20' ry='16' fill='%23ffffff'/><ellipse cx='12' cy='-4' rx='24' ry='18' fill='%23ffffff'/><ellipse cx='-6' cy='-10' rx='14' ry='9' fill='%23ffffff'/></g><g transform='translate(260 130)'><ellipse cx='-32' cy='10' rx='24' ry='14' fill='%23ffffff'/><ellipse cx='32' cy='10' rx='26' ry='16' fill='%23ffffff'/><ellipse cx='-12' cy='2' rx='22' ry='18' fill='%23ffffff'/><ellipse cx='14' cy='-4' rx='28' ry='20' fill='%23ffffff'/><ellipse cx='-8' cy='-12' rx='16' ry='10' fill='%23ffffff'/></g><g transform='translate(450 170)'><ellipse cx='-26' cy='8' rx='20' ry='12' fill='%23ffffff'/><ellipse cx='28' cy='8' rx='22' ry='14' fill='%23ffffff'/><ellipse cx='-10' cy='0' rx='20' ry='16' fill='%23ffffff'/><ellipse cx='12' cy='-4' rx='24' ry='18' fill='%23ffffff'/><ellipse cx='-6' cy='-10' rx='14' ry='9' fill='%23ffffff'/></g><g transform='translate(620 140)'><ellipse cx='-30' cy='10' rx='22' ry='14' fill='%23ffffff'/><ellipse cx='30' cy='10' rx='24' ry='15' fill='%23ffffff'/><ellipse cx='-12' cy='2' rx='22' ry='17' fill='%23ffffff'/><ellipse cx='14' cy='-4' rx='26' ry='19' fill='%23ffffff'/><ellipse cx='-8' cy='-12' rx='15' ry='10' fill='%23ffffff'/></g></g></svg>");
  background-repeat: repeat-x, repeat-x;
  background-size: 900px 260px, 700px 260px;
  background-position: 0 0, 0 24px;
  /* Show only the top band, fade out softly downward */
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent);
          mask-image: linear-gradient(to bottom, black 65%, transparent);
  height: 260px;
  inset: 0 0 auto 0;
  z-index: 1;
  animation: pw-cloud-drift-front 180s linear infinite,
             pw-cloud-drift-back  300s linear infinite;
}
@keyframes pw-cloud-drift-front {
  from { background-position:    0px 0,  0px 24px; }
  to   { background-position: -900px 0,  0px 24px; }
}
@keyframes pw-cloud-drift-back {
  from { background-position:    0px 0,    0px 24px; }
  to   { background-position:    0px 0, -700px 24px; }
}

/* Holographic gradient palette — used for panels, buttons, etc.
   Original 16 user-supplied stops are kept exactly; 2 linearly-
   interpolated colors are inserted between every adjacent pair
   (plus 2 wrap-around stops at the end) for a glass-smooth sweep. */
body[data-theme="pinkwhiskey"] {
  --pw-holo: linear-gradient(115deg,
    #ffc57c 0.000%,
    #f9d87c 2.083%,
    #f4eb7c 4.167%,
    #eeff7c 6.250%,
    #d1ff7c 8.333%,
    #b5ff7c 10.417%,
    #98ff7c 12.500%,
    #8fff7d 14.583%,
    #85ff7f 16.667%,
    #7cff80 18.750%,
    #7cff8b 20.833%,
    #7cff95 22.917%,
    #7cffa0 25.000%,
    #7cffb4 27.083%,
    #7cffc9 29.167%,
    #7cffdd 31.250%,
    #7ce6e8 33.333%,
    #7cccf4 35.417%,
    #7cb3ff 37.500%,
    #7ca2ff 39.583%,
    #7c92ff 41.667%,
    #7c81ff 43.750%,
    #827fff 45.833%,
    #877eff 47.917%,
    #8d7cff 50.000%,
    #997cff 52.083%,
    #a47cff 54.167%,
    #b07cff 56.250%,
    #b97cff 58.333%,
    #c17cff 60.417%,
    #ca7cff 62.500%,
    #d77cff 64.583%,
    #e47cff 66.667%,
    #f17cff 68.750%,
    #f67cf3 70.833%,
    #fa7ce7 72.917%,
    #ff7cdb 75.000%,
    #ff7cd0 77.083%,
    #ff7cc6 79.167%,
    #ff7cbb 81.250%,
    #ff7cb1 83.333%,
    #ff7ca8 85.417%,
    #ff7c9e 87.500%,
    #ff7c93 89.583%,
    #ff7c89 91.667%,
    #ff7c7e 93.750%,
    #ff947d 95.833%,
    #ffad7d 97.917%,
    #ffc57c 100.000%);
}

/* Panels: holographic surface with subtle white inner overlay for legibility */
body[data-theme="pinkwhiskey"] .form-section,
body[data-theme="pinkwhiskey"] .panel-card {
  background:
    linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)) padding-box,
    var(--pw-holo) border-box;
  background-size: auto, 400% 100%;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 12px 36px rgba(120, 0, 70, 0.18);
  animation: pw-holo-shift 40s linear infinite;
  position: relative;
}
/* Holographic sheen overlay on top of the white-tinted panel surface */
body[data-theme="pinkwhiskey"] .form-section::before,
body[data-theme="pinkwhiskey"] .panel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--pw-holo);
  background-size: 400% 100%;
  opacity: 0.32;
  mix-blend-mode: screen;
  animation: pw-holo-shift 40s linear infinite;
}

/* ── Log date filter (button + popover) ─────────────────────────────── */
.log-date-filter { display: flex; align-items: center; }
.log-date-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    max-width: 100%;
}
.log-date-filter.has-value .log-date-btn {
    border-color: var(--accent-strong);
    color: var(--accent-strong);
}
.log-date-icon { font-size: 1rem; line-height: 1; }
.log-date-label { overflow: hidden; text-overflow: ellipsis; }

.log-date-popover {
    position: absolute;
    z-index: 1320;
    background: var(--overlay-bg);
    border: 1px solid var(--overlay-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text);
    font-size: 0.88rem;
}
.log-date-popover.hidden { display: none; }
.log-date-pop-header {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.log-date-pop-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.log-date-mode-btn {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.log-date-mode-btn:hover { background: var(--input-bg-strong); }
.log-date-mode-btn.active {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #fff;
}
.log-date-pop-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.log-date-pop-row.hidden { display: none; }
.log-date-pop-row label {
    flex: 0 0 48px;
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.log-date-pop-row input {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
}
.log-date-pop-row input:focus {
    outline: none;
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.18);
}
.log-date-pop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}
/* Light-up native picker indicators in darker themes. */
body[data-theme="charcoal"] .log-date-pop-row input::-webkit-calendar-picker-indicator,
body[data-theme="charcoal"] .log-date-pop-row input::-webkit-clear-button,
body[data-theme="rose-night"] .log-date-pop-row input::-webkit-calendar-picker-indicator,
body[data-theme="rose-night"] .log-date-pop-row input::-webkit-clear-button,
body[data-theme="emerald"] .log-date-pop-row input::-webkit-calendar-picker-indicator,
body[data-theme="emerald"] .log-date-pop-row input::-webkit-clear-button {
    filter: invert(1);
}
/* Keep all real content above the sheen overlay */
body[data-theme="pinkwhiskey"] .form-section > *,
body[data-theme="pinkwhiskey"] .panel-card > * {
  position: relative;
  z-index: 1;
}
@keyframes pw-holo-shift {
  0%   { background-position: 0 0,   0% 50%; }
  100% { background-position: 0 0, 400% 50%; }
}
/* For the ::before overlay there's no padding-box layer */
@keyframes pw-holo-shift-overlay {
  0%   { background-position:   0% 50%; }
  100% { background-position: 400% 50%; }
}
body[data-theme="pinkwhiskey"] .form-section::before,
body[data-theme="pinkwhiskey"] .panel-card::before {
  animation-name: pw-holo-shift-overlay;
}

/* Headings — pretty gradient text (skip h-tags inside emera dot dropdown) */
body[data-theme="pinkwhiskey"] h1,
body[data-theme="pinkwhiskey"] h2 {
  background: linear-gradient(90deg, #ac0039, #ff34b1 50%, #c66bd9);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(255, 52, 177, 0.10);
}

/* Primary button — full holographic sweep */
body[data-theme="pinkwhiskey"] .primary-button {
  background: var(--pw-holo);
  background-size: 400% 100%;
  color: #2a0418;
  font-weight: 700;
  border: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 22px rgba(120, 0, 70, 0.28),
              inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  animation: pw-holo-shift-overlay 28s linear infinite;
  transition: transform .15s ease, box-shadow .18s ease;
}
body[data-theme="pinkwhiskey"] .primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(120, 0, 70, 0.34),
              inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
@keyframes pw-btn-sweep {
  0%   { background-position:   0% 0%; }
  100% { background-position: 240% 0%; }
}

/* Ghost button — holographic border on a soft surface */
body[data-theme="pinkwhiskey"] .ghost-button {
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) padding-box,
    var(--pw-holo) border-box;
  background-size: auto, 400% 100%;
  border: 1px solid transparent;
  color: var(--button-ghost-text);
  animation: pw-holo-shift 36s linear infinite;
}

/* Save banner — full holographic sweep */
body[data-theme="pinkwhiskey"] .save-banner {
  background: var(--pw-holo);
  background-size: 400% 100%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #2a0418;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
  animation: pw-holo-shift-overlay 36s linear infinite;
}

/* Selection */
body[data-theme="pinkwhiskey"] ::selection      { background: rgba(255, 52, 177, 0.32); color: #2a0418; }
body[data-theme="pinkwhiskey"] ::-moz-selection { background: rgba(255, 52, 177, 0.32); color: #2a0418; }

/* Toggle track — holographic when checked */
body[data-theme="pinkwhiskey"] .toggle input:checked + .toggle-track {
  background: var(--pw-holo);
  background-size: 400% 100%;
  animation: pw-holo-shift-overlay 22s linear infinite;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
}

/* Native select dropdown options stay readable on light bg */
body[data-theme="pinkwhiskey"] select option,
body[data-theme="pinkwhiskey"] select optgroup {
  background-color: #ffffff;
  color: #3a0a26;
}

/* Respect users who'd rather not have constant motion */
@media (prefers-reduced-motion: reduce) {
  body[data-theme="pinkwhiskey"],
  body[data-theme="pinkwhiskey"]::before,
  body[data-theme="pinkwhiskey"]::after,
  body[data-theme="pinkwhiskey"] .emera-glow-layer,
  body[data-theme="pinkwhiskey"] .form-section,
  body[data-theme="pinkwhiskey"] .panel-card,
  body[data-theme="pinkwhiskey"] .form-section::before,
  body[data-theme="pinkwhiskey"] .panel-card::before,
  body[data-theme="pinkwhiskey"] .primary-button,
  body[data-theme="pinkwhiskey"] .ghost-button,
  body[data-theme="pinkwhiskey"] .save-banner,
  body[data-theme="pinkwhiskey"] .toggle input:checked + .toggle-track {
    animation: none !important;
  }
}

/* -- Equal-size theme menu buttons ----------------------------- */
.theme-menu {
  min-width: 220px;
}
.theme-menu .theme-option,
.theme-menu .theme-row-emera .theme-option-emera {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  margin: 2px 0;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  text-align: left;
  box-sizing: border-box;
}
.theme-menu .theme-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.theme-menu .emera-variants {
  display: flex;
  gap: 6px;
  padding: 4px 12px 6px;
  justify-content: flex-start;
}

/* -- User chip dropdown ---------------------------------------- */
.user-chip-button {
  cursor: pointer;
  border: 1px solid var(--border, #2c2f3d);
  background: var(--card-1, var(--surface-soft, rgba(255,255,255,0.08)));
  color: var(--text, #e7e9ee);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  transition: border-color .12s, background .12s;
}
.user-chip-button:hover { border-color: var(--accent, #5865f2); }
.user-chip-button img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.user-chip-caret { opacity: .65; transition: transform .15s; }
.user-chip-button[aria-expanded="true"] .user-chip-caret { transform: rotate(180deg); opacity: 1; }

.user-pop-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
    background: var(--overlay-bg);
  border: 1px solid var(--border, #2c2f3d);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-menu { position: relative; }
.user-pop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #e7e9ee);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.user-pop-item:hover { background: var(--hover-soft); }
.user-pop-icon { width: 18px; text-align: center; flex-shrink: 0; opacity: .85; }
.user-pop-divider { height: 1px; background: var(--border,#2c2f3d); margin: 4px 0; }
.user-pop-item-admin { color: var(--accent, #5865f2); font-weight: 600; }
.user-pop-item-danger:hover { background: rgba(237,66,69,.18); color: #ff7a7d; }

/* Pink whiskey theme menu accent */
.theme-option-pinkwhiskey {
  background: linear-gradient(90deg, rgba(255, 52, 177, 0.22), rgba(239, 170, 255, 0.18) 60%, transparent) !important;
  border-left: 3px solid #ff34b1 !important;
  color: #ac0039 !important;
  font-weight: 600 !important;
}

/* -- /dashboard/me theme cards -------------------------------- */
.me-theme-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 10px 0 16px;
}
.me-theme-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--card-2, #1f2230);
  border: 1.5px solid var(--border, #2c2f3d);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  color: var(--text, #e7e9ee);
  transition: border-color .15s, background .15s, transform .1s;
  position: relative;
}
.me-theme-card:hover { border-color: var(--accent, #5865f2); transform: translateY(-1px); }
.me-theme-card.is-active {
  border-color: var(--accent, #5865f2);
  background: var(--accent-soft, rgba(88,101,242,0.12));
}
.me-theme-card-swatch {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--card-swatch, #5865f2);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.18);
}
.me-theme-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.me-theme-card-name { font-weight: 600; font-size: 14px; }
.me-theme-card-blurb { font-size: 12px; color: var(--text-muted, #9aa0b3); }
.me-theme-card-check { font-size: 18px; color: var(--accent, #5865f2); opacity: 0; transition: opacity .15s; }
.me-theme-card.is-active .me-theme-card-check { opacity: 1; }
.me-theme-card-emera .me-theme-card-swatch {
  background: linear-gradient(135deg, #10b981 0%, #34d399 35%, #22d3ee 70%, #064e3b 100%);
  background-size: 200% 200%;
  animation: me-emera-shimmer 6s ease-in-out infinite;
}
.me-theme-card-emera .me-theme-card-name {
  background: linear-gradient(90deg, #34d399, #22d3ee 60%, #a3e635);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes me-emera-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.me-theme-card-pinkwhiskey {
  background: linear-gradient(135deg, rgba(255, 52, 177, 0.10), rgba(239, 170, 255, 0.08));
}
.me-theme-card-pinkwhiskey .me-theme-card-swatch {
  background: linear-gradient(135deg, #ac0039 0%, #ff34b1 50%, #efaaff 100%);
  background-size: 200% 200%;
  animation: me-emera-shimmer 7s ease-in-out infinite;
}

.me-emera-variants { margin: 4px 0 16px; }
.me-variant-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.me-variant-dot {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  background: var(--dot-swatch, #10b981);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.2);
  transition: transform .12s, border-color .12s;
}
.me-variant-dot:hover { transform: scale(1.1); }
.me-variant-dot.is-active { border-color: var(--accent, #5865f2); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 0 0 3px var(--accent-soft, rgba(88,101,242,.4)); }
.me-variant-dot.is-classic { background: #10b981; }
.me-variant-dot.is-teal    { background: linear-gradient(135deg, #10b981, #22d3ee); }
.me-variant-dot.is-lime    { background: linear-gradient(135deg, #10b981, #bef264); }
.me-variant-dot.is-magenta { background: linear-gradient(135deg, #10b981, #e879f9); }
.me-variant-dot.is-holo    { background: conic-gradient(from 0deg, #ff007a, #ffd700, #00ffea, #5865f2, #ff007a); animation: holo-spin 4s linear infinite; }
@keyframes holo-spin { to { filter: hue-rotate(360deg); } }

/* -- AFK editor ----------------------------------------------- */
.afk-save-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 14px;
  background: rgba(255, 209, 92, 0.12);
  border: 1px solid rgba(255, 209, 92, 0.4);
  border-radius: 8px;
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(6px);
}
.afk-save-banner-text { font-weight: 600; }

/* -- Admin page ----------------------------------------------- */
.admin-shell { display: block; }
.admin-content { width: 100%; max-width: 1100px; margin: 0 auto; padding: 16px; }
.admin-theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px; margin-top: 12px;
}
.admin-theme-card {
  display: flex; gap: 12px; padding: 12px;
  background: var(--card-2, #1f2230);
  border: 1px solid var(--border, #2c2f3d);
  border-radius: 10px;
}
.admin-theme-card-swatch {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--card-swatch, #5865f2);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.admin-theme-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-theme-card-title { display: flex; align-items: center; gap: 8px; }
.admin-theme-card-body p { margin: 0; font-size: 12px; color: var(--text-muted,#9aa0b3); }
.admin-theme-key { font-size: 11px; color: var(--text-muted,#9aa0b3); }
.admin-theme-pill {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 8px; text-transform: uppercase;
}
.admin-theme-pill-free  { background: rgba(87,242,135,.18); color: #57f287; }
.admin-theme-pill-gated { background: rgba(255,170,0,.18);  color: #ffaa00; }

.admin-variant-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; margin-top: 10px;
}
.admin-variant-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; background: var(--card-2,#1f2230);
  border: 1px solid var(--border,#2c2f3d); border-radius: 8px;
}
.admin-variant-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--dot-swatch, #10b981); flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.admin-variant-dot.is-classic { background: #10b981; }
.admin-variant-dot.is-teal    { background: linear-gradient(135deg, #10b981, #22d3ee); }
.admin-variant-dot.is-lime    { background: linear-gradient(135deg, #10b981, #bef264); }
.admin-variant-dot.is-magenta { background: linear-gradient(135deg, #10b981, #e879f9); }
.admin-variant-dot.is-holo    { background: conic-gradient(from 0deg, #ff007a, #ffd700, #00ffea, #5865f2, #ff007a); }

.admin-grant-form .field-row { gap: 12px; }
.admin-grant-table {
  width: 100%; border-collapse: collapse; margin-top: 10px;
}
.admin-grant-table th, .admin-grant-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border, #2c2f3d);
  font-size: 13px; vertical-align: middle;
}
.admin-grant-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted,#9aa0b3); font-weight: 600; }
.admin-grant-scope { display: flex; align-items: center; gap: 10px; }
.admin-grant-avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.admin-grant-avatar-fallback {
  background: var(--card-1,#181a24); color: var(--text-muted,#9aa0b3);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.admin-grant-id { font-size: 11px; color: var(--text-muted,#9aa0b3); margin-top: 2px; }

/* -- /dashboard/me � Server-Exclusive Defaults rows --------------- */
.server-default-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
}
.server-default-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--card-2, #1f2230);
  border: 1px solid var(--border, #2c2f3d);
  border-radius: 10px;
}
.server-default-info { display: flex; align-items: center; gap: 10px; min-width: 220px; flex: 1; }
.server-default-icon {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.server-default-icon-fallback {
  background: var(--card-1,#181a24); color: var(--text-muted,#9aa0b3);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.server-default-id { font-size: 11px; color: var(--text-muted,#9aa0b3); margin-top: 2px; }
.server-default-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.server-default-controls select { min-width: 140px; }
/* Pretty pill-styled <select>s for the override row so they match the
   primary/ghost buttons sitting next to them. */
.server-default-controls .select-pill {
  appearance: none;
  -webkit-appearance: none;
  background: var(--card-1, #181a24);
  color: var(--text, #e6e8ee);
  border: 1px solid var(--border, #2c2f3d);
  border-radius: 8px;
  padding: 7px 30px 7px 12px;
  font-size: 13px;
  line-height: 1.2;
  height: 34px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted, #9aa0b3) 50%),
    linear-gradient(135deg, var(--text-muted, #9aa0b3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.server-default-controls .select-pill:hover:not(:disabled) {
  border-color: var(--accent, #5865f2);
}
.server-default-controls .select-pill:focus {
  outline: none;
  border-color: var(--accent, #5865f2);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(88,101,242,0.25));
}
.server-default-controls .select-pill:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.server-default-controls .server-default-save,
.server-default-controls .server-default-clear {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 8px;
}
.server-default-hint.saving { color: var(--text-muted, #9aa0b3); }
.server-default-hint.ok     { color: #57f287; }
.server-default-hint.err    { color: #ed4245; }

/* ── Sidebar category labels (me.html nav groupings) ──────────────────────── */
.sidebar-category-label {
  margin: 14px 0 4px;
  padding: 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  user-select: none;
}
.sidebar-category-label:first-child {
  margin-top: 0;
}

/* ── Emoji panel themed to match current theme ────────────────────────────── */
/* The panel hardcodes dark colours — override for light themes. */
body[data-theme="light-fall"] .emoji-panel,
body[data-theme="sea-glass"] .emoji-panel,
body[data-theme="pinkwhiskey"] .emoji-panel {
  background: var(--panel-strong);
  border-color: var(--border);
}
body[data-theme="light-fall"] .emoji-panel-head,
body[data-theme="sea-glass"] .emoji-panel-head,
body[data-theme="pinkwhiskey"] .emoji-panel-head {
  color: var(--muted);
}
body[data-theme="light-fall"] .emoji-close,
body[data-theme="sea-glass"] .emoji-close,
body[data-theme="pinkwhiskey"] .emoji-close {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--text);
}
body[data-theme="light-fall"] .emoji-section-head,
body[data-theme="sea-glass"] .emoji-section-head,
body[data-theme="pinkwhiskey"] .emoji-section-head {
  color: var(--muted);
}
body[data-theme="light-fall"] .emoji-side-divider,
body[data-theme="sea-glass"] .emoji-side-divider,
body[data-theme="pinkwhiskey"] .emoji-side-divider {
  background: var(--border);
}
body[data-theme="light-fall"] .emoji-tab,
body[data-theme="sea-glass"] .emoji-tab,
body[data-theme="pinkwhiskey"] .emoji-tab {
  color: var(--text);
}
body[data-theme="light-fall"] .emoji-tab.active,
body[data-theme="sea-glass"] .emoji-tab.active,
body[data-theme="pinkwhiskey"] .emoji-tab.active {
  color: var(--text);
}
body[data-theme="light-fall"] .emoji-side-img,
body[data-theme="sea-glass"] .emoji-side-img,
body[data-theme="pinkwhiskey"] .emoji-side-img {
  filter: grayscale(0.4) brightness(0.85) opacity(0.7);
}
body[data-theme="light-fall"] .emoji-side-tab:hover .emoji-side-img,
body[data-theme="sea-glass"] .emoji-side-tab:hover .emoji-side-img,
body[data-theme="pinkwhiskey"] .emoji-side-tab:hover .emoji-side-img {
  filter: grayscale(0) brightness(1) opacity(1);
}