:root {
    --bg-color: #0b0f19;
    --card-bg: #121826;
    --border-color: #1f293d;
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --accent-gold: #dbb955;
    --accent-gold-hover: #b99a3f;
    --discord-blue: #5865F2;
    --discord-blue-hover: #4752C4;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    background-image:
        radial-gradient(ellipse 1100px 520px at 50% -8%, rgba(203, 213, 225, 0.11), transparent 70%),
        radial-gradient(ellipse 700px 500px at 100% 100%, rgba(148, 163, 184, 0.06), transparent 70%),
        linear-gradient(180deg, #141821 0%, var(--bg-color) 40%, #07090e 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    gap: 20px;
}

.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    gap: 12px;
    flex: 1;
}

.logo-img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 8px;
}

.logo-text {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.5px;
}

nav {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 22px;
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap;
}

nav a {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

nav a:hover,
nav a.active {
    color: var(--text-primary);
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    background-color: var(--accent-gold);
    color: #000000;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-gold:hover {
    background-color: var(--accent-gold-hover);
    box-shadow: 0 0 15px rgba(219, 185, 85, 0.4);
}

.btn-discord {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    background-color: var(--discord-blue);
    color: #ffffff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-discord:hover {
    background-color: var(--discord-blue-hover);
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.4);
}

.btn-discord svg, .btn-gold svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    flex: 1;
}

.hero-content {
    max-width: 700px;
}

.hero-logo-large {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto 24px;
    object-fit: cover;
    border-radius: 32px;
    border: 1px solid rgba(255, 220, 170, 0.15);
    box-shadow: 0 0 40px rgba(255, 210, 150, 0.15), 0 12px 40px rgba(0, 0, 0, 0.5);
}

.hero h1 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--accent-gold);
    margin-bottom: 20px;
    font-weight: 600;
}

.hero-description {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.play-soon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding: 10px 20px 10px 16px;
    background-color: #000000;
    border: 1px solid #3a3f4b;
    border-radius: 10px;
    text-align: left;
    cursor: default;
    user-select: none;
}

.play-soon svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.play-soon-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.play-soon-small {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.play-soon-big {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn-outline:hover {
    border-color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.03);
}

.section {
    padding: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.section-title p {
    color: var(--text-secondary);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.step-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.step-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
}

.card-emoji {
    display: block;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 14px;
}

.step-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.step-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.card-link {
    color: var(--accent-gold);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.card-link:hover {
    text-decoration: underline;
}

.page-header {
    text-align: center;
    padding: 60px 20px 20px 20px;
}

.page-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.page-header p {
    color: var(--text-secondary);
}

footer {
    border-top: 1px solid var(--border-color);
    padding: 30px 40px;
    background-color: rgba(7, 9, 14, 0.35);
    margin-top: auto;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    text-align: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 6px;
}

footer p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

footer a {
    color: var(--text-primary);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    header {
        padding: 15px 20px;
        flex-direction: column;
        align-items: center;
    }
    
    nav ul {
        justify-content: center;
        gap: 16px;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .section {
        padding: 40px 20px;
    }
}

/* ================================================================
   Feedback (tickets) & admin panel
   ================================================================ */

:root {
    --surface-2: #182033;
    --danger: #f87171;
    --success: #4ade80;
    --info: #60a5fa;
    --warning: #fbbf24;
    --muted: #6b7280;
}

.hidden { display: none !important; }

.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.btn-sm:hover { border-color: var(--text-secondary); background: rgba(255, 255, 255, 0.04); }
.btn-sm.danger { color: var(--danger); border-color: rgba(248, 113, 113, 0.35); }
.btn-sm.danger:hover { background: rgba(248, 113, 113, 0.08); }
.btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }

button.btn-gold, button.btn-discord { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.btn-gold:disabled { opacity: 0.6; cursor: not-allowed; }

.pw-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pw-input, .pw-select, .pw-textarea {
    width: 100%;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pw-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.pw-input:focus, .pw-select:focus, .pw-textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(219, 185, 85, 0.12);
}
.pw-field { margin-bottom: 16px; }
.pw-hint { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.pw-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-secondary); cursor: pointer; }
.pw-check input { accent-color: var(--accent-gold); width: 16px; height: 16px; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}
.card h2 { font-size: 1.15rem; margin-bottom: 4px; }
.card .card-sub { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 20px; }

/* segmented control */
.seg {
    display: inline-flex;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    flex-wrap: wrap;
}
.seg button {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.seg button:hover { color: var(--text-primary); }
.seg button.active { background: var(--surface-2); color: var(--text-primary); }
.seg.full { display: flex; }
.seg.full button { flex: 1; }
.seg button.active.bug { color: var(--danger); }
.seg button.active.idea { color: var(--accent-gold); }

/* badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.badge.type-bug_report { color: var(--danger); }
.badge.type-suggestion { color: var(--accent-gold); }
.badge.neutral { color: var(--text-secondary); }
.badge.s-pending, .badge.s-open { color: var(--text-secondary); }
.badge.s-considering, .badge.s-investigating { color: var(--info); }
.badge.s-confirmed, .badge.s-planned { color: #2dd4bf; }
.badge.s-implemented, .badge.s-fixed { color: var(--success); }
.badge.s-declined, .badge.s-invalid { color: var(--muted); }
.badge.hidden-badge { color: var(--warning); }

/* auth bar */
.auth-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 20px;
}
.auth-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.avatar.sm { width: 24px; height: 24px; }
.avatar-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
}
.auth-user .name { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-user .sub { font-size: 0.78rem; color: var(--text-secondary); }

/* alert */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 16px;
    border: 1px solid;
}
.alert.error { color: #fecaca; background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.35); }
.alert.success { color: #bbf7d0; background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.3); }
.alert.info { color: #c7d2fe; background: rgba(88, 101, 242, 0.1); border-color: rgba(88, 101, 242, 0.35); }
.alert a { color: inherit; font-weight: 600; }

/* tickets page */
.tickets-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.stat {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
}
.stat .value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.stat .label { font-size: 0.78rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }

.tickets-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 24px;
    align-items: start;
}
.tickets-form { position: sticky; top: 20px; }

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}
.filters .pw-select, .filters .pw-input { width: auto; padding: 7px 10px; font-size: 0.85rem; }
.filters .pw-input { flex: 1; min-width: 160px; }
.list-meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 12px; }

.ticket-list { display: flex; flex-direction: column; gap: 10px; }
.ticket-item {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 18px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.ticket-item:hover { border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.ticket-item .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ticket-item .tid { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ticket-item h3 { font-size: 1rem; font-weight: 600; margin: 8px 0 4px; overflow-wrap: anywhere; }
.ticket-item p.excerpt {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.ticket-item .foot { margin-top: 10px; font-size: 0.8rem; color: var(--muted); gap: 12px; }
.ticket-item .note-flag { color: var(--accent-gold); }
.empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
}

/* modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 6, 12, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    z-index: 50;
}
.modal {
    width: 100%;
    max-width: 760px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}
.modal-head h2 { font-size: 1.25rem; margin-top: 8px; overflow-wrap: anywhere; }
.modal-close {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 34px; height: 34px;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    flex-shrink: 0;
}
.modal-close:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.modal-body { padding: 20px 24px 24px; }
.meta-line { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 0.85rem; flex-wrap: wrap; }
.ticket-desc { white-space: pre-wrap; overflow-wrap: anywhere; margin: 16px 0; line-height: 1.65; }
.dev-note {
    border-left: 3px solid var(--accent-gold);
    background: rgba(219, 185, 85, 0.06);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.dev-note .head { font-size: 0.78rem; font-weight: 700; color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.dev-note p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; }

/* conversation */
.convo {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.convo-head {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}
.convo-head strong { font-size: 0.9rem; }
.convo-head span { color: var(--muted); }
.convo-messages { max-height: 380px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 10px; max-width: 88%; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg .bubble {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 0;
}
.msg.admin .bubble { border-color: rgba(219, 185, 85, 0.3); }
.msg .who { font-size: 0.78rem; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.msg .who .role { color: var(--accent-gold); font-weight: 700; }
.msg .text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; margin-top: 2px; }
.msg .actions { display: flex; gap: 8px; margin-top: 4px; }
.msg .actions button { background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.75rem; cursor: pointer; padding: 0; }
.msg .actions button:hover { color: var(--text-primary); }
.convo-empty { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 20px 0; }
.convo-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-color); background: var(--bg-color); }
.convo-form textarea { min-height: 44px; height: 44px; flex: 1; resize: vertical; }
.convo-locked { padding: 14px 16px; color: var(--muted); font-size: 0.88rem; background: var(--bg-color); border-top: 1px solid var(--border-color); }

/* toast */
.toast-wrap { position: fixed; bottom: 20px; right: 20px; left: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 100; pointer-events: none; }
.toast {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--success);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    max-width: 360px;
}
.toast.error { border-left-color: var(--danger); }

/* admin login */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 16px; }
.login-card { width: 100%; max-width: 420px; text-align: center; }
.login-card .login-icon {
    width: 72px; height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(219, 185, 85, 0.1);
    border: 1px solid rgba(219, 185, 85, 0.4);
    box-shadow: 0 0 30px rgba(219, 185, 85, 0.15);
}
.login-card .login-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--accent-gold); }
.login-card h1 { font-size: 1.6rem; margin-bottom: 6px; }
.login-card p { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 24px; }
.login-card .alert { text-align: left; }
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px 18px;
    background: #ffffff; color: #1f1f1f;
    border: 1px solid #dadce0; border-radius: 6px;
    font-weight: 600; font-size: 1rem; text-decoration: none;
    transition: box-shadow 0.2s ease;
}
.btn-google:hover { box-shadow: 0 0 15px rgba(255, 255, 255, 0.25); }
.btn-google svg { width: 20px; height: 20px; }

/* admin panel */
:root { --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; }
body.admin-body {
    background-color: #0a0b10;
    background-image:
        radial-gradient(ellipse 1100px 620px at 70% -10%, rgba(220, 38, 38, 0.24), transparent 70%),
        radial-gradient(ellipse 800px 650px at 100% 100%, rgba(185, 28, 28, 0.18), transparent 70%),
        linear-gradient(180deg, #140b0e 0%, #0a0b10 45%, #07070b 100%);
    background-attachment: fixed;
}
/* cat backdrop: the image is small and portrait, so it is shown twice — heavily blurred to fill the
   screen (resolution doesn't matter there) and sharp, at near-native size, faded into the corner */
body.admin-body::before,
body.admin-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
body.admin-body::before {
    background:
        radial-gradient(ellipse at center, transparent 30%, rgba(5, 5, 8, 0.8) 100%),
        linear-gradient(180deg, rgba(60, 12, 16, 0.45) 0%, rgba(10, 11, 16, 0.6) 100%),
        var(--admin-bg-blur, url("/static/admin-bg.webp")) center / cover no-repeat;
    filter: blur(36px) brightness(0.6);
    transform: scale(1.15);
}
body.admin-body::after {
    left: 260px; /* centre over the content column, not under the sidebar */
    background: var(--admin-bg, url("/static/admin-bg.webp")) center / auto min(90vh, 996px) no-repeat;
    opacity: 0.6;
    -webkit-mask-image: radial-gradient(ellipse min(32vw, 440px) min(52vh, 560px) at center, #000 70%, transparent 100%);
    mask-image: radial-gradient(ellipse min(32vw, 440px) min(52vh, 560px) at center, #000 70%, transparent 100%);
}
@media (max-width: 900px) {
    body.admin-body::after { display: none; }
}
.adm { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }

.adm-side {
    position: sticky; top: 0;
    height: 100vh;
    display: flex; flex-direction: column;
    background: rgba(14, 12, 18, 0.82);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--border-color);
}
.adm-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 20px;
    border-bottom: 1px solid var(--border-color);
    color: inherit; text-decoration: none;
}
.adm-brand img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.adm-brand strong { display: block; font-size: 0.95rem; }
.adm-brand small { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--accent-gold); }

.adm-nav { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; }
.adm-nav button, .adm-nav a {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.adm-nav svg { width: 16px; height: 16px; flex-shrink: 0; }
.adm-nav button:hover, .adm-nav a:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.03); }
.adm-nav button.active { color: var(--accent-gold); background: rgba(219, 185, 85, 0.08); border-color: rgba(219, 185, 85, 0.3); }
.adm-nav .count {
    margin-left: auto;
    font-size: 0.7rem;
    background: var(--surface-2);
    color: var(--text-secondary);
    padding: 1px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.adm-nav .sep { height: 1px; background: var(--border-color); margin: 10px 4px; }
.cc-embed-toggle { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: rgba(0, 0, 0, 0.2); color: var(--text-primary); flex-wrap: wrap; }
.cc-embed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.cc-embed-preview { position: sticky; top: 20px; padding: 16px; }
@media (max-width: 1200px) { .cc-embed { grid-template-columns: 1fr; } .cc-embed-preview { position: static; } }
.adm-nav-search { position: relative; padding: 14px 14px 0; }
.adm-nav-search svg { position: absolute; left: 26px; top: 50%; width: 15px; height: 15px; margin-top: 7px; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }
.adm-nav-search .pw-input { padding: 9px 12px 9px 36px; font-family: var(--mono); font-size: 0.8rem; }
.adm-nav .nav-miss { display: none; }
.adm-nav.searching .sep { display: none; }
.adm-nav-empty { padding: 10px 14px; font-family: var(--mono); font-size: 0.78rem; color: var(--text-secondary); }

.adm-foot { padding: 16px; border-top: 1px solid var(--border-color); background: rgba(0, 0, 0, 0.25); }
.adm-role { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.adm-role .tag { color: var(--success); font-weight: 600; }
.adm-role .tag.root { color: var(--accent-gold); }
.adm-user { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; min-width: 0; }
.adm-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-foot-btn {
    display: flex; justify-content: center; align-items: center;
    padding: 9px;
    margin-top: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-decoration: none;
}
button.adm-foot-btn { width: 100%; background: transparent; cursor: pointer; }
.adm-foot-btn:hover { background: rgba(255, 255, 255, 0.04); }
.adm-foot-btn.danger { color: var(--danger); border-color: rgba(248, 113, 113, 0.3); }
.adm-foot-btn.danger:hover { background: rgba(248, 113, 113, 0.08); }

.adm-main { padding: 32px; min-width: 0; }
.adm-head {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 24px;
}
.adm-head h1 { font-size: 1.6rem; letter-spacing: -0.5px; }
.adm-head p { font-family: var(--mono); font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; }
.adm-head-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.adm-section-title { font-size: 1.1rem; margin: 32px 0 14px; }

.mono-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-primary);
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.mono-btn:hover { border-color: var(--text-secondary); }

.bot-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.75rem; color: var(--text-secondary); }
.bot-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.bot-status.online .dot { background: var(--success); box-shadow: 0 0 8px var(--success); }

/* overview */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ov-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 28px;
    text-align: left;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.ov-card:hover { border-color: rgba(219, 185, 85, 0.35); transform: translateY(-2px); }
.ov-icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid;
    margin-bottom: 20px;
}
.ov-icon svg { width: 22px; height: 22px; }
.ov-icon.blue { color: var(--info); background: rgba(96, 165, 250, 0.1); border-color: rgba(96, 165, 250, 0.3); }
.ov-icon.red { color: var(--danger); background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); }
.ov-icon.gold { color: var(--accent-gold); background: rgba(219, 185, 85, 0.1); border-color: rgba(219, 185, 85, 0.3); }
.ov-icon.green { color: var(--success); background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.3); }
.ov-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.ov-card p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }

/* ticket feed cards */
.tk {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.tk.is-hidden { border-style: dashed; opacity: 0.75; }
.tk-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-author { font-weight: 700; font-size: 0.9rem; }
.tk-sub { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; }
.tk-id { font-family: var(--mono); font-size: 0.78rem; color: var(--text-secondary); }
.tk-title { font-weight: 700; margin-bottom: 8px; overflow-wrap: anywhere; }
.tk-box {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    font-family: var(--mono);
    font-size: 0.86rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.tk-note {
    background: rgba(219, 185, 85, 0.05);
    border: 1px solid rgba(219, 185, 85, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.tk-note-head {
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.tk-note p { font-family: var(--mono); font-size: 0.86rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-thread { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; }
.tk-thread-head {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.tk-thread-head .pill { background: var(--surface-2); padding: 1px 8px; border-radius: 4px; margin-left: 6px; }
.tk-thread-head .r { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.tk-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; padding: 4px 2px 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.tk-empty { font-family: var(--mono); font-style: italic; font-size: 0.78rem; color: var(--muted); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.tk-reply textarea { min-height: 64px; font-size: 0.9rem; }
.tk-reply-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.tk-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border-color); margin-top: 16px; padding-top: 14px; }
.tk-actions .grp { display: flex; gap: 8px; flex-wrap: wrap; }

/* quick action buttons + color helpers */
.qbtn {
    padding: 6px 12px;
    border: 1px solid;
    border-radius: 6px;
    background: transparent;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.qbtn:hover { background: rgba(255, 255, 255, 0.05); }
.c-green { color: var(--success); border-color: rgba(74, 222, 128, 0.35); }
.c-teal { color: #2dd4bf; border-color: rgba(45, 212, 191, 0.35); }
.c-blue { color: var(--info); border-color: rgba(96, 165, 250, 0.35); }
.c-red { color: var(--danger); border-color: rgba(248, 113, 113, 0.35); }
.c-grey { color: var(--text-secondary); border-color: rgba(156, 163, 175, 0.3); }
.c-gold { color: var(--accent-gold); border-color: rgba(219, 185, 85, 0.35); }
.c-violet { color: #a78bfa; border-color: rgba(167, 139, 250, 0.35); }
.qbtn.active { background: currentColor; }
.qbtn.active.c-green, .qbtn.active.c-teal, .qbtn.active.c-blue, .qbtn.active.c-red,
.qbtn.active.c-grey, .qbtn.active.c-gold, .qbtn.active.c-violet { color: #0b0f19; cursor: default; }
.qbtn.active.c-green { background: var(--success); }
.qbtn.active.c-teal { background: #2dd4bf; }
.qbtn.active.c-blue { background: var(--info); }
.qbtn.active.c-red { background: var(--danger); }
.qbtn.active.c-grey { background: var(--text-secondary); }
.qbtn.active.c-gold { background: var(--accent-gold); cursor: pointer; }
.qbtn.active.c-violet { background: #a78bfa; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th { text-align: left; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border-color); }
.admin-table td { padding: 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; overflow-wrap: anywhere; }
.admin-table tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }

@media (max-width: 900px) {
    .adm { grid-template-columns: minmax(0, 1fr); }
    .adm-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border-color); }
    .adm-nav { flex-direction: row; flex-wrap: wrap; padding: 10px; }
    .adm-nav button, .adm-nav a { width: auto; }
    .adm-nav .sep { display: none; }
    .adm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .adm-foot .adm-role, .adm-foot .adm-user { margin: 0; }
    .adm-foot-btn { margin-top: 0; }
    .adm-main { padding: 16px; }
}

/* home / content pages */
.pill {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 14px;
    border: 1px solid rgba(219, 185, 85, 0.35);
    border-radius: 999px;
    background: rgba(219, 185, 85, 0.08);
    color: var(--accent-gold);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* screenshot gallery on the home page (static/js/gallery.js) */
.gallery { position: relative; max-width: 900px; margin: 0 auto; }
.gallery-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    border-radius: 18px; border: 1px solid var(--border-color); background: #000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); scrollbar-width: none; outline: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { border-color: var(--accent-gold); }
.gallery-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.gallery-slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gallery-nav {
    position: absolute; top: calc(50% - 22px); transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    color: var(--text-primary); background: rgba(11, 15, 25, 0.72); border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px); transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.gallery-nav svg { width: 20px; height: 20px; }
.gallery-nav:hover { background: var(--accent-gold); color: #0b0f19; }
.gallery-nav.prev { left: 14px; }
.gallery-nav.next { right: 14px; }
.gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.gallery-dots button {
    position: relative; overflow: hidden; width: 9px; height: 9px; padding: 0; border-radius: 999px; border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.22); transition: width 0.3s, background 0.3s;
}
.gallery-dots button:hover { background: rgba(255, 255, 255, 0.4); }
/* the active dot is a timeline: it fills up until the gallery moves on (gallery.js listens for the animation's end).
   A CSS animation of transform runs on the compositor. scaleX, not translateX: the bar only travels 32px in 7s and a
   translated layer is snapped to whole pixels (a 1px jump every ~200ms), while a scaled one has a smooth sub-pixel edge.
   The button's overflow + border-radius keep the left end rounded. */
.gallery-dots button.active { width: 32px; background: rgba(219, 185, 85, 0.25); }
.gallery-dots button.active::after {
    content: ""; position: absolute; inset: 0; background: var(--accent-gold);
    transform-origin: left; transform: scaleX(0);
    animation: gallery-progress var(--gallery-autoplay, 7s) linear forwards;
}
.gallery.paused .gallery-dots button.active::after { animation-play-state: paused; }
@keyframes gallery-progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .gallery-track { scroll-behavior: auto; }
    .gallery-dots button.active::after { animation: none; transform: none; }
}

/* announcements (home page) */
.an-feed { display: flex; flex-direction: column; gap: 20px; max-width: 820px; margin: 0 auto; }
.an-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px 28px;
}
.an-card.pinned { border-color: rgba(219, 185, 85, 0.35); }
.an-meta { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 0.82rem; margin-bottom: 6px; }
.an-pin {
    padding: 2px 10px;
    border: 1px solid rgba(219, 185, 85, 0.35);
    border-radius: 999px;
    background: rgba(219, 185, 85, 0.08);
    color: var(--accent-gold);
    font-size: 0.75rem;
    font-weight: 600;
}
.an-card h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.an-card .an-text { margin-top: 10px; font-size: 0.97rem; color: #d1d5db; line-height: 1.65; }
.an-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 16px; }
.an-images a { display: block; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: #000; }
.an-images img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.2s ease; }
.an-images a:hover img { transform: scale(1.03); }
.an-images.single { grid-template-columns: 1fr; }
.an-images.single img { aspect-ratio: auto; max-height: 480px; object-fit: contain; }
.an-more { display: flex; justify-content: center; margin-top: 24px; }
.an-more:not(:has(button:not(.hidden))) { display: none; }
.an-more .btn-outline { font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 768px) {
    .an-card { padding: 18px 16px; }
    .an-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.steps-grid.steps-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(219, 185, 85, 0.12);
    border: 1px solid rgba(219, 185, 85, 0.4);
    color: var(--accent-gold);
    font-weight: 800;
    font-size: 0.95rem;
}
.inline-link { color: var(--accent-gold); text-decoration: none; }
.inline-link:hover { text-decoration: underline; }
.step-card .card-link + .card-link { margin-left: 14px; }

/* legal (privacy policy) */
.legal { max-width: 860px; margin: 0 auto; padding: 32px 36px; line-height: 1.75; }
.legal p, .legal ul { color: var(--text-secondary); margin-bottom: 14px; }
.legal strong { color: var(--text-primary); }
.legal h2 {
    font-size: 1.15rem;
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    scroll-margin-top: 20px;
}
.legal h3 { font-size: 0.98rem; margin: 18px 0 6px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a, .credits a:not(.btn-sm), .acknowledgements a { color: var(--accent-gold); text-decoration: none; }
.legal a:hover, .credits a:not(.btn-sm):hover { text-decoration: underline; }
.legal code { font-size: 0.85em; background: var(--bg-color); padding: 1px 6px; border-radius: 4px; color: var(--text-primary); }

/* credits */
.credits { max-width: 960px; display: flex; flex-direction: column; gap: 20px; }
.credit-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
}
.credit-card.primary { border-color: rgba(219, 185, 85, 0.35); background: linear-gradient(180deg, rgba(219, 185, 85, 0.06), var(--card-bg) 60%); }
.credit-card.secondary { border-color: rgba(88, 101, 242, 0.35); background: linear-gradient(180deg, rgba(88, 101, 242, 0.07), var(--card-bg) 60%); }
.credit-head {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color);
}
.credit-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.credits a.btn-discord, .credits a.btn-discord:hover { color: #ffffff; text-decoration: none; padding: 6px 12px; font-size: 0.85rem; }
.credit-person { display: flex; align-items: center; gap: 16px; min-width: 0; }
.credit-avatar { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border-color); flex-shrink: 0; }
.credit-card.contributor { border-color: rgba(45, 212, 191, 0.3); background: linear-gradient(180deg, rgba(45, 212, 191, 0.06), var(--card-bg) 60%); }
.credit-card.contributor .credit-role, .credit-card.contributor .tick { color: #5eead4; }
.credit-card.contributor .credit-avatar,
.credit-card.secondary .credit-avatar { width: 56px; height: 56px; border-radius: 14px; }
.credit-person h2 { font-size: 1.6rem; letter-spacing: -0.5px; }
.credit-person h3 { font-size: 1.3rem; }
.credit-role { font-size: 0.85rem; font-weight: 600; color: var(--accent-gold); }
.credit-card.secondary .credit-role { color: #a5b4fc; }
.contrib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contrib-item {
    display: flex; gap: 10px; align-items: flex-start;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.contrib-item strong { color: var(--text-primary); }
.contrib-item .tick { color: var(--accent-gold); font-weight: 800; flex-shrink: 0; }
.credit-card.secondary .tick { color: #a5b4fc; }
.credits-subtitle { font-size: 1.3rem; margin-top: 12px; }
.acknowledgements h3 { font-size: 1.05rem; margin-bottom: 8px; }
.acknowledgements p { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 12px; }
.acknowledgements ul { padding-left: 20px; color: var(--text-secondary); font-size: 0.9rem; }
.acknowledgements li { margin-bottom: 6px; }

/* 404 / 500 */
.error-page {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 80px 20px;
}
.error-code {
    font-size: clamp(6rem, 20vw, 10rem);
    font-weight: 800;
    letter-spacing: -4px;
    line-height: 1;
    color: var(--accent-gold);
    text-shadow: 0 0 40px rgba(219, 185, 85, 0.25);
    font-variant-numeric: tabular-nums;
}
.error-page h1 { font-size: 2rem; margin: 12px 0 8px; }
.error-page p { color: var(--text-secondary); max-width: 460px; margin-bottom: 28px; }

/* private feedback page */
.feedback-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; max-width: 1100px; margin: 0 auto; }
.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-wrap { max-width: 760px; margin: 0 auto; }
.contact-title { font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
.contact-lead { color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; }
.contact-req { color: #ef4444; }
.contact-discord { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 24px; border-radius: 16px;
    background: rgba(88, 101, 242, 0.1); border: 1px solid rgba(88, 101, 242, 0.35); }
.contact-discord-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(88, 101, 242, 0.25); color: #8c97ff; }
.contact-discord-icon svg { width: 24px; height: 24px; }
.contact-discord-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-discord-text span { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4; }
.contact-discord-btn { flex: none; padding: 10px 20px; border-radius: 10px; background: #5865f2; color: #fff; font-weight: 600;
    font-size: 0.9rem; text-decoration: none; }
.contact-discord-btn:hover { background: #4752c4; }
@media (max-width: 600px) { .contact-discord { flex-wrap: wrap; } .contact-discord-btn { width: 100%; text-align: center; } }
.pw-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.feedback-side { display: flex; flex-direction: column; gap: 16px; }
.feedback-side .card { padding: 20px; }
.feedback-side h3 { font-size: 1rem; margin-bottom: 6px; }
.feedback-side p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
.feedback-side a { color: var(--accent-gold); text-decoration: none; }
.feedback-side a:hover { text-decoration: underline; }

/* admin feedback inbox */
.fb-list { display: flex; flex-direction: column; gap: 12px; }
.fb-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-gold);
    border-radius: 12px;
    padding: 16px 18px;
}
.fb-item.read { border-left-color: var(--border-color); opacity: 0.8; }
.fb-item .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-item .fb-subject { font-weight: 700; overflow-wrap: anywhere; }
.fb-item .fb-from { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 0.82rem; color: var(--text-secondary); }
.fb-item .fb-from code { font-family: var(--mono); font-size: 0.75rem; background: var(--bg-color); padding: 1px 6px; border-radius: 4px; }
.fb-item .fb-msg {
    margin-top: 10px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 0.86rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.ov-icon.violet { color: #a78bfa; background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.3); }
.role-select { width: auto; padding: 6px 10px; font-size: 0.82rem; }

/* admin features + chat */
.error-item.ft-item { --ft-color: var(--text-secondary); border-left-color: var(--ft-color); }
.error-item.ft-item.ft-planned { --ft-color: var(--info); }
.error-item.ft-item.ft-in_progress { --ft-color: var(--accent-gold); }
.error-item.ft-item.ft-done { --ft-color: var(--success); opacity: 0.8; }
.error-item.ft-item.ft-rejected { --ft-color: var(--danger); opacity: 0.65; }
.error-item.ft-item.ft-rejected .title strong { text-decoration: line-through; }
.error-item.ft-item .title strong { color: var(--text-primary); }
.error-item.ft-item .ft-badge { color: var(--ft-color); }
/* features views: grid tiles or a list; both show titles only until unfolded (the item being edited stays open) */
.error-list.ft-grid { display: block; columns: 320px; column-gap: 10px; }  /* masonry: tiles pack with no gaps */
.error-list.ft-grid > * { break-inside: avoid; margin-bottom: 10px; }
.error-list.ft-grid .ft-item.editing { column-span: all; }
.error-list.ft-compact { gap: 6px; }
.error-list.ft-compact .ft-item { padding: 8px 14px; }
.error-list.ft-compact .ft-item .row { cursor: pointer; }
.error-list.ft-compact .ft-item.editing .row { cursor: default; }
.error-list.ft-compact .ft-item:not(.editing):not(.open) .ft-content,
.error-list.ft-compact .ft-item:not(.editing):not(.open) .err-meta { display: none; }
.error-list.ft-compact .ft-item.open { padding: 12px 14px; }
.ft-prio-select { width: auto; padding: 4px 8px; font-size: 0.8rem; }
.error-item.ft-item .ft-prio { color: var(--text-secondary); }
.error-item.ft-item.pr-high .ft-prio { color: var(--accent-gold); }
.error-item.ft-item.pr-urgent .ft-prio { color: var(--danger); font-weight: 600; }
.ft-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rich { margin-top: 6px; font-size: 0.92rem; overflow-wrap: anywhere; }
.msg .text.rich { margin-top: 2px; white-space: normal; }
.rich .rich-p + *, .rich ul + *, .rich ol + * { margin-top: 4px; }
.rich ul, .rich ol { margin: 0; padding-left: 1.4em; }
.rich li + li, .rich li > ul, .rich li > ol { margin-top: 2px; }
.rich ul.checklist { list-style: none; padding-left: 0.2em; }
.rich li > ul.checklist { padding-left: 1.4em; }
.rich ul.checklist label { display: inline-flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.rich ul.checklist input { margin-top: 0.25em; accent-color: var(--success); cursor: pointer; flex-shrink: 0; }
.rich ul.checklist input:disabled { cursor: default; }
.rich ul.checklist li.done > label span { text-decoration: line-through; color: var(--muted); }
.cmp-help { margin: 0 0 0 4px; align-self: center; }
.cmp-size { width: auto; padding: 4px 8px; font-size: 0.8rem; }
/* Discord-like markdown (PW.richText) */
.rich strong { font-weight: 700; color: var(--text-primary); }
.rich code { font-family: ui-monospace, Consolas, monospace; font-size: 0.88em; padding: 1px 5px; border-radius: 4px; background: var(--bg-tertiary, rgba(127, 127, 127, 0.15)); }
.rich .rich-h { font-weight: 700; line-height: 1.3; color: var(--text-primary); margin: 10px 0 4px; }
.rich .rich-h:first-child { margin-top: 0; }
.rich .rich-h1 { font-size: 1.5em; }
.rich .rich-h2 { font-size: 1.25em; }
.rich .rich-h3 { font-size: 1.08em; }
.rich .rich-q { border-left: 3px solid var(--border-color); padding-left: 10px; color: var(--text-secondary); }

/* rich text from the editor (Admin Features) */
.rich p, .rich div { margin: 0; }
.rich ul { list-style-type: disc; }
.rich ul ul, .rich ol ul { list-style-type: circle; }
.rich ul ul ul, .rich ol ul ul, .rich ul ol ul { list-style-type: square; }
.rich ul, .rich ol { margin: 2px 0; padding-left: 1.6em; }
.rich ul ul, .rich ul ol, .rich ol ul, .rich ol ol { margin: 0; }
.rich img { display: block; max-width: min(100%, 640px); max-height: 420px; border-radius: 8px; border: 1px solid var(--border-color); margin: 6px 0; cursor: zoom-in; }
.rich a { color: var(--accent-gold); }
.rich blockquote { border-left: 3px solid var(--border-color); padding-left: 10px; color: var(--text-secondary); }
.rich ul.checklist { list-style: none; padding-left: 0.2em; }
.rich ul.checklist ul.checklist { padding-left: 1.6em; }
.rich ul.checklist > li { position: relative; padding-left: 1.6em; }
.rich ul.checklist > li::before {
    content: ""; position: absolute; left: 0; top: 0.3em; width: 1.25em; height: 1.25em; box-sizing: border-box;
    border: 1.5px solid var(--text-secondary); border-radius: 3px; cursor: pointer;
    font-size: 0.8em; line-height: 1.05em; text-align: center; font-weight: 700;
}
.rich ul.checklist > li[data-checked="true"]::before { content: "✓"; background: var(--success); border-color: var(--success); color: #0b0f19; }
.rich ul.checklist > li[data-checked="true"] { color: var(--muted); text-decoration: line-through; }
.ft-body { margin-top: 8px; }
.ed { border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-color); }
.ed:focus-within { border-color: var(--accent-gold); }
.ed.uploading .ed-area { opacity: 0.7; cursor: progress; }
.ed-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border-bottom: 1px solid var(--border-color); }
.ed-btn { background: none; border: 1px solid transparent; border-radius: 6px; color: var(--text-secondary); font: inherit; font-size: 0.82rem; padding: 4px 9px; cursor: pointer; }
.ed-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); border-color: var(--border-color); }
.ed-sep { width: 1px; align-self: stretch; background: var(--border-color); margin: 2px 4px; }
.ed-area { min-height: 140px; max-height: 70vh; overflow-y: auto; padding: 12px 14px; outline: none; font-size: 0.92rem; margin-top: 0; }
.ed-area img { cursor: default; }
.ed-area:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.ft-edit.ed { border: 0; background: none; }
.ft-edit .ed-tools { border: 1px solid var(--border-color); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--bg-color); }
.ft-edit .ed-area { border: 1px solid var(--border-color); border-radius: 0 0 10px 10px; background: var(--bg-color); }
.ft-edit .ed-area:focus { border-color: var(--accent-gold); }
.ft-edit .pw-input { margin-bottom: 4px; }

/* editor in full screen: the form / the tile's editor fills the window */
body.ed-fullscreen-open { overflow: hidden; }
.ed-fullscreen {
    position: fixed; inset: 0; z-index: 90; margin: 0 !important;
    display: flex; flex-direction: column; gap: 10px;
    padding: 24px max(24px, calc((100vw - 960px) / 2));
    background: var(--bg-color); border-radius: 0 !important; overflow-y: auto;
}
.ed-fullscreen > .ed, .ed-fullscreen.ed { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ed-fullscreen .ed-area { flex: 1; max-height: none; font-size: 1rem; line-height: 1.6; }
.ed-fullscreen .ed-tools { position: sticky; top: 0; z-index: 1; background: var(--bg-color); border-radius: 10px 10px 0 0; }
.ed-fullscreen .btn-row { flex-shrink: 0; }
/* the plain-text composer (announcements) in full screen: the text box takes the free height */
.ed-fullscreen > .cmp { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ed-fullscreen > .cmp textarea { flex: 1; min-height: 200px !important; resize: none; font-size: 1rem; line-height: 1.6; }
.ed-fullscreen .cmp-tools { position: sticky; top: 0; z-index: 1; background: var(--bg-color); }
.ft-edit.ed.ed-fullscreen { background: var(--bg-color); }  /* .ft-edit.ed drops the background otherwise */
.error-item.ft-item:has(.ed-fullscreen) { opacity: 1; }  /* done / rejected tiles are faded, the editor shouldn't be */
.ed-btn.active { color: var(--accent-gold); border-color: rgba(219, 185, 85, 0.4); }
.att-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.att-grid a { display: block; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.att-grid img { display: block; max-width: 220px; max-height: 160px; object-fit: cover; }
.cmp-tools { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.cmp-images { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cmp-images:not(:empty) { margin-top: 8px; }
.cmp-thumb { position: relative; display: block; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.cmp-thumb img { display: block; width: 72px; height: 72px; object-fit: cover; }
.cmp-thumb button {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.85rem; line-height: 1; cursor: pointer;
}
.cmp-thumb button:hover { background: var(--danger); }
.admin-chat-msgs { max-height: 62vh; min-height: 240px; }

/* admin errors */
.error-list { display: flex; flex-direction: column; gap: 10px; }
.ea-list { display: flex; flex-direction: column; gap: 10px; }
.ea-item { border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; }
.ea-item.muted { opacity: 0.7; }
.ea-item .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.ea-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ea-chips .pw-hint { margin-top: 0; }
.ea-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}
.ea-chip button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.ea-chip button:hover { color: var(--danger); }
.ea-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 10px; }
.error-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--danger);
    border-radius: 10px;
    padding: 14px 16px;
}
.error-item.resolved { border-left-color: var(--muted); opacity: 0.75; }
.error-item.an-editing { border-color: rgba(219, 185, 85, 0.5); opacity: 1; }
.error-item .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.error-item .title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.error-item .title strong { color: var(--danger); }
.error-item.resolved .title strong { color: var(--text-secondary); }
.error-item .err-msg { margin-top: 6px; font-size: 0.92rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.error-item .err-meta { margin-top: 6px; font-size: 0.8rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.error-item details { margin-top: 10px; }
.error-item summary { cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); }
.error-item pre {
    margin-top: 8px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 360px;
    color: #e5e7eb;
}
.adm-nav .count.alert-count { background: rgba(248, 113, 113, 0.18); color: var(--danger); }

@media (max-width: 1100px) {
    nav ul { flex-wrap: wrap; white-space: normal; }
    .tickets-layout, .feedback-wrap { grid-template-columns: 1fr; }
    .tickets-form { position: static; }
}
@media (max-width: 768px) {
    .tickets-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contrib-grid, .fb-row { grid-template-columns: 1fr; }
    .gallery-track { border-radius: 12px; }
    .gallery-nav { display: none; }
    .legal { padding: 22px 18px; }
    .credit-card { padding: 20px; }
    .modal-head, .modal-body { padding-left: 16px; padding-right: 16px; }
    .msg { max-width: 100%; }
}

/* embed builder */
.ov-icon.blurple { color: #8b93f8; background: rgba(88, 101, 242, 0.12); border-color: rgba(88, 101, 242, 0.35); }
/* direct messages */
.dm-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.dm-side, .dm-chat { padding: 20px; }
.dm-results:not(:empty) { margin-top: 8px; }
.dm-list { max-height: 55vh; }
button.eb-item { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; justify-content: flex-start; }
button.eb-item:hover, button.eb-item.active { border-color: rgba(219, 185, 85, 0.45); }
.dm-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.dm-chat .tk-msgs { max-height: 55vh; min-height: 120px; }
@media (max-width: 900px) { .dm-layout { grid-template-columns: 1fr; } }

/* moderation */
.mod-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; font-size: 0.9rem; }
.mod-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.mod-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.mod-actions .btn-row { align-items: center; }
.mod-actions .pw-select, .mod-actions .pw-input { width: auto; flex: 1 1 160px; min-width: 0; }
.mod-warnings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-height: 240px; overflow-y: auto; }
.mod-warning { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.9rem; overflow-wrap: anywhere; }
.mod-warning .tid { color: var(--muted); font-variant-numeric: tabular-nums; }
.warn-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.9rem; }
.warn-rule .pw-input[type="number"] { width: 80px; }
.warn-rule .pw-select { width: auto; }

/* welcome, faq */
.wl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; align-items: start; }
.faq-answer { white-space: pre-wrap; max-height: 4.8em; overflow: hidden; }

/* downloads */
.dl-file { display: grid; grid-template-columns: 1fr 2fr 120px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.dl-link { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 768px) { .dl-file, .dl-link { grid-template-columns: 1fr; } }
.dl-preview-card { position: sticky; top: 20px; }
.dc-note { margin-top: 8px; font-size: 0.75rem; color: #949ba4; }
.dc-container { margin-top: 4px; max-width: 600px; background: #2b2d31; border: 1px solid #3f4147; border-left: 4px solid #ffcc00; border-radius: 8px; padding: 14px 16px; font-size: 0.875rem; }
.dc-text { overflow-wrap: anywhere; }
.dc-text + .dc-text { margin-top: 8px; }
.dc-text .dc-h2 { margin-top: 0; }
.dc-text .dc-code { white-space: pre-wrap; }
.dc-sep { border: 0; border-top: 1px solid #3f4147; margin: 10px 0; }
.dc-subtext { margin-top: 12px; font-size: 0.75rem; color: #949ba4; }
.dc-container .dc-buttons { margin-top: 10px; }
.dc-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc-btn { display: inline-flex; align-items: center; gap: 6px; background: #4e5058; color: #fff; font-size: 0.85rem; font-weight: 500; padding: 6px 14px; border-radius: 4px; text-decoration: none; }
.dc-btn:hover { background: #6d6f78; }
.dc-btn svg { width: 14px; height: 14px; }

/* automod */
.am-exempt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.am-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 26px; align-items: center; }
.am-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-color); font-size: 0.82rem; }
.am-chip button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.am-chip button:hover { color: var(--danger); }
.am-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
.am-filter { padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: opacity 0.2s ease; }
/* dim the content, not the card itself, or the page background shows through the card */
.am-filter > * { transition: opacity 0.2s ease; }
.am-filter.off > :not(.am-filter-head) { opacity: 0.55; }
.am-filter.off:focus-within > *, .am-filter.off:hover > * { opacity: 1; }
.am-filter-head { font-size: 1rem; color: var(--text-primary); }
.am-icon { font-size: 1.3rem; line-height: 1; }
.am-desc { margin-top: -4px; }
.am-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.am-fields > :has(.am-list), .am-fields > .pw-check { grid-column: 1 / -1; }
.am-list { min-height: 90px; font-family: var(--mono); font-size: 0.85rem; }
.am-action-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.am-save {
    position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 14px; margin-top: 20px;
    padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 12px;
    background: rgba(14, 12, 18, 0.82); backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.am-raid { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.am-table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.am-content { margin-top: 4px; font-size: 0.82rem; color: var(--muted); white-space: pre-wrap; word-break: break-word; max-height: 4.5em; overflow: hidden; }
.am-hit { color: var(--danger); }
.am-ok { color: var(--success); }

.eb-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.eb-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.eb-side .card, .eb-form { padding: 20px; }
.eb-channel-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 16px; }
.eb-channel-row .pw-input { flex: 1; }
.eb-section {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin: 22px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
.eb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.eb-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.eb-color { display: flex; gap: 8px; }
.eb-color input[type="color"] { width: 46px; height: 42px; padding: 2px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-color); cursor: pointer; }
.eb-fields-head { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.eb-fields-head .eb-section { border: 0; padding: 0; }
.eb-field { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.eb-field-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.eb-card-head { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; }
.eb-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.eb-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: rgba(0, 0, 0, 0.2); }
.eb-item-main { display: flex; flex-direction: column; min-width: 0; }
.eb-item-main strong { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.qbtn { text-decoration: none; display: inline-flex; align-items: center; }
.qbtn:disabled { opacity: 0.4; cursor: not-allowed; }

/* discord message preview */
.eb-preview-card { background: #313338; border-color: #3f4147; }
.eb-preview-card .eb-card-head { color: #b5bac1; }
.dc-msg { display: flex; gap: 14px; font-family: 'Inter', 'gg sans', sans-serif; color: #dbdee1; font-size: 0.94rem; line-height: 1.375; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.dc-body { min-width: 0; flex: 1; }
.dc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.dc-name { color: #f2f3f5; font-weight: 600; }
.dc-app { background: #5865f2; color: #fff; font-size: 0.62rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.dc-time { color: #949ba4; font-size: 0.75rem; }
.dc-content { white-space: normal; overflow-wrap: anywhere; margin-bottom: 4px; }
.dc-embed {
    margin-top: 4px;
    max-width: 520px;
    background: #2b2d31;
    border-left: 4px solid #ffcc00;
    border-radius: 4px;
    padding: 10px 16px 14px 12px;
}
.dc-embed-grid { display: flex; gap: 16px; }
.dc-embed-main { min-width: 0; flex: 1; }
.dc-author { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: #f2f3f5; margin-top: 6px; }
.dc-author a { color: #f2f3f5; }
.dc-author-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.dc-title { font-weight: 700; color: #f2f3f5; margin-top: 8px; overflow-wrap: anywhere; }
.dc-title a { color: #00a8fc; text-decoration: none; }
.dc-title a:hover { text-decoration: underline; }
.dc-desc { margin-top: 8px; font-size: 0.875rem; overflow-wrap: anywhere; }
.dc-desc a, .dc-field-value a, .dc-content a { color: #00a8fc; text-decoration: none; }
.dc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-top: 8px; }
.dc-field { grid-column: 1 / -1; min-width: 0; }
.dc-field.inline { grid-column: span 1; }
.dc-field-name { font-weight: 600; font-size: 0.85rem; color: #f2f3f5; margin-bottom: 2px; overflow-wrap: anywhere; }
.dc-field-value { font-size: 0.85rem; overflow-wrap: anywhere; }
.dc-thumb { width: 80px; height: 80px; object-fit: contain; border-radius: 4px; flex-shrink: 0; margin-top: 8px; }
.dc-image { display: block; max-width: 100%; max-height: 300px; border-radius: 4px; margin-top: 16px; object-fit: contain; }
.dc-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.75rem; color: #b5bac1; }
.dc-footer-icon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.dc-msg code { background: #1e1f22; padding: 1px 4px; border-radius: 4px; font-family: var(--mono); font-size: 0.85em; }
.dc-code { background: #1e1f22; border: 1px solid #1e1f22; border-radius: 4px; padding: 8px; margin: 6px 0; font-family: var(--mono); font-size: 0.8rem; white-space: pre-wrap; }
.dc-mention { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; }
.dc-spoiler:hover { color: inherit; }
.dc-quote { display: block; border-left: 4px solid #4e5058; padding-left: 10px; }
.dc-h1, .dc-h2, .dc-h3 { display: block; font-weight: 700; color: #f2f3f5; margin: 6px 0 2px; }
.dc-h1 { font-size: 1.4rem; }
.dc-h2 { font-size: 1.2rem; }
.dc-h3 { font-size: 1rem; }
.dc-li { display: block; }
.dc-empty { color: #949ba4; font-style: italic; margin-top: 6px; }

@media (max-width: 1200px) {
    .eb-layout { grid-template-columns: 1fr; }
    .eb-side { position: static; }
}
@media (max-width: 600px) {
    .eb-grid, .eb-grid.three { grid-template-columns: 1fr; }
}

/* custom commands */
.cc-name-row { display: flex; align-items: center; gap: 6px; }
.cc-name-row .cc-prefix { font-family: var(--mono); font-weight: 700; color: var(--accent-gold); }

/* administrators: one tick box per panel section */

/* colours for the error, crash and settings sections: one tone per category, so it is not all gold */
.ov-icon.teal { color: #2dd4bf; background: rgba(45, 212, 191, 0.1); border-color: rgba(45, 212, 191, 0.3); }
.ov-icon.orange { color: #fb923c; background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.3); }
.badge.crash { color: var(--danger); }
.badge.cat-server_crash { color: #fb923c; }
:is(.error-item, .ea-item)[data-cat] { --tone: var(--text-secondary); border-left: 3px solid var(--tone); }
:is(.error-item, .ea-item)[data-cat="website"] { --tone: var(--info); }
:is(.error-item, .ea-item)[data-cat="bot"] { --tone: #8b93f8; }
:is(.error-item, .ea-item)[data-cat="server"] { --tone: var(--success); }
:is(.error-item, .ea-item)[data-cat="status"] { --tone: #2dd4bf; }
:is(.error-item, .ea-item)[data-cat="crash"] { --tone: var(--danger); }
:is(.error-item, .ea-item)[data-cat="server_crash"] { --tone: #fb923c; }
.ea-item[data-cat] strong { color: var(--tone); }
.card.tone-teal { border-top: 3px solid #2dd4bf; }
.card.tone-violet { border-top: 3px solid #a78bfa; }
.card.tone-teal .pw-check input, .card.tone-teal .seg button.active { accent-color: #2dd4bf; }
.card.tone-violet .pw-check input { accent-color: #a78bfa; }

/* administrators: grouped, coloured access tiles with one master switch */
.perm-grid { display: flex; flex-direction: column; gap: 14px; }
.admin-table .perm-grid { min-width: 340px; }
.perm-master, .perm-tile {
    --tone: var(--accent-gold);
    position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: start;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border-color);
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.perm-master input, .perm-tile input { position: absolute; opacity: 0; pointer-events: none; }
.perm-master:has(input:focus-visible), .perm-tile:has(input:focus-visible) { outline: 2px solid var(--tone); outline-offset: 2px; }
.perm-master { --tone: #f472b6; }
.pt-name { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.pt-desc { grid-column: 1; font-size: 0.76rem; line-height: 1.35; color: var(--text-secondary); }
.pt-state { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border-color); color: var(--muted); }
.pt-state::before { content: "Off"; }
:is(.perm-master, .perm-tile):has(input:checked) { border-color: color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 9%, var(--surface-2)); }
:is(.perm-master, .perm-tile):has(input:checked) .pt-state { color: var(--tone); border-color: color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 14%, transparent); }
:is(.perm-master, .perm-tile):has(input:checked) .pt-state::before { content: "Enabled"; }
:is(.perm-master, .perm-tile):not(:has(input:checked)) { opacity: 0.8; }
:is(.perm-master, .perm-tile):has(input:disabled) { cursor: not-allowed; opacity: 0.5; }
.perm-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.perm-tag { font-family: var(--mono); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 5px;
    color: var(--tone); border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.perm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
/* administrators: add form on the side, pick an admin from the chips, tiles of their access below */
.admins-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-side { position: sticky; top: 16px; }
.admin-side-title { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary); }
.admin-side-title svg { width: 18px; height: 18px; color: var(--accent-gold); }
.admin-side-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.admin-side-form .pw-label { font-family: var(--mono); font-size: 0.7rem; }
.admin-side-form .pw-hint { font-family: var(--mono); font-size: 0.7rem; margin-top: 6px; }
.admin-main-title { font-family: var(--mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-gold); margin-bottom: 14px; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); }
.adm-chip { --tone: #60a5fa; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; cursor: pointer;
    font-family: var(--mono); font-size: 0.78rem; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border-color); }
.adm-chip.tone-gold { --tone: var(--accent-gold); }
.adm-chip.tone-grey { --tone: #9ca3af; }
.adm-chip:hover { border-color: color-mix(in srgb, var(--tone) 60%, transparent); }
.adm-chip.active { color: var(--tone); border-color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--surface-2)); }
.adm-detail { padding-top: 16px; }
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adm-head .name { font-size: 1.05rem; font-weight: 700; }
.adm-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; margin: 16px 0 6px; font-size: 0.88rem; overflow-wrap: anywhere; }
.adm-meta .pw-label { font-family: var(--mono); font-size: 0.68rem; margin-bottom: 4px; }
.adm-note { margin-top: 16px; padding: 14px 16px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent); background: rgba(219, 185, 85, 0.07); font-size: 0.9rem; }
.adm-detail .perm-grid { margin-top: 18px; }
.perm-master, .perm-tile, .perm-group-head { font-family: var(--mono); }
@media (max-width: 980px) {
    .admins-layout { grid-template-columns: 1fr; }
    .admin-side { position: static; }
}

/* panel background, chosen in Settings -> Appearance (the cat is the default) */
body.admin-body[data-bg="gamer"] {
    --admin-bg: url("/static/backgrounds/gamer.webp");
    --admin-bg-blur: url("/static/backgrounds/gamer-still.webp"); /* a still frame: blurring an animation every frame is heavy */
}
body.admin-body[data-bg="none"] { --admin-bg-blur: none; }
body.admin-body[data-bg="none"]::after { display: none; }
.bg-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.bg-option { --tone: #2dd4bf; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 12px; cursor: pointer; text-align: left;
    font-family: var(--mono); color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border-color); }
.bg-option:hover { border-color: color-mix(in srgb, var(--tone) 60%, transparent); }
.bg-option.active { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, var(--surface-2)); color: var(--text-primary); }
.bg-thumb { height: 110px; border-radius: 8px; background: #0b0f19 center / cover no-repeat; border: 1px solid var(--border-color); }
.bg-thumb.plain { background: radial-gradient(ellipse at center, #121826 0%, #050508 100%); }
.bg-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; font-weight: 700; }
.bg-label .pt-state { align-self: auto; }
.bg-option.active .bg-label .pt-state::before { content: "Selected"; }
.bg-option .bg-label .pt-state::before { content: "Use"; }
.bg-option.active .bg-label .pt-state { color: var(--tone); border-color: color-mix(in srgb, var(--tone) 55%, transparent); }
.bg-option:disabled { cursor: not-allowed; opacity: 0.75; }
.bg-option:disabled:not(.active) .bg-thumb { filter: grayscale(0.5); }

/* GIFs and images in the Messages tab */
.dm-media { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dm-media img, .dm-media video { display: block; max-width: min(320px, 100%); max-height: 260px; border-radius: 10px; background: var(--surface-2); }
.dm-pending { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dm-pending:empty { display: none; }
.dm-pending-item { position: relative; display: inline-block; }
.dm-pending-item img { display: block; height: 64px; max-width: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color); }
.dm-pending-item button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--danger); color: #fff; font-size: 0.85rem; line-height: 1; }
#dm-chat .tk-reply-row { align-items: center; justify-content: space-between; gap: 10px; }

/* Discord-style composer of the DM view: one rounded bar, GIF + emoji buttons on the right, one popover above it */
.dm-composer {
    position: relative; display: flex; align-items: flex-end; gap: 4px;
    padding: 6px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.dm-composer:focus-within { border-color: var(--text-secondary); }
.dm-composer textarea {
    flex: 1; min-width: 0; min-height: 36px; max-height: 160px; resize: none;
    padding: 8px 4px; border: 0; outline: 0; background: transparent;
    color: var(--text-primary); font: inherit; font-size: 0.95rem; line-height: 1.4;
}
.dm-tools { display: flex; align-items: center; gap: 2px; }
.dm-ico {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 6px; border: 0; border-radius: 6px;
    background: transparent; color: var(--text-secondary); cursor: pointer;
}
.dm-ico:hover, .dm-ico[aria-expanded="true"] { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.dm-gif-btn { font-family: var(--mono); font-size: 0.68rem; font-weight: 800; }
.dm-pop {
    position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30;
    width: min(440px, calc(100vw - 32px)); max-height: 420px; overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
}
.dm-pop.emoji { width: min(340px, calc(100vw - 32px)); padding: 6px 10px 10px; }
.emoji-group { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--text-secondary); margin: 10px 2px 4px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-grid button { background: none; border: 0; border-radius: 6px; font-size: 1.35rem; line-height: 1; padding: 6px 0; cursor: pointer; }
.emoji-grid button:hover { background: rgba(255, 255, 255, 0.08); }
.gif-search {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; background: var(--card-bg); color: var(--text-secondary);
}
.gif-search input {
    flex: 1; padding: 9px 12px; border-radius: 8px; border: 2px solid var(--border-color);
    background: var(--surface-2); color: var(--text-primary); font: inherit; font-size: 0.92rem; outline: 0;
}
.gif-search input:focus { border-color: var(--accent-gold); }
.gif-body { padding: 4px 12px 12px; }
.gif-msg { padding: 14px 2px; }
.gif-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gif-cat {
    position: relative; height: 110px; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer;
    background: var(--surface-2) center / cover no-repeat; color: #fff; font-weight: 700; font-size: 1rem;
}
.gif-cat::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); transition: background 0.15s; }
.gif-cat:hover::before { background: rgba(0, 0, 0, 0.25); }
.gif-cat span { position: relative; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.gif-cat[data-gif-favs] { background: #7c83fd; }
.gif-cat[data-gif-favs]::before { background: transparent; }
.gif-grid { columns: 2; column-gap: 6px; }
.gif-item { position: relative; break-inside: avoid; margin-bottom: 6px; }
.gif-item > button:first-child { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--surface-2); }
.gif-item img { display: block; width: 100%; height: auto; }
.gif-item:hover > button:first-child { outline: 2px solid var(--accent-gold); }
.gif-fav {
    position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 6px; cursor: pointer;
    background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.95rem; line-height: 1; opacity: 0;
}
.gif-item:hover .gif-fav, .gif-fav.on { opacity: 1; }
.gif-fav.on { color: var(--accent-gold); }
.gif-more { display: block; margin: 8px auto 0; justify-content: center; }
img.dm-emoji { width: 1.4em; height: 1.4em; vertical-align: -0.3em; display: inline-block; }

/* ================================================================
   Panel style "mcr": the main control room of a Soviet reactor (Settings > Panel style)
   Teal wall, black mnemonic screens with cyan glyphs, red/white lamps, alarm annunciators
   ================================================================ */
.annunciator { display: none; }
.bg-thumb.mcr {
    background:
        linear-gradient(rgba(46, 230, 208, 0.16) 1px, transparent 1px) 0 0 / 14px 14px,
        linear-gradient(90deg, rgba(46, 230, 208, 0.16) 1px, transparent 1px) 0 0 / 14px 14px,
        #030809;
    border-color: #1b6f73;
    box-shadow: inset 0 0 0 6px #4a7173;
}
.bg-options.locked { opacity: 0.45; }
.bg-options.locked .bg-option { cursor: not-allowed; }

body.admin-body[data-style="mcr"] {
    --bg-color: #3b5d60;
    --card-bg: #030809;
    --surface-2: #08161a;
    --border-color: #1b6f73;
    --text-primary: #d3fff7;
    --text-secondary: #6fc4bb;
    --muted: #4f8f8a;
    --accent-gold: #2ee6d0;
    --accent-gold-hover: #1fb9a7;
    --danger: #ff4d4d;
    --success: #35e08a;
    --warning: #ffd23f;
    --info: #2ee6d0;
    background-color: #3b5d60;
    background-image:
        radial-gradient(ellipse 900px 500px at 30% 0%, rgba(160, 220, 215, 0.18), transparent 70%),
        radial-gradient(ellipse 800px 600px at 100% 100%, rgba(0, 0, 0, 0.35), transparent 70%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #4a7173 0%, #3b5d60 45%, #2c4749 100%);
}
body.admin-body[data-style="mcr"]::before,
body.admin-body[data-style="mcr"]::after { display: none; }

body.admin-body[data-style="mcr"] .adm-side {
    background: #050c0d;
    backdrop-filter: none;
    border-right: 4px solid #0d2224;
    box-shadow: inset -1px 0 0 #1b6f73;
}
body.admin-body[data-style="mcr"] .adm-nav button.active {
    color: #031012; background: #2ee6d0; border-color: #2ee6d0;
    box-shadow: 0 0 12px rgba(46, 230, 208, 0.45);
}
body.admin-body[data-style="mcr"] .card,
body.admin-body[data-style="mcr"] .ov-card,
body.admin-body[data-style="mcr"] .error-item {
    background:
        linear-gradient(rgba(46, 230, 208, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgba(46, 230, 208, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
        #030809;
    border: 1px solid #1b6f73;
    border-radius: 3px;
    box-shadow: inset 0 0 22px rgba(46, 230, 208, 0.07), 0 0 0 4px #0b1517, 0 0 0 5px #2a4a4c;
}
body.admin-body[data-style="mcr"] .card h2,
body.admin-body[data-style="mcr"] .ov-card h3,
body.admin-body[data-style="mcr"] .adm-head h1 {
    font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: #2ee6d0;
    text-shadow: 0 0 8px rgba(46, 230, 208, 0.5);
}
body.admin-body[data-style="mcr"] .adm-head h1 { color: #e9fffb; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
body.admin-body[data-style="mcr"] .adm-head p { color: #cfe9e5; }
body.admin-body[data-style="mcr"] .error-item.resolved { opacity: 0.6; }
body.admin-body[data-style="mcr"] .error-item[data-cat="crash"],
body.admin-body[data-style="mcr"] .error-item[data-cat="server_crash"] { border-color: #b3202a; box-shadow: inset 0 0 22px rgba(255, 60, 60, 0.12), 0 0 0 4px #0b1517, 0 0 0 5px #5a2a2c; }

/* alarm annunciator: a panel of lit windows */
body.admin-body[data-style="mcr"] .annunciator {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px;
    padding: 10px; margin-bottom: 20px;
    background: #0b1517; border: 1px solid #2a4a4c; border-radius: 3px;
}
.mimic { display: none; }
body.admin-body[data-style="mcr"] .mimic {
    display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px;
}
body.admin-body[data-style="mcr"] .ov-ann { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 14px; margin-bottom: 0; }
.ov-ann-head { grid-column: 1 / -1; min-height: 40px; }
/* black mnemonic screen: pipes and symbols; green = working, grey = off (still visible), red = fault */
.mn-panel {
    padding: 16px 12px; background: #020606; border: 1px solid #1b4a4c; border-radius: 3px;
    box-shadow: inset 0 0 26px rgba(61, 240, 140, 0.05), 0 0 0 4px #0b1517, 0 0 0 5px #2a4a4c;
}
.mn-panel svg { display: block; width: 100%; height: auto; }
.mn-pipe { fill: none; stroke: #6f8a87; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.mn-pipe.on { stroke: #3df08c; filter: drop-shadow(0 0 3px rgba(61, 240, 140, 0.7)); }
.mn-label { font: 700 14px var(--mono); letter-spacing: 0.06em; }
.mn-sym .mn-core, .mn-sym .mn-ring { stroke-width: 2; }
.mn-bar { stroke-width: 3; stroke-linecap: square; }
.mn-on .mn-core { fill: #3df08c; stroke: #3df08c; } .mn-on .mn-ring { fill: none; stroke: #3df08c; } .mn-on .mn-bar { stroke: #3df08c; }
.mn-off .mn-core { fill: #4c5f5d; stroke: #8da5a2; } .mn-off .mn-ring { fill: none; stroke: #8da5a2; } .mn-off .mn-bar { stroke: #8da5a2; }
.mn-fault .mn-core { fill: #ff4d4d; stroke: #ff4d4d; } .mn-fault .mn-ring { fill: none; stroke: #ff4d4d; } .mn-fault .mn-bar { stroke: #ff4d4d; }
.mn-on { filter: drop-shadow(0 0 3px rgba(61, 240, 140, 0.85)); }
.mn-fault { filter: drop-shadow(0 0 3px rgba(255, 77, 77, 0.9)); animation: mn-blink 0.9s steps(2, jump-none) infinite; }
@keyframes mn-blink { 50% { opacity: 0.25; } }
.mn-fault.acked { animation: none; }
@media (prefers-reduced-motion: reduce) { .mn-fault { animation: none; } }
.mn-t-on { fill: #8dffc2; } .mn-t-off { fill: #98b0ad; } .mn-t-fault { fill: #ff9a9a; }

/* tiles of the annunciator, like the lamp panels of the real control room */
.mm-tile {
    min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 10px 14px; text-align: center; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.55);
    font-family: var(--mono); text-transform: uppercase; line-height: 1.15;
}
.mm-name { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.mm-sub { font-size: 0.78rem; font-weight: 700; opacity: 0.85; }
.mm-head { background: #e9e6d2; color: #14201f; box-shadow: 0 0 14px rgba(255, 250, 220, 0.4); }
.mm-on { background: #cfd9d6; color: #0f1a19; box-shadow: 0 0 12px rgba(220, 255, 250, 0.35); }
.mm-clear { background: #aeb9b6; color: #243331; }
.mm-off { background: #6d6a12; color: #2b2907; }
.mm-warn { background: #f4e63a; color: #1c1900; box-shadow: 0 0 18px rgba(255, 238, 60, 0.7); }
.mm-fault { background: #d4232b; color: #fff1ee; box-shadow: 0 0 18px rgba(255, 60, 60, 0.7); }
.mm-tile.blink { animation: mm-blink 0.9s steps(2, jump-none) infinite; }
@keyframes mm-blink { 50% { filter: brightness(0.45); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .mm-tile.blink { animation: none; } }

/* C = sound, X = blinking (control-room style only) */
.mcr-keys { display: none; gap: 8px; }
body.admin-body[data-style="mcr"] .mcr-keys { display: inline-flex; }
.mcr-keys kbd { padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; font-size: 0.7rem; }

/* Hierarchy */
.hier-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.hier-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hier-tree { display: flex; flex-direction: column; align-items: stretch; max-width: 760px; margin: 8px auto 0; }
.hier-tier { border: 1px solid var(--tone, var(--info)); border-left-width: 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); padding: 14px 16px; }
.hier-link { width: 2px; height: 18px; margin: 0 auto; background: rgba(255, 255, 255, 0.18); }
.hier-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hier-level { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tone, var(--info)); color: #101114; font-weight: 700; font-size: 0.8rem; flex: none; }
.hier-title { margin: 0; font-size: 1.05rem; color: var(--tone, var(--text-primary)); }
.hier-name { flex: 1; min-width: 140px; }
.hier-color { width: 38px; height: 34px; padding: 2px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; background: transparent; cursor: pointer; }
.hier-tools { display: inline-flex; gap: 6px; }
.hier-desc { margin-top: 10px; }
.hier-desc-text { margin: 8px 0 0; color: var(--text-secondary); font-size: 0.9rem; }
.hier-members { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.hier-member { display: inline-flex; flex-direction: column; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); font-size: 0.9rem; }
.hier-member span { color: var(--text-secondary); font-size: 0.78rem; }
.hier-member.edit { flex-direction: row; align-items: center; gap: 6px; padding: 4px; width: 100%; background: transparent; }
.hier-member.edit .pw-input { flex: 1; min-width: 0; }
.hier-empty { padding: 28px; text-align: center; color: var(--text-secondary); border: 1px dashed rgba(255, 255, 255, 0.15); border-radius: 10px; }
@media (max-width: 600px) { .hier-member.edit { flex-wrap: wrap; } .hier-tools { width: 100%; } }

/* Home page screenshots (Settings > Global settings) */
.shot-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.shot-upload { cursor: pointer; }
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.shot-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.shot-thumb { display: block; border-radius: 6px; overflow: hidden; background: #000; }
.shot-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shot-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--accent-gold); color: #101114; font-weight: 700; font-size: 0.78rem; }
.shot-tools { margin-left: auto; display: inline-flex; gap: 6px; }
.shot-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }