/* Aurora design system: dark glass surfaces over a slowly drifting aurora backdrop. */

:root {
    --aurora-mint: #5eeab4;
    --aurora-teal: #2dd4bf;
    --aurora-violet: #a78bfa;
    --aurora-pink: #f472b6;
    --aurora-gradient: linear-gradient(135deg, #5eeab4 0%, #a78bfa 55%, #f472b6 100%);
    --aurora-gradient-soft: linear-gradient(135deg, rgba(94, 234, 180, .16), rgba(167, 139, 250, .16) 55%, rgba(244, 114, 182, .16));
    --button-gradient: linear-gradient(135deg, #5eeab4 0%, #8ee6d0 42%, #b79dfc 100%);

    --glass-bg: rgba(15, 17, 30, .58);
    --glass-bg-strong: rgba(17, 19, 34, .9);
    --glass-border: rgb(var(--tint) / .08);
    --glass-border-strong: rgb(var(--tint) / .16);
    --radius-md: 12px;
    --tint: 255 255 255;
    --shade: 0 0 0;
}

/* The layout was tuned while the browser sat at 125% zoom, so this is the 100% equivalent. */
html { font-size: 17px; }

html {
    background-color: #05060d;
}

body {
    background: transparent !important;
}

html, body {
    font-family: Inter, Roboto, "Segoe UI", sans-serif;
    color: var(--mud-palette-text-primary);
}

/* ---------- Backdrop ---------- */

.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(94, 234, 180, .10), transparent 60%),
        #05060d;
}

.aurora-bg .blob {
    position: absolute;
    width: 62vmax;
    height: 62vmax;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .38;
    will-change: transform;
}

.aurora-bg .b1 { background: #34f5b5; top: -28vmax; left: -14vmax; animation: drift-1 38s ease-in-out infinite alternate; }
.aurora-bg .b2 { background: #7c5cff; top: -10vmax; right: -22vmax; animation: drift-2 46s ease-in-out infinite alternate; }
.aurora-bg .b3 { background: #f063c0; bottom: -34vmax; left: 22vw; opacity: .26; animation: drift-3 52s ease-in-out infinite alternate; }

.aurora-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(5, 6, 13, .75) 100%);
}

@keyframes drift-1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes drift-2 { to { transform: translate(-16vmax, 14vmax) scale(.9); } }
@keyframes drift-3 { to { transform: translate(-12vmax, -10vmax) scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
    .aurora-bg .blob { animation: none; }
}

/* ---------- Surfaces ---------- */

.mud-paper.mud-elevation-0:not(.mud-appbar):not(.mud-drawer):not(.mud-popover),
.mud-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.mud-card .mud-paper, .mud-table .mud-paper {
    background: transparent;
    backdrop-filter: none;
    border: none;
}

.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.glass-hover { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.glass-hover:hover {
    transform: translateY(-3px);
    border-color: rgba(94, 234, 180, .45);
    box-shadow: 0 14px 40px -12px rgba(94, 234, 180, .25), 0 0 0 1px rgba(167, 139, 250, .12);
}

.mud-appbar {
    background: rgba(8, 10, 20, .55) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: none !important;
}

.mud-drawer {
    background: rgba(8, 10, 20, .62) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    border-right: 1px solid var(--glass-border) !important;
}

.mud-popover .mud-paper, .mud-menu-list, .mud-popover-open.mud-popover {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border-strong) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 18px 50px rgb(var(--shade) / .55) !important;
}

.mud-dialog {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
    border: 1px solid var(--glass-border-strong);
    border-radius: 22px !important;
    box-shadow: 0 30px 90px rgb(var(--shade) / .6), 0 0 0 1px rgba(94, 234, 180, .06);
}

.mud-dialog-title { padding-bottom: 4px; }
.mud-dialog .mud-dialog-actions { padding: 12px 24px 20px; gap: 8px; }
.mud-overlay-dialog { background: rgba(3, 4, 10, .6) !important; backdrop-filter: blur(4px); }

/* ---------- Buttons: small, dark, flat. Colour only shows as a thin tint and border. ---------- */

.mud-button-root {
    border-radius: 9px;
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-outlined,
.mud-button-root.mud-button-text { min-height: 32px; padding: 4px 14px; line-height: 1.4; }

.mud-button-root.mud-button-filled-size-small,
.mud-button-root.mud-button-outlined-size-small,
.mud-button-root.mud-button-text-size-small { min-height: 28px; padding: 2px 11px; font-size: .78rem; border-radius: 8px; }

.mud-button-root.mud-button-filled-size-large,
.mud-button-root.mud-button-outlined-size-large,
.mud-button-root.mud-button-text-size-large { min-height: 38px; padding: 6px 18px; font-size: .875rem; border-radius: 10px; }

.mud-button-root .mud-button-icon-start { margin-right: 6px; margin-left: -2px; }
.mud-button-root .mud-button-icon-start .mud-icon-root,
.mud-button-root .mud-button-icon-end .mud-icon-root { font-size: 1.05rem; }

/* Filled: dark tinted glass */
.mud-button-filled { border: 1px solid transparent; }

.mud-button-filled.mud-button-filled-primary {
    background: rgba(94, 234, 180, .12) !important;
    border-color: rgba(94, 234, 180, .32);
    color: var(--aurora-mint) !important;
}
.mud-button-filled.mud-button-filled-primary:hover { background: rgba(94, 234, 180, .2) !important; border-color: rgba(94, 234, 180, .6); }

.mud-button-filled.mud-button-filled-secondary {
    background: rgba(167, 139, 250, .13) !important;
    border-color: rgba(167, 139, 250, .34);
    color: #c4b5fd !important;
}
.mud-button-filled.mud-button-filled-secondary:hover { background: rgba(167, 139, 250, .22) !important; border-color: rgba(167, 139, 250, .6); }

.mud-button-filled.mud-button-filled-tertiary {
    background: rgba(244, 114, 182, .12) !important;
    border-color: rgba(244, 114, 182, .32);
    color: #f9a8d4 !important;
}

.mud-button-filled.mud-button-filled-error {
    background: rgba(251, 113, 133, .12) !important;
    border-color: rgba(251, 113, 133, .34);
    color: #fda4af !important;
}
.mud-button-filled.mud-button-filled-error:hover { background: rgba(251, 113, 133, .22) !important; border-color: rgba(251, 113, 133, .6); }

.mud-button-filled.mud-button-filled-success {
    background: rgba(74, 222, 128, .12) !important;
    border-color: rgba(74, 222, 128, .32);
    color: #86efac !important;
}

.mud-button-filled.mud-button-filled-default,
.mud-button-filled.mud-button-filled-inherit {
    background: rgb(var(--tint) / .06) !important;
    border-color: var(--glass-border);
    color: var(--mud-palette-text-primary) !important;
}
.mud-button-filled.mud-button-filled-default:hover { background: rgb(var(--tint) / .11) !important; }

/* Outlined: hairline only */
.mud-button-outlined {
    background: transparent;
    border: 1px solid var(--glass-border-strong) !important;
    color: var(--mud-palette-text-primary);
}
.mud-button-outlined:hover { background: rgb(var(--tint) / .06) !important; border-color: rgb(var(--tint) / .3) !important; }
.mud-button-outlined.mud-button-outlined-primary { color: var(--aurora-mint); }
.mud-button-outlined.mud-button-outlined-primary:hover { border-color: rgba(94, 234, 180, .55) !important; background: rgba(94, 234, 180, .08) !important; }
.mud-button-outlined.mud-button-outlined-error { color: #fda4af; }
.mud-button-outlined.mud-button-outlined-error:hover { border-color: rgba(251, 113, 133, .55) !important; background: rgba(251, 113, 133, .08) !important; }

/* Text: no chrome until hover */
.mud-button-text:hover { background: rgb(var(--tint) / .06) !important; }
.mud-button-text.mud-button-text-primary { color: var(--aurora-mint); }
.mud-button-text.mud-button-text-error { color: #fda4af; }
.mud-button-text.mud-button-text-error:hover { background: rgba(251, 113, 133, .1) !important; }

/* Icon buttons */
.mud-icon-button { border-radius: 9px; padding: 6px; transition: background-color .15s ease, color .15s ease; }
.mud-icon-button:hover { background: rgb(var(--tint) / .08) !important; color: var(--aurora-mint); }

.mud-button-root:focus-visible, .mud-icon-button:focus-visible {
    outline: 2px solid rgba(94, 234, 180, .6);
    outline-offset: 2px;
}

/* ---------- Inputs ---------- */

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--glass-border-strong) !important;
    border-radius: 11px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: rgb(var(--tint) / .3) !important; }
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--aurora-mint) !important;
    box-shadow: 0 0 0 3px rgba(94, 234, 180, .14);
}
.mud-input-label-outlined.mud-focused { color: var(--aurora-mint) !important; }

/* ---------- Tables ---------- */

.mud-table { background: transparent !important; }
.mud-table-container { background: transparent; }

.mud-table-head .mud-table-cell {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: rgb(var(--tint) / .025);
    border-bottom: 1px solid var(--glass-border);
}

.mud-table-body .mud-table-row { transition: background-color .15s ease; }
.mud-table-hover .mud-table-body .mud-table-row:hover { background: rgba(94, 234, 180, .05) !important; }
.mud-table-cell { border-bottom: 1px solid var(--glass-border) !important; }
.mud-table-toolbar { padding: 14px 20px; }

/* ---------- Chips, alerts, nav ---------- */

.mud-chip { border-radius: 999px; font-weight: 600; }

.mud-alert { border-radius: var(--radius-md); backdrop-filter: blur(10px); }

.mud-nav-link {
    border-radius: 11px;
    margin: 2px 10px;
    padding: 9px 12px;
    color: var(--mud-palette-text-secondary);
    transition: background-color .15s ease, color .15s ease;
}
.mud-nav-link:hover { background: rgb(var(--tint) / .05) !important; color: var(--mud-palette-text-primary); }
.mud-nav-link.active {
    background: linear-gradient(90deg, rgba(94, 234, 180, .16), rgba(167, 139, 250, .08)) !important;
    color: var(--aurora-mint) !important;
    box-shadow: inset 2px 0 0 var(--aurora-mint);
}
.mud-nav-link.active .mud-icon-root { color: var(--aurora-mint) !important; }
.mud-nav-group > .mud-nav-link { margin-top: 6px; }

a { color: var(--aurora-mint); }
a:hover { color: #9ff3d0; }

::selection { background: rgba(94, 234, 180, .3); }

* { scrollbar-width: thin; scrollbar-color: rgb(var(--tint) / .18) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgb(var(--tint) / .16); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: rgba(94, 234, 180, .4); }

/* ---------- Shared page pieces ---------- */

.aurora-text {
    background: var(--aurora-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-header h1, .page-header .page-title { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
.page-header .page-subtitle { color: var(--mud-palette-text-secondary); margin-top: 2px; font-size: .95rem; }

.section-title { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 8px 0 12px; }

.icon-tile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--aurora-gradient-soft);
    border: 1px solid var(--glass-border-strong);
}
.icon-tile.mint { background: rgba(94, 234, 180, .14); color: var(--aurora-mint); border-color: rgba(94, 234, 180, .3); }
.icon-tile.violet { background: rgba(167, 139, 250, .14); color: var(--aurora-violet); border-color: rgba(167, 139, 250, .3); }
.icon-tile.pink { background: rgba(244, 114, 182, .14); color: var(--aurora-pink); border-color: rgba(244, 114, 182, .3); }
.icon-tile.amber { background: rgba(251, 191, 36, .12); color: #fbbf24; border-color: rgba(251, 191, 36, .3); }

.stat-value { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat-label { color: var(--mud-palette-text-secondary); font-size: .85rem; }

.nav-card { display: block; height: 100%; padding: 22px; text-decoration: none !important; color: inherit !important; }
.nav-card .arrow { margin-left: auto; opacity: 0; transform: translateX(-6px); transition: all .2s ease; color: var(--aurora-mint); }
.nav-card:hover .arrow { opacity: 1; transform: none; }

/* ---------- Breadcrumbs ---------- */

.crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    width: fit-content;
    max-width: 100%;
}

.crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
a.crumb:hover { background: rgba(94, 234, 180, .1); color: var(--aurora-mint) !important; }
.crumb-current { color: var(--mud-palette-text-primary) !important; font-weight: 600; cursor: default; background: rgb(var(--tint) / .06); }
.crumb-sep { color: rgb(var(--tint) / .28); flex: none; }

/* ---------- Linking page ---------- */

.profile-hero { display: flex; align-items: center; gap: 20px; padding: 24px; flex-wrap: wrap; position: relative; overflow: hidden; }
.profile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 120% at 0% 0%, rgba(94, 234, 180, .14), transparent 60%), radial-gradient(50% 100% at 100% 0%, rgba(167, 139, 250, .14), transparent 60%);
    pointer-events: none;
}
.profile-hero > * { position: relative; }
.profile-hero .avatar { width: 72px; height: 72px; border-radius: 20px; border: 2px solid rgba(94, 234, 180, .5); box-shadow: 0 0 0 4px rgba(94, 234, 180, .1); object-fit: cover; background: rgb(var(--tint) / .05); }
.profile-hero .name { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.profile-hero .meta { color: var(--mud-palette-text-secondary); font-size: .85rem; }

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

.link-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-height: 190px; }
.link-card .head { display: flex; align-items: center; gap: 14px; }
.link-card .title { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.link-card .detail { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--mud-palette-text-secondary); font-size: .875rem; overflow-wrap: anywhere; }
.link-card .detail img { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; }
.link-card .actions { margin-top: auto; display: flex; gap: 8px; align-items: center; }

.status-pill { margin-left: auto; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }
.status-pill.on { background: rgba(94, 234, 180, .14); color: var(--aurora-mint); border: 1px solid rgba(94, 234, 180, .35); }
.status-pill.off { background: rgb(var(--tint) / .05); color: var(--mud-palette-text-secondary); border: 1px solid var(--glass-border); }

.brand-discord { background: rgba(167, 139, 250, .14); color: #c4b5fd; border-color: rgba(167, 139, 250, .3); }
.brand-telegram { background: rgba(45, 212, 191, .12); color: #5eead4; border-color: rgba(45, 212, 191, .3); }
.brand-email { background: rgba(244, 114, 182, .12); color: #f9a8d4; border-color: rgba(244, 114, 182, .3); }
.brand-steam { background: rgb(var(--tint) / .06); color: #e5e7eb; border-color: var(--glass-border-strong); }

/* ---------- Steam login button ---------- */

.steambutton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px 0 10px;
    border-radius: 9px;
    border: 1px solid var(--glass-border-strong);
    background: rgb(var(--tint) / .05);
    color: #fff;
    font-weight: 600;
    font-size: .8125rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.steambutton:hover { background: rgb(var(--tint) / .1); border-color: rgba(94, 234, 180, .5); }
.steambutton .icon { display: grid; place-items: center; order: -1; }
.steambutton svg { width: 18px; height: 18px; }
.steambutton span { letter-spacing: .01em; }

/* ---------- Admin shell ---------- */

.brand { display: flex; align-items: center; gap: 12px; padding: 18px 20px 8px; }
.brand .mark { width: 38px; height: 38px; border-radius: 12px; background: var(--aurora-gradient); display: grid; place-items: center; color: #08120d; box-shadow: 0 8px 22px -8px rgba(94, 234, 180, .6); }
.brand .brand-name { font-weight: 700; line-height: 1.1; }
.brand .brand-sub { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }

.admin-content { max-width: 1400px; margin: 0 auto; padding: 28px 24px 48px; }

.mud-drawer .mud-nav-group .mud-nav-link { margin-left: 14px; }

.titlePage {
    background: var(--aurora-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.mud-drawer-content { overflow-x: hidden; }
.custom-chart svg { width: 100%; }

body a:not(.mud-button-root):not(.mud-nav-link):not(.crumb):not(.nav-card):not(.steambutton) { color: var(--aurora-mint); }

/* ---------- Layout fixes: let the aurora show through every layout wrapper ---------- */

.mud-layout, .mud-main-content, .page, .page main, .page article { background: transparent !important; }
.mud-layout { min-height: 100vh; }
.mud-main-content { padding-top: 52px; }
.mud-container { padding-left: 16px; padding-right: 16px; }

/* ---------- Compact density ---------- */

.mud-table-cell { padding: 8px 14px; }
.mud-table-toolbar { padding: 10px 16px; min-height: 52px; }
.page-header { margin-bottom: 18px; }
.page-header h1, .page-header .page-title { font-size: 1.45rem; }
.admin-content { padding: 20px 20px 36px; }
.icon-tile { width: 38px; height: 38px; border-radius: 11px; }
.stat-value { font-size: 1.6rem; }
.mud-avatar.mud-avatar-medium { width: 34px; height: 34px; }
.link-card { min-height: 160px; padding: 16px; }
.profile-hero { padding: 18px; }
.profile-hero .avatar { width: 58px; height: 58px; border-radius: 16px; }

/* ---------- Pagination ---------- */

.mud-pagination { gap: 4px; margin: 10px 0 12px; justify-content: center; flex-wrap: wrap; }
.mud-pagination-item { margin: 0; }
.mud-pagination-item .mud-button-root,
.mud-pagination-item button {
    min-width: 28px !important;
    width: 28px;
    height: 28px;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: .78rem;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--mud-palette-text-secondary);
    box-shadow: none !important;
}
.mud-pagination-item .mud-button-root:hover:not(:disabled),
.mud-pagination-item button:hover:not(:disabled) { background: rgb(var(--tint) / .07) !important; color: var(--mud-palette-text-primary); }
.mud-pagination-item .mud-button-root.mud-button-filled,
.mud-pagination-item button.mud-button-filled,
.mud-pagination-item .mud-pagination-item-selected {
    background: rgba(94, 234, 180, .14) !important;
    border-color: rgba(94, 234, 180, .4) !important;
    color: var(--aurora-mint) !important;
}
.mud-pagination-item .mud-icon-root { font-size: 1.05rem; }
.mud-table-pagination { min-height: 44px; border-top: 1px solid var(--glass-border); }
.mud-table-pagination-toolbar { min-height: 44px; }

/* ---------- Status pills ---------- */

.status-pill.with-dot::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: 1px;
    box-shadow: 0 0 8px currentColor;
}
.status-pill.off.with-dot { color: #fda4af; background: rgba(251, 113, 133, .1); border-color: rgba(251, 113, 133, .3); }

/* ---------- Server list ---------- */

.server-summary { display: flex; gap: 8px; justify-content: center; margin: 4px 0 16px; }
.server-summary .status-pill { margin-left: 0; }
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }

.server-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.server-card.offline { opacity: .72; }
.server-head { display: flex; align-items: center; gap: 12px; }
.server-icon { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; border: 1px solid var(--glass-border-strong); }
.server-icon.placeholder { display: grid; place-items: center; background: rgb(var(--tint) / .05); color: var(--mud-palette-text-secondary); }
.server-title { min-width: 0; flex: 1; }
.server-name { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-ip { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.server-card .status-pill { margin-left: 0; flex: none; }
.server-meta { display: flex; justify-content: space-between; color: var(--mud-palette-text-secondary); font-size: .85rem; }
.server-meta span { display: inline-flex; align-items: center; gap: 6px; }
.server-meta .mud-icon-root { font-size: 1rem; opacity: .8; }
.server-bar { height: 4px; border-radius: 4px; background: rgb(var(--tint) / .08); overflow: hidden; }
.server-bar .fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--aurora-mint), var(--aurora-violet)); transition: width .6s ease; }
.server-extra { font-size: .8rem; color: var(--mud-palette-text-secondary); min-height: 1em; }

/* ---------- Forum boards ---------- */

.board { margin-bottom: 6px; overflow: hidden; }
.board-head {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.board-head:hover { background: rgb(var(--tint) / .03); }
.board-icon { color: var(--aurora-mint); display: grid; place-items: center; }
.board-title { font-weight: 700; font-size: 1.05rem; }
.board-count { font-size: .72rem; color: var(--mud-palette-text-secondary); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--glass-border); }
.board-chevron { margin-left: auto; color: var(--mud-palette-text-secondary); transition: transform .3s ease; }
.board-head[aria-expanded="false"] .board-chevron { transform: rotate(-90deg); }
/* Grid rows animate between 0fr and 1fr, which collapses to the content's real height without measuring it in script. */
.board-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease, opacity .25s ease; opacity: 0; }
.board-collapse.open { grid-template-rows: 1fr; opacity: 1; }
.board-collapse-inner { overflow: hidden; min-height: 0; }
.board-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 4px; }

.forum-row { padding: 10px 10px; border-radius: 12px; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease; }
.forum-row:hover { background: rgb(var(--tint) / .035); border-color: var(--glass-border); }
.forum-row-grid { display: grid; grid-template-columns: 30px minmax(0, 1fr) 64px 64px 210px; column-gap: 14px; align-items: center; }
@media (max-width: 960px) { .forum-row-grid { grid-template-columns: 30px minmax(0, 1fr) 64px 64px; } }
@media (max-width: 600px) { .forum-row-grid { grid-template-columns: 30px minmax(0, 1fr); } }

.forum-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--aurora-violet); background: rgba(167, 139, 250, .1); border: 1px solid rgba(167, 139, 250, .22); }
.forum-icon .mud-icon-root { font-size: 1rem; }
.forum-link { font-weight: 600; font-size: .95rem; color: var(--mud-palette-text-primary) !important; text-decoration: none; }
.forum-link:hover { color: var(--aurora-mint) !important; }
.sub-forums { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; }
.sub-forum { display: inline-flex; align-items: center; gap: 2px; font-size: .78rem; color: var(--mud-palette-text-secondary) !important; text-decoration: none; }
.sub-forum .mud-icon-root { font-size: .95rem; opacity: .6; }
.sub-forum:hover { color: var(--aurora-mint) !important; }

.forum-stat { flex-direction: column; align-items: center; justify-self: center; line-height: 1.15; }
.forum-stat .num { font-weight: 700; font-size: .95rem; }
.forum-stat .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); }
.last-post { flex-direction: column; min-width: 0; padding: 2px 4px; text-decoration: none; }
.last-post .lp-title { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mud-palette-text-primary); }
.last-post .lp-meta { font-size: .72rem; color: var(--mud-palette-text-secondary); }

/* ---------- Forum top bar ---------- */

.forum-bar .mud-toolbar { gap: 14px; min-height: 52px; padding: 0 16px; }
.forum-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit !important; flex: none; }
.forum-brand .brand-img { border-radius: 9px; }
.forum-brand .titlePage { font-size: 1.05rem; }
.forum-nav { display: flex; gap: 2px; flex: none; margin-left: auto; }


/* ---------- User chip and panel ---------- */

.user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 4px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease; }
.user-chip:hover { background: rgb(var(--tint) / .06); border-color: var(--glass-border); }
.user-avatar { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: rgb(var(--tint) / .06); }
.user-text { flex-direction: column; line-height: 1.1; }
.user-name { font-weight: 600; font-size: .82rem; }
.user-group { font-size: .68rem; font-weight: 600; }
.user-caret { opacity: .6; }

.user-pop.mud-popover, .user-pop .mud-list { padding: 0 !important; }
.user-panel { width: 248px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.up-head { display: flex; align-items: center; gap: 10px; }
.up-avatar { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; background: rgb(var(--tint) / .06); flex: none; }
.up-name { display: block; font-weight: 700; font-size: .92rem; color: var(--mud-palette-text-primary) !important; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-group { font-size: .75rem; font-weight: 600; }
.up-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.up-stats > div { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 9px; background: rgb(var(--tint) / .04); border: 1px solid var(--glass-border); line-height: 1.15; }
.up-stats .num { font-weight: 700; font-size: .95rem; }
.up-stats .lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); }
.up-links { display: flex; gap: 6px; flex-wrap: wrap; }
.up-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: .7rem; border-radius: 999px; color: var(--mud-palette-text-disabled); border: 1px solid var(--glass-border); }
.up-link .mud-icon-root { font-size: .9rem; }
.up-link.on { color: var(--aurora-mint); border-color: rgba(94, 234, 180, .35); background: rgba(94, 234, 180, .08); }
.up-actions { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--glass-border); }
.up-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: .84rem; cursor: pointer; color: var(--mud-palette-text-primary) !important; transition: background-color .15s ease; }
.up-item:hover { background: rgb(var(--tint) / .07); }
.up-item .mud-icon-root { font-size: 1.05rem; opacity: .8; }
.up-item.danger { color: #fda4af !important; }
.up-item.danger:hover { background: rgba(251, 113, 133, .1); }

/* ---------- Steam login: icon spins in, light sweeps across on hover ---------- */

.steambutton { position: relative; overflow: hidden; isolation: isolate; animation: steam-glow 3.2s ease-in-out infinite; }
.steambutton::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(94, 234, 180, .28) 50%, transparent 70%);
    transform: translateX(-120%);
}
.steambutton:hover::before { animation: steam-sweep .9s ease; }
.steambutton .icon svg { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.steambutton:hover .icon svg { transform: rotate(360deg) scale(1.12); color: var(--aurora-mint); }
.steambutton .label { transition: letter-spacing .3s ease; }
.steambutton:hover .label { letter-spacing: .035em; }
@keyframes steam-sweep { to { transform: translateX(120%); } }
@keyframes steam-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(94, 234, 180, 0); } 50% { box-shadow: 0 0 0 3px rgba(94, 234, 180, .12); } }
@media (prefers-reduced-motion: reduce) { .steambutton, .steambutton::before { animation: none !important; } }

.user-menu { position: relative; }
.user-panel.floating {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1500;
    margin-top: 2px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border-strong);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgb(var(--shade) / .55);
    animation: panel-in .14s ease;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Tabs ---------- */

.mud-tabs-toolbar, .mud-tabs-toolbar.mud-tabs-rounded, .mud-tabs-toolbar-primary { background: transparent !important; border-bottom: 1px solid var(--glass-border); border-radius: 0 !important; }
.mud-tabs-toolbar-content { padding: 0 8px; }
.mud-tab { min-height: 42px; font-weight: 600; font-size: .85rem; text-transform: none; color: var(--mud-palette-text-secondary) !important; opacity: 1; border-radius: 9px 9px 0 0; transition: color .15s ease, background-color .15s ease; }
.mud-tab:hover { background: rgb(var(--tint) / .04); color: var(--mud-palette-text-primary) !important; }
.mud-tab.mud-tab-active { color: var(--aurora-mint) !important; background: rgba(94, 234, 180, .06); }
.mud-tab-slider { background: var(--aurora-mint) !important; height: 2px !important; }
.mud-tabs-panels { background: transparent; }

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

/* ---------- Filled chips: tinted glass instead of solid colour ---------- */

.mud-chip.mud-chip-filled { border: 1px solid transparent; font-size: .72rem; height: 22px; }
.mud-chip.mud-chip-filled.mud-chip-color-success { background: rgba(74, 222, 128, .13); border-color: rgba(74, 222, 128, .32); color: #86efac; }
.mud-chip.mud-chip-filled.mud-chip-color-error { background: rgba(251, 113, 133, .12); border-color: rgba(251, 113, 133, .32); color: #fda4af; }
.mud-chip.mud-chip-filled.mud-chip-color-warning { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .32); color: #fcd34d; }
.mud-chip.mud-chip-filled.mud-chip-color-info { background: rgba(196, 181, 253, .12); border-color: rgba(196, 181, 253, .3); color: #c4b5fd; }
.mud-chip.mud-chip-filled.mud-chip-color-primary { background: rgba(94, 234, 180, .12); border-color: rgba(94, 234, 180, .3); color: var(--aurora-mint); }
.mud-chip.mud-chip-filled.mud-chip-color-secondary { background: rgba(167, 139, 250, .13); border-color: rgba(167, 139, 250, .32); color: #c4b5fd; }
.mud-chip.mud-chip-filled.mud-chip-color-default { background: rgb(var(--tint) / .07); border-color: var(--glass-border); }

.mud-tabs-tabbar, .mud-tabs-tabbar.mud-tabs-tabbar-primary, .mud-tabs-tabbar.mud-tabs-tabbar-secondary { background: transparent !important; border-bottom: 1px solid var(--glass-border); border-radius: 0 !important; color: var(--mud-palette-text-secondary); }
.mud-tabs-tabbar .mud-tab { color: var(--mud-palette-text-secondary) !important; }
.mud-tabs-tabbar .mud-tab.mud-tab-active { color: var(--aurora-mint) !important; }
.mud-tabs-tabbar .mud-tab-slider, .mud-tabs-tabbar .mud-tab-slider-horizontal { background: var(--aurora-mint) !important; }

/* ---------- Announcement banner (one message at a time, fades between them) ---------- */

.notice-banner {
    --notice: var(--aurora-violet);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 14px;
    border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--notice);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: border-left-color .6s ease;
}
.notice-banner.sev-success { --notice: var(--aurora-mint); }
.notice-banner.sev-warning { --notice: #fbbf24; }
.notice-banner.sev-error { --notice: #fb7185; }
.notice-banner .notice-icon { color: var(--notice); flex: none; transition: color .6s ease; }
/* Icon and text fade together, so nothing visibly changes until the new message fades in. */
.notice-body { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; opacity: 0; transform: translateY(4px); transition: opacity .45s ease, transform .45s ease; }
.notice-body.show { opacity: 1; transform: none; }
.notice-text { flex: 1; min-width: 0; font-size: .85rem; }
.notice-dots { display: flex; gap: 6px; flex: none; align-items: center; }
.notice-dot { all: unset; box-sizing: border-box; width: 6px; height: 6px; border-radius: 6px; background: rgb(var(--tint) / .22); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.notice-dot:hover { background: rgb(var(--tint) / .45); }
.notice-dot.active { width: 16px; background: var(--notice); }
/* A plain fade is not harmful motion, so reduced-motion users keep it and only lose the slide. */
@media (prefers-reduced-motion: reduce) { .notice-body { transform: none; } }

/* ---------- Control panel: compact rows ---------- */

.profile-hero.compact { padding: 12px 16px; gap: 14px; flex-wrap: nowrap; }
.profile-hero.compact .avatar { width: 44px; height: 44px; border-radius: 12px; }
.profile-hero.compact .name { font-size: 1.1rem; }
.hero-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.group-pill { font-size: .72rem; font-weight: 700; padding: 2px 10px; border: 1px solid; border-radius: 999px; }

.link-list { display: flex; flex-direction: column; overflow: hidden; }
.link-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 54px; }
.link-row + .link-row { border-top: 1px solid var(--glass-border); }
.link-row .icon-tile { width: 32px; height: 32px; border-radius: 10px; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.row-title { font-weight: 600; font-size: .9rem; }
.row-detail { font-size: .78rem; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-row .status-pill { margin-left: 0; }

.theme-picker { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.theme-option { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; position: relative; transition: background-color .15s ease; }
.theme-option:nth-child(even) { border-left: 1px solid var(--glass-border); }
.theme-option:nth-child(n+3) { border-top: 1px solid var(--glass-border); }
.theme-option:hover { background: rgb(var(--tint) / .04); }
.theme-option:focus-visible { outline: 2px solid rgba(94, 234, 180, .6); outline-offset: -2px; }
.swatch { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--glass-border-strong); flex: none; }
.swatch.aurora { background: radial-gradient(circle at 20% 20%, #34f5b5 0, transparent 60%), radial-gradient(circle at 85% 30%, #7c5cff 0, transparent 60%), radial-gradient(circle at 50% 100%, #f063c0 0, transparent 60%), #05060d; }
.swatch.dark { background: #15171d; }
html[data-theme="aurora"] .theme-option[data-mode="aurora"],
html[data-theme="dark"] .theme-option[data-mode="dark"],
html[data-theme="web"] .theme-option[data-mode="web"],
html[data-theme="light"] .theme-option[data-mode="light"] { background: rgba(94, 234, 180, .07); box-shadow: inset 0 0 0 1px rgba(94, 234, 180, .4); }
html[data-theme="aurora"] .theme-option[data-mode="aurora"]::after,
html[data-theme="dark"] .theme-option[data-mode="dark"]::after,
html[data-theme="web"] .theme-option[data-mode="web"]::after,
html[data-theme="light"] .theme-option[data-mode="light"]::after {
    content: "Active";
    margin-left: auto;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--aurora-mint);
}
@media (max-width: 600px) { .theme-picker { grid-template-columns: 1fr; } .theme-option:nth-child(even) { border-left: 0; } .theme-option + .theme-option { border-top: 1px solid var(--glass-border); } }

/* ---------- Table pager: full width ---------- */

.mud-table-pagination { width: 100%; }
.mud-table-pagination-toolbar { width: 100%; padding: 0 16px; min-height: 44px; justify-content: flex-end; font-size: .8rem; }
.mud-table-pagination .mud-select .mud-input-slot, .mud-table-pagination .mud-select-input { font-size: .8rem; }

/* ---------- Toasts (restyled MudBlazor snackbars) ---------- */

.mud-snackbar-provider .mud-snackbar-location-bottom-right { right: 16px; bottom: 16px; gap: 8px; }
.mud-snackbar {
    --toast: #9ca3af;
    position: relative;
    overflow: hidden;
    min-width: 270px;
    max-width: 380px;
    padding: 9px 12px 9px 16px !important;
    background: var(--glass-bg-strong) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--glass-border-strong) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 40px rgb(var(--shade) / .5) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    font-size: .84rem;
}
.mud-snackbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--toast); }
.mud-snackbar .mud-snackbar-icon, .mud-snackbar .mud-icon-root { color: var(--toast); }
.mud-snackbar .mud-snackbar-content-message { font-size: .84rem; font-weight: 500; padding: 2px 0; }
.mud-snackbar .mud-snackbar-content-action .mud-icon-button { color: var(--mud-palette-text-secondary); padding: 3px; }
.mud-snackbar[class*="-success"] { --toast: #5eeab4; border-color: rgba(94, 234, 180, .28) !important; }
.mud-snackbar[class*="-error"] { --toast: #fb7185; border-color: rgba(251, 113, 133, .3) !important; }
.mud-snackbar[class*="-warning"] { --toast: #fbbf24; border-color: rgba(251, 191, 36, .3) !important; }
.mud-snackbar[class*="-info"] { --toast: #c4b5fd; border-color: rgba(196, 181, 253, .3) !important; }

/* ---------- Plain dark theme (user option): no animation, flat solid surfaces ---------- */

html[data-theme="dark"] { background-color: #0c0d11; --glass-bg: rgba(22, 24, 31, .97); --glass-bg-strong: rgba(26, 28, 36, .99); --glass-border: rgb(var(--tint) / .07); --glass-border-strong: rgb(var(--tint) / .13); }
html[data-theme="dark"] .aurora-bg { display: none; }
html[data-theme="dark"] .glass,
html[data-theme="dark"] .mud-card,
html[data-theme="dark"] .mud-paper.mud-elevation-0:not(.mud-appbar):not(.mud-drawer):not(.mud-popover),
html[data-theme="dark"] .crumbs,
html[data-theme="dark"] .notice-banner,
html[data-theme="dark"] .mud-snackbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="dark"] .mud-appbar { background: rgba(14, 15, 19, .97) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="dark"] .mud-drawer { background: #101116 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="dark"] .glass-hover:hover { box-shadow: none; }
html[data-theme="dark"] .titlePage, html[data-theme="dark"] .aurora-text { background: none; -webkit-text-fill-color: currentColor; color: var(--mud-palette-text-primary); }
html[data-theme="dark"] .steambutton { animation: none; }

.tg-slot { height: 30px; max-width: 170px; overflow: hidden; display: flex; align-items: center; font-size: .75rem; color: var(--mud-palette-text-secondary); flex: none; }
.tg-slot > * { max-height: 30px; font-family: inherit !important; }

/* ---------- Boards: tighter corners, thinner headers ---------- */

:root { --radius-board: 8px; }

.board, .crumbs, .notice-banner { border-radius: var(--radius-board); }
.board-head { padding: 7px 14px; }
.board-title { font-size: .95rem; }
.board-count { font-size: .68rem; padding: 1px 8px; }
.forum-row { border-radius: 6px; padding: 8px 10px; }
.forum-icon { width: 28px; height: 28px; }

.board-page { width: 100%; }

.board-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 12px 6px 14px;
    margin-bottom: 4px;
    border-radius: var(--radius-board);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.board-header h1 { margin: 0; font-size: 1rem; font-weight: 700; }
.bh-icon { color: var(--aurora-mint); display: grid; place-items: center; }
.bh-meta { font-size: .72rem; color: var(--mud-palette-text-secondary); padding: 1px 9px; border: 1px solid var(--glass-border); border-radius: 999px; }

.list-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 14px 2px 6px; }

.subboard-list, .thread-list, .post, .thread-titlebar {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-board);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.subboard-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px 64px 210px; column-gap: 14px; align-items: center; padding: 8px 12px; transition: background-color .15s ease; }
.subboard-row + .subboard-row { border-top: 1px solid var(--glass-border); }
.subboard-row:hover { background: rgb(var(--tint) / .03); }

.thread-head, .thread-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 70px 70px 200px; column-gap: 14px; align-items: center; padding: 9px 12px; }
.thread-head { padding-top: 7px; padding-bottom: 7px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mud-palette-text-secondary); background: rgb(var(--tint) / .03); border-bottom: 1px solid var(--glass-border); }
.thread-head span:nth-child(3), .thread-head span:nth-child(4) { text-align: center; }
.thread-row + .thread-row { border-top: 1px solid var(--glass-border); }
.thread-row { transition: background-color .15s ease; }
.thread-row:hover { background: rgb(var(--tint) / .03); }
.thread-row.pinned { background: linear-gradient(90deg, rgba(251, 191, 36, .07), transparent 45%); }

@media (max-width: 960px) {
    .subboard-row { grid-template-columns: 28px minmax(0, 1fr) 64px 64px; }
    .thread-head, .thread-row { grid-template-columns: 36px minmax(0, 1fr) 70px 70px; }
}
@media (max-width: 600px) {
    .subboard-row { grid-template-columns: 28px minmax(0, 1fr); }
    .thread-head, .thread-row { grid-template-columns: 36px minmax(0, 1fr); }
}

.t-avatar { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: rgb(var(--tint) / .06); border: 1px solid var(--glass-border); }
.t-main { min-width: 0; }
.t-title { display: flex; align-items: center; gap: 4px; }
.t-title a { font-weight: 600; font-size: .92rem; color: var(--mud-palette-text-primary) !important; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-title a:hover { color: var(--aurora-mint) !important; }
.t-pin { color: #fbbf24; font-size: .95rem !important; flex: none; }
.t-byline { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--mud-palette-text-secondary); margin-top: 1px; }
.t-sep { width: 1px; height: 11px; background: rgb(var(--tint) / .24); flex: none; }
.t-date { color: var(--aurora-violet); font-weight: 500; }
.t-stat { justify-content: center; font-weight: 600; font-size: .9rem; }
.t-last { flex-direction: column; min-width: 0; line-height: 1.2; }
.t-last .lp-title { font-size: .82rem; font-weight: 600; }

/* ---------- Thread viewer (xenforo / MyBB style) ---------- */

.thread-titlebar { padding: 11px 16px; margin-bottom: 10px; }
.thread-titlebar h1 { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.tt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .78rem; color: var(--mud-palette-text-secondary); margin-top: 4px; }

.posts { display: flex; flex-direction: column; gap: 10px; }
.post { display: grid; grid-template-columns: 176px minmax(0, 1fr); }

.post-author { padding: 14px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: rgb(var(--tint) / .03); border-right: 1px solid var(--glass-border); }
.pa-avatar { width: 84px; height: 84px; border-radius: 6px; object-fit: cover; background: rgb(var(--tint) / .06); border: 1px solid var(--glass-border-strong); }
.pa-info { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pa-name { font-weight: 700; font-size: .95rem; color: var(--mud-palette-text-primary) !important; text-decoration: none; }
.pa-name:hover { color: var(--aurora-mint) !important; }
.pa-group { font-size: .64rem; font-weight: 700; padding: 1px 9px; border: 1px solid; border-radius: 5px; text-transform: uppercase; letter-spacing: .06em; }
.pa-stats { margin: 6px 0 0; width: 100%; display: flex; flex-direction: column; gap: 3px; font-size: .74rem; padding-top: 8px; border-top: 1px solid var(--glass-border); }
.pa-stats > div { display: flex; justify-content: space-between; gap: 8px; }
.pa-stats dt { color: var(--mud-palette-text-secondary); }
.pa-stats dd { margin: 0; font-weight: 600; }

.post-main { display: flex; flex-direction: column; min-width: 0; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: .76rem; color: var(--mud-palette-text-secondary); background: rgb(var(--tint) / .02); border-bottom: 1px solid var(--glass-border); }
.op-badge { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 8px; border-radius: 5px; color: var(--aurora-mint); background: rgba(94, 234, 180, .1); border: 1px solid rgba(94, 234, 180, .3); }
.post-num { margin-left: auto; font-weight: 700; color: var(--mud-palette-text-secondary) !important; text-decoration: none; }
.post-num:hover { color: var(--aurora-mint) !important; }
.post-body { padding: 14px 16px 16px; font-size: .92rem; line-height: 1.65; flex: 1; }
.post-body p { margin: 0 0 .8em; }
.post-body p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
    .post { grid-template-columns: 1fr; }
    .post-author { flex-direction: row; text-align: left; border-right: 0; border-bottom: 1px solid var(--glass-border); padding: 10px 12px; }
    .pa-avatar { width: 42px; height: 42px; }
    .pa-info { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px; align-items: center; }
    .pa-stats { display: none; }
}

html[data-theme="dark"] .board-header, html[data-theme="dark"] .subboard-list, html[data-theme="dark"] .thread-list,
html[data-theme="dark"] .post, html[data-theme="dark"] .thread-titlebar { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Admin tables and dialogs ---------- */

.swatch-line { height: 6px; border-radius: 4px; margin-top: -10px; border: 1px solid var(--glass-border); }
.admin-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--glass-border); }
.admin-toolbar .mud-input-control { min-width: 180px; }
.color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; box-shadow: 0 0 0 1px rgb(var(--tint) / .25); }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.muted { color: var(--mud-palette-text-secondary); }
.cell-title { font-weight: 600; }
.cell-sub { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.mini-avatar { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: rgb(var(--tint) / .06); border: 1px solid var(--glass-border); }
.empty-state { padding: 36px 16px; text-align: center; color: var(--mud-palette-text-secondary); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 14px; }
.stat-card { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }

/* ---------- Ban notice modal ---------- */

.ban-notice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 6px 4px 0; }
.ban-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fb7185; background: rgba(251, 113, 133, .12); border: 1px solid rgba(251, 113, 133, .35); }
.ban-icon .mud-icon-root { font-size: 1.8rem; }
.ban-title { font-size: 1.25rem; font-weight: 700; }
.ban-sub { color: var(--mud-palette-text-secondary); font-size: .88rem; }
.ban-box { width: 100%; text-align: left; padding: 12px 14px; border-radius: 10px; background: rgb(var(--tint) / .04); border: 1px solid var(--glass-border); margin-top: 6px; }
.ban-label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.ban-reason { font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ban-meta { width: 100%; text-align: left; }
.ban-meta > div { display: flex; flex-direction: column; padding: 0 2px; font-size: .9rem; }
.ban-help { font-size: .8rem; color: var(--mud-palette-text-secondary); }

/* ---------- Thread actions ---------- */

.thread-list.staff .thread-head, .thread-list.staff .thread-row { grid-template-columns: 36px minmax(0, 1fr) 70px 70px 200px 112px; }
@media (max-width: 960px) { .thread-list.staff .thread-head, .thread-list.staff .thread-row { grid-template-columns: 36px minmax(0, 1fr) 70px 70px; } }
@media (max-width: 600px) { .thread-list.staff .thread-head, .thread-list.staff .thread-row { grid-template-columns: 36px minmax(0, 1fr); } }
.t-actions { justify-content: flex-end; gap: 0; opacity: .55; transition: opacity .15s ease; }
.thread-row:hover .t-actions { opacity: 1; }
.t-lock { color: var(--mud-palette-text-secondary); font-size: .95rem !important; flex: none; }

.tt-row { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.tt-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.post-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.post-tools .post-num { margin-left: 0; }
.post-tool { all: unset; cursor: pointer; font-size: .76rem; font-weight: 600; color: var(--mud-palette-text-secondary); transition: color .15s ease; }
.post-tool:hover { color: var(--aurora-mint); }
.post-tool.danger:hover { color: #fb7185; }
.post-body a { color: var(--aurora-mint); text-decoration: underline; }
.post-body blockquote { margin: .6em 0; padding: 8px 12px; border-left: 3px solid var(--aurora-violet); background: rgb(var(--tint) / .04); border-radius: 0 6px 6px 0; }
.post-body pre { margin: .6em 0; padding: 10px 12px; border-radius: 6px; background: rgb(var(--shade) / .35); border: 1px solid var(--glass-border); overflow-x: auto; }
.post-body img { max-width: 100%; border-radius: 6px; }
.reply-box { margin-top: 12px; padding: 14px 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-board); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.reply-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .88rem; }
.reply-note { color: var(--mud-palette-text-secondary); font-size: .9rem; display: flex; align-items: center; gap: 8px; }
html[data-theme="dark"] .reply-box { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Editor ---------- */

.bb-editor { border: 1px solid var(--glass-border-strong); border-radius: 10px; overflow: hidden; background: rgb(var(--shade) / .18); }
.bb-editor:focus-within { border-color: rgba(94, 234, 180, .55); box-shadow: 0 0 0 3px rgba(94, 234, 180, .1); }
.bb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 8px; background: rgb(var(--tint) / .03); border-bottom: 1px solid var(--glass-border); }
.bb-tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.bb-btn { all: unset; box-sizing: border-box; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; cursor: pointer; color: var(--mud-palette-text-secondary); transition: background-color .15s ease, color .15s ease; }
.bb-btn:hover { background: rgb(var(--tint) / .08); color: var(--aurora-mint); }
.bb-btn:focus-visible, .bb-tab:focus-visible { outline: 2px solid rgba(94, 234, 180, .6); outline-offset: 1px; }
.bb-sep { width: 1px; height: 18px; background: var(--glass-border-strong); margin: 0 6px; }
.bb-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgb(var(--tint) / .04); }
.bb-tab { all: unset; box-sizing: border-box; padding: 4px 12px; border-radius: 6px; font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--mud-palette-text-secondary); }
.bb-tab.active { background: rgba(94, 234, 180, .14); color: var(--aurora-mint); }
.bb-textarea { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--mud-palette-text-primary); font: inherit; font-size: .92rem; line-height: 1.6; min-height: 160px; }
.bb-textarea::placeholder { color: var(--mud-palette-text-disabled); }
.bb-preview { padding: 12px 14px; overflow-wrap: anywhere; }
.bb-foot { display: flex; justify-content: space-between; padding: 5px 12px; font-size: .72rem; color: var(--mud-palette-text-secondary); border-top: 1px solid var(--glass-border); }
.bb-foot .over { color: #fbbf24; }

.editor-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 960px) { .editor-page { grid-template-columns: 1fr; } }
.editor-card { margin-top: 12px; padding: 16px; display: flex; flex-direction: column; gap: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-board); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.editor-field { display: flex; flex-direction: column; gap: 6px; }
.editor-field > label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.editor-title { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--glass-border-strong); background: rgb(var(--shade) / .18); color: var(--mud-palette-text-primary); font: inherit; font-size: 1.15rem; font-weight: 600; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.editor-title:focus { border-color: rgba(94, 234, 180, .55); box-shadow: 0 0 0 3px rgba(94, 234, 180, .1); }
.editor-hint { display: flex; justify-content: space-between; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.editor-options { display: flex; gap: 24px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--glass-border-strong); }
.editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
.editor-side { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; position: sticky; top: 64px; }
.side-card { padding: 14px 16px; }
.side-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; margin-bottom: 8px; }
.side-card ul { margin: 0; padding-left: 18px; font-size: .82rem; color: var(--mud-palette-text-secondary); display: flex; flex-direction: column; gap: 5px; }
.bb-help { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; font-size: .76rem; }
.bb-help dt { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--aurora-mint); }
.bb-help dd { margin: 0; color: var(--mud-palette-text-secondary); text-align: right; }
html[data-theme="dark"] .editor-card { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Member profile ---------- */

.profile-hero .avatar.big { width: 92px; height: 92px; border-radius: 14px; }
.profile-hero { gap: 18px; padding: 18px 20px; }
.ph-main { min-width: 0; }
.ph-badges { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ph-stats { display: flex; gap: 8px; margin-left: auto; }
.ph-stats > div { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 8px 12px; border-radius: 10px; background: rgb(var(--tint) / .04); border: 1px solid var(--glass-border); line-height: 1.2; }
.ph-stats .num { font-weight: 700; font-size: 1.05rem; }
.ph-stats .lbl { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mud-palette-text-secondary); }
.seen { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.seen.online { color: var(--aurora-mint); font-weight: 600; }
.seen.online::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--aurora-mint); box-shadow: 0 0 8px var(--aurora-mint); margin-right: 6px; }
.profile-hero .hero-actions { margin-left: 0; }
@media (max-width: 960px) { .profile-hero { flex-wrap: wrap; } .ph-stats { margin-left: 0; } }

.profile-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-card { padding: 16px; border-radius: var(--radius-board); }
.profile-card.flush { padding: 0; overflow: hidden; }
.profile-card .bio { padding: 0; }
.info-list { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 8px; font-size: .88rem; }
.info-list > div { display: flex; gap: 12px; }
.info-list dt { display: flex; align-items: center; gap: 6px; min-width: 100px; color: var(--mud-palette-text-secondary); }
.info-list dd { margin: 0; overflow-wrap: anywhere; }
.activity-row, .acct-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: inherit !important; transition: background-color .15s ease; }
.activity-row + .activity-row, .acct-row + .acct-row { border-top: 1px solid var(--glass-border); }
.activity-row:hover, .acct-row:hover { background: rgb(var(--tint) / .04); }
.activity-row .icon-tile, .acct-row .icon-tile { width: 30px; height: 30px; border-radius: 9px; }
.act-text { flex: 1; min-width: 0; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-kind { color: var(--mud-palette-text-secondary); }
.act-when { font-size: .75rem; color: var(--mud-palette-text-secondary); flex: none; }
.priv-tag { margin-left: auto; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; color: var(--mud-palette-text-secondary); border: 1px solid var(--glass-border); }

.profile-form { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form-two { grid-template-columns: 1fr; } }
.editor-title.small { font-size: .9rem; font-weight: 500; padding: 9px 12px; }
.priv-note { padding: 10px 14px; font-size: .8rem; border-bottom: 1px solid var(--glass-border); }
.priv-select { appearance: none; -webkit-appearance: none; padding: 6px 30px 6px 12px; border-radius: 9px; border: 1px solid var(--glass-border-strong); background-color: rgb(var(--tint) / .05); color: var(--mud-palette-text-primary); font: inherit; font-size: .8rem; cursor: pointer; outline: 0; }
.priv-select:hover { border-color: rgb(var(--tint) / .3); }
.priv-select:focus-visible { border-color: rgba(94, 234, 180, .6); box-shadow: 0 0 0 3px rgba(94, 234, 180, .1); }
.priv-select option { background: #14161e; color: #edeef5; }

/* ---------- Dialog redesign ---------- */

.mud-dialog { position: relative; overflow: hidden; }
.mud-dialog::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--aurora-gradient); opacity: .9; }
.mud-dialog .mud-dialog-title { padding: 20px 24px 8px; }
.mud-dialog .mud-dialog-content { padding: 6px 24px 8px; }
.mud-dialog .mud-dialog-actions { border-top: 1px solid var(--glass-border); margin-top: 8px; padding: 12px 24px 14px; background: rgb(var(--tint) / .02); }

.dlg-head { display: flex; align-items: center; gap: 14px; }
.dlg-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; color: var(--aurora-mint); background: rgba(94, 234, 180, .12); border: 1px solid rgba(94, 234, 180, .3); box-shadow: 0 8px 24px -10px rgba(94, 234, 180, .5); }
.dlg-icon.danger { color: #fb7185; background: rgba(251, 113, 133, .12); border-color: rgba(251, 113, 133, .35); box-shadow: 0 8px 24px -10px rgba(251, 113, 133, .5); }
.dlg-title { font-size: 1.15rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.dlg-sub { font-size: .82rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.dlg-body { display: flex; flex-direction: column; gap: 16px; padding-top: 10px; }
.dlg-message { font-size: .92rem; line-height: 1.55; color: var(--mud-palette-text-secondary); }
.dlg-switch { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgb(var(--tint) / .03); }
.dlg-help { font-size: .75rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.dlg-error { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: .85rem; color: #fda4af; background: rgba(251, 113, 133, .1); border: 1px solid rgba(251, 113, 133, .3); }
.mud-dialog .mud-input-helper-text { font-size: .72rem; }

/* ---------- Likes and sticky posts ---------- */

.post-foot { display: flex; align-items: center; gap: 12px; padding: 6px 16px 10px; }
.like-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--mud-palette-text-secondary); border: 1px solid var(--glass-border); transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.like-btn:hover { color: var(--aurora-pink); border-color: rgba(244, 114, 182, .4); background: rgba(244, 114, 182, .08); }
.like-btn.liked { color: var(--aurora-pink); border-color: rgba(244, 114, 182, .45); background: rgba(244, 114, 182, .1); }
.like-btn:focus-visible { outline: 2px solid rgba(94, 234, 180, .6); outline-offset: 1px; }
.like-count { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.like-count .mud-icon-root { font-size: .95rem; color: var(--aurora-pink); }
.post.sticky { border-color: rgba(251, 191, 36, .35); }
.sticky-badge { color: #fbbf24 !important; background: rgba(251, 191, 36, .1) !important; border-color: rgba(251, 191, 36, .3) !important; }

.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 800px) { .rules-grid { grid-template-columns: 1fr; } }
.rules-block { padding: 12px 16px 14px; }
.rules-wide { grid-column: 1 / -1; }
.rules-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.rules-block ol { margin: 0; padding-left: 22px; font-size: .85rem; line-height: 1.7; }
.rules-block li::marker { color: var(--aurora-mint); font-weight: 700; }
.rules-block p { margin: 0; font-size: .85rem; line-height: 1.7; }
.rules-accept { margin-top: 12px; padding: 12px 16px; }

.perm-scroll { overflow-x: auto; padding: 0 12px 12px; }
.perm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .75rem; color: var(--mud-palette-text-secondary); align-items: center; }
.perm-legend span { display: inline-flex; align-items: center; gap: 4px; }
.perm-dirty { font-size: .75rem; color: #fbbf24; margin-right: 10px; }
.perm-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
.perm-matrix th { position: sticky; top: 0; z-index: 2; background: rgba(14,14,22,.92); backdrop-filter: blur(8px); padding: 10px 8px 8px; text-align: center; font-weight: 600; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
.perm-matrix th:first-child { text-align: left; padding-left: 14px; min-width: 280px; left: 0; z-index: 3; }
.perm-col { display: inline-flex; align-items: center; gap: 6px; }
.perm-reset { display: block; margin-top: 2px; font-size: .68rem; font-weight: 500; color: var(--mud-palette-text-secondary); cursor: pointer; }
.perm-reset:hover { color: var(--aurora-mint); }
.perm-matrix td { padding: 4px 8px; border-bottom: 1px solid rgb(var(--tint) / .04); vertical-align: middle; }
.perm-matrix td:first-child { padding-left: 14px; }
.perm-matrix tbody tr:not(.perm-section):hover td { background: rgb(var(--tint) / .035); }
.perm-cell { text-align: center; min-width: 88px; }
.perm-cell .mud-input-control { margin: 0 auto; }
.perm-cell .mud-checkbox { margin: 0; }
.perm-label { font-weight: 500; }
.perm-section td { padding: 16px 14px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--aurora-mint); border-bottom: 1px solid var(--glass-border); }
.perm-matrix th:last-child, .perm-matrix td:last-child { padding-right: 14px; }

.link-list .editor-actions { padding: 8px 16px 14px; }


/* Alerts, messages, blocking */
.bh-spacer { flex: 1; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--aurora-mint); color: #06110d; font-size: .66rem; font-weight: 800; line-height: 1; }
.bar-icons { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.bar-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--mud-palette-text-secondary); cursor: pointer; text-decoration: none; }
.bar-icon:hover { background: rgb(var(--tint) / .07); color: var(--mud-palette-text-primary); }
.bar-icon .count-badge { position: absolute; top: 1px; right: -1px; }
.alert-menu { position: relative; }
.alert-panel { width: 340px; max-width: 92vw; padding: 6px; right: 0; }
.alert-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 8px; font-weight: 700; font-size: .85rem; }
.alert-list { margin-top: 12px; overflow: hidden; }
.alert-row { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
.alert-row + .alert-row { border-top: 1px solid var(--glass-border); }
.alert-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; border-radius: 10px; }
.alert-main:hover { background: rgb(var(--tint) / .05); }
.alert-main.unread, .alert-row.unread .alert-main { background: rgba(94, 234, 180, .06); }
.alert-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: rgb(var(--tint) / .06); border: 1px solid var(--glass-border); }
.alert-row.unread .alert-icon, .alert-main.unread .alert-icon { color: var(--aurora-mint); border-color: rgba(94, 234, 180, .35); }
.alert-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.alert-title { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-body { font-size: .76rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-ago { font-size: .72rem; color: var(--mud-palette-text-secondary); flex: none; }

.blocked-note { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: .84rem; color: var(--mud-palette-text-secondary); }
.post.blocked { display: block; background: var(--glass-bg); border: 1px dashed var(--glass-border-strong); border-radius: var(--radius-board); }
.thread-row.blocked { display: block; opacity: .85; }

.msg-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
@media (max-width: 800px) { .msg-layout { grid-template-columns: 1fr; } }
.msg-side { overflow: hidden; }
.msg-new { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--glass-border); }
.msg-new .editor-title { font-size: .85rem; padding: 8px 10px; }
.msg-convo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--glass-border); }
.msg-convo:hover, .msg-convo.active { background: rgb(var(--tint) / .06); }
.msg-convo-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-convo-name { font-weight: 600; font-size: .86rem; }
.msg-convo-prev { font-size: .76rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-convo-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .7rem; color: var(--mud-palette-text-secondary); }
.msg-main { display: flex; flex-direction: column; min-height: 420px; }
.msg-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--glass-border); }
.msg-list { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; max-height: 480px; overflow-y: auto; }
.msg-bubble { max-width: 75%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgb(var(--tint) / .05); }
.msg-bubble.mine { align-self: flex-end; background: rgba(94, 234, 180, .1); border-color: rgba(94, 234, 180, .3); }
.msg-bubble.theirs { align-self: flex-start; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }
.msg-when { margin-top: 3px; font-size: .68rem; color: var(--mud-palette-text-secondary); }
.msg-compose { padding: 10px 14px 12px; border-top: 1px solid var(--glass-border); }
.msg-input { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border-strong); background: rgb(var(--shade) / .18); color: var(--mud-palette-text-primary); font: inherit; font-size: .9rem; resize: vertical; outline: 0; }
.msg-input:focus { border-color: rgba(94, 234, 180, .55); }
.msg-compose-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: .75rem; }


/* Member list */
.member-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; margin-top: 12px; }
.member-toolbar .editor-title { flex: 1; min-width: 200px; font-size: .88rem; padding: 8px 12px; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-top: 12px; }
.member-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.member-avatar { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: rgb(var(--tint) / .06); border: 1px solid var(--glass-border); display: block; }
.member-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.member-name { font-weight: 700; font-size: .95rem; color: var(--mud-palette-text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-name:hover { color: var(--aurora-mint); }
.member-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .74rem; color: var(--mud-palette-text-secondary); }
.member-stats b { color: var(--mud-palette-text-primary); }


/* ---------- Name designs ---------- */
.name-with-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.ns { font-weight: inherit; }
.ns-gradient, .ns-rainbow, .ns-flowrainbow, .ns-flowgradient { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ns-gradient { background-image: linear-gradient(90deg, var(--c1), var(--c2)); }
.ns-rainbow { background-image: linear-gradient(90deg, #ff5f6d, #ffc371, #fff56d, #5eeab4, #5fa8ff, #a78bfa, #f472b6); }
/* The gradients start and end on the same color and repeat, so sliding them one tile wide loops without a jump. */
.ns-flowrainbow { background-image: linear-gradient(90deg, #ff5f6d, #ffc371, #fff56d, #5eeab4, #5fa8ff, #a78bfa, #ff5f6d); background-size: 200% 100%; animation: ns-flow 5s linear infinite; }
.ns-flowgradient { background-image: linear-gradient(90deg, var(--c1), var(--c2), var(--c1)); background-size: 200% 100%; animation: ns-flow 3.5s linear infinite; }
@keyframes ns-flow { from { background-position: 0 0; } to { background-position: -200% 0; } }
.ns-sparkle { position: relative; display: inline-block; color: var(--c1); text-shadow: 0 0 8px color-mix(in srgb, var(--c1) 55%, transparent); }
.ns-sparkle::before, .ns-sparkle::after { content: "\2726"; position: absolute; font-size: .6em; color: #fff; opacity: 0; pointer-events: none; animation: ns-twinkle 2.4s ease-in-out infinite; }
.ns-sparkle::before { top: -.45em; left: 10%; }
.ns-sparkle::after { bottom: -.35em; right: 6%; animation-delay: 1.2s; }
@keyframes ns-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- Badges ---------- */
.user-badge { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; }
.badge-chip { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bc); border: 1px solid var(--bc); background: color-mix(in srgb, var(--bc) 14%, transparent); }
.badge-img { height: 18px; width: auto; max-width: 48px; object-fit: contain; border-radius: 4px; }
.badge-svg { display: inline-flex; }
.badge-svg svg { height: 18px; width: auto; max-width: 48px; }
.badge-html { display: inline-flex; max-height: 22px; overflow: hidden; }
.badge-large .badge-img, .badge-large .badge-svg svg { height: 28px; max-width: 72px; }
.badge-large .badge-html { max-height: 30px; }

.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 12px 14px; }
.design-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgb(var(--tint) / .03); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.design-card:hover { background: rgb(var(--tint) / .06); }
.design-card.active { border-color: rgba(94, 234, 180, .55); background: rgba(94, 234, 180, .07); }
.design-card .design-name { font-size: 1.05rem; font-weight: 700; }
.design-card .design-meta { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; padding: 12px 14px; }
.badge-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgb(var(--tint) / .03); }
.badge-card.featured { border-color: rgba(94, 234, 180, .55); background: rgba(94, 234, 180, .07); }
.badge-card .badge-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.badge-card .badge-title { font-weight: 700; font-size: .9rem; }
.badge-card .badge-desc { font-size: .74rem; color: var(--mud-palette-text-secondary); }


/* Reply and quote */
.reply-ref { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: .78rem; color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--glass-border); background: rgb(var(--tint) / .03); }
.reply-ref a { color: var(--aurora-mint); text-decoration: none; font-weight: 600; }
.reply-target { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 6px 10px; font-size: .82rem; border-radius: 8px; border: 1px solid rgba(94, 234, 180, .3); background: rgba(94, 234, 180, .07); }
.reply-target .post-tool { margin-left: auto; }
.post-body blockquote.quote { margin: .6em 0; padding: 0; overflow: hidden; }
.quote-head { padding: 5px 12px; font-size: .78rem; font-weight: 700; background: rgb(var(--tint) / .05); border-bottom: 1px solid var(--glass-border); }
.quote-head a { color: var(--aurora-violet); text-decoration: none; }
.quote-body { padding: 8px 12px; }


.design-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px 12px; border-top: 1px solid var(--glass-border); }
.design-colors-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mud-palette-text-secondary); }
.design-colors input[type="color"] { width: 38px; height: 30px; padding: 0; border: 1px solid var(--glass-border-strong); border-radius: 8px; background: none; cursor: pointer; }
.design-colors-preview { font-size: 1.05rem; font-weight: 700; margin-left: 4px; }


/* ---------- Web scene: the dark base with a drifting network of connected points ---------- */
.swatch.web { background: radial-gradient(circle at 25% 30%, #5eeab4 0 2px, transparent 3px), radial-gradient(circle at 70% 25%, #a78bfa 0 2px, transparent 3px), radial-gradient(circle at 55% 75%, #f472b6 0 2px, transparent 3px), linear-gradient(120deg, transparent 45%, rgba(167, 139, 250, .5) 46% 48%, transparent 49%), #090b14; }
.swatch.light { background: linear-gradient(135deg, #ffffff, #e3e8f2); }
html[data-theme="web"] .aurora-bg { background: radial-gradient(120% 80% at 50% -20%, rgba(94, 234, 180, .06), transparent 60%), #05060d; }
html[data-theme="web"] .aurora-bg .blob, html[data-theme="web"] .aurora-bg::after { display: none; }
#web-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Light theme ---------- */
html[data-theme="light"] {
    color-scheme: light;
    --tint: 15 23 42;
    --shade: 15 23 42;
    --glass-bg: rgba(255, 255, 255, .74);
    --glass-bg-strong: rgba(255, 255, 255, .97);
    --glass-border: rgba(15, 23, 42, .10);
    --glass-border-strong: rgba(15, 23, 42, .20);
    --aurora-mint: #0b9470;
    --aurora-teal: #0d9488;
    --aurora-violet: #6a4bd6;
    --aurora-pink: #c2287d;
    --aurora-gradient: linear-gradient(135deg, #0b9470 0%, #6a4bd6 55%, #c2287d 100%);
    --aurora-gradient-soft: linear-gradient(135deg, rgba(11, 148, 112, .12), rgba(106, 75, 214, .12) 55%, rgba(194, 40, 125, .12));
    --button-gradient: linear-gradient(135deg, #0b9470 0%, #3a9fb0 42%, #6a4bd6 100%);
    background-color: #edf0f7;

    --mud-palette-primary: #0b9470;
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-darken: #087a5b;
    --mud-palette-primary-lighten: #3cc29b;
    --mud-palette-primary-hover: rgba(11, 148, 112, .09);
    --mud-palette-secondary: #6a4bd6;
    --mud-palette-secondary-text: #ffffff;
    --mud-palette-secondary-darken: #553bb5;
    --mud-palette-secondary-lighten: #8f77e6;
    --mud-palette-secondary-hover: rgba(106, 75, 214, .09);
    --mud-palette-tertiary: #c2287d;
    --mud-palette-info: #5b6ee8;
    --mud-palette-success: #15803d;
    --mud-palette-warning: #b45309;
    --mud-palette-error: #dc2626;
    --mud-palette-error-text: #ffffff;
    --mud-palette-text-primary: #182033;
    --mud-palette-text-secondary: rgba(24, 32, 51, .68);
    --mud-palette-text-disabled: rgba(24, 32, 51, .38);
    --mud-palette-background: #edf0f7;
    --mud-palette-background-gray: #e4e8f1;
    --mud-palette-surface: rgba(255, 255, 255, .74);
    --mud-palette-drawer-background: rgba(255, 255, 255, .8);
    --mud-palette-drawer-text: #182033;
    --mud-palette-appbar-background: rgba(255, 255, 255, .8);
    --mud-palette-appbar-text: #182033;
    --mud-palette-lines-default: rgba(15, 23, 42, .10);
    --mud-palette-lines-inputs: rgba(15, 23, 42, .28);
    --mud-palette-table-lines: rgba(15, 23, 42, .10);
    --mud-palette-table-striped: rgba(15, 23, 42, .03);
    --mud-palette-table-hover: rgba(15, 23, 42, .05);
    --mud-palette-divider: rgba(15, 23, 42, .12);
    --mud-palette-divider-light: rgba(15, 23, 42, .06);
    --mud-palette-action-default: rgba(24, 32, 51, .72);
    --mud-palette-action-default-hover: rgba(15, 23, 42, .07);
    --mud-palette-action-disabled: rgba(24, 32, 51, .3);
    --mud-palette-action-disabled-background: rgba(15, 23, 42, .1);
    --mud-palette-overlay-dark: rgba(15, 23, 42, .5);
    --mud-palette-overlay-light: rgba(255, 255, 255, .5);
    --mud-palette-skeleton: rgba(15, 23, 42, .1);
}
html[data-theme="light"] .aurora-bg { background: radial-gradient(120% 80% at 50% -20%, rgba(11, 148, 112, .10), transparent 60%), #edf0f7; }
html[data-theme="light"] .aurora-bg .blob { opacity: .2; filter: blur(120px); }
html[data-theme="light"] .aurora-bg::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(237, 240, 247, .75) 100%); }
html[data-theme="light"] .mud-appbar { background: rgba(255, 255, 255, .8) !important; }
html[data-theme="light"] .mud-drawer { background: rgba(255, 255, 255, .8) !important; }
html[data-theme="light"] .mud-popover .mud-paper, html[data-theme="light"] .mud-menu-list, html[data-theme="light"] .mud-popover-open.mud-popover { box-shadow: 0 16px 40px rgba(15, 23, 42, .18) !important; }
html[data-theme="light"] .mud-dialog { box-shadow: 0 24px 60px rgba(15, 23, 42, .25); }
html[data-theme="light"] .priv-select option { background: #ffffff; color: #182033; }
html[data-theme="light"] .perm-matrix th { background: rgba(255, 255, 255, .96); }
html[data-theme="light"] .count-badge { color: #ffffff; }
html[data-theme="light"] .ns-sparkle::before, html[data-theme="light"] .ns-sparkle::after { color: #f59e0b; }
html[data-theme="light"] .titlePage, html[data-theme="light"] .aurora-text { filter: none; }
html[data-theme="light"] .notice-banner, html[data-theme="light"] .crumbs, html[data-theme="light"] .board { box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
/* Group colors were picked for dark surfaces, so darken them a little on light ones. */
html[data-theme="light"] .pa-group, html[data-theme="light"] .group-pill, html[data-theme="light"] .user-group, html[data-theme="light"] .up-group, html[data-theme="light"] .color-dot { filter: brightness(.62) saturate(1.5); }
html[data-theme="light"] .ns-rainbow { background-image: linear-gradient(90deg, #e11d48, #ea580c, #ca8a04, #059669, #2563eb, #7c3aed, #c026d3); }
html[data-theme="light"] .ns-flowrainbow { background-image: linear-gradient(90deg, #e11d48, #ea580c, #ca8a04, #059669, #2563eb, #7c3aed, #e11d48); }
html[data-theme="light"] .ns-sparkle { text-shadow: 0 0 6px color-mix(in srgb, var(--c1) 40%, transparent); }
html[data-theme="light"] {
    --mud-palette-drawer-icon: rgba(24, 32, 51, .72);
    --mud-palette-gray-default: #7a869a;
    --mud-palette-gray-light: #98a2b5;
    --mud-palette-gray-lighter: #e6eaf2;
    --mud-palette-gray-dark: #566075;
    --mud-palette-gray-darker: #3c4558;
    --mud-palette-dark: #182033;
    --mud-palette-dark-text: #ffffff;
}
html[data-theme="light"] .ns-gradient, html[data-theme="light"] .ns-flowgradient, html[data-theme="light"] .ns-sparkle { filter: brightness(.68) saturate(1.5); }


/* Round color pickers */
.design-colors input[type="color"] { width: 30px; height: 30px; border-radius: 50%; padding: 0; overflow: hidden; }
.design-colors input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.design-colors input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.design-colors input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }

/* Jumping to a post, and deleted posts */
.post.flash { animation: post-flash 1.6s ease; }
@keyframes post-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(94, 234, 180, 0); } 20% { box-shadow: 0 0 0 3px rgba(94, 234, 180, .55); } }
.post.deleted { display: block; background: var(--glass-bg); border: 1px dashed var(--glass-border-strong); border-radius: var(--radius-board); }
.deleted-note { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: .84rem; color: var(--mud-palette-text-secondary); }
.deleted-note b { color: var(--mud-palette-text-primary); font-weight: 600; }
.quote-deleted { font-style: italic; color: var(--mud-palette-text-secondary); }
.reply-ref .muted-deleted { font-style: italic; color: var(--mud-palette-text-secondary); }


/* Reactions */
.post-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.reaction-bar { display: flex; flex-wrap: wrap; gap: 6px; order: 2; margin-left: auto; }
.reaction-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--glass-border); background: rgb(var(--tint) / .05); color: inherit; font: inherit; font-size: .8rem; cursor: pointer; }
.reaction-chip:hover:not(:disabled) { background: rgb(var(--tint) / .1); }
.reaction-chip:disabled { cursor: default; }
.reaction-chip.mine { border-color: rgba(94, 234, 180, .55); background: rgba(94, 234, 180, .12); }
.reaction-chip span:last-child { font-weight: 700; font-size: .75rem; }
.reaction-emoji { font-size: 1.05rem; line-height: 1; }
.reaction-img { height: 20px; width: 20px; object-fit: contain; vertical-align: middle; }
.reaction-large .reaction-emoji { font-size: 1.5rem; }
.reaction-large .reaction-img { height: 30px; width: 30px; }
.react-wrap { position: relative; }
.react-picker { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; width: max-content; max-width: 280px; border-radius: 12px; border: 1px solid var(--glass-border-strong); background: var(--glass-bg-strong); box-shadow: 0 14px 40px rgb(var(--shade) / .45); }
.react-opt { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; transition: transform .12s ease, background-color .12s ease; }
.react-opt:hover { background: rgb(var(--tint) / .1); transform: scale(1.18); }
.react-opt.mine { background: rgba(94, 234, 180, .16); }
.react-opt .reaction-emoji { font-size: 1.5rem; }
.react-opt .reaction-img { height: 26px; width: 26px; }

/* Quotes shown as cards inside the editor */
.bb-above { padding: 8px 10px 0; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--glass-border); }
.bb-above:empty { display: none; padding: 0; border: 0; }
.quote-card { border-left: 3px solid var(--aurora-violet); border-radius: 0 8px 8px 0; background: rgb(var(--tint) / .05); overflow: hidden; margin-bottom: 8px; }
.quote-card-head { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: .78rem; font-weight: 700; background: rgb(var(--tint) / .05); border-bottom: 1px solid var(--glass-border); }
.quote-card-head .post-tool { margin-left: auto; }
.quote-card-body { padding: 8px 12px; max-height: 150px; overflow-y: auto; font-size: .86rem; }

.post-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--glass-border); }


/* Post footer: small, quiet controls. Reactions are an accent, not the point of the post. */
.post-foot { gap: 2px; padding: 6px 12px 8px; margin-top: 8px; }
.foot-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: .7rem; font-weight: 600; line-height: 1.5; color: var(--mud-palette-text-secondary); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.foot-btn .mud-icon-root { font-size: .9rem; }
.foot-btn:hover { color: var(--mud-palette-text-primary); background: rgb(var(--tint) / .07); }
.foot-btn.liked { color: var(--aurora-pink); }
.foot-btn:focus-visible { outline: 2px solid rgba(94, 234, 180, .6); outline-offset: 1px; }
.foot-sep { align-self: center; width: 1px; height: 14px; margin: 0 8px; background: var(--glass-border-strong); }
.reaction-bar { gap: 4px; }
.reaction-chip { gap: 3px; padding: 0 7px; font-size: .68rem; line-height: 1.6; }
.reaction-chip span:last-child { font-size: .66rem; font-weight: 600; }
.reaction-emoji { font-size: .85rem; }
.reaction-chip .reaction-img { height: 14px; width: 14px; }
.react-opt { width: 30px; height: 30px; }
.react-opt .reaction-emoji { font-size: 1.15rem; }
.react-opt .reaction-img { height: 22px; width: 22px; }
.reaction-large .reaction-emoji { font-size: 1.3rem; }
.reaction-large .reaction-img { height: 25px; width: 25px; }

/* ---------- Dialogs: compact so the content fits the frame ---------- */
.mud-dialog { font-size: .84rem; }
.mud-dialog .mud-dialog-title { padding: 16px 20px 6px; }
.mud-dialog .mud-dialog-content { padding: 4px 20px 6px; }
.mud-dialog .mud-dialog-actions { padding: 10px 20px 12px; margin-top: 6px; }
.mud-dialog .mud-dialog-actions .mud-button-root { font-size: .76rem; min-width: 0; padding: 4px 14px; }
.dlg-head { gap: 12px; }
.dlg-icon { width: 34px; height: 34px; border-radius: 10px; }
.dlg-icon .mud-icon-root { font-size: 1.1rem; }
.dlg-title { font-size: 1rem; }
.dlg-sub { font-size: .76rem; }
.dlg-body { gap: 10px; padding-top: 6px; }
.dlg-message { font-size: .84rem; line-height: 1.5; }
.dlg-help { font-size: .7rem; }
.dlg-error { font-size: .78rem; padding: 7px 10px; }
.dlg-switch { padding: 4px 10px; }

/* MudBlazor sizes its inputs in full rem, so bring them down to match. */
.mud-dialog .mud-input, .mud-dialog .mud-input-slot, .mud-dialog .mud-select-input, .mud-dialog .mud-input > input, .mud-dialog .mud-input > textarea { font-size: .84rem; }
.mud-dialog .mud-input-control > .mud-input-control-input-container > .mud-input-label { font-size: .84rem; }
.mud-dialog .mud-input-outlined.mud-input-margin-dense > .mud-input-slot { padding-top: 8px; padding-bottom: 8px; }
.mud-dialog .mud-input-outlined.mud-input-margin-dense > textarea.mud-input-slot { padding-top: 8px; padding-bottom: 8px; }
.mud-dialog .mud-input-adornment .mud-icon-root, .mud-dialog .mud-select .mud-icon-root { font-size: 1.05rem; }
.mud-dialog .mud-input-helper-text { font-size: .7rem; margin-top: 2px; }
.mud-dialog .mud-switch .mud-typography, .mud-dialog .mud-switch-label { font-size: .84rem; }
.mud-dialog .mud-switch-base { padding: 6px; }
.mud-dialog .swatch-line { height: 3px; margin-top: -4px; }
.mud-dialog .mud-dialog-title .mud-button-close { top: 10px; right: 10px; }
.mud-dialog .mud-dialog-title .mud-icon-button { padding: 4px; }
.mud-dialog .mud-dialog-title .mud-icon-button .mud-icon-root { font-size: 1.1rem; }

/* ---------- Dropdown lists: compact rows that match the field they open from ---------- */
.mud-popover .mud-list { padding: 4px; }
.mud-popover .mud-list-item { min-height: 0; padding: 6px 10px; border-radius: 6px; font-size: .84rem; }
.mud-popover .mud-list-item .mud-list-item-text, .mud-popover .mud-list-item .mud-typography { font-size: .84rem; line-height: 1.35; margin: 0; }
.mud-popover .mud-list-item .mud-list-item-icon { min-width: 28px; }
.mud-popover .mud-list-item .mud-icon-root { font-size: 1.05rem; }
.mud-popover .mud-list-item:hover { background: rgb(var(--tint) / .07); }
.mud-popover .mud-list-item.mud-selected-item { background: rgba(94, 234, 180, .1); color: var(--aurora-mint); }
.mud-popover .mud-list-item.mud-selected-item .mud-typography { color: var(--aurora-mint); }
.mud-popover.mud-popover-open .mud-paper { max-height: 280px; }


/* Links from the admin hub out to the forum */
.ext-link { color: var(--mud-palette-text-primary) !important; text-decoration: none; border-bottom: 1px dotted transparent; transition: color .12s ease, border-color .12s ease; }
.ext-link:hover { color: var(--aurora-mint) !important; border-bottom-color: currentColor; }

/* Admin tools on a member profile */
.admin-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 14px; margin-bottom: 12px; }
.admin-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .78rem; }
.tool-bar { display: flex; flex-wrap: wrap; gap: 6px; }


/* System messages */
.sys-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 8px; color: #fbbf24; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .35); }
.msg-convo.pinned { background: rgba(251, 191, 36, .05); border-bottom: 1px solid rgba(251, 191, 36, .2); }
.msg-convo.pinned .pin-mark { font-size: .8rem; color: #fbbf24; vertical-align: -2px; }
.sys-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgb(var(--tint) / .04); }
.sys-item.warn { border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .06); }
.sys-tile { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: rgb(var(--tint) / .07); }
.sys-item.warn .sys-tile { color: #fbbf24; }
.sys-text { flex: 1; min-width: 0; font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.sys-body { margin-top: 2px; white-space: pre-wrap; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aurora-mint); flex: none; margin-top: 6px; }

/* Reports */
.report-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 12px; margin-top: 12px; }
.filter-group { display: inline-flex; border: 1px solid var(--glass-border); border-radius: 8px; overflow: hidden; }
.filter-group button { all: unset; box-sizing: border-box; padding: 4px 12px; font-size: .76rem; font-weight: 600; cursor: pointer; color: var(--mud-palette-text-secondary); }
.filter-group button + button { border-left: 1px solid var(--glass-border); }
.filter-group button:hover { background: rgb(var(--tint) / .06); }
.filter-group button.active { color: var(--aurora-mint); background: rgba(94, 234, 180, .1); }
.report-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.report-card { display: flex; gap: 14px; padding: 12px 14px; align-items: flex-start; }
.report-card.resolved, .report-card.dismissed { opacity: .72; }
.report-type { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 54px; flex: none; padding: 8px 0; border-radius: 10px; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fb7185; background: rgba(251, 113, 133, .08); border: 1px solid rgba(251, 113, 133, .25); }
.report-card.resolved .report-type { color: var(--aurora-mint); background: rgba(94, 234, 180, .08); border-color: rgba(94, 234, 180, .25); }
.report-card.dismissed .report-type { color: var(--mud-palette-text-secondary); background: rgb(var(--tint) / .05); border-color: var(--glass-border); }
.report-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.report-target { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.report-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .74rem; color: var(--mud-palette-text-secondary); }
.report-reason { padding: 7px 10px; border-left: 3px solid var(--aurora-violet); border-radius: 0 8px 8px 0; background: rgb(var(--tint) / .04); font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-handled { font-size: .76rem; color: var(--mud-palette-text-secondary); }
.report-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
@media (max-width: 800px) { .report-card { flex-wrap: wrap; } .report-actions { flex-direction: row; flex-wrap: wrap; } }


/* Audit log */
.audit-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--glass-border); }
.audit-filters .editor-title { width: 170px; font-size: .8rem; padding: 6px 10px; }
.audit-filters .editor-title.wide { width: 240px; }
.audit-filters .date-field { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--mud-palette-text-secondary); }
.audit-filters .date-field .editor-title { width: 140px; }
.audit-count { padding: 8px 14px; font-size: .8rem; border-bottom: 1px solid var(--glass-border); }
.audit-count .muted { margin-left: 8px; }
.audit-scroll { overflow-x: auto; }
.audit-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.audit-table th { text-align: left; padding: 8px 12px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
.audit-table td { padding: 7px 12px; vertical-align: top; border-bottom: 1px solid rgb(var(--tint) / .05); }
.audit-row { cursor: pointer; }
.audit-row:hover td, .audit-row.open td { background: rgb(var(--tint) / .05); }
.audit-table .nowrap { white-space: nowrap; }
.audit-summary { font-weight: 600; overflow-wrap: anywhere; }
.audit-action { font-family: Consolas, monospace; font-size: .7rem; color: var(--mud-palette-text-secondary); }
.audit-detail td { padding: 0 12px 10px; }
.audit-detail pre { margin: 0; padding: 10px 12px; max-height: 360px; overflow: auto; border-radius: 8px; border: 1px solid var(--glass-border); background: rgb(var(--shade) / .25); font-size: .74rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.audit-cat { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; border: 1px solid currentColor; }
.audit-cat-auth { color: #60a5fa; } .audit-cat-account { color: var(--aurora-mint); } .audit-cat-content { color: #a78bfa; }
.audit-cat-message { color: #f472b6; } .audit-cat-moderation { color: #fbbf24; } .audit-cat-admin { color: #fb923c; }
.audit-cat-security { color: #fb7185; } .audit-cat-dashboard { color: #2dd4bf; }


/* Suggestion box */
.suggest-wrap { position: relative; }
.audit-filters .suggest-wrap .editor-title { width: 190px; }
.suggest-list { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content; max-width: 340px; margin: 0; padding: 4px; list-style: none; border-radius: 10px; border: 1px solid var(--glass-border-strong); background: var(--glass-bg-strong); box-shadow: 0 14px 40px rgb(var(--shade) / .45); }
.suggest-item { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 5px 9px; border-radius: 6px; font-size: .8rem; cursor: pointer; }
.suggest-item.active, .suggest-item:hover { background: rgba(94, 234, 180, .1); }
.suggest-value b { color: var(--aurora-mint); font-weight: 700; }
.suggest-hint { font-size: .68rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

/* Date pickers */
.date-picker { width: 178px; flex: none; }
.date-picker .mud-input, .date-picker .mud-input-slot { font-size: .8rem; }
.date-picker .mud-input-outlined.mud-input-margin-dense > .mud-input-slot { padding-top: 6px; padding-bottom: 6px; }
.date-picker .mud-input-label { font-size: .8rem; }
.date-picker .mud-icon-root { font-size: 1.05rem; }
.mud-picker-content { background: var(--glass-bg-strong); }
.mud-picker-calendar-header { padding: 6px 12px 0; }
.mud-picker-calendar-header-switch .mud-typography { font-size: .85rem; font-weight: 700; }
.mud-picker-calendar-header-day .mud-typography { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.mud-picker-calendar-container { padding: 4px 8px 8px; }
.mud-picker .mud-picker-calendar .mud-day, .mud-picker-calendar-content .mud-day { width: 32px; height: 32px; font-size: .78rem; }
.mud-picker-calendar .mud-day .mud-typography { font-size: .78rem; }
.mud-picker-calendar .mud-day.mud-selected { background: var(--aurora-mint); color: #06110d; }
.mud-picker-calendar .mud-day.mud-current:not(.mud-selected) { border: 1px solid rgba(94, 234, 180, .6); color: var(--aurora-mint); }
.mud-picker-calendar .mud-day:hover:not(.mud-selected):not(.mud-disabled) { background: rgb(var(--tint) / .1); }
.mud-picker-calendar .mud-day.mud-disabled { opacity: .3; }
.mud-picker-inline-paper { border-radius: 12px; }
.date-picker.mud-input-control { margin: 0; }
.date-picker .mud-input.mud-input-outlined { min-height: 34px; align-items: center; cursor: pointer; }
.date-picker .mud-input-outlined.mud-input-margin-dense > .mud-input-slot { padding-top: 7px; padding-bottom: 7px; cursor: pointer; }
.date-picker .mud-input-outlined-border { border-color: var(--glass-border-strong); }
.date-picker .mud-input-label-outlined.mud-input-label-margin-dense { transform: translate(14px, 9px) scale(1); }
.date-picker .mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputshrunk { transform: translate(14px, -6px) scale(.75); }

/* The calendar is taller than a list, so it must not be cut off like one. */
.mud-popover.mud-popover-open .mud-paper.mud-picker-popover-paper, .mud-popover.mud-popover-open .mud-picker-inline-paper { max-height: none; overflow: visible; }
.mud-picker-popover-paper .mud-picker-content { overflow: visible; }
.mud-picker-calendar-container .mud-picker-calendar { min-width: 252px; }
.mud-picker-calendar-header-switch { padding: 4px 4px 2px; }


/* Server connect */
.server-actions { display: flex; gap: 8px; margin-top: 10px; }
.connect-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px; border-radius: 8px; font-size: .8rem; font-weight: 700; text-decoration: none; color: #04130d; background: var(--aurora-mint); }
.connect-btn:hover { filter: brightness(1.1); }
.copy-btn { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 8px; cursor: pointer; color: inherit; background: transparent; border: 1px solid var(--glass-border-strong); }


/* Two-factor */
.backup-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin: 10px 0; }
.backup-codes code, .mfa-key { padding: 4px 8px; border-radius: 6px; background: rgb(var(--shade) / .25); font-size: .85rem; user-select: all; }
.mfa-qr { width: 190px; margin: 10px 0; padding: 8px; border-radius: 10px; background: #fff; }
.mfa-qr svg { width: 100%; height: auto; display: block; }

.backup-codes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; max-width: 340px; }
.backup-code { padding: 6px 10px; border-radius: 8px; background: rgb(var(--shade) / .25); font-family: ui-monospace, Consolas, monospace; font-size: .95rem; letter-spacing: .06em; text-align: center; user-select: all; }

.post-body img { height: auto; }


/* Spoilers and code in posts */
.post-body details.spoiler { margin: 8px 0; border: 1px solid var(--glass-border); border-radius: 8px; background: rgb(var(--shade) / .18); }
.post-body details.spoiler > summary { cursor: pointer; padding: 6px 12px; font-weight: 600; font-size: .85rem; color: var(--aurora-mint); }
.post-body details.spoiler > .spoiler-body { padding: 4px 12px 10px; }
.post-body .code-block { position: relative; margin: 8px 0; border: 1px solid var(--glass-border); border-radius: 8px; background: rgb(var(--shade) / .35); overflow: hidden; }
.post-body .code-lang { padding: 3px 12px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--glass-border); background: rgb(var(--tint) / .04); }
.post-body .code-block pre { margin: 0; padding: 10px 12px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; line-height: 1.55; tab-size: 4; }
.post-body .code-block code { font-family: inherit; white-space: pre; }
.tok-c { color: #7f8ea3; font-style: italic; }
.tok-s { color: #a5e075; }
.tok-k { color: #c792ea; font-weight: 600; }
.tok-n { color: #f78c6c; }
.tok-t { color: #5eead4; }
.tok-f { color: #82aaff; }
html[data-theme="light"] .tok-c { color: #6b7686; }
html[data-theme="light"] .tok-s { color: #2f7d1d; }
html[data-theme="light"] .tok-k { color: #7c3aed; }
html[data-theme="light"] .tok-n { color: #c2410c; }
html[data-theme="light"] .tok-t { color: #0f766e; }
html[data-theme="light"] .tok-f { color: #1d4ed8; }

/* Server connect row: Connect fills the row, copy sits beside it */
.server-card .server-actions { display: flex; gap: 8px; margin-top: 12px; }
.server-card a.connect-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; color: #03140d !important; background: linear-gradient(135deg, var(--aurora-mint), #7dd3fc); box-shadow: 0 4px 14px rgba(94, 234, 180, .22); transition: transform .12s ease, box-shadow .12s ease; }
.server-card a.connect-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(94, 234, 180, .35); }
.server-card a.connect-btn .mud-icon-root { color: inherit !important; width: 1.15rem; height: 1.15rem; }
.server-card button.copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 10px; cursor: pointer; color: var(--mud-palette-text-secondary); background: rgb(var(--tint) / .05); border: 1px solid var(--glass-border-strong); transition: color .12s ease, background .12s ease; }
.server-card button.copy-btn:hover { color: var(--aurora-mint); background: rgb(var(--tint) / .1); }
.server-card button.copy-btn .mud-icon-root { width: 1.05rem; height: 1.05rem; }