/* /assets/styles.css */

:root {
    --gold: #d4a017;
    --gold-mid: #a07810;
    --gold-dim: #5a3e08;
    --bg: #070604;
    --surface: #0d0b08;
    --surface2: #111009;
    --border: #1c1810;
    --border2: #252010;
    --text: #ede0c8;
    --muted: #5c5040;
    --dim: #2a2218;
    --red: #8b1a1a;
    --green: #22c55e;
    --blue: #3b82f6;
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Space Mono', monospace;
}

/* KEEP ALL YOUR EXISTING CSS HERE */
/* (copy EVERYTHING from <style> in dashboard) */
/* ============================================================
   NEXUS — Consolidated Stylesheet  v1.6.2
   Velora.tv Community Manager Portal
   
   Fonts loaded in HTML: Space Mono 400/700 + Syne 700/800/900
   https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@700;800;900
   ============================================================ */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */

:root {
    --primary:      #d4a017;
    --primary-dark: #a07810;
    --gold:         #d4a017;
    --gold-mid:     #a07810;
    --gold-dim:     #5a3e08;
    --accent:       #8b1a1a;
    --bg:           #070604;
    --surface:      #0d0b08;
    --surface2:     #111009;
    --sidebar-bg:   #0d0b08;
    --card-bg:      #0d0b08;
    --border:       #1c1810;
    --border2:      #252010;
    --text:         #ede0c8;
    --muted:        #5c5040;
    --dim:          #2a2218;
    --red:          #8b1a1a;
    --green:        #22c55e;
    --blue:         #3b82f6;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html, body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    line-height: 1.5;
}

a { color: inherit; }

/* Scanline texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.04) 3px,
        rgba(0,0,0,0.04) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }


/* ============================================================
   3. LAYOUT — Sidebar + Main
   ============================================================ */

body {
    display: flex;
    overflow: hidden;
}

.sidebar {
    width: 260px;
    height: 100vh;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    z-index: 200;
    overflow: hidden;
    transition: width 0.2s ease;
}

body.sidebar-collapsed .sidebar { width: 56px; }
body.sidebar-collapsed .main    { margin-left: 56px !important; }
body.sidebar-collapsed .sidebar-brand,
body.sidebar-collapsed .sidebar-nav .nav-label-text { display: none; }

.sidebar-logo {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sidebar-logo img {
    width: 36px; height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
}

.sidebar-brand {
    font-family: 'Syne', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    color: var(--text);
    white-space: nowrap;
}

.sidebar-brand span { color: var(--gold); }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-section {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 1rem 1.5rem 0.4rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.12s, background 0.12s;
    white-space: nowrap;
    border-left: 2px solid transparent;
    font-family: 'Space Mono', monospace;
    position: relative;
}

.nav-link:hover {
    color: var(--text);
    background: rgba(212,160,23,0.04);
}

.nav-link.active {
    color: var(--gold);
    background: rgba(212,160,23,0.06);
    border-left-color: var(--gold);
}

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

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 150;
}

/* ── Main content area ── */
.main {
    margin-left: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
    transition: margin-left 0.2s ease;
    overflow-y: auto;
}


/* ============================================================
   4. TOPBAR
   ============================================================ */

.topbar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border);
    background: rgba(7,6,4,0.97);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 1rem;
    flex-shrink: 0;
}

.topbar h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    letter-spacing: 0.02em;
}

.mobile-menu-btn,
.sidebar-toggle-btn {
    width: 34px; height: 34px;
    border-radius: 6px;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.12s, border-color 0.12s;
    flex-shrink: 0;
}

.mobile-menu-btn:hover,
.sidebar-toggle-btn:hover {
    color: var(--gold);
    border-color: var(--gold-dim);
}

.notif-btn {
    width: 34px; height: 34px;
    border-radius: 6px;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.12s, border-color 0.12s;
    position: relative;
    text-decoration: none;
}
.notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

.badge-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    border-radius: 8px;
    background: var(--gold);
    color: var(--bg);
    font-size: 0.52rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: 'Space Mono', monospace;
}


/* ============================================================
   5. USER AVATAR & STATUS
   ============================================================ */

.avatar {
    width: 34px; height: 34px;
    border-radius: 7px;
    background: var(--gold-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bg);
    flex-shrink: 0;
    font-family: 'Syne', sans-serif;
    overflow: hidden;
}

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

.user-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Syne', sans-serif;
}

.user-role {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Status picker */
.status-picker {
    position: fixed;
    z-index: 500;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    min-width: 180px;
}

.status-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text);
    transition: background 0.12s;
}
.status-option:hover { background: rgba(212,160,23,0.06); }


/* ============================================================
   6. CONTENT, CARDS & PANELS
   ============================================================ */

.content {
    flex: 1;
    padding: 1.75rem 2rem;
}

/* Cards */
.card,
.section-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.card-header,
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
}

.card-title,
.section-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.02em;
}

.card-body,
.section-body {
    padding: 1.1rem 1.25rem;
}


/* ============================================================
   7. BUTTONS
   ============================================================ */

.btn-primary {
    background: var(--gold);
    border: none;
    border-radius: 3px;
    color: var(--bg);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-primary:hover { background: var(--gold-mid); color: var(--bg); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm { padding: 0.4rem 0.875rem; font-size: 0.65rem; }

.btn-outline {
    background: transparent;
    border: 1px solid var(--border2);
    border-radius: 3px;
    color: var(--muted);
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

.btn-danger {
    background: rgba(139,26,26,0.12);
    border: 1px solid rgba(139,26,26,0.35);
    border-radius: 3px;
    color: #f87171;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.12s;
}
.btn-danger:hover { background: rgba(139,26,26,0.25); }

.btn-sm-action {
    background: transparent;
    border: 1px solid var(--border2);
    border-radius: 3px;
    color: var(--muted);
    font-size: 0.65rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-sm-action:hover { color: var(--gold); border-color: var(--gold-dim); }

.btn-close { filter: invert(0.7); }


/* ============================================================
   8. FORMS & INPUTS
   ============================================================ */

.form-control,
.mod-input,
.form-select {
    background: var(--surface2) !important;
    border: 1px solid var(--border2) !important;
    border-radius: 3px !important;
    color: var(--text) !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.8rem !important;
    padding: 0.6rem 0.875rem !important;
    outline: none !important;
    transition: border-color 0.12s, box-shadow 0.12s !important;
    width: 100%;
}

.form-control:focus,
.mod-input:focus,
.form-select:focus {
    border-color: var(--gold-dim) !important;
    box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
}

.form-control::placeholder,
.mod-input::placeholder { color: var(--dim) !important; }

.form-label,
.mod-label {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 0.4rem;
    font-family: 'Space Mono', monospace;
}

textarea.form-control,
textarea.mod-input { resize: vertical; }

.form-check-input {
    background-color: var(--surface2);
    border-color: var(--border2);
}
.form-check-input:checked {
    background-color: var(--gold);
    border-color: var(--gold);
}

.input-group-text {
    background: var(--surface2);
    border-color: var(--border2);
    color: var(--muted);
}


/* ============================================================
   9. TABLES
   ============================================================ */

.admin-table,
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.admin-table th,
.table th {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-weight: 400;
    background: rgba(0,0,0,0.2);
    font-family: 'Space Mono', monospace;
}

.admin-table td,
.table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.admin-table tr:last-child td,
.table tr:last-child td { border-bottom: none; }

.admin-table tr:hover td,
.table tr:hover td { background: rgba(212,160,23,0.02); }


/* ============================================================
   10. BADGES, TAGS & PILLS
   ============================================================ */

.role-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
}
.role-admin   { background: rgba(212,160,23,0.15); color: var(--gold); border: 1px solid rgba(212,160,23,0.3); }
.role-manager { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.role-member  { background: rgba(34,197,94,0.1);  color: #86efac; border: 1px solid rgba(34,197,94,0.3); }

.priority-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
}
.badge-critical { background: rgba(239,68,68,0.15); color: #f87171; }
.badge-high     { background: rgba(245,158,11,0.15); color: #fbbf24; }
.badge-medium   { background: rgba(212,160,23,0.12); color: var(--gold); }
.badge-low      { background: rgba(59,130,246,0.12); color: #93c5fd; }

.mention {
    background: rgba(212,160,23,0.15);
    color: var(--gold);
    border-radius: 2px;
    padding: 0.05rem 0.3rem;
    font-size: 0.875em;
}

.tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
    margin-right: 0.25rem;
}
.tag-new  { background: rgba(34,197,94,0.12);  color: #86efac; }
.tag-fix  { background: rgba(239,68,68,0.12);  color: #f87171; }


/* ============================================================
   11. ALERTS
   ============================================================ */

.alert-success {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.25);
    border-left: 3px solid #22c55e;
    border-radius: 3px;
    padding: 0.75rem 1rem;
    color: #86efac;
    font-size: 0.78rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger,
.alert-error {
    background: rgba(139,26,26,0.1);
    border: 1px solid rgba(139,26,26,0.3);
    border-left: 3px solid #c0392b;
    border-radius: 3px;
    padding: 0.75rem 1rem;
    color: #f87171;
    font-size: 0.78rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================================
   12. MODALS (Bootstrap overrides)
   ============================================================ */

.modal-content {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 6px;
    color: var(--text);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 1.1rem 1.5rem;
}

.modal-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-body { padding: 1.25rem 1.5rem; }

.modal-footer {
    border-top: 1px solid var(--border);
    padding: 0.875rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}


/* ============================================================
   13. PAGE-SPECIFIC STYLES
   Each section below contains styles unique to that page.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   DASHBOARD  (dashboard.php)
   ──────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        body.sidebar-collapsed .sidebar { width: 56px; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
        body.sidebar-collapsed .sidebar-brand,
        body.sidebar-collapsed .nav-label-text,
        body.sidebar-collapsed .sidebar-footer .user-info,
        body.sidebar-collapsed .sidebar-footer .user-status-dot { display: none; }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-logo img {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section {
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.02em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
            font-family: 'Space Mono', monospace;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(212,160,23,0.04);
        }

        .nav-link.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-info-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.4rem 0;
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
            overflow: hidden;
        }

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

        .user-details { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Syne', sans-serif;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ════ MAIN ════ */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            transition: margin-left 0.2s ease;
        }

        /* ════ TOPBAR ════ */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.97);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
            gap: 1rem;
            flex-shrink: 0;
        }

        .topbar h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            letter-spacing: 0.02em;
        }

        .mobile-menu-btn, .sidebar-toggle-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .mobile-menu-btn:hover, .sidebar-toggle-btn:hover {
            color: var(--gold);
            border-color: var(--gold-dim);
        }

        .notif-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
            text-decoration: none;
        }
        .notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .badge-count {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 16px; height: 16px;
            border-radius: 8px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.52rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            font-family: 'Space Mono', monospace;
        }

        /* ════ CONTENT ════ */
        .content {
            flex: 1;
            padding: 1.75rem 2rem;
        }

        /* ════ CARDS ════ */
        .card, .section-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .card-header, .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            gap: 0.75rem;
        }

        .card-title, .section-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }

        .card-body, .section-body {
            padding: 1.1rem 1.25rem;
        }

        /* ════ BUTTONS ════ */
        .btn-primary {
            background: var(--gold);
            border: none;
            border-radius: 3px;
            color: var(--bg);
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.6rem 1.25rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--gold-mid); color: var(--bg); }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--muted);
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.12s, border-color 0.12s;
        }
        .btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

        .btn-danger {
            background: rgba(139,26,26,0.15);
            border: 1px solid rgba(139,26,26,0.35);
            border-radius: 3px;
            color: #f87171;
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            padding: 0.5rem 0.875rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.12s;
        }
        .btn-danger:hover { background: rgba(139,26,26,0.25); }

        /* ════ INPUTS ════ */
        .form-control, .mod-input, input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], select, textarea {
            background: var(--surface2, #111009) !important;
            border: 1px solid var(--border2) !important;
            border-radius: 3px !important;
            color: var(--text) !important;
            font-family: 'Space Mono', monospace !important;
            font-size: 0.8rem !important;
            padding: 0.6rem 0.875rem !important;
            outline: none !important;
            transition: border-color 0.12s !important;
            width: 100%;
        }
        .form-control:focus, .mod-input:focus,
        input:focus, select:focus, textarea:focus {
            border-color: var(--gold-dim) !important;
            box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
        }
        .form-control::placeholder, .mod-input::placeholder,
        input::placeholder, textarea::placeholder {
            color: var(--dim, #2a2218) !important;
        }

        /* ════ TABLES ════ */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .admin-table th {
            font-size: 0.6rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            text-align: left;
            font-weight: 400;
            background: rgba(0,0,0,0.2);
        }
        .admin-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.02); }

        /* ════ ALERTS ════ */
        .alert-success {
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.25);
            border-left: 3px solid #22c55e;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #86efac;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }
        .alert-danger, .alert-error {
            background: rgba(139,26,26,0.1);
            border: 1px solid rgba(139,26,26,0.3);
            border-left: 3px solid #c0392b;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #f87171;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }

        /* ════ SCANLINES ════ */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
            pointer-events: none;
            z-index: 9999;
        }

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

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Space Mono', monospace;
            display: flex;
            min-height: 100vh;
        }

        /* Sidebar */
        .sidebar {
            width: 240px;
            height: 100vh;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 100;
        }

        .sidebar-logo {
            padding: 1.1rem 1.25rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            gap: 0.5rem;
        }
        .sidebar-logo h1 {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--text);
            margin: 0;
        }
        .sidebar-logo span {
            font-size: 0.65rem;
            color: var(--muted);
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
        }
        /* Collapsed: hide text, show only icon */
        .sidebar-collapsed .sidebar-logo > div:first-child > div { display: none; }
        .sidebar-collapsed .sidebar-logo > div:last-child { display: none; }
        .sidebar-collapsed .sidebar-logo { align-items: center; padding: 0.875rem; }

        .sidebar-nav {
            padding: 1rem 0;
            flex: 1;
            overflow-y: auto;
        }

        .nav-section {
            padding: 0.5rem 1rem 0.25rem;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--muted);
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.25rem;
            color: var(--muted);
            text-decoration: none;
            font-size: 0.9rem;
            border-radius: 0;
            transition: all 0.15s;
            border-left: 3px solid transparent;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--text);
            background: rgba(212,160,23,0.1);
            border-left-color: var(--primary);
        }

        .nav-link i { font-size: 1rem; width: 20px; }

        .sidebar-footer {
            padding: 1rem 1.25rem;
            border-top: 1px solid var(--border);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .avatar {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: var(--primary);
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 0.85rem;
            color: white; flex-shrink: 0;
        }

        .user-name { font-size: 0.875rem; font-weight: 600; }
        .user-role { font-size: 0.75rem; color: var(--muted); }

        .btn-logout {
            width: 100%;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--muted);
            border-radius: 6px;
            padding: 0.4rem;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-logout:hover { color: #f87171; border-color: #f87171; }

        /* Main Content */
        .main {
            margin-left: 260px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .topbar {
            background: var(--sidebar-bg);
            border-bottom: 1px solid var(--border);
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .topbar h2 { font-size: 1.1rem; font-weight: 600; }

        .notif-btn {
            position: relative;
            background: none;
            border: 1px solid var(--border);
            color: var(--muted);
            border-radius: 8px;
            padding: 0.4rem 0.75rem;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.15s;
        }

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

        .badge-count {
            position: absolute;
            top: -6px; right: -6px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 18px; height: 18px;
            font-size: 0.65rem;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700;
        }

        .content { padding: 2rem; }

        /* Stat Cards */
        .stat-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.25rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .stat-icon {
            width: 48px; height: 48px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem;
        }

        .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1; }
        .stat-label { font-size: 0.82rem; font-weight: 600; color: #c8b080; margin-top: 0.25rem; }

        /* Cards */
        .card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
        }

        .card-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: transparent;
        }

        .card-title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--text); letter-spacing: -0.01em; }

        .card-body { padding: 1.25rem; overflow: visible; }

        /* Project Cards */
        .project-card {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1rem;
            text-decoration: none;
            color: var(--text);
            display: block;
            transition: all 0.15s;
            border-top: 3px solid var(--primary);
        }

        .project-card:hover {
            border-color: var(--primary);
            transform: translateY(-2px);
            color: var(--text);
            box-shadow: 0 8px 20px rgba(212,160,23,0.15);
        }

        .project-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
        .project-meta { font-size: 0.78rem; color: var(--muted); }

        /* Task List */
        .task-item {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
        }
        .task-item:last-child { border-bottom: none; }
        .task-item-body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
        .task-item-meta {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            flex-wrap: wrap;
        }

        .priority-dot {
            width: 9px; height: 9px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 5px;
        }
        .priority-low     { background: #22c55e; }
        .priority-medium  { background: #f59e0b; }
        .priority-high    { background: #ef4444; }
        .priority-critical{ background: #7c3aed; }

        .task-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text);
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .task-due {
            font-size: 0.72rem;
            font-weight: 600;
            color: #c8b080;
            white-space: nowrap;
            background: rgba(212,160,23,0.08);
            border: 1px solid rgba(212,160,23,0.2);
            border-radius: 5px;
            padding: 0.08rem 0.45rem;
            flex-shrink: 0;
        }
        .task-due.overdue {
            color: #f87171;
            background: rgba(239,68,68,0.08);
            border-color: rgba(239,68,68,0.25);
        }

        .project-tag {
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.08rem 0.5rem;
            border-radius: 20px;
            background: rgba(212,160,23,0.1);
            color: var(--primary);
            border: 1px solid rgba(212,160,23,0.2);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 140px;
        }

        /* Notification items */
        .notif-item {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border);
            display: flex;
            gap: 0.65rem;
            align-items: flex-start;
            transition: opacity 0.15s;
        }

        .notif-item:last-child { border-bottom: none; }
        .notif-item i { margin-top: 3px; flex-shrink: 0; font-size: 0.95rem; }
        .notif-time { font-size: 0.75rem; color: #c8b080; margin-top: 0.2rem; font-weight: 500; }

        .empty-state {
            text-align: center;
            color: var(--muted);
            padding: 2rem;
            font-size: 0.875rem;
        }

        .empty-state i { font-size: 2rem; display: block; margin-bottom: 0.5rem; }

        .btn-primary {
            background: var(--primary);
            border: none;
            border-radius: 8px;
            padding: 0.45rem 1rem;
            font-size: 0.85rem;
            font-weight: 500;
            color: white;
            text-decoration: none;
            transition: background 0.15s;
        }

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

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.45rem 1rem;
            font-size: 0.85rem;
            color: var(--muted);
            text-decoration: none;
            transition: all 0.15s;
        }

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

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

        /* ── Dashboard chat widget ── */
        .dash-chat-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 360px;
        }
        .dash-chat-messages {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0.875rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            scroll-behavior: smooth;
            min-height: 0;   /* critical — allows flex child to shrink */
        }
        .dash-chat-messages::-webkit-scrollbar { width: 3px; }
        .dash-chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
        .dash-msg {
            display: flex;
            gap: 0.5rem;
            align-items: flex-start;
            min-width: 0;
        }
        .dash-msg.mine { flex-direction: row-reverse; }
        .dash-msg-avatar {
            width: 26px; height: 26px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.62rem; font-weight: 700;
            color: #0d0b08;
            flex-shrink: 0;
            margin-top: 1px;
        }
        /* Inner wrapper constrains bubble width */
        .dash-msg > div:last-child {
            min-width: 0;
            max-width: calc(100% - 34px);
            overflow: hidden;
        }
        .dash-msg-bubble {
            display: block;
            width: fit-content;
            max-width: 100%;
            font-size: 0.8rem;
            line-height: 1.5;
            padding: 0.4rem 0.65rem;
            border-radius: 0 8px 8px 8px;
            background: var(--bg);
            border: 1px solid var(--border);
            word-break: break-word;
            overflow-wrap: break-word;
            white-space: pre-wrap;
        }
        .dash-msg.mine .dash-msg-bubble {
            background: rgba(212,160,23,0.12);
            border-color: rgba(212,160,23,0.25);
            border-radius: 8px 0 8px 8px;
            margin-left: auto;
        }
        .dash-msg-name {
            font-size: 0.68rem;
            font-weight: 600;
            color: var(--muted);
            margin-bottom: 0.15rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .dash-msg.mine .dash-msg-name { text-align: right; }
        .dash-chat-input-wrap {
            border-top: 1px solid var(--border);
            padding: 0.6rem 0.75rem;
            display: flex;
            gap: 0.5rem;
            background: var(--sidebar-bg);
        }
        .dash-chat-input {
            flex: 1;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.45rem 0.75rem;
            font-size: 0.82rem;
            color: var(--text);
            font-family: inherit;
            outline: none;
            transition: border-color 0.15s;
        }
        .dash-chat-input:focus { border-color: var(--primary); }
        .dash-chat-input::placeholder { color: var(--muted); }
        .dash-send-btn {
            background: var(--primary);
            border: none;
            border-radius: 8px;
            width: 34px; height: 34px;
            display: flex; align-items: center; justify-content: center;
            color: #0d0b08;
            cursor: pointer;
            font-size: 0.9rem;
            flex-shrink: 0;
            transition: background 0.15s;
            touch-action: manipulation;
        }
        .dash-send-btn:hover { background: var(--primary-dark); }
        .dash-send-btn:disabled { opacity: 0.4; cursor: default; }
        .dash-chat-empty {
            flex: 1; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            color: var(--muted); font-size: 0.82rem; gap: 0.5rem;
        }
        .dash-chat-empty i { font-size: 1.75rem; color: var(--border); }

    /* ── Mobile body fix (Android) ── */
    @media (max-width: 768px) {
        body { overflow-x: hidden !important; overflow-y: auto !important; }
    }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   BOARD (Kanban)  (board.php)
   ──────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        body.sidebar-collapsed .sidebar { width: 56px; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
        body.sidebar-collapsed .sidebar-brand,
        body.sidebar-collapsed .nav-label-text,
        body.sidebar-collapsed .sidebar-footer .user-info,
        body.sidebar-collapsed .sidebar-footer .user-status-dot { display: none; }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-logo img {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section {
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.02em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
            font-family: 'Space Mono', monospace;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(212,160,23,0.04);
        }

        .nav-link.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-info-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.4rem 0;
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
            overflow: hidden;
        }

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

        .user-details { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Syne', sans-serif;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ════ MAIN ════ */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            transition: margin-left 0.2s ease;
        }

        /* ════ TOPBAR ════ */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.97);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
            gap: 1rem;
            flex-shrink: 0;
        }

        .topbar h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            letter-spacing: 0.02em;
        }

        .mobile-menu-btn, .sidebar-toggle-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .mobile-menu-btn:hover, .sidebar-toggle-btn:hover {
            color: var(--gold);
            border-color: var(--gold-dim);
        }

        .notif-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
            text-decoration: none;
        }
        .notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .badge-count {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 16px; height: 16px;
            border-radius: 8px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.52rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            font-family: 'Space Mono', monospace;
        }

        /* ════ CONTENT ════ */
        .content {
            flex: 1;
            padding: 1.75rem 2rem;
        }

        /* ════ CARDS ════ */
        .card, .section-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .card-header, .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            gap: 0.75rem;
        }

        .card-title, .section-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }

        .card-body, .section-body {
            padding: 1.1rem 1.25rem;
        }

        /* ════ BUTTONS ════ */
        .btn-primary {
            background: var(--gold);
            border: none;
            border-radius: 3px;
            color: var(--bg);
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.6rem 1.25rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--gold-mid); color: var(--bg); }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--muted);
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.12s, border-color 0.12s;
        }
        .btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

        .btn-danger {
            background: rgba(139,26,26,0.15);
            border: 1px solid rgba(139,26,26,0.35);
            border-radius: 3px;
            color: #f87171;
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            padding: 0.5rem 0.875rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.12s;
        }
        .btn-danger:hover { background: rgba(139,26,26,0.25); }

        /* ════ INPUTS ════ */
        .form-control, .mod-input, input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], select, textarea {
            background: var(--surface2, #111009) !important;
            border: 1px solid var(--border2) !important;
            border-radius: 3px !important;
            color: var(--text) !important;
            font-family: 'Space Mono', monospace !important;
            font-size: 0.8rem !important;
            padding: 0.6rem 0.875rem !important;
            outline: none !important;
            transition: border-color 0.12s !important;
            width: 100%;
        }
        .form-control:focus, .mod-input:focus,
        input:focus, select:focus, textarea:focus {
            border-color: var(--gold-dim) !important;
            box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
        }
        .form-control::placeholder, .mod-input::placeholder,
        input::placeholder, textarea::placeholder {
            color: var(--dim, #2a2218) !important;
        }

        /* ════ TABLES ════ */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .admin-table th {
            font-size: 0.6rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            text-align: left;
            font-weight: 400;
            background: rgba(0,0,0,0.2);
        }
        .admin-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.02); }

        /* ════ ALERTS ════ */
        .alert-success {
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.25);
            border-left: 3px solid #22c55e;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #86efac;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }
        .alert-danger, .alert-error {
            background: rgba(139,26,26,0.1);
            border: 1px solid rgba(139,26,26,0.3);
            border-left: 3px solid #c0392b;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #f87171;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }

        /* ════ SCANLINES ════ */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
            pointer-events: none;
            z-index: 9999;
        }

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

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
            display: flex;
            min-height: 100vh;
            overflow: hidden;
        }

        /* Sidebar */
        .sidebar {
            width: 240px;
            height: 100vh;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 100;
        }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .sidebar-logo h1 { font-size: 1.2rem; font-weight: 700; color: var(--text); }
        .sidebar-logo span { font-size: 0.7rem; color: var(--muted); }

        .sidebar-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }

        .nav-section {
            padding: 0.5rem 1rem 0.25rem;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--muted);
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.25rem;
            color: var(--muted);
            text-decoration: none;
            font-size: 0.9rem;
            border-left: 3px solid transparent;
            transition: all 0.15s;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--text);
            background: rgba(212,160,23,0.1);
            border-left-color: var(--primary);
        }

        .nav-link i { font-size: 1rem; width: 20px; }

        .sidebar-footer {
            padding: 1rem 1.25rem;
            border-top: 1px solid var(--border);
        }

        .user-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }

        .avatar {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: var(--primary);
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 0.85rem;
            color: #0d0b08; flex-shrink: 0;
        }

        .user-name { font-size: 0.875rem; font-weight: 600; }
        .user-role { font-size: 0.75rem; color: var(--muted); }

        .btn-logout {
            width: 100%;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--muted);
            border-radius: 6px;
            padding: 0.4rem;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-logout:hover { color: #f87171; border-color: #f87171; }

        /* Main */
        .main {
            margin-left: 260px;
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        .topbar {
            background: var(--sidebar-bg);
            border-bottom: 1px solid var(--border);
            padding: 0.875rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .breadcrumb-nav {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
        }

        .breadcrumb-nav a { color: var(--muted); text-decoration: none; }
        .breadcrumb-nav a:hover { color: var(--primary); }
        .breadcrumb-nav .sep { color: var(--border); }
        .breadcrumb-nav .current { color: var(--text); font-weight: 600; }

        .project-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
            display: inline-block;
        }

        .topbar-actions { display: flex; gap: 0.5rem; align-items: center; }

        .btn-primary {
            background: var(--primary);
            border: none;
            border-radius: 8px;
            padding: 0.45rem 1rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: #0d0b08;
            cursor: pointer;
            transition: background 0.15s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        .btn-primary:hover { background: var(--primary-dark); color: #0d0b08; }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.45rem 1rem;
            font-size: 0.85rem;
            color: var(--muted);
            cursor: pointer;
            transition: all 0.15s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

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

        /* Board */
        .board-wrapper {
            flex: 1;
            overflow-x: hidden;
            overflow-y: auto;
            padding: 1.5rem;
        }

        .board {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: flex-start;
            align-content: flex-start;
        }

        /* Column */
        .column {
            width: 300px;
            min-width: 280px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            max-height: 80vh;
            flex-shrink: 0;
            transition: box-shadow 0.15s, opacity 0.15s;
        }
        .column.col-dragging {
            opacity: 0.45;
            box-shadow: 0 0 0 2px var(--primary);
        }
        .column.col-drag-over {
            box-shadow: 0 0 0 2px var(--primary);
            background: rgba(212,160,23,0.05);
        }
        .column-header {
            padding: 0.875rem 1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 12px 12px 0 0;
            cursor: grab;
            user-select: none;
        }
        .column-header:active { cursor: grabbing; }

        .column-title-wrap { display: flex; align-items: center; gap: 0.5rem; }

        .column-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
        }

        .column-title { font-size: 0.875rem; font-weight: 700; cursor: pointer; }
        .column-title:hover { color: var(--primary); }
        .col-rename-input {
            font-size: 0.875rem; font-weight: 700;
            background: var(--bg); border: 1px solid var(--primary);
            color: var(--text); border-radius: 5px;
            padding: 0.1rem 0.4rem; outline: none;
            width: 140px; font-family: inherit;
        }
        /* Colour picker swatch */
        .col-color-btn {
            background: none; border: none; cursor: pointer;
            padding: 0.2rem; border-radius: 4px;
            display: flex; align-items: center; justify-content: center;
        }
        .col-color-swatch {
            width: 12px; height: 12px; border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.2); display: inline-block;
        }
        /* Delete confirm state */
        .col-btn.danger { color: #ef4444 !important; }
        .col-btn.danger:hover { background: rgba(239,68,68,0.12) !important; }
        .btn-danger-solid {
            background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.35);
            color: #f87171; border-radius: 8px; padding: 0.45rem 1rem;
            font-size: 0.85rem; font-weight: 700; cursor: pointer;
            transition: all 0.15s; font-family: inherit;
        }
        .btn-danger-solid:hover { background: rgba(239,68,68,0.25); }

        .column-count {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 20px;
            font-size: 0.7rem;
            padding: 0.1rem 0.5rem;
            color: var(--muted);
        }

        .column-actions { display: flex; gap: 0.3rem; }

        .col-btn {
            background: none;
            border: none;
            color: var(--muted);
            cursor: pointer;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-size: 0.85rem;
            transition: all 0.15s;
        }

        .col-btn:hover { color: var(--primary); background: rgba(212,160,23,0.1); }

        .column-body {
            padding: 0.75rem;
            overflow-y: auto;
            flex: 1;
            min-height: 60px;
        }

        .column-body::-webkit-scrollbar { width: 4px; }
        .column-body::-webkit-scrollbar-track { background: transparent; }
        .column-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

        /* Task Card */
        .task-card {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.875rem;
            margin-bottom: 0.5rem;
            cursor: grab;
            transition: all 0.15s;
            border-left: 3px solid transparent;
        }

        .task-done-card {
            opacity: 0.5;
            border-left-color: #22c55e !important;
        }
        .task-card:hover {
            border-color: var(--primary);
            border-left-color: var(--primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        .task-card.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }

        .task-card.drag-over {
            border-color: var(--primary);
            background: rgba(212,160,23,0.05);
        }

        .priority-bar {
            height: 3px;
            border-radius: 2px;
            margin-bottom: 0.6rem;
        }

        .p-low    { background: #22c55e; }
        .p-medium { background: #f59e0b; }
        .p-high   { background: #ef4444; }
        .p-critical { background: #7c3aed; }

        .task-title {
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            line-height: 1.4;
            cursor: pointer;
        }

        .task-title:hover { color: var(--primary); }

        .task-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            align-items: center;
        }

        .meta-chip {
            font-size: 0.7rem;
            padding: 0.15rem 0.5rem;
            border-radius: 20px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .meta-chip.due-soon { border-color: #f59e0b; color: #f59e0b; }
        .meta-chip.overdue  { border-color: #ef4444; color: #ef4444; }

        .priority-badge {
            font-size: 0.65rem;
            padding: 0.15rem 0.5rem;
            border-radius: 20px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .badge-low      { background: rgba(34,197,94,0.15); color: #22c55e; }
        .badge-medium   { background: rgba(245,158,11,0.15); color: #f59e0b; }
        .badge-high     { background: rgba(239,68,68,0.15); color: #ef4444; }
        .badge-critical { background: rgba(124,58,237,0.15); color: #a78bfa; }

        .task-assignee {
            margin-left: auto;
            width: 22px; height: 22px;
            border-radius: 50%;
            background: var(--primary);
            color: #0d0b08;
            font-size: 0.65rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .subtask-progress {
            margin-top: 0.5rem;
        }

        .progress-bar-wrap {
            background: var(--border);
            border-radius: 2px;
            height: 3px;
            overflow: hidden;
        }

        .progress-bar-fill {
            background: var(--primary);
            height: 100%;
            border-radius: 2px;
            transition: width 0.3s;
        }

        .progress-label {
            font-size: 0.65rem;
            color: var(--muted);
            margin-top: 0.2rem;
        }

        /* Add task button */
        .add-task-btn {
            width: 100%;
            background: none;
            border: 1px dashed var(--border);
            color: var(--muted);
            border-radius: 8px;
            padding: 0.5rem;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-top: 0.25rem;
        }

        .add-task-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(212,160,23,0.05);
        }

        /* Add column */
        .add-column {
            width: 260px;
            flex-shrink: 0;
        }

        .add-col-btn {
            width: 100%;
            background: var(--card-bg);
            border: 2px dashed var(--border);
            color: var(--muted);
            border-radius: 12px;
            padding: 1rem;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .add-col-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(212,160,23,0.05);
        }

        /* Drop placeholder */
        .drop-placeholder {
            background: rgba(212,160,23,0.08);
            border: 2px dashed var(--primary);
            border-radius: 8px;
            height: 60px;
            margin-bottom: 0.5rem;
        }

        /* Modals */
        .modal-content {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 16px;
            color: var(--text);
        }

        .modal-header { border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; }
        .modal-footer { border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
        .modal-body { padding: 1.5rem; }
        .modal-title { font-weight: 700; }
        .btn-close { filter: invert(1) opacity(0.5); }

        .form-label { color: var(--muted); font-size: 0.85rem; font-weight: 500; }

        .form-control, .form-select {
            background: var(--bg);
            border: 1px solid var(--border);
            color: var(--text);
            border-radius: 8px;
        }

        .form-control:focus, .form-select:focus {
            background: var(--bg);
            border-color: var(--primary);
            color: var(--text);
            box-shadow: 0 0 0 3px rgba(212,160,23,0.2);
        }

        .form-control::placeholder { color: #4a3f2a; }
        .form-select option { background: var(--card-bg); }

        .btn-secondary {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.5rem 1.25rem;
            font-size: 0.875rem;
            color: var(--muted);
            cursor: pointer;
            transition: all 0.15s;
        }

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

        /* Task Detail Modal */
        .task-detail-header {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

        .priority-indicator {
            width: 4px;
            border-radius: 2px;
            align-self: stretch;
            flex-shrink: 0;
        }

        .subtask-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.4rem 0;
            border-bottom: 1px solid var(--border);
        }

        .subtask-item:last-child { border-bottom: none; }

        .subtask-item input[type="checkbox"] {
            accent-color: var(--primary);
            width: 15px; height: 15px;
            cursor: pointer;
        }

        .subtask-label {
            font-size: 0.875rem;
            flex: 1;
        }

        .subtask-label.done {
            text-decoration: line-through;
            color: var(--muted);
        }

        .comment-item {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border);
        }

        .comment-item:last-child { border-bottom: none; }

        .comment-author { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; }
        .comment-time { font-size: 0.7rem; color: var(--muted); }
        .comment-text { font-size: 0.875rem; line-height: 1.5; }

        .section-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--muted);
            margin-bottom: 0.5rem;
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* ── Mobile body fix (Android) ── */
    @media (max-width: 768px) {
        body { overflow-x: hidden !important; overflow-y: auto !important; }
    }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   TEAM CHAT  (chat.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar { width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;transition:width 0.2s ease; }
        body.sidebar-collapsed .sidebar{width:56px;} body.sidebar-collapsed .main{margin-left:56px!important;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
        .sidebar-logo img{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
        .sidebar-brand{font-family:'Syne',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.06em;color:var(--text);white-space:nowrap;}
        .sidebar-brand span{color:var(--gold);}
        .sidebar-nav{flex:1;overflow-y:auto;padding:0.75rem 0;scrollbar-width:none;}
        .sidebar-nav::-webkit-scrollbar{display:none;}
        .nav-section{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding:1rem 1.5rem 0.4rem;}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.5rem;font-size:0.75rem;color:var(--muted);text-decoration:none;transition:color 0.12s,background 0.12s;white-space:nowrap;border-left:2px solid transparent;font-family:'Space Mono',monospace;}
        .nav-link:hover{color:var(--text);background:rgba(212,160,23,0.04);}
        .nav-link.active{color:var(--gold);background:rgba(212,160,23,0.06);border-left-color:var(--gold);}
        .nav-link i{font-size:0.9rem;width:18px;text-align:center;flex-shrink:0;}
        .sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;}
        .avatar{width:34px;height:34px;border-radius:7px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);flex-shrink:0;font-family:'Syne',sans-serif;overflow:hidden;}
        .avatar img{width:100%;height:100%;object-fit:cover;}
        .user-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Syne',sans-serif;}
        .user-role{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
        /* ════ MAIN ════ */
        .main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);transition:margin-left 0.2s ease;}
        /* ════ TOPBAR ════ */
        .topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(7,6,4,0.97);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;gap:1rem;flex-shrink:0;}
        .topbar h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:0.02em;}
        .mobile-menu-btn,.sidebar-toggle-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;flex-shrink:0;}
        .mobile-menu-btn:hover,.sidebar-toggle-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .notif-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;position:relative;text-decoration:none;}
        .notif-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:0.52rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'Space Mono',monospace;}
        /* ════ CONTENT ════ */
        .content{flex:1;padding:1.75rem 2rem;}
        /* ════ CARDS ════ */
        .card,.section-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;overflow:hidden;margin-bottom:1.25rem;}
        .card-header,.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);gap:0.75rem;}
        .card-title,.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        .card-body,.section-body{padding:1.1rem 1.25rem;}
        /* ════ BUTTONS ════ */
        .btn-primary{background:var(--gold);border:none;border-radius:3px;color:var(--bg);font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;}
        .btn-primary:hover{background:var(--gold-mid);color:var(--bg);}
        .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:color 0.12s,border-color 0.12s;}
        .btn-outline:hover{color:var(--gold);border-color:var(--gold-dim);}
        .btn-danger{background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.35);border-radius:3px;color:#f87171;font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:background 0.12s;}
        .btn-danger:hover{background:rgba(139,26,26,0.25);}
        /* ════ INPUTS ════ */
        .form-control,.mod-input{background:var(--surface2,#111009)!important;border:1px solid var(--border2)!important;border-radius:3px!important;color:var(--text)!important;font-family:'Space Mono',monospace!important;font-size:0.8rem!important;padding:0.6rem 0.875rem!important;outline:none!important;transition:border-color 0.12s!important;}
        .form-control:focus,.mod-input:focus{border-color:var(--gold-dim)!important;box-shadow:0 0 0 3px rgba(212,160,23,0.07)!important;}
        /* ════ ALERTS ════ */
        .alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-left:3px solid #22c55e;border-radius:3px;padding:0.75rem 1rem;color:#86efac;font-size:0.78rem;margin-bottom:1rem;}
        .alert-danger,.alert-error{background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.3);border-left:3px solid #c0392b;border-radius:3px;padding:0.75rem 1rem;color:#f87171;font-size:0.78rem;margin-bottom:1rem;}
        /* ════ SCANLINES ════ */
        body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root{--primary:#d4a017;--primary-dark:#b8860b;--bg:#0d0b08;--sidebar-bg:#111009;--card-bg:#1a1610;--border:#2e2515;--text:#f0e6d0;--muted:#9a8a6a;}
        *{box-sizing:border-box;margin:0;padding:0;}
        html,body{height:100%;height:100dvh;overflow:hidden;}
        body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;display:flex;height:100vh;height:100dvh;}

        /* Sidebar */
        .sidebar{width:240px;height:100vh;height:100dvh;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
        .sidebar-logo h1{font-size:1.2rem;font-weight:700;}
        .sidebar-logo span{font-size:0.7rem;color:var(--muted);}
        .sidebar-nav{padding:1rem 0;flex:1;overflow-y:auto;}
        .nav-section{padding:0.5rem 1rem 0.25rem;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.9rem;border-left:3px solid transparent;transition:all 0.15s;position:relative;}
        .nav-link:hover,.nav-link.active{color:var(--text);background:rgba(212,160,23,0.1);border-left-color:var(--primary);}
        .nav-link i{font-size:1rem;width:20px;}
        .sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0;}
        .user-info{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;}
        .avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#0d0b08;flex-shrink:0;}
        .user-name{font-size:0.875rem;font-weight:600;}
        .user-role{font-size:0.75rem;color:var(--muted);}
        .btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.4rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;}
        .btn-logout:hover{color:#f87171;border-color:#f87171;}

        /* Unread badge on nav */
        .nav-badge{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:#ef4444;color:white;border-radius:20px;font-size:0.62rem;font-weight:700;padding:0.1rem 0.4rem;min-width:18px;text-align:center;line-height:1.4;}

        /* Chat wrapper */
        .chat-wrap{margin-left:260px;display:flex;flex:1;height:100vh;height:100dvh;overflow:hidden;min-width:0;}

        /* Channel list */
        .channel-list{width:220px;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;height:100vh;height:100dvh;overflow-y:auto;}
        .channel-list-header{padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);flex-shrink:0;}
        .channel-section{padding:0.75rem 1.25rem 0.25rem;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);opacity:0.6;display:flex;align-items:center;justify-content:space-between;}
        .channel-item{display:flex;align-items:center;gap:0.6rem;padding:0.55rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.875rem;transition:all 0.15s;border-left:3px solid transparent;position:relative;}
        .channel-item:hover,.channel-item.active{color:var(--text);background:rgba(212,160,23,0.08);border-left-color:var(--primary);}
        .channel-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
        .general-badge{font-size:0.6rem;background:rgba(212,160,23,0.2);color:var(--primary);border:1px solid rgba(212,160,23,0.3);border-radius:20px;padding:0.1rem 0.4rem;font-weight:700;margin-left:auto;}
        .unread-pip{background:#ef4444;color:white;border-radius:20px;font-size:0.62rem;font-weight:700;padding:0.1rem 0.4rem;min-width:18px;text-align:center;margin-left:auto;line-height:1.4;}

        /* New DM button */
        .new-dm-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.8rem;padding:0.1rem 0.3rem;border-radius:4px;transition:color 0.15s;}
        .new-dm-btn:hover{color:var(--primary);}

        /* DM item */
        .dm-item{display:flex;align-items:center;gap:0.6rem;padding:0.55rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.85rem;transition:all 0.15s;border-left:3px solid transparent;position:relative;}
        .dm-item:hover,.dm-item.active{color:var(--text);background:rgba(212,160,23,0.08);border-left-color:var(--primary);}
        .dm-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:700;color:#0d0b08;flex-shrink:0;}
        .dm-info{flex:1;min-width:0;}
        .dm-name{font-size:0.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .dm-preview{font-size:0.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

        /* Main chat */
        .chat-main{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;height:100dvh;overflow:hidden;}
        .chat-topbar{background:var(--sidebar-bg);border-bottom:1px solid var(--border);padding:0.875rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
        .chat-topbar-info{display:flex;align-items:center;gap:0.75rem;}
        .chat-project-name{font-weight:700;font-size:1rem;}
        .chat-member-count{font-size:0.75rem;color:var(--muted);}

        /* Messages */
        .messages-wrap{flex:1;overflow-y:auto;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:0;-webkit-overflow-scrolling:touch;}
        .messages-wrap::-webkit-scrollbar{width:4px;}
        .messages-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

        .msg-group{margin-bottom:0.75rem;}
        .msg-header{display:flex;align-items:baseline;gap:0.6rem;margin-bottom:0.25rem;}
        .msg-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.75rem;color:#0d0b08;flex-shrink:0;}
        .msg-author{font-size:0.875rem;font-weight:700;}
        .msg-time{font-size:0.7rem;color:var(--muted);}
        .msg-body{padding-left:44px;}
        .msg-text{font-size:0.875rem;line-height:1.6;padding:0.45rem 0.7rem;background:var(--card-bg);border-radius:0 10px 10px 10px;border:1px solid var(--border);display:inline-block;max-width:100%;word-break:break-word;white-space:pre-wrap;}
        .msg-mine .msg-body{text-align:right;padding-left:0;padding-right:44px;}
        .msg-mine .msg-text{background:rgba(212,160,23,0.12);border-color:rgba(212,160,23,0.25);border-radius:10px 0 10px 10px;}
        .msg-mine .msg-header{flex-direction:row-reverse;}

        /* @mention highlight */
        .msg-text .mention{color:var(--primary);font-weight:600;}

        /* Message delete button — inline next to author name */
        .msg-delete-btn{
            background:none;
            border:none;
            color:var(--muted);
            font-size:0.72rem;
            padding:0.1rem 0.3rem;
            cursor:pointer;
            opacity:0;
            transition:opacity 0.15s, color 0.15s;
            border-radius:4px;
            line-height:1.5;
            flex-shrink:0;
            margin-left:0.1rem;
        }
        .msg-group:hover .msg-delete-btn,
        .msg-deletable:hover .msg-delete-btn{opacity:1;}
        .msg-delete-btn:hover{color:#f87171;background:rgba(239,68,68,0.1);}

        /* File attachment */
        .msg-file{display:inline-flex;align-items:center;gap:0.6rem;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:0.6rem 0.875rem;text-decoration:none;color:var(--text);font-size:0.82rem;max-width:280px;transition:border-color 0.15s;margin-top:0.25rem;}
        .msg-file:hover{border-color:var(--primary);color:var(--text);}
        .msg-file-icon{font-size:1.4rem;flex-shrink:0;color:var(--primary);}
        .msg-file-info{min-width:0;}
        .msg-file-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .msg-file-size{font-size:0.7rem;color:var(--muted);}
        .msg-img{max-width:300px;max-height:240px;border-radius:10px;border:1px solid var(--border);display:block;cursor:pointer;margin-top:0.25rem;transition:opacity 0.15s;}
        .msg-img:hover{opacity:0.9;}

        /* Reactions */
        .msg-reactions{display:flex;flex-wrap:wrap;gap:0.25rem;padding-left:44px;margin-top:0.3rem;}
        .msg-mine .msg-reactions{padding-left:0;padding-right:44px;justify-content:flex-end;}
        .reaction-pill{display:inline-flex;align-items:center;gap:0.2rem;background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:0.15rem 0.5rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;user-select:none;}
        .reaction-pill:hover,.reaction-pill.mine{background:rgba(212,160,23,0.12);border-color:rgba(212,160,23,0.35);}
        .reaction-pill span{font-size:0.72rem;color:var(--muted);}
        .add-reaction-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:none;border:1px dashed var(--border);border-radius:50%;cursor:pointer;color:var(--muted);font-size:0.8rem;transition:all 0.15s;}
        .add-reaction-btn:hover{border-color:var(--primary);color:var(--primary);}

        .date-divider{text-align:center;margin:0.75rem 0;}
        .date-divider span{font-size:0.72rem;color:var(--muted);background:var(--bg);padding:0.2rem 0.75rem;border-radius:20px;border:1px solid var(--border);}
        .empty-chat{text-align:center;color:var(--muted);padding:3rem;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
        .empty-chat i{font-size:3rem;color:var(--border);margin-bottom:1rem;}

        /* Input area */
        .chat-input-wrap{padding:0.875rem 1rem;padding-bottom:calc(0.875rem + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--border);background:var(--sidebar-bg);flex-shrink:0;}
        .chat-input-outer{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;transition:border-color 0.15s;overflow:hidden;}
        .chat-input-outer:focus-within{border-color:var(--primary);}

        /* @mention autocomplete */
        .mention-suggestions{position:absolute;bottom:100%;left:0;right:0;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;display:none;z-index:50;box-shadow:0 -4px 16px rgba(0,0,0,0.3);margin-bottom:0.25rem;}
        .mention-item{padding:0.5rem 0.875rem;display:flex;align-items:center;gap:0.6rem;cursor:pointer;font-size:0.875rem;color:var(--text);transition:background 0.1s;}
        .mention-item:hover,.mention-item.active{background:rgba(212,160,23,0.1);}
        .mention-avatar{width:24px;height:24px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:700;color:#0d0b08;flex-shrink:0;}

        /* File preview strip */
        .file-preview-strip{display:flex;gap:0.5rem;padding:0.5rem 0.75rem;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;background:rgba(212,160,23,0.04);}
        .file-preview-item{display:flex;align-items:center;gap:0.4rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:0.25rem 0.5rem;font-size:0.75rem;}
        .file-preview-item .remove-file{background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.7rem;padding:0;margin-left:0.2rem;}
        .file-preview-item .remove-file:hover{color:#ef4444;}

        .chat-input-row{display:flex;align-items:flex-end;gap:0.5rem;padding:0.5rem 0.75rem;}
        .chat-input{flex:1;background:none;border:none;color:var(--text);font-size:0.9rem;outline:none;resize:none;max-height:120px;font-family:inherit;min-width:0;line-height:1.5;}
        .chat-input::placeholder{color:var(--muted);}
        .input-action-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;padding:0.25rem;border-radius:6px;transition:color 0.15s;flex-shrink:0;touch-action:manipulation;}
        .input-action-btn:hover{color:var(--primary);}
        .send-btn{background:var(--primary);border:none;color:#0d0b08;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.95rem;transition:background 0.15s;flex-shrink:0;touch-action:manipulation;}
        .send-btn:hover{background:var(--primary-dark);}
        .send-btn:disabled{opacity:0.4;cursor:default;}
        .chat-input-hint{font-size:0.7rem;color:var(--muted);padding:0 0.75rem 0.5rem;}

        /* Emoji picker */
        .emoji-picker{position:absolute;bottom:100%;right:0;width:340px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 -4px 24px rgba(0,0,0,0.4);z-index:100;padding:0.75rem;display:none;margin-bottom:0.5rem;}
        .emoji-picker.open{display:block;}
        .emoji-search{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0.4rem 0.75rem;color:var(--text);font-size:0.85rem;outline:none;margin-bottom:0.5rem;}
        .emoji-search:focus{border-color:var(--primary);}
        .emoji-categories{display:flex;gap:0.25rem;margin-bottom:0.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:0.25rem;}
        .emoji-categories::-webkit-scrollbar{display:none;}
        .emoji-cat-btn{background:none;border:none;font-size:1rem;cursor:pointer;padding:0.25rem 0.4rem;border-radius:6px;opacity:0.5;transition:all 0.15s;flex-shrink:0;}
        .emoji-cat-btn:hover,.emoji-cat-btn.active{opacity:1;background:rgba(212,160,23,0.1);}
        .emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:200px;overflow-y:auto;}
        .emoji-grid::-webkit-scrollbar{width:3px;}
        .emoji-grid::-webkit-scrollbar-thumb{background:var(--border);}
        .emoji-btn{background:none;border:none;font-size:1.3rem;cursor:pointer;padding:0.2rem;border-radius:6px;transition:background 0.1s;text-align:center;}
        .emoji-btn:hover{background:rgba(212,160,23,0.15);}

        /* Image lightbox */
        .lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;}
        .lightbox img{max-width:90vw;max-height:90vh;border-radius:8px;}
        .lightbox-close{position:absolute;top:1rem;right:1.5rem;color:white;font-size:2rem;cursor:pointer;background:none;border:none;line-height:1;}

        /* Mobile */
        @media(max-width:768px){
            /* Keep body overflow hidden — chat needs full-height flex layout */
            html,body{overflow:hidden !important;height:100% !important;}
            /* Full viewport chat wrap, stacked column */
            .chat-wrap{
                margin-left:0 !important;
                width:100% !important;
                flex-direction:column !important;
                height:100dvh !important;
                height:100vh !important;
                overflow:hidden !important;
            }
            /* Channel strip becomes horizontal scrollable row at top */
            .channel-list{
                width:100% !important;
                height:auto !important;
                flex-direction:row !important;
                overflow-x:auto !important;
                overflow-y:hidden !important;
                border-right:none !important;
                border-bottom:1px solid var(--border) !important;
                padding:0.5rem 0.75rem !important;
                gap:0.4rem;
                flex-shrink:0 !important;
                scrollbar-width:none;
            }
            .channel-list::-webkit-scrollbar{display:none;}
            .channel-list-header,.channel-section{display:none !important;}
            /* Channel pills */
            .channel-item{
                border-left:none !important;
                border-radius:20px !important;
                padding:0.35rem 0.875rem !important;
                font-size:0.82rem !important;
                white-space:nowrap;
                flex-shrink:0;
                border:1px solid var(--border) !important;
                background:var(--bg) !important;
                min-height:36px;
                display:flex !important;
                align-items:center;
                gap:0.35rem;
            }
            .dm-item{
                border-left:none !important;
                border-radius:20px !important;
                padding:0.3rem 0.65rem !important;
                font-size:0.78rem !important;
                white-space:nowrap;
                flex-shrink:0;
                border:1px solid var(--border) !important;
                background:var(--bg) !important;
                min-height:36px;
                display:flex !important;
                align-items:center;
                gap:0.4rem;
            }
            .dm-item .dm-name{display:block !important;font-size:0.78rem !important;color:var(--text) !important;font-weight:600;}
            .channel-item.active,.dm-item.active{
                background:rgba(212,160,23,0.12) !important;
                border-color:rgba(212,160,23,0.5) !important;
                color:var(--primary) !important;
            }
            .dm-info{display:none;}
            .dm-name{display:none;}
            .general-badge{display:none;}
            .dm-item .dm-avatar{width:22px;height:22px;font-size:0.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#0d0b08;flex-shrink:0;}
            .mobile-dm-divider{display:flex !important;align-items:center;gap:0.3rem;font-size:0.7rem;color:var(--muted);white-space:nowrap;padding:0.35rem 0.5rem;flex-shrink:0;border-left:2px solid var(--border);margin-left:0.25rem;}
            /* Chat main fills remaining height */
            .chat-main{
                flex:1 !important;
                min-height:0 !important;
                display:flex !important;
                flex-direction:column !important;
                overflow:hidden !important;
                height:auto !important;
            }
            /* Messages area scrolls inside its container */
            .messages-wrap{
                flex:1 !important;
                overflow-y:auto !important;
                -webkit-overflow-scrolling:touch;
                padding:0.75rem !important;
                min-height:0 !important;
            }
            .chat-input-wrap{
                padding:0.5rem 0.75rem !important;
                padding-bottom:calc(0.5rem + env(safe-area-inset-bottom,0px)) !important;
                flex-shrink:0 !important;
            }
            .chat-input-hint{display:none !important;}
            .chat-topbar{padding:0.65rem 0.875rem !important;flex-shrink:0;}
            .emoji-picker{width:280px;right:-40px;}
            /* Sidebar hidden on mobile for chat */
            .sidebar{display:none !important;}
        }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   CALENDAR  (calendar.php)
   ──────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        body.sidebar-collapsed .sidebar { width: 56px; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
        body.sidebar-collapsed .sidebar-brand,
        body.sidebar-collapsed .nav-label-text,
        body.sidebar-collapsed .sidebar-footer .user-info,
        body.sidebar-collapsed .sidebar-footer .user-status-dot { display: none; }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-logo img {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section {
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.02em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
            font-family: 'Space Mono', monospace;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(212,160,23,0.04);
        }

        .nav-link.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-info-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.4rem 0;
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
            overflow: hidden;
        }

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

        .user-details { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Syne', sans-serif;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ════ MAIN ════ */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            transition: margin-left 0.2s ease;
        }

        /* ════ TOPBAR ════ */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.97);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
            gap: 1rem;
            flex-shrink: 0;
        }

        .topbar h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            letter-spacing: 0.02em;
        }

        .mobile-menu-btn, .sidebar-toggle-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .mobile-menu-btn:hover, .sidebar-toggle-btn:hover {
            color: var(--gold);
            border-color: var(--gold-dim);
        }

        .notif-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
            text-decoration: none;
        }
        .notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .badge-count {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 16px; height: 16px;
            border-radius: 8px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.52rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            font-family: 'Space Mono', monospace;
        }

        /* ════ CONTENT ════ */
        .content {
            flex: 1;
            padding: 1.75rem 2rem;
        }

        /* ════ CARDS ════ */
        .card, .section-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .card-header, .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            gap: 0.75rem;
        }

        .card-title, .section-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }

        .card-body, .section-body {
            padding: 1.1rem 1.25rem;
        }

        /* ════ BUTTONS ════ */
        .btn-primary {
            background: var(--gold);
            border: none;
            border-radius: 3px;
            color: var(--bg);
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.6rem 1.25rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--gold-mid); color: var(--bg); }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--muted);
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.12s, border-color 0.12s;
        }
        .btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

        .btn-danger {
            background: rgba(139,26,26,0.15);
            border: 1px solid rgba(139,26,26,0.35);
            border-radius: 3px;
            color: #f87171;
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            padding: 0.5rem 0.875rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.12s;
        }
        .btn-danger:hover { background: rgba(139,26,26,0.25); }

        /* ════ INPUTS ════ */
        .form-control, .mod-input, input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], select, textarea {
            background: var(--surface2, #111009) !important;
            border: 1px solid var(--border2) !important;
            border-radius: 3px !important;
            color: var(--text) !important;
            font-family: 'Space Mono', monospace !important;
            font-size: 0.8rem !important;
            padding: 0.6rem 0.875rem !important;
            outline: none !important;
            transition: border-color 0.12s !important;
            width: 100%;
        }
        .form-control:focus, .mod-input:focus,
        input:focus, select:focus, textarea:focus {
            border-color: var(--gold-dim) !important;
            box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
        }
        .form-control::placeholder, .mod-input::placeholder,
        input::placeholder, textarea::placeholder {
            color: var(--dim, #2a2218) !important;
        }

        /* ════ TABLES ════ */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .admin-table th {
            font-size: 0.6rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            text-align: left;
            font-weight: 400;
            background: rgba(0,0,0,0.2);
        }
        .admin-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.02); }

        /* ════ ALERTS ════ */
        .alert-success {
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.25);
            border-left: 3px solid #22c55e;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #86efac;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }
        .alert-danger, .alert-error {
            background: rgba(139,26,26,0.1);
            border: 1px solid rgba(139,26,26,0.3);
            border-left: 3px solid #c0392b;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #f87171;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }

        /* ════ SCANLINES ════ */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
            pointer-events: none;
            z-index: 9999;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: var(--bg); color: var(--text); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; display: flex; min-height: 100vh; }
        .sidebar { width: 240px; height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; overflow: hidden; }
        .sidebar-logo { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
        .sidebar-logo h1 { font-size: 1.1rem; font-weight: 800; color: var(--text); margin:0; }
        .sidebar-logo span { font-size: 0.65rem; color: var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
        .sidebar-collapsed .sidebar-logo > div:last-child { display:none; }
        .sidebar-collapsed .sidebar-logo { align-items:center; padding:0.875rem; }
        .sidebar-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }
        .nav-section { padding: 0.5rem 1rem 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
        .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.25rem; color: var(--muted); text-decoration: none; font-size: 0.9rem; border-left: 3px solid transparent; transition: all 0.15s; }
        .nav-link:hover, .nav-link.active { color: var(--text); background: rgba(212,160,23,0.1); border-left-color: var(--primary); }
        .nav-link i { font-size: 1rem; width: 20px; }
        .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
        .user-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
        .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #0d0b08; flex-shrink: 0; }
        .user-name { font-size: 0.875rem; font-weight: 600; }
        .user-role { font-size: 0.75rem; color: var(--muted); }
        .btn-logout { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.4rem; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; }
        .btn-logout:hover { color: #f87171; border-color: #f87171; }
        .main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; }
        .topbar { background: var(--sidebar-bg); border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
        .topbar h2 { font-size: 1.1rem; font-weight: 600; }
        .content { padding: 2rem; }
        .btn-primary { background: var(--primary); border: none; border-radius: 8px; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: #0d0b08; cursor: pointer; transition: background 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
        .btn-primary:hover { background: var(--primary-dark); color: #0d0b08; }
        .btn-secondary { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--muted); cursor: pointer; transition: all 0.15s; }
        .btn-secondary:hover { border-color: var(--muted); color: var(--text); }

        /* Calendar */
        .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
        .cal-title { font-size: 1.25rem; font-weight: 700; }
        .cal-nav { display: flex; gap: 0.5rem; }
        .cal-nav-btn { background: var(--card-bg); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 0.4rem 0.875rem; cursor: pointer; font-size: 0.875rem; text-decoration: none; transition: all 0.15s; display: flex; align-items: center; gap: 0.3rem; }
        .cal-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
        .cal-nav-btn.today { color: var(--primary); border-color: rgba(212,160,23,0.4); }

        .calendar { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

        .cal-days-header { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); }
        .cal-day-name { padding: 0.6rem; text-align: center; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

        .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

        .cal-cell { min-height: 110px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0.5rem; position: relative; transition: background 0.15s; cursor: pointer; }
        .cal-cell:hover { background: rgba(212,160,23,0.04); }
        .cal-cell:nth-child(7n) { border-right: none; }
        .cal-cell.other-month { opacity: 0.3; }
        .cal-cell.today-cell { background: rgba(212,160,23,0.06); }

        .day-num { font-size: 0.8rem; font-weight: 600; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 0.25rem; }
        .today-cell .day-num { background: var(--primary); color: #0d0b08; }

        .cal-event { font-size: 0.68rem; padding: 0.15rem 0.4rem; border-radius: 4px; margin-bottom: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
        .cal-event.type-event { background: rgba(212,160,23,0.2); color: var(--primary); }
        .cal-event.type-task  { background: rgba(139,26,26,0.2); color: #c0392b; }
        .cal-event.type-task.overdue { background: rgba(239,68,68,0.2); color: #ef4444; }

        .more-chip { font-size: 0.65rem; color: var(--muted); cursor: pointer; }
        .more-chip:hover { color: var(--primary); }

        /* Modal */
        .modal-content { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; color: var(--text); }
        .modal-header { border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; }
        .modal-footer { border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
        .modal-body { padding: 1.5rem; }
        .modal-title { font-weight: 700; }
        .btn-close { filter: invert(1) opacity(0.5); }
        .form-label { color: var(--muted); font-size: 0.85rem; font-weight: 500; }
        .form-control, .form-select { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; }
        .form-control:focus, .form-select:focus { background: var(--bg); border-color: var(--primary); color: var(--text); box-shadow: 0 0 0 3px rgba(212,160,23,0.2); }
        .form-control::placeholder { color: #4a3f2a; }
        .form-select option { background: var(--card-bg); }

        .color-options { display: flex; gap: 0.5rem; flex-wrap: wrap; }
        .color-opt { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all 0.15s; }
        .color-opt.selected, .color-opt:hover { border-color: white; transform: scale(1.15); }

        /* Day events popup */
        .day-popup { position: fixed; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; z-index: 9999; min-width: 240px; max-width: 300px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
        .day-popup-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.75rem; color: var(--primary); }
        .popup-event { padding: 0.5rem; border-radius: 6px; margin-bottom: 0.4rem; font-size: 0.8rem; }
        .popup-event-title { font-weight: 600; }
        .popup-event-meta { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   MEMBERS  (members.php)
   ──────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        body.sidebar-collapsed .sidebar { width: 56px; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
        body.sidebar-collapsed .sidebar-brand,
        body.sidebar-collapsed .nav-label-text,
        body.sidebar-collapsed .sidebar-footer .user-info,
        body.sidebar-collapsed .sidebar-footer .user-status-dot { display: none; }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-logo img {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section {
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.02em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
            font-family: 'Space Mono', monospace;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(212,160,23,0.04);
        }

        .nav-link.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-info-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.4rem 0;
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
            overflow: hidden;
        }

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

        .user-details { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Syne', sans-serif;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ════ MAIN ════ */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            transition: margin-left 0.2s ease;
        }

        /* ════ TOPBAR ════ */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.97);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
            gap: 1rem;
            flex-shrink: 0;
        }

        .topbar h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            letter-spacing: 0.02em;
        }

        .mobile-menu-btn, .sidebar-toggle-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .mobile-menu-btn:hover, .sidebar-toggle-btn:hover {
            color: var(--gold);
            border-color: var(--gold-dim);
        }

        .notif-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
            text-decoration: none;
        }
        .notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .badge-count {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 16px; height: 16px;
            border-radius: 8px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.52rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            font-family: 'Space Mono', monospace;
        }

        /* ════ CONTENT ════ */
        .content {
            flex: 1;
            padding: 1.75rem 2rem;
        }

        /* ════ CARDS ════ */
        .card, .section-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .card-header, .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            gap: 0.75rem;
        }

        .card-title, .section-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }

        .card-body, .section-body {
            padding: 1.1rem 1.25rem;
        }

        /* ════ BUTTONS ════ */
        .btn-primary {
            background: var(--gold);
            border: none;
            border-radius: 3px;
            color: var(--bg);
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.6rem 1.25rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--gold-mid); color: var(--bg); }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--muted);
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.12s, border-color 0.12s;
        }
        .btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

        .btn-danger {
            background: rgba(139,26,26,0.15);
            border: 1px solid rgba(139,26,26,0.35);
            border-radius: 3px;
            color: #f87171;
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            padding: 0.5rem 0.875rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.12s;
        }
        .btn-danger:hover { background: rgba(139,26,26,0.25); }

        /* ════ INPUTS ════ */
        .form-control, .mod-input, input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], select, textarea {
            background: var(--surface2, #111009) !important;
            border: 1px solid var(--border2) !important;
            border-radius: 3px !important;
            color: var(--text) !important;
            font-family: 'Space Mono', monospace !important;
            font-size: 0.8rem !important;
            padding: 0.6rem 0.875rem !important;
            outline: none !important;
            transition: border-color 0.12s !important;
            width: 100%;
        }
        .form-control:focus, .mod-input:focus,
        input:focus, select:focus, textarea:focus {
            border-color: var(--gold-dim) !important;
            box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
        }
        .form-control::placeholder, .mod-input::placeholder,
        input::placeholder, textarea::placeholder {
            color: var(--dim, #2a2218) !important;
        }

        /* ════ TABLES ════ */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .admin-table th {
            font-size: 0.6rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            text-align: left;
            font-weight: 400;
            background: rgba(0,0,0,0.2);
        }
        .admin-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.02); }

        /* ════ ALERTS ════ */
        .alert-success {
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.25);
            border-left: 3px solid #22c55e;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #86efac;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }
        .alert-danger, .alert-error {
            background: rgba(139,26,26,0.1);
            border: 1px solid rgba(139,26,26,0.3);
            border-left: 3px solid #c0392b;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #f87171;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }

        /* ════ SCANLINES ════ */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
            pointer-events: none;
            z-index: 9999;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: var(--bg); color: var(--text); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; display: flex; min-height: 100vh; }
        .sidebar { width: 240px; height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; overflow: hidden; }
        .sidebar-logo { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
        .sidebar-logo h1 { font-size: 1.1rem; font-weight: 800; color: var(--text); margin:0; }
        .sidebar-logo span { font-size: 0.65rem; color: var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
        .sidebar-collapsed .sidebar-logo > div:last-child { display:none; }
        .sidebar-collapsed .sidebar-logo { align-items:center; padding:0.875rem; }
        .sidebar-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }
        .nav-section { padding: 0.5rem 1rem 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
        .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.25rem; color: var(--muted); text-decoration: none; font-size: 0.9rem; border-left: 3px solid transparent; transition: all 0.15s; }
        .nav-link:hover, .nav-link.active { color: var(--text); background: rgba(212,160,23,0.1); border-left-color: var(--primary); }
        .nav-link i { font-size: 1rem; width: 20px; }
        .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
        .user-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
        .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #0d0b08; flex-shrink: 0; }
        .user-name { font-size: 0.875rem; font-weight: 600; }
        .user-role { font-size: 0.75rem; color: var(--muted); }
        .btn-logout { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.4rem; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; }
        .btn-logout:hover { color: #f87171; border-color: #f87171; }
        .main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; }
        .topbar { background: var(--sidebar-bg); border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
        .topbar h2 { font-size: 1.1rem; font-weight: 600; }
        .content { padding: 2rem; }
        .btn-primary { background: var(--primary); border: none; border-radius: 8px; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: #0d0b08; cursor: pointer; transition: background 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
        .btn-primary:hover { background: var(--primary-dark); color: #0d0b08; }
        .btn-secondary { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--muted); cursor: pointer; transition: all 0.15s; }
        .btn-secondary:hover { border-color: var(--muted); color: var(--text); }

        /* Member Cards */
        .member-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; transition: all 0.15s; flex-wrap: wrap; }
        .member-card:hover { border-color: var(--primary); }
        .member-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: #0d0b08; flex-shrink: 0; }
        .member-info { flex: 1; min-width: 0; min-width: 200px; }
        .member-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.2rem; }
        .member-email { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.4rem; word-break: break-all; }
        .member-stats { display: flex; gap: 0.75rem; flex-wrap: wrap; }
        .stat-chip { font-size: 0.75rem; color: var(--muted); display: flex; align-items: center; gap: 0.3rem; }
        .role-badge { font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
        .role-admin { background: rgba(212,160,23,0.2); color: var(--primary); }
        .role-manager { background: rgba(139,26,26,0.2); color: #c0392b; }
        .role-member { background: rgba(154,138,106,0.2); color: var(--muted); }
        .member-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
        .btn-icon { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
        .btn-icon:hover { color: var(--primary); border-color: var(--primary); }
        .btn-icon.danger:hover { color: #ef4444; border-color: #ef4444; }

        /* Mobile member card */
        @media(max-width:768px) {
            .member-card { flex-direction: column; align-items: flex-start; gap: 0.875rem; padding: 1rem; }
            .member-card > div:first-child { display: flex; align-items: center; gap: 0.75rem; width: 100%; }
            .member-info { width: 100%; min-width: 0; }
            .member-actions { width: 100%; justify-content: flex-start; padding-top: 0.5rem; border-top: 1px solid var(--border); }
            .member-stats { gap: 0.6rem; }
        }

        /* You badge */
        .you-badge { font-size: 0.65rem; background: rgba(212,160,23,0.15); color: var(--primary); border: 1px solid rgba(212,160,23,0.3); border-radius: 20px; padding: 0.1rem 0.5rem; font-weight: 600; }

        /* Modal */
        .modal-content { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; color: var(--text); }
        /* Notes button */
        .notes-active { color: var(--primary) !important; border-color: rgba(212,160,23,0.4) !important; }
        .notes-count {
            position: absolute; top: -4px; right: -4px;
            background: var(--primary); color: #0d0b08;
            border-radius: 50%; width: 14px; height: 14px;
            font-size: 0.6rem; font-weight: 800;
            display: flex; align-items: center; justify-content: center;
        }
        /* Notes slide-in panel */
        .notes-panel {
            position: fixed; top: 0; right: -420px; width: 400px; height: 100vh;
            background: var(--sidebar-bg); border-left: 1px solid var(--border);
            z-index: 500; display: flex; flex-direction: column;
            transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
            box-shadow: -8px 0 32px rgba(0,0,0,0.4);
        }
        .notes-panel.open { right: 0; }
        .notes-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.4);
            z-index: 499; display: none; backdrop-filter: blur(2px);
        }
        .notes-overlay.show { display: block; }
        .notes-panel-header {
            padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
        }
        .notes-panel-title { font-size: 1rem; font-weight: 700; color: var(--text); }
        .notes-panel-sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.1rem; }
        .notes-list { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
        .note-item {
            background: var(--card-bg); border: 1px solid var(--border);
            border-radius: 10px; padding: 0.875rem 1rem;
        }
        .note-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
        .note-author { font-size: 0.75rem; font-weight: 700; color: var(--primary); }
        .note-date { font-size: 0.7rem; color: var(--muted); }
        .note-text { font-size: 0.85rem; color: var(--text); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
        .note-actions { display: flex; gap: 0.35rem; margin-top: 0.5rem; }
        .notes-add { padding: 1rem 1.5rem; border-top: 1px solid var(--border); flex-shrink: 0; }
        .notes-textarea {
            width: 100%; background: var(--bg); border: 1px solid var(--border);
            color: var(--text); border-radius: 8px; padding: 0.6rem 0.875rem;
            font-size: 0.875rem; font-family: inherit; resize: none; outline: none;
            transition: border-color 0.15s; min-height: 80px;
        }
        .notes-textarea:focus { border-color: var(--primary); }
        .notes-textarea::placeholder { color: var(--muted); }
        .modal-header { border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; }
        .modal-footer { border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
        .modal-body { padding: 1.5rem; }
        .modal-title { font-weight: 700; }
        .btn-close { filter: invert(1) opacity(0.5); }
        .form-label { color: var(--muted); font-size: 0.85rem; font-weight: 500; }
        .form-control, .form-select { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; }
        .form-control:focus, .form-select:focus { background: var(--bg); border-color: var(--primary); color: var(--text); box-shadow: 0 0 0 3px rgba(212,160,23,0.2); }
        .form-control::placeholder { color: #4a3f2a; }
        .form-select option { background: var(--card-bg); }
        .alert-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #86efac; border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.875rem; margin-bottom: 1.5rem; }
        .alert-danger { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.875rem; margin-bottom: 1rem; }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   PROJECTS  (projects.php)
   ──────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        body.sidebar-collapsed .sidebar { width: 56px; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
        body.sidebar-collapsed .sidebar-brand,
        body.sidebar-collapsed .nav-label-text,
        body.sidebar-collapsed .sidebar-footer .user-info,
        body.sidebar-collapsed .sidebar-footer .user-status-dot { display: none; }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-logo img {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section {
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.02em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
            font-family: 'Space Mono', monospace;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(212,160,23,0.04);
        }

        .nav-link.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-info-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.4rem 0;
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
            overflow: hidden;
        }

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

        .user-details { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Syne', sans-serif;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ════ MAIN ════ */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            transition: margin-left 0.2s ease;
        }

        /* ════ TOPBAR ════ */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.97);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
            gap: 1rem;
            flex-shrink: 0;
        }

        .topbar h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            letter-spacing: 0.02em;
        }

        .mobile-menu-btn, .sidebar-toggle-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .mobile-menu-btn:hover, .sidebar-toggle-btn:hover {
            color: var(--gold);
            border-color: var(--gold-dim);
        }

        .notif-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
            text-decoration: none;
        }
        .notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .badge-count {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 16px; height: 16px;
            border-radius: 8px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.52rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            font-family: 'Space Mono', monospace;
        }

        /* ════ CONTENT ════ */
        .content {
            flex: 1;
            padding: 1.75rem 2rem;
        }

        /* ════ CARDS ════ */
        .card, .section-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .card-header, .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            gap: 0.75rem;
        }

        .card-title, .section-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }

        .card-body, .section-body {
            padding: 1.1rem 1.25rem;
        }

        /* ════ BUTTONS ════ */
        .btn-primary {
            background: var(--gold);
            border: none;
            border-radius: 3px;
            color: var(--bg);
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.6rem 1.25rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--gold-mid); color: var(--bg); }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--muted);
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.12s, border-color 0.12s;
        }
        .btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

        .btn-danger {
            background: rgba(139,26,26,0.15);
            border: 1px solid rgba(139,26,26,0.35);
            border-radius: 3px;
            color: #f87171;
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            padding: 0.5rem 0.875rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.12s;
        }
        .btn-danger:hover { background: rgba(139,26,26,0.25); }

        /* ════ INPUTS ════ */
        .form-control, .mod-input, input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], select, textarea {
            background: var(--surface2, #111009) !important;
            border: 1px solid var(--border2) !important;
            border-radius: 3px !important;
            color: var(--text) !important;
            font-family: 'Space Mono', monospace !important;
            font-size: 0.8rem !important;
            padding: 0.6rem 0.875rem !important;
            outline: none !important;
            transition: border-color 0.12s !important;
            width: 100%;
        }
        .form-control:focus, .mod-input:focus,
        input:focus, select:focus, textarea:focus {
            border-color: var(--gold-dim) !important;
            box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
        }
        .form-control::placeholder, .mod-input::placeholder,
        input::placeholder, textarea::placeholder {
            color: var(--dim, #2a2218) !important;
        }

        /* ════ TABLES ════ */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .admin-table th {
            font-size: 0.6rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            text-align: left;
            font-weight: 400;
            background: rgba(0,0,0,0.2);
        }
        .admin-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.02); }

        /* ════ ALERTS ════ */
        .alert-success {
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.25);
            border-left: 3px solid #22c55e;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #86efac;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }
        .alert-danger, .alert-error {
            background: rgba(139,26,26,0.1);
            border: 1px solid rgba(139,26,26,0.3);
            border-left: 3px solid #c0392b;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #f87171;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }

        /* ════ SCANLINES ════ */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
            pointer-events: none;
            z-index: 9999;
        }

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

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 240px;
            height: 100vh;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 100;
        }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .sidebar-logo h1 { font-size: 1.2rem; font-weight: 700; color: var(--text); }
        .sidebar-logo span { font-size: 0.7rem; color: var(--muted); }

        .sidebar-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }

        .nav-section {
            padding: 0.5rem 1rem 0.25rem;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--muted);
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.25rem;
            color: var(--muted);
            text-decoration: none;
            font-size: 0.9rem;
            border-left: 3px solid transparent;
            transition: all 0.15s;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--text);
            background: rgba(212,160,23,0.1);
            border-left-color: var(--primary);
        }

        .nav-link i { font-size: 1rem; width: 20px; }

        .sidebar-footer {
            padding: 1rem 1.25rem;
            border-top: 1px solid var(--border);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .avatar {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: var(--primary);
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 0.85rem;
            color: #0d0b08; flex-shrink: 0;
        }

        .user-name { font-size: 0.875rem; font-weight: 600; }
        .user-role { font-size: 0.75rem; color: var(--muted); }

        .btn-logout {
            width: 100%;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--muted);
            border-radius: 6px;
            padding: 0.4rem;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-logout:hover { color: #f87171; border-color: #f87171; }

        .main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; }

        .topbar {
            background: var(--sidebar-bg);
            border-bottom: 1px solid var(--border);
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .topbar h2 { font-size: 1.1rem; font-weight: 600; }

        .content { padding: 2rem; }

        /* Project Grid */
        .project-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.2s;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .project-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.4);
            border-color: var(--primary);
        }

        .project-banner {
            height: 6px;
        }

        .project-body {
            padding: 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .project-name {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0.4rem;
            color: var(--text);
        }

        .project-desc {
            font-size: 0.8rem;
            color: var(--muted);
            flex: 1;
            margin-bottom: 1rem;
            line-height: 1.5;
        }

        .project-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid var(--border);
            padding-top: 0.75rem;
            margin-top: auto;
        }

        .project-stats { display: flex; gap: 1rem; }

        .stat-pill {
            font-size: 0.75rem;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .project-actions { display: flex; gap: 0.4rem; }

        .btn-icon {
            background: none;
            border: 1px solid var(--border);
            color: var(--muted);
            border-radius: 6px;
            width: 30px; height: 30px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
            text-decoration: none;
        }

        .btn-icon:hover { color: var(--primary); border-color: var(--primary); }
        .btn-icon.danger:hover { color: #ef4444; border-color: #ef4444; }

        .btn-open {
            display: block;
            text-align: center;
            background: rgba(212,160,23,0.1);
            border: 1px solid rgba(212,160,23,0.3);
            color: var(--primary);
            border-radius: 8px;
            padding: 0.5rem;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            margin-bottom: 0.75rem;
            transition: all 0.15s;
        }

        .btn-open:hover {
            background: var(--primary);
            color: #0d0b08;
        }

        /* New Project Card */
        .new-project-card {
            background: var(--card-bg);
            border: 2px dashed var(--border);
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 200px;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            color: var(--muted);
        }

        .new-project-card:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(212,160,23,0.05);
        }

        .new-project-card i { font-size: 2rem; margin-bottom: 0.5rem; }
        .new-project-card span { font-size: 0.9rem; font-weight: 600; }

        /* Buttons */
        .btn-primary {
            background: var(--primary);
            border: none;
            border-radius: 8px;
            padding: 0.5rem 1.25rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: #0d0b08;
            cursor: pointer;
            transition: background 0.15s;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary:hover { background: var(--primary-dark); color: #0d0b08; }

        .btn-secondary {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.5rem 1.25rem;
            font-size: 0.875rem;
            color: var(--muted);
            cursor: pointer;
            transition: all 0.15s;
        }

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

        /* Modal */
        .modal-content {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 16px;
            color: var(--text);
        }

        .modal-header {
            border-bottom: 1px solid var(--border);
            padding: 1.25rem 1.5rem;
        }

        .modal-title { font-weight: 700; }

        .modal-footer {
            border-top: 1px solid var(--border);
            padding: 1rem 1.5rem;
        }

        .modal-body { padding: 1.5rem; }

        .btn-close { filter: invert(1) opacity(0.5); }

        .form-label { color: var(--muted); font-size: 0.85rem; font-weight: 500; }

        .form-control, .form-select {
            background: var(--bg);
            border: 1px solid var(--border);
            color: var(--text);
            border-radius: 8px;
        }

        .form-control:focus, .form-select:focus {
            background: var(--bg);
            border-color: var(--primary);
            color: var(--text);
            box-shadow: 0 0 0 3px rgba(212,160,23,0.2);
        }

        .form-control::placeholder { color: #4a3f2a; }

        /* Color Picker */
        .color-options { display: flex; gap: 0.5rem; flex-wrap: wrap; }

        .color-opt {
            width: 30px; height: 30px;
            border-radius: 50%;
            cursor: pointer;
            border: 3px solid transparent;
            transition: all 0.15s;
        }

        .color-opt.selected, .color-opt:hover {
            border-color: white;
            transform: scale(1.15);
        }

        /* Alert */
        .alert-success {
            background: rgba(34,197,94,0.1);
            border: 1px solid rgba(34,197,94,0.3);
            color: #86efac;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            margin-bottom: 1.5rem;
        }

        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--muted);
        }

        .empty-state i { font-size: 3rem; display: block; margin-bottom: 1rem; color: var(--border); }
        .empty-state h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 0.5rem; }
        .empty-state p { font-size: 0.875rem; margin-bottom: 1.5rem; }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   MY TASKS  (tasks.php)
   ──────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        body.sidebar-collapsed .sidebar { width: 56px; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
        body.sidebar-collapsed .sidebar-brand,
        body.sidebar-collapsed .nav-label-text,
        body.sidebar-collapsed .sidebar-footer .user-info,
        body.sidebar-collapsed .sidebar-footer .user-status-dot { display: none; }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-logo img {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section {
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.02em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
            font-family: 'Space Mono', monospace;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(212,160,23,0.04);
        }

        .nav-link.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-info-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.4rem 0;
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
            overflow: hidden;
        }

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

        .user-details { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Syne', sans-serif;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ════ MAIN ════ */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            transition: margin-left 0.2s ease;
        }

        /* ════ TOPBAR ════ */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.97);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
            gap: 1rem;
            flex-shrink: 0;
        }

        .topbar h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            letter-spacing: 0.02em;
        }

        .mobile-menu-btn, .sidebar-toggle-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .mobile-menu-btn:hover, .sidebar-toggle-btn:hover {
            color: var(--gold);
            border-color: var(--gold-dim);
        }

        .notif-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
            text-decoration: none;
        }
        .notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .badge-count {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 16px; height: 16px;
            border-radius: 8px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.52rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            font-family: 'Space Mono', monospace;
        }

        /* ════ CONTENT ════ */
        .content {
            flex: 1;
            padding: 1.75rem 2rem;
        }

        /* ════ CARDS ════ */
        .card, .section-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .card-header, .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            gap: 0.75rem;
        }

        .card-title, .section-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }

        .card-body, .section-body {
            padding: 1.1rem 1.25rem;
        }

        /* ════ BUTTONS ════ */
        .btn-primary {
            background: var(--gold);
            border: none;
            border-radius: 3px;
            color: var(--bg);
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.6rem 1.25rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--gold-mid); color: var(--bg); }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--muted);
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.12s, border-color 0.12s;
        }
        .btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

        .btn-danger {
            background: rgba(139,26,26,0.15);
            border: 1px solid rgba(139,26,26,0.35);
            border-radius: 3px;
            color: #f87171;
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            padding: 0.5rem 0.875rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.12s;
        }
        .btn-danger:hover { background: rgba(139,26,26,0.25); }

        /* ════ INPUTS ════ */
        .form-control, .mod-input, input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], select, textarea {
            background: var(--surface2, #111009) !important;
            border: 1px solid var(--border2) !important;
            border-radius: 3px !important;
            color: var(--text) !important;
            font-family: 'Space Mono', monospace !important;
            font-size: 0.8rem !important;
            padding: 0.6rem 0.875rem !important;
            outline: none !important;
            transition: border-color 0.12s !important;
            width: 100%;
        }
        .form-control:focus, .mod-input:focus,
        input:focus, select:focus, textarea:focus {
            border-color: var(--gold-dim) !important;
            box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
        }
        .form-control::placeholder, .mod-input::placeholder,
        input::placeholder, textarea::placeholder {
            color: var(--dim, #2a2218) !important;
        }

        /* ════ TABLES ════ */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .admin-table th {
            font-size: 0.6rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            text-align: left;
            font-weight: 400;
            background: rgba(0,0,0,0.2);
        }
        .admin-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.02); }

        /* ════ ALERTS ════ */
        .alert-success {
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.25);
            border-left: 3px solid #22c55e;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #86efac;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }
        .alert-danger, .alert-error {
            background: rgba(139,26,26,0.1);
            border: 1px solid rgba(139,26,26,0.3);
            border-left: 3px solid #c0392b;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #f87171;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }

        /* ════ SCANLINES ════ */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
            pointer-events: none;
            z-index: 9999;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: var(--bg); color: var(--text); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; display: flex; min-height: 100vh; }
        .sidebar { width: 240px; height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; overflow: hidden; }
        .sidebar-logo { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
        .sidebar-logo h1 { font-size: 1.1rem; font-weight: 800; color: var(--text); margin:0; }
        .sidebar-logo span { font-size: 0.65rem; color: var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
        .sidebar-collapsed .sidebar-logo > div:last-child { display:none; }
        .sidebar-collapsed .sidebar-logo { align-items:center; padding:0.875rem; }
        .sidebar-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }
        .nav-section { padding: 0.5rem 1rem 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
        .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.25rem; color: var(--muted); text-decoration: none; font-size: 0.9rem; border-left: 3px solid transparent; transition: all 0.15s; }
        .nav-link:hover, .nav-link.active { color: var(--text); background: rgba(212,160,23,0.1); border-left-color: var(--primary); }
        .nav-link i { font-size: 1rem; width: 20px; }
        .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
        .user-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
        .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #0d0b08; flex-shrink: 0; }
        .user-name { font-size: 0.875rem; font-weight: 600; }
        .user-role { font-size: 0.75rem; color: var(--muted); }
        .btn-logout { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.4rem; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; }
        .btn-logout:hover { color: #f87171; border-color: #f87171; }
        .main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; }
        .topbar { background: var(--sidebar-bg); border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
        .topbar h2 { font-size: 1.1rem; font-weight: 600; }
        .content { padding: 2rem; }

        /* Stats */
        .stat-row { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
        .mini-stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.875rem 1.25rem; flex: 1; min-width: 120px; }
        .mini-stat-val { font-size: 1.5rem; font-weight: 700; }
        .mini-stat-label { font-size: 0.75rem; color: var(--muted); }

        /* Filters */
        .filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center; }
        .filter-btn { background: var(--card-bg); border: 1px solid var(--border); color: var(--muted); border-radius: 20px; padding: 0.35rem 0.875rem; font-size: 0.8rem; text-decoration: none; transition: all 0.15s; }
        .filter-btn:hover, .filter-btn.active { background: rgba(212,160,23,0.15); border-color: var(--primary); color: var(--primary); }
        .filter-select { background: var(--card-bg); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 0.35rem 0.75rem; font-size: 0.8rem; cursor: pointer; }
        .filter-select:focus { outline: none; border-color: var(--primary); }
        .filter-select option { background: var(--card-bg); }

        /* Task List */
        .task-row { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; transition: all 0.15s; margin-bottom: 0.5rem; }
        .task-row:hover { border-color: var(--primary); }
        .task-row.done-task { opacity: 0.6; }
        .priority-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
        .p-low { background: #22c55e; }
        .p-medium { background: #f59e0b; }
        .p-high { background: #ef4444; }
        .p-critical { background: #7c3aed; }
        .task-info { flex: 1; }
        .task-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.2rem; }
        .task-title a { color: var(--text); text-decoration: none; }
        .task-title a:hover { color: var(--primary); }
        .task-sub { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
        .project-tag { font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 20px; color: var(--primary); background: rgba(212,160,23,0.12); border: 1px solid rgba(212,160,23,0.2); }
        .column-tag { font-size: 0.7rem; color: var(--muted); }
        .subtask-mini { font-size: 0.7rem; color: var(--muted); display: flex; align-items: center; gap: 0.2rem; }
        .due-chip { font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 20px; white-space: nowrap; }
        .due-normal { background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
        .due-soon   { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: #f59e0b; }
        .due-overdue { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; }
        .due-done   { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; }

        .empty-state { text-align: center; padding: 4rem 2rem; color: var(--muted); }
        .empty-state i { font-size: 3rem; display: block; margin-bottom: 1rem; color: var(--border); }
        .empty-state h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 0.5rem; }

    /* ── Mobile body fix (Android) ── */
    @media (max-width: 768px) {
        body { overflow-x: hidden !important; overflow-y: auto !important; }
    }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   ANNOUNCEMENTS  (announcements.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar { width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;transition:width 0.2s ease; }
        body.sidebar-collapsed .sidebar{width:56px;} body.sidebar-collapsed .main{margin-left:56px!important;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
        .sidebar-logo img{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
        .sidebar-brand{font-family:'Syne',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.06em;color:var(--text);white-space:nowrap;}
        .sidebar-brand span{color:var(--gold);}
        .sidebar-nav{flex:1;overflow-y:auto;padding:0.75rem 0;scrollbar-width:none;}
        .sidebar-nav::-webkit-scrollbar{display:none;}
        .nav-section{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding:1rem 1.5rem 0.4rem;}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.5rem;font-size:0.75rem;color:var(--muted);text-decoration:none;transition:color 0.12s,background 0.12s;white-space:nowrap;border-left:2px solid transparent;font-family:'Space Mono',monospace;}
        .nav-link:hover{color:var(--text);background:rgba(212,160,23,0.04);}
        .nav-link.active{color:var(--gold);background:rgba(212,160,23,0.06);border-left-color:var(--gold);}
        .nav-link i{font-size:0.9rem;width:18px;text-align:center;flex-shrink:0;}
        .sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;}
        .avatar{width:34px;height:34px;border-radius:7px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);flex-shrink:0;font-family:'Syne',sans-serif;overflow:hidden;}
        .avatar img{width:100%;height:100%;object-fit:cover;}
        .user-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Syne',sans-serif;}
        .user-role{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
        /* ════ MAIN ════ */
        .main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);transition:margin-left 0.2s ease;}
        /* ════ TOPBAR ════ */
        .topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(7,6,4,0.97);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;gap:1rem;flex-shrink:0;}
        .topbar h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:0.02em;}
        .mobile-menu-btn,.sidebar-toggle-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;flex-shrink:0;}
        .mobile-menu-btn:hover,.sidebar-toggle-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .notif-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;position:relative;text-decoration:none;}
        .notif-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:0.52rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'Space Mono',monospace;}
        /* ════ CONTENT ════ */
        .content{flex:1;padding:1.75rem 2rem;}
        /* ════ CARDS ════ */
        .card,.section-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;overflow:hidden;margin-bottom:1.25rem;}
        .card-header,.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);gap:0.75rem;}
        .card-title,.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        .card-body,.section-body{padding:1.1rem 1.25rem;}
        /* ════ BUTTONS ════ */
        .btn-primary{background:var(--gold);border:none;border-radius:3px;color:var(--bg);font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;}
        .btn-primary:hover{background:var(--gold-mid);color:var(--bg);}
        .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:color 0.12s,border-color 0.12s;}
        .btn-outline:hover{color:var(--gold);border-color:var(--gold-dim);}
        .btn-danger{background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.35);border-radius:3px;color:#f87171;font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:background 0.12s;}
        .btn-danger:hover{background:rgba(139,26,26,0.25);}
        /* ════ INPUTS ════ */
        .form-control,.mod-input{background:var(--surface2,#111009)!important;border:1px solid var(--border2)!important;border-radius:3px!important;color:var(--text)!important;font-family:'Space Mono',monospace!important;font-size:0.8rem!important;padding:0.6rem 0.875rem!important;outline:none!important;transition:border-color 0.12s!important;}
        .form-control:focus,.mod-input:focus{border-color:var(--gold-dim)!important;box-shadow:0 0 0 3px rgba(212,160,23,0.07)!important;}
        /* ════ ALERTS ════ */
        .alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-left:3px solid #22c55e;border-radius:3px;padding:0.75rem 1rem;color:#86efac;font-size:0.78rem;margin-bottom:1rem;}
        .alert-danger,.alert-error{background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.3);border-left:3px solid #c0392b;border-radius:3px;padding:0.75rem 1rem;color:#f87171;font-size:0.78rem;margin-bottom:1rem;}
        /* ════ SCANLINES ════ */
        body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}

:root{--primary:#d4a017;--primary-dark:#b8860b;--bg:#0d0b08;--sidebar-bg:#111009;--card-bg:#1a1610;--border:#2e2515;--text:#f0e6d0;--muted:#9a8a6a;}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,sans-serif;display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;}
.sidebar{width:240px;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;overflow:hidden;}
.sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;flex-shrink:0;}
.sidebar-logo h1{font-size:1.2rem;font-weight:700;}
.sidebar-logo span{font-size:0.7rem;color:var(--muted);}
.sidebar-nav{padding:1rem 0;flex:1;overflow-y:auto;}
.nav-section{padding:0.5rem 1rem 0.25rem;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
.nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.9rem;font-weight:500;border-left:3px solid transparent;transition:all 0.15s;}
.nav-link:hover,.nav-link.active{color:var(--text);background:rgba(212,160,23,0.1);border-left-color:var(--primary);}
.nav-link i{font-size:1rem;width:20px;}
.sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0;}
.user-info{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#0d0b08;flex-shrink:0;}
.user-name{font-size:0.875rem;font-weight:600;}
.user-role{font-size:0.75rem;color:var(--muted);}
.btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.4rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;font-family:inherit;}
.btn-logout:hover{color:#f87171;border-color:#f87171;}
.main{margin-left: 260px;flex:1;display:flex;flex-direction:column;}
.topbar{background:var(--sidebar-bg);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;flex-shrink:0;}
.topbar h2{font-size:1.1rem;font-weight:700;color:var(--text);}
.content{padding:1.5rem 2rem;max-width:900px;}

/* Buttons */
.btn-primary{background:var(--primary);border:none;border-radius:8px;padding:0.55rem 1.25rem;font-size:0.875rem;font-weight:700;color:#0d0b08;cursor:pointer;transition:background 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.4rem;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:0.45rem 0.875rem;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.35rem;}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-danger{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;border-radius:8px;padding:0.4rem 0.75rem;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.15s;font-family:inherit;}
.btn-danger:hover{background:rgba(239,68,68,0.2);}

/* Alerts */
.alert-ok{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:#86efac;border-radius:10px;padding:0.875rem 1.1rem;margin-bottom:1.25rem;font-size:0.875rem;display:flex;align-items:center;gap:0.6rem;}
.alert-err{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;border-radius:10px;padding:0.875rem 1.1rem;margin-bottom:1.25rem;font-size:0.875rem;display:flex;align-items:center;gap:0.6rem;}

/* Priority */
.pr-normal   {background:rgba(154,138,106,0.15);color:#b0a080;border-radius:20px;padding:0.15rem 0.6rem;font-size:0.7rem;font-weight:700;}
.pr-important{background:rgba(245,158,11,0.15);color:#fbbf24;border-radius:20px;padding:0.15rem 0.6rem;font-size:0.7rem;font-weight:700;}
.pr-critical {background:rgba(239,68,68,0.15);color:#f87171;border-radius:20px;padding:0.15rem 0.6rem;font-size:0.7rem;font-weight:700;}

/* Pinned banner */
.pinned-banner{background:linear-gradient(135deg,rgba(212,160,23,0.1),rgba(139,26,26,0.06));border:1px solid rgba(212,160,23,0.3);border-radius:14px;padding:1.5rem;margin-bottom:1.5rem;}
.pinned-label{font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:var(--primary);margin-bottom:0.6rem;display:flex;align-items:center;gap:0.4rem;}
.pinned-title{font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:0.75rem;}

/* Announcement cards */
.ann-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1rem;transition:border-color 0.15s;}
.ann-card:hover{border-color:rgba(212,160,23,0.2);}
.ann-card.important{border-left:3px solid #f59e0b;}
.ann-card.critical{border-left:3px solid #ef4444;}
.ann-header{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;margin-bottom:0.875rem;}
.ann-title{font-size:1rem;font-weight:700;color:var(--text);line-height:1.35;}
.ann-actions{display:flex;gap:0.4rem;flex-wrap:wrap;}
/* Rich content rendered from Quill */
.ann-body{font-size:0.9rem;color:var(--text);line-height:1.75;margin-bottom:0.875rem;}
.ann-body p{margin-bottom:0.5rem;}
.ann-body p:last-child{margin-bottom:0;}
.ann-body a{color:var(--primary);text-decoration:underline;word-break:break-all;}
.ann-body a:hover{color:#f0c040;}
.ann-body strong,.ann-body b{font-weight:700;}
.ann-body em,.ann-body i{font-style:italic;}
.ann-body ul,.ann-body ol{padding-left:1.4rem;margin:0.4rem 0 0.75rem;}
.ann-body li{margin-bottom:0.2rem;}
.ann-body h1,.ann-body h2,.ann-body h3{color:var(--text);font-weight:700;margin:0.75rem 0 0.4rem;}
.ann-body h1{font-size:1.2rem;} .ann-body h2{font-size:1.05rem;} .ann-body h3{font-size:0.95rem;}
.ann-body blockquote{border-left:3px solid var(--border);padding-left:0.875rem;color:#c8b080;font-style:italic;margin:0.5rem 0;}
.ann-body img{max-width:100%;border-radius:8px;margin:0.5rem 0;display:block;}
.ann-img{width:100%;max-height:340px;object-fit:cover;border-radius:10px;margin-bottom:1rem;display:block;}
.ann-meta{font-size:0.75rem;color:#c8b080;display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;}

/* Section divider */
.sec-label{font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:var(--primary);margin:2rem 0 1rem;display:flex;align-items:center;gap:0.75rem;}
.sec-label::after{content:'';flex:1;height:1px;background:var(--border);}

/* Archive cards */
.arch-card{background:rgba(0,0,0,0.25);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem;margin-bottom:0.6rem;transition:border-color 0.15s,opacity 0.15s;opacity:0.75;}
.arch-card:hover{opacity:1;border-color:rgba(212,160,23,0.2);}
.arch-title{font-size:0.9rem;font-weight:700;color:var(--text);margin-bottom:0.25rem;}
.arch-meta{font-size:0.75rem;color:#c8b080;display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;}
.arch-preview{font-size:0.8rem;color:#b0a080;margin-top:0.3rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* Empty */
.empty-state{text-align:center;padding:3rem;color:#b0a080;}
.empty-state i{font-size:2.5rem;display:block;margin-bottom:0.75rem;opacity:0.4;}

/* Modal */
.modal{--bs-modal-margin:1rem;}
/* Force dialog to fit viewport and scroll internally */
.modal-dialog{max-height:calc(100vh - 2rem);display:flex;flex-direction:column;}
.modal-dialog.modal-lg{max-width:760px;}
.modal-content{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;color:var(--text);display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh - 2rem);height:100%;}
.modal-header{border-bottom:1px solid var(--border);padding:1.25rem 1.5rem;flex-shrink:0;}
.modal-footer{border-top:1px solid var(--border);padding:1rem 1.5rem;gap:0.5rem;flex-shrink:0;display:flex;justify-content:flex-end;}
.modal-body{padding:1.5rem;overflow-y:auto;flex:1 1 0;min-height:0;}
.modal-body::-webkit-scrollbar{width:4px;}
.modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.btn-close{filter:invert(0.7);}
.modal-title{font-weight:700;color:var(--text);}
@media(max-width:768px){
    .modal-dialog{max-height:calc(100vh - 1rem);margin:0.5rem auto;}
    .modal-content{max-height:calc(100vh - 1rem);border-radius:12px;}
    .modal-dialog.modal-lg{max-width:calc(100% - 1rem);}
}

/* Form */
.form-label{font-size:0.82rem;font-weight:600;color:#c8b080;margin-bottom:0.4rem;display:block;}
.form-control,.form-select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:0.6rem 0.875rem;font-size:0.875rem;font-family:inherit;width:100%;outline:none;transition:border-color 0.15s;}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(212,160,23,0.1);}
.form-control::placeholder{color:var(--muted);}
.form-select option{background:var(--card-bg);color:var(--text);}
.form-check-label{font-size:0.875rem;color:var(--text);}

/* Image upload zone */
.img-zone{border:2px dashed var(--border);border-radius:10px;padding:1.25rem;text-align:center;cursor:pointer;transition:all 0.15s;color:var(--muted);font-size:0.85rem;position:relative;overflow:hidden;}
.img-zone:hover,.img-zone.over{border-color:var(--primary);color:var(--primary);background:rgba(212,160,23,0.04);}
.img-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.img-zone i{font-size:1.6rem;display:block;margin-bottom:0.4rem;}
.img-zone-name{font-size:0.78rem;color:var(--primary);margin-top:0.4rem;font-weight:600;}
.img-preview-thumb{width:100%;max-height:180px;object-fit:cover;border-radius:7px;margin-top:0.75rem;display:none;}

/* Quill dark theme */
.ql-toolbar.ql-snow{background:#0a0905 !important;border:1px solid var(--border) !important;border-radius:8px 8px 0 0 !important;}
.ql-toolbar.ql-snow .ql-stroke{stroke:#c8b080;}
.ql-toolbar.ql-snow .ql-fill{fill:#c8b080;}
.ql-toolbar.ql-snow button:hover .ql-stroke,.ql-toolbar.ql-snow button.ql-active .ql-stroke{stroke:var(--primary);}
.ql-toolbar.ql-snow button:hover .ql-fill,.ql-toolbar.ql-snow button.ql-active .ql-fill{fill:var(--primary);}
.ql-toolbar.ql-snow .ql-picker-label{color:#c8b080;}
.ql-toolbar.ql-snow .ql-picker-options{background:var(--card-bg);border-color:var(--border);}
.ql-toolbar.ql-snow .ql-picker-item{color:var(--text);}
.ql-container.ql-snow{background:var(--bg) !important;border:1px solid var(--border) !important;border-top:none !important;border-radius:0 0 8px 8px !important;color:var(--text) !important;font-size:0.9rem;}
.ql-editor{min-height:160px;color:var(--text) !important;font-family:'Inter','Segoe UI',sans-serif;}
.ql-editor.ql-blank::before{color:var(--muted) !important;font-style:normal !important;}
.ql-editor a{color:var(--primary);}
.ql-editor p,.ql-editor li{color:var(--text);}
.ql-snow .ql-tooltip{background:var(--card-bg);border-color:var(--border);color:var(--text);border-radius:8px;}
.ql-snow .ql-tooltip input[type=text]{background:var(--bg);border-color:var(--border);color:var(--text);border-radius:6px;}
.ql-snow .ql-tooltip a.ql-action,.ql-snow .ql-tooltip a.ql-remove{color:var(--primary);}

/* Collapsible sidebar */
body.sidebar-collapsed .sidebar{width:56px!important;overflow:hidden!important;}
body.sidebar-collapsed .main{margin-left:56px!important;}
@media(max-width:768px){body{overflow-x:hidden!important;overflow-y:auto!important;}.main{margin-left:0!important;}.topbar{padding:0.7rem 0.875rem;}.content{padding:1rem;}}


/* ────────────────────────────────────────────────────────────
   SETTINGS (Admin)  (admin.php)
   ──────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        body.sidebar-collapsed .sidebar { width: 56px; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
        body.sidebar-collapsed .sidebar-brand,
        body.sidebar-collapsed .nav-label-text,
        body.sidebar-collapsed .sidebar-footer .user-info,
        body.sidebar-collapsed .sidebar-footer .user-status-dot { display: none; }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-logo img {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section {
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.02em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
            font-family: 'Space Mono', monospace;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(212,160,23,0.04);
        }

        .nav-link.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-info-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.4rem 0;
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
            overflow: hidden;
        }

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

        .user-details { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Syne', sans-serif;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ════ MAIN ════ */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            transition: margin-left 0.2s ease;
        }

        /* ════ TOPBAR ════ */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.97);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
            gap: 1rem;
            flex-shrink: 0;
        }

        .topbar h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            letter-spacing: 0.02em;
        }

        .mobile-menu-btn, .sidebar-toggle-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .mobile-menu-btn:hover, .sidebar-toggle-btn:hover {
            color: var(--gold);
            border-color: var(--gold-dim);
        }

        .notif-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
            text-decoration: none;
        }
        .notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .badge-count {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 16px; height: 16px;
            border-radius: 8px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.52rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            font-family: 'Space Mono', monospace;
        }

        /* ════ CONTENT ════ */
        .content {
            flex: 1;
            padding: 1.75rem 2rem;
        }

        /* ════ CARDS ════ */
        .card, .section-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .card-header, .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            gap: 0.75rem;
        }

        .card-title, .section-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }

        .card-body, .section-body {
            padding: 1.1rem 1.25rem;
        }

        /* ════ BUTTONS ════ */
        .btn-primary {
            background: var(--gold);
            border: none;
            border-radius: 3px;
            color: var(--bg);
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.6rem 1.25rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--gold-mid); color: var(--bg); }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--muted);
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.12s, border-color 0.12s;
        }
        .btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

        .btn-danger {
            background: rgba(139,26,26,0.15);
            border: 1px solid rgba(139,26,26,0.35);
            border-radius: 3px;
            color: #f87171;
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            padding: 0.5rem 0.875rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.12s;
        }
        .btn-danger:hover { background: rgba(139,26,26,0.25); }

        /* ════ INPUTS ════ */
        .form-control, .mod-input, input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], select, textarea {
            background: var(--surface2, #111009) !important;
            border: 1px solid var(--border2) !important;
            border-radius: 3px !important;
            color: var(--text) !important;
            font-family: 'Space Mono', monospace !important;
            font-size: 0.8rem !important;
            padding: 0.6rem 0.875rem !important;
            outline: none !important;
            transition: border-color 0.12s !important;
            width: 100%;
        }
        .form-control:focus, .mod-input:focus,
        input:focus, select:focus, textarea:focus {
            border-color: var(--gold-dim) !important;
            box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
        }
        .form-control::placeholder, .mod-input::placeholder,
        input::placeholder, textarea::placeholder {
            color: var(--dim, #2a2218) !important;
        }

        /* ════ TABLES ════ */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .admin-table th {
            font-size: 0.6rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            text-align: left;
            font-weight: 400;
            background: rgba(0,0,0,0.2);
        }
        .admin-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.02); }

        /* ════ ALERTS ════ */
        .alert-success {
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.25);
            border-left: 3px solid #22c55e;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #86efac;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }
        .alert-danger, .alert-error {
            background: rgba(139,26,26,0.1);
            border: 1px solid rgba(139,26,26,0.3);
            border-left: 3px solid #c0392b;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #f87171;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }

        /* ════ SCANLINES ════ */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
            pointer-events: none;
            z-index: 9999;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: var(--bg); color: var(--text); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; display: flex; min-height: 100vh; }
        .sidebar { width: 240px; height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; overflow: hidden; }
        .sidebar-logo { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
        .sidebar-logo h1 { font-size: 1.1rem; font-weight: 800; color: var(--text); margin:0; }
        .sidebar-logo span { font-size: 0.65rem; color: var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
        .sidebar-collapsed .sidebar-logo > div:last-child { display:none; }
        .sidebar-collapsed .sidebar-logo { align-items:center; padding:0.875rem; }
        .sidebar-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }
        .nav-section { padding: 0.5rem 1rem 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
        .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.25rem; color: var(--muted); text-decoration: none; font-size: 0.9rem; border-left: 3px solid transparent; transition: all 0.15s; }
        .nav-link:hover, .nav-link.active { color: var(--text); background: rgba(212,160,23,0.1); border-left-color: var(--primary); }
        .nav-link i { font-size: 1rem; width: 20px; }
        .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
        .user-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
        .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #0d0b08; flex-shrink: 0; }
        .user-name { font-size: 0.875rem; font-weight: 600; }
        .user-role { font-size: 0.75rem; color: var(--muted); }
        .btn-logout { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.4rem; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; }
        .btn-logout:hover { color: #f87171; border-color: #f87171; }
        .main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; }
        .topbar { background: var(--sidebar-bg); border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
        .topbar h2 { font-size: 1.1rem; font-weight: 600; }
        .content { padding: 2rem; }

        .section-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 2rem; overflow: hidden; }
        .section-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
        .section-title { font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
        .section-body { padding: 1.5rem; }

        /* Stats */
        .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
        .stat-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; text-align: center; }
        .stat-box-val { font-size: 2rem; font-weight: 800; color: var(--primary); }
        .stat-box-label { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }

        /* Table */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
        .admin-table th { padding: 0.6rem 0.875rem; text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--border); }
        .admin-table td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.03); }

        .role-badge { font-size: 0.65rem; padding: 0.2rem 0.6rem; border-radius: 20px; font-weight: 600; text-transform: uppercase; }
        .role-admin { background: rgba(212,160,23,0.2); color: var(--primary); }
        .role-manager { background: rgba(139,26,26,0.2); color: #c0392b; }
        .role-member { background: rgba(154,138,106,0.2); color: var(--muted); }

        .btn-sm-action { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; }
        .btn-sm-action:hover { color: var(--primary); border-color: var(--primary); }
        .btn-sm-action.danger:hover { color: #ef4444; border-color: #ef4444; }

        /* Alerts */
        .alert-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #86efac; border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.875rem; margin-bottom: 1.5rem; }
        .alert-danger { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.875rem; margin-bottom: 1rem; }

        /* Modal */
        .modal-content { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; color: var(--text); }
        .modal-header { border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; }
        .modal-footer { border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
        .modal-body { padding: 1.5rem; }
        .modal-title { font-weight: 700; }
        .btn-close { filter: invert(1) opacity(0.5); }
        .form-label { color: var(--muted); font-size: 0.85rem; font-weight: 500; }
        .form-control { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; }
        .form-control:focus { background: var(--bg); border-color: var(--primary); color: var(--text); box-shadow: 0 0 0 3px rgba(212,160,23,0.2); }
        .btn-primary { background: var(--primary); border: none; border-radius: 8px; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: #0d0b08; cursor: pointer; transition: background 0.15s; }
        .btn-primary:hover { background: var(--primary-dark); color: #0d0b08; }
        .btn-secondary { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--muted); cursor: pointer; transition: all 0.15s; }
        .btn-secondary:hover { border-color: var(--muted); color: var(--text); }

        .danger-zone { border: 1px solid rgba(239,68,68,0.3); border-radius: 10px; padding: 1.25rem; }
        .danger-zone h3 { font-size: 0.875rem; color: #f87171; margin-bottom: 0.5rem; }
        .danger-zone p { font-size: 0.8rem; color: var(--muted); margin-bottom: 1rem; }

    /* ── Mobile body fix (Android) ── */
    @media (max-width: 768px) {
        body { overflow-x: hidden !important; overflow-y: auto !important; }
    }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   API & WEBHOOKS  (api-manager.php)
   ──────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        body.sidebar-collapsed .sidebar { width: 56px; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
        body.sidebar-collapsed .sidebar-brand,
        body.sidebar-collapsed .nav-label-text,
        body.sidebar-collapsed .sidebar-footer .user-info,
        body.sidebar-collapsed .sidebar-footer .user-status-dot { display: none; }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-logo img {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section {
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.02em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
            font-family: 'Space Mono', monospace;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(212,160,23,0.04);
        }

        .nav-link.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-info-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.4rem 0;
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
            overflow: hidden;
        }

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

        .user-details { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Syne', sans-serif;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ════ MAIN ════ */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            transition: margin-left 0.2s ease;
        }

        /* ════ TOPBAR ════ */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.97);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
            gap: 1rem;
            flex-shrink: 0;
        }

        .topbar h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            letter-spacing: 0.02em;
        }

        .mobile-menu-btn, .sidebar-toggle-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .mobile-menu-btn:hover, .sidebar-toggle-btn:hover {
            color: var(--gold);
            border-color: var(--gold-dim);
        }

        .notif-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
            text-decoration: none;
        }
        .notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .badge-count {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 16px; height: 16px;
            border-radius: 8px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.52rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            font-family: 'Space Mono', monospace;
        }

        /* ════ CONTENT ════ */
        .content {
            flex: 1;
            padding: 1.75rem 2rem;
        }

        /* ════ CARDS ════ */
        .card, .section-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .card-header, .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            gap: 0.75rem;
        }

        .card-title, .section-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }

        .card-body, .section-body {
            padding: 1.1rem 1.25rem;
        }

        /* ════ BUTTONS ════ */
        .btn-primary {
            background: var(--gold);
            border: none;
            border-radius: 3px;
            color: var(--bg);
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.6rem 1.25rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--gold-mid); color: var(--bg); }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--muted);
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.12s, border-color 0.12s;
        }
        .btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

        .btn-danger {
            background: rgba(139,26,26,0.15);
            border: 1px solid rgba(139,26,26,0.35);
            border-radius: 3px;
            color: #f87171;
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            padding: 0.5rem 0.875rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.12s;
        }
        .btn-danger:hover { background: rgba(139,26,26,0.25); }

        /* ════ INPUTS ════ */
        .form-control, .mod-input, input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], select, textarea {
            background: var(--surface2, #111009) !important;
            border: 1px solid var(--border2) !important;
            border-radius: 3px !important;
            color: var(--text) !important;
            font-family: 'Space Mono', monospace !important;
            font-size: 0.8rem !important;
            padding: 0.6rem 0.875rem !important;
            outline: none !important;
            transition: border-color 0.12s !important;
            width: 100%;
        }
        .form-control:focus, .mod-input:focus,
        input:focus, select:focus, textarea:focus {
            border-color: var(--gold-dim) !important;
            box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
        }
        .form-control::placeholder, .mod-input::placeholder,
        input::placeholder, textarea::placeholder {
            color: var(--dim, #2a2218) !important;
        }

        /* ════ TABLES ════ */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .admin-table th {
            font-size: 0.6rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            text-align: left;
            font-weight: 400;
            background: rgba(0,0,0,0.2);
        }
        .admin-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.02); }

        /* ════ ALERTS ════ */
        .alert-success {
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.25);
            border-left: 3px solid #22c55e;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #86efac;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }
        .alert-danger, .alert-error {
            background: rgba(139,26,26,0.1);
            border: 1px solid rgba(139,26,26,0.3);
            border-left: 3px solid #c0392b;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #f87171;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }

        /* ════ SCANLINES ════ */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
            pointer-events: none;
            z-index: 9999;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: var(--bg); color: var(--text); font-family: 'Space Mono', monospace; display: flex; min-height: 100vh; }
        .sidebar { width: 240px; height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; overflow: hidden; }
        .sidebar-logo { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
        .sidebar-logo h1 { font-size: 1.1rem; font-weight: 800; color: var(--text); margin:0; }
        .sidebar-logo span { font-size: 0.65rem; color: var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
        .sidebar-collapsed .sidebar-logo > div:last-child { display:none; }
        .sidebar-collapsed .sidebar-logo { align-items:center; padding:0.875rem; }
        .sidebar-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }
        .nav-section { padding: 0.5rem 1rem 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
        .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.25rem; color: var(--muted); text-decoration: none; font-size: 0.9rem; border-left: 3px solid transparent; transition: all 0.15s; }
        .nav-link:hover, .nav-link.active { color: var(--text); background: rgba(212,160,23,0.1); border-left-color: var(--primary); }
        .nav-link i { font-size: 1rem; width: 20px; }
        .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
        .user-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
        .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #0d0b08; flex-shrink: 0; }
        .user-name { font-size: 0.875rem; font-weight: 600; }
        .user-role { font-size: 0.75rem; color: var(--muted); }
        .btn-logout { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.4rem; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; }
        .btn-logout:hover { color: #f87171; border-color: #f87171; }
        .main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; }
        .topbar { background: var(--sidebar-bg); border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
        .topbar h2 { font-size: 1.1rem; font-weight: 600; }
        .content { padding: 2rem; max-width: 900px; }

        /* Tabs */
        .tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
        .tab-btn { background: none; border: none; color: var(--muted); padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; display: flex; align-items: center; gap: 0.5rem; }
        .tab-btn:hover { color: var(--text); }
        .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        /* Cards */
        .section-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1.5rem; overflow: hidden; }
        .section-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
        .section-title { font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
        .section-body { padding: 1.25rem; }

        /* Form elements */
        .form-label { color: var(--muted); font-size: 0.8rem; font-weight: 500; margin-bottom: 0.35rem; display: block; }
        .form-control, .form-select {
            background: var(--bg); border: 1px solid var(--border); color: var(--text);
            border-radius: 8px; padding: 0.6rem 0.875rem; font-size: 0.875rem; width: 100%;
            transition: border-color 0.15s;
        }
        .form-control:focus, .form-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(212,160,23,0.15); }
        .form-control::placeholder { color: #4a5568; }
        .form-select option { background: var(--card-bg); }
        .form-hint { font-size: 0.74rem; color: var(--muted); margin-top: 0.3rem; }

        /* Buttons */
        .btn-primary { background: var(--primary); border: none; border-radius: 8px; padding: 0.55rem 1.25rem; font-size: 0.85rem; font-weight: 600; color: #0d0b08; cursor: pointer; transition: background 0.15s; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
        .btn-primary:hover { background: var(--primary-dark); color: #0d0b08; }
        .btn-outline { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 1rem; font-size: 0.8rem; color: var(--muted); cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.4rem; }
        .btn-outline:hover { border-color: var(--primary); color: var(--primary); }
        .btn-danger { background: transparent; border: 1px solid rgba(239,68,68,0.3); color: #f87171; border-radius: 8px; padding: 0.35rem 0.75rem; font-size: 0.78rem; cursor: pointer; transition: all 0.15s; }
        .btn-danger:hover { background: rgba(239,68,68,0.1); border-color: #ef4444; }

        /* API Key rows */
        .key-row { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--border); }
        .key-row:last-child { border-bottom: none; }
        .key-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(212,160,23,0.12); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .key-info { flex: 1; }
        .key-name { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.15rem; }
        .key-meta { font-size: 0.75rem; color: var(--muted); display: flex; gap: 0.75rem; flex-wrap: wrap; }
        .perm-badge { font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 20px; font-weight: 600; }
        .perm-read  { background: rgba(59,130,246,0.15); color: #93c5fd; }
        .perm-write { background: rgba(34,197,94,0.15); color: #86efac; }
        .perm-admin { background: rgba(212,160,23,0.15); color: var(--primary); }

        /* Webhook rows */
        .wh-row { display: flex; align-items: flex-start; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--border); }
        .wh-row:last-child { border-bottom: none; }
        .wh-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(88,101,242,0.15); color: #7289da; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
        .wh-info { flex: 1; min-width: 0; }
        .wh-name { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.15rem; }
        .wh-url  { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
        .wh-meta { font-size: 0.72rem; color: var(--muted); margin-top: 0.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
        .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
        .dot-on  { background: #22c55e; }
        .dot-off { background: #6b7280; }

        /* Alerts */
        .alert { border-radius: 10px; padding: 0.875rem 1.1rem; margin-bottom: 1.5rem; font-size: 0.875rem; display: flex; align-items: flex-start; gap: 0.6rem; }
        .alert-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); color: #86efac; }
        .alert-error   { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; }

        /* Code block */
        .code-block { background: #0a0806; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; font-family: 'Courier New', monospace; font-size: 0.8rem; color: #86efac; overflow-x: auto; white-space: pre; line-height: 1.6; }
        .code-comment { color: var(--muted); }
        .code-key { color: #93c5fd; }
        .code-val { color: #fcd34d; }
        .code-str { color: #86efac; }

        /* Info box */
        .info-box { background: rgba(212,160,23,0.06); border: 1px solid rgba(212,160,23,0.2); border-radius: 10px; padding: 1rem 1.1rem; font-size: 0.825rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.5rem; }
        .info-box strong { color: var(--text); }

        /* Checkbox group */
        .check-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .check-item { display: flex; align-items: center; gap: 0.4rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer; font-size: 0.8rem; transition: all 0.15s; }
        .check-item input { accent-color: var(--primary); }
        .check-item:has(input:checked) { border-color: var(--primary); background: rgba(212,160,23,0.08); color: var(--primary); }

        .empty-state { text-align: center; color: var(--muted); padding: 2.5rem; }
        .empty-state i { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; color: var(--border); }

        .divider { border-color: var(--border); margin: 1.25rem 0; }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }

        /* Webhook event checkboxes */
        .evt-check { display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; color:var(--text); margin-bottom:0.35rem; cursor:pointer; }
        .evt-check:last-child { margin-bottom:0; }
        .evt-check input[type=checkbox] { accent-color:var(--primary); width:14px; height:14px; cursor:pointer; flex-shrink:0; }


/* ────────────────────────────────────────────────────────────
   BADGE MANAGER  (badge-manager.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar { width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;transition:width 0.2s ease; }
        body.sidebar-collapsed .sidebar{width:56px;} body.sidebar-collapsed .main{margin-left:56px!important;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
        .sidebar-logo img{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
        .sidebar-brand{font-family:'Syne',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.06em;color:var(--text);white-space:nowrap;}
        .sidebar-brand span{color:var(--gold);}
        .sidebar-nav{flex:1;overflow-y:auto;padding:0.75rem 0;scrollbar-width:none;}
        .sidebar-nav::-webkit-scrollbar{display:none;}
        .nav-section{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding:1rem 1.5rem 0.4rem;}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.5rem;font-size:0.75rem;color:var(--muted);text-decoration:none;transition:color 0.12s,background 0.12s;white-space:nowrap;border-left:2px solid transparent;font-family:'Space Mono',monospace;}
        .nav-link:hover{color:var(--text);background:rgba(212,160,23,0.04);}
        .nav-link.active{color:var(--gold);background:rgba(212,160,23,0.06);border-left-color:var(--gold);}
        .nav-link i{font-size:0.9rem;width:18px;text-align:center;flex-shrink:0;}
        .sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;}
        .avatar{width:34px;height:34px;border-radius:7px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);flex-shrink:0;font-family:'Syne',sans-serif;overflow:hidden;}
        .avatar img{width:100%;height:100%;object-fit:cover;}
        .user-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Syne',sans-serif;}
        .user-role{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
        /* ════ MAIN ════ */
        .main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);transition:margin-left 0.2s ease;}
        /* ════ TOPBAR ════ */
        .topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(7,6,4,0.97);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;gap:1rem;flex-shrink:0;}
        .topbar h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:0.02em;}
        .mobile-menu-btn,.sidebar-toggle-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;flex-shrink:0;}
        .mobile-menu-btn:hover,.sidebar-toggle-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .notif-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;position:relative;text-decoration:none;}
        .notif-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:0.52rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'Space Mono',monospace;}
        /* ════ CONTENT ════ */
        .content{flex:1;padding:1.75rem 2rem;}
        /* ════ CARDS ════ */
        .card,.section-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;overflow:hidden;margin-bottom:1.25rem;}
        .card-header,.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);gap:0.75rem;}
        .card-title,.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        .card-body,.section-body{padding:1.1rem 1.25rem;}
        /* ════ BUTTONS ════ */
        .btn-primary{background:var(--gold);border:none;border-radius:3px;color:var(--bg);font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;}
        .btn-primary:hover{background:var(--gold-mid);color:var(--bg);}
        .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:color 0.12s,border-color 0.12s;}
        .btn-outline:hover{color:var(--gold);border-color:var(--gold-dim);}
        .btn-danger{background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.35);border-radius:3px;color:#f87171;font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:background 0.12s;}
        .btn-danger:hover{background:rgba(139,26,26,0.25);}
        /* ════ INPUTS ════ */
        .form-control,.mod-input{background:var(--surface2,#111009)!important;border:1px solid var(--border2)!important;border-radius:3px!important;color:var(--text)!important;font-family:'Space Mono',monospace!important;font-size:0.8rem!important;padding:0.6rem 0.875rem!important;outline:none!important;transition:border-color 0.12s!important;}
        .form-control:focus,.mod-input:focus{border-color:var(--gold-dim)!important;box-shadow:0 0 0 3px rgba(212,160,23,0.07)!important;}
        /* ════ ALERTS ════ */
        .alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-left:3px solid #22c55e;border-radius:3px;padding:0.75rem 1rem;color:#86efac;font-size:0.78rem;margin-bottom:1rem;}
        .alert-danger,.alert-error{background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.3);border-left:3px solid #c0392b;border-radius:3px;padding:0.75rem 1rem;color:#f87171;font-size:0.78rem;margin-bottom:1rem;}
        /* ════ SCANLINES ════ */
        body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root{--primary:#d4a017;--primary-dark:#b8860b;--bg:#0d0b08;--sidebar-bg:#111009;--card-bg:#1a1610;--border:#2e2515;--text:#f0e6d0;--muted:#9a8a6a;}
        *{box-sizing:border-box;margin:0;padding:0;}
        body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;display:flex;min-height:100vh;}
        .sidebar{width:240px;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
        .sidebar-logo h1{font-size:1.2rem;font-weight:700;}
        .sidebar-logo span{font-size:0.7rem;color:var(--muted);}
        .sidebar-nav{padding:1rem 0;flex:1;overflow-y:auto;}
        .nav-section{padding:0.5rem 1rem 0.25rem;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.9rem;border-left:3px solid transparent;transition:all 0.15s;}
        .nav-link:hover,.nav-link.active{color:var(--text);background:rgba(212,160,23,0.1);border-left-color:var(--primary);}
        .nav-link i{font-size:1rem;width:20px;}
        .sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0;}
        .user-info{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;}
        .avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#0d0b08;flex-shrink:0;}
        .user-name{font-size:0.875rem;font-weight:600;}
        .user-role{font-size:0.75rem;color:var(--muted);}
        .btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.4rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;}
        .btn-logout:hover{color:#f87171;border-color:#f87171;}
        .main{margin-left: 260px;flex:1;display:flex;flex-direction:column;}
        .topbar{background:var(--sidebar-bg);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;}
        .topbar h2{font-size:1.1rem;font-weight:600;}
        .content{padding:2rem;max-width:960px;}

        .alert-success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:#86efac;border-radius:10px;padding:0.875rem 1.1rem;margin-bottom:1.5rem;font-size:0.875rem;}
        .alert-error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;border-radius:10px;padding:0.875rem 1.1rem;margin-bottom:1.5rem;font-size:0.875rem;}

        /* Badge pill */
        .badge-pill{display:inline-flex;align-items:center;gap:0.3rem;border-radius:20px;padding:0.2rem 0.6rem;font-size:0.7rem;font-weight:700;letter-spacing:0.03em;white-space:nowrap;}
        .badge-pill img{width:16px;height:16px;border-radius:50%;object-fit:cover;}

        /* Badge cards grid */
        .badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-bottom:2rem;}
        .badge-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:1.25rem;transition:border-color 0.15s;}
        .badge-card:hover{border-color:rgba(212,160,23,0.3);}
        .badge-card-header{display:flex;align-items:center;gap:0.875rem;margin-bottom:0.875rem;}
        .badge-img-preview{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:1.2rem;overflow:hidden;flex-shrink:0;}
        .badge-img-preview img{width:100%;height:100%;object-fit:cover;}
        .badge-card-name{font-size:1rem;font-weight:700;margin-bottom:0.2rem;}
        .badge-card-meta{font-size:0.75rem;color:var(--muted);}
        .badge-card-actions{display:flex;gap:0.4rem;margin-top:0.875rem;}

        /* Member assignment table */
        .section-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.5rem;}
        .section-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
        .section-title{font-size:0.9rem;font-weight:600;display:flex;align-items:center;gap:0.5rem;}
        .member-row{display:flex;align-items:center;gap:1rem;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);flex-wrap:wrap;}
        .member-row:last-child{border-bottom:none;}
        .member-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;color:#0d0b08;flex-shrink:0;}
        .member-info{flex:1;min-width:180px;}
        .member-name{font-size:0.875rem;font-weight:600;}
        .member-badges{display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.3rem;}
        .member-actions{display:flex;gap:0.5rem;align-items:center;flex-shrink:0;}

        @media(max-width:768px){
            .member-row { flex-direction:column; align-items:flex-start; gap:0.75rem; }
            .member-row > .member-av { align-self:flex-start; }
            .member-info { width:100%; }
            .member-actions { width:100%; }
            .member-actions form { width:100%; display:flex; gap:0.4rem; }
            .member-actions .form-select { flex:1; min-width:0; font-size:0.85rem; }
            .badges-grid { grid-template-columns: 1fr !important; }
        }

        /* Buttons */
        .btn-primary{background:var(--primary);border:none;border-radius:8px;padding:0.55rem 1.25rem;font-size:0.875rem;font-weight:600;color:#0d0b08;cursor:pointer;transition:background 0.15s;display:inline-flex;align-items:center;gap:0.4rem;}
        .btn-primary:hover{background:var(--primary-dark);color:#0d0b08;}
        .btn-outline{background:transparent;border:1px solid var(--border);border-radius:8px;padding:0.4rem 0.875rem;font-size:0.8rem;color:var(--muted);cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:0.35rem;}
        .btn-outline:hover{border-color:var(--primary);color:var(--primary);}
        .btn-danger{background:transparent;border:1px solid rgba(239,68,68,0.3);color:#f87171;border-radius:7px;padding:0.3rem 0.65rem;font-size:0.78rem;cursor:pointer;transition:all 0.15s;}
        .btn-danger:hover{background:rgba(239,68,68,0.1);}
        .btn-sm{padding:0.3rem 0.7rem;font-size:0.78rem;}

        /* Forms */
        .form-label{color:var(--muted);font-size:0.8rem;font-weight:500;margin-bottom:0.35rem;display:block;}
        .form-control,.form-select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:0.6rem 0.875rem;font-size:0.875rem;width:100%;transition:border-color 0.15s;font-family:inherit;}
        .form-control:focus,.form-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(212,160,23,0.15);}
        .form-select option{background:var(--card-bg);}
        .color-row{display:flex;gap:0.75rem;align-items:flex-end;}
        .color-row > div{flex:1;}
        .modal-content{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;color:var(--text);}
        .modal-header,.modal-footer{border-color:var(--border);}
        .btn-close{filter:invert(0.7);}

        /* Upload area */
        .upload-area{border:2px dashed var(--border);border-radius:10px;padding:1.5rem;text-align:center;cursor:pointer;transition:border-color 0.15s;position:relative;}
        .upload-area:hover,.upload-area.dragover{border-color:var(--primary);background:rgba(212,160,23,0.03);}
        .upload-area input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
        .upload-preview{width:60px;height:60px;border-radius:10px;object-fit:cover;margin:0 auto 0.5rem;display:none;}

        @media(max-width:768px){
            body{overflow-x:hidden !important;overflow-y:auto !important;}
            .main{margin-left:0 !important;}
            .content{padding:1rem !important;}
            .badges-grid{grid-template-columns:1fr;}
            .topbar{padding:0.7rem 0.875rem !important;}
        }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   DEV LOG  (devlog.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar { width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;transition:width 0.2s ease; }
        body.sidebar-collapsed .sidebar{width:56px;} body.sidebar-collapsed .main{margin-left:56px!important;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
        .sidebar-logo img{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
        .sidebar-brand{font-family:'Syne',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.06em;color:var(--text);white-space:nowrap;}
        .sidebar-brand span{color:var(--gold);}
        .sidebar-nav{flex:1;overflow-y:auto;padding:0.75rem 0;scrollbar-width:none;}
        .sidebar-nav::-webkit-scrollbar{display:none;}
        .nav-section{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding:1rem 1.5rem 0.4rem;}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.5rem;font-size:0.75rem;color:var(--muted);text-decoration:none;transition:color 0.12s,background 0.12s;white-space:nowrap;border-left:2px solid transparent;font-family:'Space Mono',monospace;}
        .nav-link:hover{color:var(--text);background:rgba(212,160,23,0.04);}
        .nav-link.active{color:var(--gold);background:rgba(212,160,23,0.06);border-left-color:var(--gold);}
        .nav-link i{font-size:0.9rem;width:18px;text-align:center;flex-shrink:0;}
        .sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;}
        .avatar{width:34px;height:34px;border-radius:7px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);flex-shrink:0;font-family:'Syne',sans-serif;overflow:hidden;}
        .avatar img{width:100%;height:100%;object-fit:cover;}
        .user-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Syne',sans-serif;}
        .user-role{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
        /* ════ MAIN ════ */
        .main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);transition:margin-left 0.2s ease;}
        /* ════ TOPBAR ════ */
        .topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(7,6,4,0.97);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;gap:1rem;flex-shrink:0;}
        .topbar h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:0.02em;}
        .mobile-menu-btn,.sidebar-toggle-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;flex-shrink:0;}
        .mobile-menu-btn:hover,.sidebar-toggle-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .notif-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;position:relative;text-decoration:none;}
        .notif-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:0.52rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'Space Mono',monospace;}
        /* ════ CONTENT ════ */
        .content{flex:1;padding:1.75rem 2rem;}
        /* ════ CARDS ════ */
        .card,.section-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;overflow:hidden;margin-bottom:1.25rem;}
        .card-header,.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);gap:0.75rem;}
        .card-title,.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        .card-body,.section-body{padding:1.1rem 1.25rem;}
        /* ════ BUTTONS ════ */
        .btn-primary{background:var(--gold);border:none;border-radius:3px;color:var(--bg);font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;}
        .btn-primary:hover{background:var(--gold-mid);color:var(--bg);}
        .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:color 0.12s,border-color 0.12s;}
        .btn-outline:hover{color:var(--gold);border-color:var(--gold-dim);}
        .btn-danger{background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.35);border-radius:3px;color:#f87171;font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:background 0.12s;}
        .btn-danger:hover{background:rgba(139,26,26,0.25);}
        /* ════ INPUTS ════ */
        .form-control,.mod-input{background:var(--surface2,#111009)!important;border:1px solid var(--border2)!important;border-radius:3px!important;color:var(--text)!important;font-family:'Space Mono',monospace!important;font-size:0.8rem!important;padding:0.6rem 0.875rem!important;outline:none!important;transition:border-color 0.12s!important;}
        .form-control:focus,.mod-input:focus{border-color:var(--gold-dim)!important;box-shadow:0 0 0 3px rgba(212,160,23,0.07)!important;}
        /* ════ ALERTS ════ */
        .alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-left:3px solid #22c55e;border-radius:3px;padding:0.75rem 1rem;color:#86efac;font-size:0.78rem;margin-bottom:1rem;}
        .alert-danger,.alert-error{background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.3);border-left:3px solid #c0392b;border-radius:3px;padding:0.75rem 1rem;color:#f87171;font-size:0.78rem;margin-bottom:1rem;}
        /* ════ SCANLINES ════ */
        body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root{--primary:#d4a017;--primary-dark:#b8860b;--bg:#0d0b08;--sidebar-bg:#111009;--card-bg:#1a1610;--border:#2e2515;--text:#f0e6d0;--muted:#9a8a6a;}
        *{box-sizing:border-box;margin:0;padding:0;}
        body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;display:flex;min-height:100vh;}
        .sidebar{width:240px;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
        .sidebar-logo h1{font-size:1.2rem;font-weight:700;}
        .sidebar-logo span{font-size:0.7rem;color:var(--muted);}
        .sidebar-nav{padding:1rem 0;flex:1;overflow-y:auto;}
        .nav-section{padding:0.5rem 1rem 0.25rem;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.9rem;border-left:3px solid transparent;transition:all 0.15s;}
        .nav-link:hover,.nav-link.active{color:var(--text);background:rgba(212,160,23,0.1);border-left-color:var(--primary);}
        .nav-link i{font-size:1rem;width:20px;}
        .sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0;}
        .user-name{font-size:0.875rem;font-weight:600;}
        .user-role{font-size:0.75rem;color:var(--muted);}
        .btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.4rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;}
        .btn-logout:hover{color:#f87171;border-color:#f87171;}
        .avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#0d0b08;flex-shrink:0;}
        .main{margin-left: 260px;flex:1;display:flex;flex-direction:column;}
        .topbar{background:var(--sidebar-bg);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
        .topbar h2{font-size:1.1rem;font-weight:600;}
        .content{padding:2rem;max-width:900px;}

        /* ── Timeline ── */
        .timeline{position:relative;padding-left:2rem;}
        .timeline::before{content:'';position:absolute;left:0.45rem;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--primary),rgba(212,160,23,0.1));}

        .tl-entry{position:relative;margin-bottom:2.5rem;}
        .tl-dot{
            position:absolute;left:-1.62rem;top:0.35rem;
            width:14px;height:14px;border-radius:50%;
            border:2px solid var(--primary);
            background:var(--bg);
            flex-shrink:0;
        }
        .tl-dot.new{background:var(--primary);}

        .tl-date{
            font-size:0.7rem;font-weight:700;text-transform:uppercase;
            letter-spacing:0.1em;color:var(--primary);
            margin-bottom:0.4rem;
        }

        .tl-card{
            background:var(--card-bg);border:1px solid var(--border);
            border-radius:12px;padding:1.25rem 1.5rem;
            transition:border-color 0.15s;
        }
        .tl-card:hover{border-color:rgba(212,160,23,0.3);}

        .tl-title{
            font-size:1rem;font-weight:700;margin-bottom:0.4rem;
            display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;
        }
        .tl-desc{font-size:0.875rem;color:var(--muted);line-height:1.7;margin-bottom:0.875rem;}

        /* Tag pills */
        .tag{display:inline-flex;align-items:center;gap:0.2rem;border-radius:20px;padding:0.18rem 0.6rem;font-size:0.68rem;font-weight:700;letter-spacing:0.03em;white-space:nowrap;}
        .tag-new     {background:rgba(212,160,23,0.15);color:var(--primary);border:1px solid rgba(212,160,23,0.3);}
        .tag-fix     {background:rgba(34,197,94,0.12);color:#86efac;border:1px solid rgba(34,197,94,0.25);}
        .tag-improve {background:rgba(59,130,246,0.12);color:#93c5fd;border:1px solid rgba(59,130,246,0.25);}
        .tag-security{background:rgba(168,85,247,0.12);color:#c4b5fd;border:1px solid rgba(168,85,247,0.25);}
        .tag-db      {background:rgba(245,158,11,0.12);color:#fcd34d;border:1px solid rgba(245,158,11,0.25);}

        /* Change items list */
        .change-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.4rem;}
        .change-list li{
            display:flex;align-items:flex-start;gap:0.6rem;
            font-size:0.825rem;color:var(--muted);line-height:1.5;
        }
        .change-list li i{font-size:0.8rem;flex-shrink:0;margin-top:0.18rem;color:var(--primary);}

        /* Files affected */
        .files-row{display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.875rem;padding-top:0.875rem;border-top:1px solid var(--border);}
        .file-chip{
            background:var(--bg);border:1px solid var(--border);
            border-radius:6px;padding:0.15rem 0.55rem;
            font-size:0.68rem;color:var(--muted);font-family:monospace;
        }

        /* Version header */
        .version-header{
            display:flex;align-items:center;gap:1rem;margin-bottom:2rem;
            padding:1.25rem 1.5rem;
            background:linear-gradient(135deg,rgba(212,160,23,0.08),rgba(139,26,26,0.05));
            border:1px solid rgba(212,160,23,0.2);
            border-radius:12px;
        }
        .version-num{font-size:2rem;font-weight:800;color:var(--primary);}
        .version-meta{font-size:0.8rem;color:var(--muted);line-height:1.8;}
        .version-badge{
            margin-left:auto;
            background:rgba(212,160,23,0.15);border:1px solid rgba(212,160,23,0.35);
            color:var(--primary);border-radius:20px;padding:0.3rem 0.875rem;
            font-size:0.78rem;font-weight:700;white-space:nowrap;
        }

        /* Stats bar */
        .stats-bar{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem;}
        .stat-item{display:flex;flex-direction:column;align-items:center;gap:0.2rem;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:0.875rem 1.25rem;min-width:90px;}
        .stat-item-num{font-size:1.4rem;font-weight:700;color:var(--primary);}
        .stat-item-lbl{font-size:0.7rem;color:var(--muted);text-align:center;}

        @media(max-width:768px){
            body{overflow-x:hidden !important;overflow-y:auto !important;}
            .main{margin-left:0 !important;}
            .content{padding:1rem !important;}
            .topbar{padding:0.7rem 0.875rem !important;}
            .stats-bar{gap:0.75rem;}
            .stat-item{min-width:70px;padding:0.6rem 0.875rem;}
        }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
    

/* Quill dark theme overrides for devlog modal */
#devlogQuill .ql-toolbar { background:var(--card-bg); border-color:var(--border)!important; border-radius:8px 8px 0 0; }
#devlogQuill .ql-container { background:var(--bg); border-color:var(--border)!important; border-radius:0 0 8px 8px; min-height:100px; }
#devlogQuill .ql-editor { color:var(--text); font-size:0.875rem; font-family:'Segoe UI',system-ui,sans-serif; }
#devlogQuill .ql-editor.ql-blank::before { color:var(--muted); }
#devlogQuill .ql-stroke { stroke:var(--muted)!important; }
#devlogQuill .ql-fill  { fill:var(--muted)!important; }
#devlogQuill .ql-picker-label { color:var(--muted)!important; }
#devlogQuill button:hover .ql-stroke, #devlogQuill .ql-active .ql-stroke { stroke:var(--primary)!important; }
#devlogQuill button:hover .ql-fill,   #devlogQuill .ql-active .ql-fill   { fill:var(--primary)!important; }
/* Type chip toggles */
.type-chip { display:inline-flex;align-items:center;gap:0.35rem;padding:0.3rem 0.75rem;border-radius:20px;font-size:0.78rem;font-weight:700;cursor:pointer;border:1px solid var(--border);color:var(--muted);background:transparent;transition:all 0.15s;user-select:none; }
.type-chip.active-new         { background:rgba(34,197,94,0.15); border-color:rgba(34,197,94,0.5); color:#86efac; }
.type-chip.active-fix         { background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.4); color:#f87171; }
.type-chip.active-improvement { background:rgba(59,130,246,0.12); border-color:rgba(59,130,246,0.4); color:#60a5fa; }
.type-chip.active-security    { background:rgba(139,92,246,0.12); border-color:rgba(139,92,246,0.4); color:#a78bfa; }


/* ────────────────────────────────────────────────────────────
   INCIDENTS  (incidents.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar { width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;transition:width 0.2s ease; }
        body.sidebar-collapsed .sidebar{width:56px;} body.sidebar-collapsed .main{margin-left:56px!important;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
        .sidebar-logo img{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
        .sidebar-brand{font-family:'Syne',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.06em;color:var(--text);white-space:nowrap;}
        .sidebar-brand span{color:var(--gold);}
        .sidebar-nav{flex:1;overflow-y:auto;padding:0.75rem 0;scrollbar-width:none;}
        .sidebar-nav::-webkit-scrollbar{display:none;}
        .nav-section{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding:1rem 1.5rem 0.4rem;}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.5rem;font-size:0.75rem;color:var(--muted);text-decoration:none;transition:color 0.12s,background 0.12s;white-space:nowrap;border-left:2px solid transparent;font-family:'Space Mono',monospace;}
        .nav-link:hover{color:var(--text);background:rgba(212,160,23,0.04);}
        .nav-link.active{color:var(--gold);background:rgba(212,160,23,0.06);border-left-color:var(--gold);}
        .nav-link i{font-size:0.9rem;width:18px;text-align:center;flex-shrink:0;}
        .sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;}
        .avatar{width:34px;height:34px;border-radius:7px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);flex-shrink:0;font-family:'Syne',sans-serif;overflow:hidden;}
        .avatar img{width:100%;height:100%;object-fit:cover;}
        .user-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Syne',sans-serif;}
        .user-role{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
        /* ════ MAIN ════ */
        .main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);transition:margin-left 0.2s ease;}
        /* ════ TOPBAR ════ */
        .topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(7,6,4,0.97);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;gap:1rem;flex-shrink:0;}
        .topbar h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:0.02em;}
        .mobile-menu-btn,.sidebar-toggle-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;flex-shrink:0;}
        .mobile-menu-btn:hover,.sidebar-toggle-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .notif-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;position:relative;text-decoration:none;}
        .notif-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:0.52rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'Space Mono',monospace;}
        /* ════ CONTENT ════ */
        .content{flex:1;padding:1.75rem 2rem;}
        /* ════ CARDS ════ */
        .card,.section-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;overflow:hidden;margin-bottom:1.25rem;}
        .card-header,.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);gap:0.75rem;}
        .card-title,.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        .card-body,.section-body{padding:1.1rem 1.25rem;}
        /* ════ BUTTONS ════ */
        .btn-primary{background:var(--gold);border:none;border-radius:3px;color:var(--bg);font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;}
        .btn-primary:hover{background:var(--gold-mid);color:var(--bg);}
        .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:color 0.12s,border-color 0.12s;}
        .btn-outline:hover{color:var(--gold);border-color:var(--gold-dim);}
        .btn-danger{background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.35);border-radius:3px;color:#f87171;font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:background 0.12s;}
        .btn-danger:hover{background:rgba(139,26,26,0.25);}
        /* ════ INPUTS ════ */
        .form-control,.mod-input{background:var(--surface2,#111009)!important;border:1px solid var(--border2)!important;border-radius:3px!important;color:var(--text)!important;font-family:'Space Mono',monospace!important;font-size:0.8rem!important;padding:0.6rem 0.875rem!important;outline:none!important;transition:border-color 0.12s!important;}
        .form-control:focus,.mod-input:focus{border-color:var(--gold-dim)!important;box-shadow:0 0 0 3px rgba(212,160,23,0.07)!important;}
        /* ════ ALERTS ════ */
        .alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-left:3px solid #22c55e;border-radius:3px;padding:0.75rem 1rem;color:#86efac;font-size:0.78rem;margin-bottom:1rem;}
        .alert-danger,.alert-error{background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.3);border-left:3px solid #c0392b;border-radius:3px;padding:0.75rem 1rem;color:#f87171;font-size:0.78rem;margin-bottom:1rem;}
        /* ════ SCANLINES ════ */
        body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root{--primary:#d4a017;--primary-dark:#b8860b;--bg:#0d0b08;--sidebar-bg:#111009;--card-bg:#1a1610;--border:#2e2515;--text:#f0e6d0;--muted:#b0a080;}
        *{box-sizing:border-box;margin:0;padding:0;}
        body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,sans-serif;display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;}
        .sidebar{width:240px;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
        .sidebar-logo h1{font-size:1.2rem;font-weight:700;}
        .sidebar-logo span{font-size:0.7rem;color:var(--muted);}
        .sidebar-nav{padding:1rem 0;flex:1;overflow-y:auto;}
        .nav-section{padding:0.5rem 1rem 0.25rem;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.9rem;font-weight:500;border-left:3px solid transparent;transition:all 0.15s;}
        .nav-link:hover,.nav-link.active{color:var(--text);background:rgba(212,160,23,0.1);border-left-color:var(--primary);}
        .nav-link i{font-size:1rem;width:20px;}
        .sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0;}
        .btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.4rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-logout:hover{color:#f87171;border-color:#f87171;}
        .avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#0d0b08;flex-shrink:0;}
        .main{margin-left: 260px;flex:1;display:flex;flex-direction:column;}
        .topbar{background:var(--sidebar-bg);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;}
        .topbar h2{font-size:1.1rem;font-weight:700;}
        .content{padding:1.5rem 2rem;max-width:1200px;}
        .card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1rem;}
        .card-header{padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;color:var(--text);}
        .card-title{font-size:0.9rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;color:var(--text);}
        .card-body{padding:1.25rem;color:var(--text);}
        .mod-input{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:0.6rem 0.875rem;font-size:0.875rem;font-family:inherit;outline:none;transition:border-color 0.15s;width:100%;}
        .mod-input:focus{border-color:var(--primary);}
        .mod-input::placeholder{color:var(--muted);}
        .btn-primary{background:var(--primary);border:none;border-radius:8px;padding:0.55rem 1.25rem;font-size:0.875rem;font-weight:700;color:#0d0b08;cursor:pointer;transition:background 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.4rem;white-space:nowrap;}
        .btn-primary:hover{background:var(--primary-dark);}
        .btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:0.5rem 0.875rem;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.35rem;}
        .btn-outline:hover{border-color:var(--primary);color:var(--primary);}
        .btn-danger{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;border-radius:8px;padding:0.4rem 0.75rem;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-danger:hover{background:rgba(239,68,68,0.2);}
        .btn-sm{padding:0.3rem 0.6rem;font-size:0.75rem;}
        .stat-row{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;}
        .stat-box{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem;flex:1;min-width:120px;}
        .stat-box .num{font-size:1.6rem;font-weight:800;line-height:1;}
        .stat-box .lbl{font-size:0.78rem;color:#c8b080;font-weight:600;;margin-top:0.3rem;}
        /* Severity */
        .sev-low{background:rgba(34,197,94,0.12);color:#86efac;border:1px solid rgba(34,197,94,0.3);border-radius:20px;padding:0.15rem 0.65rem;font-size:0.72rem;font-weight:700;}
        .sev-medium{background:rgba(245,158,11,0.15);color:#f59e0b;border:1px solid rgba(245,158,11,0.3);border-radius:20px;padding:0.15rem 0.65rem;font-size:0.72rem;font-weight:700;}
        .sev-high{background:rgba(239,68,68,0.12);color:#f87171;border:1px solid rgba(239,68,68,0.3);border-radius:20px;padding:0.15rem 0.65rem;font-size:0.72rem;font-weight:700;}
        .sev-critical{background:rgba(139,0,0,0.3);color:#fca5a5;border:1px solid rgba(239,68,68,0.5);border-radius:20px;padding:0.15rem 0.65rem;font-size:0.72rem;font-weight:700;}
        /* Status */
        .status-open{background:rgba(239,68,68,0.1);color:#f87171;border:1px solid rgba(239,68,68,0.25);border-radius:20px;padding:0.15rem 0.65rem;font-size:0.72rem;font-weight:700;}
        .status-reviewing{background:rgba(245,158,11,0.1);color:#f59e0b;border:1px solid rgba(245,158,11,0.25);border-radius:20px;padding:0.15rem 0.65rem;font-size:0.72rem;font-weight:700;}
        .status-closed{background:rgba(34,197,94,0.1);color:#86efac;border:1px solid rgba(34,197,94,0.25);border-radius:20px;padding:0.15rem 0.65rem;font-size:0.72rem;font-weight:700;}
        /* Incident rows */
        .inc-row{padding:1rem 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.12s;}
        .inc-row:last-child{border-bottom:none;}
        .inc-row:hover{background:rgba(212,160,23,0.04);margin:0 -1.25rem;padding:1rem 1.25rem;}
        .inc-title{font-weight:700;font-size:0.95rem;margin-bottom:0.3rem;}
        .inc-meta{font-size:0.78rem;color:var(--muted);display:flex;gap:0.75rem;flex-wrap:wrap;}
        .empty-state{text-align:center;padding:2.5rem;color:var(--muted);}
        .empty-state i{font-size:2.5rem;display:block;margin-bottom:0.75rem;color:var(--border);}
        .alert{border-radius:10px;padding:0.875rem 1.1rem;margin-bottom:1rem;font-size:0.875rem;display:flex;align-items:flex-start;gap:0.6rem;}
        .alert-success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:#86efac;}
        .alert-error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;}
        /* Detail view */
        .detail-label{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:0.35rem;}
        .detail-value{font-size:0.9rem;line-height:1.6;}
        .detail-section{margin-bottom:1.25rem;}
        .comment-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:0.875rem;margin-bottom:0.6rem;}
        .comment-author{font-weight:700;font-size:0.82rem;margin-bottom:0.2rem;}
        .comment-text{font-size:0.85rem;color:#d4c5a0;line-height:1.5;}
        .comment-time{font-size:0.72rem;color:var(--muted);margin-top:0.2rem;}
        select.mod-input{cursor:pointer;}
        @media(max-width:768px){.main{margin-left:0;}.content{padding:1rem;}.topbar{padding:0.7rem 0.875rem;}}

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
    
@keyframes spin{to{transform:rotate(360deg);}} @media(max-width:600px){.inc-grid{grid-template-columns:1fr!important;}}


/* ────────────────────────────────────────────────────────────
   MOD DASHBOARD  (moderation.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar { width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;transition:width 0.2s ease; }
        body.sidebar-collapsed .sidebar{width:56px;} body.sidebar-collapsed .main{margin-left:56px!important;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
        .sidebar-logo img{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
        .sidebar-brand{font-family:'Syne',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.06em;color:var(--text);white-space:nowrap;}
        .sidebar-brand span{color:var(--gold);}
        .sidebar-nav{flex:1;overflow-y:auto;padding:0.75rem 0;scrollbar-width:none;}
        .sidebar-nav::-webkit-scrollbar{display:none;}
        .nav-section{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding:1rem 1.5rem 0.4rem;}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.5rem;font-size:0.75rem;color:var(--muted);text-decoration:none;transition:color 0.12s,background 0.12s;white-space:nowrap;border-left:2px solid transparent;font-family:'Space Mono',monospace;}
        .nav-link:hover{color:var(--text);background:rgba(212,160,23,0.04);}
        .nav-link.active{color:var(--gold);background:rgba(212,160,23,0.06);border-left-color:var(--gold);}
        .nav-link i{font-size:0.9rem;width:18px;text-align:center;flex-shrink:0;}
        .sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;}
        .avatar{width:34px;height:34px;border-radius:7px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);flex-shrink:0;font-family:'Syne',sans-serif;overflow:hidden;}
        .avatar img{width:100%;height:100%;object-fit:cover;}
        .user-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Syne',sans-serif;}
        .user-role{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
        /* ════ MAIN ════ */
        .main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);transition:margin-left 0.2s ease;}
        /* ════ TOPBAR ════ */
        .topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(7,6,4,0.97);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;gap:1rem;flex-shrink:0;}
        .topbar h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:0.02em;}
        .mobile-menu-btn,.sidebar-toggle-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;flex-shrink:0;}
        .mobile-menu-btn:hover,.sidebar-toggle-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .notif-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;position:relative;text-decoration:none;}
        .notif-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:0.52rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'Space Mono',monospace;}
        /* ════ CONTENT ════ */
        .content{flex:1;padding:1.75rem 2rem;}
        /* ════ CARDS ════ */
        .card,.section-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;overflow:hidden;margin-bottom:1.25rem;}
        .card-header,.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);gap:0.75rem;}
        .card-title,.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        .card-body,.section-body{padding:1.1rem 1.25rem;}
        /* ════ BUTTONS ════ */
        .btn-primary{background:var(--gold);border:none;border-radius:3px;color:var(--bg);font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;}
        .btn-primary:hover{background:var(--gold-mid);color:var(--bg);}
        .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:color 0.12s,border-color 0.12s;}
        .btn-outline:hover{color:var(--gold);border-color:var(--gold-dim);}
        .btn-danger{background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.35);border-radius:3px;color:#f87171;font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:background 0.12s;}
        .btn-danger:hover{background:rgba(139,26,26,0.25);}
        /* ════ INPUTS ════ */
        .form-control,.mod-input{background:var(--surface2,#111009)!important;border:1px solid var(--border2)!important;border-radius:3px!important;color:var(--text)!important;font-family:'Space Mono',monospace!important;font-size:0.8rem!important;padding:0.6rem 0.875rem!important;outline:none!important;transition:border-color 0.12s!important;}
        .form-control:focus,.mod-input:focus{border-color:var(--gold-dim)!important;box-shadow:0 0 0 3px rgba(212,160,23,0.07)!important;}
        /* ════ ALERTS ════ */
        .alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-left:3px solid #22c55e;border-radius:3px;padding:0.75rem 1rem;color:#86efac;font-size:0.78rem;margin-bottom:1rem;}
        .alert-danger,.alert-error{background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.3);border-left:3px solid #c0392b;border-radius:3px;padding:0.75rem 1rem;color:#f87171;font-size:0.78rem;margin-bottom:1rem;}
        /* ════ SCANLINES ════ */
        body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root{--primary:#d4a017;--primary-dark:#b8860b;--bg:#0d0b08;--sidebar-bg:#111009;--card-bg:#1a1610;--border:#2e2515;--text:#f0e6d0;--muted:#b0a080;}
        *{box-sizing:border-box;margin:0;padding:0;}
        body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,sans-serif;display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;}
        .sidebar{width:240px;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
        .sidebar-logo h1{font-size:1.2rem;font-weight:700;}
        .sidebar-logo span{font-size:0.7rem;color:var(--muted);}
        .sidebar-nav{padding:1rem 0;flex:1;overflow-y:auto;}
        .nav-section{padding:0.5rem 1rem 0.25rem;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.9rem;font-weight:500;border-left:3px solid transparent;transition:all 0.15s;}
        .nav-link:hover,.nav-link.active{color:var(--text);background:rgba(212,160,23,0.1);border-left-color:var(--primary);}
        .nav-link i{font-size:1rem;width:20px;}
        .sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0;}
        .user-name{font-size:0.875rem;font-weight:600;}
        .user-role{font-size:0.75rem;color:var(--muted);}
        .btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.4rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-logout:hover{color:#f87171;border-color:#f87171;}
        .avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#0d0b08;flex-shrink:0;}
        .main{margin-left: 260px;flex:1;display:flex;flex-direction:column;}
        .topbar{background:var(--sidebar-bg);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;}
        .topbar h2{font-size:1.1rem;font-weight:700;color:var(--text);}
        .content{padding:1.5rem 2rem;max-width:1200px;}

        /* Connection banner */
        .connect-banner{background:linear-gradient(135deg,rgba(212,160,23,0.08),rgba(139,26,26,0.05));border:1px solid rgba(212,160,23,0.25);border-radius:12px;padding:1.5rem;display:flex;align-items:center;gap:1.25rem;margin-bottom:1.5rem;flex-wrap:wrap;}
        .connect-banner.connected{background:rgba(34,197,94,0.06);border-color:rgba(34,197,94,0.25);}
        .connect-banner .icon{font-size:2rem;flex-shrink:0;}
        .connect-banner .info{flex:1;min-width:0;}
        .connect-banner .title{font-size:1rem;font-weight:700;margin-bottom:0.25rem;}
        .connect-banner .sub{font-size:0.82rem;color:var(--muted);}
        .btn-connect{background:var(--primary);border:none;border-radius:8px;padding:0.6rem 1.5rem;color:#0d0b08;font-weight:700;font-size:0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;font-family:inherit;white-space:nowrap;}
        .btn-connect:hover{background:var(--primary-dark);color:#0d0b08;}
        .btn-disconnect{background:transparent;border:1px solid rgba(239,68,68,0.3);color:#f87171;border-radius:8px;padding:0.5rem 1rem;font-size:0.8rem;font-weight:600;cursor:pointer;font-family:inherit;}
        .btn-disconnect:hover{background:rgba(239,68,68,0.08);}

        /* Tabs */
        .tabs{display:flex;gap:0.25rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem;overflow-x:auto;scrollbar-width:none;}
        .tabs::-webkit-scrollbar{display:none;}
        .tab-btn{background:none;border:none;border-bottom:2px solid transparent;color:#c8b080;padding:0.75rem 1.1rem;font-size:0.875rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all 0.15s;font-family:inherit;display:flex;align-items:center;gap:0.4rem;}
        .tab-btn:hover{color:var(--text);}
        .tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);}
        .tab-panel{display:none;}
        .tab-panel.active{display:block;}

        /* Cards */
        .card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1rem;}
        .card-header{padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;color:var(--text);}
        .card-title{font-size:0.9rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;color:var(--text);}
        .card-body{padding:1.25rem;color:var(--text);}

        /* Search inputs */
        .search-row{display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap;}
        .mod-input{flex:1;min-width:180px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:0.6rem 0.875rem;font-size:0.875rem;font-family:inherit;outline:none;transition:border-color 0.15s;}
        .mod-input:focus{border-color:var(--primary);}
        .mod-input::placeholder{color:var(--muted);}
        .btn-primary{background:var(--primary);border:none;border-radius:8px;padding:0.55rem 1.25rem;font-size:0.875rem;font-weight:700;color:#0d0b08;cursor:pointer;transition:background 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.4rem;white-space:nowrap;}
        .btn-primary:hover{background:var(--primary-dark);}
        .btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:0.5rem 0.875rem;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.35rem;}
        .btn-outline:hover{border-color:var(--primary);color:var(--primary);}
        .btn-danger{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;border-radius:8px;padding:0.5rem 0.875rem;font-size:0.8rem;font-weight:700;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-danger:hover{background:rgba(239,68,68,0.2);}
        .btn-warn{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);color:#f59e0b;border-radius:8px;padding:0.5rem 0.875rem;font-size:0.8rem;font-weight:700;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-warn:hover{background:rgba(245,158,11,0.2);}
        .btn-sm{padding:0.3rem 0.7rem;font-size:0.75rem;}

        /* User profile card */
        .user-profile{display:flex;gap:1.25rem;align-items:flex-start;flex-wrap:wrap;}
        .user-avatar-lg{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--border);flex-shrink:0;background:var(--border);}
        .user-detail-name{font-size:1.2rem;font-weight:800;margin-bottom:0.25rem;}
        .user-meta{display:flex;flex-wrap:wrap;gap:0.75rem;font-size:0.8rem;color:var(--muted);margin-bottom:0.875rem;}
        .user-meta span{display:flex;align-items:center;gap:0.3rem;}
        .live-badge{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3);border-radius:20px;padding:0.15rem 0.6rem;font-size:0.72rem;font-weight:700;}
        .offline-badge{background:var(--bg);color:var(--muted);border:1px solid var(--border);border-radius:20px;padding:0.15rem 0.6rem;font-size:0.72rem;font-weight:700;}
        .stat-pills{display:flex;gap:0.5rem;flex-wrap:wrap;}
        .stat-pill{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0.35rem 0.75rem;font-size:0.78rem;font-weight:600;display:flex;align-items:center;gap:0.35rem;}

        /* Stream info card */
        .stream-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:1rem;margin-top:1rem;}
        .stream-title{font-weight:700;font-size:0.95rem;margin-bottom:0.3rem;}
        .stream-meta{font-size:0.8rem;color:var(--muted);display:flex;gap:1rem;flex-wrap:wrap;}

        /* Chat messages */
        .chat-msg{padding:0.6rem 0;border-bottom:1px solid var(--border);display:flex;gap:0.75rem;align-items:flex-start;font-size:0.85rem;}
        .chat-msg:last-child{border-bottom:none;}
        .chat-msg-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--border);flex-shrink:0;}
        .chat-msg-author{font-weight:700;color:var(--primary);margin-right:0.35rem;}
        .chat-msg-text{color:var(--text);line-height:1.5;flex:1;word-break:break-word;}
        .chat-msg-time{font-size:0.7rem;color:var(--muted);white-space:nowrap;flex-shrink:0;margin-top:0.1rem;}
        .role-badge-sm{font-size:0.62rem;padding:0.08rem 0.4rem;border-radius:20px;font-weight:700;margin-right:0.2rem;}
        .role-mod{background:rgba(59,130,246,0.2);color:#93c5fd;}
        .role-staff{background:rgba(245,158,11,0.2);color:#fcd34d;}
        .role-sub{background:rgba(168,85,247,0.2);color:#c4b5fd;}

        /* Viewer list */
        .viewer-item{display:flex;align-items:center;gap:0.6rem;padding:0.45rem 0;border-bottom:1px solid var(--border);font-size:0.85rem;}
        .viewer-item:last-child{border-bottom:none;}
        .viewer-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--border);flex-shrink:0;}
        .viewer-name{flex:1;font-weight:600;}
        .viewer-actions{display:flex;gap:0.3rem;}

        /* Mod log */
        .log-row{display:flex;align-items:center;gap:0.75rem;padding:0.65rem 0;border-bottom:1px solid var(--border);font-size:0.875rem;flex-wrap:wrap;color:var(--text);}
        .log-row:last-child{border-bottom:none;}
        .log-type{border-radius:20px;padding:0.15rem 0.6rem;font-size:0.7rem;font-weight:700;white-space:nowrap;}
        .log-ban{background:rgba(239,68,68,0.15);color:#f87171;}
        .log-timeout{background:rgba(245,158,11,0.15);color:#f59e0b;}
        .log-delete{background:rgba(99,102,241,0.15);color:#a5b4fc;}
        .log-unban{background:rgba(34,197,94,0.15);color:#86efac;}
        .log-meta{color:#c8b080;font-size:0.75rem;}

        /* Live streams grid */
        .streams-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;}
        .stream-thumb{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:all 0.15s;}
        .stream-thumb:hover{border-color:var(--primary);transform:translateY(-2px);}
        .stream-thumb-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#111;display:block;}
        .stream-thumb-info{padding:0.75rem;background:var(--card-bg);}
        .stream-thumb-title{font-size:0.875rem;font-weight:700;margin-bottom:0.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
        .stream-thumb-meta{font-size:0.78rem;color:#c8b080;display:flex;justify-content:space-between;font-weight:500;}
        .viewer-count{background:rgba(239,68,68,0.8);color:white;font-size:0.68rem;font-weight:700;padding:0.1rem 0.4rem;border-radius:4px;position:absolute;bottom:6px;left:6px;}

        /* Mod action panel */
        .mod-panel{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:1.25rem;margin-top:1rem;}
        .mod-panel-title{font-size:0.85rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.875rem;}
        .mod-actions{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem;}
        .duration-select{background:var(--card-bg);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:0.4rem 0.6rem;font-size:0.8rem;font-family:inherit;}

        /* Loading state */
        .loading-spin{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.6s linear infinite;vertical-align:middle;}
        @keyframes spin{to{transform:rotate(360deg);}}
        .empty-state{text-align:center;padding:2.5rem;color:var(--muted);}
        .empty-state i{font-size:2.5rem;display:block;margin-bottom:0.75rem;color:var(--border);}

        /* Alert */
        .alert{border-radius:10px;padding:0.875rem 1.1rem;margin-bottom:1rem;font-size:0.875rem;display:flex;align-items:flex-start;gap:0.6rem;}
        .alert-success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:#86efac;}
        .alert-error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;}
        .alert-info{background:rgba(212,160,23,0.08);border:1px solid rgba(212,160,23,0.2);color:#fcd34d;}

        @media(max-width:768px){
            body{overflow-x:hidden !important;overflow-y:auto !important;}
            .main{margin-left:0 !important;}
            .content{padding:1rem !important;}
            .topbar{padding:0.7rem 0.875rem !important;}
            .streams-grid{grid-template-columns:1fr 1fr;}
        }
        @media(max-width:480px){
            .streams-grid{grid-template-columns:1fr;}
        }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   NOTIFICATIONS  (notifications.php)
   ──────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        body.sidebar-collapsed .sidebar { width: 56px; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
        body.sidebar-collapsed .sidebar-brand,
        body.sidebar-collapsed .nav-label-text,
        body.sidebar-collapsed .sidebar-footer .user-info,
        body.sidebar-collapsed .sidebar-footer .user-status-dot { display: none; }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-logo img {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section {
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.02em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
            font-family: 'Space Mono', monospace;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(212,160,23,0.04);
        }

        .nav-link.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-info-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.4rem 0;
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
            overflow: hidden;
        }

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

        .user-details { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Syne', sans-serif;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ════ MAIN ════ */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            transition: margin-left 0.2s ease;
        }

        /* ════ TOPBAR ════ */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.97);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
            gap: 1rem;
            flex-shrink: 0;
        }

        .topbar h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            letter-spacing: 0.02em;
        }

        .mobile-menu-btn, .sidebar-toggle-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .mobile-menu-btn:hover, .sidebar-toggle-btn:hover {
            color: var(--gold);
            border-color: var(--gold-dim);
        }

        .notif-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
            text-decoration: none;
        }
        .notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .badge-count {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 16px; height: 16px;
            border-radius: 8px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.52rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            font-family: 'Space Mono', monospace;
        }

        /* ════ CONTENT ════ */
        .content {
            flex: 1;
            padding: 1.75rem 2rem;
        }

        /* ════ CARDS ════ */
        .card, .section-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .card-header, .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            gap: 0.75rem;
        }

        .card-title, .section-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }

        .card-body, .section-body {
            padding: 1.1rem 1.25rem;
        }

        /* ════ BUTTONS ════ */
        .btn-primary {
            background: var(--gold);
            border: none;
            border-radius: 3px;
            color: var(--bg);
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.6rem 1.25rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--gold-mid); color: var(--bg); }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--muted);
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.12s, border-color 0.12s;
        }
        .btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

        .btn-danger {
            background: rgba(139,26,26,0.15);
            border: 1px solid rgba(139,26,26,0.35);
            border-radius: 3px;
            color: #f87171;
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            padding: 0.5rem 0.875rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.12s;
        }
        .btn-danger:hover { background: rgba(139,26,26,0.25); }

        /* ════ INPUTS ════ */
        .form-control, .mod-input, input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], select, textarea {
            background: var(--surface2, #111009) !important;
            border: 1px solid var(--border2) !important;
            border-radius: 3px !important;
            color: var(--text) !important;
            font-family: 'Space Mono', monospace !important;
            font-size: 0.8rem !important;
            padding: 0.6rem 0.875rem !important;
            outline: none !important;
            transition: border-color 0.12s !important;
            width: 100%;
        }
        .form-control:focus, .mod-input:focus,
        input:focus, select:focus, textarea:focus {
            border-color: var(--gold-dim) !important;
            box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
        }
        .form-control::placeholder, .mod-input::placeholder,
        input::placeholder, textarea::placeholder {
            color: var(--dim, #2a2218) !important;
        }

        /* ════ TABLES ════ */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .admin-table th {
            font-size: 0.6rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            text-align: left;
            font-weight: 400;
            background: rgba(0,0,0,0.2);
        }
        .admin-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.02); }

        /* ════ ALERTS ════ */
        .alert-success {
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.25);
            border-left: 3px solid #22c55e;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #86efac;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }
        .alert-danger, .alert-error {
            background: rgba(139,26,26,0.1);
            border: 1px solid rgba(139,26,26,0.3);
            border-left: 3px solid #c0392b;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #f87171;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }

        /* ════ SCANLINES ════ */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
            pointer-events: none;
            z-index: 9999;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: var(--bg); color: var(--text); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; display: flex; min-height: 100vh; }
        .sidebar { width: 240px; height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; overflow: hidden; }
        .sidebar-logo { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
        .sidebar-logo h1 { font-size: 1.1rem; font-weight: 800; color: var(--text); margin:0; }
        .sidebar-logo span { font-size: 0.65rem; color: var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
        .sidebar-collapsed .sidebar-logo > div:last-child { display:none; }
        .sidebar-collapsed .sidebar-logo { align-items:center; padding:0.875rem; }
        .sidebar-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }
        .nav-section { padding: 0.5rem 1rem 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
        .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.25rem; color: var(--muted); text-decoration: none; font-size: 0.9rem; border-left: 3px solid transparent; transition: all 0.15s; }
        .nav-link:hover, .nav-link.active { color: var(--text); background: rgba(212,160,23,0.1); border-left-color: var(--primary); }
        .nav-link i { font-size: 1rem; width: 20px; }
        .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
        .user-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
        .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #0d0b08; flex-shrink: 0; }
        .user-name { font-size: 0.875rem; font-weight: 600; }
        .user-role { font-size: 0.75rem; color: var(--muted); }
        .btn-logout { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.4rem; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; }
        .btn-logout:hover { color: #f87171; border-color: #f87171; }
        .main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; }
        .topbar { background: var(--sidebar-bg); border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
        .topbar h2 { font-size: 1.1rem; font-weight: 600; }
        .content { padding: 2rem; max-width: 720px; }
        .btn-outline { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 1rem; font-size: 0.85rem; color: var(--muted); text-decoration: none; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
        .btn-outline:hover { border-color: var(--primary); color: var(--primary); }

        /* Notifications */
        .notif-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem 1.25rem;
            border-radius: 10px;
            margin-bottom: 0.5rem;
            background: var(--card-bg);
            border: 1px solid var(--border);
            transition: all 0.15s;
            position: relative;
        }
        .notif-item.unread {
            border-left: 3px solid var(--primary);
            background: rgba(212,160,23,0.04);
        }
        .notif-item:hover { border-color: var(--primary); }

        .notif-icon {
            width: 38px; height: 38px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .notif-body { flex: 1; }
        .notif-message { font-size: 0.875rem; margin-bottom: 0.25rem; line-height: 1.5; }
        .notif-time { font-size: 0.75rem; color: var(--muted); }

        .notif-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
        .notif-btn { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; text-decoration: none; display: flex; align-items: center; }
        .notif-btn:hover { color: var(--primary); border-color: var(--primary); }
        .notif-btn.del:hover { color: #ef4444; border-color: #ef4444; }

        .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); position: absolute; top: 1rem; right: 1rem; }

        .empty-state { text-align: center; padding: 4rem 2rem; color: var(--muted); }
        .empty-state i { font-size: 3rem; display: block; margin-bottom: 1rem; color: var(--border); }
        .empty-state h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 0.5rem; }

        .section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.75rem; margin-top: 1.5rem; }
        .section-title:first-child { margin-top: 0; }

    /* ── Mobile body fix (Android) ── */
    @media (max-width: 768px) {
        body { overflow-x: hidden !important; overflow-y: auto !important; }
    }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   SHIFT SCHEDULER  (shifts.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar { width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;transition:width 0.2s ease; }
        body.sidebar-collapsed .sidebar{width:56px;} body.sidebar-collapsed .main{margin-left:56px!important;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
        .sidebar-logo img{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
        .sidebar-brand{font-family:'Syne',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.06em;color:var(--text);white-space:nowrap;}
        .sidebar-brand span{color:var(--gold);}
        .sidebar-nav{flex:1;overflow-y:auto;padding:0.75rem 0;scrollbar-width:none;}
        .sidebar-nav::-webkit-scrollbar{display:none;}
        .nav-section{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding:1rem 1.5rem 0.4rem;}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.5rem;font-size:0.75rem;color:var(--muted);text-decoration:none;transition:color 0.12s,background 0.12s;white-space:nowrap;border-left:2px solid transparent;font-family:'Space Mono',monospace;}
        .nav-link:hover{color:var(--text);background:rgba(212,160,23,0.04);}
        .nav-link.active{color:var(--gold);background:rgba(212,160,23,0.06);border-left-color:var(--gold);}
        .nav-link i{font-size:0.9rem;width:18px;text-align:center;flex-shrink:0;}
        .sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;}
        .avatar{width:34px;height:34px;border-radius:7px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);flex-shrink:0;font-family:'Syne',sans-serif;overflow:hidden;}
        .avatar img{width:100%;height:100%;object-fit:cover;}
        .user-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Syne',sans-serif;}
        .user-role{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
        /* ════ MAIN ════ */
        .main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);transition:margin-left 0.2s ease;}
        /* ════ TOPBAR ════ */
        .topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(7,6,4,0.97);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;gap:1rem;flex-shrink:0;}
        .topbar h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:0.02em;}
        .mobile-menu-btn,.sidebar-toggle-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;flex-shrink:0;}
        .mobile-menu-btn:hover,.sidebar-toggle-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .notif-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;position:relative;text-decoration:none;}
        .notif-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:0.52rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'Space Mono',monospace;}
        /* ════ CONTENT ════ */
        .content{flex:1;padding:1.75rem 2rem;}
        /* ════ CARDS ════ */
        .card,.section-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;overflow:hidden;margin-bottom:1.25rem;}
        .card-header,.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);gap:0.75rem;}
        .card-title,.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        .card-body,.section-body{padding:1.1rem 1.25rem;}
        /* ════ BUTTONS ════ */
        .btn-primary{background:var(--gold);border:none;border-radius:3px;color:var(--bg);font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;}
        .btn-primary:hover{background:var(--gold-mid);color:var(--bg);}
        .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:color 0.12s,border-color 0.12s;}
        .btn-outline:hover{color:var(--gold);border-color:var(--gold-dim);}
        .btn-danger{background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.35);border-radius:3px;color:#f87171;font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:background 0.12s;}
        .btn-danger:hover{background:rgba(139,26,26,0.25);}
        /* ════ INPUTS ════ */
        .form-control,.mod-input{background:var(--surface2,#111009)!important;border:1px solid var(--border2)!important;border-radius:3px!important;color:var(--text)!important;font-family:'Space Mono',monospace!important;font-size:0.8rem!important;padding:0.6rem 0.875rem!important;outline:none!important;transition:border-color 0.12s!important;}
        .form-control:focus,.mod-input:focus{border-color:var(--gold-dim)!important;box-shadow:0 0 0 3px rgba(212,160,23,0.07)!important;}
        /* ════ ALERTS ════ */
        .alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-left:3px solid #22c55e;border-radius:3px;padding:0.75rem 1rem;color:#86efac;font-size:0.78rem;margin-bottom:1rem;}
        .alert-danger,.alert-error{background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.3);border-left:3px solid #c0392b;border-radius:3px;padding:0.75rem 1rem;color:#f87171;font-size:0.78rem;margin-bottom:1rem;}
        /* ════ SCANLINES ════ */
        body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root{--primary:#d4a017;--primary-dark:#b8860b;--bg:#0d0b08;--sidebar-bg:#111009;--card-bg:#1a1610;--border:#2e2515;--text:#f0e6d0;--muted:#b0a080;}
        *{box-sizing:border-box;margin:0;padding:0;}
        body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,sans-serif;display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;}
        .sidebar{width:240px;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
        .sidebar-logo h1{font-size:1.2rem;font-weight:700;}
        .sidebar-logo span{font-size:0.7rem;color:var(--muted);}
        .sidebar-nav{padding:1rem 0;flex:1;overflow-y:auto;}
        .nav-section{padding:0.5rem 1rem 0.25rem;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.9rem;font-weight:500;border-left:3px solid transparent;transition:all 0.15s;}
        .nav-link:hover,.nav-link.active{color:var(--text);background:rgba(212,160,23,0.1);border-left-color:var(--primary);}
        .nav-link i{font-size:1rem;width:20px;}
        .sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0;}
        .btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.4rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-logout:hover{color:#f87171;border-color:#f87171;}
        .avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#0d0b08;flex-shrink:0;}
        .main{margin-left: 260px;flex:1;display:flex;flex-direction:column;}
        .topbar{background:var(--sidebar-bg);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;}
        .topbar h2{font-size:1.1rem;font-weight:700;}
        .content{padding:1.5rem 2rem;}
        .card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1rem;}
        .card-header{padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;color:var(--text);}
        .card-title{font-size:0.9rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;color:var(--text);}
        .card-body{padding:1.25rem;color:var(--text);}
        .mod-input{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:0.6rem 0.875rem;font-size:0.875rem;font-family:inherit;outline:none;transition:border-color 0.15s;width:100%;}
        .mod-input:focus{border-color:var(--primary);}
        .mod-input::placeholder{color:var(--muted);}
        .btn-primary{background:var(--primary);border:none;border-radius:8px;padding:0.55rem 1.25rem;font-size:0.875rem;font-weight:700;color:#0d0b08;cursor:pointer;transition:background 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.4rem;white-space:nowrap;}
        .btn-primary:hover{background:var(--primary-dark);}
        .btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:0.5rem 0.875rem;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.35rem;}
        .btn-outline:hover{border-color:var(--primary);color:var(--primary);}
        .btn-danger{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;border-radius:8px;padding:0.4rem 0.75rem;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-danger:hover{background:rgba(239,68,68,0.2);}
        .btn-sm{padding:0.3rem 0.6rem;font-size:0.75rem;}

        /* Week nav */
        .week-nav{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;}
        .week-label{font-size:0.9rem;font-weight:700;min-width:180px;text-align:center;}

        /* Schedule grid */
        .schedule-grid{width:100%;border-collapse:collapse;font-size:0.82rem;}
        .schedule-grid th{padding:0.6rem 0.5rem;text-align:center;color:var(--muted);font-weight:700;border-bottom:1px solid var(--border);font-size:0.75rem;}
        .schedule-grid td{padding:0.35rem 0.4rem;border:1px solid var(--border);vertical-align:top;min-height:60px;min-width:90px;}
        .schedule-grid .time-col{color:#c8b080;font-size:0.78rem;font-weight:600;white-space:nowrap;text-align:right;padding-right:0.75rem;border:none;border-bottom:1px solid var(--border);}
        .schedule-grid .today-col{background:rgba(212,160,23,0.04);}
        .shift-chip{background:rgba(212,160,23,0.12);border:1px solid rgba(212,160,23,0.3);border-radius:6px;padding:0.25rem 0.5rem;margin-bottom:0.25rem;font-size:0.75rem;font-weight:600;cursor:pointer;transition:background 0.12s;display:flex;align-items:center;justify-content:space-between;gap:0.25rem;}
        /* Shift detail popup */
        .shift-popup-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,0.4);}
        .shift-popup{position:fixed;z-index:401;background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:1.25rem;min-width:280px;max-width:320px;box-shadow:0 8px 32px rgba(0,0,0,0.5);}
        .shift-popup-title{font-size:0.95rem;font-weight:700;color:var(--text);margin-bottom:0.75rem;display:flex;align-items:center;gap:0.5rem;}
        .shift-popup-row{display:flex;align-items:flex-start;gap:0.5rem;font-size:0.82rem;color:var(--muted);margin-bottom:0.4rem;}
        .shift-popup-row i{color:var(--primary);width:14px;flex-shrink:0;margin-top:2px;}
        .shift-popup-row span{color:var(--text);}
        .shift-popup-notes{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.75rem;font-size:0.82rem;color:var(--text);line-height:1.6;margin-top:0.5rem;white-space:pre-wrap;word-break:break-word;}
        .shift-chip:hover{background:rgba(212,160,23,0.2);}
        .shift-chip .cm-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .shift-chip .chip-del{color:var(--muted);font-size:0.7rem;flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;line-height:1;}
        .shift-chip .chip-del:hover{color:#f87171;}
        .add-shift-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:0.2rem;border:1px dashed var(--border);border-radius:6px;background:none;color:var(--muted);font-size:0.72rem;cursor:pointer;transition:all 0.12s;font-family:inherit;}
        .add-shift-btn:hover{border-color:var(--primary);color:var(--primary);}
        .needs-coverage{background:rgba(239,68,68,0.05);border-color:rgba(239,68,68,0.2)!important;}
        .empty-state{text-align:center;padding:2.5rem;color:var(--muted);}
        .alert{border-radius:10px;padding:0.875rem 1.1rem;margin-bottom:1rem;font-size:0.875rem;display:flex;align-items:flex-start;gap:0.6rem;}
        .alert-success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:#86efac;}
        .alert-error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;}
        .alert-info{background:rgba(212,160,23,0.08);border:1px solid rgba(212,160,23,0.2);color:#fcd34d;}

        /* My shifts */
        .my-shift-row{display:flex;align-items:center;gap:0.75rem;padding:0.65rem 0;border-bottom:1px solid var(--border);font-size:0.85rem;flex-wrap:wrap;}
        .my-shift-row:last-child{border-bottom:none;}
        .shift-time{font-weight:700;white-space:nowrap;}
        .shift-day{color:var(--primary);font-weight:600;min-width:80px;}

        select.mod-input{cursor:pointer;}
        @media(max-width:900px){.schedule-grid{font-size:0.7rem;} .schedule-grid td{min-width:60px;}}
        @media(max-width:768px){.main{margin-left:0;}.content{padding:1rem;}.topbar{padding:0.7rem 0.875rem;}}

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   STREAM VIEWER  (viewer.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar { width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;transition:width 0.2s ease; }
        body.sidebar-collapsed .sidebar{width:56px;} body.sidebar-collapsed .main{margin-left:56px!important;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
        .sidebar-logo img{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
        .sidebar-brand{font-family:'Syne',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.06em;color:var(--text);white-space:nowrap;}
        .sidebar-brand span{color:var(--gold);}
        .sidebar-nav{flex:1;overflow-y:auto;padding:0.75rem 0;scrollbar-width:none;}
        .sidebar-nav::-webkit-scrollbar{display:none;}
        .nav-section{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding:1rem 1.5rem 0.4rem;}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.5rem;font-size:0.75rem;color:var(--muted);text-decoration:none;transition:color 0.12s,background 0.12s;white-space:nowrap;border-left:2px solid transparent;font-family:'Space Mono',monospace;}
        .nav-link:hover{color:var(--text);background:rgba(212,160,23,0.04);}
        .nav-link.active{color:var(--gold);background:rgba(212,160,23,0.06);border-left-color:var(--gold);}
        .nav-link i{font-size:0.9rem;width:18px;text-align:center;flex-shrink:0;}
        .sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;}
        .avatar{width:34px;height:34px;border-radius:7px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);flex-shrink:0;font-family:'Syne',sans-serif;overflow:hidden;}
        .avatar img{width:100%;height:100%;object-fit:cover;}
        .user-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Syne',sans-serif;}
        .user-role{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
        /* ════ MAIN ════ */
        .main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);transition:margin-left 0.2s ease;}
        /* ════ TOPBAR ════ */
        .topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(7,6,4,0.97);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;gap:1rem;flex-shrink:0;}
        .topbar h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:0.02em;}
        .mobile-menu-btn,.sidebar-toggle-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;flex-shrink:0;}
        .mobile-menu-btn:hover,.sidebar-toggle-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .notif-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;position:relative;text-decoration:none;}
        .notif-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:0.52rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'Space Mono',monospace;}
        /* ════ CONTENT ════ */
        .content{flex:1;padding:1.75rem 2rem;}
        /* ════ CARDS ════ */
        .card,.section-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;overflow:hidden;margin-bottom:1.25rem;}
        .card-header,.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);gap:0.75rem;}
        .card-title,.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        .card-body,.section-body{padding:1.1rem 1.25rem;}
        /* ════ BUTTONS ════ */
        .btn-primary{background:var(--gold);border:none;border-radius:3px;color:var(--bg);font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;}
        .btn-primary:hover{background:var(--gold-mid);color:var(--bg);}
        .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:color 0.12s,border-color 0.12s;}
        .btn-outline:hover{color:var(--gold);border-color:var(--gold-dim);}
        .btn-danger{background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.35);border-radius:3px;color:#f87171;font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:background 0.12s;}
        .btn-danger:hover{background:rgba(139,26,26,0.25);}
        /* ════ INPUTS ════ */
        .form-control,.mod-input{background:var(--surface2,#111009)!important;border:1px solid var(--border2)!important;border-radius:3px!important;color:var(--text)!important;font-family:'Space Mono',monospace!important;font-size:0.8rem!important;padding:0.6rem 0.875rem!important;outline:none!important;transition:border-color 0.12s!important;}
        .form-control:focus,.mod-input:focus{border-color:var(--gold-dim)!important;box-shadow:0 0 0 3px rgba(212,160,23,0.07)!important;}
        /* ════ ALERTS ════ */
        .alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-left:3px solid #22c55e;border-radius:3px;padding:0.75rem 1rem;color:#86efac;font-size:0.78rem;margin-bottom:1rem;}
        .alert-danger,.alert-error{background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.3);border-left:3px solid #c0392b;border-radius:3px;padding:0.75rem 1rem;color:#f87171;font-size:0.78rem;margin-bottom:1rem;}
        /* ════ SCANLINES ════ */
        body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root{--primary:#d4a017;--primary-dark:#b8860b;--bg:#0d0b08;--sidebar-bg:#111009;--card-bg:#1a1610;--border:#2e2515;--text:#f0e6d0;--muted:#9a8a6a;}
        *{box-sizing:border-box;margin:0;padding:0;}
        html,body{height:100%;overflow:hidden;}
        body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,sans-serif;display:flex;height:100vh;-webkit-font-smoothing:antialiased;}

        /* Sidebar */
        .sidebar{width:240px;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
        .sidebar-logo h1{font-size:1.2rem;font-weight:700;}
        .sidebar-logo span{font-size:0.7rem;color:var(--muted);}
        .sidebar-nav{padding:1rem 0;flex:1;overflow-y:auto;}
        .nav-section{padding:0.5rem 1rem 0.25rem;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.9rem;font-weight:500;border-left:3px solid transparent;transition:all 0.15s;}
        .nav-link:hover,.nav-link.active{color:var(--text);background:rgba(212,160,23,0.1);border-left-color:var(--primary);}
        .nav-link i{font-size:1rem;width:20px;}
        .sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0;}
        .user-name{font-size:0.875rem;font-weight:600;}
        .user-role{font-size:0.75rem;color:var(--muted);}
        .btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.4rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-logout:hover{color:#f87171;border-color:#f87171;}
        .avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#0d0b08;flex-shrink:0;}

        /* Main */
        .main{margin-left: 260px;flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0;}

        /* Topbar */
        .topbar{background:var(--sidebar-bg);border-bottom:1px solid var(--border);padding:0.75rem 1.25rem;display:flex;align-items:center;gap:0.875rem;flex-shrink:0;flex-wrap:wrap;}
        .topbar-title{font-size:1rem;font-weight:700;color:var(--text);white-space:nowrap;display:flex;align-items:center;gap:0.5rem;}
        .topbar-title i{color:var(--primary);}

        /* Search bar */
        .search-wrap{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0;max-width:480px;}
        .search-input{
            flex:1;min-width:0;
            background:var(--bg);
            border:1px solid var(--border);
            color:var(--text);
            border-radius:8px;
            padding:0.5rem 0.875rem;
            font-size:0.9rem;
            font-family:inherit;
            outline:none;
            transition:border-color 0.15s;
        }
        .search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(212,160,23,0.12);}
        .search-input::placeholder{color:var(--muted);}
        .btn-search{
            background:var(--primary);
            border:none;
            border-radius:8px;
            padding:0.5rem 1.1rem;
            color:#0d0b08;
            font-weight:700;
            font-size:0.875rem;
            cursor:pointer;
            white-space:nowrap;
            transition:background 0.15s;
            font-family:inherit;
            display:flex;align-items:center;gap:0.4rem;
            flex-shrink:0;
            touch-action:manipulation;
        }
        .btn-search:hover{background:var(--primary-dark);}

        /* Quick actions */
        .topbar-actions{display:flex;align-items:center;gap:0.4rem;flex-shrink:0;margin-left:auto;}
        .btn-action{
            background:var(--card-bg);
            border:1px solid var(--border);
            color:var(--muted);
            border-radius:8px;
            padding:0.45rem 0.875rem;
            font-size:0.8rem;
            font-weight:600;
            cursor:pointer;
            white-space:nowrap;
            transition:all 0.15s;
            font-family:inherit;
            display:flex;align-items:center;gap:0.35rem;
            touch-action:manipulation;
        }
        .btn-action:hover{color:var(--primary);border-color:var(--primary);}
        .btn-action.active{background:rgba(212,160,23,0.1);border-color:var(--primary);color:var(--primary);}

        /* Current URL display */
        .url-bar{
            background:var(--bg);
            border:1px solid var(--border);
            border-radius:6px;
            padding:0.3rem 0.75rem;
            font-size:0.75rem;
            color:var(--muted);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            max-width:300px;
            font-family:monospace;
        }

        /* iframe area */
        .viewer-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}
        .viewer-iframe{width:100%;height:100%;border:none;display:block;background:#000;}

        /* Loading overlay */
        .loading-overlay{
            position:absolute;inset:0;
            background:var(--bg);
            display:flex;flex-direction:column;
            align-items:center;justify-content:center;
            gap:1rem;
            z-index:10;
            transition:opacity 0.3s;
        }
        .loading-overlay.hidden{opacity:0;pointer-events:none;}
        .spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.7s linear infinite;}
        @keyframes spin{to{transform:rotate(360deg);}}
        .loading-text{font-size:0.875rem;color:var(--muted);}

        /* Recent lookups */
        .recents-panel{
            position:absolute;top:100%;left:0;
            background:var(--card-bg);
            border:1px solid var(--border);
            border-radius:10px;
            box-shadow:0 8px 24px rgba(0,0,0,0.4);
            z-index:50;
            min-width:220px;
            max-height:240px;
            overflow-y:auto;
            display:none;
        }
        .recents-header{padding:0.5rem 0.875rem;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);border-bottom:1px solid var(--border);}
        .recent-item{padding:0.5rem 0.875rem;font-size:0.85rem;cursor:pointer;transition:background 0.1s;display:flex;align-items:center;gap:0.5rem;color:var(--text);}
        .recent-item:hover{background:rgba(212,160,23,0.08);}
        .recent-item i{color:var(--muted);font-size:0.8rem;}
        .recents-clear{padding:0.45rem 0.875rem;font-size:0.75rem;color:var(--muted);cursor:pointer;border-top:1px solid var(--border);text-align:center;transition:color 0.1s;}
        .recents-clear:hover{color:#f87171;}

        /* Blocked state — split view */
        .blocked-state{
            display:flex;
            width:100%;height:100%;
        }
        .iframe-half{
            flex:1;
            min-width:0;
            position:relative;
            background:#000;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .iframe-half .viewer-iframe{
            width:100%;height:100%;
            opacity:0.15;
            pointer-events:none;
        }
        .iframe-half::after{
            content:'Waiting for whitelist...';
            position:absolute;
            font-size:0.75rem;
            color:var(--muted);
            background:var(--card-bg);
            border:1px solid var(--border);
            border-radius:20px;
            padding:0.3rem 0.875rem;
        }

        /* Launcher panel */
        .launcher-panel{
            width:380px;
            flex-shrink:0;
            background:var(--sidebar-bg);
            border-left:1px solid var(--border);
            display:flex;
            flex-direction:column;
            gap:0;
            overflow-y:auto;
            padding:1.25rem;
        }
        .launcher-header{
            display:flex;
            gap:0.75rem;
            align-items:flex-start;
            background:rgba(212,160,23,0.06);
            border:1px solid rgba(212,160,23,0.2);
            border-radius:10px;
            padding:1rem;
            margin-bottom:1rem;
        }
        .dev-instruction{
            background:var(--bg);
            border:1px solid var(--border);
            border-radius:8px;
            padding:0.875rem;
            margin-bottom:1rem;
        }
        .code-block{
            background:rgba(212,160,23,0.06);
            border:1px solid rgba(212,160,23,0.15);
            border-radius:6px;
            padding:0.5rem 0.75rem;
            font-size:0.72rem;
            font-family:monospace;
            color:#fcd34d;
            word-break:break-all;
            line-height:1.5;
            cursor:pointer;
            transition:background 0.15s;
        }
        .code-block:hover{background:rgba(212,160,23,0.12);}
        .launcher-divider{
            display:flex;align-items:center;gap:0.75rem;
            margin:0.875rem 0;
        }
        .launcher-divider::before,.launcher-divider::after{
            content:'';flex:1;height:1px;background:var(--border);
        }
        .launcher-divider span{font-size:0.72rem;color:var(--muted);white-space:nowrap;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;}
        .quick-links{display:flex;flex-direction:column;gap:0.5rem;}
        .quick-link{
            display:flex;align-items:center;gap:0.875rem;
            background:var(--card-bg);border:1px solid var(--border);
            border-radius:10px;padding:0.875rem 1rem;
            text-decoration:none;color:var(--text);
            transition:all 0.15s;
            font-size:0.9rem;
        }
        .quick-link:hover{border-color:var(--primary);color:var(--text);transform:translateX(2px);}
        .quick-link.featured{border-color:rgba(212,160,23,0.3);background:rgba(212,160,23,0.05);}
        .quick-link.featured i:first-child{font-size:1.4rem;color:var(--primary);flex-shrink:0;}
        .quick-link.user-link i:first-child{font-size:1.4rem;color:var(--primary);flex-shrink:0;}
        .quick-link-name{font-weight:700;font-size:0.875rem;margin-bottom:0.1rem;}
        .quick-link-desc{font-size:0.75rem;color:var(--muted);}
        .quick-link-arrow{margin-left:auto;color:var(--muted);font-size:0.85rem;flex-shrink:0;}
        .recent-launch-item{
            display:flex;align-items:center;gap:0.75rem;
            padding:0.6rem 0.875rem;
            background:var(--card-bg);border:1px solid var(--border);
            border-radius:8px;
            cursor:pointer;
            text-decoration:none;color:var(--text);
            font-size:0.85rem;font-weight:600;
            transition:all 0.15s;
            margin-bottom:0.4rem;
        }
        .recent-launch-item:hover{border-color:var(--primary);color:var(--text);}
        .recent-launch-item i{color:var(--muted);font-size:0.85rem;flex-shrink:0;}

        @media(max-width:900px){
            .iframe-half{display:none;}
            .launcher-panel{width:100%;border-left:none;}
        }

        /* Mobile */
        @media(max-width:768px){
            body{overflow-x:hidden !important;overflow-y:auto !important;}
            html,body{height:auto;}
            .main{margin-left:0 !important;height:100dvh;}
            .topbar{padding:0.6rem 0.75rem;gap:0.5rem;}
            .topbar-title span{display:none;}
            .url-bar{display:none;}
            .search-wrap{max-width:none;flex:1;}
            .topbar-actions{gap:0.3rem;}
            .btn-action span{display:none;}
            .viewer-wrap{height:calc(100dvh - 56px);}
        }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   WATCHLIST  (watchlist.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar { width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;transition:width 0.2s ease; }
        body.sidebar-collapsed .sidebar{width:56px;} body.sidebar-collapsed .main{margin-left:56px!important;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
        .sidebar-logo img{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
        .sidebar-brand{font-family:'Syne',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.06em;color:var(--text);white-space:nowrap;}
        .sidebar-brand span{color:var(--gold);}
        .sidebar-nav{flex:1;overflow-y:auto;padding:0.75rem 0;scrollbar-width:none;}
        .sidebar-nav::-webkit-scrollbar{display:none;}
        .nav-section{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding:1rem 1.5rem 0.4rem;}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.5rem;font-size:0.75rem;color:var(--muted);text-decoration:none;transition:color 0.12s,background 0.12s;white-space:nowrap;border-left:2px solid transparent;font-family:'Space Mono',monospace;}
        .nav-link:hover{color:var(--text);background:rgba(212,160,23,0.04);}
        .nav-link.active{color:var(--gold);background:rgba(212,160,23,0.06);border-left-color:var(--gold);}
        .nav-link i{font-size:0.9rem;width:18px;text-align:center;flex-shrink:0;}
        .sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;}
        .avatar{width:34px;height:34px;border-radius:7px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);flex-shrink:0;font-family:'Syne',sans-serif;overflow:hidden;}
        .avatar img{width:100%;height:100%;object-fit:cover;}
        .user-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Syne',sans-serif;}
        .user-role{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
        /* ════ MAIN ════ */
        .main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);transition:margin-left 0.2s ease;}
        /* ════ TOPBAR ════ */
        .topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(7,6,4,0.97);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;gap:1rem;flex-shrink:0;}
        .topbar h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:0.02em;}
        .mobile-menu-btn,.sidebar-toggle-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;flex-shrink:0;}
        .mobile-menu-btn:hover,.sidebar-toggle-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .notif-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;position:relative;text-decoration:none;}
        .notif-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:0.52rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'Space Mono',monospace;}
        /* ════ CONTENT ════ */
        .content{flex:1;padding:1.75rem 2rem;}
        /* ════ CARDS ════ */
        .card,.section-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;overflow:hidden;margin-bottom:1.25rem;}
        .card-header,.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);gap:0.75rem;}
        .card-title,.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        .card-body,.section-body{padding:1.1rem 1.25rem;}
        /* ════ BUTTONS ════ */
        .btn-primary{background:var(--gold);border:none;border-radius:3px;color:var(--bg);font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;}
        .btn-primary:hover{background:var(--gold-mid);color:var(--bg);}
        .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:color 0.12s,border-color 0.12s;}
        .btn-outline:hover{color:var(--gold);border-color:var(--gold-dim);}
        .btn-danger{background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.35);border-radius:3px;color:#f87171;font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:background 0.12s;}
        .btn-danger:hover{background:rgba(139,26,26,0.25);}
        /* ════ INPUTS ════ */
        .form-control,.mod-input{background:var(--surface2,#111009)!important;border:1px solid var(--border2)!important;border-radius:3px!important;color:var(--text)!important;font-family:'Space Mono',monospace!important;font-size:0.8rem!important;padding:0.6rem 0.875rem!important;outline:none!important;transition:border-color 0.12s!important;}
        .form-control:focus,.mod-input:focus{border-color:var(--gold-dim)!important;box-shadow:0 0 0 3px rgba(212,160,23,0.07)!important;}
        /* ════ ALERTS ════ */
        .alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-left:3px solid #22c55e;border-radius:3px;padding:0.75rem 1rem;color:#86efac;font-size:0.78rem;margin-bottom:1rem;}
        .alert-danger,.alert-error{background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.3);border-left:3px solid #c0392b;border-radius:3px;padding:0.75rem 1rem;color:#f87171;font-size:0.78rem;margin-bottom:1rem;}
        /* ════ SCANLINES ════ */
        body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root{--primary:#d4a017;--primary-dark:#b8860b;--bg:#0d0b08;--sidebar-bg:#111009;--card-bg:#1a1610;--border:#2e2515;--text:#f0e6d0;--muted:#b0a080;}
        *{box-sizing:border-box;margin:0;padding:0;}
        body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,sans-serif;display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;}
        .sidebar{width:240px;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
        .sidebar-logo h1{font-size:1.2rem;font-weight:700;}
        .sidebar-logo span{font-size:0.7rem;color:var(--muted);}
        .sidebar-nav{padding:1rem 0;flex:1;overflow-y:auto;}
        .nav-section{padding:0.5rem 1rem 0.25rem;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.9rem;font-weight:500;border-left:3px solid transparent;transition:all 0.15s;}
        .nav-link:hover,.nav-link.active{color:var(--text);background:rgba(212,160,23,0.1);border-left-color:var(--primary);}
        .nav-link i{font-size:1rem;width:20px;}
        .sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0;}
        .user-name{font-size:0.875rem;font-weight:600;}
        .user-role{font-size:0.75rem;color:var(--muted);}
        .btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.4rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-logout:hover{color:#f87171;border-color:#f87171;}
        .avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#0d0b08;flex-shrink:0;}
        .main{margin-left: 260px;flex:1;display:flex;flex-direction:column;}
        .topbar{background:var(--sidebar-bg);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;}
        .topbar h2{font-size:1.1rem;font-weight:700;}
        .content{padding:1.5rem 2rem;max-width:1200px;}
        .card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1rem;}
        .card-header{padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;color:var(--text);}
        .card-title{font-size:0.9rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;color:var(--text);}
        .card-body{padding:1.25rem;color:var(--text);}
        .mod-input{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:0.6rem 0.875rem;font-size:0.875rem;font-family:inherit;outline:none;transition:border-color 0.15s;width:100%;}
        .mod-input:focus{border-color:var(--primary);}
        .mod-input::placeholder{color:var(--muted);}
        .btn-primary{background:var(--primary);border:none;border-radius:8px;padding:0.55rem 1.25rem;font-size:0.875rem;font-weight:700;color:#0d0b08;cursor:pointer;transition:background 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.4rem;white-space:nowrap;}
        .btn-primary:hover{background:var(--primary-dark);}
        .btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:0.5rem 0.875rem;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.35rem;}
        .btn-outline:hover{border-color:var(--primary);color:var(--primary);}
        .btn-danger{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;border-radius:8px;padding:0.4rem 0.75rem;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-danger:hover{background:rgba(239,68,68,0.2);}
        .btn-sm{padding:0.3rem 0.6rem;font-size:0.75rem;}
        .search-row{display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap;}
        .sev-watch{background:rgba(245,158,11,0.15);color:#f59e0b;border:1px solid rgba(245,158,11,0.3);border-radius:20px;padding:0.15rem 0.65rem;font-size:0.72rem;font-weight:700;}
        .sev-concern{background:rgba(239,68,68,0.12);color:#f87171;border:1px solid rgba(239,68,68,0.3);border-radius:20px;padding:0.15rem 0.65rem;font-size:0.72rem;font-weight:700;}
        .sev-bos{background:rgba(139,0,0,0.3);color:#fca5a5;border:1px solid rgba(239,68,68,0.5);border-radius:20px;padding:0.15rem 0.65rem;font-size:0.72rem;font-weight:700;}
        .wl-row{display:flex;align-items:flex-start;gap:0.75rem;padding:0.875rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap;}
        .wl-row:last-child{border-bottom:none;}
        .wl-username{font-weight:700;font-size:0.95rem;margin-bottom:0.2rem;color:var(--text);}
        .wl-notes{font-size:0.875rem;color:#d4c5a0;line-height:1.55;}
        .wl-meta{font-size:0.78rem;color:#c8b080;margin-top:0.25rem;}
        .wl-actions{display:flex;gap:0.35rem;flex-shrink:0;margin-left:auto;}
        .empty-state{text-align:center;padding:2.5rem;color:var(--muted);}
        .empty-state i{font-size:2.5rem;display:block;margin-bottom:0.75rem;color:var(--border);}
        .alert{border-radius:10px;padding:0.875rem 1.1rem;margin-bottom:1rem;font-size:0.875rem;display:flex;align-items:flex-start;gap:0.6rem;}
        .alert-success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:#86efac;}
        .alert-error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;}
        .stat-row{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;}
        .stat-box{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem;flex:1;min-width:120px;}
        .stat-box .num{font-size:1.6rem;font-weight:800;line-height:1;}
        .stat-box .lbl{font-size:0.78rem;color:#c8b080;margin-top:0.3rem;font-weight:600;}
        select.mod-input{cursor:pointer;}
        @media(max-width:768px){.main{margin-left:0;}.content{padding:1rem;}.topbar{padding:0.7rem 0.875rem;}}

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
    
@keyframes spin{to{transform:rotate(360deg);}}


/* ────────────────────────────────────────────────────────────
   WHITEBOARD  (whiteboard.php)
   ──────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        body.sidebar-collapsed .sidebar { width: 56px; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }
        body.sidebar-collapsed .sidebar-brand,
        body.sidebar-collapsed .nav-label-text,
        body.sidebar-collapsed .sidebar-footer .user-info,
        body.sidebar-collapsed .sidebar-footer .user-status-dot { display: none; }

        .sidebar-logo {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-logo img {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section {
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.02em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
            font-family: 'Space Mono', monospace;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(212,160,23,0.04);
        }

        .nav-link.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-info-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.4rem 0;
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
            overflow: hidden;
        }

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

        .user-details { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Syne', sans-serif;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ════ MAIN ════ */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            transition: margin-left 0.2s ease;
        }

        /* ════ TOPBAR ════ */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.97);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
            gap: 1rem;
            flex-shrink: 0;
        }

        .topbar h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            letter-spacing: 0.02em;
        }

        .mobile-menu-btn, .sidebar-toggle-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            flex-shrink: 0;
        }
        .mobile-menu-btn:hover, .sidebar-toggle-btn:hover {
            color: var(--gold);
            border-color: var(--gold-dim);
        }

        .notif-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
            text-decoration: none;
        }
        .notif-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .badge-count {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 16px; height: 16px;
            border-radius: 8px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.52rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            font-family: 'Space Mono', monospace;
        }

        /* ════ CONTENT ════ */
        .content {
            flex: 1;
            padding: 1.75rem 2rem;
        }

        /* ════ CARDS ════ */
        .card, .section-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .card-header, .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            gap: 0.75rem;
        }

        .card-title, .section-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }

        .card-body, .section-body {
            padding: 1.1rem 1.25rem;
        }

        /* ════ BUTTONS ════ */
        .btn-primary {
            background: var(--gold);
            border: none;
            border-radius: 3px;
            color: var(--bg);
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.6rem 1.25rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.15s;
        }
        .btn-primary:hover { background: var(--gold-mid); color: var(--bg); }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--muted);
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.12s, border-color 0.12s;
        }
        .btn-outline:hover { color: var(--gold); border-color: var(--gold-dim); }

        .btn-danger {
            background: rgba(139,26,26,0.15);
            border: 1px solid rgba(139,26,26,0.35);
            border-radius: 3px;
            color: #f87171;
            font-family: 'Space Mono', monospace;
            font-size: 0.68rem;
            padding: 0.5rem 0.875rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.12s;
        }
        .btn-danger:hover { background: rgba(139,26,26,0.25); }

        /* ════ INPUTS ════ */
        .form-control, .mod-input, input[type="text"], input[type="email"],
        input[type="password"], input[type="search"], select, textarea {
            background: var(--surface2, #111009) !important;
            border: 1px solid var(--border2) !important;
            border-radius: 3px !important;
            color: var(--text) !important;
            font-family: 'Space Mono', monospace !important;
            font-size: 0.8rem !important;
            padding: 0.6rem 0.875rem !important;
            outline: none !important;
            transition: border-color 0.12s !important;
            width: 100%;
        }
        .form-control:focus, .mod-input:focus,
        input:focus, select:focus, textarea:focus {
            border-color: var(--gold-dim) !important;
            box-shadow: 0 0 0 3px rgba(212,160,23,0.07) !important;
        }
        .form-control::placeholder, .mod-input::placeholder,
        input::placeholder, textarea::placeholder {
            color: var(--dim, #2a2218) !important;
        }

        /* ════ TABLES ════ */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .admin-table th {
            font-size: 0.6rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 0.6rem 1rem;
            border-bottom: 1px solid var(--border);
            text-align: left;
            font-weight: 400;
            background: rgba(0,0,0,0.2);
        }
        .admin-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(212,160,23,0.02); }

        /* ════ ALERTS ════ */
        .alert-success {
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.25);
            border-left: 3px solid #22c55e;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #86efac;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }
        .alert-danger, .alert-error {
            background: rgba(139,26,26,0.1);
            border: 1px solid rgba(139,26,26,0.3);
            border-left: 3px solid #c0392b;
            border-radius: 3px;
            padding: 0.75rem 1rem;
            color: #f87171;
            font-size: 0.78rem;
            margin-bottom: 1rem;
        }

        /* ════ SCANLINES ════ */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
            pointer-events: none;
            z-index: 9999;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { height: 100%; overflow: hidden; }
        body { background: var(--bg); color: var(--text); font-family: 'Space Mono', monospace; display: flex; height: 100vh; }

        /* ── Sidebar ── */
        .sidebar { width: 240px; height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
        .sidebar-logo { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.4rem; }
        .sidebar-logo h1 { font-size: 1.2rem; font-weight: 700; }
        .sidebar-logo span { font-size: 0.7rem; color: var(--muted); }
        .sidebar-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }
        .nav-section { padding: 0.5rem 1rem 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
        .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.25rem; color: var(--muted); text-decoration: none; font-size: 0.9rem; border-left: 3px solid transparent; transition: all 0.15s; }
        .nav-link:hover, .nav-link.active { color: var(--text); background: rgba(212,160,23,0.1); border-left-color: var(--primary); }
        .nav-link i { font-size: 1rem; width: 20px; }
        .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); flex-shrink: 0; }
        .user-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
        .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #0d0b08; flex-shrink: 0; }
        .user-name { font-size: 0.875rem; font-weight: 600; }
        .user-role { font-size: 0.75rem; color: var(--muted); }
        .btn-logout { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.4rem; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; }
        .btn-logout:hover { color: #f87171; border-color: #f87171; }

        /* ── Main area ── */
        .main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

        /* ── Top toolbar ── */
        .wb-topbar {
            background: var(--sidebar-bg);
            border-bottom: 1px solid var(--border);
            padding: 0.6rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-shrink: 0;
            flex-wrap: wrap;
        }

        .wb-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text);
            margin-right: 0.5rem;
            white-space: nowrap;
        }

        /* Board switcher */
        .wb-switcher {
            background: var(--bg);
            border: 1px solid var(--border);
            color: var(--muted);
            border-radius: 6px;
            padding: 0.3rem 0.6rem;
            font-size: 0.78rem;
            cursor: pointer;
            outline: none;
        }
        .wb-switcher:focus { border-color: var(--primary); }
        .wb-switcher option { background: var(--card-bg); }

        .tb-sep { width: 1px; height: 22px; background: var(--border); margin: 0 0.25rem; flex-shrink: 0; }

        /* Tool buttons */
        .tb-btn {
            background: none;
            border: 1px solid transparent;
            color: var(--muted);
            border-radius: 7px;
            width: 34px; height: 34px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.15s;
            flex-shrink: 0;
            touch-action: manipulation;
        }
        .tb-btn:hover { color: var(--text); border-color: var(--border); }
        .tb-btn.active { color: var(--primary); border-color: var(--primary); background: rgba(212,160,23,0.1); }
        .tb-btn.danger:hover { color: #f87171; border-color: rgba(239,68,68,0.4); }

        /* Color swatches */
        .color-swatch {
            width: 22px; height: 22px;
            border-radius: 50%;
            border: 2px solid transparent;
            cursor: pointer;
            flex-shrink: 0;
            transition: transform 0.1s, border-color 0.1s;
        }
        .color-swatch:hover { transform: scale(1.2); }
        .color-swatch.active { border-color: white; transform: scale(1.15); }

        /* Stroke size */
        .stroke-btn {
            background: none;
            border: 1px solid transparent;
            color: var(--muted);
            border-radius: 6px;
            padding: 0.2rem 0.5rem;
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.15s;
            white-space: nowrap;
        }
        .stroke-btn.active { color: var(--primary); border-color: var(--primary); background: rgba(212,160,23,0.1); }

        /* Save status */
        .save-status {
            margin-left: auto;
            font-size: 0.72rem;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 0.35rem;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
        .save-dot.saved { background: #22c55e; }
        .save-dot.saving { background: #f59e0b; animation: pulse 0.8s ease infinite; }

        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

        /* ── Canvas area ── */
        .wb-canvas-wrap {
            flex: 1;
            position: relative;
            overflow: hidden;
            background: #f5f0e8;
            background-image:
                radial-gradient(circle, #c8b89a 1px, transparent 1px);
            background-size: 24px 24px;
            cursor: crosshair;
        }

        #wbCanvas {
            position: absolute;
            top: 0; left: 0;
            touch-action: none;
        }
        /* Touch pan overlay for mobile — shown when select tool active */
        .touch-pan-hint {
            position: absolute;
            bottom: 0.75rem;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.6);
            color: var(--muted);
            font-size: 0.72rem;
            padding: 0.3rem 0.875rem;
            border-radius: 20px;
            pointer-events: none;
            display: none;
        }
        @media(max-width:768px) { .touch-pan-hint { display: block; } }

        /* ── Sticky note overlay ── */
        .sticky-note {
            position: absolute;
            min-width: 120px;
            max-width: 220px;
            min-height: 80px;
            border-radius: 4px;
            padding: 0.6rem 0.75rem;
            font-size: 0.82rem;
            line-height: 1.5;
            cursor: move;
            box-shadow: 3px 3px 10px rgba(0,0,0,0.25);
            resize: both;
            overflow: auto;
            z-index: 10;
            user-select: none;
        }
        .sticky-note textarea {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            font-family: inherit;
            font-size: inherit;
            color: #1a1610;
            resize: none;
            cursor: text;
            line-height: 1.5;
        }
        .sticky-delete {
            position: absolute;
            top: 3px; right: 4px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.7rem;
            color: rgba(0,0,0,0.35);
            padding: 0;
            line-height: 1;
        }
        .sticky-delete:hover { color: #ef4444; }

        /* ── Status bar ── */
        .wb-statusbar {
            background: var(--sidebar-bg);
            border-top: 1px solid var(--border);
            padding: 0.3rem 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.7rem;
            color: var(--muted);
            flex-shrink: 0;
        }

        /* ── Mobile ── */
        @media (max-width: 768px) {
            body { overflow-x: hidden !important; overflow-y: auto !important; }
            .main { margin-left: 0 !important; }
            .wb-topbar { padding: 0.5rem 0.6rem; gap: 0.3rem; overflow-x: auto; flex-wrap: nowrap; }
            .wb-topbar::-webkit-scrollbar { display: none; }
            .wb-title { display: none; }
            .tb-sep { display: none; }
        }

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   WIKI  (wiki.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --primary:      #d4a017;
            --primary-dark: #a07810;
            --gold:         #d4a017;
            --gold-mid:     #a07810;
            --gold-dim:     #5a3e08;
            --accent:       #8b1a1a;
            --bg:           #070604;
            --surface:      #0d0b08;
            --surface2:     #111009;
            --sidebar-bg:   #0d0b08;
            --card-bg:      #0d0b08;
            --border:       #1c1810;
            --border2:      #252010;
            --text:         #ede0c8;
            --muted:        #5c5040;
            --dim:          #2a2218;
            --red:          #8b1a1a;
            --green:        #22c55e;
            --blue:         #3b82f6;
        }
        /* ════ SIDEBAR ════ */
        .sidebar { width:260px;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:200;overflow:hidden;transition:width 0.2s ease; }
        body.sidebar-collapsed .sidebar{width:56px;} body.sidebar-collapsed .main{margin-left:56px!important;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
        .sidebar-logo img{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
        .sidebar-brand{font-family:'Syne',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.06em;color:var(--text);white-space:nowrap;}
        .sidebar-brand span{color:var(--gold);}
        .sidebar-nav{flex:1;overflow-y:auto;padding:0.75rem 0;scrollbar-width:none;}
        .sidebar-nav::-webkit-scrollbar{display:none;}
        .nav-section{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding:1rem 1.5rem 0.4rem;}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.5rem;font-size:0.75rem;color:var(--muted);text-decoration:none;transition:color 0.12s,background 0.12s;white-space:nowrap;border-left:2px solid transparent;font-family:'Space Mono',monospace;}
        .nav-link:hover{color:var(--text);background:rgba(212,160,23,0.04);}
        .nav-link.active{color:var(--gold);background:rgba(212,160,23,0.06);border-left-color:var(--gold);}
        .nav-link i{font-size:0.9rem;width:18px;text-align:center;flex-shrink:0;}
        .sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0;}
        .avatar{width:34px;height:34px;border-radius:7px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--bg);flex-shrink:0;font-family:'Syne',sans-serif;overflow:hidden;}
        .avatar img{width:100%;height:100%;object-fit:cover;}
        .user-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Syne',sans-serif;}
        .user-role{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
        /* ════ MAIN ════ */
        .main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);transition:margin-left 0.2s ease;}
        /* ════ TOPBAR ════ */
        .topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(7,6,4,0.97);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;gap:1rem;flex-shrink:0;}
        .topbar h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:0.02em;}
        .mobile-menu-btn,.sidebar-toggle-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;flex-shrink:0;}
        .mobile-menu-btn:hover,.sidebar-toggle-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .notif-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.9rem;transition:color 0.12s,border-color 0.12s;position:relative;text-decoration:none;}
        .notif-btn:hover{color:var(--gold);border-color:var(--gold-dim);}
        .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:0.52rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:'Space Mono',monospace;}
        /* ════ CONTENT ════ */
        .content{flex:1;padding:1.75rem 2rem;}
        /* ════ CARDS ════ */
        .card,.section-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;overflow:hidden;margin-bottom:1.25rem;}
        .card-header,.section-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);gap:0.75rem;}
        .card-title,.section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        .card-body,.section-body{padding:1.1rem 1.25rem;}
        /* ════ BUTTONS ════ */
        .btn-primary{background:var(--gold);border:none;border-radius:3px;color:var(--bg);font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.6rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:background 0.15s;}
        .btn-primary:hover{background:var(--gold-mid);color:var(--bg);}
        .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:color 0.12s,border-color 0.12s;}
        .btn-outline:hover{color:var(--gold);border-color:var(--gold-dim);}
        .btn-danger{background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.35);border-radius:3px;color:#f87171;font-family:'Space Mono',monospace;font-size:0.68rem;padding:0.5rem 0.875rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:background 0.12s;}
        .btn-danger:hover{background:rgba(139,26,26,0.25);}
        /* ════ INPUTS ════ */
        .form-control,.mod-input{background:var(--surface2,#111009)!important;border:1px solid var(--border2)!important;border-radius:3px!important;color:var(--text)!important;font-family:'Space Mono',monospace!important;font-size:0.8rem!important;padding:0.6rem 0.875rem!important;outline:none!important;transition:border-color 0.12s!important;}
        .form-control:focus,.mod-input:focus{border-color:var(--gold-dim)!important;box-shadow:0 0 0 3px rgba(212,160,23,0.07)!important;}
        /* ════ ALERTS ════ */
        .alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-left:3px solid #22c55e;border-radius:3px;padding:0.75rem 1rem;color:#86efac;font-size:0.78rem;margin-bottom:1rem;}
        .alert-danger,.alert-error{background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.3);border-left:3px solid #c0392b;border-radius:3px;padding:0.75rem 1rem;color:#f87171;font-size:0.78rem;margin-bottom:1rem;}
        /* ════ SCANLINES ════ */
        body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999;}
* { -webkit-tap-highlight-color: transparent; } body { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

        :root{
            --primary:#d4a017;--primary-dark:#b8860b;
            --bg:#0d0b08;--sidebar-bg:#111009;--card-bg:#1a1610;
            --border:#2e2515;--text:#f0e6d0;--muted:#9a8a6a;
            --wiki-bg:#0f0d0a;--wiki-sidebar:#141209;
            --accent-red:#8b1a1a;
        }
        *{box-sizing:border-box;margin:0;padding:0;}
        body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,sans-serif;display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;}

        /* ── Nexus sidebar ── */
        .sidebar{width:240px;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;}
        .sidebar-logo{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
        .sidebar-logo h1{font-size:1.2rem;font-weight:700;}
        .sidebar-logo span{font-size:0.7rem;color:var(--muted);}
        .sidebar-nav{padding:1rem 0;flex:1;overflow-y:auto;}
        .nav-section{padding:0.5rem 1rem 0.25rem;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
        .nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.9rem;font-weight:500;border-left:3px solid transparent;transition:all 0.15s;}
        .nav-link:hover,.nav-link.active{color:var(--text);background:rgba(212,160,23,0.1);border-left-color:var(--primary);}
        .nav-link i{font-size:1rem;width:20px;}
        .sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0;}
        .btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.4rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;font-family:inherit;}
        .btn-logout:hover{color:#f87171;border-color:#f87171;}
        .avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#0d0b08;flex-shrink:0;}

        /* ── Main layout ── */
        .main{margin-left: 260px;flex:1;display:flex;flex-direction:column;min-height:100vh;}
        .topbar{background:var(--sidebar-bg);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:0.75rem;}
        .topbar h2{font-size:1.1rem;font-weight:700;}

        /* ── Wiki top nav bar ── */
        .wiki-topnav{
            background:var(--sidebar-bg);
            border-bottom:1px solid var(--border);
            display:flex;align-items:center;
            overflow-x:auto;
            flex-shrink:0;
            scrollbar-width:none;
            gap:0;
        }
        .wiki-topnav::-webkit-scrollbar{display:none;}
        .wtn-group{
            display:flex;align-items:center;
            position:relative;
        }
        .wtn-group + .wtn-group::before{
            content:'';display:block;
            width:1px;height:20px;
            background:var(--border);
            flex-shrink:0;
        }
        .wtn-btn{
            background:none;border:none;
            color:var(--muted);
            font-family:inherit;font-size:0.82rem;font-weight:600;
            padding:0.7rem 1.1rem;
            cursor:pointer;white-space:nowrap;
            display:flex;align-items:center;gap:0.4rem;
            border-bottom:2px solid transparent;
            transition:all 0.15s;
            position:relative;
        }
        .wtn-btn:hover{color:var(--text);background:rgba(212,160,23,0.05);}
        .wtn-btn.active{color:var(--primary);border-bottom-color:var(--primary);}
        .wtn-btn i{font-size:0.85rem;}

        /* Dropdown */
        .wtn-group{position:relative;}
        .wtn-dropdown{
            position:absolute;top:100%;left:0;
            background:var(--card-bg);
            border:1px solid var(--border);
            border-radius:0 0 10px 10px;
            box-shadow:0 8px 24px rgba(0,0,0,0.4);
            min-width:200px;z-index:200;
            display:none;
            flex-direction:column;
            overflow:hidden;
        }
        .wtn-group:hover .wtn-dropdown,
        .wtn-group:focus-within .wtn-dropdown{display:flex;}
        .wtn-drop-item{
            display:flex;align-items:center;gap:0.6rem;
            padding:0.6rem 1rem;
            color:var(--muted);font-size:0.82rem;font-weight:500;
            cursor:pointer;transition:all 0.1s;
            border-bottom:1px solid var(--border);
            background:none;border-left:none;border-right:none;border-top:none;
            font-family:inherit;text-align:left;
            width:100%;
        }
        .wtn-drop-item:last-child{border-bottom:none;}
        .wtn-drop-item:hover{color:var(--text);background:rgba(212,160,23,0.08);}
        .wtn-drop-item i{font-size:0.8rem;width:14px;color:var(--primary);flex-shrink:0;}
        .wtn-caret{font-size:0.65rem;margin-left:0.1rem;transition:transform 0.15s;}
        .wtn-group:hover .wtn-caret{transform:rotate(180deg);}

        /* ── Wiki layout ── */
        .wiki-wrap{display:flex;flex:1;min-height:0;}

        /* ── Wiki left nav ── */
        .wiki-nav{
            width:260px;flex-shrink:0;
            background:var(--wiki-sidebar);
            border-right:1px solid var(--border);
            position:sticky;top:0;height:100vh;
            overflow-y:auto;padding:1.5rem 0;
        }
        .wiki-nav::-webkit-scrollbar{width:3px;}
        .wiki-nav::-webkit-scrollbar-thumb{background:var(--border);}
        .wn-section{padding:0.4rem 1.25rem 0.2rem;font-size:0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:var(--primary);margin-top:1rem;}
        .wn-section:first-child{margin-top:0;}
        .wn-link{display:flex;align-items:center;gap:0.6rem;padding:0.45rem 1.25rem;color:var(--muted);text-decoration:none;font-size:0.82rem;font-weight:500;border-left:2px solid transparent;transition:all 0.12s;cursor:pointer;}
        .wn-link:hover,.wn-link.active{color:var(--text);background:rgba(212,160,23,0.07);border-left-color:var(--primary);}
        .wn-link i{font-size:0.85rem;width:16px;flex-shrink:0;}

        /* ── Wiki content ── */
        .wiki-content{flex:1;min-width:0;overflow-y:auto;height:100vh;}
        .wiki-body{max-width:860px;padding:2.5rem 3rem;margin:0 auto;}

        /* ── Wiki hero ── */
        .wiki-hero{
            background:linear-gradient(135deg,rgba(212,160,23,0.08) 0%,rgba(139,26,26,0.06) 60%,transparent 100%);
            border:1px solid rgba(212,160,23,0.2);border-radius:16px;
            padding:2.5rem;margin-bottom:2.5rem;position:relative;overflow:hidden;
        }
        .wiki-hero::before{
            content:'';position:absolute;top:-40px;right:-40px;
            width:200px;height:200px;border-radius:50%;
            background:radial-gradient(circle,rgba(212,160,23,0.12),transparent 70%);
        }
        .wiki-hero-eyebrow{font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.15em;color:var(--primary);margin-bottom:0.75rem;}
        .wiki-hero-title{font-family:'Crimson Pro',Georgia,serif;font-size:2.4rem;font-weight:600;line-height:1.2;margin-bottom:0.75rem;color:var(--text);}
        .wiki-hero-sub{font-size:0.9rem;color:var(--muted);line-height:1.7;max-width:520px;}

        /* ── Article sections ── */
        .wiki-section{
            scroll-margin-top:2rem;
            margin-bottom:3rem;
            padding-bottom:2rem;
            border-bottom:1px solid var(--border);
        }
        .wiki-section:last-child{border-bottom:none;}

        .section-eyebrow{font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.14em;color:var(--primary);margin-bottom:0.5rem;}
        .section-title{font-family:'Crimson Pro',Georgia,serif;font-size:1.8rem;font-weight:600;line-height:1.25;margin-bottom:1rem;color:var(--text);}
        .section-intro{font-size:0.925rem;color:var(--muted);line-height:1.75;margin-bottom:1.5rem;}

        h3.wiki-h3{font-size:1rem;font-weight:700;margin:1.75rem 0 0.6rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
        h3.wiki-h3::before{content:'';display:inline-block;width:3px;height:1em;background:var(--primary);border-radius:2px;flex-shrink:0;}

        p.wiki-p{font-size:0.9rem;line-height:1.75;color:var(--muted);margin-bottom:0.875rem;}
        p.wiki-p:last-child{margin-bottom:0;}

        /* ── Callout boxes ── */
        .callout{border-radius:10px;padding:1rem 1.25rem;margin:1.25rem 0;display:flex;gap:0.875rem;align-items:flex-start;font-size:0.875rem;line-height:1.65;}
        .callout i{font-size:1.1rem;flex-shrink:0;margin-top:1px;}
        .callout-title{font-weight:700;margin-bottom:0.2rem;font-size:0.85rem;}
        .callout-warn{background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);color:#fcd34d;}
        .callout-danger{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25);color:#fca5a5;}
        .callout-info{background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.25);color:#93c5fd;}
        .callout-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);color:#86efac;}
        .callout-gold{background:rgba(212,160,23,0.07);border:1px solid rgba(212,160,23,0.25);color:#fcd34d;}

        /* ── Rule cards ── */
        .rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem;margin:1rem 0;}
        .rule-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;}
        .rule-card-title{font-size:0.82rem;font-weight:700;margin-bottom:0.35rem;display:flex;align-items:center;gap:0.4rem;}
        .rule-card-body{font-size:0.8rem;color:var(--muted);line-height:1.6;}
        .rule-danger .rule-card-title{color:#f87171;}
        .rule-warn .rule-card-title{color:#f59e0b;}
        .rule-info .rule-card-title{color:#93c5fd;}
        .rule-success .rule-card-title{color:#86efac;}

        /* ── Step list ── */
        .step-list{list-style:none;padding:0;margin:0.75rem 0;}
        .step-list li{display:flex;gap:0.875rem;align-items:flex-start;padding:0.65rem 0;border-bottom:1px solid var(--border);font-size:0.875rem;}
        .step-list li:last-child{border-bottom:none;}
        .step-num{width:24px;height:24px;border-radius:50%;background:rgba(212,160,23,0.15);border:1px solid rgba(212,160,23,0.3);color:var(--primary);font-size:0.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
        .step-text{color:var(--muted);line-height:1.55;}
        .step-text strong{color:var(--text);}

        /* ── Feature cards (Nexus modules) ── */
        .feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.875rem;margin:1rem 0;}
        .feature-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;transition:border-color 0.15s;}
        .feature-card:hover{border-color:rgba(212,160,23,0.3);}
        .feature-icon{font-size:1.25rem;margin-bottom:0.5rem;}
        .feature-name{font-size:0.85rem;font-weight:700;margin-bottom:0.25rem;}
        .feature-desc{font-size:0.78rem;color:var(--muted);line-height:1.55;}

        /* ── Severity / action tables ── */
        .wiki-table{width:100%;border-collapse:collapse;font-size:0.82rem;margin:1rem 0;}
        .wiki-table th{padding:0.6rem 0.875rem;text-align:left;background:var(--card-bg);border:1px solid var(--border);font-weight:700;color:var(--text);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em;}
        .wiki-table td{padding:0.6rem 0.875rem;border:1px solid var(--border);color:var(--muted);vertical-align:top;line-height:1.5;}
        .wiki-table tr:hover td{background:rgba(212,160,23,0.02);}
        .sev-pill{border-radius:20px;padding:0.12rem 0.55rem;font-size:0.68rem;font-weight:800;white-space:nowrap;}
        .sev-low{background:rgba(34,197,94,0.15);color:#86efac;}
        .sev-med{background:rgba(245,158,11,0.15);color:#f59e0b;}
        .sev-high{background:rgba(239,68,68,0.15);color:#f87171;}
        .sev-crit{background:rgba(139,0,0,0.3);color:#fca5a5;}
        .sev-zero{background:rgba(99,102,241,0.2);color:#a5b4fc;}

        /* ── Quick ref badge ── */
        .qr-wrap{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0.75rem 0;}
        .qr-badge{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:0.4rem 0.75rem;font-size:0.78rem;font-weight:600;display:inline-flex;align-items:center;gap:0.35rem;}
        .qr-badge i{color:var(--primary);}

        /* ── Inline code ── */
        code.wiki-code{background:rgba(212,160,23,0.1);border:1px solid rgba(212,160,23,0.2);border-radius:4px;padding:0.1rem 0.4rem;font-size:0.8rem;color:#fcd34d;font-family:monospace;}

        /* ── Section divider ── */
        .section-divider{display:flex;align-items:center;gap:1rem;margin:2rem 0 1.5rem;}
        .section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:var(--border);}
        .section-divider span{font-size:0.7rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;white-space:nowrap;}

        /* ── TOC quick jump (top of page) ── */
        .toc-strip{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:2rem;}
        .toc-chip{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:0.3rem 0.75rem;font-size:0.75rem;color:var(--muted);cursor:pointer;text-decoration:none;transition:all 0.12s;}
        .toc-chip:hover{border-color:var(--primary);color:var(--primary);}

        /* ── Search ── */
        .wiki-search-wrap{padding:1rem 1.25rem;}
        .wiki-search{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:0.5rem 0.75rem;font-size:0.82rem;font-family:inherit;outline:none;transition:border-color 0.15s;}
        .wiki-search:focus{border-color:var(--primary);}
        .wiki-search::placeholder{color:var(--muted);}

        /* Mobile */
        @media(max-width:1024px){.wiki-nav{display:none;}.wiki-body{padding:1.5rem;}}
        @media(max-width:768px){
            .wtn-btn{padding:0.6rem 0.75rem;font-size:0.78rem;}
            .wtn-btn span{display:none;}
        }
        @media(max-width:768px){.main{margin-left:0 !important;}.topbar{padding:0.7rem 0.875rem;}.rule-grid{grid-template-columns:1fr;}}

        /* ── Collapsible sidebar ── */
        body.sidebar-collapsed .sidebar { width: 56px !important; overflow: hidden !important; }
        body.sidebar-collapsed .main    { margin-left: 56px !important; }


/* ────────────────────────────────────────────────────────────
   INDEX (Landing)  (index.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --gold:     #d4a017;
            --gold-mid: #a07810;
            --gold-dim: #5a3e08;
            --bg:       #070604;
            --surface:  #0d0b08;
            --border:   #1c1810;
            --border2:  #262010;
            --text:     #ede0c8;
            --muted:    #5c5040;
            --dim:      #2a2218;
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html { height: 100%; }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Space Mono', monospace;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        /* ── Grid ── */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(rgba(212,160,23,0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(212,160,23,0.025) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            z-index: 0;
        }

        /* ── Scanlines ── */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 3px,
                rgba(0,0,0,0.06) 3px,
                rgba(0,0,0,0.06) 4px
            );
            pointer-events: none;
            z-index: 1000;
        }

        /* ════════════════════════════
           TOP BAR
        ════════════════════════════ */
        .topbar {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2.5rem;
            height: 52px;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.92);
            backdrop-filter: blur(8px);
        }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .topbar-logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
        }

        .topbar-logo img {
            height: 26px;
            width: 26px;
            border-radius: 6px;
        }

        .topbar-wordmark {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1rem;
            letter-spacing: 0.08em;
            color: var(--text);
        }

        .topbar-wordmark span { color: var(--gold); }

        .topbar-sep {
            width: 1px;
            height: 18px;
            background: var(--border2);
        }

        .topbar-tag {
            font-size: 0.56rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .status-pill {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.56rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .status-dot {
            width: 5px; height: 5px;
            border-radius: 50%;
            background: #22c55e;
            animation: blink 4s ease-in-out infinite;
        }

        @keyframes blink { 0%,85%,100%{opacity:1} 92%{opacity:0.15} }

        .signin-btn {
            font-family: 'Space Mono', monospace;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #070604;
            background: var(--gold);
            border: none;
            border-radius: 3px;
            padding: 0.45rem 1.1rem;
            text-decoration: none;
            transition: background 0.15s;
            cursor: pointer;
        }
        .signin-btn:hover { background: #c49010; }

        /* ════════════════════════════
           MAIN CONTENT
        ════════════════════════════ */
        .main {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr;
            position: relative;
            z-index: 2;
            padding-top: 52px;
        }

        /* ── Hero ── */
        .hero {
            min-height: calc(100vh - 52px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4rem 2rem;
            position: relative;
        }

        /* Radial glow */
        .hero::before {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 700px; height: 700px;
            background: radial-gradient(ellipse at center,
                rgba(212,160,23,0.04) 0%,
                rgba(212,160,23,0.02) 40%,
                transparent 70%
            );
            pointer-events: none;
        }

        .hero-inner {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 6rem;
            max-width: 1100px;
            width: 100%;
            align-items: center;
        }

        /* Left: identity */
        .hero-left {}

        .hero-classification {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            border: 1px solid var(--border2);
            border-radius: 2px;
            padding: 0.3rem 0.75rem;
            font-size: 0.56rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--muted);
            background: var(--surface);
            margin-bottom: 2.5rem;
        }

        .hero-classification::before {
            content: '//';
            color: var(--gold-dim);
            font-weight: 700;
        }

        .hero-wordmark {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: clamp(5rem, 12vw, 9rem);
            letter-spacing: -0.03em;
            line-height: 0.88;
            color: var(--text);
            margin-bottom: 1.5rem;
        }

        .hero-wordmark span { color: var(--gold); }

        .hero-descriptor {
            font-size: 0.7rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--muted);
            line-height: 2;
            margin-bottom: 3rem;
            border-left: 2px solid var(--border2);
            padding-left: 1rem;
        }

        .hero-descriptor strong {
            color: var(--text);
            font-weight: 400;
        }

        .hero-access {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
        }

        .access-btn {
            font-family: 'Space Mono', monospace;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #070604;
            background: var(--gold);
            border: none;
            border-radius: 3px;
            padding: 0.875rem 2rem;
            text-decoration: none;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
            position: relative;
            overflow: hidden;
        }

        .access-btn::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
            transition: left 0.5s;
        }

        .access-btn:hover { background: #c49010; }
        .access-btn:hover::before { left: 100%; }
        .access-btn:active { transform: scale(0.99); }

        .access-note {
            font-size: 0.58rem;
            letter-spacing: 0.1em;
            color: var(--muted);
            line-height: 1.8;
        }

        .access-note strong {
            display: block;
            color: var(--dim);
            font-weight: 700;
        }

        /* Right: data panel */
        .hero-panel {
            border: 1px solid var(--border2);
            border-radius: 4px;
            background: var(--surface);
            overflow: hidden;
        }

        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1.25rem;
            border-bottom: 1px solid var(--border);
            background: rgba(0,0,0,0.3);
        }

        .panel-title {
            font-size: 0.58rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .panel-live {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.54rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #22c55e;
        }

        .panel-live-dot {
            width: 4px; height: 4px;
            border-radius: 50%;
            background: #22c55e;
            animation: blink 2s ease-in-out infinite;
        }

        .panel-rows {
            display: flex;
            flex-direction: column;
        }

        .panel-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            transition: background 0.15s;
        }

        .panel-row:last-child { border-bottom: none; }
        .panel-row:hover { background: rgba(212,160,23,0.03); }

        .panel-row-left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .panel-row-icon {
            width: 28px; height: 28px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            flex-shrink: 0;
        }

        .panel-row-name {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: var(--text);
            margin-bottom: 0.1rem;
        }

        .panel-row-desc {
            font-size: 0.58rem;
            letter-spacing: 0.04em;
            color: var(--muted);
        }

        .panel-row-badge {
            font-size: 0.52rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            padding: 0.15rem 0.5rem;
            border-radius: 2px;
            flex-shrink: 0;
        }

        .panel-footer {
            padding: 0.75rem 1.25rem;
            background: rgba(0,0,0,0.2);
            border-top: 1px solid var(--border);
            font-size: 0.56rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
            text-align: center;
        }

        /* ════════════════════════════
           BOTTOM BAR
        ════════════════════════════ */
        .bottombar {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2.5rem;
            height: 40px;
            border-top: 1px solid var(--border);
            background: rgba(7,6,4,0.95);
            font-size: 0.52rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .bottombar-right { color: var(--gold-dim); }

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

        .hero-classification { animation: fadeUp 0.5s ease both 0.15s; opacity: 0; }
        .hero-wordmark        { animation: fadeUp 0.6s ease both 0.25s; opacity: 0; }
        .hero-descriptor      { animation: fadeUp 0.5s ease both 0.4s;  opacity: 0; }
        .hero-access          { animation: fadeUp 0.5s ease both 0.55s; opacity: 0; }
        .hero-panel           { animation: fadeUp 0.6s ease both 0.3s;  opacity: 0; }

        /* ════════════════════════════
           MOBILE
        ════════════════════════════ */
        @media (max-width: 900px) {
            .topbar { padding: 0 1.25rem; }
            .topbar-tag, .status-pill { display: none; }
            .hero { padding: 2.5rem 1.25rem 5rem; min-height: calc(100vh - 52px); }
            .hero-inner {
                grid-template-columns: 1fr;
                gap: 3rem;
            }
            .hero-wordmark { font-size: clamp(4rem, 16vw, 7rem); }
            .hero-panel { display: none; }
            .bottombar { padding: 0 1.25rem; }
        }


/* ────────────────────────────────────────────────────────────
   TEST DASHBOARD  (testdashboard.php)
   ──────────────────────────────────────────────────────────── */
:root {
            --gold:     #d4a017;
            --gold-mid: #a07810;
            --gold-dim: #5a3e08;
            --bg:       #070604;
            --surface:  #0d0b08;
            --surface2: #111009;
            --border:   #1c1810;
            --border2:  #252010;
            --text:     #ede0c8;
            --muted:    #5c5040;
            --dim:      #2a2218;
            --red:      #8b1a1a;
            --green:    #22c55e;
            --blue:     #3b82f6;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { height: 100%; }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Space Mono', monospace;
            display: flex;
            overflow: hidden;
        }

        /* Scanlines */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px);
            pointer-events: none; z-index: 999;
        }

        /* ════════════════════════════
           SIDEBAR
        ════════════════════════════ */
        .sidebar {
            width: 260px;
            height: 100vh;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            position: fixed;
            top: 0; left: 0;
            z-index: 200;
            transition: width 0.2s ease;
        }

        .sidebar-head {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .sidebar-icon {
            width: 36px; height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
            overflow: hidden;
        }

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

        .sidebar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 0.06em;
            color: var(--text);
            white-space: nowrap;
        }

        .sidebar-brand span { color: var(--gold); }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem 0;
            scrollbar-width: none;
        }
        .sidebar-nav::-webkit-scrollbar { display: none; }

        .nav-section-label {
            font-size: 0.52rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 1rem 1.5rem 0.4rem;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.04em;
            color: var(--muted);
            text-decoration: none;
            transition: color 0.12s, background 0.12s;
            white-space: nowrap;
            border-left: 2px solid transparent;
        }

        .nav-item:hover { color: var(--text); background: rgba(212,160,23,0.04); }

        .nav-item.active {
            color: var(--gold);
            background: rgba(212,160,23,0.06);
            border-left-color: var(--gold);
        }

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

        .sidebar-footer {
            padding: 1.1rem 1.5rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .user-row {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }

        .user-avatar {
            width: 34px; height: 34px;
            border-radius: 7px;
            background: var(--gold-mid);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
        }

        .user-info { flex: 1; min-width: 0; }

        .user-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-role {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .user-status-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--green);
            flex-shrink: 0;
            animation: blink 4s ease-in-out infinite;
        }

        @keyframes blink { 0%,85%,100%{opacity:1} 92%{opacity:0.2} }

        /* ════════════════════════════
           MAIN AREA
        ════════════════════════════ */
        .main {
            margin-left: 260px;
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        /* ── Top bar ── */
        .topbar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            background: rgba(7,6,4,0.95);
            flex-shrink: 0;
            gap: 1rem;
        }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-width: 0;
        }

        .topbar-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .topbar-btn {
            width: 34px; height: 34px;
            border-radius: 6px;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            text-decoration: none;
            transition: color 0.12s, border-color 0.12s;
            position: relative;
        }
        .topbar-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

        .topbar-badge {
            position: absolute;
            top: -4px; right: -4px;
            min-width: 14px; height: 14px;
            border-radius: 7px;
            background: var(--gold);
            color: var(--bg);
            font-size: 0.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 2px;
        }

        .welcome-tag {
            font-size: 0.65rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ── Content ── */
        .content {
            flex: 1;
            overflow-y: auto;
            padding: 1.75rem 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        /* ── Pinned announcement ── */
        .ann-banner {
            display: flex;
            align-items: flex-start;
            gap: 0.875rem;
            background: rgba(212,160,23,0.05);
            border: 1px solid rgba(212,160,23,0.18);
            border-left: 3px solid var(--gold);
            border-radius: 4px;
            padding: 0.75rem 1rem;
        }

        .ann-banner-icon { color: var(--gold); font-size: 0.9rem; margin-top: 1px; flex-shrink: 0; }

        .ann-banner-text { flex: 1; min-width: 0; }

        .ann-banner-title {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: 0.02em;
            margin-bottom: 0.15rem;
        }

        .ann-banner-sub {
            font-size: 0.62rem;
            color: var(--muted);
            letter-spacing: 0.04em;
        }

        .ann-banner-close {
            background: none; border: none;
            color: var(--muted); cursor: pointer; font-size: 0.75rem;
            padding: 0; flex-shrink: 0;
            transition: color 0.12s;
        }
        .ann-banner-close:hover { color: var(--text); }

        /* ── Stat row ── */
        .stat-row {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
        }

        .stat-card {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            padding: 1.1rem 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            text-decoration: none;
            transition: border-color 0.15s, background 0.15s;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(212,160,23,0.2), transparent);
            opacity: 0;
            transition: opacity 0.2s;
        }

        .stat-card:hover { border-color: var(--border2); background: var(--surface2); }
        .stat-card:hover::before { opacity: 1; }
        .stat-card.warn { border-color: rgba(245,158,11,0.3); }
        .stat-card.critical { border-color: rgba(239,68,68,0.3); }

        .stat-label {
            font-size: 0.6rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .stat-value {
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            font-size: 2rem;
            color: var(--text);
            line-height: 1;
        }

        .stat-value.warn { color: #f59e0b; }
        .stat-value.crit { color: #f87171; }

        .stat-sub {
            font-size: 0.62rem;
            letter-spacing: 0.1em;
            color: var(--muted);
        }

        .stat-sub.warn { color: #f59e0b; }
        .stat-sub.crit { color: #f87171; }

        /* Active Now mini list */
        .active-list { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.25rem; }

        .active-member {
            display: flex; align-items: center; gap: 0.35rem;
            font-size: 0.6rem; color: var(--muted);
        }

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

        /* ── Widget grid ── */
        .widget-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            flex: 1;
            min-height: 0;
        }

        /* ── Panel (widget container) ── */
        .panel {
            background: var(--surface);
            border: 1px solid var(--border2);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
        }

        .panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
            gap: 0.5rem;
        }

        .panel-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .panel-title i { font-size: 0.82rem; }

        .panel-link {
            font-size: 0.62rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--gold-dim);
            text-decoration: none;
            transition: color 0.12s;
            white-space: nowrap;
        }
        .panel-link:hover { color: var(--gold); }

        .panel-body {
            flex: 1;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--border2) transparent;
        }

        /* ── Task items ── */
        .task-row {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            transition: background 0.12s;
        }
        .task-row:last-child { border-bottom: none; }
        .task-row:hover { background: rgba(212,160,23,0.03); }

        .priority-pip {
            width: 3px;
            height: 34px;
            border-radius: 2px;
            flex-shrink: 0;
            margin-top: 3px;
        }
        .p-critical { background: #f87171; }
        .p-high     { background: #f59e0b; }
        .p-medium   { background: var(--gold); }
        .p-low      { background: #60a5fa; }

        .task-name {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text);
            line-height: 1.4;
            letter-spacing: 0.01em;
            margin-bottom: 0.2rem;
        }

        .task-meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.65rem;
            color: var(--muted);
            letter-spacing: 0.06em;
        }

        .task-proj {
            background: rgba(212,160,23,0.08);
            border: 1px solid rgba(212,160,23,0.12);
            border-radius: 2px;
            padding: 0.05rem 0.35rem;
            color: var(--gold-mid);
            font-size: 0.54rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .task-due {
            color: var(--muted);
            font-size: 0.58rem;
        }
        .task-due.overdue { color: #f87171; }

        /* ── Empty state ── */
        .empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            padding: 2rem;
            color: var(--dim);
            font-size: 0.62rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-align: center;
        }
        .empty i { font-size: 1.4rem; color: var(--border2); }

        /* ── Mod feed ── */
        .mod-row {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            transition: background 0.12s;
        }
        .mod-row:last-child { border-bottom: none; }
        .mod-row:hover { background: rgba(212,160,23,0.02); }

        .mod-name {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: 0.01em;
            margin-bottom: 0.12rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mod-meta {
            font-size: 0.65rem;
            color: var(--muted);
            letter-spacing: 0.04em;
        }

        /* ── Notification items ── */
        .notif-row {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
            text-decoration: none;
            color: inherit;
            transition: background 0.12s;
        }
        .notif-row:last-child { border-bottom: none; }
        .notif-row:hover { background: rgba(212,160,23,0.03); }

        .notif-row i { font-size: 0.8rem; margin-top: 2px; flex-shrink: 0; }

        .notif-msg {
            font-size: 0.8rem;
            color: var(--text);
            line-height: 1.5;
            letter-spacing: 0.01em;
            margin-bottom: 0.15rem;
        }
        .notif-msg.read { color: var(--muted); font-weight: 400; }

        .notif-time {
            font-size: 0.62rem;
            color: var(--muted);
            letter-spacing: 0.08em;
        }

        /* ── Chat panel ── */
        .chat-panel {
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 1rem 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            scrollbar-width: thin;
            scrollbar-color: var(--border2) transparent;
        }

        .chat-msg {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .chat-msg.mine { flex-direction: row-reverse; }

        .chat-avatar {
            width: 30px; height: 30px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.62rem;
            font-weight: 700;
            color: var(--bg);
            flex-shrink: 0;
            font-family: 'Syne', sans-serif;
        }

        .chat-msg-inner { max-width: 80%; }

        .chat-msg-name {
            font-size: 0.54rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 0.2rem;
        }

        .chat-mine .chat-msg-name { text-align: right; }

        .chat-bubble {
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 2px 6px 6px 6px;
            padding: 0.55rem 0.875rem;
            font-size: 0.8rem;
            line-height: 1.6;
            color: var(--text);
            word-break: break-word;
        }

        .chat-msg.mine .chat-bubble {
            background: rgba(212,160,23,0.08);
            border-color: rgba(212,160,23,0.18);
            border-radius: 6px 2px 6px 6px;
        }

        .chat-empty {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            color: var(--dim);
            font-size: 0.62rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }
        .chat-empty i { font-size: 1.4rem; color: var(--border2); }

        .chat-input-area {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.875rem 1.25rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .chat-input {
            flex: 1;
            background: var(--surface2);
            border: 1px solid var(--border2);
            border-radius: 3px;
            color: var(--text);
            font-family: 'Space Mono', monospace;
            font-size: 0.78rem;
            padding: 0.6rem 0.875rem;
            outline: none;
            transition: border-color 0.12s;
        }
        .chat-input::placeholder { color: var(--dim); }
        .chat-input:focus { border-color: var(--gold-dim); }

        .chat-send {
            width: 36px; height: 36px;
            border-radius: 3px;
            background: rgba(212,160,23,0.12);
            border: 1px solid var(--gold-dim);
            color: var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.85rem;
            transition: background 0.12s;
            flex-shrink: 0;
        }
        .chat-send:hover { background: rgba(212,160,23,0.22); }
        .chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

        /* ── Event items ── */
        .event-row {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--border);
        }
        .event-row:last-child { border-bottom: none; }

        .event-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }

        .event-name {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: 0.01em;
            margin-bottom: 0.15rem;
        }

        .event-day {
            font-size: 0.58rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--muted);
        }
        .event-day.today { color: #f59e0b; }

        /* ── Scrollbar ── */
        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

        /* ── Mobile overlay ── */
        .mobile-overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 150;
        }

        @media (max-width: 900px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.2s ease;
            }
            .sidebar.open {
                transform: translateX(0);
            }
            .main { margin-left: 0; }
            .stat-row { grid-template-columns: repeat(3, 1fr); }
            .widget-grid { grid-template-columns: 1fr 1fr; }
            .mobile-overlay.show { display: block; }
            .mobile-menu { display: flex !important; }
        }

        @media (max-width: 600px) {
            .stat-row { grid-template-columns: repeat(2, 1fr); }
            .widget-grid { grid-template-columns: 1fr; }
        }


/* ============================================================
   14. MOBILE & PWA  (mobile.css)
   ============================================================ */

/* ============================================
   NEXUS — Mobile Responsiveness v2
   Fixes Android touch/interaction issues
   ============================================ */

/* ── Google Fonts — Inter (clean, readable, bold-friendly) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Global font override — applies to every page that loads mobile.css ── */
body, input, textarea, select, button {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ══════════════════════════════════════════════
   GLOBAL PINNED ANNOUNCEMENT BANNER
   ══════════════════════════════════════════════ */
#globalAnnBanner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(90deg, rgba(212,160,23,0.12), rgba(212,160,23,0.05));
    border-bottom: 1px solid rgba(212,160,23,0.3);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    animation: bannerSlideDown 0.3s ease;
}
@keyframes bannerSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#globalAnnBanner .ann-icon {
    color: var(--primary, #d4a017);
    font-size: 1rem;
    flex-shrink: 0;
}
#globalAnnBanner .ann-text {
    flex: 1;
    min-width: 0;
}
#globalAnnBanner .ann-text strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text, #f0e6d0);
    display: block;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#globalAnnBanner .ann-text span {
    font-size: 0.77rem;
    color: #c8b080;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
#globalAnnBanner .ann-view {
    font-size: 0.75rem;
    color: var(--primary, #d4a017);
    text-decoration: none;
    border: 1px solid rgba(212,160,23,0.35);
    border-radius: 6px;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
}
#globalAnnBanner .ann-view:hover { background: rgba(212,160,23,0.12); }
#globalAnnBanner .ann-dismiss {
    background: none;
    border: none;
    color: #9a8a6a;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s;
}
#globalAnnBanner .ann-dismiss:hover { color: var(--text, #f0e6d0); }
@media(max-width: 768px) {
    #globalAnnBanner { padding: 0.6rem 0.875rem; gap: 0.6rem; }
    #globalAnnBanner .ann-text span { display: none; }
}

/* ── Sidebar nav scroll — applies to all pages ── */
.sidebar {
    height: 100vh !important;
    min-height: unset !important;
    overflow: hidden;
}
.sidebar-nav {
    overflow-y: auto !important;
    overflow-x: hidden;
    /* thin custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* Base text — slightly larger and heavier for readability */
body {
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.6 !important;
}

/* Nav links — bolder */
.nav-link {
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    letter-spacing: -0.01em;
}

/* Nav section labels */
.nav-section {
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* Topbar headings */
.topbar h2 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* Card titles */
.card-title, .section-title {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* Stat values */
.stat-value {
    font-weight: 800 !important;
    letter-spacing: -0.03em;
}

/* Muted text — nudge up to improve contrast on dark background */
:root {
    --muted: #b0a080 !important;
}

/* Body text */
p, .notif-item, .task-title, .member-name, .msg-text,
.ann-content, .tl-desc, .change-list li {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.65;
}

/* Labels and metadata — slightly bolder */
.task-due, .msg-time, .notif-time, .stat-label,
.channel-item, .dm-name, .badge-card-meta {
    font-weight: 500 !important;
}

/* Buttons — bolder text */
.btn-primary, .btn-outline, .filter-btn, .btn-sm {
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* Form inputs */
.form-control, .form-select, .chat-input, .dash-chat-input {
    font-size: 0.9rem !important;
    font-weight: 400;
}

/* Author names in chat */
.msg-author {
    font-weight: 700 !important;
}

/* Project card names */
.project-name, .project-card .project-name {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* Table headers */
th, .admin-table th {
    font-weight: 700 !important;
    letter-spacing: 0.04em;
}

/* Badge pills */
.badge-pill, .tag, .priority-normal,
.priority-important, .priority-critical {
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════
   COLLAPSIBLE SIDEBAR (desktop)
   ══════════════════════════════════════════════ */

.sidebar-toggle-btn {
    background: none;
    border: 1px solid var(--border, #2e2515);
    color: var(--muted, #9a8a6a);
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Always visible on desktop, hidden on mobile (use hamburger instead) */
}
.sidebar-toggle-btn:hover {
    color: var(--text, #f0e6d0);
    border-color: var(--primary, #d4a017);
}
@media(max-width: 768px) {
    .sidebar-toggle-btn { display: none !important; }
}

/* Sidebar smooth transition */
.sidebar {
    transition: width 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.main {
    transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Collapsed state */
body.sidebar-collapsed .sidebar {
    width: 56px !important;
    overflow: hidden !important;
}
body.sidebar-collapsed .main {
    margin-left: 56px !important;
}

/* Hide text elements when collapsed */
body.sidebar-collapsed .sidebar-logo img,
body.sidebar-collapsed .sidebar-logo h1,
body.sidebar-collapsed .sidebar-logo span { display: none !important; }
body.sidebar-collapsed .sidebar-logo {
    padding: 1rem 0 !important;
    align-items: center !important;
    justify-content: center !important;
}
body.sidebar-collapsed .sidebar-logo::after {
    content: '⚡';
    font-size: 1.3rem;
}
body.sidebar-collapsed .nav-section { display: none !important; }
body.sidebar-collapsed .nav-link {
    padding: 0.7rem 0 !important;
    justify-content: center !important;
    border-left: none !important;
    position: relative;
}
/* Hide link text, keep icon */
body.sidebar-collapsed .nav-link i { font-size: 1.15rem !important; width: auto !important; }

/* Tooltip on hover when collapsed */
body.sidebar-collapsed .nav-link[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--card-bg, #1a1610);
    border: 1px solid var(--border, #2e2515);
    color: var(--text, #f0e6d0);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 300;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
body.sidebar-collapsed .nav-link[data-label]:hover::after { opacity: 1; }

/* Footer when collapsed */
body.sidebar-collapsed .sidebar-footer {
    padding: 0.75rem 0 !important;
    align-items: center !important;
}
body.sidebar-collapsed #myStatusLabel,
body.sidebar-collapsed #myStatusMsg,
body.sidebar-collapsed .user-name,
body.sidebar-collapsed .btn-logout { display: none !important; }
body.sidebar-collapsed .sidebar-footer .avatar { margin: 0 auto; }
body.sidebar-collapsed .sidebar-footer > div:first-child { justify-content: center !important; }

/* ── Hamburger button ── */
.mobile-menu-btn {
    display: none;
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}
.mobile-menu-btn:hover,
.mobile-menu-btn:active {
    color: var(--text);
    border-color: var(--primary);
    background: rgba(212,160,23,0.1);
}

/* ── Overlay ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 150;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.sidebar-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

/* ══════════════════════════════════════════
   MOBILE (max-width: 768px)
══════════════════════════════════════════ */
@media (max-width: 768px) {

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-overlay {
        display: block;
    }

    .sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 200 !important;
        width: 270px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        overflow-y: auto;
    }
    .sidebar.open {
        transform: translateX(0) !important;
    }

    .main {
        margin-left: 0 !important;
        width: 100% !important;
        min-height: 100dvh;
        min-height: calc(100vh - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Ensure content isn't clipped by bottom nav bar */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .chat-wrap {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .topbar,
    .chat-topbar {
        padding: 0.7rem 0.875rem !important;
        gap: 0.6rem;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .topbar h2 {
        font-size: 0.95rem !important;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content {
        padding: 0.875rem !important;
    }

    /* Better tap targets for all interactive elements */
    .nav-link,
    .btn-primary,
    .btn-outline,
    .btn-logout,
    .filter-btn,
    .channel-item,
    .notif-btn,
    a[href],
    button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .btn-primary,
    .btn-outline,
    .btn-logout {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .row.g-3 .col-6    { flex: 0 0 50%; max-width: 50%; }
    .row.g-3 .col-md-3 { flex: 0 0 50%; max-width: 50%; }
    .stat-card  { padding: 0.875rem !important; }
    .stat-value { font-size: 1.4rem !important; }

    .col-md-6, .col-lg-4 { flex: 0 0 100%; max-width: 100%; }

    .task-row { flex-wrap: wrap; gap: 0.5rem !important; }
    .task-sub { flex-wrap: wrap; }

    .filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-btn { white-space: nowrap; flex-shrink: 0; }

    .stat-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem !important;
    }

    .notif-item    { padding: 0.875rem 1rem !important; }
    .notif-actions { flex-direction: column; }

    .login-card { margin: 1rem; padding: 1.75rem !important; }

    .modal-dialog { margin: 0.5rem !important; }
    .modal-body   { padding: 1.25rem !important; }

    .topbar .d-flex.gap-2 { gap: 0.4rem !important; }

    /* Board */
    .board-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
    }
    .board { flex-wrap: nowrap !important; min-width: max-content; }
    .kanban-col { min-width: 285px !important; max-width: 285px !important; }
    .breadcrumb-nav  { display: none !important; }
    .board-actions   { flex-wrap: wrap; gap: 0.4rem !important; }

    /* Calendar */
    .calendar-grid { font-size: 0.75rem; }
    .calendar-day  { min-height: 60px !important; padding: 0.25rem !important; }
    .cal-event     { font-size: 0.65rem !important; padding: 0.1rem 0.25rem !important; }

    /* Admin */
    .admin-grid { grid-template-columns: 1fr !important; }

    /* Chat: channel list → horizontal pill strip */
    .channel-list {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0.5rem 0.75rem !important;
        gap: 0.4rem;
        flex-shrink: 0;
        align-items: center;
    }
    .channel-list::-webkit-scrollbar { display: none; }
    .channel-list-header { display: none !important; }
    .channel-item {
        border-left: none !important;
        border-radius: 20px !important;
        padding: 0.35rem 0.875rem !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
        flex-shrink: 0;
        border: 1px solid var(--border) !important;
        background: var(--bg) !important;
        min-height: 36px;
        display: flex !important;
        align-items: center;
    }
    .channel-item.active {
        background: rgba(212,160,23,0.15) !important;
        border-color: var(--primary) !important;
        color: var(--primary) !important;
    }

    /* Chat layout */
    .chat-wrap {
        flex-direction: column !important;
        height: 100dvh !important;
        overflow: hidden;
    }
    .chat-main {
        flex: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
    }
    .messages-wrap {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0.875rem !important;
    }
    .chat-input-wrap {
        padding: 0.6rem 0.75rem !important;
        flex-shrink: 0 !important;
    }
    .chat-input-hint { display: none !important; }
    .send-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
        min-width: 42px;
    }

    /* Utilities */
    .table-responsive-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mobile-stack { flex-direction: column !important; }
    .mobile-full  { width: 100% !important; }
    .mobile-hide  { display: none !important; }
    .mobile-only  { display: block !important; }
}

/* ── Tablet ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar { width: 200px !important; }
    .main    { margin-left: 200px !important; }
    .content { padding: 1.5rem !important; }
    .topbar  { padding: 0.875rem 1.5rem !important; }
    .col-lg-4 { flex: 0 0 50%; max-width: 50%; }
}

/* ── Desktop: never show mobile elements ── */
@media (min-width: 769px) {
    .sidebar-overlay { display: none !important; }
    .mobile-menu-btn { display: none !important; }
}

.mobile-only { display: none; }

/* ══════════════════════════════════════════════════════════════
   PWA STANDALONE MODE — Safe area insets for notched devices
   ══════════════════════════════════════════════════════════════ */

/* When running as installed PWA */
@media (display-mode: standalone) {
    /* Account for iPhone notch / Dynamic Island at top */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Sidebar needs top inset too */
    .sidebar {
        padding-top: env(safe-area-inset-top);
        height: calc(100vh - env(safe-area-inset-top));
    }

    /* Topbar sits flush under the status bar */
    .topbar {
        padding-top: calc(0.875rem + env(safe-area-inset-top));
    }

    /* Chat input stays above iPhone home indicator */
    .chat-input-wrap,
    .dash-chat-input-wrap {
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
    }

    /* Hide browser-only UI hints */
    .install-prompt { display: none !important; }
}

/* iOS PWA — prevent rubber-band scrolling on the body */
@supports (-webkit-touch-callout: none) {
    body { overscroll-behavior: none; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE & PWA — Fix bottom cut-off on Android and iOS
   Handles: nav bar, gesture area, home indicator
   ══════════════════════════════════════════════════════════════ */

/* Use dynamic viewport height — mobile only to avoid breaking desktop chat */
@media (max-width: 768px) {
    @supports (height: 100dvh) {
        .chat-wrap,
        .chat-main,
        .channel-list {
            height: 100dvh !important;
            min-height: 100dvh !important;
        }
    }
}

/* Bottom interactive elements — always above nav/gesture bar */
.chat-input-wrap,
.dash-chat-input-wrap {
    padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px)) !important;
}

.sidebar-footer {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* Content pages — enough bottom padding so last card isn't clipped */
@media (max-width: 768px) {
    .main {
        min-height: 100dvh;
        min-height: calc(100vh - env(safe-area-inset-top, 0px));
    }

    .content {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Modal footers stay above nav bar */
    .modal-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Tables and cards at bottom of page */
    .section-card:last-child,
    .card:last-child {
        margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* PWA standalone — stricter inset enforcement */
@media (display-mode: standalone) {
    body {
        padding-top:    env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left:   env(safe-area-inset-left, 0px);
        padding-right:  env(safe-area-inset-right, 0px);
    }

    .topbar,
    .chat-topbar {
        padding-top: calc(0.875rem + env(safe-area-inset-top, 0px)) !important;
    }

    .sidebar {
        padding-top:    env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        height: calc(100vh  - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }
}