/* ── Themes ───────────────────────────────────────────────────────────────
   Neutral, low-saturation palettes with a single restrained blue accent.
   Color is reserved for state (success / warning / danger) and data. */

/* Dark (default) — graphite */
:root {
    --bg-darker: #0f1115;
    --bg-main: #14171c;
    --bg-card: #1b1f25;
    --bg-tertiary: #242931;
    --bg-secondary: var(--bg-tertiary);
    --bg-accent: var(--bg-tertiary);
    --input-bg: var(--bg-darker);
    /* Two blues with two jobs. --primary fills buttons and marks what is chosen: white words read on it
       (4.5:1, tests/test_ui_standards.py). --accent is the same blue as words and icons on the page (links,
       the current page in the menu): a step lighter, so it reads on the cards. Never --primary as text. */
    --primary: #3774c7;
    --primary-hover: #3066af;
    --on-primary: #fff;      /* words on a --primary fill; a theme whose button color is light gets dark ones (appearance.js) */
    --accent: #5b92dc;
    --accent-rgb: 91, 146, 220;
    --accent-alpha: rgba(91, 146, 220, 0.12);
    --text-main: #e8eaed;
    --text-normal: #c3c8cf;
    --text-muted: #8b939e;
    /* The quietest words (group names in the menu, "Off"): a step under --text-muted, and still readable.
       Worked out from the look's own secondary text, so a server's theme gets one that fits it. */
    --text-dark: color-mix(in srgb, var(--text-muted) 91%, #1b1f25);
    --text-color: var(--text-normal);
    --success: #2f9e5b;
    --warning: #c98a1a;
    --danger: #d64545;
    /* The status colors as words. The plain ones above are for fills, dots, bars and borders; as words on a
       dark card they are too dim, so these are a step toward white (and read on a tinted chip too). */
    --success-text: color-mix(in srgb, var(--success) 82%, #fff);
    --warning-text: color-mix(in srgb, var(--warning) 90%, #fff);
    --danger-text: color-mix(in srgb, var(--danger) 74%, #fff);
    --border-color: rgba(255, 255, 255, 0.07);
    --border: var(--border-color);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --nav-active-bg: rgba(91, 146, 220, 0.1);
    /* The height of a button, a field, a dropdown and a row of segmented tabs, so a row of them is level */
    --control-height: 2.25rem;
    /* The longest line of running text. Past about a hundred letters the eye loses its place going back to
       the start of the next line, and on a wide screen help lines ran to 150 and more. */
    --measure: 90ch;
    --focus-ring: rgba(91, 146, 220, 0.25);
    --shadow-primary: rgba(0, 0, 0, 0.25);
    --switch-off: rgba(120, 120, 128, 0.36);
    --scrollbar: rgba(255, 255, 255, 0.14);
    /* Boxes that float: dialogs sit on a dimmed page and barely need a shadow (a large one
       shows as a dark smudge around them); menus and notices need a little more */
    --shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-float: 0 6px 16px rgba(0, 0, 0, 0.28);
    /* The dashboard's font; a server theme can pick another (see "Theme pictures" below) */
    --font-ui: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Browser-drawn parts (scrollbars, select lists, number arrows) follow the theme */
    color-scheme: dark;
}

/* Midnight — pure black for OLED displays */
[data-theme="amoled"] {
    --bg-darker: #000000;
    --bg-main: #070708;
    --bg-card: #111214;
    --bg-tertiary: #1b1c1f;
    --primary: #3774c7;
    --primary-hover: #3066af;
    --accent: #5b92dc;
    --text-main: #f1f2f4;
    --text-normal: #c9ccd1;
    --text-muted: #8e939b;
    --border-color: rgba(255, 255, 255, 0.08);
    --card-shadow: none;
}

/* Navy — dark with a cool blue-gray cast */
[data-theme="blue"] {
    --bg-darker: #0b1220;
    --bg-main: #101828;
    --bg-card: #172133;
    --bg-tertiary: #1f2b40;
    --primary: #3774c7;
    --primary-hover: #3066af;
    --accent: #6a9ee0;
    --accent-rgb: 106, 158, 224;
    --text-main: #e6ebf2;
    --text-normal: #c0cad8;
    --text-muted: #8795aa;
    --border-color: rgba(148, 170, 205, 0.12);
}

/* Light */
[data-theme="light"] {
    --bg-darker: #ffffff;
    --bg-main: #f3f4f6;
    --bg-card: #ffffff;
    --bg-tertiary: #eceef1;
    --input-bg: #ffffff;
    --primary: #2463c2;
    --primary-hover: #1d52a3;
    --accent: #2463c2;
    --accent-rgb: 36, 99, 194;
    --accent-alpha: rgba(36, 99, 194, 0.1);
    --text-main: #111827;
    --text-normal: #374151;
    --text-muted: #5f6775;
    --text-dark: #4b5563;
    --success: #1f8a4c;
    --warning: #a86d00;
    --danger: #c53030;
    --success-text: color-mix(in srgb, var(--success) 84%, #000);
    --warning-text: color-mix(in srgb, var(--warning) 82%, #000);
    --danger-text: color-mix(in srgb, var(--danger) 92%, #000);
    --border-color: rgba(17, 24, 39, 0.12);
    --card-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
    --nav-active-bg: rgba(36, 99, 194, 0.08);
    --focus-ring: rgba(36, 99, 194, 0.2);
    --shadow-primary: rgba(17, 24, 39, 0.12);
    --switch-off: rgba(120, 120, 128, 0.22);
    --scrollbar: rgba(17, 24, 39, 0.18);
    --shadow-dialog: 0 2px 8px rgba(17, 24, 39, 0.12);
    --shadow-float: 0 6px 16px rgba(17, 24, 39, 0.12);
    --choices-x-filter: invert(1);
    color-scheme: light;
}

[data-theme="light"] .settings-input,
[data-theme="light"] .settings-select {
    border-color: rgba(17, 24, 39, 0.18);
}

[data-theme="light"] .settings-input:focus,
[data-theme="light"] .settings-select:focus {
    border-color: var(--primary);
}

[data-theme="light"] .accordion-header {
    background-color: #f7f8fa;
}

[data-theme="light"] .accordion-header:hover {
    background-color: #eef0f3;
}

[data-theme="light"] .btn-secondary {
    border-color: rgba(17, 24, 39, 0.18);
    color: var(--text-normal);
}

[data-theme="light"] .btn-secondary:hover {
    background-color: rgba(17, 24, 39, 0.04);
    border-color: rgba(17, 24, 39, 0.3);
    color: var(--text-main);
}

[data-theme="light"] .md-toolbar {
    background: rgba(17, 24, 39, 0.03);
    border-color: rgba(17, 24, 39, 0.1);
}

[data-theme="light"] .md-toolbar button {
    background: rgba(17, 24, 39, 0.04);
    border-color: rgba(17, 24, 39, 0.1);
    color: var(--text-muted);
}

[data-theme="light"] .toast {
    background-color: #ffffff;
    color: var(--text-main);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-ui);
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Top Navigation */
.top-nav {
    height: 58px;
    background-color: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-8);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    z-index: 100;
    flex-shrink: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* The Equinox logo: white on the brand purple, the picture the bot wears on Discord. It is the same in every
   theme so the brand never changes color. */
.brand-mark {
    width: 32px;
    height: 32px;
    background: url('/static/img/logo.svg?v=2') center / contain no-repeat;
    flex-shrink: 0;
    user-select: none;
}

.brand-mark-lg {
    width: 72px;
    height: 72px;
}

.logo h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

/* The trademark sign after the Equinox name: small and raised. In the header, on the sign-in screen and in the
   footer, and nowhere else on a page (docs/ui/layout-standard.md, Words). */
.brand-tm {
    margin-left: var(--space-0-5);
    font-size: 0.55em;
    font-weight: 600;
    line-height: 0;
    vertical-align: super;
    color: var(--text-muted);
}

.logo-version {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);       /* on the chip's lighter fill the quietest tier is under the reading bar */
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: var(--pad-chip);
    border-radius: 10px;
    margin-left: var(--space-0-5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}

.nav-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    flex-shrink: 0;
}

/* Server switcher (top nav): which server the dashboard is managing */
.server-switcher {
    position: relative;
}

.server-switcher[hidden],
.server-menu[hidden],
.nav-divider[hidden] {
    display: none;
}

.server-switcher-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 260px;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
}

.server-switcher-btn:hover,
.server-switcher-btn[aria-expanded="true"] {
    border-color: var(--primary);
}

.server-switcher-name,
.server-menu-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-switcher-caret {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.server-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    overflow: hidden;
}

.server-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.server-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-width: 320px;
    padding: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-float);
    z-index: 200;
}

.server-menu-label {
    padding: var(--space-2) var(--space-2) var(--space-1);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dark);
}

.server-menu-list {
    position: relative;
    max-height: 320px;
    overflow-y: auto;
}

/* Putting the servers in order (core.js serverMenuReorder): the one being dragged follows the pointer, lifted above
   the others, and a row that changes place glides there. The glide's time is also in core.js. */
.server-menu-item.is-dragging {
    position: relative;
    z-index: 1;
    background: var(--bg-tertiary);
    box-shadow: var(--shadow-float);
    cursor: grabbing;
}

.server-menu-item.is-sliding {
    transition: transform 0.18s ease;
}

.server-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-2);
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text-main);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.server-menu-item .server-menu-name {
    flex: 1;
}

.server-menu-item:hover,
.server-menu-item:focus-visible {
    background: var(--bg-tertiary);
    outline: none;
}

.server-menu-item .fa-check {
    color: var(--accent);
    font-size: 0.75rem;
}

.server-menu-sep {
    height: 1px;
    margin: var(--space-2) var(--space-0-5);
    background: var(--border-color);
}

.server-menu-add {
    color: var(--text-muted);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.88rem;
}

/* Layout Wrapper */
.layout-wrapper {
    display: flex;
    flex: 1;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background-color: var(--bg-darker);
    padding: var(--space-5) var(--space-3);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    flex-shrink: 0;
}

.category-header {
    min-height: 24px;      /* a button: 24px to press, where its margins were */
    padding: 0 var(--space-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dark);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 0.15s;
}

.category-header:hover {
    color: var(--text-muted);
}

.sidebar-category {
    margin-bottom: var(--space-5);
}

.nav {
    list-style: none;
}

.top-level-nav {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.nav li {
    padding: var(--space-2) var(--space-2);
    margin-bottom: var(--space-0-5);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.88rem;
    transition: background 0.15s, color 0.15s;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.nav li:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text-normal);
}

.nav li.active {
    background-color: var(--nav-active-bg);
    color: var(--accent);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary);
}

.nav li i {
    width: 18px;
    font-size: 0.9rem;
    text-align: center;
    flex-shrink: 0;
}

.premium-icon {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem !important;
}

.nav li.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.nav li.disabled:hover {
    background-color: transparent;
    color: var(--text-muted);
}

/* Each page's header: its title (the menu's name for it), what the page is for, and the page's
   own actions beside Refresh, which showTab() moves into the header on screen */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-5);
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.page-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.page-heading p {
    max-width: var(--measure);
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.header-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: var(--space-2);
    align-items: center;
}

.section-title h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: var(--space-1);
    letter-spacing: -0.01em;
}

.section-title p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Tabs. Text on a page is 0.9rem unless a part sets its own size, so nothing falls back to the browser's 16px */
.tab-content {
    display: none;
    font-size: 0.9rem;
    animation: fadeIn 0.3s ease;
}

/* Running text keeps to the measure. A paragraph that is centered in its box is centered at that width too. */
.tab-content :is(p, small.text-muted) {
    max-width: var(--measure);
}

.tab-content :is(.text-center, .apps-none, .empty-state, .table-empty) :is(p, small.text-muted),
.tab-content p:is(.text-center, .empty-state-line) {
    margin-inline: auto;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hidden {
    display: none !important;
}

/* Headline numbers: a label over its number, side by side in a row that wraps. The same in both views;
   the Everything view only adds numbers (class "extra"). */
.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    margin: 0;
}

.stat-row dt {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.stat-row dd {
    margin: var(--space-1) 0 0;
    color: var(--text-main);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* A number said in words ("Support", "4.6 of 5") is set smaller than a figure */
.stat-row dd.is-text {
    font-size: 1rem;
    line-height: 1.62;
}

.stat-row dd small {
    display: block;
    margin-top: var(--space-0-5);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.stat-row dt i {
    margin-right: var(--space-1);
}

/* Threat Detection: what happened lately, under the level it explains; and how many members are at each level, above
   the risk queue's filters */
.sec-threat {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4) var(--space-5);
}

.sec-threat > #sec-threat-now {
    flex: 1 1 0;
    min-width: 0;
}

.sec-threat .stat-row {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--space-3) var(--space-6);
    padding-left: var(--space-5);
    border-left: 1px solid var(--border-color);
}

/* A narrow card (a small window, or the menu taking room on the left): the figures go under the level */
@container (max-width: 560px) {
    .sec-threat > #sec-threat-now {
        flex-basis: 100%;
    }

    .sec-threat .stat-row {
        flex-basis: 100%;
        justify-content: start;
        padding: var(--space-4) 0 0;
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }
}

/* A row of figures at the top of a card, above its filters, table or list (the risk queue, Suggestions, an
   incident drill's history): it has the card's side padding, and the body under it keeps its own */
.settings-card > .stat-row {
    padding: var(--space-4) var(--pad-card-x) 0;
}

.sec-figure-critical dt i { color: var(--status-critical); }
.sec-figure-high dt i { color: var(--status-serious); }
.sec-figure-elevated dt i { color: var(--status-warning); }
.sec-figure-watch dt i { color: var(--text-muted); }

.stat-row:empty {
    display: none;
}

/* Inside a card, the numbers that sum up the chart under them */
.settings-card-body > .stat-row:not(:last-child) {
    margin-bottom: var(--space-field);
}

/* On a phone the numbers line up in two columns */
@media (max-width: 640px) {
    .stat-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .stat-row dt {
        white-space: normal;
    }
}

/* ── Bot Info Rows ── */

.info-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
}

.info-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
}

/* ── Feature Cards ── */

/* Settings Cards */
.settings-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

/* Prevent double-spacing: gap handles all space between cards inside a container */
.settings-container > .settings-card {
    margin-bottom: 0;
    margin-top: 0;
}

.settings-card {
    background-color: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    overflow: visible;
    box-shadow: var(--card-shadow);
}

.flex-row-card {
    display: flex;
    align-items: center;
}

.settings-card-header {
    display: flex;
    flex-wrap: wrap;            /* controls beside the title go under it when both don't fit (a phone) */
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

/* (the title's own block gives way first, so on a wide screen nothing wraps that didn't before) */
.settings-card-header > div:first-child {
    flex: 1 1 12rem;
    min-width: 0;
}


.settings-card-header h3 {
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: -0.01em;
}

.settings-card-header p {
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.45;
}

.settings-card-header>i {
    color: var(--text-muted);
    cursor: pointer;
    margin-top: var(--space-1);
}

.settings-card-body {
    overflow: visible;
}

/* Two-column rows inside card bodies */
.settings-card-body .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

.settings-alert {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--warning);
    border-radius: 6px;
    padding: var(--space-4);
    color: var(--text-normal);
    font-size: 0.95rem;
    line-height: 1.5;
}

.label-icon {
    color: var(--text-dark);
    margin-left: var(--space-1);
}

.role-pills {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
    background-color: var(--bg-main);
    padding: var(--space-3);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.role-pill {
    background-color: var(--bg-darker);
    padding: var(--space-2) var(--space-3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    font-weight: 600;
}

.role-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.settings-input,
.settings-select {
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 6px;
    padding: var(--pad-control);
    font-size: 0.9rem;
    line-height: 1.5;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    resize: vertical;
    box-sizing: border-box;
}

/* One line of text: the shared control height (a box of several lines keeps its padding) */
input.settings-input:not([type="file"]),
select.settings-select:not([multiple]):not([size]) {
    height: var(--control-height);
    padding-top: 0;
    padding-bottom: 0;
}

.settings-input:focus,
.settings-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.prefix-examples {
    font-family: monospace;
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    gap: var(--space-4);
}

.pf-hl {
    color: var(--text-main);
    font-weight: bold;
}

.embed-color-preview-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: var(--space-3) var(--space-5);
}

/* Browser-drawn controls. Scrollbars are thin and take the theme's colors; a
   list's chosen rows use the accent instead of the browser's own blue or gray. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar) transparent;
}

select option,
select optgroup {
    background-color: var(--bg-card);
    color: var(--text-normal);
}

select[multiple] {
    padding: var(--space-1);
}

select[multiple] option {
    padding: var(--space-2) var(--space-2);
    border-radius: 5px;
}

/* A plain background-color is ignored on chosen options; a gradient is not */
select[multiple] option:checked {
    background: linear-gradient(0deg, color-mix(in srgb, var(--primary) 22%, transparent),
                                      color-mix(in srgb, var(--primary) 22%, transparent));
    color: var(--text-main);
}

select[multiple]:focus option:checked {
    background: linear-gradient(0deg, var(--primary), var(--primary));
    color: #ffffff;
}

/* Custom Containers & Forms */
.filter-container {
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: var(--space-8);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 800px;
}

/* Discohook Embed Builder Layout */
.embed-builder-layout {
    display: grid;
    grid-template-columns: minmax(350px, 1fr) 1fr;
    align-items: start;
}

.embed-editor-col {
    display: flex;
    flex-direction: column;
}

/* A narrow screen: the preview first, then the editor under it */
@media (max-width: 900px) {
    .embed-builder-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .embed-builder-layout > .embed-preview-col {
        position: static;
        order: -1;
    }
}

/* Accordions */
.accordion-item {
    background-color: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* The item lets pickers overflow it, so the header rounds its own corners to match (the bottom ones only
   while the section is closed) */
.accordion-header {
    border-radius: inherit;
}

.accordion-item.is-open > .accordion-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.accordion-item.is-open .toggle-icon {
    transform: rotate(180deg);
}

.accordion-header {
    padding: var(--space-4) var(--space-4);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 0;
    background-color: var(--bg-darker);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
    color: var(--text-normal);
    transition: all 0.2s;
}

.accordion-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.accordion-header:hover {
    color: var(--text-main);
    background-color: rgba(255, 255, 255, 0.02);
}

.accordion-header i {
    font-size: 1rem;
    margin-right: var(--space-2);
}

.accordion-header span {
    display: flex;
    align-items: center;
}

.accordion-content {
    padding: var(--space-4);
    display: none;
    border-top: 1px solid var(--border-color);
}

.accordion-content.active {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chart Range Selector */
.chart-ranges {
    display: flex;
    flex: 0 0 auto;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: var(--space-0-5);
    gap: var(--space-0-5);
}

.chart-ranges button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    min-height: 24px;
    padding: 0 var(--space-2);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.chart-ranges button:hover {
    color: var(--text-main);
}

.chart-ranges button.active {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Color Picker & Actions */
.embed-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: stretch;
}

.color-picker-box {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: var(--space-4);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.color-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.native-color-picker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 48px;
    height: 48px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    outline: none;
}

.native-color-picker::-webkit-color-swatch {
    border-radius: 6px;
    border: none;
}

.native-color-picker::-moz-color-swatch {
    border-radius: 6px;
    border: none;
}

.native-color-picker.active {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--primary);
    transition: transform 0.1s, box-shadow 0.1s;
}

.color-info {
    display: flex;
    flex-direction: column;
}

.color-info strong {
    font-size: 0.95rem;
    color: var(--text-main);
}

.color-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.active {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px #ffffff;
}

.w-full {
    width: 100% !important;
    display: block;
}

/* Spacing utilities */
/* Margin utilities, named after the spacing scale: .mt-N is var(--space-N). For one-offs;
   the layout classes (.stack, .field-grid, card and page gaps) space everything else. */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Form group: consistent label + input spacing */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-group>label,
.accordion-content>label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: var(--space-label);
    color: var(--text-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Override for labels with nested spans (sub-text descriptors) — keep normal case */
.form-group>label span,
.accordion-content>label span {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 0.8rem;
}

.form-group input[type="text"],
.form-group textarea,
.filter-container textarea,
.accordion-content input[type="text"],
.accordion-content textarea {
    width: 100%;
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: var(--pad-control);
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    resize: vertical;
    box-sizing: border-box;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus,
.filter-container textarea:focus,
.accordion-content input[type="text"]:focus,
.accordion-content textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.color-picker {
    height: 44px;
    width: 100px;
    padding: 0 !important;
    border: none !important;
    cursor: pointer;
    border-radius: 4px;
    background: transparent;
}

/* Live Discord Preview */
.embed-preview-col {
    position: sticky;
    top: 2rem;
}

.discord-message-container {
    font-size: 1rem;
    background-color: #313338;
    color: #dbdee1;
    padding: var(--space-4);
    border-radius: 8px;
    display: flex;
    gap: var(--space-4);
    max-width: 600px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.discord-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.discord-message-content {
    flex: 1;
    min-width: 0;
}

.discord-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.discord-username {
    font-size: 1rem;
    font-weight: 500;
    color: white;
}

.discord-bot-tag {
    background-color: var(--primary);
    color: var(--on-primary);
    font-size: 0.7rem;
    padding: var(--space-0-5) var(--space-1);
    border-radius: 3px;
    font-weight: 600;
    vertical-align: middle;
}

.discord-timestamp {
    font-size: 0.75rem;
    color: #a0a6af;
}

.discord-text {
    color: #dcddde;
    font-size: 1rem;
    margin-bottom: var(--space-2);
    word-break: break-word;
    white-space: pre-wrap;
}

.discord-embed {
    background-color: #2b2d31;
    border-left: 4px solid #5865F2;
    /* dynamic via js */
    border-radius: 4px;
    padding: var(--space-2) var(--space-4) var(--space-4) var(--space-4);
    margin-top: var(--space-1);
    display: inline-block;
    max-width: 100%;
    min-width: min(250px, 100%);
    box-sizing: border-box;
}

.discord-embed-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: relative;
}

.discord-embed-content-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
}

/* The text beside the small picture */
.discord-embed-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

/* The dropdown or the buttons under a ticket panel's preview (tickets.js) */
.discord-components {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 400px;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid #3f4147;
    border-radius: 4px;
    background: #1e1f22;
    color: #dbdee1;
    font-size: 0.9rem;
}

.discord-components.is-plain {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
}

.discord-embed-author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.discord-author-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.discord-author-name {
    color: #f2f3f5;
    font-weight: 600;
    font-size: 0.875rem;
}

.discord-embed-title {
    font-weight: 600;
    font-size: 1rem;
    color: #00A8FC;
}

.discord-embed-desc {
    color: #dcddde;
    font-size: 0.875rem;
    white-space: pre-wrap;
    line-height: 1.375;
}

.discord-embed-image {
    max-width: 400px;
    max-height: 300px;
    border-radius: 4px;
    object-fit: contain;
    margin-top: var(--space-2);
}

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

.discord-embed-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.discord-footer-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.discord-footer-text {
    color: #a0a6af;
    font-size: 0.75rem;
}

/* Make grid context relative for thumbnail absolute positioning */
#preview-embed {
    position: relative;
}

/* Buttons */
.btn {
    padding: var(--pad-control);
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-icon);
    min-height: var(--control-height);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.btn-sm {
    min-height: 24px;
    padding: var(--pad-control-sm);
    font-size: 0.8rem;
    gap: var(--gap-icon);
}

.btn-primary {
    background-color: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    border-color: var(--primary);
}

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

.btn-secondary {
    background-color: transparent;
    color: var(--text-muted);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-danger {
    background-color: rgba(237, 66, 69, 0.08);
    color: var(--danger-text);
    border-color: rgba(237, 66, 69, 0.2);
}

.btn-danger:hover {
    background-color: rgba(237, 66, 69, 0.18);
    border-color: rgba(237, 66, 69, 0.4);
}


.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Loader */
.loader {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-bottom-color: var(--primary);
    border-radius: 50%;
    animation: rotation 1s linear infinite;
    margin: var(--space-12) auto;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.choices__list--multiple .choices__item.is-disabled .choices__button {
    display: none !important;
}

.choices__list--multiple .choices__item.is-disabled {
    opacity: 0.75 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-muted) !important;
    padding-right: var(--space-3) !important;
    cursor: not-allowed !important;
}

/* Toast: a short notice. Solid, so nothing behind it shows through its text; core.js sets
   --toast-top / --toast-bottom to keep it clear of the header and the menu wherever that sits. */
.toast {
    position: fixed;
    bottom: calc(var(--toast-bottom, 0px) + var(--space-6));
    right: var(--space-6);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: var(--space-3) var(--space-5);
    border-radius: 8px;
    box-shadow: var(--shadow-float);
    transform: translateY(80px);
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 4000;      /* above dialogs, so a dialog's own messages show */
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 0.88rem;
    min-width: 220px;
    pointer-events: none;
}

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

/* The message in the normal text color; the icon and edge say how it went */
.toast > i {
    color: var(--success-text);
}

.toast.error {
    border-color: color-mix(in srgb, var(--danger) 55%, var(--border-color));
    background-color: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
}

.toast.error > i {
    color: var(--danger-text);
}

.toast.success {
    border-color: color-mix(in srgb, var(--success) 55%, var(--border-color));
    background-color: color-mix(in srgb, var(--success) 10%, var(--bg-card));
}

/* ========== MARKDOWN TOOLBAR ========== */
.md-toolbar {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: var(--space-2) var(--space-2);
}

.md-toolbar button {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-normal);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    min-width: var(--space-8);          /* one letter is still a 24px target and more */
    padding: var(--space-1) var(--space-2);
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}

.md-toolbar button:hover {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

.md-toolbar .md-sep {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: var(--space-0-5) var(--space-1);
}

.md-textarea-wrap textarea {
    border-radius: 0 0 6px 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ========== TOGGLE SWITCH ==========
   iPhone-style: the knob glides across on a spring-like curve, stretches while
   pressed, and the track fills with green. Three sizes share the same parts:
   .toggle-switch (default), .toggle-switch-sm, and the older .switch/.slider. */
.toggle-switch,
.toggle-switch-sm,
.switch {
    --sw-w: 50px;
    --sw-h: 30px;
    --sw-pad: 2px;
    --sw-knob: calc(var(--sw-h) - var(--sw-pad) * 2);
    --sw-stretch: 6px;
    position: relative;
    display: inline-block;
    width: var(--sw-w);
    height: var(--sw-h);
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.toggle-switch-sm {
    --sw-w: 36px;
    --sw-h: 22px;
    --sw-stretch: 4px;
}

.switch {
    --sw-w: 46px;
    --sw-h: 28px;
    margin-top: var(--space-2);
}

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

.toggle-slider,
.toggle-slider-sm,
.slider {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--switch-off);
    cursor: pointer;
    transition: background-color 0.25s ease, box-shadow 0.2s ease;
}

.toggle-slider::before,
.toggle-slider-sm::before,
.slider::before {
    content: '';
    position: absolute;
    top: var(--sw-pad);
    bottom: auto;
    left: var(--sw-pad);
    width: var(--sw-knob);
    height: var(--sw-knob);
    border-radius: 999px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28), 0 0 1px rgba(0, 0, 0, 0.2);
    transform: none;
    transition: left 0.3s cubic-bezier(0.3, 1.3, 0.5, 1), width 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider,
.toggle-switch-sm input:checked + .toggle-slider-sm,
.switch input:checked + .slider {
    background-color: var(--success);
}

.toggle-switch input:checked + .toggle-slider::before,
.toggle-switch-sm input:checked + .toggle-slider-sm::before,
.switch input:checked + .slider::before {
    left: calc(100% - var(--sw-knob) - var(--sw-pad));
    transform: none;
}

/* Pressing stretches the knob toward the side it is heading */
.toggle-switch:active .toggle-slider::before,
.toggle-switch-sm:active .toggle-slider-sm::before,
.switch:active .slider::before {
    width: calc(var(--sw-knob) + var(--sw-stretch));
}

.toggle-switch:active input:checked + .toggle-slider::before,
.toggle-switch-sm:active input:checked + .toggle-slider-sm::before,
.switch:active input:checked + .slider::before {
    left: calc(100% - var(--sw-knob) - var(--sw-stretch) - var(--sw-pad));
}

.toggle-switch input:focus-visible + .toggle-slider,
.toggle-switch-sm input:focus-visible + .toggle-slider-sm,
.switch input:focus-visible + .slider {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.toggle-switch input:disabled + .toggle-slider,
.toggle-switch-sm input:disabled + .toggle-slider-sm,
.switch input:disabled + .slider {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Reduce Motion (the device setting) calms the page, but switches still slide,
   as they do on iPhone: the movement is small and shows what changed. The
   dashboard's own Animation: Reduced setting still turns this off. */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="reduced"]) :is(.toggle-slider, .toggle-slider-sm, .slider),
    :root:not([data-motion="reduced"]) :is(.toggle-slider, .toggle-slider-sm, .slider)::before {
        transition-duration: 0.25s !important;
    }
}

/* ========== COLOR PICKER (shared component) ========== */
.cp-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-2);
}

.cp-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    box-sizing: border-box;
    /* a hairline, so white shows on a light theme and black on a dark one */
    box-shadow: inset 0 0 0 1px var(--border-color);
    transition: border-color 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.cp-swatch:hover {
    transform: scale(1.15);
}

/* The picked color: a ring outside it in the accent color, which shows on every color (a white border on the
   white swatch, or on a light theme, showed nothing) */
.cp-swatch.active {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Reached by keyboard: the same ring in the text color, so it is told apart from the picked one */
.cp-swatch:focus-visible {
    outline: 2px solid var(--text-main);
    outline-offset: 2px;
}

.cp-custom {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: var(--space-0-5);
}

.cp-custom input[type="color"] {
    width: 36px;
    height: 28px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    transition: border-color 0.15s;
}

.cp-custom input[type="color"]:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.cp-custom input[type="color"].active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.cp-custom span {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Legacy embed builder swatches — now use shared style */
.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.color-swatch:hover {
    transform: scale(1.15);
}

.color-swatch.active {
    border-color: #ffffff;
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-2);
}

.native-color-picker {
    width: 36px;
    height: 28px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    transition: border-color 0.15s;
}

.native-color-picker:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

/* --- DISCORD MOCK BUTTONS --- */
.discord-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    padding: var(--space-0-5) var(--space-4);
    height: 32px;
    min-width: 60px;
    border-radius: 3px;
    user-select: none;
    font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.discord-btn-primary {
    background-color: #5865F2;
}

.discord-btn-secondary {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
}

.discord-btn-success {
    background-color: #248046;
}

.discord-btn-danger {
    background-color: #da373c;
}

/* --- EMOJI FIELDS AND THE PICKER (emoji.js): one popover for every emoji setting --- */
.emoji-field {
    display: flex;
    align-items: center;
    gap: var(--gap-row);
}

.emoji-field .emoji-input {
    flex: 1 1 auto;
    min-width: 0;
}

.emoji-field .emoji-pick-btn {
    flex: 0 0 auto;
}

.ep-btn img {
    width: 24px;
    height: 24px;
}

.emoji-picker {
    display: none;
    position: fixed;
    z-index: 10001;
    flex-direction: column;
    width: 336px;
    max-width: calc(100vw - var(--space-4));
    max-height: 400px;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

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

.emoji-picker-head {
    flex: 0 0 auto;
    padding: var(--space-2);
    border-bottom: 1px solid var(--border-color);
}

/* The nine groups and the server's own fit in one row; the grid takes the rest and scrolls */
.emoji-picker-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-0-5);
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.emoji-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.emoji-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-main);
}

.emoji-tab.is-active {
    background: var(--accent-alpha);
    border-color: var(--accent);
    color: var(--text-main);
}

.emoji-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-0-5);
    padding: var(--space-2);
    overflow-y: auto;
    align-content: start;
}

.ep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.ep-btn:hover,
.ep-btn:focus-visible {
    background: var(--bg-tertiary);
}

.emoji-picker-note {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--space-2);
    font-size: 0.85rem;
}

/* Analytics: the server's emoji by use */
.an-emoji-name {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-icon);
}

.emoji-unused {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-hint);
}

.emoji-unused img {
    width: 28px;
    height: 28px;
}

/* --- SERVER MAP (server-map.js): the channel tree on the left, details and forms on the right --- */
.smap-layout {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: var(--space-page);
    align-items: start;
}

/* The details stay beside the channel list while it scrolls, so a channel at the bottom of a long list
   doesn't mean scrolling back up to read it; long details scroll on their own (they hold no pickers that
   would be cut off, which is why cards don't usually scroll). Short enough to fit above the room every page
   keeps at its end, so at the bottom of the list they still show whole. */
.smap-detail-card {
    position: sticky;
    top: var(--space-4);
    display: flex;
    flex-direction: column;
    max-height: calc(var(--view-h, 100vh) - var(--space-8) - var(--room-page-end) - var(--space-12));
    min-height: 0;
}

.smap-detail-card > .settings-card-body {
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

@media (max-width: 900px) {
    .smap-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .smap-detail-card {
        position: static;
        max-height: none;
    }
}

.smap-tree {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    font-size: 1rem;
}

.smap-cat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-3);
    padding: var(--space-0-5) var(--space-2) var(--space-0-5) var(--space-1);
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.smap-cat:first-child {
    margin-top: 0;
}

.smap-cat-name {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.smap-cat-name:disabled {
    cursor: default;
}

.smap-cat-name:hover:not(:disabled) {
    color: var(--text-main);
}

/* A selected category looks like a selected channel */
.smap-cat.is-selected {
    background: var(--accent-alpha);
    border-color: var(--accent);
    color: var(--text-main);
}

/* The arrow that folds a category's channels away (a blank of the same width on "No category") */
.smap-cat-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: inherit;
    cursor: pointer;
}

span.smap-cat-toggle {
    cursor: default;
}

button.smap-cat-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-main);
}

.smap-cat-toggle i {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.smap-cat.is-folded .smap-cat-toggle i {
    transform: rotate(-90deg);
}

/* Dragging in the tree, like Discord: the row being moved fades, a line shows where it lands, and a
   category it would go into lights up. Long presses on phones start a drag, so no text selection */
.smap-tree {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.smap-dragging .smap-chan,
.smap-dragging .smap-cat-name {
    cursor: grabbing;
}

.smap-chan.is-dragged,
.smap-cat.is-dragged {
    opacity: 0.4;
}

.smap-drop-before {
    box-shadow: inset 0 2px 0 var(--accent);
}

.smap-drop-after {
    box-shadow: inset 0 -2px 0 var(--accent);
}

.smap-drop-into {
    background: var(--accent-alpha);
    border-radius: 6px;
}

/* "No category": a place to drop a channel, shown at the end of the tree while dragging one when no
   channel is outside a category */
.smap-drop-only {
    display: none;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
}

.smap-dragging-channel .smap-drop-only {
    display: flex;
}

.smap-chan {
    display: flex;
    align-items: center;
    gap: var(--gap-icon);
    width: 100%;
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-normal);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.smap-chan:hover {
    background: var(--bg-tertiary);
    color: var(--text-main);
}

.smap-chan.is-selected {
    background: var(--accent-alpha);
    border-color: var(--accent);
    color: var(--text-main);
}

.smap-chan > i,
.smap-detail-head > i {
    width: 1rem;
    color: var(--text-muted);
    text-align: center;
}

.smap-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smap-badges {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.smap-badges .is-warning,
.smap-list .is-warning {
    color: var(--status-warning);
}

.smap-tag {
    padding: var(--pad-chip);
    border-radius: 4px;
    background: var(--bg-tertiary);
    font-weight: 700;
}

.smap-count {
    color: var(--text-dark);
}

.smap-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-page);
}

.smap-note {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-icon);
    padding: var(--pad-tile);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.smap-note.is-warning {
    border-color: var(--status-warning);
}

.smap-note i {
    color: var(--status-warning);
}

.smap-note .btn-link {
    font-weight: 600;
}

.smap-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-icon);
    margin-bottom: var(--space-inner);
}

.smap-detail-head h4 {
    margin: 0;
    font-size: 1.05rem;
}

.smap-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.smap-facts dt {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.smap-facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A Discord ID reads like the values around it; one click selects the whole of it, ready to copy */
.smap-id {
    -webkit-user-select: all;
    user-select: all;
}

.smap-list {
    margin: 0;
    padding-left: var(--space-4);
}

.smap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.smap-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--pad-chip);
    border-radius: 999px;
    background: var(--bg-tertiary);
    font-size: 0.8rem;
}

.smap-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.smap-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-inner);
}

.smap-chip.is-warning {
    color: var(--status-warning);
}

.smap-detail-head + .smap-chips {
    margin-bottom: var(--space-inner);
}

.smap-form {
    display: grid;
    gap: var(--space-field);
    margin-top: var(--space-page);
    padding-top: var(--space-page);
    border-top: 1px solid var(--border-color);
}

/* A form shown on its own (a new channel, an action) starts the card, with no divider above it */
.smap-form:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.smap-form-title {
    margin: 0;
    font-size: 0.95rem;
}

.smap-danger .smap-form-title {
    color: var(--danger-text);
}

/* The details' tabs (Overview, History, Settings), and what each shows */
.smap-tabs {
    margin-top: var(--space-inner);
}

.smap-panel {
    margin-top: var(--space-inner);
}

.smap-settings,
.smap-history {
    display: grid;
    gap: var(--space-field);
}

/* Buttons side by side ("Delete category", "Delete category and channels") go onto a second line when the panel
   is narrow, instead of pushing it wider than its card */
.smap-form .cell-actions {
    flex-wrap: wrap;
}

/* A channel's history: the Activity Log's rows, without the kind on each (they are all server changes) */
.smap-history .slog-chip {
    display: none;
}

/* ========== MODALS ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: modalFadeIn 0.18s ease;
}

.modal-content {
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: var(--shadow-dialog);
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

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

.modal-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    letter-spacing: -0.01em;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

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

.modal-body {
    padding: 0;
    overflow-y: auto;
}

/* Themed replacement for the browser's confirm() box (askConfirm in common.js) */
.confirm-dialog {
    z-index: 3000;
}

.confirm-dialog .modal-content {
    width: 440px;
    max-width: calc(100vw - 32px);
}

.confirm-dialog .modal-body p {
    margin: 0;
    padding: var(--space-4) var(--space-6) var(--space-5);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-normal);
    white-space: pre-line;
}

/* A dialog's text box or dropdown: the same room at its sides as the dialog's text */
.confirm-dialog .modal-body :is(input, select) {
    display: block;
    width: calc(100% - 2 * var(--space-6));
    margin: var(--space-4) var(--space-6) var(--space-5);
}

.confirm-dialog .modal-body p:not([hidden]) + :is(input, select) {
    margin-top: calc(-1 * var(--space-2));
}

/* Report to Discord (security.js): the steps, the report to paste, and the three ways out */
.sec-report-dialog {
    z-index: 3000;
}

.sec-report-dialog .modal-content {
    width: 640px;               /* its three buttons on one line */
    max-width: calc(100vw - 32px);
}

.sec-report {
    padding: var(--space-4) var(--space-6) var(--space-5);
}

.sec-report p,
.sec-report h3 {
    margin: 0;
}

.sec-report h3 {
    font-size: 0.95rem;
}

.sec-report-live {
    margin: 0;
    padding-left: var(--space-5);
}

.sec-report-live a {
    color: var(--accent);
}

.sec-report-text {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    resize: vertical;
}

.sec-report-dialog .modal-footer {
    flex-wrap: wrap;
}

/* The last warning before something is deleted for good or a lot changes at once (askTwice in common.js) */
.confirm-dialog.is-last .modal-content {
    border-color: var(--danger);
}

.confirm-dialog.is-last .modal-header h2 {
    color: var(--danger-text);
}

.modal-footer {
    padding: var(--space-4) var(--space-6);
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    border-top: 1px solid var(--border-color);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Badge Utility */
.badge {
    padding: var(--pad-control-sm);
    border-radius: 12px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Modal Table specific styling */
#joins-list-container table thead tr {
    background: rgba(0, 0, 0, 0.2);
}

#joins-list-body tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
    /* 24px to press; the negative margin keeps the line it sits in as tall as its neighbors */
    min-height: 24px;
    padding: 0;
    margin: calc(-1 * var(--space-1)) 0;
}

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

/* Custom Settings Checkboxes */
input[type="checkbox"].perm-check {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

input[type="checkbox"].perm-check:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

input[type="checkbox"].perm-check:checked {
    background: var(--accent, #5865f2);
    border-color: var(--accent, #5865f2);
}

input[type="checkbox"].perm-check:checked::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Choices shown as pills (what a filter does, and its yes/no options) */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.img-action-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/* Out of sight but still reachable with Tab and Space, like the switches */
.img-action-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.img-action-pill input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* A check mark as well as the color says which ones are chosen */
.img-action-pill input:checked + span::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
}

.img-action-pill span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.img-action-pill:hover span {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-normal);
}

.img-action-pill input:checked+span {
    background: var(--accent-alpha);
    border-color: var(--accent);
    color: var(--text-main);
}

/* A custom command's actions (custom-commands.js): what the action is and its text on lines of their own,
   its smaller settings side by side */
#cc-actions .module-row > :is([data-key="type"], .module-field-textarea, .module-field-text) {
    flex-basis: 100%;
}

/* Remove: on a line of its own under the action, whatever the action holds */
#cc-actions .module-row > .module-row-actions {
    flex-basis: 100%;
    min-height: 0;
    margin-top: 0;
}

/* ── Component overrides (Choices.js selects, recipient chips, misc) ──
   Moved from an inline <style> block in index.html; kept last so the
   cascade order is unchanged. */
/* Tag pickers (Choices.js): chosen items show as chips, the rest in a searchable list.
   Colors come from the theme so they match in light, dark and custom themes. */
.choices {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="select-one"] .choices__inner {
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-normal);
    min-height: var(--control-height);
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.choices[data-type*="select-multiple"] .choices__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: var(--space-0-5) var(--space-2);
    cursor: text;
}

.choices[data-type*="select-one"] .choices__inner {
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-10) var(--space-1) var(--space-4);
    cursor: pointer;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.choices.is-open .choices__inner {
    border-radius: 6px 6px 0 0;
}

.choices.is-flipped.is-open .choices__inner {
    border-radius: 0 0 6px 6px;
}

.choices__list--multiple {
    display: contents;
}

.choices__input {
    background-color: transparent !important;
    color: var(--text-normal) !important;
    font-size: 0.88rem;
    margin: var(--space-0-5) 0 !important;
    padding: var(--space-0-5) !important;
}

.choices__input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* Chosen items */
.choices__list--multiple .choices__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    margin: var(--space-0-5) var(--space-2) var(--space-0-5) 0;
    padding: var(--space-0-5) var(--space-2);
    background-color: color-mix(in srgb, var(--primary) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    border-radius: 999px;
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    word-break: normal;
}

.choices__list--multiple .choices__item.is-highlighted {
    background-color: color-mix(in srgb, var(--primary) 28%, transparent);
    border-color: var(--primary);
}

.choices[data-type*="select-multiple"] .choices__button {
    width: 24px;
    height: 24px;
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-size: 7px;
    opacity: 0.55;
    filter: var(--choices-x-filter, none);
    transition: opacity 0.15s, background-color 0.15s;
}

.choices[data-type*="select-multiple"] .choices__button:hover,
.choices[data-type*="select-multiple"] .choices__button:focus-visible {
    opacity: 1;
    background-color: color-mix(in srgb, var(--text-main) 14%, transparent);
}

/* The list that opens */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    z-index: 1000;
    margin-top: -1px;
    background-color: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow-float);
    color: var(--text-normal);
    word-break: normal;
}

.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded] {
    border-color: var(--primary);
}

.is-flipped .choices__list--dropdown,
.is-flipped .choices__list[aria-expanded] {
    margin-top: 0;
    margin-bottom: -1px;
    border-radius: 8px 8px 0 0;
}

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
    max-height: 260px;
    padding: var(--space-1);
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    padding: var(--space-2) var(--space-2);
    border-radius: 6px;
    color: var(--text-normal);
    font-size: 0.88rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--text-main);
}

.choices__list--dropdown .choices__item--selectable::after,
.choices__list[aria-expanded] .choices__item--selectable::after {
    display: none;
}

.choices__list--dropdown .choices__placeholder {
    display: none;
}

.choices__heading {
    padding: var(--space-2) var(--space-2) var(--space-1);
    border-bottom: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.choices__list--dropdown .choices__item.has-no-choices,
.choices__list--dropdown .choices__item.has-no-results {
    color: var(--text-muted);
}

.choices__list--dropdown .choices__input {
    margin: 0 !important;
    padding: var(--space-2) var(--space-2) !important;
    border-bottom: 1px solid var(--border-color);
}

.choices[data-type*="select-one"] .choices__item {
    color: var(--text-normal);
    background-color: transparent;
}

.choices[data-type*="select-one"]::after {
    right: 16px;
    border-color: var(--text-muted) transparent transparent;
}

.choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent var(--text-muted);
}

/* Ensure containers don't clip dropdowns. Not a card body that holds a table edge to edge (.is-flush): that
   one scrolls sideways when its table is wider than the card, which this rule used to switch off, so on a
   phone the table pushed the whole page wide instead. */
.settings-card,
.settings-card-body:not(.is-flush),
.job-dept-card,
.accordion-item,
.accordion-content,
.accordion-content.active {
    overflow: visible !important;
}

    .btn-invite-delete {
        background: rgba(237, 66, 69, 0.05);
        color: #ed4245;
        border: 1px solid rgba(237, 66, 69, 0.15);
        padding: var(--space-2) var(--space-2);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .btn-invite-delete:hover {
        background: rgba(237, 66, 69, 0.15);
        border-color: rgba(237, 66, 69, 0.4);
        transform: scale(1.05);
    }

    /* Custom Recipient Chips for Vouch DMs */
    .recipient-checkbox { display: none; }
    .recipient-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--pad-chip);
        border-radius: 4px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        color: var(--text-muted);
        font-size: 0.7rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 24px;
        user-select: none;
    }
    .recipient-checkbox:checked + .recipient-chip {
        background: var(--primary);
        border-color: var(--primary);
        color: var(--on-primary);
        box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
    }
    #banned-words-input:not(:focus),
    #dynamic-words-input:not(:focus) {
        filter: blur(5px);
        transition: filter 0.15s ease;
    }
    #banned-words-input:focus,
    #dynamic-words-input:focus {
        filter: none;
        transition: filter 0.15s ease;
    }

/* ── "Not in a server" state ──
   body.no-server is set by loadStats() when the bot has no guilds; stored data
   from servers it has left is hidden instead of being shown as current. */
.no-server-notice {
    display: none;
    align-items: center;
    gap: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--warning);
    border-radius: 12px;
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-8);
}

.no-server-notice > i {
    font-size: 1.4rem;
    color: var(--warning-text);
    flex-shrink: 0;
}

.no-server-text {
    flex: 1;
    min-width: 0;
}

.no-server-text h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: var(--space-1);
}

.no-server-text p {
    font-size: 0.87rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.no-server-notice .btn {
    flex-shrink: 0;
    text-decoration: none;
}

body.no-server .no-server-notice {
    display: flex;
}

body.no-server :is(#dashboard-tab, #analytics-tab) > :not(.page-header):not(.no-server-notice) {
    display: none !important;
}

@media (max-width: 640px) {
    .no-server-notice {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Modules page ─────────────────────────────────────────────────────────── */
.modules-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.modules-toolbar p {
    margin: 0;
    max-width: 640px;
}

.modules-toolbar input[type="search"] {
    max-width: 260px;
}

.module-category-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
}

.module-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: var(--space-4) var(--space-4);
    box-shadow: var(--card-shadow);
}

/* On the Features page, what is switched on has a colored edge */
.module-card.is-on:not(.module-card-embedded) {
    border-color: rgba(var(--accent-rgb), 0.45);
}

.module-card-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.module-card-head h3 {
    margin: 0 0 var(--space-1);
    font-size: 1rem;
    color: var(--text-main);
}

.module-card-head p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.module-card-head .module-commands {
    margin-top: var(--space-2);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--accent);
}

.module-card-actions {
    margin-top: var(--space-3);
}

.module-body {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

.module-form .form-group {
    margin-bottom: var(--space-4);
}

.module-form small {
    display: block;
    margin-top: var(--space-hint);
    color: var(--text-muted);
    font-size: 0.78rem;
}

.module-form select[multiple] {
    min-height: 7rem;
}

.module-picker {
    min-width: 0;
}

.module-bool-control {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.module-bool-control > label:not(.toggle-switch) {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.88rem;
    color: var(--text-normal);
}

.module-rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.module-row {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-main);
}

.module-row-actions,
.module-form-actions {
    display: flex;
    justify-content: flex-end;
}

/* ── App shell ───────────────────────────────────────────────────────────────
   The top bar and sidebar stay put; only the page area scrolls. */
html,
body {
    height: 100%;
}

body {
    height: 100vh;
    overflow: hidden;
}

.layout-wrapper {
    min-height: 0;
}

/* The scrolling page area: the page (.main-inner sets its width and padding), then the footer, at the bottom of
   the window or under a long page. The room at the end lets a dropdown near the bottom of a page open without
   being cut off; it is above the footer, which counts toward it. */
.main-content {
    flex: 1;
    width: 100%;
    min-width: 0;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-main);
}

.main-inner {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--pad-page);
}

/* A strip across the bottom like the bars at the top (their color and line), its text lined up with the page */
.site-footer {
    margin-top: calc(var(--room-page-end) / 2);
    background-color: var(--bg-darker);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.82rem;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--pad-page);
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

[data-width="wide"] .site-footer-inner {
    max-width: none;
}

.site-footer-legal {
    display: flex;
    align-items: center;
    gap: var(--gap-icon);
    margin: 0;
}

.brand-mark-sm {
    width: 20px;
    height: 20px;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
}

.site-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--space-6);
    color: var(--text-muted);
    text-decoration: none;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    color: var(--text-main);
    text-decoration: underline;
}

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

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--space-4) var(--space-5);
}

.form-grid-3 > .form-group {
    margin: 0;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4) var(--space-5);
}

.form-grid-2 .form-group small,
.settings-card-body > .form-group small,
.module-group-body > .form-group small {
    margin-top: var(--space-hint);
    font-size: 0.78rem;
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.card-actions small {
    margin-right: auto;
}

.color-field {
    display: flex;
    align-items: center;
    /* as tall as a field, so a color sits level with the field in the next column (it was 44px, which set the
       color 4px lower than its neighbor) */
    min-height: var(--control-height);
    gap: var(--space-2);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--text-normal);
}

.color-field input[type="color"] {
    width: 44px;
    height: var(--control-height);
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

/* The six-digit code beside every color picker, to type or paste a color (common.js adds the box). It keeps
   its own width wherever it lands: beside a swatch in a form, a palette or the theme editor. */
input[type="text"].color-code {
    flex: 0 0 auto;
    width: 6.5rem;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
}

input[type="text"].color-code[aria-invalid] {
    border-color: var(--danger);
}

input[type="color"] {
    flex: 0 0 auto;
}

.settings-card-header-row {
    align-items: center;
}

/* A title on its own line of the header is as tall as the controls some headers hold beside it, so cards side
   by side keep their headers level whether or not they have any */
.settings-card-header > h3 {
    min-height: 1.875rem;
    margin-bottom: 0;
}

.chart-box {
    height: 260px;
    width: 100%;
    position: relative;
}

/* Sidebar groups are buttons, so they work from the keyboard */
button.category-header {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
}

.sidebar-category.collapsed .category-nav {
    display: none;
}

.nav li:focus-visible,
button.category-header:focus-visible,
.account-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* ── Account menu (top right) ─────────────────────────────────────────────── */
.account {
    position: relative;
}

.account-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 240px;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
}

.account-btn:hover,
.account-btn[aria-expanded="true"] {
    border-color: var(--primary);
}

.account-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.account-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-normal);
    font-size: 0.72rem;
    font-weight: 700;
}

.account-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-caret {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.account-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 230px;
    padding: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-float);
    z-index: 200;
}

.account-menu-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    padding: var(--space-2) var(--space-2) var(--space-2);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-color);
}

.account-menu-head strong {
    font-size: 0.88rem;
    color: var(--text-main);
}

.account-menu-head span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.account-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text-normal);
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.account-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--text-muted);
}

/* An item that is on or off ("Show everything") shows a check mark while it is on */
.account-menu-item[aria-checked="true"]::after {
    content: '\f00c';
    margin-left: auto;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--accent);
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
    background: var(--bg-tertiary);
    color: var(--text-main);
    outline: none;
}

.account-menu-switch {
    margin-left: auto;
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

.account-menu-sep {
    height: 1px;
    margin: var(--space-2) var(--space-0-5);
    background: var(--border-color);
}

/* ── Overview ─────────────────────────────────────────────────────────────── */
/* In one column, what needs attention comes before the chart */
@media (max-width: 1000px) {
    .overview-side {
        order: -1;
    }
}

.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    margin-bottom: var(--space-8);
    align-items: start;
}

.overview-side {
    display: flex;
    flex-direction: column;
}

.overview-grid .settings-card,
.overview-side .settings-card {
    margin-bottom: 0;
}

.settings-card-body.attention-list {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.info-value.is-due {
    color: var(--warning-text);
}

.info-value.is-clear {
    color: var(--text-muted);
    font-weight: 500;
}

.attention-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-2) 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    font: inherit;
    text-align: left;
    color: inherit;
}

.attention-row:last-child {
    border-bottom: 0;
}

button.attention-row {
    cursor: pointer;
}

button.attention-row:hover .info-label {
    color: var(--text-main);
}

.recent-join {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
}

.recent-join:last-child {
    border-bottom: 0;
}

.recent-join-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--text-normal);
}

/* What a row says on the right, with a quieter line under it (the total behind a count that needs attention) */
.attention-meta small {
    font-size: inherit;
    font-weight: 500;
}

.recent-join-meta,
.attention-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.recent-join-meta .is-new {
    color: var(--warning-text);
    font-weight: 600;
}

/* Modules shown on their feature's page read like the page's other cards */
.module-mount:empty {
    display: none;
}

.module-card-embedded {
    border-radius: 10px;
}

.module-card-embedded .module-body {
    margin-top: var(--space-4);
}

.module-card-embedded .module-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 0 var(--space-5);
}

.module-card-embedded .module-form > .module-field-rows,
.module-card-embedded .module-form > .module-field-textarea,
.module-card-embedded .module-form > .module-form-actions {
    grid-column: 1 / -1;
}

/* ── Aligned field grids ─────────────────────────────────────────────────────
   Fields in a grid share three rows: label, control, hint. A label that wraps
   to two lines grows the label row for the whole line of fields, so every box
   in that line still starts at the same height. */
.form-grid-2 {
    row-gap: 0;
}

.form-grid-2 > .form-group,
.module-card-embedded .module-form > .module-field {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
}

.form-grid-2 > .form-group > label,
.module-card-embedded .module-form > .module-field > label {
    align-self: end;
}

/* Controls keep their own height when a taller list sits beside them */
.form-grid-2 > .form-group > :nth-child(2),
.module-card-embedded .module-form > .module-field > :nth-child(2),
.form-grid-2 > .form-group > small,
.module-card-embedded .module-form > .module-field > small {
    align-self: start;
}

/* A switch sits on the control row, as tall as the boxes beside it, so the two are level */
.module-card-embedded .module-form > .module-field-bool > .module-bool-control {
    grid-row: 2;
    min-height: var(--control-height);
}

.module-card-embedded .module-form > .module-field-bool > small {
    grid-row: 3;
}

/* ── Appearance page ──────────────────────────────────────────────────────── */
.appearance-intro {
    font-size: 0.9rem;
    margin-bottom: var(--space-8);
    max-width: 720px;
}

.appearance-section {
    margin-bottom: var(--space-8);
}

.appearance-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.appearance-section-head h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 var(--space-1);
}

.appearance-section-head p {
    margin: 0;
    font-size: 0.85rem;
}

.appearance-head-actions {
    display: flex;
    gap: var(--space-2);
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--space-3);
}

.theme-tile {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.theme-tile:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.theme-tile.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.theme-tile-pick {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.theme-tile-pick:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.theme-tile-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-1);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.theme-tile-detail {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.theme-tile.is-selected .theme-tile-name::after {
    content: "Selected";
    flex-shrink: 0;             /* the name wraps instead, never this word */
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
}

.theme-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--pad-chip);
}

.theme-swatches {
    display: flex;
    height: 30px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.theme-swatches span {
    flex: 1;
}

.theme-tile-actions {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-color);
}

.theme-tile-action {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
}

.theme-tile-action:hover:not(:disabled) {
    color: var(--text-main);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.theme-tile-action.is-danger:hover:not(:disabled) {
    color: var(--danger-text);
    border-color: color-mix(in srgb, var(--danger) 50%, transparent);
}

.theme-tile-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.theme-tile-action:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.server-default-row {
    max-width: 420px;
    margin: 0 0 var(--space-5);
}

#theme-editor,
#theme-share,
#theme-import {
    margin-bottom: var(--space-5);
}

.theme-editor-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    align-items: end;
}

.theme-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-2) var(--space-4);
    margin: var(--space-2) 0 var(--space-3);
}

.theme-color {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--text-normal);
    cursor: pointer;
}

.theme-color input[type="color"] {
    width: 38px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

.theme-warnings {
    margin: var(--space-3) 0 0;
    padding-left: var(--space-4);
    font-size: 0.82rem;
    color: var(--warning-text);
}

.theme-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.theme-preview-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-right: auto;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.layout-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.layout-preset {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}

.layout-preset:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.layout-preset.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.layout-preset-name {
    margin-top: var(--space-1);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-main);
}

.layout-preset-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Miniature page drawn with boxes: sidebar on the left, content lines on the right */
.layout-mini {
    display: flex;
    gap: var(--space-1);
    height: 58px;
    padding: var(--space-2);
    border-radius: 6px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
}

.layout-mini-side {
    width: 26%;
    border-radius: 3px;
    background: var(--bg-tertiary);
}

.layout-mini-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-0-5) 0;
}

.layout-mini-main span {
    height: 9px;
    border-radius: 3px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.layout-mini-main span:first-child {
    width: 55%;
    background: rgba(var(--accent-rgb), 0.35);
    border-color: transparent;
}

.layout-mini-compact .layout-mini-main {
    gap: var(--space-1);
}

.layout-mini-compact .layout-mini-main span {
    height: 7px;
}

.layout-mini-focus .layout-mini-side {
    width: 9%;
}

.layout-mini-focus .layout-mini-main {
    padding: var(--space-0-5) 12%;
}

.layout-mini-large .layout-mini-main span {
    height: 12px;
}

.layout-options {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.layout-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.layout-option:last-child {
    border-bottom: 0;
}

.layout-option-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-normal);
}

.layout-option select {
    width: auto;
    min-width: 200px;
}

.segmented {
    display: inline-flex;
    flex-wrap: wrap;            /* its choices go onto a second line on a phone, never off the screen */
    padding: var(--space-1);
    gap: var(--space-1);
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.segmented button {
    padding: var(--space-1) var(--space-3);
    background: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.segmented button:hover {
    color: var(--text-main);
}

.segmented button.is-selected {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 0 0 1px var(--border-color), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.segmented button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* ── Personal layout options (set on <html> from the person's preferences) ── */
html[data-text-size="small"] {
    font-size: 14.5px;
}

html[data-text-size="large"] {
    font-size: 17.5px;
}

[data-width="wide"] .main-inner {
    max-width: none;
}

[data-density="compact"] .page-header { margin-bottom: var(--space-5); padding-bottom: var(--space-4); }
[data-density="compact"] .top-nav { height: 50px; }
[data-density="compact"] .nav li { padding: var(--space-2) var(--space-2); }
[data-density="compact"] .sidebar-category { margin-bottom: var(--space-3); }
[data-density="compact"] .top-level-nav { margin-bottom: var(--space-3); padding-bottom: var(--space-3); }

[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* The device's reduce-motion setting, unless the person chose Animation: Always on */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="on"]) *,
    :root:not([data-motion="on"]) *::before,
    :root:not([data-motion="on"]) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Icons-only sidebar: chosen in Appearance, and automatic on narrower screens */
[data-sidebar="icons"] .sidebar { width: 64px; padding: var(--space-4) var(--space-2); }
[data-sidebar="icons"] .sidebar .category-header { display: none; }
[data-sidebar="icons"] .sidebar .sidebar-category { margin-bottom: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-color); }
[data-sidebar="icons"] .sidebar .sidebar-category.collapsed .category-nav { display: block; }
[data-sidebar="icons"] .sidebar .top-level-nav { margin-bottom: var(--space-2); padding-bottom: 0; border-bottom: 0; }
[data-sidebar="icons"] .nav li { justify-content: center; padding: var(--space-2) 0; }
[data-sidebar="icons"] .nav li span { display: none; }
[data-sidebar="icons"] .nav li i { width: auto; font-size: 1rem; }

@media (max-width: 1000px) {
    html:root:not([data-nav-position="top"]):not([data-nav-position="bottom"]) .sidebar { width: 64px; padding: var(--space-4) var(--space-2); }
    html:root:not([data-nav-position="top"]):not([data-nav-position="bottom"]) .sidebar .category-header { display: none; }
    html:root:not([data-nav-position="top"]):not([data-nav-position="bottom"]) .sidebar .sidebar-category { margin-bottom: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-color); }
    html:root:not([data-nav-position="top"]):not([data-nav-position="bottom"]) .sidebar .sidebar-category.collapsed .category-nav { display: block; }
    html:root:not([data-nav-position="top"]):not([data-nav-position="bottom"]) .sidebar .top-level-nav { margin-bottom: var(--space-2); padding-bottom: 0; border-bottom: 0; }
    html:root:not([data-nav-position="top"]):not([data-nav-position="bottom"]) .nav li { justify-content: center; padding: var(--space-2) 0; }
    html:root:not([data-nav-position="top"]):not([data-nav-position="bottom"]) .nav li span { display: none; }
    html:root:not([data-nav-position="top"]):not([data-nav-position="bottom"]) .nav li i { width: auto; font-size: 1rem; }
    html:root:not([data-nav-position="top"]):not([data-nav-position="bottom"]) .nav-pinned-label { display: none; }
    html:root:not([data-nav-position="top"]):not([data-nav-position="bottom"]) .nav-pinned { margin-bottom: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-color); }
    .account-name,
    .logo-version {
        display: none;
    }

    .overview-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .top-nav {
        padding: 0 var(--space-3);
    }

    .logo .brand-name {
        display: none;
    }

    .server-switcher-btn {
        max-width: 160px;
    }

    .page-header {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    /* On its own line, so several buttons wrap instead of running off the screen */
    .header-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

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

/* ── Security Center ─────────────────────────────────────────────────────────
   Status colors mean risk levels only, and always come with an icon and a label. */
:root {
    --status-good: #0ca30c;
    --status-warning: #fab219;
    --status-serious: #ec835a;
    --status-critical: #d03b3b;
}

/* The light look has its own steps (after the ones above, which a rule further up would lose to): the
   yellow above is 1.8:1 on white, for an icon or a word */
[data-theme="light"] {
    --status-good: #0b7a0b;
    --status-warning: #946000;
    --status-serious: #b8491a;
    --status-critical: #c53030;
}

.sec-banner {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--status-warning);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    font-size: 0.88rem;
    color: var(--text-normal);
}

.sec-banner p {
    margin: 0;
}

.sec-status {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    margin-bottom: var(--space-4);
}

.sec-threat,
.sec-protections {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: var(--space-4) var(--space-5);
}

.sec-threat {
    border-left: 4px solid var(--status-good);
}

.sec-threat-elevated { border-left-color: var(--status-warning); }
.sec-threat-high { border-left-color: var(--status-serious); }
.sec-threat-critical { border-left-color: var(--status-critical); }

.sec-threat-level {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.sec-threat-level i { color: var(--status-good); }
.sec-threat-elevated .sec-threat-level i { color: var(--status-warning); }
.sec-threat-high .sec-threat-level i { color: var(--status-serious); }
.sec-threat-critical .sec-threat-level i { color: var(--status-critical); }

.sec-threat-caption {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sec-threat-level strong {
    font-size: 1.35rem;
    color: var(--text-main);
}

.sec-threat-reasons {
    margin: var(--space-2) 0 0 var(--space-4);
    font-size: 0.86rem;
    color: var(--text-normal);
    line-height: 1.5;
}

.sec-threat p {
    margin: var(--space-2) 0 0;
    font-size: 0.86rem;
}

.sec-protections {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sec-prot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.86rem;
}

.sec-prot-label {
    font-weight: 600;
    color: var(--text-normal);
}

.sec-prot-state {
    color: var(--text-muted);
}

.sec-prot-state.is-paused {
    color: var(--text-main);
    font-weight: 600;
}

.sec-note {
    margin: var(--space-1) 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* The risk queue and the latest joins, with the cards beside them only while the first column has room for its
   tables (about 800px). In a narrower window, or with the menu taking room on the left, the cards go below, where
   two fixed columns would cut a table's last columns off */
.sec-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.sec-main,
.sec-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sec-main {
    flex: 1.6 1 800px;
}

.sec-side {
    flex: 1 1 280px;
}

/* Latest joins: account age and the invite used, with the risk chip */
.sec-joins-age {
    white-space: nowrap;
}

.sec-joins-age.is-new {
    color: var(--status-warning);
    font-weight: 600;
}

.sec-layout .settings-card,
.sec-trends .settings-card {
    margin-bottom: 0;
}

.sec-queue-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--pad-card-x) 0;
}

/* What the search of the server's history for old spam found, between the queue's title and its filters */
.sec-history-note {
    margin: 0;
    padding: var(--space-3) var(--pad-card-x) 0;
    font-size: 0.85rem;
}

/* The accounts that search found and are still here, with the button that cleans up after them */
.sec-history-found {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--pad-card-x) 0;
    font-size: 0.85rem;
}

.sec-history-found p {
    margin: 0;
}

.sec-queue-filters .settings-select,
.sec-queue-filters input[type="search"] {
    width: auto;
    min-width: 170px;
}

.sec-check {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.85rem;
    color: var(--text-normal);
}

.sec-queue-body {
    overflow-x: auto;
}

.sec-who {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 220px;
}

.sec-who .sec-avatar {
    margin-top: var(--space-0-5);
}

.sec-who-name {
    display: block;
    font-weight: 600;
    color: var(--text-main);
}

.sec-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.sec-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-normal);
    font-size: 0.8rem;
    font-weight: 700;
}

.sec-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 1.2rem;
}

.sec-risk {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sec-score {
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.sec-score-lg {
    font-size: 1.2rem;
}

.sec-bar {
    width: 48px;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.sec-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--status-good);
}

.sec-bar-elevated { background: var(--status-warning); }
.sec-bar-high { background: var(--status-serious); }
.sec-bar-critical { background: var(--status-critical); }

.sec-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--pad-chip);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

.sec-chip-low i { color: var(--status-good); }
.sec-chip-elevated i { color: var(--status-warning); }
.sec-chip-high i { color: var(--status-serious); }
.sec-chip-critical i { color: var(--status-critical); }

.sec-why {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.sec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.sec-tag {
    padding: var(--pad-chip);
    border-radius: 4px;
    background: var(--bg-tertiary);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-normal);
}

.sec-tag-muted {
    color: var(--text-muted);
}

.sec-empty {
    margin: 0;
    padding: var(--space-2) 0;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.sec-link {
    min-height: 24px;
    padding: 0;
    margin: calc(-1 * var(--space-1)) 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.sec-warning {
    margin: 0 0 var(--space-2);
    font-size: 0.85rem;
    color: var(--danger-text);
}

/* The briefing: how the week went on one side, with its trends, and what it calls for on the other (who to
   look at, what to do), with a line between them. A week that calls for nothing is just the first part. */
.sec-briefing-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: var(--space-5) var(--space-8);
}

.sec-briefing-body.is-short {
    grid-template-columns: minmax(0, 1fr);
}

.sec-briefing-week {
    max-width: 68ch;
}

.sec-briefing-week section {
    margin-top: var(--space-4);
}

.sec-briefing-calls {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-left: var(--space-8);
    border-left: 1px solid var(--border-color);
}

.sec-briefing-body p {
    margin: 0 0 var(--space-2);
    font-size: 0.87rem;
    line-height: 1.5;
    color: var(--text-normal);
}

.sec-briefing-body p:last-child {
    margin-bottom: 0;
}

.sec-briefing-body .sec-briefing-headline {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main);
}

.sec-briefing-body h4 {
    margin: 0 0 var(--space-1);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sec-briefing-body ul {
    margin: 0 0 0 var(--space-4);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-normal);
}

@media (max-width: 1000px) {
    .sec-briefing-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .sec-briefing-calls {
        padding: var(--space-5) 0 0;
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }
}

/* On a phone the button for a new briefing drops under the heading instead of squeezing it */
@media (max-width: 640px) {
    #sec-briefing > .settings-card-header {
        flex-wrap: wrap;
    }
}

/* VirusTotal: what's checked, and a lookup anyone with Write can make */
.sec-vt-body > p {
    margin: 0 0 var(--space-3);
    font-size: 0.87rem;
    line-height: 1.5;
    color: var(--text-normal);
}

.sec-vt-form {
    display: flex;
    gap: var(--gap-row);
    min-width: 0;
}

.sec-vt-form .settings-input {
    flex: 1;
    min-width: 0;
}

.sec-vt-result:not(:empty) {
    margin-top: var(--space-3);
}

/* A VirusTotal key of the server's own, under the lookup box: one quiet line, or the box to type it into */
.sec-own-key {
    margin-top: var(--space-3);
    font-size: 0.85rem;
}

.sec-own-key p {
    margin: 0;
}

/* The key's box keeps a usable width: on a phone its two buttons go under it */
.sec-own-key .sec-vt-form {
    flex-wrap: wrap;
}

.sec-own-key .sec-vt-form .settings-input {
    flex: 1 1 220px;
}

.sec-own-key .sec-vt-form .btn {
    min-height: var(--control-height);      /* as tall as the box beside them, on a line of their own too */
}

.sec-own-key .sec-vt-form + p,
.sec-own-key p + p {
    margin-top: var(--space-2);
}

.sec-vt-result p {
    margin: 0;
    font-size: 0.85rem;
}

.sec-vt-answer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-row);
    font-size: 0.85rem;
}

.sec-vt-name {
    min-width: 0;
    color: var(--text-main);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sec-event-vt {
    margin: var(--space-1) 0;
    padding-left: var(--space-4);
    font-size: 0.82rem;
    color: var(--text-normal);
    overflow-wrap: anywhere;
}

.sec-event-vt a {
    margin-left: var(--space-2);
}

.sec-feed {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-1);
}

.sec-event {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
}

.sec-event:last-child {
    border-bottom: 0;
}

.sec-event-icon {
    margin-top: var(--space-1);
    color: var(--text-muted);
}

.sec-event-icon.sec-event-elevated { color: var(--status-warning); }
.sec-event-icon.sec-event-high { color: var(--status-serious); }
.sec-event-icon.sec-event-critical { color: var(--status-critical); }

.sec-event-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.84rem;
    color: var(--text-main);
}

.sec-event-body p {
    margin: var(--space-0-5) 0;
    font-size: 0.84rem;
    color: var(--text-normal);
    overflow-wrap: anywhere;
}

.sec-event-people {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.8rem;
}

.sec-event blockquote,
.sec-ai-item blockquote {
    margin: var(--space-1) 0;
    padding: var(--space-1) var(--space-2);
    border-left: 3px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--text-normal);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sec-trends-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-2) 0 var(--space-3);
}

.sec-trends-head h2,
.sec-settings-title {
    font-size: 1.05rem;
    color: var(--text-main);
}

.sec-settings-title {
    margin: 0 0 var(--space-3);
}

.sec-trends {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    margin-bottom: var(--space-8);
}

.sec-table-wrap {
    max-height: 300px;
    overflow: auto;
}

.sec-chart-empty {
    margin: 0 0 var(--space-2);
    font-size: 0.85rem;
}

#wl-security-modules {
    display: flex;
    flex-direction: column;
    gap: var(--space-page);
}

.sec-member-modal {
    width: 760px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
}

.sec-member-modal .modal-body {
    padding: var(--space-5) var(--space-6);
}

.sec-member-modal h3 {
    margin: var(--space-5) 0 var(--space-2);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sec-member-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.sec-member-head p {
    margin: var(--space-1) 0 0;
    font-size: 0.82rem;
}

.sec-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.sec-profile-form {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.sec-profile-form summary {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
}

.sec-profile-form p {
    margin: var(--space-2) 0;
    font-size: 0.8rem;
}

.sec-profile-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.sec-profile-row .settings-select {
    width: auto;
}

.sec-profile-row .settings-input {
    flex: 1;
    min-width: 180px;
}

.sec-contribs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sec-contribs li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-normal);
}

.sec-contribs li small {
    display: block;
    overflow-wrap: anywhere;
}

.sec-contrib-weight {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.sec-contribs li.is-trust .sec-contrib-weight {
    color: var(--text-muted);
}

.sec-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    margin: var(--space-4) 0 0;
    font-size: 0.85rem;
}

.sec-facts dt {
    color: var(--text-muted);
}

.sec-facts dd {
    margin: 0;
    color: var(--text-normal);
    overflow-wrap: anywhere;
}

.sec-ai-item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-normal);
}

.sec-ai-item p {
    margin: var(--space-1) 0;
}

.sec-ai-item ul {
    margin: var(--space-1) 0 0 var(--space-4);
}

/* The name of a list in a finding ("What Equinox found", "Patterns") */
.sec-ai-item > small {
    display: block;
    margin-top: var(--space-2);
}

.sec-evidence {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 320px;
    overflow-y: auto;
}

.sec-message {
    padding: var(--space-2) var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-main);
}

.sec-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.75rem;
    color: var(--text-normal);
}

.sec-message p {
    margin: var(--space-1) 0 0;
    font-size: 0.84rem;
    color: var(--text-main);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sec-message-head a,
.sec-ai-item a {
    color: var(--accent);
}

.sec-history {
    margin: 0 0 0 var(--space-4);
    font-size: 0.84rem;
    color: var(--text-normal);
}

.ai-usage {
    margin-top: var(--space-1);
    font-size: 0.85rem;
    color: var(--text-normal);
}

.ai-usage p {
    margin: 0 0 var(--space-2);
}

.ai-usage-invalid_key,
.ai-usage-no_credit,
.ai-usage-forbidden,
.ai-usage-error {
    color: var(--danger-text);
}

.ai-usage table {
    max-width: 520px;
    margin-top: var(--space-2);
}

@media (max-width: 1000px) {
    .sec-status,
    .sec-trends {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .sec-prot {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sec-prot .btn {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

[hidden] {
    display: none !important;
}

/* Part of a page that belongs to a switched-off feature (core.js setHiddenTabs) */
.feature-off {
    display: none !important;
}

/* ── Applications and Vouches pages ─────────────────────────────────────────
   Left: the server's applications. Right: what members sent, or an
   application's setup. Vouches reuse the list and detail styles. */
.link-button {
    /* 24px to press; the negative margin keeps the line it sits in as tall as its neighbors (as .btn-link) */
    min-height: 24px;
    margin: calc(-1 * var(--space-1)) 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.link-button:hover,
.link-button:focus-visible {
    text-decoration: underline;
}

.apps-tabs,
.apps-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-0-5);
    padding: var(--space-0-5);
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* (the bar is the control height: its tabs, its 2px of padding and its border) */
.apps-tab,
.apps-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: calc(var(--control-height) - var(--space-1) - 2px);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.apps-tab:hover,
.apps-filter:hover {
    color: var(--text-main);
}

.apps-tab.is-active,
.apps-filter.is-active {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.apps-filter-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.apps-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.apps-toolbar-end {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.apps-search {
    width: 240px;
    max-width: 100%;
}

.data-table-wrap {
    overflow-x: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

/* Inside a card a table has no box of its own (it was a box in the card's box): it runs from edge to edge of
   the card under a line, and as the last thing in the card down to the card's bottom edge. */
.settings-card-body:not(.is-flush) > .data-table-wrap,
.settings-card-body:not(.is-flush) > :is(.stack, :only-child) > .data-table-wrap {
    margin-inline: calc(-1 * var(--pad-card-x));
    border-width: 1px 0;
    border-radius: 0;
    background: none;
}

/* (first in the card: straight under the card's header, whose line is its top line) */
.settings-card-body:not(.is-flush) > .data-table-wrap:first-child,
.settings-card-body:not(.is-flush) > :is(.stack, :only-child):first-child > .data-table-wrap:first-child {
    margin-top: calc(-1 * var(--pad-card-y));
    border-top: 0;
}

.settings-card-body:not(.is-flush) > .data-table-wrap:last-child,
.settings-card-body:not(.is-flush) > :only-child > .data-table-wrap:last-child {
    margin-bottom: calc(-1 * var(--pad-card-y));
    border-bottom: 0;
    border-radius: 0 0 9px 9px;         /* the card's corners, inside its border */
}

/* In a card, a table's first and last columns keep the card's side padding, so they start under the card's
   title and end where its buttons do */
.settings-card :is(.settings-card-body.is-flush, .data-table-wrap) .data-table :is(th, td):first-child {
    padding-left: var(--pad-card-x);
}

.settings-card :is(.settings-card-body.is-flush, .data-table-wrap) .data-table :is(th, td):last-child {
    padding-right: var(--pad-card-x);
}

/* A row's buttons sit at the row's end, whichever table it is */
.data-table td:last-child:has(> .cell-actions) {
    text-align: right;
}

/* Tables: one look on every page; .data-table-compact for dense lists */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th {
    padding: var(--pad-cell);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

/* A short cell that reads badly broken over lines */
.data-table .nowrap {
    white-space: nowrap;
}

.data-table td {
    padding: var(--pad-cell);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-normal);
    vertical-align: middle;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-table-compact th,
.data-table-compact td {
    padding: var(--pad-cell-compact);
    font-variant-numeric: tabular-nums;
}

/* A row that stands for the whole table: loading, nothing to show, or an error */
.data-table .table-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}

.data-table .table-empty.is-error {
    color: var(--danger-text);
}

.table-empty > i:first-child {
    margin-right: var(--gap-icon);
}

/* Buttons side by side in a table cell */
.cell-actions {
    display: inline-flex;
    flex-wrap: wrap;            /* on a phone the second one goes under the first, never off the screen */
    align-items: center;
    gap: var(--gap-row);
}

/* In a table a row's buttons stay side by side (a table scrolls sideways before a cell breaks). Left to wrap,
   a column that takes the spare room (width: 100%) pressed this one down to one button's width, and Edit sat
   on top of Delete in every row. */
.data-table td > .cell-actions {
    flex-wrap: nowrap;
}

/* An invite's code, as it is typed in Discord */
.invite-code {
    margin-right: var(--space-2);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 600;
    color: var(--accent);
}

/* A card body that holds a table edge to edge */
.settings-card-body.is-flush {
    padding: 0;
    overflow-x: auto;
}

/* Alignment utilities win over component rules, as utilities should */
.text-end {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.apps-row {
    cursor: pointer;
}

.apps-row:hover,
.apps-row:focus-visible {
    background: var(--bg-tertiary);
    outline: none;
}

.apps-col-check {
    width: 36px;
}

.apps-who {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.apps-who > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.apps-who-name {
    color: var(--text-main);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apps-who-id {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.app-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.app-avatar-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-weight: 700;
}

.apps-none {
    padding: var(--space-10) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}

.apps-loading {
    padding: var(--space-4) var(--space-4);
}

.app-status {
    display: inline-block;
    padding: var(--space-0-5) var(--space-2);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.app-status-pending {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
    color: var(--text-main);
}

.app-status-accepted {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--text-main);
}

.app-status-denied {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--text-main);
}

.app-status-closed {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

.apps-templates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.apps-template {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-darker);
    color: var(--text-normal);
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s;
}

.apps-template strong {
    color: var(--text-main);
    font-size: 0.92rem;
}

.apps-template:hover,
.apps-template.is-selected {
    border-color: var(--primary);
}

.apps-template.is-selected {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.apps-new .modal-content {
    width: 720px;
    max-width: calc(100vw - 32px);
}

.apps-new-body {
    padding: var(--space-4) var(--space-6);
}

.apps-new-label {
    margin: var(--space-4) 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.apps-new .apps-templates {
    margin-top: var(--space-2);
}

/* Setup */
.apps-note {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.apps-preview-wrap {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

.apps-preview-label {
    margin: 0 0 var(--space-2);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.apps-preview {
    max-width: 560px;
}

.apps-preview-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.apps-panel-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* One submission or vouch */
.app-detail .app-detail-content {
    width: 1040px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
}

.app-detail-head {
    gap: var(--space-4);
}

.app-detail-head h2 {
    font-size: 1.1rem;
}

.app-detail-head-end {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.app-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: var(--space-5);
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
}

.app-answers {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.app-answer h4 {
    margin: 0 0 var(--space-1);
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.app-answer p {
    margin: 0;
    color: var(--text-main);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* An answer that was pasted in, and how it reads: said between the question and the answer */
.app-answer p.app-answer-mark {
    margin-bottom: var(--space-1);
    color: var(--warning-text);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

.app-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.app-side-card {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.86rem;
}

.app-side-card h4 {
    margin: 0 0 var(--space-2);
    color: var(--text-main);
    font-size: 0.86rem;
}

.app-side-card p {
    margin: var(--space-2) 0 0;
    line-height: 1.45;
}

.app-side-card textarea {
    width: 100%;
    margin-bottom: var(--space-2);
}

.app-fact {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.app-fact > :last-child {
    text-align: right;
    overflow-wrap: anywhere;
}

.app-list {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-4);
}

.app-list li {
    margin: var(--space-0-5) 0;
}

.app-ai-note {
    font-size: 0.75rem;
}

.app-history {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-history li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
}

.app-history li:last-child {
    border-bottom: 0;
}

.app-history p {
    flex-basis: 100%;
    margin: var(--space-0-5) 0 0;
    color: var(--text-muted);
    white-space: pre-wrap;
}

.app-detail-foot {
    align-items: center;
}

.app-detail-spacer {
    flex: 1;
}

.app-decided {
    font-size: 0.85rem;
}

/* The threat detection member view opens above an application */
#sec-member-modal {
    z-index: 2100;
}

/* Ranked tables (Analytics): the place, the name, and one or more counts. The table sets padding and lines. */
.data-table .lb-rank {
    width: 1%;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.data-table .lb-name {
    overflow-wrap: anywhere;
}

.data-table .lb-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Permissions: which applications a role can see */
.perm-app-scope {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

@media (max-width: 900px) {
    .app-detail-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .apps-search {
        width: 100%;
    }
}

/* Lists inside settings (questions, strike punishments...): one line per entry with the
   fields side by side. A list of single fields is numbered, with no repeated label. */
.module-rows {
    counter-reset: module-row;
}

/* Fields line up along their labels: aligning bottoms lifted a field whose help text made it taller */
.module-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-3);
}

.module-form .module-row > .module-field {
    flex: 1 1 200px;
    margin-bottom: 0;
}

.module-form .module-row > .module-field-bool {
    flex: 0 0 auto;
}

.module-row > .module-field-bool > .module-bool-control {
    min-height: 44px;
}

.module-row > .module-row-actions {
    flex: 0 0 auto;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-6);   /* level with the fields' controls, below their labels */
    margin-left: auto;
}

.module-row:not(:has(> .module-field ~ .module-field)) > .module-row-actions {
    margin-top: 0;
}

.module-row:not(:has(> .module-field ~ .module-field)) {
    align-items: center;
}

.module-row:not(:has(> .module-field ~ .module-field)) > .module-field > label {
    display: none;
}

.module-row:not(:has(> .module-field ~ .module-field))::before {
    counter-increment: module-row;
    content: counter(module-row) ".";
    min-width: 1.4em;
    color: var(--text-muted);
    font-weight: 600;
}

/* ── The application editor (applications.js renderAppSetup) ─────────────────
   About a screen long: its name and questions open, the other groups of options folded into rows. */

/* Its first card has no title: the bar above already names the application */
#apps-editor .apps-setup-card[data-group="basics"] > .module-body {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* A folded group says what is set on one line; the row opens to every field */
.apps-setup-list .mod-row-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apps-setup-list .mod-row-panel {
    padding-right: 0;
}

/* The panel's settings with its preview beside them, where there is room */
@media (min-width: 1100px) {
    .apps-setup-list [data-group="panel"] > .mod-row-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
        column-gap: var(--space-6);
        align-items: start;
    }

    .apps-setup-list [data-group="panel"] > .mod-row-panel > :is(.mod-row-about, .apps-panel-actions) {
        grid-column: 1 / -1;
    }

    /* Beside the settings the preview starts level with them, with no line above it */
    .apps-setup-list [data-group="panel"] > .mod-row-panel > .apps-preview-wrap {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

/* The titles of the questions' columns: shown on a wide screen only, where each question is one line */
.apps-q-head {
    display: none;
}

/* Each question on one line: its number, the question, how it is answered, a check on a typed answer, whether it
   must be answered. What only some need (the choices of a list, a pattern) goes on a line under it. The titles are
   said once above the list, and each control keeps its own label for screen readers. On a narrow screen the
   questions stack as every other list of rows does. */
@media (min-width: 761px) {
    #apps-editor .apps-setup-card[data-group="questions"] .module-rows {
        align-items: stretch;
    }

    #apps-editor .apps-setup-card[data-group="questions"] :is(.apps-q-head, .module-row) {
        display: grid;
        grid-template-columns: var(--space-6) minmax(0, 1fr) 190px 180px 72px 72px;
        align-items: center;
        gap: var(--space-1) var(--space-2);
    }

    #apps-editor .apps-setup-card[data-group="questions"] .module-rows > .btn {
        align-self: flex-start;
    }

    #apps-editor .apps-q-head {
        padding-bottom: var(--space-1);
        color: var(--text-muted);
        font-size: 0.74rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    #apps-editor .apps-q-head > :nth-child(5) {
        text-align: center;
    }

    #apps-editor .module-rows:not(:has(> .module-row)) > .apps-q-head {
        display: none;
    }

    #apps-editor .apps-setup-card[data-group="questions"] .module-row {
        padding: var(--space-1) 0;
        background: none;
        border: 0;
        border-radius: 0;
    }

    #apps-editor .apps-setup-card[data-group="questions"] .module-row::before {
        counter-increment: module-row;
        content: counter(module-row);
        grid-area: 1 / 1;
        color: var(--text-muted);
        font-size: 0.85rem;
        font-weight: 600;
        text-align: right;
    }

    #apps-editor .apps-setup-card[data-group="questions"] .module-row > [data-key="question"] { grid-area: 1 / 2; }
    #apps-editor .apps-setup-card[data-group="questions"] .module-row > [data-key="kind"] { grid-area: 1 / 3; }
    #apps-editor .apps-setup-card[data-group="questions"] .module-row > [data-key="check"] { grid-area: 1 / 4; }
    #apps-editor .apps-setup-card[data-group="questions"] .module-row > [data-key="required"] { grid-area: 1 / 5; justify-self: center; }

    #apps-editor .apps-setup-card[data-group="questions"] .module-row > .module-row-actions {
        grid-area: 1 / 6;
        min-height: 0;
        margin: 0;
    }

    #apps-editor .apps-setup-card[data-group="questions"] .module-row > :is([data-key="options"], [data-key="pattern"]) {
        grid-area: 2 / 2 / auto / 5;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: var(--space-2);
    }

    #apps-editor .apps-setup-card[data-group="questions"] .module-row > :is([data-key="options"], [data-key="pattern"]) > label {
        margin: 0;
    }

    #apps-editor .apps-setup-card[data-group="questions"] .module-row > [data-key="pattern"] > small {
        grid-column: 2;
    }

    /* The box already says "Separate with commas" */
    #apps-editor .apps-setup-card[data-group="questions"] .module-row > [data-key="options"] > small {
        display: none;
    }

    #apps-editor .apps-setup-card[data-group="questions"] .module-row > :is([data-key="question"], [data-key="kind"], [data-key="check"]) > label,
    #apps-editor .apps-setup-card[data-group="questions"] .module-row > [data-key="required"] .module-bool-control > label:not(.toggle-switch) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    #apps-editor .apps-setup-card[data-group="questions"] .module-row > [data-key="required"] > .module-bool-control {
        min-height: var(--control-height);
    }

    /* Remove is there on every line, so it is quiet until pointed at */
    #apps-editor .apps-setup-card[data-group="questions"] .module-row-actions > .btn {
        background: none;
        border-color: transparent;
        color: var(--text-muted);
    }

    #apps-editor .apps-setup-card[data-group="questions"] .module-row-actions > .btn:is(:hover, :focus-visible) {
        background: color-mix(in srgb, var(--danger) 14%, transparent);
        color: var(--danger-text);
    }
}

/* A list under a heading that already says what it is needs no label of its own */
.apps-setup-card[data-group="questions"] .module-field-rows > label,
.tp-type .module-field-rows > label,
#cc-actions > .module-field-rows > label {
    display: none;
}

/* Settings that don't apply right now (like Choices on a typed answer) */
.module-field[hidden] {
    display: none !important;
}

/* Popup questions (Forms page, ticket types): the hint and the answer lengths are for the Everything view */
:root:not([data-detail="full"]) :is(#forms-main, .tp-type) .module-row > :is([data-key="placeholder"], [data-key="min_length"], [data-key="max_length"]) {
    display: none;
}

/* Each question: its text on one line, its answer settings below */
.apps-setup-card[data-group="questions"] .module-row > [data-key="question"],
.tp-type .module-row > [data-key="question"] {
    flex-basis: 100%;
}

/* ── Ticket panel editor (tickets.js) ────────────────────────────────────────
   A ticket type is a card of generated fields: what every type needs, then sections that fold away. */
.tp-type > .module-card-head {
    align-items: center;
}

.tp-type > .module-card-head h3 {
    margin: 0;
}

/* A line about a folding section, across the top of it */
.module-group-note {
    grid-column: 1 / -1;
    margin: 0 0 var(--space-field);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.section-title-row.is-centered h2 {
    margin: 0;
}

.apps-setup-card[data-group="questions"] .module-field-rows {
    margin-bottom: var(--space-4);
}

/* Export menu on the applications list */
.apps-export {
    position: relative;
}

.apps-export > summary {
    list-style: none;
    cursor: pointer;
}

.apps-export > summary::-webkit-details-marker {
    display: none;
}

.apps-export-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 170px;
    padding: var(--space-1);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-float);
}

.apps-export-menu a {
    padding: var(--space-2) var(--space-2);
    border-radius: 6px;
    color: var(--text-normal);
    font-size: 0.86rem;
    text-decoration: none;
}

.apps-export-menu a:hover,
.apps-export-menu a:focus-visible {
    background: var(--bg-tertiary);
    color: var(--text-main);
}

/* Panel preview extras */
.apps-preview-image {
    display: block;
    max-width: 100%;
    max-height: 200px;
    margin-top: var(--space-2);
    border-radius: 4px;
    object-fit: cover;
}

.apps-preview-footer {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.apps-preview-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 400px;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* Color settings in module and application forms: a swatch the height of other boxes, and its code */
.module-field-color input[type="color"] {
    width: 56px;
    height: 44px;
    padding: var(--space-1);
    cursor: pointer;
}

.module-field-color input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.module-field-color input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 4px;
}

/* The bot's profile in this server (Settings page): a Discord-style card beside the fields */
.bot-profile {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.bot-profile-card {
    position: relative;
    overflow: hidden;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.bot-profile-banner {
    height: 96px;
    background: color-mix(in srgb, var(--primary) 55%, var(--bg-tertiary));
    background-position: center;
    background-size: cover;
}

.bot-profile-avatar {
    position: absolute;
    top: 52px;
    left: 16px;
    width: 80px;
    height: 80px;
    border: 5px solid var(--bg-darker);
    border-radius: 50%;
    background: var(--bg-darker);
    object-fit: cover;
}

.bot-profile-body {
    padding: var(--space-12) var(--space-4) var(--space-4);
}

.bot-profile-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-main);
    font-size: 1.05rem;
}

.bot-profile-body p {
    margin: var(--space-2) 0 0;
    color: var(--text-normal);
    font-size: 0.86rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.bot-profile-fields > .form-group {
    margin-bottom: var(--space-4);
}

.bot-profile-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.bot-profile-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* As tall as the row of pictures beside it, with its buttons in the middle, so Avatar's and Banner's buttons
   sit level */
.bot-profile-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height);
}

.bot-profile-buttons label.btn {
    cursor: pointer;
}

.bot-profile-buttons label.btn:focus-within {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Upload, for a server without Equinox Premium: off, like a disabled button */
.bot-profile-buttons label.btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.bot-profile-premium {
    display: block;
    margin-top: var(--space-2);
}

/* The bot's picture: its usual one, then the same picture in other colors, then Upload. Round, as Discord
   shows an avatar, in every corner style. */
.bot-avatar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.bot-avatar-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bot-avatar-choice {
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-darker);
    overflow: hidden;
    cursor: pointer;
}

.bot-avatar-choice img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bot-avatar-choice:hover {
    border-color: var(--text-muted);
}

.bot-avatar-choice:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.bot-avatar-choice[aria-pressed="true"],
.bot-banner-kept[aria-pressed="true"] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* The banner a server uploaded, kept beside Upload: a banner's shape, as tall as the buttons */
.bot-banner-kept {
    height: var(--space-6);
    aspect-ratio: 17 / 6;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-darker);
    overflow: hidden;
    cursor: pointer;
}

.bot-banner-kept img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bot-banner-kept:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* What a server uploaded and can't use without Premium: still there, dimmed */
.bot-avatar-choice:disabled,
.bot-banner-kept:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* "Make your own avatar": the last of the profile's fields and as wide as they are. A row each for the
   background and the letters, the name down the side so the two rows of colors line up. */
.module-group.bot-avatar-own {
    margin: var(--space-4) 0 0;
}

.bot-avatar-own .module-group-body {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding-bottom: var(--space-4);
}

.bot-avatar-own .bot-profile-label {
    margin: 0;
}

.bot-avatar-own .cp-row {
    margin-top: 0;
}

/* The picker and its code say "custom" by themselves here */
.bot-avatar-own .cp-custom span {
    display: none;
}

.bot-avatar-own small {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .bot-avatar-own .module-group-body {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .bot-avatar-own .cp-row {
        margin-bottom: var(--space-2);
    }
}

@media (max-width: 900px) {
    .bot-profile {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Developer and Server Tools pages ───────────────────────────────────────── */
.tools-tabs {
    margin-bottom: var(--space-5);
}

.tools-body {
    display: flex;
    flex-direction: column;
}

.tools-card {
    margin: 0;
}

/* Text in these cards is the size of the rest of the dashboard's */
.tools-card .settings-card-body {
    color: var(--text-normal);
    font-size: 0.9rem;
}

/* A switch beside the fields of a form sits level with them */
.resp-switch {
    min-height: 2.5rem;
}

/* Past incidents: a row each, which opens to its report and timeline */
.resp-past + .resp-past {
    border-top: 1px solid var(--border-color);
}

.resp-past > summary {
    padding: var(--space-2) 0;
    color: var(--text-main);
    font-weight: 600;
    cursor: pointer;
}

.resp-past > summary small {
    margin-left: var(--space-2);
    font-weight: 400;
}

.resp-past[open] {
    padding-bottom: var(--space-4);
}

.resp-past > .stat-row {
    margin: var(--space-2) 0 var(--space-4);
}

.tools-card .settings-card-header p {
    margin: var(--space-0-5) 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.tools-major {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border-color));
}

.tools-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
}

.tools-row:last-child {
    border-bottom: 0;
}

.tools-row strong {
    color: var(--text-main);
    font-size: 0.92rem;
}

.tools-row p {
    margin: var(--space-0-5) 0 0;
    font-size: 0.82rem;
    overflow-wrap: anywhere;    /* a path or an ID longer than the row breaks, and doesn't stick out of the card */
}

/* The text gives way: it wraps inside the row, whatever the row's width, and a name too long for one line is cut.
   (max-width: stacked on a phone, the text is as wide as its longest line unless it is held to the row) */
.tools-row > :first-child {
    min-width: 0;
    max-width: 100%;
}

/* The control at a row's end keeps its size. A row of text alone has no control: its only child is the text, and
   told not to shrink it ran past the card in a window between a phone's width and a wide one's */
.tools-row > :last-child:not(:first-child) {
    flex-shrink: 0;
}

.tools-inline,
.tools-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2);
}

.tools-inline .settings-select,
.tools-inline .settings-input {
    width: auto;
    min-width: 180px;
}

.tools-form .form-group {
    margin: 0;
    min-width: 220px;
}

.tools-grow {
    flex: 1;
}

.tools-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--text-normal);
    font-size: 0.88rem;
    cursor: pointer;
}

.tools-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.tools-actions-top {
    margin: 0 0 var(--space-3);
}

a.btn.is-disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Setup check */
.tools-summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    border-radius: 10px;
}

.tools-summary > div {
    flex: 1;
}

.tools-summary strong {
    color: var(--text-main);
}

.tools-summary p {
    margin: var(--space-0-5) 0 0;
    font-size: 0.85rem;
}

.tools-summary > i {
    font-size: 1.4rem;
}

.tools-summary.is-good { border-left-color: var(--success); }
.tools-summary.is-good > i { color: var(--success-text); }
.tools-summary.is-warn { border-left-color: var(--warning); }
.tools-summary.is-warn > i { color: var(--warning-text); }
.tools-summary.is-bad { border-left-color: var(--danger); }
.tools-summary.is-bad > i { color: var(--danger-text); }

.tools-findings {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tools-findings li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-normal);
    font-size: 0.88rem;
}

.tools-findings li:last-child {
    border-bottom: 0;
}

.tools-findings li > span:not(.tools-area) {
    flex: 1;
}

.tools-area {
    flex: 0 0 130px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tools-findings li.is-problem > i { color: var(--danger-text); }
.tools-findings li.is-warning > i { color: var(--warning-text); }

.tools-grid {
    display: grid;
    /* (min(): a column never asks for more room than there is, so on a phone it is one column, not a page
       that scrolls sideways) */
    grid-template-columns: repeat(auto-fit, minmax(min(var(--tools-col, 320px), 100%), 1fr));
    gap: var(--space-4);
}

/* Cards that hold a table of three columns need more room each before they sit side by side (the console's
   Overview): narrower than this the table would scroll inside its card */
.tools-grid-wide {
    --tools-col: 440px;
}

.tools-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tools-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-normal);
    font-size: 0.88rem;
}

.tools-list li:last-child {
    border-bottom: 0;
}

.tools-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: 90px;
    margin-top: var(--space-4);
}

.tools-bar {
    display: flex;
    flex: 1;
    min-width: 0;               /* seven bars share the card's width, however narrow it is */
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: var(--space-1);
}

.tools-bar span {
    width: 100%;
    min-height: 2px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
}

.tools-bar small {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.tools-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    font-size: 0.88rem;
}

.tools-facts dt {
    color: var(--text-muted);
}

.tools-facts dd {
    margin: 0;
    color: var(--text-main);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.tools-errors {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tools-errors li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
}

.tools-errors li:last-child {
    border-bottom: 0;
}

.tools-error-head {
    display: flex;
    flex-wrap: wrap;            /* on a phone the tags and the date go under the name, never past the card's edge */
    align-items: center;
    gap: var(--space-1) var(--space-2);
}

.tools-error-head small {
    margin-left: auto;
}

.tools-errors p {
    margin: var(--space-1) 0 0;
    color: var(--text-normal);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.tools-errors pre {
    max-height: 260px;
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    overflow: auto;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-normal);
    font-size: 0.76rem;
    white-space: pre-wrap;
}

.tools-errors summary {
    margin-top: var(--space-1);
    color: var(--accent);
    font-size: 0.82rem;
    cursor: pointer;
}

/* The notice from the bot owner, and maintenance mode, above every page */
.global-notice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.88rem;
}

.global-notice > i {
    color: var(--accent);
}

.global-notice.is-warning {
    background: color-mix(in srgb, var(--warning) 12%, var(--bg-card));
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

.global-notice.is-warning > i {
    color: var(--warning-text);
}

/* Developer page lock */
.dev-lock .settings-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
    text-align: center;
}

.dev-lock h3 {
    margin: 0;
    color: var(--text-main);
}

.dev-lock p {
    margin: 0;
    font-size: 0.9rem;
}

.dev-lock-icon {
    margin-bottom: var(--space-1);
    color: var(--accent);
    font-size: 1.8rem;
}

.dev-lock-form {
    align-items: stretch;
    justify-content: center;
    margin-top: var(--space-3);
}

.dev-lock-form .settings-input {
    width: 260px;
}

/* Developer page: the bot's current pictures (Bot Identity) */
.dev-identity-pictures {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.dev-identity-pictures .app-avatar {
    width: 64px;
    height: 64px;
}

.dev-identity-banner {
    max-width: 240px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
}

/* Equinox Console (console.html): who is signed in, beside Sign out (its sign-in screen is the .gate) */
.console-account {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.global-notice > span {
    flex: 1;
}

/* A preference with a line of explanation under its name */
.layout-option-text {
    flex: 1;
    min-width: 0;
}

.layout-option-text p {
    margin: var(--space-0-5) 0 0;
    font-size: 0.82rem;
}

/* Invite selection is for people who can edit invites */
body:not(.can-edit-invites) .invite-edit-only {
    display: none !important;
}

@media (max-width: 700px) {
    .tools-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Members ─────────────────────────────────────────────────────────────────── */
.mem-count {
    margin: 0;
    font-size: 0.88rem;
}

/* A row of filters, each under its label (Members, Activity Log). They share the row between them, so its ends line
   up with the table under it whatever number of filters shows; on a narrow screen they wrap. */
.mem-filters,
.slog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.mem-filter {
    display: flex;
    flex: 1 1 170px;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.mem-filter > span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mem-filter .settings-select {
    width: 100%;
}

.mem-table td {
    white-space: nowrap;
}

.mem-table td:nth-child(2),
.mem-table td:nth-child(3) {
    white-space: normal;
}

.mem-sub {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.mem-roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    max-width: 320px;
}

.mem-roles-wrap {
    max-width: none;
}

.mem-role {
    --role-color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 180px;
    padding: var(--space-0-5) var(--space-2);
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-normal);
    font-size: 0.76rem;
    line-height: 1.5;
}

.mem-role > span:not(.mem-role-dot) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mem-role-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--role-color);
}

.mem-role-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: calc(-1 * var(--space-1));
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
}

.mem-role-remove:hover,
.mem-role-remove:focus-visible {
    background: color-mix(in srgb, var(--danger) 20%, transparent);
    color: var(--text-main);
}

.mem-more {
    align-self: center;
    color: var(--text-muted);
    font-size: 0.76rem;
}

/* A member's name with what they are beside it (bot, owner, staff...), on the one line: a long name gives way
   before a tag does, and a tagged row is no taller than any other */
.mem-name-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.mem-name-line .mem-tag,
.mem-name-line .sec-tag {
    flex-shrink: 0;
}

/* The same line in Threat Detection's tables (Watching, Left beside the name). The tag is kept as tall as the
   name beside it, or the row would grow by a pixel */
.sec-who > div {
    min-width: 0;
}

.mem-name-line .sec-tag {
    line-height: 1.15;
}

.mem-name-line .sec-who-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The same tags under the name on a member's own page, where there is room for all of them */
.mem-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.mem-tags:empty {
    display: none;
}

.mem-tag {
    padding: var(--pad-chip);
    background: var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.mem-tag.is-owner { color: var(--warning-text); }
.mem-tag.is-staff { color: var(--accent); }
.mem-tag.is-warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--text-main); }
.mem-tag.is-boost { background: color-mix(in srgb, #f47fff 18%, transparent); color: var(--text-main); }

.mem-bulk {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
    border-radius: 10px;
}

.mem-bulk .settings-select {
    width: auto;
    min-width: 180px;
}

.mem-bulk-count {
    margin-right: var(--space-1);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.88rem;
}

.mem-bulk progress {
    flex: 1;
    min-width: 160px;
    height: 8px;
    accent-color: var(--primary);
}

.mem-result {
    position: relative;
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--warning);
    border-radius: 10px;
    font-size: 0.86rem;
}

/* A big kick or ban waiting for a second person: what it is, and the buttons to decide on it */
.mem-asked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-right: var(--space-4);
}

.mem-asked p {
    margin: var(--space-1) 0 0;
}

.mem-result .modal-close {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
}

.mem-result ul {
    margin: var(--space-1) 0 var(--space-2);
    padding-left: var(--space-4);
}

.mem-result ul:last-child {
    margin-bottom: 0;
}

.mem-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-size: 0.86rem;
}

.mem-pager:empty {
    display: none;
}

/* One member */
.member-modal-header {
    align-items: flex-start;
}

.member-modal-who {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.member-modal-who h2 {
    margin: 0;
    overflow-wrap: anywhere;
}

.member-modal-who p {
    margin: var(--space-0-5) 0 0;
    font-size: 0.82rem;
}

.app-avatar.app-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
}

.member-modal-tabs {
    padding: var(--space-3) var(--space-6) 0;
}

.member-modal-tabs .apps-tabs[hidden] {
    display: none;
}

.member-modal .modal-body > h3:first-child,
.member-modal .modal-body > .sec-facts:first-child {
    margin-top: 0;
}

/* Adding roles on a member's profile (members.js _memRolePicker): search, check several, add */
.role-picker {
    max-width: 520px;
    margin-top: var(--space-2);
}

.role-picker-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.role-picker-row > .btn {
    flex-shrink: 0;
    margin-top: var(--space-1);
}

.role-picker-field {
    position: relative;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    min-height: 42px;
    padding: var(--space-1) var(--space-8) var(--space-1) var(--space-2);
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: text;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.role-picker-field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.role-picker-chips {
    display: contents;
}

.role-picker-input {
    flex: 1;
    min-width: 120px;
    padding: var(--space-1) var(--space-2);
    background: none;
    border: 0;
    color: var(--text-main);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
}

.role-picker-caret {
    position: absolute;
    top: 50%;
    right: 12px;
    color: var(--text-muted);
    font-size: 0.75rem;
    transform: translateY(-50%);
    transition: transform 0.15s;
    pointer-events: none;
}

.role-picker.is-open .role-picker-caret {
    transform: translateY(-50%) rotate(180deg);
}

.role-picker-list {
    max-height: 240px;
    margin: var(--space-2) 0 0;
    padding: var(--space-1);
    overflow-y: auto;
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-float);
    scrollbar-width: thin;
}

.role-picker-option {
    --role-color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    border-radius: 5px;
    color: var(--text-normal);
    font-size: 0.88rem;
    cursor: pointer;
}

.role-picker-option:hover,
.role-picker-option.is-active {
    background: var(--bg-tertiary);
    color: var(--text-main);
}

.role-picker-option.is-active {
    box-shadow: inset 2px 0 0 var(--primary);
}

.role-picker-check {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.6rem;
    color: transparent;
}

.role-picker-option[aria-selected="true"] .role-picker-check {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.role-picker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-picker-empty {
    padding: var(--space-2);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.mem-add-none {
    margin: var(--space-2) 0 0;
    font-size: 0.85rem;
}

.member-modal .tools-inline .settings-input,
.member-modal .tools-inline .settings-select {
    width: auto;
    min-width: 200px;
}

.mem-why {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.mem-why i {
    font-size: 0.72rem;
}

.mem-locked {
    margin-top: var(--space-2);
    font-size: 0.84rem;
}

.mem-locked summary {
    color: var(--text-muted);
    cursor: pointer;
}

.mem-locked ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-4);
}

.mem-locked li {
    margin: var(--space-1) 0;
}

.mem-note {
    margin: var(--space-2) 0 0;
    font-size: 0.82rem;
}

.mem-hours {
    height: 110px;
}

.mem-mini {
    font-size: 0.84rem;
}

.mem-ticket-end {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Members: who brought whom in (the Connections tab). Each level of the tree is indented under a line. */
.mem-tree,
.mem-chain {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mem-tree .mem-tree {
    margin-top: var(--space-2);
    padding-left: var(--space-5);
    border-left: 1px solid var(--border-color);
}

.mem-tree-row,
.mem-joined {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-row);
    margin: 0;
    font-size: 0.85rem;
}

.mem-tree-more > summary {
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
}

.mem-tree-note {
    margin: var(--space-1) 0 0;
    font-size: 0.8rem;
}

@media (max-width: 700px) {
    .mem-filters {
        grid-template-columns: 1fr 1fr;
    }
}

.member-modal .tools-inline {
    align-items: center;
}

/* Simple view (Preferences > Detail, the default): what only Everything shows */
:root:not([data-detail="full"]) .extra {
    display: none !important;
}

/* Module settings in folding sections (Ticket Options and other long modules) */
.module-group {
    margin: 0 0 var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-main);
}

.module-group > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    list-style: none;
}

.module-group > summary::-webkit-details-marker {
    display: none;
}

.module-group > summary::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.module-group[open] > summary::before {
    transform: rotate(45deg);
}

.module-group > summary:hover {
    color: var(--accent);
}

.module-group-body {
    padding: var(--space-4) var(--space-4) var(--space-1);
    border-top: 1px solid var(--border-color);
}

/* "More options" on a card built into the page (the Auto-Mod filters): the last thing in its card, and in the
   Everything view laid open in place with nothing to click (appearance.js opens it) */
.settings-card-body > .module-group:last-child {
    margin-bottom: 0;
}

:root[data-detail="full"] .more-fold[open] {
    margin: 0;
    border: 0;
    background: none;
}

:root[data-detail="full"] .more-fold[open] > summary {
    display: none;
}

:root[data-detail="full"] .more-fold[open] > .module-group-body {
    padding: 0;
    border-top: 0;
}

/* On feature pages a section spans the card and lays its fields out like the form does */
.module-card-embedded .module-form > .module-group {
    grid-column: 1 / -1;
}

.module-card-embedded .module-group-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 0 var(--space-5);
}

.module-card-embedded .module-group-body > .module-field-rows,
.module-card-embedded .module-group-body > .module-field-textarea,
.module-card-embedded .module-group-body > .module-field-wide,
.module-card-embedded .module-form > .module-field-wide {
    grid-column: 1 / -1;
}

.module-card-embedded .module-group-body > .module-field {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
}

.module-card-embedded .module-group-body > .module-field > label {
    align-self: end;
}

.module-card-embedded .module-group-body > .module-field > :nth-child(2),
.module-card-embedded .module-group-body > .module-field > small {
    align-self: start;
}

.module-card-embedded .module-group-body > .module-field-bool > .module-bool-control {
    grid-row: 2;
    min-height: 44px;
}

.module-card-embedded .module-group-body > .module-field-bool > small {
    grid-row: 3;
}

.module-field[hidden] {
    display: none !important;
}

.module-form input[type=time] {
    max-width: 160px;
}

/* ── Activity Log: server events ─────────────────────────────────────────────── */
.slog-intro {
    margin: var(--space-3) 0 var(--space-4);
    font-size: 0.86rem;
}

.slog-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.slog-row {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.slog-row:last-child {
    border-bottom: 0;
}

.slog-row summary {
    list-style: none;
    cursor: pointer;
}

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

.slog-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}

.slog-summary {
    flex: 1;
    min-width: 0;
    color: var(--text-main);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.slog-time {
    flex-shrink: 0;
    font-size: 0.78rem;
}

.slog-chip {
    flex-shrink: 0;
    padding: var(--pad-chip);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.slog-chip.slog-messages, .slog-chip.slog-purges { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--text-main); }
.slog-chip.slog-moderation, .slog-chip.slog-security { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--text-main); }
.slog-chip.slog-server { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--text-main); }
.slog-chip.slog-members, .slog-chip.slog-roles, .slog-chip.slog-names { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--text-main); }

.slog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    font-size: 0.8rem;
}

.slog-person {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-normal);
}

.slog-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.slog-avatar-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
}

.slog-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.84rem;
}

.slog-detail pre {
    margin: var(--space-1) 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-normal);
    font-family: inherit;
}

.slog-changes {
    margin: 0;
    padding-left: var(--space-4);
}

.slog-note {
    margin-top: var(--space-3);
    font-size: 0.8rem;
}

/* Pictures kept from deleted messages, and files with what VirusTotal says about them */
.slog-mark {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.slog-head .state-chip {
    flex-shrink: 0;
    align-self: center;
}

.slog-pictures {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

/* The width cap sits on the tile, not the picture: a percentage on the picture would be left out
   when the tile sizes itself, leaving a strip beside wide pictures */
.slog-picture {
    position: relative;
    display: block;
    max-width: min(100%, 320px);
    overflow: hidden;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.slog-picture img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 200px;
}

.slog-picture:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.slog-files {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
}

.slog-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-row);
}

.slog-file > .fa-file {
    color: var(--text-muted);
}

.slog-file-name {
    min-width: 0;
    color: var(--text-normal);
    overflow-wrap: anywhere;
}

.tools-bar small {
    white-space: nowrap;
}

/* Role panel rules in the embed builder */
.role-panel-rules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-1);
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.role-panel-rules .role-panel-required {
    grid-column: 1 / -1;
}

.role-panel-rules small {
    display: block;
    margin-top: var(--space-hint);
    font-size: 0.76rem;
}

.module-form input[type=datetime-local] {
    max-width: 240px;
}

/* ── Suggestions page ─────────────────────────────────────────────────────── */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sugg-sort {
    width: auto;
}

.sugg-list {
    display: flex;
    flex-direction: column;
}

.sugg-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: var(--space-3) var(--space-4);
}

.sugg-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.sugg-number {
    font-weight: 700;
    color: var(--text-main);
}

.sugg-when {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.sugg-text {
    margin: var(--space-2) 0 0;
    color: var(--text-main);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sugg-note,
.sugg-decision {
    margin: var(--space-2) 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sugg-decision strong {
    color: var(--text-main);
}

.sugg-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.sugg-votes {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.sugg-vote {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.sugg-vote-up i {
    color: var(--success-text);
}

.sugg-vote-down i {
    color: var(--danger-text);
}

.sugg-bar {
    position: relative;
    width: 90px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger) 45%, var(--bg-tertiary));
    overflow: hidden;
}

.sugg-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--success);
    border-right: 2px solid var(--bg-card);
}

.sugg-bar span[style="width:0%"] {
    border-right: 0;
}

.sugg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.sugg-status-pending {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-main);
}

.sugg-status-considering {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
    color: var(--text-main);
}

.sugg-status-approved {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--text-main);
}

.sugg-status-implemented {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    color: var(--text-main);
}

.sugg-status-denied {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--text-main);
}

/* A switch in a list entry can shrink so a long label wraps inside the entry */
.module-form .module-row > .module-field-bool {
    flex: 0 1 auto;
    min-width: 0;
}

/* ── Welcome messages (Welcome & Leave page) ──────────────────────────────── */

/* Above the messages: what they are, and the ready-made ones to add */
.wm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-inner);
    padding-top: var(--space-field);
    border-top: 1px solid var(--border-color);
}

.wm-toolbar h4,
.wm-toolbar p,
.wm-head h5 {
    margin: 0;
}

.wm-toolbar h4,
.wm-head h5 {
    font-size: 0.95rem;
    font-weight: 600;
}

.wm-toolbar p {
    font-size: 0.85rem;
}

/* A card that only some people may change: its fields are a fieldset, disabled for them */
.wm-editable {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.wm-ready,
.wm-codes,
.wm-own-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.wm-ready {
    gap: var(--space-2);
}

/* One message: its settings beside what members will see */
.wm-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.wm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.wm-head h5 {
    flex: 1;
    min-width: 0;
}

/* One of several things edited on a page (a welcome message, a ticket type) is a row that opens to its
   editor: its name and, while it is closed, a line saying what is in it. The same arrow as the rows of settings.
   So a page with five of them is five lines, not five editors. */
.row-open {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.row-open::before {
    content: '';
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: var(--space-1);
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.row-open[aria-expanded="true"]::before {
    transform: rotate(45deg);
}

.row-open > span {
    flex: none;
}

.row-open > .row-summary {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-open[aria-expanded="true"] > .row-summary {
    visibility: hidden;         /* the editor below says it */
}

.row-open:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.wm-item:has(> .wm-body[hidden]) > .wm-head {
    border-bottom: 0;
}

.tp-type > .module-card-head h3 {
    flex: 1;
    min-width: 0;
}

.wm-kind {
    padding: var(--pad-chip);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.wm-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-5);
    padding: var(--space-4);
}

.wm-fields > :last-child {
    margin-bottom: 0;
}

/* The codes a message can use, each a button that adds it where the person is typing */
.wm-codes {
    gap: var(--space-1);
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
    color: var(--text-muted);
    font-size: 0.8rem;
}

.wm-codes > span {
    flex-basis: 100%;
}

.wm-code {
    min-height: 24px;
    padding: var(--pad-chip);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}

.wm-code code {
    color: var(--text-main);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

.wm-code:hover,
.wm-code:focus-visible {
    border-color: var(--accent);
    color: var(--text-normal);
}

/* An embed's two pictures side by side: what goes there, and its link */
.wm-pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
}

.wm-pair > .form-group:last-child {
    margin-top: calc(-1 * var(--space-2));
}

/* The picture card's settings, set apart under their own small heading */
.wm-card-opts {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-1);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.wm-card-opts h6 {
    margin: 0 0 var(--space-3);
    font-size: 0.85rem;
    font-weight: 600;
}

.wm-own {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.wm-own > .form-group {
    align-self: stretch;
    margin-bottom: 0;
}

.wm-own-actions {
    gap: var(--space-3);
}

.wm-own-pic {
    width: 100%;
    max-width: 320px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.wm-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* The picture card in the preview: under the text, or as the embed's big picture */
.wm-pv-cardbox {
    margin: var(--space-2) 0 0;
}

.wm-pv-cardbox.is-busy img {
    opacity: 0.6;
}

.wm-pv-card {
    display: block;
    width: 100%;
    max-width: 520px;
    border-radius: 6px;
}

/* A picture the preview doesn't load: a link, or an avatar or icon it doesn't have */
.wm-pv-link,
.wm-pv-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background: rgba(255, 255, 255, 0.06);
    color: #b5bac1;
    font-size: 0.7rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.wm-pv-link.discord-embed-image {
    width: 100%;
    max-width: 400px;
    height: 120px;
}

/* Beside a long message, what members see stays in view */
.wm-preview {
    position: sticky;
    top: var(--space-4);
}

.wm-preview-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wm-preview .discord-message-container {
    max-width: none;
}

/* The embed narrows with a narrow screen instead of running past its message */
.wm-preview .discord-embed {
    min-width: 0;
}

.wm-pv-empty {
    margin: 0;
    color: #949ba4;
    font-style: italic;
}

/* A mention as Discord draws it */
.discord-mention {
    padding: 0 var(--space-0-5);
    border-radius: 3px;
    background: rgba(88, 101, 242, 0.3);
    color: #c9cdfb;
    font-weight: 500;
}

/* On a narrow screen the preview comes first, the settings under it */
@media (max-width: 1100px) {
    .wm-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .wm-preview {
        position: static;
        order: -1;
    }

    .wm-pairs {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A textarea with ready-made texts to pick from (modules.js, a field's presets) */
.preset-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.preset-field textarea {
    align-self: stretch;
}

.preset-field select {
    width: auto;
    max-width: 100%;
}

/* ── Welcome card options ─────────────────────────────────────────────────── */

.wm-fields .form-group {
    margin-bottom: var(--space-4);
}

/* ── Transcripts page ─────────────────────────────────────────────────────── */

.tx-days {
    width: auto;
}

.tx-name {
    display: flex;
    flex-direction: column;
}

.tx-more {
    margin-top: var(--space-3);
}

.tx-modal {
    width: min(1100px, 94vw);
    max-width: none;
    height: min(88vh, 1000px);
    display: flex;
    flex-direction: column;
}

.tx-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.tx-modal .modal-header h2 {
    margin: 0;
}

.tx-modal .modal-header p {
    margin: var(--space-1) 0 0;
}

.tx-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

.tx-frame {
    flex: 1;
    width: 100%;
    border: 0;
    border-radius: 0 0 10px 10px;
    background: #36393f;
}

.tx-actions a.btn {
    text-decoration: none;
}

/* ══ Page layout ═══════════════════════════════════════════════════════════════
   Pages built from the same pieces look alike: sections and cards sit one
   --space-page apart, boxes inside a card one --space-inner apart, form fields one
   --space-field apart, and cards, tiles and headers share the same padding (the
   tokens are in tokens.css, where compact density shrinks them all together). Page
   markup uses the classes below instead of inline spacing. */

/* A card on its own keeps a gap below it; inside a stack or grid (below) the gap does it */
.settings-card {
    margin-bottom: var(--space-page);
}

/* A page is a stack of sections one gap apart; the gap does the spacing, so the
   sections' own top and bottom margins are dropped */
.tab-content.active {
    display: flex;
    flex-direction: column;
    gap: var(--space-page);
}

.tab-content.active > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* Segmented tabs keep their own width instead of stretching across the page */
.tab-content.active > .apps-tabs,
.tab-content.active > .apps-filters,
.stack-page > .apps-tabs,
.stack-page > .apps-filters {
    align-self: flex-start;
}

/* A heading sits closer to what it introduces than to the section before it */
.tab-content.active > .section-heading {
    margin-bottom: calc(var(--space-inner) - var(--space-page));
}

.section-title {
    margin-bottom: var(--space-page);
}

h2.section-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* A new part of a long page: a line, then its heading */
.section-break {
    padding-top: var(--space-page);
    border-top: 1px solid var(--border-color);
}

.page-rule,
.card-rule {
    border: 0;
    border-top: 1px solid var(--border-color);
}

.page-rule {
    margin: var(--space-page) 0;
}

.card-rule {
    margin: var(--space-field) 0;
}

.page-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Stacks and grids of cards ───────────────────────────────────────────── */
.settings-container,
.module-mount,
.embed-builder-layout,
.sec-main,
.sec-side,
.sec-trends,
.overview-grid,
.overview-side,
.sec-status,
.sec-layout,
.module-grid,
.tools-body,
.stack-page,
.page-grid {
    gap: var(--space-page);
}

.module-mount,
.stack,
.stack-page {
    display: flex;
    flex-direction: column;
}

.stack {
    gap: var(--space-inner);
}

.settings-container > *,
.module-mount > *,
.page-grid > *,
.stack > *,
.stack-page > *,
.tools-body > *,
.tools-grid > * {
    margin-top: 0;
    margin-bottom: 0;
}

.page-grid {
    display: grid;
}

.page-grid.align-start {
    align-items: start;
}

.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.cols-side { grid-template-columns: 220px minmax(0, 1fr); }
.cols-auto { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* Cards side by side while each has room for a table of four columns (about 20rem): as many columns as
   fit, where three fixed columns would squeeze a table until its last column is cut off on a mid-width
   screen. A card left over on the last row keeps a column's width. */
.page-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-page);
}

.page-row > * {
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Fields side by side inside a card */
.field-grid {
    display: grid;
    column-gap: var(--space-5);
    row-gap: var(--space-field);
    align-items: start;
}

.field-grid > .form-group {
    margin: 0;
}

/* Small boxes side by side inside a card */
.tile-grid {
    display: grid;
    gap: var(--space-inner);
}

.field-grid:not(:last-child),
.tile-grid:not(:last-child) {
    margin-bottom: var(--space-field);
}

@media (max-width: 900px) {
    .cols-2,
    .cols-3,
    .cols-1-2,
    .cols-side {
        grid-template-columns: minmax(0, 1fr);
    }

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

/* ── Cards and tiles ─────────────────────────────────────────────────────── */
.settings-card-header {
    padding: var(--pad-head);
}

.settings-card-body {
    padding: var(--pad-body);
}

.module-card-embedded {
    padding: var(--pad-head);
}

.module-card:not(.module-card-embedded) {
    padding: var(--pad-tile);
}

/* Boxes inside a card */
.module-rows,
.embed-editor-col,
.sugg-list {
    gap: var(--space-inner);
}

.embed-editor-col > * {
    margin-top: 0;
    margin-bottom: 0;
}

.apps-toolbar,
.mem-filters,
.slog-filters {
    margin-bottom: var(--space-inner);
}

/* The Modules page: categories one gap apart, the title close to its cards */
.module-category {
    margin-bottom: var(--space-page);
}

.module-category-title {
    margin: 0 0 var(--space-inner);
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.settings-card-body > .form-group,
.form-grid-2 > .form-group,
.module-group-body > .form-group,
.module-card-embedded .module-form > .module-field,
.module-card-embedded .module-group-body > .module-field {
    margin-bottom: var(--space-field);
}

.settings-card-body > .form-group:last-child {
    margin-bottom: 0;
}

/* Fields carry the space between rows, so a grid of them adds none of its own,
   and the last grid in a card doesn't leave extra room at the bottom */
.settings-card-body > .form-grid-2:not(:last-child) {
    margin-bottom: 0;
}

.settings-card-body > .form-grid-2:last-child {
    margin-bottom: calc(-1 * var(--space-field));
}

/* Module settings on a feature's page: at most three fields per row, so short
   rows don't leave most of a wide card empty */
.module-card-embedded .module-form,
.module-card-embedded .module-group-body {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(240px, calc((100% - 2.5rem) / 3))), 1fr));
}

.section-title-row.is-centered {
    align-items: center;
}

/* An editor's bar (Back, its name, Save) stays at the top while the editor scrolls (Ticketing, Applications, Forms,
   Commands), and a preview beside the editor stops below it */
.section-title-row.is-pinned {
    position: sticky;
    top: 0;
    z-index: 6;
    padding: var(--space-3) 0;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-color);
}

.section-title-row.is-pinned ~ .embed-builder-layout .embed-preview-col {
    top: calc(var(--control-height) + 2 * var(--space-3) + var(--space-4));
}

.modules-search {
    width: 260px;
    max-width: 100%;
}

/* Commands page: the bot's commands in the Features layout (custom-commands.js) */
.botcmd-group + .botcmd-group {
    margin-top: var(--space-page);
}

.botcmd-name {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-row);
    white-space: nowrap;
}

.botcmd-name code {
    color: var(--accent);
    font-weight: 600;
}

.botcmd-table td:nth-child(2) {
    width: 100%;
}

/* Every group's table gives the command the same room, so "What it does" starts at the same place in each
   (left to its content, each table put it somewhere else) */
.botcmd-table :is(th, td):first-child {
    min-width: 13rem;
}

@media (max-width: 640px) {
    .botcmd-table :is(th, td):first-child {
        min-width: 0;
    }
}

/* A notice that is a page section by itself: the page gap spaces it */
.tab-content.active > * > .global-notice:only-child {
    margin: 0;
}

/* Fields stacked in an editor's accordion: one field gap apart, like everywhere else */
.accordion-content > * + .form-group {
    margin-top: var(--space-field);
}

/* A line about the section, above its fields */
.accordion-content > p {
    margin: 0 0 var(--space-field);
    font-size: 0.85rem;
}

/* Role reactions and buttons (Embeds & Roles): the column is narrow, so the small fields stay small and the
   roles take the room that is left, with Remove on the same line */
#role-rows .module-row > .module-field {
    flex: 1 1 140px;
}

#role-rows .module-row > [data-key="role_ids"] {
    flex: 3 1 200px;
}

/* ── Theme pictures, glass cards, corners and fonts ──────────────────────────
   Set by server themes (appearance.js applyThemeDecor): data attributes on <html>
   pick the look, and custom properties carry the numbers and picture addresses
   (only ever /theme-assets/<id>.webp, served by the dashboard itself). With
   animation turned down, in Preferences or on the device, animated pictures show
   their still first frame. */
:root {
    --bg-main-rgb: 20, 23, 28;
    --bg-card-rgb: 27, 31, 37;
    --bg-darker-rgb: 15, 17, 21;
    --bg-dim: 0.45;
    --bg-blur: 0px;
    --side-dim: 0.6;
    --card-opacity: 0.85;
    --card-blur: 12px;
    --bg-picture: var(--bg-image);
    --side-picture: var(--side-image);
}

[data-motion="reduced"] {
    --bg-picture: var(--bg-image-still);
    --side-picture: var(--side-image-still);
}

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="on"]) {
        --bg-picture: var(--bg-image-still);
        --side-picture: var(--side-image-still);
    }
}

html[data-font="rounded"] { --font-ui: 'Nunito', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
html[data-font="geometric"] { --font-ui: 'Poppins', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
html[data-font="serif"] { --font-ui: 'Source Serif 4', Georgia, 'Times New Roman', serif; }
html[data-font="mono"] { --font-ui: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; }

/* The page picture: a fixed layer behind everything, dimmed with the page color.
   It reaches past the screen edges by the blur, so blurring never softens them. */
html[data-bg="picture"] body::before {
    content: "";
    position: fixed;
    inset: calc(var(--bg-blur) * -3);
    z-index: -1;
    pointer-events: none;
    background-color: rgb(var(--bg-main-rgb));
    background-image:
        linear-gradient(rgba(var(--bg-main-rgb), var(--bg-dim)), rgba(var(--bg-main-rgb), var(--bg-dim))),
        var(--bg-picture);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(var(--bg-blur));
}

html[data-bg-fit="contain"] body::before { background-size: contain; }
html[data-bg-fit="tile"] body::before { background-size: auto; background-repeat: repeat; }
html[data-bg-pos="top"] body::before { background-position: center top; }
html[data-bg-pos="bottom"] body::before { background-position: center bottom; }

html[data-bg="picture"] .main-content {
    background-color: transparent;
}

/* Over a page picture the top bar and menu are tinted glass */
html[data-bg="picture"] :is(.top-nav, .sidebar, .site-footer) {
    background-color: rgba(var(--bg-darker-rgb), 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
}

html[data-bg="picture"] .section-title-row.is-pinned {
    background: rgba(var(--bg-main-rgb), 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* The sidebar's own picture, dimmed with the sidebar color; it stays put while the menu scrolls */
html[data-side-bg="picture"] .sidebar {
    background-color: rgb(var(--bg-darker-rgb));
    background-image:
        linear-gradient(rgba(var(--bg-darker-rgb), var(--side-dim)), rgba(var(--bg-darker-rgb), var(--side-dim))),
        var(--side-picture);
    background-position: center;
    background-size: cover;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Glass cards: see-through, frosting what is behind them. Only inside the page area;
   menus, dialogs and notices elsewhere stay solid. */
html[data-surface="glass"] .main-content {
    --bg-card: rgba(var(--bg-card-rgb), var(--card-opacity));
}

html[data-surface="glass"] .main-content :is(.settings-card,
    .module-card, .theme-tile, .layout-preset, .layout-options, .sec-banner, .sec-threat, .sec-protections,
    .data-table-wrap, .tools-summary, .sugg-card, .mem-result, .slog-rows,
    .filter-container, .no-server-notice) {
    -webkit-backdrop-filter: blur(var(--card-blur));
    backdrop-filter: blur(var(--card-blur));
}

/* Frosting makes each card a layer of its own; the card being used comes forward so a
   list opening from it isn't covered by the next card */
html[data-surface="glass"] .main-content :is(.settings-card,
    .module-card, .theme-tile, .layout-preset, .layout-options, .sec-banner, .sec-threat, .sec-protections,
    .data-table-wrap, .tools-summary, .sugg-card, .mem-result, .slog-rows,
    .filter-container, .no-server-notice):focus-within {
    position: relative;
    z-index: 4;
}

/* Lists that open over other content stay solid */
html[data-surface="glass"] .main-content :is(.choices__list--dropdown, .choices__list[aria-expanded],
    .apps-export-menu, .color-picker-box) {
    background-color: rgb(var(--bg-card-rgb));
}

/* Corners */
html[data-radius="sharp"] :is(.settings-card, .module-card,
    .theme-tile, .layout-preset, .layout-options, .sec-banner, .sec-threat, .sec-protections,
    .data-table-wrap, .tools-summary, .sugg-card, .mem-result, .slog-rows,
    .filter-container, .no-server-notice, .global-notice, .accordion-item, .modal-content, .toast,
    .server-menu, .account-menu, .apps-export-menu, .picture-tile, .perm-role, .perm-role-head, .perm-level-tile,
    .perm-section, .cmd-perm-list) {
    border-radius: 3px;
}

html[data-radius="sharp"] :is(.btn, .settings-input, .settings-select, .segmented, .segmented button,
    .server-switcher-btn, .account-btn, .theme-swatches, .theme-thumb, .perm-level-btn, .perm-level-chip,
    .cmd-perm-toggle),
html[data-radius="sharp"] .choices .choices__inner {
    border-radius: 2px;
}

html[data-radius="sharp"] :is(.choices__list--dropdown, .choices__list[aria-expanded]) {
    border-radius: 0 0 2px 2px;
}

html[data-radius="round"] :is(.settings-card, .module-card,
    .theme-tile, .layout-preset, .layout-options, .sec-banner, .sec-threat, .sec-protections,
    .data-table-wrap, .tools-summary, .sugg-card, .mem-result, .slog-rows,
    .filter-container, .no-server-notice, .global-notice, .modal-content, .server-menu, .account-menu,
    .apps-export-menu, .perm-role, .perm-role-head) {
    border-radius: 18px;
}

html[data-radius="round"] :is(.accordion-item, .toast, .picture-tile, .perm-level-tile, .perm-section, .cmd-perm-list) {
    border-radius: 14px;
}

html[data-radius="round"] :is(.perm-level-btn, .perm-level-chip, .cmd-perm-toggle) {
    border-radius: 999px;
}

html[data-radius="round"] :is(.settings-input, .settings-select, .theme-swatches, .theme-thumb),
html[data-radius="round"] .choices .choices__inner {
    border-radius: 12px;
}

html[data-radius="round"] :is(.btn, .segmented, .segmented button, .server-switcher-btn, .account-btn) {
    border-radius: 999px;
}

html[data-radius="round"] :is(.choices__list--dropdown, .choices__list[aria-expanded]) {
    border-radius: 0 0 12px 12px;
}

html[data-radius="round"] .is-flipped :is(.choices__list--dropdown, .choices__list[aria-expanded]) {
    border-radius: 12px 12px 0 0;
}

/* ── Theme tiles and the theme editor ───────────────────────────────────── */
.theme-tile-pick > .theme-swatches,
.theme-thumb {
    height: 34px;
}

/* A theme with a picture: its still frame, with the colors along the bottom */
.theme-thumb {
    display: flex;
    align-items: flex-end;
    padding: var(--space-1);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-tertiary);
    background-position: center;
    background-size: cover;
}

.theme-thumb .theme-swatches {
    flex: 1;
    height: 10px;
    border-radius: 4px;
    border-color: rgba(255, 255, 255, 0.35);
}

.theme-editor-section {
    margin-top: var(--space-field);
    padding-top: var(--space-field);
    border-top: 1px solid var(--border-color);
}

.theme-editor-heading {
    margin: 0 0 var(--space-1);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
}

.theme-editor-hint {
    margin: 0 0 var(--space-inner);
    max-width: 720px;
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.theme-editor-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-field) var(--space-5);
    align-items: end;
    margin-top: var(--space-field);
}

.theme-editor-fields > .form-group {
    margin: 0;
}

.theme-editor-fields .segmented {
    align-self: flex-start;
}

/* Styled like the other field labels */
.theme-field-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.form-group > .theme-range-label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

.theme-range-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-normal);
}

.theme-range {
    width: 100%;
    height: 34px;
    accent-color: var(--primary);
    cursor: pointer;
}

.picture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: var(--space-inner);
}

.picture-tile {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.picture-tile:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.picture-tile.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.picture-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.picture-pick:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.picture-pick img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picture-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: var(--pad-chip);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
    border-radius: 4px;
}

/* A check mark on the chosen picture, so the choice doesn't rely on the border color alone */
.picture-tile.is-selected .picture-pick::after {
    content: "\f00c";
    position: absolute;
    top: 6px;
    left: 6px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
}

.picture-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background-color 0.15s;
}

.picture-tile:hover .picture-delete,
.picture-delete:focus-visible {
    opacity: 1;
}

.picture-delete:hover {
    background: var(--danger);
}

.picture-delete:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

@media (hover: none) {
    .picture-delete {
        opacity: 1;
    }
}

.picture-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-inner);
    font-size: 0.8rem;
}

/* ── Menu position and your pages (Preferences > Layout) ─────────────────────
   The same menu on the left (default), right, top or bottom. Along the top or
   bottom with names shown, each group opens as a small menu (core.js
   toggleNavMenu); with icons only, every page is one icon in a row, like a dock.
   Pinned pages sit in their own list at the start (appearance.js _arrangeNav) and
   hidden pages leave the menu. */
.nav li.is-hidden-by-you {
    display: none !important;
}

/* A hover that shows on light themes as well as dark ones */
.nav li:hover {
    background-color: color-mix(in srgb, var(--text-main) 5%, transparent);
}

.nav-pinned {
    margin-bottom: var(--space-5);
}

.nav-pinned-label {
    display: block;
    margin: var(--space-1) 0 var(--space-1);
    padding: 0 var(--space-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dark);
}

[data-density="compact"] .nav-pinned { margin-bottom: var(--space-3); }
[data-sidebar="icons"] .nav-pinned-label { display: none; }
[data-sidebar="icons"] .nav-pinned { margin-bottom: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-color); }

/* Right */
html[data-nav-position="right"] .layout-wrapper { flex-direction: row-reverse; }
html[data-nav-position="right"] .sidebar { border-right: 0; border-left: 1px solid var(--border-color); }
html[data-nav-position="right"] .nav li.active { box-shadow: inset -3px 0 0 var(--primary); }

/* Top and bottom: a bar across the window */
html[data-nav-position="top"] .layout-wrapper { flex-direction: column; }
html[data-nav-position="bottom"] .layout-wrapper { flex-direction: column-reverse; }

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]) .main-content {
    min-height: 0;
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]) .sidebar {
    position: relative;
    z-index: 50;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    overflow: visible;
}

html[data-nav-position="bottom"] .sidebar {
    border-bottom: 0;
    border-top: 1px solid var(--border-color);
}

/* Along the bottom, the menu is inside the scrolling area, just before the footer (core.js moves it there): it
   stays at the bottom of the window while the page scrolls, and the footer comes in under it at the page's end.
   The room a page keeps at its end is above the menu, so none of it is left between the menu and the footer. */
html[data-nav-position="bottom"] .main-content > .sidebar {
    position: sticky;
    bottom: 0;
    margin-top: calc(var(--room-page-end) / 2);
}

html[data-nav-position="bottom"] .main-content > .sidebar + .site-footer {
    margin-top: 0;
}

/* What is scrolled into view (a field reached with Tab) stops above the menu, which lies over the area's end */
html[data-nav-position="bottom"] .main-content {
    scroll-padding-bottom: var(--nav-bar-h);
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]) .sidebar :is(.top-level-nav, .nav-pinned, .sidebar-category) {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]) .sidebar :is(.top-level-nav, .pinned-nav) {
    display: flex;
    gap: var(--space-0-5);
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]) .sidebar .nav li {
    margin: 0;
    white-space: nowrap;
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]) .nav-pinned-label {
    display: none;
}

/* The current page is marked on the edge facing the page */
html[data-nav-position="top"] .sidebar :is(.top-level-nav, .pinned-nav) li.active,
html[data-nav-position="top"][data-sidebar="icons"] .sidebar .nav li.active {
    box-shadow: inset 0 -2px 0 var(--primary);
}

html[data-nav-position="bottom"] .sidebar :is(.top-level-nav, .pinned-nav) li.active,
html[data-nav-position="bottom"][data-sidebar="icons"] .sidebar .nav li.active {
    box-shadow: inset 0 2px 0 var(--primary);
}

/* With names: main pages, pinned pages, then a button per group that opens its menu */
:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar :is(.top-level-nav, .nav-pinned) {
    margin-right: var(--space-0-5);
    padding-right: var(--space-2);
    border-right: 1px solid var(--border-color);
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .sidebar-category {
    position: relative;
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .category-header {
    width: auto;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-2);
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
}

[data-density="compact"]:is([data-nav-position="top"], [data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .category-header {
    padding: var(--space-2) var(--space-2);
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .category-header:hover,
:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .sidebar-category.is-open .category-header {
    background-color: color-mix(in srgb, var(--text-main) 5%, transparent);
    color: var(--text-normal);
}

/* The group holding the current page */
:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .sidebar-category:has(li.active) .category-header {
    font-weight: 600;
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--primary);
}

html[data-nav-position="bottom"]:not([data-sidebar="icons"]) .sidebar .sidebar-category:has(li.active) .category-header {
    box-shadow: inset 0 2px 0 var(--primary);
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .category-header i {
    font-size: 0.62rem;
    transition: transform 0.15s;
}

/* The arrow points the way the menu opens, whether or not the group was folded in the sidebar */
html[data-nav-position="top"]:not([data-sidebar="icons"]) .sidebar .category-header i::before { content: "\f078"; }
html[data-nav-position="bottom"]:not([data-sidebar="icons"]) .sidebar .category-header i::before { content: "\f077"; }

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .sidebar-category.is-open .category-header i {
    transform: rotate(180deg);
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .category-nav {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 230px;
    padding: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-float);
}

html[data-nav-position="bottom"]:not([data-sidebar="icons"]) .sidebar .category-nav {
    top: auto;
    bottom: calc(100% + 6px);
}

/* Menus open on hover (core.js): an invisible strip over the gap between a group's name and its
   menu, so moving the pointer down to the menu never counts as leaving it */
:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .category-nav::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

html[data-nav-position="bottom"]:not([data-sidebar="icons"]) .sidebar .category-nav::before {
    top: auto;
    bottom: -8px;
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .category-nav.opens-left {
    left: auto;
    right: 0;
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"]):not([data-sidebar="icons"]) .sidebar .sidebar-category.is-open .category-nav {
    display: block;
}

html[data-radius="round"]:is([data-nav-position="top"], [data-nav-position="bottom"]) .sidebar .category-nav { border-radius: 16px; }
html[data-radius="sharp"]:is([data-nav-position="top"], [data-nav-position="bottom"]) .sidebar .category-nav { border-radius: 3px; }

/* Icons only: one row of icons with a line between groups, centered when there's room
   and scrolling sideways when there isn't (point at an icon for its name) */
:is(html[data-nav-position="top"], html[data-nav-position="bottom"])[data-sidebar="icons"] .sidebar {
    flex-wrap: nowrap;
    gap: 0;
    padding: var(--space-1) var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"])[data-sidebar="icons"] .sidebar::before,
:is(html[data-nav-position="top"], html[data-nav-position="bottom"])[data-sidebar="icons"] .sidebar::after {
    content: "";
    flex: 1 0 0;
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"])[data-sidebar="icons"] .sidebar :is(.nav-pinned, .sidebar-category) {
    padding: 0 0 0 var(--space-2);
    margin-left: var(--space-2);
    border-left: 1px solid var(--border-color);
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"])[data-sidebar="icons"] .sidebar .sidebar-category .category-nav {
    display: flex;
    gap: var(--space-0-5);
}

:is(html[data-nav-position="top"], html[data-nav-position="bottom"])[data-sidebar="icons"] .sidebar .nav li {
    padding: var(--space-2) var(--space-3);
}

/* ── Layout options ─────────────────────────────────────────────────────── */
.layout-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-page);
}

.layout-group-title {
    margin: 0 0 var(--space-inner);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.layout-option-text {
    flex: 1 1 280px;
}

.layout-option-hint {
    max-width: 600px;
    line-height: 1.45;
    color: var(--text-muted);
}

.layout-option-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.82rem;
}

/* A little box showing which edge the menu sits on */
.nav-glyph {
    display: inline-block;
    width: 16px;
    height: 12px;
    margin-right: var(--space-2);
    vertical-align: -1px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    opacity: 0.85;
}

.nav-glyph-left { border-left-width: 5px; }
.nav-glyph-right { border-right-width: 5px; }
.nav-glyph-top { border-top-width: 5px; }
.nav-glyph-bottom { border-bottom-width: 5px; }

/* Quick start drawings for the top bar and the dock */
.layout-mini-topbar {
    flex-direction: column;
}

.layout-mini-topbar .layout-mini-side {
    flex-shrink: 0;
    width: 100%;
    height: 9px;
}

.layout-mini-dock {
    flex-direction: column-reverse;
    align-items: center;
}

.layout-mini-dock .layout-mini-side {
    flex-shrink: 0;
    width: 46%;
    height: 8px;
}

.layout-mini-dock .layout-mini-main {
    align-self: stretch;
}

/* Your pages: pin or hide each page of the menu */
.menu-pages {
    flex-basis: 100%;
    margin-top: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--border-color);
}

.menu-pages-note {
    margin: 0 0 var(--space-4);
    max-width: 720px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.menu-pages-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-4) var(--space-6);
}

.menu-pages-title {
    margin: 0 0 var(--space-1);
    padding: 0 var(--space-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dark);
}

.menu-page {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: 6px;
}

.menu-page:hover {
    background: color-mix(in srgb, var(--text-main) 4%, transparent);
}

.menu-page-icon {
    width: 18px;
    font-size: 0.85rem;
    text-align: center;
    color: var(--text-muted);
}

.menu-page-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-normal);
}

.menu-page.is-hidden :is(.menu-page-icon, .menu-page-name) {
    opacity: 0.45;
}

.menu-page-pin {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-dark);
    cursor: pointer;
}

.menu-page-pin i {
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.menu-page-pin.is-on {
    color: var(--accent);
}

.menu-page-pin.is-on i {
    transform: none;
}

.menu-page-pin:hover:not(:disabled) {
    color: var(--text-normal);
    background: color-mix(in srgb, var(--text-main) 8%, transparent);
}

.menu-page-pin.is-on:hover:not(:disabled) {
    color: var(--accent);
}

.menu-page-pin:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.menu-page-pin:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

html[data-font="readable"] { --font-ui: 'Atkinson Hyperlegible', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* ── Theme animation (theme editor: Page background and Animation) ───────────
   The page picture can drift, zoom, float or shift color and follow the scroll a
   little; an effect (snow, rain, stars, bubbles) can move over the page behind the
   cards; cards can appear one after another and react when pointed at. It all
   moves with transform and opacity, which browsers animate cheaply, and it all
   stops for people who turn animation down (Preferences, or their device). */

/* Picture motion: the picture is drawn a little larger than the window while it
   moves, so no edge ever shows */
@keyframes eq-bg-drift {
    0%, 100% { transform: scale(1.18) translate(-5%, -3%); }
    50% { transform: scale(1.18) translate(5%, 3%); }
}

@keyframes eq-bg-zoom {
    0%, 100% { transform: scale(1.04); }
    50% { transform: scale(1.22); }
}

@keyframes eq-bg-float {
    0%, 100% { transform: scale(1.12) translateY(-4%); }
    50% { transform: scale(1.12) translateY(4%); }
}

@keyframes eq-bg-hue {
    from { filter: blur(var(--bg-blur)) hue-rotate(0deg); }
    to { filter: blur(var(--bg-blur)) hue-rotate(360deg); }
}

html[data-bg="picture"][data-bg-motion="drift"] body::before { animation: eq-bg-drift var(--bg-motion-time, 32s) ease-in-out infinite; }
html[data-bg="picture"][data-bg-motion="zoom"] body::before { animation: eq-bg-zoom var(--bg-motion-time, 32s) ease-in-out infinite; }
html[data-bg="picture"][data-bg-motion="float"] body::before { animation: eq-bg-float var(--bg-motion-time, 32s) ease-in-out infinite; }
html[data-bg="picture"][data-bg-motion="hue"] body::before { animation: eq-bg-hue var(--bg-motion-time, 45s) linear infinite; }

/* Parallax: appearance.js sets --bg-shift (up to 110px) from how far the page is scrolled, once
   per frame while scrolling, so no transition is needed (one on translate never runs while the
   picture's motion animation does) */
html[data-bg="picture"][data-parallax="on"] body::before {
    bottom: calc(var(--bg-blur) * -3 - 120px);
    translate: 0 calc(var(--bg-shift, 0px) * -1);
}

/* Effects: one layer over the page background and behind everything else, taller
   or wider than the window by exactly one repeat of its pattern, so it can move
   by that much and start again without a jump */
html[data-effect] .main-content {
    background-color: transparent;
}

html[data-effect] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

@keyframes eq-fx-fall { to { transform: translateY(640px); } }
@keyframes eq-fx-rise { to { transform: translateY(-640px); } }
@keyframes eq-fx-drift { to { transform: translateX(360px); } }
@keyframes eq-fx-sway {
    0%, 100% { translate: -12px 0; }
    50% { translate: 12px 0; }
}
@keyframes eq-fx-twinkle {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

html[data-effect="snow"] body::after {
    top: -640px;
    left: -16px;
    right: -16px;
    background-image:
        radial-gradient(circle at 60px 100px, rgba(255, 255, 255, 0.9) 0 2.6px, transparent 3.6px),
        radial-gradient(circle at 200px 420px, rgba(255, 255, 255, 0.85) 0 2.2px, transparent 3.2px),
        radial-gradient(circle at 120px 60px, rgba(255, 255, 255, 0.8) 0 1.8px, transparent 2.8px),
        radial-gradient(circle at 30px 230px, rgba(255, 255, 255, 0.75) 0 1.8px, transparent 2.8px),
        radial-gradient(circle at 90px 40px, rgba(255, 255, 255, 0.6) 0 1.2px, transparent 2.2px),
        radial-gradient(circle at 150px 120px, rgba(255, 255, 255, 0.55) 0 1.2px, transparent 2.2px);
    background-size: 410px 640px, 370px 640px, 290px 320px, 230px 320px, 190px 160px, 250px 160px;
    animation: eq-fx-fall 26s linear infinite, eq-fx-sway 7s ease-in-out infinite;
}

html[data-effect="rain"] body::after {
    top: -640px;
    background-image:
        radial-gradient(1px 15px at 20px 40px, rgba(190, 205, 230, 0.55), transparent),
        radial-gradient(1px 12px at 110px 200px, rgba(190, 205, 230, 0.5), transparent),
        radial-gradient(1px 18px at 60px 380px, rgba(190, 205, 230, 0.45), transparent),
        radial-gradient(1px 10px at 150px 100px, rgba(190, 205, 230, 0.4), transparent),
        radial-gradient(1px 13px at 40px 60px, rgba(190, 205, 230, 0.35), transparent),
        radial-gradient(1px 9px at 90px 120px, rgba(190, 205, 230, 0.3), transparent);
    background-size: 170px 640px, 230px 640px, 130px 640px, 190px 320px, 110px 160px, 150px 160px;
    animation: eq-fx-fall 1.1s linear infinite;
}

html[data-effect="stars"] body::after {
    left: -360px;
    background-image:
        radial-gradient(circle at 20px 40px, rgba(255, 255, 255, 0.95) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 200px 130px, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px),
        radial-gradient(circle at 70px 90px, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 300px 210px, rgba(255, 244, 214, 0.9) 0 1.2px, transparent 2.2px),
        radial-gradient(circle at 40px 20px, rgba(214, 228, 255, 0.6) 0 0.8px, transparent 1.8px);
    background-size: 360px 260px, 180px 190px, 120px 150px, 360px 330px, 90px 110px;
    animation: eq-fx-twinkle 3.5s ease-in-out infinite alternate, eq-fx-drift 160s linear infinite;
}

html[data-effect="bubbles"] body::after {
    bottom: -640px;
    left: -16px;
    right: -16px;
    background-image:
        radial-gradient(circle at 80px 120px, transparent 0 9px, rgba(var(--accent-rgb), 0.55) 10px 11px, transparent 12.5px),
        radial-gradient(circle at 260px 470px, transparent 0 6px, rgba(var(--accent-rgb), 0.5) 7px 8px, transparent 9.5px),
        radial-gradient(circle at 150px 60px, transparent 0 4px, rgba(var(--accent-rgb), 0.45) 5px 6px, transparent 7.5px),
        radial-gradient(circle at 40px 250px, transparent 0 12px, rgba(var(--accent-rgb), 0.35) 13px 14px, transparent 15.5px),
        radial-gradient(circle at 110px 90px, transparent 0 2px, rgba(var(--accent-rgb), 0.5) 3px 4px, transparent 5.5px);
    background-size: 430px 640px, 390px 640px, 310px 320px, 270px 640px, 210px 160px;
    animation: eq-fx-rise 34s linear infinite, eq-fx-sway 9s ease-in-out infinite;
}

/* Cards appear one after another when a page opens (instead of the whole page fading in) */
@keyframes eq-card-fade { from { opacity: 0; } }
@keyframes eq-card-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes eq-card-pop { from { opacity: 0; transform: scale(0.96); } }

html[data-card-in] .tab-content {
    animation: none;
}

html[data-card-in="fade"] .tab-content.active > * { animation: eq-card-fade 0.45s ease-out backwards; }
html[data-card-in="rise"] .tab-content.active > * { animation: eq-card-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
html[data-card-in="pop"] .tab-content.active > * { animation: eq-card-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards; }

html[data-card-in] .tab-content.active > :nth-child(2) { animation-delay: 60ms; }
html[data-card-in] .tab-content.active > :nth-child(3) { animation-delay: 120ms; }
html[data-card-in] .tab-content.active > :nth-child(4) { animation-delay: 180ms; }
html[data-card-in] .tab-content.active > :nth-child(5) { animation-delay: 240ms; }
html[data-card-in] .tab-content.active > :nth-child(n+6) { animation-delay: 300ms; }

/* Cards under the pointer: lift up, or glow in the accent color */
html[data-card-hover] :is(.module-card, .theme-tile, .layout-preset,
    .sugg-card, .settings-card) {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html[data-card-hover="lift"] :is(.module-card, .theme-tile,
    .layout-preset, .sugg-card):hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

html[data-card-hover="glow"] :is(.module-card, .theme-tile,
    .layout-preset, .sugg-card, .settings-card):hover {
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3), 0 0 26px rgba(var(--accent-rgb), 0.22);
}

/* Animation turned down: nothing moves. Stars stay as a still sky; the other effects
   only make sense moving, so they go. */
[data-motion="reduced"] body::before,
[data-motion="reduced"] body::after {
    animation: none !important;
    translate: none !important;
}

[data-motion="reduced"][data-effect]:not([data-effect="stars"]) body::after {
    display: none;
}

[data-motion="reduced"] .tab-content.active > * {
    animation: none !important;
}

[data-motion="reduced"][data-card-hover="lift"] :is(.module-card,
    .theme-tile, .layout-preset, .sugg-card):hover {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="on"]) body::before,
    :root:not([data-motion="on"]) body::after {
        animation: none !important;
        translate: none !important;
    }

    html:not([data-motion="on"])[data-effect]:not([data-effect="stars"]) body::after {
        display: none;
    }

    :root:not([data-motion="on"]) .tab-content.active > * {
        animation: none !important;
    }

    html:not([data-motion="on"])[data-card-hover="lift"] :is(.module-card,
        .theme-tile, .layout-preset, .sugg-card):hover {
        transform: none;
    }
}

/* ── More effects (theme editor: Animation). Same rules as above: one layer behind the cards,
   larger than the window by exactly one repeat along the way it moves, so it loops
   without a jump; transform and opacity only; nothing moves for people who ask for less. */
html[data-effect="fireflies"] body::after {
    left: -360px;
    background-image:
        radial-gradient(circle at 40px 60px, rgba(var(--accent-rgb), 0.95) 0 1.6px, rgba(var(--accent-rgb), 0.25) 3px, transparent 7px),
        radial-gradient(circle at 150px 170px, rgba(255, 236, 150, 0.9) 0 1.4px, rgba(255, 236, 150, 0.22) 3px, transparent 6px),
        radial-gradient(circle at 70px 40px, rgba(var(--accent-rgb), 0.75) 0 1.2px, transparent 5px),
        radial-gradient(circle at 20px 120px, rgba(255, 236, 150, 0.7) 0 1.1px, transparent 4.5px);
    background-size: 360px 320px, 180px 340px, 120px 260px, 90px 300px;
    animation: eq-fx-twinkle 2.4s ease-in-out infinite alternate, eq-fx-drift 110s linear infinite,
        eq-fx-sway 12s ease-in-out infinite;
}

html[data-effect="petals"] body::after {
    top: -640px;
    left: -16px;
    right: -16px;
    background-image:
        radial-gradient(7px 4px at 60px 100px, rgba(255, 182, 206, 0.9), transparent),
        radial-gradient(6px 3.5px at 220px 400px, rgba(255, 196, 214, 0.85), transparent),
        radial-gradient(6.5px 4px at 140px 60px, rgba(248, 170, 196, 0.8), transparent),
        radial-gradient(5px 3px at 30px 250px, rgba(255, 210, 224, 0.75), transparent),
        radial-gradient(4.5px 3px at 100px 30px, rgba(255, 190, 210, 0.6), transparent);
    background-size: 410px 640px, 370px 640px, 290px 320px, 230px 320px, 190px 160px;
    animation: eq-fx-fall 32s linear infinite, eq-fx-sway 6s ease-in-out infinite;
}

html[data-effect="leaves"] body::after {
    top: -640px;
    left: -16px;
    right: -16px;
    background-image:
        radial-gradient(9px 5px at 70px 120px, rgba(214, 120, 40, 0.85), transparent),
        radial-gradient(8px 4.5px at 240px 430px, rgba(190, 80, 30, 0.8), transparent),
        radial-gradient(8.5px 5px at 130px 50px, rgba(226, 170, 60, 0.8), transparent),
        radial-gradient(7px 4px at 40px 240px, rgba(160, 90, 40, 0.75), transparent);
    background-size: 430px 640px, 390px 640px, 310px 320px, 250px 320px;
    animation: eq-fx-fall 38s linear infinite, eq-fx-sway 8s ease-in-out infinite;
}

html[data-effect="embers"] body::after {
    bottom: -640px;
    left: -16px;
    right: -16px;
    background-image:
        radial-gradient(circle at 80px 120px, rgba(255, 170, 70, 0.95) 0 1.4px, rgba(255, 120, 40, 0.35) 3px, transparent 5px),
        radial-gradient(circle at 260px 470px, rgba(255, 140, 50, 0.85) 0 1.2px, rgba(255, 100, 30, 0.3) 2.6px, transparent 4.5px),
        radial-gradient(circle at 150px 60px, rgba(255, 200, 110, 0.8) 0 1px, transparent 3.5px),
        radial-gradient(circle at 40px 250px, rgba(255, 150, 60, 0.7) 0 1px, transparent 3.5px);
    background-size: 430px 640px, 390px 640px, 310px 320px, 270px 640px;
    animation: eq-fx-rise 24s linear infinite, eq-fx-sway 5s ease-in-out infinite,
        eq-fx-twinkle 1.8s ease-in-out infinite alternate;
}

html[data-effect="confetti"] body::after {
    top: -640px;
    left: -16px;
    right: -16px;
    background-image:
        radial-gradient(3.5px 6px at 60px 100px, rgba(242, 193, 78, 0.9), transparent),
        radial-gradient(5.5px 3px at 200px 420px, rgba(86, 198, 226, 0.9), transparent),
        radial-gradient(3.5px 6px at 120px 60px, rgba(239, 122, 182, 0.9), transparent),
        radial-gradient(5.5px 3.5px at 30px 230px, rgba(92, 201, 138, 0.9), transparent),
        radial-gradient(3px 5.5px at 90px 40px, rgba(169, 140, 246, 0.9), transparent),
        radial-gradient(5.5px 3px at 150px 120px, rgba(245, 155, 94, 0.9), transparent);
    background-size: 410px 640px, 370px 640px, 290px 320px, 230px 320px, 190px 160px, 250px 160px;
    animation: eq-fx-fall 20s linear infinite, eq-fx-sway 4s ease-in-out infinite;
}

/* ── Effects drawn on a canvas (effects.js): the newer built-in ones and the ones people make.
   The same place as the effects above: over the page background, behind everything else. */
.fx-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Choosing an effect, and making your own (Preferences > Look, and the theme editor) */
.effect-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-inner);
}

.effect-pick .settings-select {
    flex: 1 1 240px;
    max-width: 360px;
}

.effect-panel {
    flex-basis: 100%;
    margin-top: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--border-color);
}

.effect-own {
    padding: var(--space-4);
    background: color-mix(in srgb, var(--text-main) 3%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.effect-builder > .theme-editor-fields:first-child {
    margin-top: 0;
}

.effect-builder-heading {
    margin: var(--space-field) 0 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-main);
}

.effect-colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.effect-colors > .text-muted {
    font-size: 0.85rem;
}

.effect-color {
    position: relative;
    display: inline-flex;
}

.effect-color input[type="color"] {
    width: 46px;
    height: 34px;
    padding: 0;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.effect-color-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 0.65rem;
    color: var(--text-normal);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
}

.effect-color-remove:hover {
    color: var(--danger-text);
}

.effect-color-remove:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* ── Backdrops (theme editor: Backdrop): drawn from the theme's colors on a page with no
   picture, on the same fixed layer a picture uses, at the theme's strength ─────────── */
html[data-backdrop] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--backdrop-strength, 0.3);
}

html[data-backdrop] .main-content {
    background-color: transparent;
}

html[data-backdrop="gradient"] body::before {
    background: linear-gradient(135deg, var(--primary), transparent 52%, var(--accent));
}

html[data-backdrop="glow"] body::before {
    background: radial-gradient(70% 55% at 50% 0%, var(--accent), transparent 72%);
}

html[data-backdrop="dots"] body::before {
    background: radial-gradient(var(--accent) 1.2px, transparent 1.7px) 0 0 / 22px 22px;
}

html[data-backdrop="grid"] body::before {
    background:
        linear-gradient(var(--accent) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--accent) 1px, transparent 1px) 0 0 / 40px 40px;
}

/* Aurora: soft light in the theme's colors, drifting slowly (still for anyone who asks for
   less motion, by the rules above for the picture layer) */
@keyframes eq-aurora {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(4%, -3%) rotate(8deg) scale(1.08); }
    100% { transform: translate(-3%, 4%) rotate(-6deg) scale(1.04); }
}

html[data-backdrop="aurora"] body::before {
    inset: -20%;
    background:
        radial-gradient(40% 35% at 20% 25%, var(--accent), transparent 70%),
        radial-gradient(35% 40% at 80% 20%, var(--primary), transparent 70%),
        radial-gradient(45% 40% at 60% 85%, var(--success), transparent 70%);
    filter: blur(48px);
    animation: eq-aurora 32s ease-in-out infinite alternate;
}

/* ── Theme details (theme editor: Details) ──────────────────────────────────────────── */

/* Card accents: an edge or a glow in the links color */
html[data-card-accent="top"] .main-content :is(.settings-card, .module-card, .mod-list,
    .sugg-card, .perm-role) {
    border-top: 3px solid var(--accent);
}

html[data-card-accent="left"] .main-content :is(.settings-card, .module-card, .mod-list,
    .sugg-card, .perm-role) {
    border-left: 3px solid var(--accent);
}

html[data-card-accent="glow"] .main-content :is(.settings-card, .module-card, .mod-list,
    .sugg-card, .perm-role) {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18), 0 0 24px rgba(var(--accent-rgb), 0.12);
}

/* The menu: tinted with the links color, or floating as a panel of its own (beside the page) */
html[data-menu-style="tinted"] .sidebar {
    background-color: color-mix(in srgb, var(--accent) 8%, var(--bg-darker));
}

html[data-menu-style="floating"]:is([data-nav-position="left"], [data-nav-position="right"]) .sidebar {
    margin: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

/* Buttons: solid (standard), soft, outlined, or a gradient from the buttons color to the links color */
html[data-buttons="soft"] .btn-primary {
    background-color: rgba(var(--accent-rgb), 0.16);
    border-color: transparent;
    color: var(--accent);
}

html[data-buttons="soft"] .btn-primary:hover {
    background-color: rgba(var(--accent-rgb), 0.26);
    border-color: transparent;
}

html[data-buttons="outline"] .btn-primary {
    background-color: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

html[data-buttons="outline"] .btn-primary:hover {
    background-color: rgba(var(--accent-rgb), 0.12);
    border-color: var(--accent);
}

html[data-buttons="gradient"] .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
}

/* A font for headings, apart from the text's (the bot's name, which is the brand, keeps its own) */
html[data-heading-font] :is(h1, h2, h3, h4):not(.brand-name) {
    font-family: var(--font-heading);
}

html[data-heading-font="default"] { --font-heading: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
html[data-heading-font="rounded"] { --font-heading: 'Nunito', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
html[data-heading-font="geometric"] { --font-heading: 'Poppins', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
html[data-heading-font="serif"] { --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif; }
html[data-heading-font="mono"] { --font-heading: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; }
html[data-heading-font="readable"] { --font-heading: 'Atkinson Hyperlegible', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* Menu icons: the links color, or a color per group of pages (by page, so a pinned page
   keeps its group's color) */
html[data-nav-icons="accent"] .sidebar .nav li > i {
    color: var(--accent);
}

html[data-nav-icons="colorful"] .sidebar .nav li > i {
    color: var(--nav-icon, var(--text-muted));
}

.nav li:is([data-tab="dashboard"], [data-tab="analytics"], [data-tab="activity-log"]) { --nav-icon: #5b92dc; }
.nav li:is([data-tab="wl-security"], [data-tab="checkup"], [data-tab="backups"]) { --nav-icon: #e5645e; }
.nav li:is([data-tab="members"], [data-tab="moderator"], [data-tab="automod"], [data-tab="discord-bans"],
    [data-tab="channel-restrictions"]) { --nav-icon: #e8913a; }
.nav li:is([data-tab="welcome"], [data-tab="invites"], [data-tab="suggestions"]) { --nav-icon: #4fb97a; }
.nav li:is([data-tab="ticketing"], [data-tab="transcripts"], [data-tab="applications"], [data-tab="forms"],
    [data-tab="vouches"]) { --nav-icon: #9d7ae6; }
.nav li:is([data-tab="embeds"], [data-tab="sticky-messages"], [data-tab="custom-commands"]) { --nav-icon: #34b8b0; }
.nav li:is([data-tab="config"], [data-tab="modules"], [data-tab="permissions"], [data-tab="staff-names"],
    [data-tab="server-tools"]) { --nav-icon: #94a3b8; }
.nav li:is([data-tab="bot-identity"], [data-tab="developer"]) { --nav-icon: #d9a53c; }

html[data-theme="light"] .nav li:is([data-tab="dashboard"], [data-tab="analytics"], [data-tab="activity-log"]) { --nav-icon: #2463c2; }
html[data-theme="light"] .nav li:is([data-tab="wl-security"], [data-tab="checkup"], [data-tab="backups"]) { --nav-icon: #c53030; }
html[data-theme="light"] .nav li:is([data-tab="members"], [data-tab="moderator"], [data-tab="automod"],
    [data-tab="discord-bans"], [data-tab="channel-restrictions"]) { --nav-icon: #c2410c; }
html[data-theme="light"] .nav li:is([data-tab="welcome"], [data-tab="invites"], [data-tab="suggestions"]) { --nav-icon: #15803d; }
html[data-theme="light"] .nav li:is([data-tab="ticketing"], [data-tab="transcripts"], [data-tab="applications"],
    [data-tab="forms"], [data-tab="vouches"]) { --nav-icon: #6d28d9; }
html[data-theme="light"] .nav li:is([data-tab="embeds"], [data-tab="sticky-messages"], [data-tab="custom-commands"]) { --nav-icon: #0f766e; }
html[data-theme="light"] .nav li:is([data-tab="config"], [data-tab="modules"], [data-tab="permissions"],
    [data-tab="staff-names"], [data-tab="server-tools"]) { --nav-icon: #475569; }
html[data-theme="light"] .nav li:is([data-tab="bot-identity"], [data-tab="developer"]) { --nav-icon: #a35c00; }

/* ── The person's own look (Preferences > Look and Layout) ────────────────────────────
   On <html> from their preferences. Their colors (accent, status, contrast) are custom
   properties set by appearance.js. */

/* Cards: flat (no outlines) or raised (a shadow) */
html[data-cards="flat"] .main-content :is(.settings-card,
    .module-card, .mod-list, .mod-rail, .theme-tile, .layout-preset, .layout-options, .sec-banner, .sec-threat,
    .sec-protections, .data-table-wrap, .tools-summary, .sugg-card, .perm-role) {
    border-color: transparent;
    box-shadow: none;
}

html[data-cards="raised"] .main-content :is(.settings-card,
    .module-card, .mod-list, .mod-rail, .theme-tile, .layout-preset, .layout-options, .sec-banner, .sec-threat,
    .sec-protections, .data-table-wrap, .tools-summary, .sugg-card, .perm-role) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 26px rgba(0, 0, 0, 0.24);
}

html[data-theme="light"][data-cards="raised"] .main-content :is(.settings-card,
    .module-card, .mod-list, .mod-rail, .theme-tile, .layout-preset, .layout-options, .sec-banner,
    .sec-threat, .sec-protections, .data-table-wrap, .tools-summary, .sugg-card,
    .perm-role) {
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 10px 26px rgba(17, 24, 39, 0.1);
}

/* Profile pictures (Discord's own previews keep Discord's round ones) */
html[data-avatars="rounded"] :is(.account-avatar, .app-avatar, .app-avatar-blank, .app-avatar-lg, .sec-avatar,
    .sec-avatar-empty, .sec-avatar-lg, .slog-avatar, .slog-avatar-blank) {
    border-radius: 28%;
}

html[data-avatars="square"] :is(.account-avatar, .app-avatar, .app-avatar-blank, .app-avatar-lg, .sec-avatar,
    .sec-avatar-empty, .sec-avatar-lg, .slog-avatar, .slog-avatar-blank) {
    border-radius: 4px;
}

/* A faint texture behind the pages; a theme's picture or backdrop takes its place */
html:not([data-bg="picture"]):not([data-backdrop]):is([data-texture="dots"], [data-texture="grid"],
    [data-texture="lines"], [data-texture="diagonal"]) .main-content {
    --texture-ink: color-mix(in srgb, var(--text-main) 7%, transparent);
    background-attachment: local;
}

html:not([data-bg="picture"]):not([data-backdrop])[data-texture="dots"] .main-content {
    background-image: radial-gradient(var(--texture-ink) 1px, transparent 1.5px);
    background-size: 18px 18px;
}

html:not([data-bg="picture"]):not([data-backdrop])[data-texture="grid"] .main-content {
    background-image: linear-gradient(var(--texture-ink) 1px, transparent 1px),
        linear-gradient(90deg, var(--texture-ink) 1px, transparent 1px);
    background-size: 32px 32px;
}

html:not([data-bg="picture"]):not([data-backdrop])[data-texture="lines"] .main-content {
    background-image: linear-gradient(var(--texture-ink) 1px, transparent 1px);
    background-size: 100% 28px;
}

html:not([data-bg="picture"]):not([data-backdrop])[data-texture="diagonal"] .main-content {
    background-image: repeating-linear-gradient(45deg, var(--texture-ink) 0 1px, transparent 1px 14px);
}

/* Scrollbars: in the accent color, or wide enough to grab easily */
html[data-scrollbars="accent"] * {
    scrollbar-color: rgba(var(--accent-rgb), 0.6) transparent;
}

html[data-scrollbars="wide"] * {
    scrollbar-width: auto;
}

/* The menu's current page: soft (standard), a bar, filled with the buttons color, or outlined */
html[data-nav-active="bar"] .nav li.active {
    background-color: transparent;
}

html[data-nav-active="solid"] .nav li.active {
    background-color: var(--primary);
    box-shadow: none;
    color: var(--on-primary);
}

html[data-nav-active="solid"] .nav li.active > i {
    color: #fff;
}

html[data-nav-active="outline"] .nav li.active {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.65);
}

/* Line spacing */
html[data-leading="relaxed"] .main-content :is(p, li, dd, td, label, small, .text-muted):not(.sidebar *) {
    line-height: 1.7;
}

/* Opening a page: fade (standard), slide up, or right away. A theme whose cards appear one
   by one does its own. */
@keyframes eq-page-slide { from { opacity: 0; transform: translateY(10px); } }

html[data-page-in="slide"]:not([data-card-in]) .tab-content {
    animation: eq-page-slide 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html[data-page-in="none"]:not([data-card-in]) .tab-content {
    animation: none;
}

/* Short notices at the top right, under the top bar (and a menu along the top) */
html[data-toasts="top"] .toast {
    top: calc(var(--toast-top, 58px) + var(--space-4));
    bottom: auto;
    transform: translateY(-80px);
}

html[data-toasts="top"] .toast.show {
    transform: translateY(0);
}

/* High contrast: stronger focus outlines as well as the stronger colors */
html[data-contrast="high"] :focus-visible {
    outline-width: 3px;
    outline-offset: 2px;
}

html[data-contrast="high"] .nav li:not(.active) {
    color: var(--text-normal);
}

/* Preferences: the accent color swatches */
.accent-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.accent-swatch {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--swatch, var(--primary));
    box-shadow: 0 0 0 1px var(--border-color);
    cursor: pointer;
}

.accent-swatch.is-theme {
    background: conic-gradient(#5b92dc, #a98cf6, #ef7ab6, #f59b5e, #eec057, #5cc98a, #46cdbd, #5b92dc);
}

.accent-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-main);
}

.accent-swatch:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* Preferences: tab panels (each a stack; its sections are spaced by the stack) */
.prefs-panel > .appearance-section {
    margin-bottom: 0;
}

/* The Day and night theme tile: light meeting dark. Drawn once inside the outline (padding-box,
   no-repeat): a repeating gradient would wrap round under the 1px border and show slivers of the
   other colors along the edges. */
.theme-swatches-daynight {
    background: linear-gradient(135deg, #f3f4f6 0 48%, #eec057 48% 52%, #14171c 52% 100%) no-repeat padding-box;
}

/* Theme editor: a line under a field saying what its choices do, and fields that need a whole row */
.theme-field-hint {
    margin: var(--space-hint) 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.theme-editor-fields > .is-wide {
    grid-column: 1 / -1;
}

/* Theme editor: animations are paused for the person editing (they asked for less motion) */
.theme-motion-notice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-inner);
    padding: var(--space-3) var(--space-4);
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--text-normal);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    border-radius: 8px;
}

.theme-motion-notice > i {
    color: var(--warning-text);
    font-size: 1rem;
}

.theme-motion-notice p {
    flex: 1;
    margin: 0;
}

.theme-motion-notice .btn {
    flex-shrink: 0;
}

.theme-editor-fields > .theme-motion-notice {
    margin: 0;
}

/* A setting another part of the page pointed to ("Show the setting") */
@keyframes eq-pointed-out {
    from { background-color: rgba(var(--accent-rgb), 0.22); }
    to { background-color: transparent; }
}

.layout-option.is-pointed-out {
    animation: eq-pointed-out 2.4s ease-out;
}

/* Where to switch on a Server Tools change (serverToolsHint): many members at once, a category with its channels */
.tools-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.tools-hint i {
    margin-right: var(--space-1);
    color: var(--text-dark);
}

/* Permissions: what a section's levels allow, when that isn't obvious */
.perm-hint {
    margin: var(--space-2) 0 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* ── Permissions page: roles and the level each has on every page ───────────
   Levels take the theme's colors: Edit success, Write primary, Read muted text,
   None dimmed text (permissions.js). */
.perm-level-chip,
.perm-dot,
.perm-level-btn {
    --level-color: var(--text-dark);
}

:is(.perm-level-chip, .perm-dot, .perm-level-btn)[data-level="read"] { --level-color: var(--text-muted); }
:is(.perm-level-chip, .perm-dot, .perm-level-btn)[data-level="write"] { --level-color: var(--accent); }
:is(.perm-level-chip, .perm-dot, .perm-level-btn)[data-level="edit"] { --level-color: var(--success-text); }

.perm-level-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--pad-tile);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.perm-level-tile p {
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.perm-level-chip {
    padding: var(--pad-chip);
    border: 1px solid var(--level-color);
    border-radius: 4px;
    color: var(--level-color);
    font-size: 0.75rem;
    font-weight: 700;
}

.perm-levels-note {
    margin-top: var(--space-inner);
    font-size: 0.83rem;
}

.perm-roles {
    display: flex;
    flex-direction: column;
    gap: var(--space-inner);
}

.perm-role {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-darker);
}

.perm-role-top {
    display: flex;
    align-items: center;
    gap: var(--gap-row);
    padding-right: var(--space-4);
}

.perm-role-remove.is-placeholder {
    visibility: hidden;         /* holds the Remove button's place on a role that can't be removed */
}

.perm-role-head {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.perm-role-head:hover {
    background: var(--bg-tertiary);
}

.perm-role-swatch {
    flex-shrink: 0;
    width: 4px;
    height: 40px;
    border-radius: 4px;
    background: var(--role-color, var(--text-dark));
}

.perm-role-title {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.perm-role-name {
    overflow: hidden;
    color: var(--text-main);
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.perm-role-note {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.perm-role-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-row);
    color: var(--text-muted);
    font-size: 0.78rem;
}

.perm-dots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.perm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--level-color);
}

.perm-dot[data-level="none"] {
    background: var(--border-color);
}

.perm-role-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.perm-role-head[aria-expanded="true"] .perm-role-arrow {
    transform: rotate(180deg);
}

.perm-role-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    border-top: 1px solid var(--border-color);
}

.perm-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-row);
    margin-bottom: var(--space-2);
}

.perm-group-head h4 {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.perm-set-all {
    display: flex;
    align-items: center;
    gap: var(--gap-row);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.perm-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--space-2);
}

.perm-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
}

.perm-section-name {
    color: var(--text-normal);
    font-size: 0.85rem;
    font-weight: 600;
}

.perm-picker {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.perm-level-btn {
    padding: var(--pad-control-sm);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-darker);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.perm-level-btn:hover:not(:disabled) {
    border-color: var(--level-color);
    color: var(--text-main);
}

.perm-level-btn[aria-pressed="true"] {
    border-color: var(--level-color);
    background: color-mix(in srgb, var(--level-color) 24%, var(--bg-darker));
    color: var(--text-main);
}

.perm-level-btn[data-level="none"][aria-pressed="true"] {
    border-color: var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-main);
}

.perm-level-btn:disabled {
    cursor: not-allowed;
}

.perm-level-btn:disabled:not([aria-pressed="true"]) {
    opacity: 0.45;
}

/* Command access: a row per staff command, allowed or not for the role */
.cmd-perm-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
}

.cmd-perm-row {
    display: flex;
    align-items: center;
    gap: var(--gap-row);
    padding: var(--pad-cell);
}

.cmd-perm-row + .cmd-perm-row {
    border-top: 1px solid var(--border-color);
}

.cmd-perm-row code {
    color: var(--accent);
    font-size: 0.8rem;
}

.cmd-perm-desc {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cmd-perm-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-1);
    padding: var(--pad-control-sm);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-darker);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cmd-perm-toggle[aria-pressed="true"] {
    border-color: var(--success);
    color: var(--success-text);
}

@media (max-width: 640px) {
    .perm-role-head {
        padding: var(--space-3) var(--space-4);
    }

    .perm-group-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cmd-perm-desc {
        display: none;
    }
}

/* ── A state beside something: a dot and a word, in the theme's status colors ── */
.state-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--pad-chip);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.state-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.state-chip.is-good { color: var(--success-text); }
.state-chip.is-warn { color: var(--warning-text); }
.state-chip.is-bad { color: var(--danger-text); }

.mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8rem;
}

.data-table tr.is-dimmed td,
.data-table tr.is-dimmed td :is(code, .state-chip) {
    color: var(--text-muted);
}

/* Staff Roster: your own name, and the name column */
.staff-name-me {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.staff-name-value {
    color: var(--accent);
    font-size: 1.15rem;
    font-weight: 700;
}

.staff-name-value.is-unset {
    color: var(--text-muted);
    font-weight: 600;
}

.staff-name-cell {
    color: var(--accent);
    font-weight: 600;
}

/* ── Empty states: a message where a list or page has nothing to show yet ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-4);
    color: var(--text-muted);
    text-align: center;
}

.empty-state > i {
    color: var(--text-dark);
    font-size: 2rem;
}

.empty-state-title {
    color: var(--text-normal);
    font-weight: 600;
}

.empty-state-line {
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
    text-align: center;
}

.empty-state-line.is-error {
    color: var(--danger-text);
}

/* ── A list beside what it opens or narrows (the Features page's features, the Commands page's groups) ──
   The list stays in view while the page scrolls; on narrow screens it becomes a menu. */
.modules-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: var(--space-page);
    align-items: start;
}

.mod-rail-wrap {
    position: sticky;
    top: 1rem;
    max-height: calc(var(--view-h, 100vh) - var(--space-8));
    overflow-y: auto;
    scrollbar-width: thin;
}

.mod-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    padding: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.mod-rail-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    margin-top: var(--space-3);
}

.mod-rail-title {
    margin: 0 0 var(--space-1);
    padding: 0 var(--space-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dark);
}

.mod-rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-2);
    background: none;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    text-align: left;
    color: var(--text-normal);
    cursor: pointer;
}

.mod-rail-item:hover {
    color: var(--text-main);
    background: color-mix(in srgb, var(--text-main) 5%, transparent);
}

.mod-rail-item.is-selected {
    font-weight: 600;
    color: var(--accent);
    background: var(--nav-active-bg);
    box-shadow: inset 3px 0 0 var(--primary);
}

.mod-rail-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.mod-rail-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mod-rail-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.mod-rail-item.is-selected .mod-rail-count {
    color: inherit;
}

.mod-rail-empty {
    margin: var(--space-2) var(--space-2);
    font-size: 0.82rem;
}

/* On or off, with a dot so it doesn't rely on color alone */
.mod-state {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dark);
}

.mod-state.is-on {
    color: var(--success-text);
}

.mod-state.is-on::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: var(--space-1);
    vertical-align: 1px;
    border-radius: 50%;
    background: var(--success);
}

.mod-picker {
    display: none;
}

/* All modules: a tile per module */
.mod-overview-intro {
    margin: 0 0 var(--space-page);
    font-size: 0.88rem;
}

.mod-overview .module-category:last-child {
    margin-bottom: 0;
}

/* Every feature on one line: its name (which opens its settings), what it is, and its switch */
.mod-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.mod-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-right: var(--pad-card-x);
}

.mod-row + .mod-row {
    border-top: 1px solid var(--border-color);
}

.mod-row-open {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    flex: 1;
    min-width: 0;
    padding: var(--space-3) 0 var(--space-3) var(--pad-card-x);
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.mod-row-open:hover .mod-row-name {
    color: var(--accent);
}

.mod-row-open:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.mod-row-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-main);
}

.mod-row-desc {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.mod-row .module-commands {
    grid-column: 2;
}

/* An open row's full description and commands (Everything), above its settings */
.mod-row-panel > .mod-row-about,
.mod-row-panel > .module-commands {
    margin: 0 0 var(--space-3);
}

.mod-row-about {
    max-width: 90ch;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.mod-row-panel > .module-commands {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--accent);
}

/* On a feature's own page a row opens to its settings instead of leaving the page */
.mod-row-fold {
    flex-wrap: wrap;
    row-gap: 0;
}

.mod-row-fold .mod-row-name::before {
    content: '';
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: var(--space-3);
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    vertical-align: 0.12em;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.mod-row-fold [aria-expanded="true"] .mod-row-name::before {
    transform: rotate(45deg);
}

.mod-row-panel {
    flex-basis: 100%;
    padding: var(--space-2) 0 var(--space-4) var(--pad-card-x);
}

@media (max-width: 640px) {
    .mod-row {
        gap: var(--space-3);
        padding-right: var(--space-3);
    }

    .mod-row-open {
        grid-template-columns: minmax(0, 1fr);
        padding-left: var(--space-3);
    }

    .mod-row-panel {
        padding-left: var(--space-3);
    }

    .mod-row .module-commands {
        grid-column: 1;
    }
}

:is(.mod-row, .mod-editor-head) .module-commands {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.74rem;
    color: var(--accent);
}

/* One module: its heading, section links, sections, and the save bar */
.mod-editor,
.mod-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-page);
}

.mod-editor > .settings-card,
.mod-sections > .settings-card,
.mod-editor > .section-title,
.mod-editor > .global-notice {
    margin: 0;
}

.mod-editor-head .settings-card-header {
    align-items: center;
    border-bottom: 0;
}

.mod-editor-head p {
    max-width: 760px;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.mod-editor-head .module-commands {
    margin-top: var(--space-2);
}

.mod-power {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}

.mod-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.mod-jump-link {
    padding: var(--space-1) var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.mod-jump-link:hover {
    color: var(--text-main);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.mod-jump-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* (a section jumped to stops below the editor's bar: the bar's height and a gap) */
.mod-section {
    scroll-margin-top: calc(var(--space-10) * 2);
}

.mod-section .settings-card-header h3 {
    margin: 0;
}

/* Fields side by side, up to three a row, lined up like the rest of the dashboard */
.mod-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(240px, calc((100% - 2.5rem) / 3))), 1fr));
    gap: 0 var(--space-5);
}

.mod-fields > .module-field-rows,
.mod-fields > .module-field-textarea,
.mod-fields > .module-field-wide {
    grid-column: 1 / -1;
}

.mod-fields > .module-field {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    margin-bottom: var(--space-4);
}

.mod-fields > .module-field > label {
    align-self: end;
}

.mod-fields > .module-field > :nth-child(2),
.mod-fields > .module-field > small {
    align-self: start;
}

.mod-fields > .module-field-bool > .module-bool-control {
    grid-row: 2;
    min-height: 44px;
}

.mod-fields > .module-field-bool > small {
    grid-row: 3;
}

.mod-section .settings-card-body > .mod-fields {
    margin-bottom: calc(-1 * var(--space-4));
}

/* Unsaved changes, at the end of the form they belong to (the Server Map's settings). It doesn't float over the
   page: an editor's Save is in its bar at the top. */
.mod-savebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border-color));
    border-radius: 10px;
}

.mod-savebar-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
}

.mod-savebar-actions {
    display: flex;
    gap: var(--space-2);
}

.mod-editor-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .modules-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .mod-rail-wrap {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .mod-rail {
        display: none;
    }

    .mod-picker {
        display: block;
    }
}

/* ── Two-step sign-in (two-step.js): the screen a server shows first, the dialog, the card ─ */
.two-step-box {
    max-width: 420px;
}

.two-step-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.two-step-form > p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.two-step-form label {
    color: var(--text-normal);
    font-size: 0.85rem;
    font-weight: 600;
}

.two-step-code {
    max-width: 200px;
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
}

.two-step-qr {
    border-radius: 8px;
}

.two-step-key {
    padding: var(--space-2) var(--space-3);
    border-radius: 6px;
    background: var(--bg-tertiary);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
}

.two-step-where {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.two-step-where > p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.two-step-help,
.two-step-gate .gate-box > p.two-step-help {
    font-size: 0.8rem;
}

.two-step-end .settings-select {
    width: auto;
}

.two-step-dialog .modal-content {
    width: 480px;
    max-width: calc(100vw - 32px);
}

.two-step-dialog-body {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6) var(--space-5);
}

.two-step-dialog-body > p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.two-step-dialog-body .gate-actions {
    justify-content: flex-start;
}

.two-step-dialog-body .two-step-form,
.two-step-dialog-body .two-step-where {
    align-items: flex-start;
}

.two-step-yours {
    margin: 0;
    font-size: 0.85rem;
}

/* ── Your sign-ins (account menu, signins.js) ─────────────────────────────── */
.account-menu-form {
    margin: 0;
}

.signins-dialog .modal-content {
    width: 520px;
    max-width: calc(100vw - 32px);
}

.signins-intro {
    margin: 0;
    padding: var(--space-4) var(--space-6) var(--space-1);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.signins-list {
    padding: var(--space-2) var(--space-6) var(--space-5);
}

.signins-rows {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.signins-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
}

.signins-row > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
}

.signins-row strong {
    font-size: 0.9rem;
    color: var(--text-main);
}

.signins-reauth {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
    border-radius: 8px;
}

.signins-reauth p,
.signins-only {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

/* A filter menu beside a card's buttons (Developer > Security) sizes to its options */
.tools-actions-top .settings-select {
    width: auto;
    min-width: 220px;
}

/* ── Hover states that used to be inline handlers (actions.js) ────────────── */
/* The privacy policy and terms, under the sign-in button */
/* The sign-in screen's links, spaced like the footer's (one with no address yet stays hidden). On a phone they
   take two rows, with room between them for a finger */
.legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-5);
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.legal-links a {
    color: var(--text-muted);
}

.legal-links a:hover,
.legal-links a:focus-visible {
    color: var(--text-main);
}

.login-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    background: #5865f2;
    border-radius: 8px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.login-discord-btn:hover,
.login-discord-btn:focus-visible {
    background: #4752c4;
}

/* The screens before the dashboard: sign in, "no access yet", and the authenticator's (the console's too).
   The box sits in the middle by its own margins, not by the gate's alignment: when it is taller than the
   window (setting an authenticator up on a phone) the margins give way and the gate scrolls from the box's
   top, where centering would have cut its top and its buttons off for good. */
.gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    padding: var(--space-8);
    background: var(--bg-darker);
    overflow-y: auto;
}

.gate-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 380px;
    margin: auto;
    text-align: center;
}

.gate-box h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.gate-box > p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.gate-box > .gate-error,
.field-error {
    color: var(--danger-text);
    font-size: 0.85rem;
}

.field-error {
    margin-top: var(--space-2);
}

.gate-actions {
    display: flex;
    gap: var(--space-2);
}

a.btn {
    text-decoration: none;
}

/* "Show all": under a list that shows its first entries (showFirst in common.js) */
.list-more {
    display: flex;
    width: fit-content;
    margin: var(--space-inner) auto 0;
}

/* A note at the start of a dialog's footer, across from its buttons */
.modal-footer-note {
    margin-right: auto;
    align-self: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Who joined with an invite */
.invite-joins-dialog {
    width: 620px;
    max-width: calc(100vw - 32px);
}

/* The staff name prompt */
.staff-name-dialog {
    width: 440px;
    max-width: calc(100vw - 32px);
}

.staff-name-dialog .modal-body {
    padding: var(--space-5) var(--space-6);
}

.staff-name-dialog .modal-body > p {
    margin-bottom: var(--space-5);
    color: var(--text-normal);
    font-size: 0.92rem;
    line-height: 1.55;
}

.staff-name-dialog .form-group {
    margin: 0;
}

.staff-name-dialog .form-group small {
    display: block;
    margin-top: var(--space-hint);
    color: var(--text-muted);
    font-size: 0.8rem;
}

.login-discord-btn i {
    font-size: 1.1rem;
}

.ban-row:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* ── Members: pages, and the tools on a member's profile ─────────────────── */
.mem-pager {
    justify-content: space-between;
    flex-wrap: wrap;
}

.mem-pager .settings-select {
    width: auto;
}

/* A member's Log tab: which kind of event, and a way to the full Activity Log */
.mem-log-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.mem-log-bar .settings-select {
    flex: 1 1 220px;
    max-width: 360px;
}

.mem-log-bar + .global-notice {
    margin-bottom: var(--space-4);
}

.mem-log-end {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Event lists update live (server-log.js): a small marker, and new rows fade in from the accent color */
/* (at the end of the filters, on the line of their boxes) */
.slog-live {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: flex-end;
    min-height: var(--control-height);
    gap: var(--space-1);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.slog-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    animation: slog-pulse 2s ease-in-out infinite;
}

@keyframes slog-pulse {
    50% { opacity: 0.35; }
}

@keyframes slog-new {
    from { background-color: rgba(var(--accent-rgb), 0.16); }
    to { background-color: transparent; }
}

.slog-row.is-new {
    animation: slog-new 2.5s ease-out;
}

[data-motion="reduced"] :is(.slog-live-dot, .slog-row.is-new) {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="on"]) :is(.slog-live-dot, .slog-row.is-new) {
        animation: none;
    }
}

.mem-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.mem-page {
    min-width: 34px;
    height: 34px;
    padding: 0 var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-normal);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.mem-page:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border-color));
    color: var(--text-main);
}

.mem-page:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.mem-page:disabled {
    opacity: 0.45;
    cursor: default;
}

.mem-page.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
}

.mem-page-gap {
    padding: 0 var(--space-1);
    color: var(--text-muted);
}

.mem-role-tools {
    margin-top: var(--space-2);
}

.mem-role-tools small {
    font-size: 0.78rem;
}

.mem-progress {
    margin: var(--space-2) 0 0;
    font-size: 0.84rem;
}

/* ── A member's moderation and clean-up actions: a row each (members.js _memRow) ── */
.mem-actions {
    padding: 0 var(--space-4);
    background: color-mix(in srgb, var(--bg-darker) 60%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.mem-action {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.mem-action-text {
    flex: 1 1 240px;
    min-width: 0;
}

.mem-action-text p {
    line-height: 1.45;
}

.mem-action-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.mem-action-controls .settings-select {
    width: auto;
}

.mem-action .mem-progress {
    margin-top: var(--space-1);
    color: var(--text-normal);
}

/* On narrow screens the rows stack (see .tools-row): text, then its controls */
@media (max-width: 700px) {
    .mem-action-text {
        flex: none;
        width: 100%;
    }

    .mem-action-controls {
        justify-content: flex-start;
    }
}

/* ── Features page: a feature with its own pages (modules.js _modAreaView) ── */
.mod-area h3 {
    margin: 0 0 var(--space-1);
    font-size: 0.95rem;
}

.mod-area h3:not(:first-child) {
    margin-top: var(--space-5);
}

.mod-area p {
    margin: 0 0 var(--space-2);
    font-size: 0.88rem;
    line-height: 1.5;
}

.module-feature-link {
    flex-shrink: 0;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ── Security check-up ─────────────────────────────────────────────────────── */
.checkup-score {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.checkup-grade {
    display: flex;
    flex-shrink: 0;
    align-items: baseline;
    gap: var(--space-1);
}

.checkup-grade strong {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.checkup-grade span {
    color: var(--text-muted);
    font-weight: 600;
}

.checkup-grade-strong strong,
.checkup-grade-good strong { color: var(--status-good); }
.checkup-grade-fair strong { color: var(--status-warning); }
.checkup-grade-risk strong { color: var(--status-critical); }

.checkup-score-text {
    flex: 1;
    min-width: 0;
}

.checkup-score-text h3 {
    margin: 0 0 var(--space-2);
}

.checkup-score-text p {
    margin: var(--space-2) 0 0;
}

.checkup-meter {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.checkup-meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.checkup-meter-fill.checkup-grade-strong,
.checkup-meter-fill.checkup-grade-good { background: var(--status-good); }
.checkup-meter-fill.checkup-grade-fair { background: var(--status-warning); }
.checkup-meter-fill.checkup-grade-risk { background: var(--status-critical); }

.checkup-summary.is-busy {
    opacity: 0.6;
}

/* The findings: one list of rows that open (.mod-list). How bad it is has a column of its own, so the titles
   start level whatever the word is; where it is fixed sits at the row's end. */
.checkup-rows .mod-row-name {
    display: flex;
    align-items: center;
    min-width: 0;
}

.checkup-row-level {
    flex: none;
    width: 7.5rem;
}

/* "Not checked" is neither good nor bad: its mark takes no risk color */
.checkup-row-level .sec-chip-unknown i {
    color: var(--text-muted);
}

@media (min-width: 641px) {
    .checkup-rows .mod-row-open {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

.checkup-rows .mod-row-panel {
    padding-right: var(--pad-card-x);
}

/* On a phone there is no room for a column: the level leads the title's first line and the title wraps under it */
@media (max-width: 640px) {
    .checkup-rows .mod-row-name {
        display: block;
    }

    .checkup-row-level {
        display: inline-block;
        width: auto;
        margin-right: var(--space-2);
        vertical-align: middle;
    }

    .checkup-rows .mod-row-panel {
        padding-right: var(--space-3);
    }
}

.checkup-row p,
.checkup-note {
    margin: 0;
}

.checkup-note,
.checkup-manual {
    color: var(--text-muted);
}

.checkup-manual {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-icon);
}

.checkup-manual i {
    margin-top: var(--space-1);
}

/* The blast radius table: what a thief could do, and what stands in the way */
.checkup-list {
    margin: 0;
    padding-left: var(--space-4);
}

.checkup-list li + li {
    margin-top: var(--space-1);
}

.checkup-person {
    margin-top: var(--space-1);
    font-weight: 600;
}

.checkup-blast td {
    vertical-align: top;
}

.checkup-row .sec-tag {
    margin-left: var(--space-2);
}

.checkup-passed {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkup-passed li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.checkup-row .fa-circle-check {
    color: var(--status-good);
}

@media (max-width: 640px) {
    .checkup-score {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    /* The summary keeps a readable width; the button moves under it */
    .checkup-score-text {
        flex-basis: 200px;
    }
}

/* ── Discord AutoMod (Auto-Mod page) ───────────────────────────────────────── */
.dam-editor {
    padding: var(--pad-body);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.dam-editor h4 {
    margin: 0;
}


.dam-add .settings-select {
    width: auto;
    min-width: min(280px, 100%);   /* never wider than its card on a phone */
}

/* ── Backups ───────────────────────────────────────────────────────────────── */
/* The backups removed in the last day, under the list they left */
.bk-held-title {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.bk-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.bk-status-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bk-status-text p,
.bk-group h4 {
    margin: 0;
}

.bk-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bk-changes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bk-change {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-icon);
}

.bk-change.is-removed i { color: var(--status-critical); }
.bk-change.is-added i { color: var(--status-good); }
.bk-change.is-changed i { color: var(--status-warning); }

.bk-modes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.bk-modes legend {
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.bk-modes label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-icon);
    cursor: pointer;
}

.bk-modes label > span {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bk-details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.bk-details dt {
    color: var(--text-muted);
}

.bk-details dd {
    margin: 0;
}

.bk-log ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}

/* ── Templates: starter tiles, the save and code forms, a share code ───────── */
.tpl-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}

.tpl-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--pad-tile);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.tpl-tile h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-main);
}

.tpl-tile p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.tpl-tile .cell-actions {
    margin-top: auto;
    padding-top: var(--space-2);
}

.tpl-counts {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.tpl-forms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.tpl-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.85rem;
}

.tpl-form label {
    font-weight: 600;
    color: var(--text-main);
}

.tpl-row {
    display: flex;
    gap: var(--gap-row);
}

.tpl-row .settings-input {
    flex: 1;
    min-width: 0;
}

.tpl-code {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--pad-tile);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.tpl-code p {
    margin: 0;
    font-size: 0.85rem;
}

.tpl-code textarea {
    resize: vertical;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .bk-details {
        grid-template-columns: minmax(0, 1fr);
    }
}