body.modal-open {
    overflow: hidden;
}
.ticket-prio-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-family: "Exo 2", sans-serif;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

:root {
    --bg: #0a0b0d;
    --bg2: #0f1115;
    --bg3: #14161b;
    --accent: #ebbd18;
    --accent2: #d4a321;
    --red: #c0392b;
    --text: #d4d8e8;
    --text-dim: #6b7280;
    --border: rgba(235, 189, 24, 0.15);
    --glow: rgba(235, 189, 24, 0.25);
}

body.light-mode {
    --bg: #f0f2f5;
    --bg2: #ffffff;
    --bg3: #f8f9fb;
    --accent: #c9a000;
    --accent2: #b08a00;
    --red: #c0392b;
    --text: #1a1c23;
    --text-dim: #6b7280;
    --border: rgba(180, 140, 0, 0.2);
    --glow: rgba(180, 140, 0, 0.15);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    background: var(--bg);
    color: var(--text);
    font-family: "Exo 2", sans-serif;
    font-weight: 400;
    overflow-x: hidden;
}

::selection {
    background: var(--accent) !important;
    color: #fff;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg2);
}
::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
}

/* ─── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 6px;
    font-family: "Rajdhani", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s;
    border: none;
}
.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 20px var(--glow);
}
.btn-primary:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}
.btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.btn-discord {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #5865f2;
    color: #fff;
    padding: 14px 32px;
    border-radius: 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
    transition:
        opacity 0.2s,
        transform 0.2s;
    text-decoration: none;
}
.btn-discord:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

/* ─── UCP LAYOUT (Management / Dashboard) ─────────────────────────────────── */
.ucp-body {
    background: var(--bg);
}

.ucp-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.ucp-sidebar {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    flex-shrink: 0;
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow: hidden;
    resize: none;
    user-select: none;
    z-index: 100;
}
.ucp-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 0;
    scrollbar-width: none;
}
.ucp-sidebar-scroll::-webkit-scrollbar {
    display: none;
}

.ucp-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 20px;
    text-decoration: none;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.ucp-logo-link:hover .ucp-logo-text {
    color: var(--accent);
}
.ucp-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
}
.ucp-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
}
.ucp-logo-text {
    font-family: "Bebas Neue", sans-serif;
    font-size: 17px;
    letter-spacing: 2px;
    color: var(--text);
    transition: color 0.2s;
}
.ucp-logo-text span {
    color: var(--accent);
}

.ucp-logo-text:hover span {
    color: var(--text);
}

/* Ausweis */
.ucp-ausweis {
    margin: 0 12px 16px;
    background: rgba(235, 189, 24, 0.07);
    border: 1px solid rgba(235, 189, 24, 0.2);
    border-radius: 8px;
    padding: 12px;
}
.ucp-ausweis-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}
.ucp-ausweis-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ucp-ausweis-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 16px;
    color: #fff;
    border: 1px solid rgba(235, 189, 24, 0.4);
    background-size: cover;
    background-position: center;
}
.ucp-ausweis-name {
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav */
.ucp-nav {
    padding: 0 8px;
}
.ucp-nav-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 8px 12px 6px;
}
.ucp-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
    position: relative;
}
.ucp-nav-item i {
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.ucp-nav-item:hover {
    background: rgba(235, 189, 24, 0.08);
    color: var(--text);
}
.ucp-nav-item.active {
    background: rgba(235, 189, 24, 0.12);
    color: var(--accent);
}
.ucp-nav-badge {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}
.ucp-nav--bottom {
    margin-top: 8px;
}

.ucp-sidebar-bottom {
    border-top: 1px solid var(--border);
    padding: 8px 0 0;
}
.ucp-sidebar-bot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin: 4px 8px 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
}
.ucp-sidebar-bot-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
    font-size: 13px;
    flex-shrink: 0;
}
.ucp-sidebar-bot-icon--online {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}
.ucp-sidebar-bot-info {
    min-width: 0;
}
.ucp-sidebar-bot-name {
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ucp-sidebar-bot-lbl {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    color: var(--text-dim);
}
.ucp-sidebar-bot-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-dim);
}
.ucp-sidebar-bot-dot--online {
    background: #2ecc71;
    box-shadow: 0 0 5px #2ecc71;
}
.ucp-sidebar-bot-dot--offline {
    background: #e74c3c;
}
.ucp-sidebar-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 8px;
    padding: 0 20px 12px;
}
.ucp-sidebar-credit {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
}
.ucp-sidebar-credit:hover {
    color: var(--accent);
}
.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px #2ecc71;
    animation: pulse 1.8s infinite;
    flex-shrink: 0;
}
.live-dot.offline {
    background: #e74c3c;
    box-shadow: 0 0 6px #e74c3c;
    animation: none;
}
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.4);
    }
}

/* Main */
.ucp-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: 240px;
}

/* Top bar */
.ucp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px 0;
    gap: 20px;
    user-select: none;
}
.ucp-greeting h1 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    letter-spacing: 3px;
    color: var(--text);
}
.ucp-greeting h1 span {
    color: var(--accent);
}
.ucp-greeting p {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 2px;
    font-family: "Rajdhani", sans-serif;
}
.ucp-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.topbar-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    box-sizing: border-box;
    background: var(--panel-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 0 12px;
    cursor: pointer;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 500;
    min-width: 200px;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.topbar-search-btn:hover {
    border-color: var(--accent);
    color: var(--text);
    background: rgba(255,210,0,0.04);
    box-shadow: 0 0 0 3px rgba(255,210,0,0.08);
}
.topbar-search-icon {
    font-size: 12px;
    flex-shrink: 0;
}
.topbar-search-placeholder {
    flex: 1;
    text-align: left;
}
.topbar-search-kbd {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 600;
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 6px;
    color: var(--text-dim);
    flex-shrink: 0;
}
.ucp-topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ucp-topbar-username {
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.ucp-topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 14px;
    color: #fff;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(235, 189, 24, 0.4);
}
.ucp-logout-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    box-sizing: border-box;
    background: var(--panel-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 0 14px;
    border-radius: 9px;
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s,
        box-shadow 0.2s;
    text-transform: uppercase;
}
.ucp-logout-btn:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(192, 57, 43, 0.08);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}

/* Content */
.ucp-content {
    flex: 1;
    padding: 24px 32px 40px;
}

/* Stat Cards */
.mgmt-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 0 28px;
    user-select: none;
}
.mgmt-stat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.mgmt-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.mgmt-stat-icon--blue {
    background: rgba(235, 189, 24, 0.12);
    color: #ebbd18;
}
.mgmt-stat-icon--green {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
}
.mgmt-stat-icon--orange {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
}
.mgmt-stat-icon--red {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
}
.mgmt-stat-icon--purple {
    background: rgba(155, 89, 182, 0.12);
    color: #9b59b6;
}
.mgmt-stat-val {
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    color: var(--text);
    line-height: 1;
}
.mgmt-stat-lbl {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 2px;
}

/* Dashboard */

.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}
/* Row 1: Member Aktivität (3 cols) + Letzte Ereignisse (1 col) */
.dash-chart-panel {
    grid-column: 1 / 4;
    grid-row: 1;
}
.dash-side-panel {
    grid-column: 4;
    grid-row: 1;
}
/* Row 2: Ticket Aktivität (2 cols) + Meine Aufgaben (1 col) + Nächste Events (1 col) */
.dash-ticket-chart-panel {
    grid-column: 1 / 3;
    grid-row: 2;
}
.dash-mytasks-panel {
    grid-column: 3;
    grid-row: 2;
}
.dash-events-panel {
    grid-column: 4;
    grid-row: 2;
}
/* Row 3: Updates (3 cols) + Top Reputation (1 col) */
.dash-cl-panel {
    grid-column: 1 / 4;
    grid-row: 3;
}
.dash-rep-panel {
    grid-column: 4;
    grid-row: 3;
    align-self: start;
}
.dash-chart-wrap {
    padding: 8px 16px 16px;
    height: 200px;
}
.dash-tstat-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 16px 0;
}
.dash-tstat-mini {
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.dash-tstat-mini span {
    font-family: "Bebas Neue", sans-serif;
    font-size: 15px;
    margin-right: 2px;
}
.dash-tstat-mini--green {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}
.dash-tstat-mini--red {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}
.dash-tstat-mini--orange {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
}
.dash-tstat-mini--blue {
    background: rgba(93, 173, 226, 0.1);
    color: #5dade2;
}
.dash-changelog-grid {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.dash-list {
    padding: 8px 0;
}

.dash-event {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
}
.dash-event:last-child {
    border-bottom: none;
}
.dash-event i {
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.dash-event--join i {
    color: #2ecc71;
}
.dash-event--leave i {
    color: #e74c3c;
}
.dash-event-name {
    font-weight: 700;
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-event-time {
    color: var(--text-dim);
    font-size: 11px;
    white-space: nowrap;
    margin-left: auto;
}
.dash-mod-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(235, 189, 24, 0.12);
    color: var(--accent);
    flex-shrink: 0;
}
.dash-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
}

.dash-upevent {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.dash-upevent:last-child {
    border-bottom: none;
}
.dash-upevent-date {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.dash-upevent-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* Changelog – kompakte Zeilen */
.cl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: "Rajdhani", sans-serif;
}
.cl-row:last-child {
    border-bottom: none;
}
.cl-row-vtag {
    font-family: "Bebas Neue", sans-serif;
    font-size: 14px;
    color: var(--accent);
    letter-spacing: 1px;
}
.cl-row-date {
    font-size: 11px;
    color: var(--text-dim);
    margin-left: auto;
}
.cl-latest-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 6px;
}
.cl-latest-entries {
    padding-bottom: 4px;
}
.dash-cl-panel {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}
.dash-cl-panel .dash-changelog-grid {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 189, 24, 0.25) transparent;
}
.dash-cl-panel .dash-changelog-grid::-webkit-scrollbar {
    width: 4px;
}
.dash-cl-panel .dash-changelog-grid::-webkit-scrollbar-track {
    background: transparent;
}
.dash-cl-panel .dash-changelog-grid::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}
.dash-cl-panel .dash-cl-entries {
    columns: 2;
    column-gap: 8px;
}
.dash-cl-panel .dash-cl-entry {
    break-inside: avoid;
}
@container (max-width: 920px) {
    .dash-cl-panel .dash-cl-entries {
        columns: 1;
    }
}

/* Changelog – Modal Einträge */
.dash-cl-vtag {
    font-family: "Bebas Neue", sans-serif;
    font-size: 15px;
    color: var(--accent);
    letter-spacing: 1px;
}
.dash-cl-vdate {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    color: var(--text-dim);
}
.dash-cl-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    color: var(--text-dim);
}
.dash-cl-entry-2 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 30px;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    color: var(--text-dim);
}
.dash-cl-entry i {
    font-size: 10px;
    margin-top: 3px;
    flex-shrink: 0;
    width: 12px;
    text-align: center;
}
.dash-cl-new i {
    color: #2ecc71;
}
.dash-cl-fix i {
    color: #f39c12;
}
.dash-cl-change i {
    color: #5dade2;
}
.dash-cl-remove i {
    color: #e74c3c;
}

/* Changelog – Mehr anzeigen */
/* Bot Profil-Karte */
.dash-bot-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
}
.dash-bot-avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--border);
    object-fit: cover;
}
.dash-bot-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(235, 189, 24, 0.1);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--accent);
}
.dash-bot-username {
    font-family: "Rajdhani", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}
.dash-bot-status {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: "Rajdhani", sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
}
.dash-bot-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
}
.dash-bot-status--online {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
}
.dash-bot-status--online::before {
    background: #2ecc71;
}
.dash-bot-status--offline {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
}
.dash-bot-status--offline::before {
    background: #e74c3c;
}

/* Top Reputation */
.dash-rep-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: "Rajdhani", sans-serif;
}
.dash-rep-row:last-child {
    border-bottom: none;
}
.dash-rep-rank {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.dash-rep-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.dash-rep-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-rep-score {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dash-rep-score i {
    font-size: 9px;
}

/* Changelog Legende */
.cl-legend {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cl-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-dim);
}
.cl-legend-item i {
    font-size: 9px;
}
.cl-legend-new i {
    color: #2ecc71;
}
.cl-legend-fix i {
    color: #f39c12;
}
.cl-legend-change i {
    color: #5dade2;
}
.cl-legend-remove i {
    color: #e74c3c;
}

/* Changelog – Ältere Updates Button */
.cl-more-wrap {
    padding: 2px 16px 12px;
}
.cl-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
}
.cl-more-btn i {
    font-size: 10px;
}
.cl-more-btn:hover {
    background: rgba(235, 189, 24, 0.08);
    color: var(--accent);
    border-color: rgba(235, 189, 24, 0.4);
}

/* Changelog Modal */
.cl-modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 500px;
    max-width: 94vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}
.cl-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.cl-modal-title {
    font-family: "Rajdhani", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cl-modal-body {
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 189, 24, 0.3) transparent;
}
.cl-modal-version {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
    margin-bottom: 4px;
}
.cl-modal-version:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.cl-modal-version-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 6px;
}
.cl-modal-entries {
    padding: 0 16px 4px;
    display: flex;
    flex-direction: column;
}
body.light-mode .cl-modal {
    background: #fff;
}
body.light-mode .cl-modal-version {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* Panel */
.ucp-panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.ucp-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ucp-level-right {
    margin-left: auto;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
}
.ev-announce-info {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: none;
    border-radius: 20px;
    padding: 4px 12px;
    white-space: nowrap;
}
.ev-announce-info--ok {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.25);
}
.ev-announce-info--ok i {
    color: #2ecc71;
    font-size: 10px;
}
.ev-announce-info--ok strong {
    color: #2ecc71;
    font-weight: 700;
}
.ev-announce-info--warn {
    color: #e67e22;
    background: rgba(230, 126, 34, 0.1);
    border: 1px solid rgba(230, 126, 34, 0.25);
}
.ev-announce-info--warn i {
    color: #e67e22;
    font-size: 10px;
}

/* Tab panels */
.mgmt-tab-panel {
    display: none;
}
.mgmt-tab-panel--active {
    display: block;
}

/* Login/Access Denied screens */
.ucp-login-screen,
.mgmt-access-denied {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: #0a0b0d;
    z-index: 10;
    --bg: #0a0b0d;
    --bg2: #0f1115;
    --bg3: #14161b;
    --text: #d4d8e8;
    --text-dim: #6b7280;
    --border: rgba(235, 189, 24, 0.15);
}
.ucp-login-card,
.mgmt-denied-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 48px 40px;
    max-width: 440px;
    width: 100%;
    text-align: center;
}
.ucp-login-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(235, 189, 24, 0.1);
    border: 1px solid rgba(235, 189, 24, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}
.ucp-login-card h2,
.mgmt-denied-card h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 32px;
    letter-spacing: 3px;
    color: var(--text);
    margin-bottom: 10px;
}
.ucp-login-card p,
.mgmt-denied-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dim);
    margin-bottom: 24px;
    font-family: "Rajdhani", sans-serif;
}
.mgmt-denied-icon {
    font-size: 48px;
    color: var(--red);
    margin-bottom: 16px;
    display: block;
}

/* Members table */
.mgmt-members-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.mgmt-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    height: 36px;
    box-sizing: border-box;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 0 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mgmt-search-wrap:focus-within {
    border-color: rgba(235, 189, 24, 0.5);
    box-shadow: 0 0 0 3px rgba(255,210,0,0.08);
}
.mgmt-search-wrap i {
    color: var(--text-dim);
    font-size: 13px;
}
.mgmt-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    color: var(--text);
}
.mgmt-search-input::placeholder {
    color: var(--text-dim);
}
.mgmt-members-count {
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    white-space: nowrap;
}

.mgmt-members-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Rajdhani", sans-serif;
}
.mgmt-members-table thead tr {
    border-bottom: 1px solid var(--border);
}
.mgmt-members-table th {
    padding: 10px 20px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.mgmt-members-table td {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(235, 189, 24, 0.06);
    font-size: 14px;
}
.mgmt-members-table tbody tr:last-child td {
    border-bottom: none;
}
.mgmt-members-table tbody tr {
    transition: background 0.15s;
    cursor: pointer;
}
.mgmt-members-table tbody tr:hover {
    background: rgba(235, 189, 24, 0.05);
}

.mgmt-member-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mgmt-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 14px;
    color: #fff;
    background-size: cover;
    background-position: center;
}
.mgmt-member-name {
    font-weight: 700;
    color: var(--text);
}
.mgmt-member-tag {
    font-size: 12px;
    color: var(--text-dim);
}

.mgmt-roles-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
}
.mgmt-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(235, 189, 24, 0.08);
    border: 1px solid rgba(235, 189, 24, 0.2);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mgmt-role-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mgmt-role-chip--more {
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.mgmt-team-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(235, 189, 24, 0.1);
    border: 1px solid rgba(235, 189, 24, 0.3);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
}
.mgmt-date-cell {
    font-size: 12px;
    color: var(--text-dim);
}
.mgmt-id-cell {
    font-size: 11px;
    color: var(--text-dim);
    font-family: monospace;
}

.mgmt-loading {
    padding: 40px;
    text-align: center;
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.mgmt-loading i {
    font-size: 24px;
}

.mgmt-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}
.mgmt-page-btn {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s;
}
.mgmt-page-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.mgmt-page-btn--active {
    background: rgba(235, 189, 24, 0.12);
    border-color: rgba(235, 189, 24, 0.4);
    color: var(--accent);
}
.mgmt-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Member Detail Modal */
.mgmt-detail-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    color: #fff;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(235, 189, 24, 0.4);
}
.mgmt-detail-name {
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    color: #fff;
}
.mgmt-detail-sub {
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 2px;
}

.mgmt-detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    background: var(--bg2);
}
.mgmt-detail-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition:
        color 0.2s,
        border-color 0.2s;
}
.mgmt-detail-tab:hover {
    color: var(--text);
}
.mgmt-detail-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.mgmt-modal-body {
    overflow-y: auto;
}
.mgmt-detail-info {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}
.mgmt-detail-section {
    border-bottom: 1px solid var(--border);
}
.mgmt-detail-section:last-child {
    border-bottom: none;
}
.mgmt-detail-section-title {
    padding: 14px 24px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
}

.mgmt-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 24px 16px;
}
.mgmt-info-item {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
}
.mgmt-info-item-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.mgmt-info-item-val {
    font-family: "Rajdhani", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-top: 2px;
}

/* Comment */
.mgmt-comment-area {
    padding: 0 24px 10px;
}
.mgmt-comment-area textarea {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 12px 14px;
    resize: vertical;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    outline: none;
    line-height: 1.6;
    transition: border-color 0.2s;
}
.mgmt-comment-area textarea:focus {
    border-color: rgba(235, 189, 24, 0.5);
}
.mgmt-comment-meta {
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 6px;
}

/* Actions */
.mgmt-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}
.mgmt-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid;
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:
        background 0.15s,
        transform 0.1s;
}
.mgmt-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}
.mgmt-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.4);
}
.md2-hierarchy-notice {
    width: 100%;
    margin-top: 6px;
    font-family: "Exo 2", sans-serif;
    font-size: 11.5px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}
.mgmt-action-btn--rep {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}
.mgmt-action-btn--roles {
    background: rgba(88, 101, 242, 0.1);
    border-color: rgba(88, 101, 242, 0.3);
    color: #7289da;
}
.mgmt-action-btn--timeout {
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.3);
    color: #f39c12;
}
.mgmt-action-btn--kick {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}
.mgmt-action-btn--ban {
    background: rgba(192, 57, 43, 0.1);
    border-color: rgba(192, 57, 43, 0.3);
    color: #c0392b;
}

/* IC-Infos */
.mgmt-ic-loading {
    padding: 40px;
    text-align: center;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
}
.mgmt-ic-error {
    padding: 24px;
    text-align: center;
    color: #e74c3c;
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
}
.mgmt-ic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 24px 16px;
}
.mgmt-ic-money {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 24px 16px;
}
.mgmt-ic-money-card {
    flex: 1;
    min-width: 120px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
}
.mgmt-ic-money-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.mgmt-ic-money-val {
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    color: #fff;
    margin-top: 2px;
}

/* Moderation Modal */
.mgmt-moderation-notice {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 16px;
    font-family: "Rajdhani", sans-serif;
}
.mgmt-modal-error {
    padding: 10px 14px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 6px;
    color: #e74c3c;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
}

/* Logs */
.mgmt-logs-toolbar {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mgmt-logs-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mgmt-log-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg3);
    border: 1px solid var(--border);
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}
.mgmt-log-filter:hover {
    border-color: rgba(235, 189, 24, 0.4);
    color: var(--text);
}
.mgmt-log-filter--active {
    background: rgba(235, 189, 24, 0.1);
    border-color: rgba(235, 189, 24, 0.4);
    color: var(--accent);
}

.mgmt-log-list {
    display: flex;
    flex-direction: column;
}
.mgmt-log-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(235, 189, 24, 0.06);
    font-family: "Rajdhani", sans-serif;
}
.mgmt-log-entry:last-child {
    border-bottom: none;
}
.mgmt-log-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.mgmt-log-icon--kick {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}
.mgmt-log-icon--ban {
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
}
.mgmt-log-icon--unban {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}
.mgmt-log-icon--timeout {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
}
.mgmt-log-icon--role {
    background: rgba(235, 189, 24, 0.1);
    color: #ebbd18;
}
.mgmt-log-icon--join {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}
.mgmt-log-icon--leave {
    background: rgba(149, 165, 166, 0.1);
    color: #95a5a6;
}
.mgmt-log-main {
    flex: 1;
}
.mgmt-log-action {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.mgmt-log-action span {
    color: var(--accent);
}
.mgmt-log-detail {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mgmt-log-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.mgmt-log-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
}
.mgmt-log-joined {
    font-size: 11px;
    color: var(--text-dim);
}
.mgmt-log-time {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    align-self: flex-start;
}

/* Settings */
.mgmt-settings-section {
    padding: 20px;
    border-bottom: 1px solid var(--border);
}
.mgmt-settings-section:last-child {
    border-bottom: none;
}
.mgmt-settings-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}
.mgmt-settings-desc {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 16px;
    font-family: "Rajdhani", sans-serif;
}
.mgmt-settings-refresh-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition:
        border-color 0.2s,
        color 0.2s,
        box-shadow 0.2s;
}
.mgmt-settings-refresh-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,210,0,0.08);
}

/* Perm groups — card grid */
.mgmt-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}
.mgmt-gc {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mgmt-gc-body {
    padding: 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mgmt-gc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2px;
}
.mgmt-gc-name {
    font-family: "Rajdhani", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}
.mgmt-gc-badge {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
}
.mgmt-gc-badge--builtin {
    background: rgba(235, 189, 24, 0.15);
    border: 1px solid rgba(235, 189, 24, 0.3);
    color: var(--accent);
}
.mgmt-gc-badge--custom {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}
.mgmt-gc-count {
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 14px;
}
.mgmt-gc-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mgmt-gc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    white-space: nowrap;
}
.mgmt-gc-chip--on {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #86efac;
}
.mgmt-gc-chip--off {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-dim);
}
.mgmt-gc-footer {
    border-top: 1px solid var(--border);
}
.mgmt-gc-edit-btn {
    width: 100%;
    padding: 12px 0;
    background: #1a2540;
    border: none;
    color: #fff;
    font-family: "Rajdhani", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s;
}
.mgmt-gc-edit-btn:hover {
    background: #223059;
}
.mgmt-gc-new-desc {
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    color: var(--text-dim);
    margin: 8px 0 20px;
    flex: 1;
}
.mgmt-gc-create-btn {
    width: 100%;
    padding: 14px 0;
    background: var(--accent);
    border: none;
    color: #111;
    font-family: "Rajdhani", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.mgmt-gc-create-btn:hover {
    opacity: 0.88;
}

.mgmt-perm-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.mgmt-perm-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.mgmt-perm-toggle span {
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* Settings user perms */
.mgmt-user-perm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(235, 189, 24, 0.06);
}
.mgmt-user-perm-row:last-child {
    border-bottom: none;
}
.mgmt-user-perm-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 13px;
    color: #fff;
    background-size: cover;
    background-position: center;
}
.mgmt-user-perm-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.mgmt-user-perm-name {
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mgmt-user-perm-group {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text-dim);
    text-transform: uppercase;
}
.mgmt-user-perm-edit-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;
}
.mgmt-user-perm-edit-btn:hover {
    color: var(--accent);
    border-color: rgba(235, 189, 24, 0.4);
    background: rgba(235, 189, 24, 0.08);
}

/* Bans table */
.mgmt-bans-table .mgmt-reason-cell {
    font-size: 13px;
    color: var(--text-dim);
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mgmt-unban-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: background 0.15s;
}
.mgmt-unban-btn:hover {
    background: rgba(46, 204, 113, 0.18);
}

/* ─── TICKET SYSTEM ───────────────────────────────────────────────────────── */
.ts-page {
    padding: 40px 32px 60px;
}
.ts-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.ts-login-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}
.ts-login-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 48px 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.ts-login-icon {
    font-size: 48px;
    color: #5865f2;
    margin-bottom: 16px;
}
.ts-login-card h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 10px;
}
.ts-login-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dim);
    margin-bottom: 24px;
    font-family: "Rajdhani", sans-serif;
}
.ts-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #5865f2;
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition:
        opacity 0.2s,
        transform 0.2s;
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.35);
}
.ts-discord-btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

.ts-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}
.ts-user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 14px;
}
.ts-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.ts-username {
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.ts-team-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(235, 189, 24, 0.1);
    border: 1px solid rgba(235, 189, 24, 0.3);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
}
.ts-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    padding: 9px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    transition:
        opacity 0.2s,
        transform 0.15s;
    white-space: nowrap;
}
.ts-new-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.ts-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.ts-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}
.ts-filter:hover {
    border-color: rgba(235, 189, 24, 0.4);
    color: var(--text);
}
.ts-filter--active {
    background: rgba(235, 189, 24, 0.1);
    border-color: rgba(235, 189, 24, 0.4);
    color: var(--accent);
}
.ts-filter-count {
    font-weight: 400;
    font-size: 11px;
}
.ts-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.ts-dot--open {
    background: #f39c12;
}
.ts-dot--progress {
    background: #ebbd18;
}
.ts-dot--closed {
    background: #6b7280;
}

.ts-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    transition: border-color 0.2s;
}
.ts-search-bar:focus-within {
    border-color: rgba(235, 189, 24, 0.5);
}
.ts-search-bar i {
    color: var(--text-dim);
    font-size: 13px;
    flex-shrink: 0;
}
.ts-search-bar input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    color: var(--text);
}
.ts-search-bar input::placeholder {
    color: var(--text-dim);
}
.ts-search-clear {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.2s;
    padding: 0;
}
.ts-search-clear:hover {
    color: var(--text);
}

.ts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.ts-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    cursor: pointer;
    transition:
        border-color 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
}
.ts-card:hover {
    border-color: rgba(235, 189, 24, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.ts-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ts-card-id {
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-dim);
}
.ts-card-title {
    font-family: "Rajdhani", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.3;
}
.ts-card-cat {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.ts-card-foot {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
}

.ts-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.ts-badge--open {
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.3);
    color: #f39c12;
}
.ts-badge--progress {
    background: rgba(235, 189, 24, 0.1);
    border: 1px solid rgba(235, 189, 24, 0.3);
    color: #ebbd18;
}
.ts-badge--closed {
    background: rgba(107, 114, 128, 0.1);
    border: 1px solid rgba(107, 114, 128, 0.3);
    color: #9ca3af;
}

.ts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
}
.ts-empty i {
    font-size: 40px;
    color: var(--text-dim);
}
.ts-empty p {
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--text);
}
.ts-empty span {
    font-size: 14px;
    color: var(--text-dim);
}

/* Ticket Modals */
.ts-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ts-overlay--active {
    display: flex;
}

.ts-modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    animation: fadeUp 0.2s ease both;
}
.ts-modal--wide {
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

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

.ts-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}
.ts-modal-id {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 3px;
}
.ts-modal-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--text);
}
.ts-modal-x {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.ts-modal-x:hover {
    color: #fff;
}

.ts-form {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ts-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ts-field label {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.ts-field input,
.ts-field select,
.ts-field textarea {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 10px 14px;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    resize: vertical;
}
.ts-field input:focus,
.ts-field select:focus,
.ts-field textarea:focus {
    border-color: rgba(235, 189, 24, 0.5);
}
.ts-field select option {
    background: var(--bg3);
}

.ts-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.ts-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    color: #fff;
    padding: 9px 20px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.ts-btn-primary:hover {
    opacity: 0.88;
}
.ts-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.notify-test-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 7px;
    border: 1px solid rgba(93, 173, 226, 0.4);
    background: rgba(93, 173, 226, 0.1);
    color: #5dade2;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.2s,
        border-color 0.2s;
}
.notify-test-btn:hover {
    background: rgba(93, 173, 226, 0.18);
    border-color: rgba(93, 173, 226, 0.7);
}
.notify-test-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ts-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: var(--text-dim);
    padding: 9px 20px;
    border-radius: 7px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:
        border-color 0.2s,
        color 0.2s;
}
.ts-btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text);
}

.ts-btn-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
    padding: 9px 20px;
    border-radius: 7px;
    border: 1px solid rgba(243, 156, 18, 0.3);
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background 0.2s;
    white-space: nowrap;
}
.ts-btn-note:hover {
    background: rgba(243, 156, 18, 0.18);
}

/* Ticket Detail Modal Body */
.ts-modal-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.ts-modal-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    max-height: 80vh;
}

.ts-modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}
.ts-modal-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s;
}
.ts-modal-tab:hover {
    color: var(--text);
}
.ts-modal-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

#tsPanelMessages,
#tsPanelNotes,
#mgmtPanelChat,
#mgmtPanelNotes {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ts-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ts-msg {
    display: flex;
    gap: 10px;
}
.ts-msg--own {
    flex-direction: row-reverse;
}
.ts-msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ts-msg-body {
    max-width: 75%;
}
.ts-msg--own .ts-msg-body {
    text-align: right;
}
.ts-msg-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.ts-msg--own .ts-msg-meta {
    flex-direction: row-reverse;
}
.ts-msg-name {
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}
.ts-msg-time {
    font-size: 11px;
    color: var(--text-dim);
}
.ts-team-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(235, 189, 24, 0.1);
    border: 1px solid rgba(235, 189, 24, 0.3);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
}
.ts-msg-text {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
}
.ts-msg--own .ts-msg-text {
    background: rgba(235, 189, 24, 0.1);
    border-color: rgba(235, 189, 24, 0.25);
    text-align: left;
}
.ts-msg--team .ts-msg-text {
    border-left: 2px solid var(--accent);
}
.todo-chat-attachment {
    display: block;
    margin-top: 6px;
    max-width: 240px;
}
.todo-chat-attachment img {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.ts-reply {
    border-top: 1px solid var(--border);
    padding: 10px 14px;
    background: var(--bg2);
}
.ts-reply--note {
    background: rgba(243, 156, 18, 0.04);
}

/* Composer — unified chat input box */
.ts-composer {
    position: relative;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.todo-mention-dropdown {
    position: fixed;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    max-height: 114px;
    overflow-y: auto;
    z-index: 50;
}
.todo-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.todo-mention-item.active,
.todo-mention-item:hover {
    background: rgba(235, 189, 24, 0.12);
}
.todo-mention {
    color: #ebbd18;
    font-weight: 600;
}
body.light-mode .todo-mention-dropdown {
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.ts-composer:focus-within {
    border-color: rgba(235, 189, 24, 0.45);
    box-shadow: 0 0 0 3px rgba(235, 189, 24, 0.08);
}
.ts-composer--note:focus-within {
    border-color: rgba(243, 156, 18, 0.45);
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.08);
}
.ts-composer textarea {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    padding: 12px 14px 6px;
    resize: none;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    box-sizing: border-box;
}
.ts-composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 8px;
    gap: 6px;
}
.ts-composer-attach {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition:
        background 0.15s,
        color 0.15s;
}
.ts-composer-attach:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent);
}
.ts-composer-send {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--accent);
    color: #000;
    transition:
        opacity 0.15s,
        transform 0.1s;
}
.ts-composer-send:hover {
    opacity: 0.88;
}
.ts-composer-send:active {
    transform: scale(0.97);
}
.ts-composer-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ts-composer-send--note {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.3);
}
.ts-composer-send--note:hover {
    background: rgba(243, 156, 18, 0.2);
    opacity: 1;
}
.ts-img-preview-box {
    position: relative;
    display: inline-flex;
    width: fit-content;
    margin: 8px 12px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.ts-img-preview-thumb {
    max-height: 80px;
    max-width: 200px;
    display: block;
    object-fit: cover;
    border-radius: 7px;
}
.ts-img-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.ts-msg-image {
    display: block;
    max-width: 320px;
    max-height: 240px;
    border-radius: 8px;
    margin-top: 6px;
    cursor: zoom-in;
    object-fit: contain;
    border: 1px solid var(--border);
    transition: opacity 0.15s;
}
.ts-msg-image:hover {
    opacity: 0.88;
}

/* Lightbox */
.mgmt-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    min-width: 240px;
    max-width: 360px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.25s,
        transform 0.25s;
    pointer-events: none;
}
.mgmt-toast--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.mgmt-toast-icon {
    font-size: 15px;
    margin-top: 1px;
    flex-shrink: 0;
}
.mgmt-toast--success .mgmt-toast-icon {
    color: #2ecc71;
}
.mgmt-toast--error .mgmt-toast-icon {
    color: #e74c3c;
}
.mgmt-toast-body {
    flex: 1;
}
.mgmt-toast-title {
    font-weight: 700;
    font-size: 13px;
}
.mgmt-toast-msg {
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 2px;
}
/* ── Role Edit Modal ───────────────────────────────────────────────────────── */
.re-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    gap: 4px;
}
.re-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 12px;
    cursor: pointer;
    transition:
        color 0.15s,
        border-color 0.15s;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.re-tab:hover {
    color: var(--text);
}
.re-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.re-perm-group {
    margin-bottom: 16px;
}
.re-perm-group-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.re-perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    gap: 12px;
}
.re-perm-row:last-child {
    border-bottom: none;
}
.re-perm-row--admin .re-perm-name {
    color: #e74c3c;
}
.re-perm-text {
    flex: 1;
    min-width: 0;
}
.re-perm-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    font-family: "Rajdhani", sans-serif;
    display: block;
}
.re-perm-desc {
    font-size: 11px;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    display: block;
    margin-top: 1px;
}
.re-toggle {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    transition:
        background 0.2s,
        border-color 0.2s;
    cursor: pointer;
}
.re-toggle--on {
    background: var(--accent);
    border-color: var(--accent);
}
.re-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-dim);
    transition:
        transform 0.2s,
        background 0.2s;
}
.re-toggle--on .re-toggle-knob {
    transform: translateX(16px);
    background: #000;
}
.re-field {
    margin-bottom: 18px;
}
.re-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.re-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.re-color-swatch-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color 0.2s;
    position: relative;
}
.re-color-swatch-wrap:hover {
    border-color: rgba(235, 189, 24, 0.45);
}
.re-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.15);
}
.re-color-pick-label {
    font-size: 13px;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    white-space: nowrap;
}
.re-preview-chip {
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid;
    white-space: nowrap;
}
.re-hex-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 8px 12px;
    gap: 4px;
    transition: border-color 0.2s;
}
.re-hex-wrap:focus-within {
    border-color: rgba(235, 189, 24, 0.45);
}
.re-hex-hash {
    font-family: monospace;
    font-size: 14px;
    color: var(--text-dim);
    user-select: none;
}
.re-hex-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: monospace;
    font-size: 14px;
    width: 72px;
    text-transform: uppercase;
}
.re-hex-input::placeholder {
    color: var(--text-dim);
}
body.light-mode .re-hex-wrap {
    background: #f5f7fa;
    border-color: #e2e8f0;
}
body.light-mode .re-hex-wrap:focus-within {
    border-color: var(--accent);
}
.re-error {
    color: #e74c3c;
    font-size: 12px;
    font-family: "Rajdhani", sans-serif;
    margin-top: -8px;
    margin-bottom: 8px;
}
body.light-mode .re-color-swatch-wrap {
    background: #f5f7fa;
    border-color: #e2e8f0;
}
body.light-mode .re-color-swatch-wrap:hover {
    border-color: var(--accent);
}

/* ── Rollen-Verwaltung ─────────────────────────────────────────────────────── */
.roles-hint {
    font-size: 12px;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    padding: 10px 16px;
    background: var(--bg);
    border-radius: 6px;
    margin: 12px 5px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.roles-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-radius: 8px;
    transition: background 0.1s;
}
.roles-row:hover {
    background: var(--bg);
}
.roles-row + .roles-row {
    border-top: 1px solid var(--border);
}
.roles-drag-handle {
    color: var(--text-dim);
    font-size: 13px;
    cursor: grab;
    padding: 0 8px 0 2px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.roles-drag-handle:active {
    cursor: grabbing;
}
.roles-row:hover .roles-drag-handle {
    opacity: 1;
}
.roles-row--dragging {
    opacity: 0.35;
}
.roles-row--dragover {
    background: rgba(235, 189, 24, 0.06);
    border-top: 2px solid var(--accent);
}
.roles-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.roles-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.roles-row-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-family: "Rajdhani", sans-serif;
}
.roles-row-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.15s;
}
.roles-row:hover .roles-row-actions {
    opacity: 1;
}
.roles-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition:
        background 0.1s,
        color 0.1s;
}
.roles-btn--edit:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}
.roles-btn--delete:hover {
    background: #e74c3c20;
    color: #e74c3c;
    border-color: #e74c3c40;
}

/* ── Tips Modal ────────────────────────────────────────────────────────────── */
.tips-overlay {
    position: fixed;
    inset: 0;
    z-index: 9980;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spotFadeIn 0.2s ease;
}
.tips-modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: spotSlideIn 0.2s ease;
    border-top: 3px solid var(--accent);
}
.tips-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border);
}
.tips-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #000;
    flex-shrink: 0;
}
.tips-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--text);
}
.tips-subtitle {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
    font-family: "Rajdhani", sans-serif;
}
.tips-list {
    padding: 12px 0;
}
.tips-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
}
.tips-item + .tips-item {
    border-top: 1px solid var(--border);
}
.tips-item-keys {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    min-width: 120px;
}
.tips-item-keys kbd {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--accent);
    font-size: 12px;
    font-family: monospace;
    padding: 3px 8px;
    font-weight: 700;
    white-space: nowrap;
}
.tips-item-keys span {
    font-size: 11px;
    color: var(--text-dim);
}
.tips-icon-inline {
    color: var(--accent);
    font-size: 16px;
}
.tips-item-desc {
    font-size: 13px;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    line-height: 1.4;
}
.tips-close-btn {
    display: block;
    width: calc(100% - 48px);
    margin: 4px 24px 20px;
    padding: 11px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 8px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.tips-close-btn:hover {
    opacity: 0.85;
}
body.light-mode .tips-modal {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ── Spotlight Search ──────────────────────────────────────────────────────── */
.spotlight-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    animation: spotFadeIn 0.15s ease;
}
@keyframes spotFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.spotlight-modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 100%;
    max-width: 620px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: spotSlideIn 0.15s ease;
}
body.light-mode .spotlight-modal {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);
    border-top: 3px solid var(--accent);
}
body.light-mode .spotlight-search-wrap {
    border-bottom: 1px solid #e8eaed;
}
body.light-mode .spotlight-esc-hint {
    background: #f0f2f5;
    border-color: #d1d5db;
    color: #9ca3af;
}
body.light-mode .spotlight-item:hover,
body.light-mode .spotlight-item.spotlight-item--active {
    background: #f5f7fa;
}
body.light-mode .spotlight-item-icon {
    background: #f5f7fa;
    border-color: #e2e8f0;
}
body.light-mode .spotlight-divider {
    border-top-color: #e8eaed;
}
body.light-mode .spotlight-group-label {
    color: #9ca3af;
}
@keyframes spotSlideIn {
    from {
        transform: translateY(-12px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.spotlight-search-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.spotlight-search-icon {
    color: var(--text-dim);
    font-size: 16px;
    flex-shrink: 0;
}
.spotlight-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 17px;
    font-family: "Rajdhani", sans-serif;
    font-weight: 500;
}
.spotlight-input::placeholder {
    color: var(--text-dim);
}
.spotlight-esc-hint {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-dim);
    font-size: 11px;
    padding: 2px 7px;
    font-family: monospace;
    flex-shrink: 0;
}
.spotlight-results {
    max-height: 440px;
    overflow-y: auto;
    padding: 8px 0;
}
.spotlight-results:empty {
    display: none;
}
.spotlight-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 10px 20px 4px;
    font-family: "Rajdhani", sans-serif;
}
.spotlight-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.1s;
}
.spotlight-item:hover,
.spotlight-item.spotlight-item--active {
    background: var(--accent-dim, rgba(255, 165, 0, 0.08));
}
.spotlight-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    color: var(--accent);
}
.spotlight-item-body {
    flex: 1;
    min-width: 0;
}
.spotlight-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Rajdhani", sans-serif;
}
.spotlight-item-sub {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spotlight-item-arrow {
    color: var(--text-dim);
    font-size: 12px;
    flex-shrink: 0;
}
.spotlight-empty {
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
    padding: 32px 20px;
    font-family: "Rajdhani", sans-serif;
}
.spotlight-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 6px 0;
}

.img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    transition:
        background 0.2s,
        backdrop-filter 0.2s;
}
.img-lightbox--visible {
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
}
.img-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 10px;
    object-fit: contain;
    cursor: default;
    transform: scale(0.92);
    opacity: 0;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.img-lightbox--visible img {
    transform: scale(1);
    opacity: 1;
}
.img-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.img-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Notes */
.ts-notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ts-notes-empty {
    text-align: center;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ts-notes-empty i {
    font-size: 28px;
}
.ts-note {
    background: rgba(243, 156, 18, 0.06);
    border: 1px solid rgba(243, 156, 18, 0.2);
    border-radius: 8px;
    padding: 12px;
}
.ts-note-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.ts-note-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.3);
    border-radius: 4px;
    padding: 1px 7px;
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #f39c12;
}
.ts-note-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
}

/* Ticket Sidebar */
.ts-ticket-sidebar {
    width: 220px;
    flex-shrink: 0;
    overflow-y: auto;
}
.ts-ticket-sidebar-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.ts-ticket-sidebar-section:last-child {
    border-bottom: none;
}
.ts-ticket-sidebar-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.ts-ticket-opener-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ts-ticket-opener-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 13px;
    color: #fff;
    background-size: cover;
    background-position: center;
}
.ts-ticket-opener-name {
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.ts-ticket-opener-date {
    font-size: 11px;
    color: var(--text-dim);
}
.ts-sidebar-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    margin-bottom: 6px;
}
.ts-sidebar-detail-row:last-child {
    margin-bottom: 0;
}
.ts-sidebar-detail-row span:first-child {
    color: var(--text-dim);
}
.ts-sidebar-detail-row span:last-child {
    color: var(--text);
    font-weight: 600;
}
.ts-status-select {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 7px 10px;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
.ts-status-select:focus {
    border-color: rgba(235, 189, 24, 0.5);
}
.ts-btn-assign {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(235, 189, 24, 0.1);
    border: 1px solid rgba(235, 189, 24, 0.3);
    color: var(--accent);
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: background 0.15s;
}
.ts-btn-assign:hover {
    background: rgba(235, 189, 24, 0.18);
}
.ts-btn-assign--release {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}
.ts-btn-assign--release:hover {
    background: rgba(231, 76, 60, 0.18);
}

/* Roles modal list */
.mgmt-role-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(235, 189, 24, 0.06);
}
.mgmt-role-toggle-row:last-child {
    border-bottom: none;
}
.mgmt-role-toggle-name {
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.mgmt-role-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid;
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: background 0.15s;
    white-space: nowrap;
}
.mgmt-role-toggle-btn--add {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}
.mgmt-role-toggle-btn--add:hover {
    background: rgba(46, 204, 113, 0.2);
}
.mgmt-role-toggle-btn--remove {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}
.mgmt-role-toggle-btn--remove:hover {
    background: rgba(231, 76, 60, 0.2);
}

/* Page header for tickets.html */
.tels-header {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.tels-header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.tels-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 14px;
    color: #fff;
}
.tels-header-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--text);
}
.tels-header-title span {
    color: var(--accent);
}
.tels-header-nav {
    display: flex;
    gap: 4px;
    margin-left: 24px;
}
.tels-header-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-dim);
    text-decoration: none;
    transition:
        color 0.15s,
        background 0.15s;
}
.tels-header-nav a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}
.tels-header-nav a.active {
    color: var(--accent);
    background: rgba(235, 189, 24, 0.1);
}
.tels-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ticket page hero */
.ts-page-header {
    background: url("/src/assets/tels-banner.png") center/cover no-repeat;
    border-bottom: 1px solid var(--border);
    padding: 40px 32px 36px;
    text-align: center;
    position: relative;
}
.ts-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.ts-page-header h1,
.ts-page-header p {
    position: relative;
}
.ts-page-header h1 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 42px;
    letter-spacing: 4px;
    color: #fff;
    margin-bottom: 8px;
}
.ts-page-header h1 span {
    color: var(--accent);
}
.ts-page-header p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    font-family: "Rajdhani", sans-serif;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .mgmt-stat-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .ucp-content {
        padding: 16px;
    }
    .ucp-topbar {
        padding: 16px 16px 0;
        flex-wrap: wrap;
    }
    .ts-modal--wide {
        max-width: 100%;
    }
    .ts-modal-body {
        flex-direction: column;
    }
    .ts-modal-main {
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 50vh;
    }
    .ts-ticket-sidebar {
        width: 100%;
    }
}

/* Accordion (Regelwerk / Team-Regelwerk) */
.rw-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rw-item {
    border-radius: 10px;
    overflow: hidden;
}
.rw-item-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.2s,
        background 0.2s;
}
.rw-item--open .rw-item-header {
    border-radius: 10px 10px 0 0;
    border-color: rgba(235, 189, 24, 0.4);
    background: rgba(235, 189, 24, 0.05);
}
.rw-item-header:hover {
    border-color: rgba(235, 189, 24, 0.3);
}
.rw-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}
.rw-item-title {
    flex: 1;
    font-family: "Rajdhani", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}
.rw-item-arrow {
    color: var(--text-dim);
    font-size: 13px;
    transition:
        transform 0.25s,
        color 0.2s;
    flex-shrink: 0;
}
.rw-item--open .rw-item-arrow {
    transform: rotate(90deg);
    color: var(--accent);
}
.rw-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: var(--bg3);
    border: 1px solid rgba(235, 189, 24, 0.2);
    border-top: none;
    border-radius: 0 0 10px 10px;
}
.rw-item--open .rw-item-body {
    max-height: 2000px;
}
.rw-item-rules {
    padding: 8px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.rw-rule {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.rw-rule:last-child {
    border-bottom: none;
}
.rw-rule-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.rw-rule-num {
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(235, 189, 24, 0.1);
    border: 1px solid rgba(235, 189, 24, 0.2);
    border-radius: 4px;
    padding: 2px 8px;
}
.rw-rule-title {
    font-family: "Rajdhani", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.rw-rule-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dim);
}

/* Group Edit Modal */
.gm-modal {
    width: 100%;
    max-width: 480px;
    background: var(--bg2);
    border-radius: 16px;
    border: 1px solid var(--border);
    animation: fadeUp 0.2s ease both;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: hidden;
}
.gm-modal-accent {
    height: 4px;
    background: var(--gm-color, var(--accent));
    transition: background 0.3s;
    flex-shrink: 0;
}
.gm-modal-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.gm-modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 189, 24, 0.3) transparent;
}
.gm-modal-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(235, 189, 24, 0.15);
    position: relative;
}
.gm-modal-icon-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.gm-modal-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 16px;
    color: #fff;
}
.gm-modal-head-text {
    flex: 1;
    min-width: 0;
}
.gm-modal-sublabel {
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 2px;
}
.gm-modal-title-name {
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gm-modal-x {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px;
    flex-shrink: 0;
    border-radius: 6px;
}
.gm-modal-x:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.gm-section {
    padding: 20px 24px 0;
}
.gm-section-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.gm-name-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.gm-name-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 10px 14px;
    color: #fff;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.gm-name-input:focus {
    border-color: rgba(235, 189, 24, 0.45);
}
.gm-color-swatch {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s;
    position: relative;
}
.gm-color-swatch:hover {
    border-color: rgba(255, 255, 255, 0.3);
}
.gm-color-swatch input[type="color"] {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}
.gm-color-preview {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.gm-perms-list {
    margin-top: 2px;
}
.gm-perm-group {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.gm-perm-group--first {
    border-top: none;
}
.gm-perm-group-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 12px 0 4px;
    opacity: 0.8;
}
.gm-perm-group-label i {
    font-size: 11px;
}
.gm-perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.gm-perm-row:last-child {
    border-bottom: none;
}
.gm-perm-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.gm-perm-name {
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    color: var(--text);
}

/* Gruppen-Rollen-Einschränkung: Zusammenfassung + Popup-Liste */
.grr-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    padding: 10px 12px;
}
.grr-summary-text {
    font-family: "Exo 2", sans-serif;
    font-size: 12.5px;
    color: var(--text-dim);
}
.grr-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: rgba(235, 189, 24, 0.1);
    border: 1px solid rgba(235, 189, 24, 0.25);
    color: var(--accent);
    padding: 7px 12px;
    border-radius: 7px;
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition:
        background 0.2s,
        border-color 0.2s;
}
.grr-manage-btn:hover {
    background: rgba(235, 189, 24, 0.18);
    border-color: rgba(235, 189, 24, 0.4);
}
.grr-role-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 189, 24, 0.3) transparent;
}
.grr-role-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
}
.grr-role-item:last-child {
    border-bottom: none;
}
.grr-role-item .grr-role-cb {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.grr-role-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.grr-role-name {
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    color: var(--text);
}
.gm-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}
.gm-switch input {
    display: none;
}
.gm-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition:
        background 0.2s,
        border-color 0.2s;
}
.gm-switch-slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition:
        transform 0.2s,
        background 0.2s;
}
.gm-switch input:checked + .gm-switch-slider {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}
.gm-switch input:checked + .gm-switch-slider::after {
    transform: translateX(20px);
    background: #22c55e;
}

.gm-error {
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 12px 24px 0;
}
.gm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 18px 24px;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.gm-btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.gm-btn-delete:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.45);
}
.gm-footer-right {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.gm-footer-left {
    display: flex;
    gap: 8px;
}
.gm-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.gm-btn-danger:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.45);
}
.gm-btn-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
    padding: 8px 18px;
    border-radius: 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition:
        border-color 0.15s,
        color 0.15s;
}
.gm-btn-cancel:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text);
}
.gm-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    border: none;
    color: #111;
    padding: 8px 20px;
    border-radius: 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.gm-btn-save:hover {
    opacity: 0.88;
}

/* Events */
.ev-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ev-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0 16px;
    border-radius: 9px;
    background: var(--accent);
    color: #000;
    border: none;
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: opacity 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ev-new-btn:hover {
    opacity: 0.92;
    box-shadow: 0 0 0 3px rgba(255,210,0,0.15);
}
.ev-new-btn:active {
    transform: scale(0.97);
}
.ev-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0 16px;
    border-radius: 9px;
    background: #5865f2;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: opacity 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ev-sync-btn:hover {
    opacity: 0.92;
    box-shadow: 0 0 0 3px rgba(88,101,242,0.2);
}
.ev-sync-btn:active {
    transform: scale(0.97);
}
.ev-sync-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.ev-form {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ev-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ev-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    text-transform: uppercase;
}
.ev-label-hint {
    font-weight: 400;
    text-transform: none;
}
.ev-textarea {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 10px 12px;
    resize: vertical;
    outline: none;
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    transition: border-color 0.2s;
}
.ev-textarea:focus {
    border-color: rgba(235, 189, 24, 0.5);
}
.ev-banner-preview {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.ev-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: var(--accent);
    color: #000;
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: opacity 0.15s;
    margin-top: 4px;
}
.ev-create-btn:hover {
    opacity: 0.88;
}
.ev-create-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ev-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text);
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition:
        border-color 0.2s,
        background 0.15s;
}
.ev-save-btn:hover {
    border-color: var(--accent);
    background: rgba(235, 189, 24, 0.06);
}
.ev-section-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 14px 16px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ev-section-label--past {
    color: var(--text-dim);
    opacity: 0.6;
}
.ev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 12px 10px;
}
.ev-card {
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg3);
    overflow: hidden;
    transition: border-color 0.2s;
}
.ev-card:hover {
    border-color: rgba(235, 189, 24, 0.35);
}
.ev-card--past {
    opacity: 0.55;
}
.ev-card-banner {
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    display: block;
}
.ev-card {
    display: flex;
    flex-direction: column;
}
.ev-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ev-card-desc {
    flex: 1;
}
.ev-card-date {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.ev-card-title {
    font-family: "Rajdhani", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.ev-card-desc {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 10px;
}
.ev-card-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.ev-card-author {
    font-size: 12px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}
.ev-card-discord {
    font-size: 11px;
    color: #7289da;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ev-delete-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 0.15s;
}
.ev-delete-btn:hover {
    background: rgba(231, 76, 60, 0.22);
}
.ev-announce-btn {
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(114, 137, 218, 0.3);
    background: rgba(114, 137, 218, 0.1);
    color: #7289da;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    font-size: 11px;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition:
        background 0.15s,
        border-color 0.15s;
    margin-left: auto;
}
.ev-announce-btn:hover {
    background: rgba(114, 137, 218, 0.22);
    border-color: rgba(114, 137, 218, 0.5);
}
.ev-announce-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.ev-edit-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition:
        background 0.15s,
        color 0.15s;
}
.ev-edit-btn:hover {
    background: rgba(235, 189, 24, 0.12);
    color: var(--accent);
    border-color: rgba(235, 189, 24, 0.3);
}

/* Event Edit Modal */
.ev-edit-modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 520px;
    max-width: 94vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.ev-edit-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
}
.team-detail-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .65rem 1rem .6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.team-detail-tab:hover { color: var(--text); }
.team-detail-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.ev-edit-modal-title {
    font-family: "Rajdhani", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ev-edit-modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 189, 24, 0.3) transparent;
}
.ev-edit-modal-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.ev-edit-cancel-btn {
    padding: 8px 18px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.ev-edit-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}
.ev-edit-delete-btn {
    padding: 8px 18px;
    border-radius: 7px;
    border: 1px solid rgba(231, 76, 60, 0.35);
    background: none;
    color: #e74c3c;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ev-edit-delete-btn:hover {
    background: rgba(231, 76, 60, 0.1);
}
body.light-mode .ev-edit-modal {
    background: #fff;
}
body.light-mode .ev-edit-cancel-btn {
    background: #f3f4f6;
    border-color: rgba(0, 0, 0, 0.1);
    color: #374151;
}

/* Embed Editor */
.ev-embed-editor {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    margin-top: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .ev-embed-editor {
        grid-template-columns: 1fr;
    }
}
.ev-embed-fields {
    display: flex;
    flex-direction: column;
}

/* Discord Embed Preview */
.ev-embed-preview-wrap {
    position: sticky;
    top: 20px;
}
.ev-embed-preview-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.ev-embed-preview {
    background: #2f3136;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
}
.ev-embed-preview-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ebbd18;
}
.ev-embed-preview-content {
    display: flex;
    gap: 12px;
    padding: 10px 12px 4px 16px;
}
.ev-embed-preview-main {
    flex: 1;
    min-width: 0;
}
.ev-embed-preview-title {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
    line-height: 1.3;
}
.ev-embed-preview-desc {
    color: #dcddde;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
    opacity: 0.7;
}
.ev-embed-preview-field {
    margin-bottom: 8px;
}
.ev-embed-preview-fname {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 2px;
}
.ev-embed-preview-fval {
    color: #dcddde;
    font-size: 11px;
}
.ev-embed-preview-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
}
.ev-embed-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ev-embed-preview-footer {
    color: #72767d;
    font-size: 10px;
    padding: 0 12px 10px 16px;
    margin-top: 2px;
}
body.light-mode .ev-embed-preview {
    background: #2f3136;
}
body.light-mode .ev-embed-preview-title {
    color: #fff;
}
body.light-mode .ev-embed-preview-desc {
    color: #dcddde;
}
body.light-mode .ev-embed-preview-footer {
    color: #72767d;
}

/* Event Settings Grid */
.ev-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}
@media (max-width: 700px) {
    .ev-settings-grid {
        grid-template-columns: 1fr;
    }
}
.ev-settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ev-settings-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ev-settings-select-wrap {
    position: relative;
}

/* Settings Sub-Tabs */
.st-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
}
.st-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition:
        color 0.15s,
        border-color 0.15s;
    white-space: nowrap;
}
.st-tab:hover {
    color: var(--text);
}
.st-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.st-panel {
    display: none;
}
.st-panel--active {
    display: block;
}

/* Settings Sub-Tabs: Mobile Dropdown */
.st-tabs-mobile {
    display: none;
}

/* Confirm Dialog */
#confirmOverlay {
    z-index: 1100;
}
.confirm-modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeUp 0.18s ease both;
}
.confirm-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #f87171;
    margin-bottom: 16px;
}
.confirm-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 8px;
}
.confirm-msg {
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 24px;
}
.confirm-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}
.confirm-btn-cancel {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition:
        border-color 0.15s,
        color 0.15s;
}
.confirm-btn-cancel:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text);
}
.confirm-btn-ok {
    flex: 1;
    padding: 10px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    color: #f87171;
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.confirm-btn-ok:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.55);
}

/* Shared modal form elements */
.gm-notice {
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    color: var(--text-dim);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
}
.gm-notice i {
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--gm-color, var(--accent));
}
.gm-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 10px 14px;
    color: #fff;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.gm-select:focus {
    border-color: rgba(235, 189, 24, 0.4);
}
.gm-select option {
    background: #1a2035;
}
.gm-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 10px 14px;
    color: #fff;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.gm-textarea:focus {
    border-color: rgba(235, 189, 24, 0.4);
}
.gm-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    background: color-mix(in srgb, var(--btn-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--btn-color) 45%, transparent);
    color: var(--btn-color);
}

/* ── Community Reputation System ─────────────────────────────────────────────── */

/* Member detail reputation section */
.rep-score-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.rep-score-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.6rem;
    letter-spacing: 1px;
    flex-shrink: 0;
    line-height: 1;
}
.rep-score-badge i {
    font-size: 1rem;
}
.rep-score-info {
    flex: 1;
    min-width: 0;
}
.rep-tier-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}
.rep-progress-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}
.rep-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}
.rep-score-num {
    font-family: "Exo 2", sans-serif;
    font-size: 11px;
    color: var(--text-dim);
}

/* History in member detail */
.rep-history {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rep-hist-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rep-hist-delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 7px;
    border-radius: 6px;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.rep-hist-label {
    font-family: "Exo 2", sans-serif;
    font-size: 0.8rem;
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rep-hist-meta {
    font-family: "Exo 2", sans-serif;
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Reputation tab overview */
.rep-table-score {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rep-tier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-family: "Exo 2", sans-serif;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Reputation modal */
.rep-type-selector {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}
.rep-type-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s;
}
.rep-type-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
}
.rep-type-btn--active {
    border-color: var(--gm-color, var(--accent));
    color: var(--gm-color, var(--accent));
    background: color-mix(
        in srgb,
        var(--gm-color, var(--accent)) 12%,
        transparent
    );
}
.rep-delta-preview {
    margin-top: 6px;
    min-height: 18px;
}

/* Log icon for reputation */
.mgmt-log-icon--reputation {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.gm-btn-action:hover {
    opacity: 0.8;
}

/* ── Light Mode Overrides ─────────────────────────────────────────────────── */
body.light-mode {
    background: var(--bg);
    color: var(--text);
}

/* Layout */
body.light-mode .ucp-sidebar {
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
}
body.light-mode .ucp-main {
    background: #f0f2f5;
}
body.light-mode .ucp-content {
    background: #f0f2f5;
}

/* Panels & Cards */
body.light-mode .ucp-panel {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
body.light-mode .ucp-panel-header {
    background: #f8f9fb;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    color: #374151;
}
body.light-mode .mgmt-stat-card {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
body.light-mode .dash-event {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .dash-mod-badge {
    background: rgba(180, 140, 0, 0.1);
}
body.light-mode .mgmt-stat-lbl {
    color: #6b7280;
}
body.light-mode .ts-card {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
body.light-mode .ts-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(180, 140, 0, 0.12);
}

/* Navigation */
body.light-mode .ucp-nav-item {
    color: #374151;
}
body.light-mode .ucp-nav-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #111827;
}
body.light-mode .ucp-nav-item.active {
    background: rgba(180, 140, 0, 0.1);
    color: #111827;
}
body.light-mode .ucp-nav-label {
    color: #9ca3af;
}
body.light-mode .ucp-ausweis {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .ucp-ausweis-name {
    color: #111827;
}
body.light-mode .ucp-sidebar-foot {
    color: #9ca3af;
    border-top-color: rgba(0, 0, 0, 0.07);
}

/* Table */
body.light-mode .mgmt-members-table th {
    background: #f8f9fb;
    color: #6b7280;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .mgmt-members-table td {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.light-mode .mgmt-members-table tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}
body.light-mode .mgmt-id-cell {
    color: #9ca3af;
}
body.light-mode .mgmt-date-cell {
    color: #6b7280;
}
body.light-mode .mgmt-member-tag {
    color: #9ca3af;
}

/* Search & Toolbar */
body.light-mode .mgmt-members-toolbar {
    background: #f8f9fb;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
body.light-mode .mgmt-search-wrap {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
}
body.light-mode .mgmt-search-input {
    color: #1a1c23;
    background: transparent;
}
body.light-mode .mgmt-members-count {
    color: #6b7280;
}
body.light-mode .mgmt-settings-refresh-btn {
    color: #6b7280;
}

/* Inputs */
body.light-mode
    input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
body.light-mode textarea,
body.light-mode select {
    color: #1a1c23;
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
}
body.light-mode .gm-select,
body.light-mode .gm-textarea {
    background: #f8f9fb;
    color: #1a1c23;
    border-color: rgba(0, 0, 0, 0.12);
}

/* Modals */
body.light-mode .gm-modal {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
body.light-mode .gm-section {
    border-top-color: rgba(0, 0, 0, 0.07);
}
body.light-mode .gm-section-label {
    color: #6b7280;
}
body.light-mode .gm-perm-name {
    color: #374151;
}
body.light-mode .grr-summary-row {
    background: #f8f9fb;
    border-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .grr-summary-text {
    color: #6b7280;
}
body.light-mode .grr-role-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .grr-role-name {
    color: #374151;
}
body.light-mode .gm-modal-title-name {
    color: #111827;
}
body.light-mode .gm-modal-sublabel {
    color: #9ca3af;
}
body.light-mode .gm-footer {
    border-top-color: rgba(0, 0, 0, 0.07);
    background: #f8f9fb;
}
body.light-mode .gm-btn-cancel {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #374151;
}
body.light-mode .gm-name-input {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1c23;
}
body.light-mode .md2-modal {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
body.light-mode .md2-sep,
body.light-mode .md2-vert-sep,
body.light-mode .md2-col-sep {
    background: rgba(0, 0, 0, 0.07);
}
body.light-mode .md2-display-name {
    color: #111827;
}
body.light-mode .md2-info-label {
    color: #6b7280;
}
body.light-mode .md2-section-lbl {
    color: #9ca3af;
}
body.light-mode .md2-textarea {
    background: #f8f9fb;
    color: #1a1c23;
    border-color: rgba(0, 0, 0, 0.12);
}
body.light-mode .md2-btn-ghost {
    border-color: rgba(0, 0, 0, 0.12);
    color: #374151;
}
body.light-mode .md2-tab-bar {
    border-bottom-color: rgba(0, 0, 0, 0.09);
}
body.light-mode .md2-tab-btn {
    color: #6b7280;
}
body.light-mode .md2-tab-btn:hover {
    color: #111827;
}
body.light-mode .md2-comment-view {
    color: #374151;
}
body.light-mode .md2-actions-bar {
    background: #f8f9fb;
    border-top-color: rgba(0, 0, 0, 0.07);
}
body.light-mode .md2-hierarchy-notice {
    color: #9ca3af;
}
body.light-mode .ts-modal {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .ts-modal-head {
    border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}
body.light-mode .ts-ticket-sidebar {
    background: #f8f9fb;
    border-left-color: rgba(0, 0, 0, 0.07);
}
body.light-mode .ts-ticket-sidebar-section {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}
body.light-mode .ts-ticket-sidebar-label {
    color: #9ca3af;
}
body.light-mode .ts-sidebar-detail-row span:first-child {
    color: #6b7280;
}
body.light-mode .ts-messages {
    background: #f8f9fb;
}

body.light-mode .ts-reply {
    border-top-color: rgba(0, 0, 0, 0.07);
    background: #f8f9fb;
}
body.light-mode .ts-composer {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
}
body.light-mode .ts-composer textarea {
    color: #1a1c23;
}
body.light-mode .ts-composer-attach {
    color: #888;
}
body.light-mode .ts-composer-attach:hover {
    background: rgba(0, 0, 0, 0.05);
}
body.light-mode .ts-img-preview-box {
    border-color: rgba(0, 0, 0, 0.12);
}
body.light-mode .ts-status-select {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1c23;
}

/* Settings */
body.light-mode .mgmt-gc {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .mgmt-gc-footer {
    background: #f8f9fb;
    border-top-color: rgba(0, 0, 0, 0.07);
}
body.light-mode .mgmt-gc-count {
    color: #6b7280;
}
body.light-mode .mgmt-gc-badge--builtin {
    background: rgba(0, 0, 0, 0.06);
    color: #6b7280;
}
body.light-mode .mgmt-gc-badge--custom {
    background: rgba(180, 140, 0, 0.12);
    color: var(--accent2);
}
body.light-mode .mgmt-user-perm-row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .mgmt-user-perm-edit-btn {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #6b7280;
}
body.light-mode .st-tabs {
    border-bottom-color: rgba(0, 0, 0, 0.09);
    background: #f8f9fb;
}
body.light-mode .st-tab {
    color: #6b7280;
}
body.light-mode .st-tab--active {
    color: var(--accent2);
    border-bottom-color: var(--accent2);
}
body.light-mode .st-tabs-mobile {
    background: #f8f9fb;
    border-color: rgba(0, 0, 0, 0.09);
}
body.light-mode .st-tabs-mobile-icon {
    color: var(--accent2);
}
body.light-mode .st-tabs-mobile-select {
    color: #1a1c23;
}
body.light-mode .st-tabs-mobile-select option {
    background: #fff;
}
body.light-mode .mgmt-settings-section {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}
body.light-mode .mgmt-settings-section-title {
    color: #374151;
}
body.light-mode .mgmt-settings-desc {
    color: #6b7280;
}

/* Logs */
body.light-mode .mgmt-logs-toolbar {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}
body.light-mode .mgmt-log-filter {
    color: #6b7280;
    border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .mgmt-log-filter--active {
    background: rgba(180, 140, 0, 0.1);
    color: var(--accent2);
    border-color: rgba(180, 140, 0, 0.3);
}
body.light-mode .mgmt-log-entry {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .mgmt-log-detail {
    color: #6b7280;
}
body.light-mode .mgmt-log-role-badge {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #6b7280;
}
body.light-mode .mgmt-log-time {
    color: #9ca3af;
}

/* Filters & Badges */
body.light-mode .ts-filter {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    color: #374151;
}
body.light-mode .ts-filter--active {
    background: rgba(180, 140, 0, 0.1);
    color: var(--accent2);
    border-color: rgba(180, 140, 0, 0.3);
}
body.light-mode .ts-card-id {
    color: #9ca3af;
}
body.light-mode .ts-card-cat {
    color: #6b7280;
}
body.light-mode .ts-card-foot {
    color: #9ca3af;
    border-top-color: rgba(0, 0, 0, 0.07);
}

/* Topbar buttons */
body.light-mode .ucp-logout-btn {
    color: #374151;
    border-color: rgba(0, 0, 0, 0.15);
    background: transparent;
}
body.light-mode .ucp-logout-btn:hover {
    border-color: var(--red);
    color: var(--red);
}
body.light-mode .mob-menu-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: #374151;
}

/* Confirm dialog */
body.light-mode .confirm-modal {
    background: #fff;
}
body.light-mode .confirm-title {
    color: #111827;
}
body.light-mode .confirm-msg {
    color: #6b7280;
}

/* Misc remaining text */
body.light-mode .mgmt-detail-name,
body.light-mode .mgmt-info-item-val,
body.light-mode .mgmt-ic-money-val {
    color: var(--text);
}
body.light-mode .mgmt-user-perm-edit-btn {
    background: #f8f9fb;
}
body.light-mode .mgmt-settings-section-title {
    color: #374151;
}
body.light-mode .ucp-panel-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .mgmt-loading {
    color: #6b7280;
}
body.light-mode .gm-modal-x {
    color: #6b7280;
}
body.light-mode .gm-modal-x:hover {
    color: #111827;
    background: rgba(0, 0, 0, 0.05);
}
body.light-mode .ts-filter-count {
    color: #9ca3af;
}
body.light-mode .embed-editor-container .editor-form,
body.light-mode .embed-editor-container .embed-preview,
body.light-mode .embed-editor-container .template-panel {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
}

/* Theme toggle button */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: var(--panel-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s,
        box-shadow 0.15s;
}
.theme-toggle-btn:hover {
    background: rgba(255,210,0,0.04);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,210,0,0.08);
}
body.light-mode .theme-toggle-btn {
    border-color: var(--border);
    color: #374151;
}
body.light-mode .theme-toggle-btn:hover {
    border-color: var(--accent);
}

.notif-bell-wrap {
    position: relative;
}
.notif-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-sizing: border-box;
}
.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: 90vw;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    z-index: 500;
    overflow: hidden;
}
.notif-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.notif-mark-all-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.notif-mark-all-btn:hover {
    text-decoration: underline;
}
.notif-dropdown-list {
    max-height: 380px;
    overflow-y: auto;
}
.notif-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-dim);
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
}
.notif-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background .12s;
}
.notif-item:last-child {
    border-bottom: none;
}
.notif-item:hover {
    background: rgba(255,255,255,0.03);
}
.notif-item--unread {
    background: rgba(235, 189, 24, 0.06);
}
.notif-item-title {
    font-family: "Exo 2", sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.notif-item-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.notif-item-body {
    font-size: 12px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-time {
    font-size: 11px;
    color: var(--text-dim);
    opacity: .7;
}
body.light-mode .notif-dropdown {
    background: #fff;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
body.light-mode .notif-item--unread {
    background: rgba(235, 189, 24, 0.1);
}

/* ── Todo Liste ────────────────────────────────────────────────────────────── */
.todo-desc-input {
    resize: vertical;
    height: 80px;
    width: 100%;
}
.todo-desc-input--lg {
    height: 220px;
}

/* Todo detail modal: larger + nicer proportions, fixed height */
.todo-detail-modal {
    height: 700px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.todo-detail-modal .gm-modal-head {
    padding: 20px 24px;
    flex-shrink: 0;
}
.todo-detail-modal .gm-modal-icon,
.todo-detail-modal .gm-modal-icon-inner {
    width: 46px;
    height: 46px;
}
.todo-detail-modal .gm-modal-head .todo-title-input {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.todo-detail-modal .gm-error {
    margin: 8px 28px 0;
    flex-shrink: 0;
}
.todo-detail-modal #todoDetailPanel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Todo detail: two-column layout (main content left, meta fields right) */
.todo-detail-columns {
    display: flex;
    gap: 28px;
    padding: 22px 28px 22px;
    flex: 1;
    min-height: 0;
}
.todo-detail-col-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}
.todo-detail-col-main .gm-section {
    padding: 20px 0 0;
}
.todo-detail-col-main .gm-section:first-child {
    padding-top: 0;
}
.todo-detail-col-side {
    width: 300px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px 20px 4px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.todo-info-bottom-group {
    margin-top: auto;
}
.todo-info-row--actions {
    justify-content: flex-end;
    gap: 4px;
}
.todo-delete-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
}
.todo-delete-link:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
body.light-mode .todo-detail-col-side {
    background: rgba(0, 0, 0, 0.02);
}
@media (max-width: 720px) {
    .todo-detail-columns {
        flex-direction: column;
    }
    .todo-detail-col-side {
        width: 100%;
    }
}

/* Infos panel: label/value rows, inline-editable */
.todo-infos-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: 18px;
    letter-spacing: 0.5px;
    color: var(--text);
    padding: 14px 0 4px;
}
.todo-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid var(--border);
}
.todo-info-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    flex-shrink: 0;
}
.todo-info-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    justify-content: flex-end;
}
.todo-info-value--static {
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    color: var(--text);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.todo-info-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.todo-info-dot--prio-low     { background: #9ca3af; }
.todo-info-dot--prio-medium  { background: #f59e0b; }
.todo-info-dot--prio-high    { background: #ef4444; }
.todo-info-dot--status-todo     { background: #6b7280; }
.todo-info-dot--status-progress { background: #f59e0b; }
.todo-info-dot--status-blocked  { background: #ef4444; }
.todo-info-dot--status-preview  { background: #a855f7; }
.todo-info-dot--status-done     { background: #22c55e; }

.todo-info-select,
.todo-info-date {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent !important;
    background-image: none;
    border: none;
    box-shadow: none;
    color: var(--text);
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    text-align: right;
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 6px;
    min-width: 0;
    max-width: 170px;
    transition: background 0.12s;
}
.todo-info-select:hover,
.todo-info-date:hover {
    background: rgba(255, 255, 255, 0.06);
}
.todo-info-select:focus,
.todo-info-date:focus {
    outline: none;
    background: rgba(235, 189, 24, 0.1);
}
.todo-info-select:disabled,
.todo-info-date:disabled {
    cursor: default;
    opacity: 0.7;
}
body.light-mode .todo-info-select:hover,
body.light-mode .todo-info-date:hover {
    background: rgba(0, 0, 0, 0.05);
}
.todo-info-date::-webkit-calendar-picker-indicator {
    cursor: pointer;
}
body.light-mode .todo-info-date {
    color-scheme: light;
}
body:not(.light-mode) .todo-info-date {
    color-scheme: dark;
}

/* Inline-editable title (no bordered input look until focused) */
.todo-title-input {
    width: 100%;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 10px;
    margin: 0 -10px;
    font-family: "Exo 2", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.1px;
    color: var(--text);
    transition: background 0.12s, border-color 0.12s;
}
.todo-title-input:hover {
    background: rgba(255, 255, 255, 0.04);
}
.todo-title-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
}
body.light-mode .todo-title-input:hover {
    background: rgba(0, 0, 0, 0.03);
}
body.light-mode .todo-title-input:focus {
    background: rgba(0, 0, 0, 0.03);
}
.todo-title-input--done {
    color: var(--text-dim);
    text-decoration: line-through;
    text-decoration-color: rgba(34, 197, 94, 0.6);
}

/* "Erledigt" toggle in the sidebar */
.todo-done-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
}
.todo-done-link:hover {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
.todo-done-link--done {
    color: #22c55e;
}
.todo-done-link:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Checkliste (Subtasks) */
.todo-subtasks-section {
    margin-top: 16px;
    flex-shrink: 0;
}
.todo-subtasks-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}
.todo-subtask-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-radius: 8px;
}
.todo-subtask-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
body.light-mode .todo-subtask-row:hover {
    background: rgba(0, 0, 0, 0.03);
}
.todo-subtask-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.todo-subtask-title {
    flex: 1;
    min-width: 0;
    font-family: "Exo 2", sans-serif;
    font-size: 13.5px;
    color: var(--text);
    overflow-wrap: break-word;
}
.todo-subtask-title--done {
    color: var(--text-dim);
    text-decoration: line-through;
}
.todo-subtask-delete {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: var(--text-dim);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.1s, background 0.1s, color 0.1s;
}
.todo-subtask-row:hover .todo-subtask-delete {
    opacity: 1;
}
.todo-subtask-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.todo-subtask-add {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
}
.todo-subtask-add input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    font-family: "Exo 2", sans-serif;
    font-size: 13.5px;
    color: var(--text);
    padding: 6px 4px;
}
.todo-subtask-add input::placeholder {
    color: var(--text-dim);
}
.todo-subtask-add button {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.todo-subtask-add button:hover {
    background: var(--accent);
    color: #1a1a1a;
}
body.light-mode .todo-subtask-add button {
    background: rgba(0, 0, 0, 0.05);
}

/* Filter bar */
.todo-filter-bar {
    display: flex;
    gap: 6px;
    padding: 10px 24px 15px;
}
.todo-filter-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
    padding: 5px 16px;
    border-radius: 20px;
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}
.todo-filter-btn:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.25);
}
.todo-filter-btn--active {
    background: rgba(235, 189, 24, 0.12);
    border-color: rgba(235, 189, 24, 0.45);
    color: var(--accent);
}

/* Section labels */
.todo-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px 10px;
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
}
.todo-section-label--rest {
    padding-top: 20px;
    color: var(--text-dim);
}
.todo-section-count {
    background: rgba(235, 189, 24, 0.15);
    color: var(--accent);
    border-radius: 10px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 700;
}

/* Cards container */
.todo-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px 24px;
}
.todo-cards--mine {
    padding-bottom: 8px;
}

/* Individual card */
.todo-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid transparent;
    border-radius: 12px;
    padding: 14px 16px 14px 14px;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.todo-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}
.todo-card--done {
    opacity: 0.55;
}
.todo-card--high {
    border-left-color: #f87171;
}
.todo-card--medium {
    border-left-color: #fbbf24;
}
.todo-card--low {
    border-left-color: #6b7280;
}

/* Check button */
.todo-check-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: transparent;
    margin-top: 1px;
    transition:
        border-color 0.15s,
        background 0.15s,
        color 0.15s,
        transform 0.1s;
}
.todo-check-btn:hover {
    border-color: #4ade80;
    color: rgba(74, 222, 128, 0.6);
    transform: scale(1.1);
}
.todo-check-btn--done {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}
.todo-check-btn--done:hover {
    background: rgba(74, 222, 128, 0.06);
    color: rgba(74, 222, 128, 0.4);
}

/* Card body */
.todo-card-body {
    flex: 1;
    min-width: 0;
}
.todo-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.todo-card-title {
    font-family: "Rajdhani", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    flex: 1;
}
.todo-card--done .todo-card-title {
    text-decoration: line-through;
    color: var(--text-dim);
}
.todo-edit-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}
.todo-edit-btn:hover {
    color: var(--accent);
    border-color: rgba(235, 189, 24, 0.4);
    background: rgba(235, 189, 24, 0.08);
}
.todo-card-desc {
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 8px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}
.todo-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.todo-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 9px;
    border-radius: 10px;
}
.todo-chip--prio-high {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}
.todo-chip--prio-medium {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}
.todo-chip--prio-low {
    background: rgba(107, 114, 128, 0.12);
    color: #9ca3af;
}
.todo-chip--due {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
}
.todo-chip--overdue {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}
.todo-chip--today {
    background: rgba(239, 68, 68, 0.1);
    color: #fb923c;
}
.todo-chip--tomorrow {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}
.todo-chip--soon {
    background: rgba(251, 191, 36, 0.07);
    color: #fcd34d;
}
.todo-chip--assignee {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}
.todo-chip--done-by {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
}
.todo-chip--author {
    background: transparent;
    color: var(--text-dim);
    padding-left: 0;
}

/* Todo comments (inline, part of the combined details page) */
.todo-comments-section {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Todo chat */
.todo-chat-body {
    min-height: 260px;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
}
.todo-chat-body--inline {
    min-height: 0;
    max-height: none;
    padding: 0;
    margin-bottom: 12px;
}
.todo-chat-loading {
    text-align: center;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    margin: auto;
    padding: 24px 0;
}
.todo-chat-empty {
    text-align: center;
    color: var(--text-dim);
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: auto;
    padding: 24px 0;
    line-height: 1.8;
}
.todo-chat-empty i {
    font-size: 28px;
    opacity: 0.4;
}
.todo-chat-empty span {
    font-size: 12px;
    font-weight: 400;
}
.todo-chat-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    overflow: hidden;
}
.todo-chat-avatar--own {
    order: 1;
}
.todo-chat-body .ts-msg--own .ts-msg-body {
    text-align: left;
}
.todo-chat-body .ts-msg--own .ts-msg-meta {
    flex-direction: row;
}
.todo-chat-composer {
    border-radius: 9px;
    border: 1px solid var(--border);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--bg2);
    margin-top: 8px;
    box-shadow: 0 -6px 10px -4px rgba(0, 0, 0, 0.25);
}
body.light-mode .todo-chat-composer {
    box-shadow: 0 -6px 10px -4px rgba(0, 0, 0, 0.08);
}
.todo-chat-composer--collapsed {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.todo-chat-composer--collapsed .ts-composer-toolbar,
.todo-chat-composer--collapsed .ts-img-preview-box {
    display: none;
}
.todo-chat-composer--collapsed textarea {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg3);
}
.todo-chat-composer--collapsed:hover textarea {
    border-color: rgba(235, 189, 24, 0.35);
}

/* Light mode */
body.light-mode .todo-filter-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #6b7280;
}
body.light-mode .todo-filter-btn:hover {
    color: #374151;
    border-color: rgba(0, 0, 0, 0.2);
}
body.light-mode .todo-filter-btn--active {
    background: rgba(180, 130, 0, 0.08);
    border-color: rgba(180, 130, 0, 0.4);
    color: #b47a00;
}
body.light-mode .todo-card {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
body.light-mode .todo-card:hover {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.14);
}
body.light-mode .todo-card-title {
    color: #1f2937;
}
body.light-mode .todo-check-btn {
    border-color: rgba(0, 0, 0, 0.2);
}
body.light-mode .todo-check-btn:hover {
    border-color: #16a34a;
    color: rgba(22, 163, 74, 0.6);
}
body.light-mode .todo-check-btn--done {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}
body.light-mode .todo-edit-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.09);
    color: #6b7280;
}
body.light-mode .todo-edit-btn:hover {
    color: #b47a00;
    border-color: rgba(180, 130, 0, 0.4);
    background: rgba(180, 130, 0, 0.06);
}
body.light-mode .todo-chip--prio-high {
    background: rgba(239, 68, 68, 0.08);
}
body.light-mode .todo-chip--prio-medium {
    background: rgba(180, 130, 0, 0.1);
    color: #b47a00;
}
body.light-mode .todo-chip--prio-low {
    background: rgba(0, 0, 0, 0.06);
    color: #6b7280;
}
body.light-mode .todo-chip--due {
    background: rgba(0, 0, 0, 0.05);
}
body.light-mode .todo-chip--done-by {
    background: rgba(22, 163, 74, 0.08);
    color: #15803d;
}
body.light-mode .todo-chip--assignee {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}
body.light-mode .todo-section-label {
    color: #b47a00;
}
body.light-mode .todo-section-label--rest {
    color: #6b7280;
}
body.light-mode .todo-section-count {
    background: rgba(180, 130, 0, 0.1);
    color: #b47a00;
}

/* ── Mobile hamburger / backdrop (hidden on desktop) ──────────────────────── */
@media (max-width: 900px) {
    .mob-menu-btn {
        display: flex;
    }
}
.mob-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.mob-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
.mob-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 149;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}
.mob-backdrop--active {
    display: block;
}

/* ── Mobile breakpoint ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Layout */
    .ucp-shell {
        flex-direction: column;
    }
    .ucp-main {
        margin-left: 0;
    }

    /* Sidebar: versteckt, slide in über Hamburger */
    .ucp-sidebar {
        display: none !important;
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 270px;
        z-index: 150;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }
    .ucp-sidebar.sidebar--open {
        display: flex !important;
        transform: translateX(0);
    }

    /* Show hamburger, hide logout text */
    .mob-menu-btn {
        display: flex;
    }
    .mob-hide {
        display: none;
    }

    /* Topbar */
    .ucp-topbar {
        padding: 10px 14px;
        gap: 10px;
    }
    .ucp-greeting h1 {
        font-size: 1.2rem;
    }
    .topbar-search-btn {
        min-width: 0;
        padding: 0 10px;
    }
    .topbar-search-placeholder,
    .topbar-search-kbd {
        display: none;
    }
    .ucp-greeting p {
        display: none;
    }
    .ucp-logout-btn {
        padding: 0 10px;
        min-width: 0;
    }

    /* Stats: 2×2 grid */
    .mgmt-stat-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 12px;
    }
    .mgmt-stat-val {
        font-size: 1.4rem;
    }

    /* Dashboard */
    .dash-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .dash-chart-panel {
        grid-column: 1;
        grid-row: auto;
    }
    .dash-ticket-chart-panel {
        grid-column: 1;
        grid-row: auto;
    }
    .dash-side-panel {
        grid-column: 1;
        grid-row: auto;
    }
    .dash-events-panel {
        grid-column: 1;
        grid-row: auto;
    }
    .dash-mytasks-panel,
    .dash-events-panel,
    .dash-rep-panel,
    .dash-cl-panel {
        grid-column: 1;
        grid-row: auto;
    }
    .dash-full-panel {
        grid-column: 1;
    }
    .dash-chart-wrap {
        height: 220px;
    }

    /* Content padding */
    .ucp-content {
        padding: 0;
    }
    .ucp-panel {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Members toolbar */
    .mgmt-members-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    .mgmt-search-wrap {
        min-width: 0;
        flex: 1;
    }

    /* Tables: horizontal scroll */
    .mgmt-members-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 12px;
    }
    .mgmt-members-table th,
    .mgmt-members-table td {
        padding: 10px 10px;
    }
    .mgmt-member-name {
        font-size: 13px;
    }
    .mgmt-member-tag {
        font-size: 11px;
    }
    .mgmt-member-avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    /* Hide less important columns on mobile */
    .mgmt-members-table th:nth-child(3),
    .mgmt-members-table td:nth-child(3),
    .mgmt-members-table th:nth-child(4),
    .mgmt-members-table td:nth-child(4),
    .mgmt-members-table th:nth-child(5),
    .mgmt-members-table td:nth-child(5) {
        display: none;
    }

    /* Logs toolbar */
    .mgmt-logs-toolbar {
        padding: 10px 12px;
    }
    .mgmt-logs-filter-row {
        flex-wrap: wrap;
        gap: 4px;
    }
    .mgmt-log-filter {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Pagination */
    .mgmt-pagination {
        padding: 10px 12px;
    }

    /* Settings grid: single column */
    .mgmt-groups-grid {
        grid-template-columns: 1fr;
    }

    /* Settings sub-tabs: dropdown instead of tab bar */
    .st-tabs {
        display: none;
    }
    .st-tabs-mobile {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 12px 16px 4px;
        padding: 11px 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }
    .st-tabs-mobile-icon {
        color: var(--accent);
        font-size: 15px;
        flex-shrink: 0;
    }
    .st-tabs-mobile-select {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        color: var(--text);
        font-family: "Rajdhani", sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.5px;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 2px center;
        padding-right: 18px;
    }
    .st-tabs-mobile-select option {
        background: #1a2035;
        color: #fff;
    }

    /* ── Overlays: slide up from bottom on mobile ── */
    .ts-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .ts-overlay .gm-modal,
    .ts-overlay .md2-modal {
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
    }

    /* Member detail: single column */
    .md2-body-grid {
        grid-template-columns: 1fr;
    }
    .md2-vert-sep {
        display: none;
    }
    .md2-col + .md2-col {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    /* Member detail header */
    .md2-header {
        padding: 16px 16px 14px;
        gap: 12px;
    }
    .md2-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    .md2-display-name {
        font-size: 1.2rem;
    }
    .md2-info-section {
        padding: 14px 16px;
        gap: 10px;
    }
    .md2-info-label {
        min-width: 100px;
        font-size: 0.78rem;
    }
    .md2-section {
        padding: 14px 16px;
    }
    .md2-actions-bar {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .md2-tab-bar {
        padding: 0 12px;
    }

    /* gm-modal on mobile */
    .gm-modal {
        max-width: 100%;
        width: 100%;
    }
    .gm-modal-head {
        padding: 16px 16px 14px;
    }
    .gm-section {
        padding: 14px 16px;
    }
    .gm-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    /* Todo on mobile */
    .todo-filter-bar {
        padding: 0 16px 14px;
    }
    .todo-cards {
        padding: 0 16px 20px;
        gap: 8px;
    }
    .todo-card {
        padding: 12px 12px 12px 12px;
        gap: 10px;
    }

    /* Ticket modal: full screen */
    .ts-overlay .ts-modal {
        border-radius: 12px 12px 0 0;
        width: 100%;
        max-height: 92vh;
    }
    .ts-modal-body {
        flex-direction: column;
    }
    .ts-ticket-sidebar {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        max-height: none;
    }

    /* Embed editor: single column */
    .embed-editor-container {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    /* Confirm modal */
    .confirm-modal {
        width: calc(100% - 32px);
        margin: 0 16px 16px;
    }

    /* Toast */
    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .mgmt-stat-row {
        grid-template-columns: 1fr 1fr;
    }
    .mgmt-action-btn {
        font-size: 11px;
        padding: 5px 10px;
    }
    .md2-section-lbl {
        font-size: 0.65rem;
    }
}

/* ── NEWS MODAL ──────────────────────────────────────────────────────────── */
.news-modal-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.news-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(235, 189, 24, 0.12);
    border: 1px solid rgba(235, 189, 24, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--accent);
    flex-shrink: 0;
}
.news-modal-sublabel {
    font-family: "Rajdhani", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 1px;
}
.news-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.news-tag-select {
    cursor: pointer;
}
.news-publish-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
}
.news-publish-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.news-publish-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.news-publish-hint {
    font-size: 11px;
    color: var(--text-dim);
}

/* ── DASHBOARD NEWS PANEL ─────────────────────────────────────────────────── */
.dash-news-panel {
    grid-column: span 1;
}
.dash-news-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.dash-news-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(235, 189, 24, 0.1);
    border: 1px solid rgba(235, 189, 24, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-news-icon {
    font-size: 22px;
    color: var(--accent);
}
.dash-news-desc {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    max-width: 220px;
}