/* Import Inter font from Google Fonts.
   MUST stay the first statement in this file — CSS ignores @import once any
   rule has been declared, so putting :root above it silently kills the font. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*
    ── Portal palette ────────────────────────────────────────────────────────
    Roblox Creator Hub greys, consolidated from the original slate/navy theme.

    The point of this block is that there is ONE step per role. The file
    previously carried 82 distinct greys — eleven of them within a 10-point
    luminance band — which is why surfaces never stacked into a readable
    hierarchy.
    Everything now snaps to the scale below.

    Surfaces stack darkest → lightest: page < sidebar < card < elevated < inset.
    Every text tier clears WCAG AA (4.5:1) on --bg-card.

    Status colours are deliberately NOT Roblox-branded: they encode state, and
    each has a 4-step ramp (surface / base / light / pale) so a red used as a
    button background and a red used as label text stay distinguishable.

    Existing rules still contain literal hexes. Use these variables for
    anything new rather than introducing another shade.
*/
:root {
    /* surfaces */
    --bg-page:       #0f0f0f;
    --bg-sidebar:    #191919;
    --bg-card:       #232323;
    --bg-elevated:   #2b2b2b;
    --bg-inset:      #333333;

    /* lines */
    --border:        #3b3b3b;
    --border-strong: #4a4a4a;
    --divider:       #6b6b6b;

    /* text — all AA on --bg-card */
    --text:          #ffffff;   /* 15.7:1 */
    --text-strong:   #ebebeb;   /* 13.2:1 */
    --text-body:     #d4d4d4;   /* 10.6:1 */
    --text-muted:    #bebebe;   /*  8.5:1 */
    --text-dim:      #8a8a8a;   /*  4.6:1 — smallest that still passes */

    /* brand */
    --blue:          #0071ff;
    --blue-hover:    #0053cc;
    --blue-light:    #4da3ff;   /* 6.0:1 on card — safe for text */
    --blue-pale:     #99ccff;

    /* status: surface / base / light / pale */
    --danger-dark:   #dc2626;
    --danger:        #ef4444;
    --danger-light:  #f87171;
    --danger-pale:   #fca5a5;

    --success-dark:  #065f46;
    --success:       #10b981;
    --success-light: #34d399;
    --success-pale:  #86efac;

    --warning-dark:  #92400e;
    --warning:       #f59e0b;
    --warning-light: #fbbf24;
    --warning-pale:  #fde68a;

    --violet-dark:   #7c3aed;
    --violet:        #8b5cf6;
    --violet-light:  #a78bfa;
    --violet-pale:   #ddd6fe;
}

body {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #0f0f0f; /* Dark background similar to Roblox Creator Hub */
    color: #bebebe; /* Light gray text */
}

/* Sidebar */
.sidebar {
    width: 280px;
    background: #0c0c0c; /* near-black, matches Roblox Creator Hub */
    color: #bebebe;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1e1e1e;
    box-shadow: none;
}

.sidebar-header {
    padding: 22px 20px;
    border-bottom: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.sidebar-userbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #1a1a1a;
}

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

#sidebar-greeting {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.sidebar-role {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
}

.sidebar-role-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 7px rgba(139, 92, 246, 0.75);
    flex-shrink: 0;
}

#sidebar-role {
    color: #a78bfa;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
}

.sidebar-collapse-btn {
    background: transparent;
    border: none;
    color: #8a8a8a;
    cursor: pointer;
    padding: 4px;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    align-self: flex-start;
}

.sidebar-collapse-btn:hover {
    color: #d4d4d4;
    background: rgba(165, 165, 165, 0.1);
}

/* Collapsed (icon-rail) sidebar */
.sidebar {
    transition: width 0.18s ease;
}
.sidebar.collapsed {
    width: 76px;
}
.sidebar.collapsed .sidebar-header {
    padding: 14px 8px;
}
.sidebar.collapsed .sidebar-userbar {
    justify-content: center;
    padding: 12px 0;
}
.sidebar.collapsed .sidebar-user {
    display: none;
}
.sidebar.collapsed .sidebar-nav ul li > span {
    display: none;
}
.sidebar.collapsed .sidebar-nav ul li {
    justify-content: center;
    padding: 11px 0;
}
.sidebar.collapsed .sidebar-nav ul li i {
    margin-right: 0;
}
.sidebar.collapsed .sidebar-nav ul li.nav-section-header {
    justify-content: center;
    margin: 14px 18px 4px;
}
.sidebar.collapsed .sidebar-nav ul li.nav-section-header::after {
    flex: 0 0 22px;
}
.sidebar.collapsed .nav-chevron {
    display: none !important;
}
.sidebar.collapsed .sidebar-footer button span {
    display: none;
}
.sidebar.collapsed .sidebar-footer button i {
    margin-right: 0;
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    overflow-y: auto;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav ul li {
    display: none; /* Hidden by default, shown when permissions are loaded */
    align-items: center;
    padding: 9px 12px;
    cursor: pointer;
    margin: 1px 10px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: background-color 0.12s ease, color 0.12s ease;
    color: #c2c2c2;
    position: relative;
}

/* Stretched-link overlay: each navigable <li> contains an invisible <a>
   pinned over the whole row so right-click → "Open in new tab" works on
   the entire item, not just the text. The <i> and <span> stay siblings
   of the <a> in the <li>, so all the existing `.sidebar-nav ul li i/span`
   styling continues to work unchanged. z-index keeps the anchor above the
   icon/text for hit-testing without occluding them visually (it has no
   content of its own). */
.sidebar-nav ul li > a.nav-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    /* Belt-and-braces: an empty anchor with no display rule sometimes
       collapses on certain browsers; explicit block keeps it predictable. */
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    color: transparent;
}

.sidebar-nav ul li > a.nav-link:focus-visible {
    outline: 2px solid #4da3ff;
    outline-offset: -2px;
}

.sidebar-nav ul li[data-permission="always"] {
    display: flex; /* Always show my-profile */
}

/* Section headers */
/* Category headers are clickable accordion rows (Toast-style): a leading icon,
   the label, and a chevron that rotates when the section is open. Clicking one
   expands its sub-items and collapses the others, so only one group is open at
   a time and the rail stays quiet. */
.sidebar-nav ul li.nav-section-header {
    display: none; /* shown (display:flex) via JS when the group has visible items */
    align-items: center;
    gap: 0;
    font-weight: 700;
    color: #e0e0e0;
    background: transparent;
    margin: 5px 10px;
    padding: 14px 12px;
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
    font-size: 1rem;
    border: none;
    border-radius: 9px;
}

/* Beefier leading icon on the parent rows so they read as top-level. */
.sidebar-nav ul li.nav-section-header > i:not(.nav-chevron) {
    font-size: 1.05rem;
}

/* Leading category icon (shown); chevron handled separately below. */
.sidebar-nav ul li.nav-section-header > i:not(.nav-chevron) {
    display: inline-block;
}

.sidebar-nav ul li.nav-section-header > span {
    flex: 1 1 auto;
}

.sidebar-nav ul li.nav-section-header .nav-chevron {
    display: inline-block;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    font-size: 0.7rem;
    color: #6e6e6e;
    transition: transform 0.18s ease;
}

.sidebar-nav ul li.nav-section-header.expanded .nav-chevron {
    transform: rotate(180deg);
}

.sidebar-nav ul li.nav-section-header:hover {
    background: #1a1a1a;
    color: #ffffff;
}

.sidebar-nav ul li.nav-section-header.expanded {
    color: #ffffff;
}

/* Sub-menu items */
.nav-sub-item {
    padding-left: 42px !important; /* indent children under the parent label */
    font-size: 0.88rem;
    font-weight: 500;
    display: none !important; /* Force hidden by default */
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    border-left: none;
    border-radius: 8px !important;
}

/* A sub-item shows only when it's permitted (.visible) AND its parent section
   is expanded (.parent-expanded). This is what makes the sidebar an accordion:
   collapsed sections show just their header, not every child at once. */
.nav-sub-item.visible.parent-expanded {
    display: flex !important;
}

/* Count pill on the right of a nav item (assigned, not-completed counts).
   Selector is specific enough to beat `.sidebar-nav ul li span { flex: 1 }`,
   so the pill stays compact instead of stretching. */
.sidebar-nav ul li .nav-count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 11px;
    background: #0071ff;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

.sidebar-nav ul li i {
    width: 20px;
    font-size: 0.95rem;
    margin-right: 12px;
    text-align: center;
    color: #8f8f8f;
    transition: color 0.12s ease;
}

.sidebar-nav ul li span {
    flex: 1;
}

.sidebar-nav ul li:hover {
    background: #1a1a1a;
    color: #ffffff;
    transform: none;
}

.sidebar-nav ul li:hover i {
    color: #d4d4d4;
    transform: none;
}

.sidebar-nav ul li.active {
    background: #232323;
    color: #ffffff;
    border-left: none;
    box-shadow: none;
}

.nav-sub-item.active {
    background: #232323;
}

.sidebar-nav ul li.active i {
    color: #ffffff;
}

.sidebar-footer {
    margin-top: auto;
    padding: 12px 0;
    border-top: 1px solid rgba(165, 165, 165, 0.1);
}

.sidebar-footer li {
    margin: 0 8px;
}

.sidebar-footer {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid rgba(165, 165, 165, 0.08);
}

.sidebar-footer button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: transparent;
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.18s ease;
}

.sidebar-footer button i {
    margin-right: 10px;
    font-size: 1.05rem;
}

.sidebar-footer button:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.5);
    transform: none;
}

/* Custom scrollbar for sidebar */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(165, 165, 165, 0.3);
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(165, 165, 165, 0.5);
}

.main-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #0f0f0f;
}

/* Headings in content sections */
.content-section h2 {
    color: #ffffff; /* White headings */
}

.content-section {
    display: none;
}

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

/* Login Screen */
/* CANONICAL login layout — deliberately boring so it cannot break on mobile:
   a plain scrollable block, box anchored near the top. NO flex centering, NO
   100vh (both are exactly what made the button unreachable on iPhone: 100vh
   exceeds Safari's visible viewport, and flex-centering inside it pushes the
   box under the bottom bar). There is a legacy duplicate #login-screen block
   later in this file — kept EMPTY; don't re-add properties there. */
#login-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0f0f0f 0%, #191919 100%);
    display: block;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

.login-box {
    background: #191919;
    border: 1px solid #2b2b2b;
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    /* Top-anchored with a modest offset: looks normal on desktop, and on
       phones the whole form (incl. 2FA + Login) is always in reach — worst
       case you scroll down, never into a void. */
    margin: clamp(16px, 10vh, 120px) auto 24px;
}

/* Small screens: tighten the chrome so the full form (incl. the 2FA code
   field when it appears) fits without the button hugging the bottom bar. */
@media (max-width: 480px), (max-height: 700px) {
    .login-box { padding: 24px 20px; }
    .login-header img { max-width: 140px !important; margin-bottom: 10px !important; }
    .login-header { margin-bottom: 16px; }
    .login-header p { margin: 5px 0 10px 0; }
    .login-form { gap: 14px; }
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h2 {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 10px 0 5px 0;
}

.login-header p {
    color: #bebebe;
    font-size: 0.9rem;
    margin: 5px 0 25px 0;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #0f0f0f;
    border: 1px solid #2b2b2b;
    border-radius: 10px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.login-input-group:focus-within {
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.1);
}

.login-input-group i {
    margin-right: 12px;
    font-size: 1rem;
    width: 20px;
    text-align: center;
    color: #bebebe;
}

.login-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ebebeb;
    font-size: 1rem;
    outline: none;
    padding: 0;
}

.login-input-group input::placeholder {
    color: #8a8a8a;
}

.remember-me-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #bebebe;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.remember-me-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #4da3ff;
}

.login-btn {
    background: linear-gradient(135deg, #0071ff 0%, #0071ff 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(77, 163, 255, 0.3);
    margin-top: 5px;
}

.login-btn:hover {
    background: linear-gradient(135deg, #0071ff 0%, #0071ff 100%);
    box-shadow: 0 6px 16px rgba(77, 163, 255, 0.4);
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0);
}

.login-error {
    color: #ef4444;
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
    display: none;
    padding: 10px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Filter Section */
.filter-section {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-section label {
    font-weight: 500;
    color: #bebebe;
}

.filter-section input[type="checkbox"] {
    margin-left: 5px;
    accent-color: #4da3ff; /* Muted blue checkbox */
}

.filter-section select,
.filter-section input[type="date"],
.filter-section input[type="text"] {
    padding: 5px;
    background-color: #232323; /* Dark input background */
    border: 1px solid #2b2b2b; /* Subtle gray border */
    color: #bebebe;
    border-radius: 4px;
}

.filter-section select option {
    background-color: #232323;
    color: #bebebe;
}

.filter-section button {
    padding: 5px 12px;
    background-color: #0071ff; /* Muted blue button */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

.filter-section button:disabled {
    background-color: #2b2b2b; /* Darker disabled button */
    cursor: not-allowed;
}

.filter-section button:hover:not(:disabled) {
    background-color: #0071ff; /* Darker muted blue on hover */
}

/* Error Logs Filter Sections - Professional Layout */
.error-logs-filter-section {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.error-logs-filter-section .filter-label {
    font-weight: 600;
    color: #ebebeb;
    font-size: 14px;
    margin-bottom: 4px;
}

.error-logs-search-input {
    padding: 10px 14px;
    background-color: #232323;
    border: 1px solid #2b2b2b;
    color: #bebebe;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Inter', Arial, sans-serif;
    width: 100%;
    max-width: 500px;
    transition: all 0.2s ease;
}

.error-logs-search-input:focus {
    outline: none;
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.1);
}

.error-logs-search-input::placeholder {
    color: #8a8a8a;
}

/* Professional Query Button Section */
.error-logs-query-section {
    margin-top: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

/* Professional Query Button for Error Logs - Black with White Border */
#query-btn.query-button-primary {
    padding: 12px 32px;
    background: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
    letter-spacing: 0.5px;
    font-family: 'Inter', Arial, sans-serif;
}

#query-btn.query-button-primary:hover:not(:disabled) {
    background: #191919;
    border-color: #ffffff;
    transform: translateY(-1px);
}

#query-btn.query-button-primary:active:not(:disabled) {
    transform: translateY(0);
}

#query-btn.query-button-primary:disabled {
    background: #191919;
    border-color: #2b2b2b;
    color: #8a8a8a;
    cursor: not-allowed;
    transform: none;
}

#loading-indicator,
#events-loading-indicator {
    color: #4da3ff; /* Muted blue loading indicator */
    font-weight: 500;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #4da3ff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 5px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.filter-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 70%;
}

/*
    Filter chips. These render 40+ at a time (the Place list on Error Logs), so
    the UNSELECTED state must be quiet — a filled accent on every chip turns the
    whole row into noise and destroys the selected/unselected distinction, which
    is the only thing the control needs to communicate.

    Quiet by default, accent only for the active choice.
*/
.filter-button {
    padding: 8px 16px;
    background-color: #2b2b2b;
    color: #bebebe;
    border: 1px solid #3b3b3b;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filter-button:hover {
    background-color: #333333;
    color: #ebebeb;
    border-color: #4a4a4a;
}

.filter-button.selected {
    background-color: #0071ff !important;
    color: #ffffff !important;
    border-color: #0071ff !important;
}

.filter-button.selected:hover {
    background-color: #0053cc !important;
    border-color: #0053cc !important;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-controls button {
    padding: 5px 10px;
    background-color: #0071ff; /* Muted blue button */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

.pagination-controls button:disabled {
    background-color: #2b2b2b; /* Darker disabled button */
    cursor: not-allowed;
}

.pagination-controls button:hover:not(:disabled) {
    background-color: #0071ff; /* Darker muted blue on hover */
}

.pagination-controls span {
    color: #bebebe;
}

/* Bug Reports Search Bar */
.bug-reports-search-container {
    margin: 20px 0;
}

.search-input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 500px;
    background-color: #232323;
    border: 1px solid #2b2b2b;
    border-radius: 8px;
    padding: 0;
    transition: all 0.2s ease;
}

.search-input-wrapper:focus-within {
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.1);
}

.search-icon {
    position: absolute;
    left: 14px;
    color: #8a8a8a;
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 1;
}

.bug-reports-search-input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    background: transparent;
    border: none;
    color: #ebebeb;
    font-size: 0.875rem;
    outline: none;
    border-radius: 8px;
}

.bug-reports-search-input::placeholder {
    color: #8a8a8a;
}

.search-clear-btn {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: #8a8a8a;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 1;
}

.search-clear-btn:hover {
    background-color: #2b2b2b;
    color: #bebebe;
}

.search-clear-btn i {
    font-size: 0.75rem;
}

.merge-select-all-row {
    margin: -8px 0 16px;
    padding: 10px 12px;
    background-color: #232323;
    border: 1px solid #2b2b2b;
    border-radius: 8px;
    max-width: 500px;
}

.merge-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #bebebe;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
}

.merge-select-all-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #4da3ff;
    cursor: pointer;
}

.merge-select-all-label:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.merge-select-all-label:has(input:disabled) input {
    cursor: not-allowed;
}

/* Bug Reports and Error Logs Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #232323; /* Dark table background */
    color: #bebebe;
}

th, td {
    border: 1px solid #2b2b2b; /* Darker border */
    padding: 8px;
    text-align: left;
}

th {
    background-color: #232323; /* Darker header background */
}

/* Assigned Devs Column Styles */
.working-on {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.developer-tag {
    background-color: #0071ff; /* Muted blue tag */
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.9em;
    position: relative;
    margin: 2px;
}

.error-log-places {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    max-width: 420px;
}

.error-log-place-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #191919;
    border: 1px solid #2b2b2b;
    color: #d4d4d4;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: nowrap;
}

.error-log-place-chip-ver {
    color: #8a8a8a;
    font-family: ui-monospace, monospace;
    font-size: 0.74rem;
}

/* Collapsed state: hide overflow chips until the user clicks "+N more" */
.error-log-places[data-expanded="false"] .error-log-place-chip-hidden {
    display: none;
}

.error-log-place-expand-btn {
    background: rgba(27, 27, 27, 0.6);
    border: 1px solid rgba(165, 165, 165, 0.3);
    color: #d4d4d4;
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.45;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.error-log-place-expand-btn:hover {
    background: rgba(77, 163, 255, 0.18);
    border-color: rgba(77, 163, 255, 0.6);
    color: #99ccff;
}

/* Small label on assigned-card place lists ("Places this error has occurred:") */
.error-log-card-places-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a8a8a;
    margin: 10px 0 6px 0;
}

/* Dev-only toolbar (gated on backend DEV_MODE) on the Bug Reports page */
.dev-tools-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px 0;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px dashed rgba(245, 158, 11, 0.5);
    border-radius: 8px;
}

.dev-tools-toolbar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dev-tools-toolbar-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fbbf24;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dev-tools-field {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.7rem;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.dev-tools-field input,
.dev-tools-field select {
    width: 70px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: #0f0f0f;
    color: #fde68a;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    text-transform: none;
}

.dev-tools-field select {
    width: auto;
    min-width: 90px;
    padding-right: 24px;
}

.dev-tools-field input:focus,
.dev-tools-field select:focus {
    outline: none;
    border-color: rgba(245, 158, 11, 0.9);
}

.dev-tools-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #fde68a;
    cursor: pointer;
}

.dev-tools-checkbox input {
    accent-color: #fbbf24;
}

.dev-tools-checkbox-dry {
    padding: 4px 10px;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.06);
    font-weight: 600;
}

.dev-tools-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(245, 158, 11, 0.5);
    background: rgba(27, 27, 27, 0.6);
    color: #fde68a;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dev-tools-btn:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.22);
    color: #fff;
    border-color: rgba(245, 158, 11, 0.9);
}

.dev-tools-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dev-tools-btn-secondary {
    border-color: #6b6b6b;
    color: #d4d4d4;
}

.dev-tools-btn-secondary:hover:not(:disabled) {
    background: rgba(87, 87, 87, 0.4);
    color: #ebebeb;
    border-color: #8a8a8a;
}

/* Result modal for dev tools operations */
.dev-tools-result-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dev-tools-result-modal {
    background: #0f0f0f;
    border: 1px solid #191919;
    border-radius: 12px;
    width: 680px;
    max-width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.dev-tools-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #191919;
}

.dev-tools-result-header h3 {
    margin: 0;
    color: #ebebeb;
    font-size: 1.05rem;
    font-weight: 600;
}

.dev-tools-result-close {
    background: transparent;
    border: none;
    color: #bebebe;
    font-size: 1.4rem;
    width: 28px;
    height: 28px;
    line-height: 24px;
    border-radius: 6px;
    cursor: pointer;
}

.dev-tools-result-close:hover {
    background: rgba(165, 165, 165, 0.15);
    color: #ebebeb;
}

.dev-tools-result-body {
    overflow-y: auto;
    padding: 16px 20px 20px;
}

.dev-tools-result-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #d4d4d4;
    font-size: 0.9rem;
}

.dev-tools-result-error {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.dev-tools-result-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    color: #d4d4d4;
    font-size: 0.88rem;
    padding: 10px 12px;
    background: rgba(43, 43, 43, 0.6);
    border: 1px solid #2b2b2b;
    border-radius: 8px;
}

.dev-tools-result-heading {
    margin: 18px 0 8px 0;
    color: #ebebeb;
    font-size: 0.92rem;
    font-weight: 600;
}

.dev-tools-result-empty {
    color: #bebebe;
    font-size: 0.85rem;
    text-align: center;
    padding: 18px;
}

.dev-tools-result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    color: #d4d4d4;
}

.dev-tools-result-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #2b2b2b;
    background: #191919;
    color: #ebebeb;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dev-tools-result-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(67, 67, 67, 0.5);
    font-variant-numeric: tabular-nums;
}

.dev-tools-result-table tr:last-child td {
    border-bottom: none;
}

/* Card-style match rendering — replaces the old flat table so each merge
   has room to show the open task's tags, assignees, and a sample of the
   bugs that were just absorbed. */
.dev-tools-match-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dev-tools-match-card {
    background: #191919;
    border: 1px solid #2b2b2b;
    border-radius: 8px;
    padding: 12px 14px;
    color: #d4d4d4;
    font-size: 0.85rem;
}

.dev-tools-match-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.dev-tools-match-title {
    color: #ebebeb;
    font-weight: 600;
    font-size: 0.9rem;
}

.dev-tools-match-arrow {
    color: #fbbf24;
    margin: 0 2px;
}

.dev-tools-match-cluster-ref {
    color: #bebebe;
    font-weight: 400;
    font-size: 0.82rem;
}

.dev-tools-match-stats {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.dev-tools-match-stat {
    color: #bebebe;
    font-size: 0.78rem;
    background: #0f0f0f;
    border: 1px solid #2b2b2b;
    border-radius: 4px;
    padding: 3px 7px;
    font-variant-numeric: tabular-nums;
}

.dev-tools-match-stat strong {
    color: #ebebeb;
}

.dev-tools-match-status {
    color: #99ccff;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(77, 163, 255, 0.15);
    border: 1px solid rgba(77, 163, 255, 0.4);
    border-radius: 4px;
    padding: 3px 7px;
    font-weight: 600;
}

.dev-tools-match-section {
    margin-top: 8px;
}

.dev-tools-match-label {
    color: #bebebe;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
    font-weight: 600;
}

.dev-tools-match-tagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dev-tools-match-tag {
    background: #2b2b2b;
    color: #ebebeb;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.75rem;
    font-weight: 500;
}

.dev-tools-match-tag.is-task {
    background: rgba(77, 163, 255, 0.15);
    border: 1px solid rgba(77, 163, 255, 0.4);
    color: #99ccff;
}

.dev-tools-match-tag.is-merged {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.dev-tools-match-meta {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #d4d4d4;
}

.dev-tools-match-meta strong {
    color: #bebebe;
    font-weight: 600;
    margin-right: 4px;
}

.dev-tools-match-assignee {
    background: #0f0f0f;
    border: 1px solid #2b2b2b;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.78rem;
    color: #ebebeb;
    margin-right: 4px;
}

.dev-tools-match-buglist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dev-tools-match-buglist li {
    background: #0f0f0f;
    border: 1px solid #2b2b2b;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #d4d4d4;
}

.dev-tools-match-bug-id {
    color: #8a8a8a;
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
    font-size: 0.75rem;
}

.dev-tools-match-bug-user {
    color: #99ccff;
    font-size: 0.78rem;
    margin-right: 4px;
}

.dev-tools-match-bug-snippet {
    color: #ebebeb;
}

/* Side-by-side comparison: open task on the left, merged-in cluster on the
   right. Single column on narrow widths so the modal stays readable. */
.dev-tools-match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

@media (max-width: 720px) {
    .dev-tools-match-grid { grid-template-columns: 1fr; }
}

.dev-tools-match-col {
    background: #0f0f0f;
    border: 1px solid #2b2b2b;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dev-tools-match-col-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 6px;
    border-bottom: 1px solid #2b2b2b;
}

.dev-tools-match-col-header.is-task { color: #99ccff; }
.dev-tools-match-col-header.is-merged { color: #fbbf24; }

.dev-tools-match-empty {
    color: #8a8a8a;
    font-size: 0.75rem;
    font-style: italic;
    padding: 4px 0;
}

/* Dry-run banner + thresholds echo */
.dev-tools-result-dry-banner {
    background: rgba(245, 158, 11, 0.12);
    border: 1px dashed rgba(245, 158, 11, 0.6);
    color: #fbbf24;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.dev-tools-result-thresholds {
    color: #d4d4d4;
    font-size: 0.78rem;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #0f0f0f;
    border: 1px solid #2b2b2b;
    border-radius: 6px;
}

.dev-tools-result-thresholds strong {
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
}

.dev-tools-result-count {
    color: #bebebe;
    font-weight: 400;
    font-size: 0.78rem;
}

.dev-tools-result-hint {
    color: #bebebe;
    font-size: 0.78rem;
    margin: 0 0 8px 0;
}

/* Near-miss card variant — dimmer accent so they read as "didn't happen" */
.dev-tools-match-card-near {
    border-style: dashed;
    border-color: #6b6b6b;
    opacity: 0.95;
}

.dev-tools-match-arrow-near {
    color: #bebebe;
}

.dev-tools-match-stat-warn {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fca5a5;
}

.dev-tools-match-stat-ok {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
}

/* "Message All Reporters" button inside the cluster modal */
.modal-broadcast-btn {
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid rgba(77, 163, 255, 0.4);
    background: rgba(77, 163, 255, 0.15);
    color: #99ccff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-broadcast-btn:hover {
    background: rgba(77, 163, 255, 0.28);
    border-color: rgba(77, 163, 255, 0.7);
    color: #fff;
}

/* Cluster broadcast dialog (modal) */
.cluster-broadcast-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cluster-broadcast-modal {
    background: #0f0f0f;
    border: 1px solid #191919;
    border-radius: 12px;
    width: 520px;
    max-width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.cluster-broadcast-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid #191919;
}

.cluster-broadcast-header-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cluster-broadcast-header h3 {
    margin: 0;
    color: #ebebeb;
    font-size: 1.05rem;
    font-weight: 600;
}

.cluster-broadcast-header-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 80px;
    overflow-y: auto;
}

.cluster-broadcast-header-tags .cluster-tag {
    font-size: 0.68rem;
    padding: 2px 8px;
    line-height: 1.35;
    border-radius: 999px;
}

.cluster-broadcast-close {
    background: transparent;
    border: none;
    color: #bebebe;
    font-size: 1.4rem;
    width: 28px;
    height: 28px;
    line-height: 24px;
    border-radius: 6px;
    cursor: pointer;
}

.cluster-broadcast-close:hover {
    background: rgba(165, 165, 165, 0.15);
    color: #ebebeb;
}

.cluster-broadcast-body {
    padding: 16px 20px;
    overflow-y: auto;
}

.cluster-broadcast-info {
    color: #d4d4d4;
    font-size: 0.88rem;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.cluster-broadcast-skipped {
    color: #fbbf24;
    font-size: 0.78rem;
    margin: 0 0 12px 0;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 8px 10px;
    border-radius: 6px;
}

.cluster-broadcast-draft-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.cluster-broadcast-draft-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.74rem;
    color: #bebebe;
    font-style: italic;
}

.cluster-broadcast-draft-spinner {
    width: 11px;
    height: 11px;
    border-width: 2px;
    flex-shrink: 0;
}

.cluster-broadcast-redraft-btn {
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(165, 165, 165, 0.25);
    background: rgba(27, 27, 27, 0.6);
    color: #d4d4d4;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cluster-broadcast-redraft-btn:hover:not(:disabled) {
    background: rgba(77, 163, 255, 0.18);
    border-color: rgba(77, 163, 255, 0.6);
    color: #99ccff;
}

.cluster-broadcast-redraft-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cluster-broadcast-textarea {
    width: 100%;
    min-height: 130px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #2b2b2b;
    background: rgba(27, 27, 27, 0.7);
    color: #ebebeb;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.cluster-broadcast-textarea:focus {
    outline: none;
    border-color: #4da3ff;
    background: rgba(27, 27, 27, 0.9);
}

.cluster-broadcast-progress {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(43, 43, 43, 0.7);
    border: 1px solid #2b2b2b;
    color: #d4d4d4;
    font-size: 0.82rem;
    font-family: ui-monospace, monospace;
}

.cluster-broadcast-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #191919;
}

.cluster-broadcast-cancel,
.cluster-broadcast-send {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid rgba(165, 165, 165, 0.25);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cluster-broadcast-cancel {
    background: rgba(27, 27, 27, 0.6);
    color: #d4d4d4;
}

.cluster-broadcast-cancel:hover {
    background: rgba(43, 43, 43, 0.8);
    color: #ebebeb;
}

.cluster-broadcast-send {
    background: linear-gradient(135deg, #0071ff 0%, #0071ff 100%);
    color: #fff;
    border-color: #0071ff;
}

.cluster-broadcast-send:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(77, 163, 255, 0.3);
}

.cluster-broadcast-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Tag block inside the cluster-detail side modal — cap the height so a
   30+ tag cluster doesn't take over the whole panel. Scroll the overflow.
   Tags render smaller in here than they do on the board cards. */
.cluster-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
    max-height: 250px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(67, 67, 67, 0.6);
    border-radius: 8px;
    background: rgba(27, 27, 27, 0.4);
}

.cluster-modal-tags .cluster-tag {
    font-size: 0.68rem;
    padding: 2px 8px;
    line-height: 1.35;
    border-radius: 999px;
}

.cluster-modal-tags::-webkit-scrollbar {
    width: 6px;
}

.cluster-modal-tags::-webkit-scrollbar-thumb {
    background: rgba(165, 165, 165, 0.35);
    border-radius: 3px;
}

.cluster-modal-tags::-webkit-scrollbar-track {
    background: transparent;
}

.remove-dev {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ef4444; /* Red for remove button */
    color: #ffffff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    font-size: 0.8em;
}

/* Old circular add-dev-btn style removed - now using button style defined below */

/* Pop-up Styles */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #232323; /* Dark popup background */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 2000;
    text-align: center;
    color: #bebebe;
}

.popup h3 {
    color: #ffffff; /* White heading */
}

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7); /* Darker overlay */
    z-index: 1500;
}

.popup select,
.popup textarea {
    margin: 10px 0;
    padding: 8px;
    width: 100%;
    background-color: #232323; /* Dark input/textarea */
    border: 1px solid #2b2b2b; /* Gray border */
    color: #bebebe;
    border-radius: 4px;
}

.popup select option {
    background-color: #232323;
    color: #bebebe;
}

.popup button {
    padding: 8px 16px;
    margin: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

.popup .confirm-btn {
    background-color: #10b981; /* Green confirm button */
    color: #ffffff;
}

.popup .confirm-btn:hover {
    background-color: #10b981; /* Darker green on hover */
}

.popup .confirm-btn:disabled,
.popup .confirm-btn.loading {
    background-color: #8a8a8a; /* Grey when disabled/loading */
    cursor: not-allowed;
    opacity: 0.7;
}

.popup .confirm-btn:disabled:hover,
.popup .confirm-btn.loading:hover {
    background-color: #8a8a8a; /* Keep grey on hover when disabled */
}

.popup .cancel-btn {
    background-color: #ef4444; /* Red cancel button */
    color: #ffffff;
}

.popup .cancel-btn:hover {
    background-color: #dc2626; /* Darker red on hover */
}

.popup .cancel-btn:disabled,
.popup .cancel-btn.loading {
    background-color: #8a8a8a; /* Grey when disabled/loading */
    cursor: not-allowed;
    opacity: 0.7;
}

.popup .cancel-btn:disabled:hover,
.popup .cancel-btn.loading:hover {
    background-color: #8a8a8a; /* Keep grey on hover when disabled */
}

.popup select:disabled {
    background-color: #232323; /* Darker when disabled */
    cursor: not-allowed;
    opacity: 0.6;
}

#add-user-btn:hover {
    background-color: #0071ff; /* Darker blue on hover */
}

/* Emulation Banner */
#emulation-banner {
    background: linear-gradient(135deg, #f59e0b 0%, #f59e0b 100%);
    color: #fff;
    padding: 12px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.emulation-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.emulation-banner-content i {
    font-size: 1.1rem;
}

.emulation-banner-content strong {
    font-weight: 700;
    color: #fff;
}

.switch-back-button {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.switch-back-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

/* User Popup Styling */
.user-popup {
    width: 500px;
    max-width: 90vw;
    padding: 30px;
    text-align: left;
}

.user-popup-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.user-popup-label {
    display: block;
    color: #bebebe;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
}

.user-popup-input {
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    background: #232323;
    border: 1px solid #2b2b2b;
    color: #bebebe;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.user-popup-input:focus {
    outline: none;
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.1);
}

.user-popup-roles {
    margin-top: 8px;
    padding: 12px;
    background: #232323;
    border: 1px solid #2b2b2b;
    border-radius: 6px;
    max-height: 150px;
    overflow-y: auto;
}

.user-popup-roles label {
    display: block;
    margin: 8px 0;
    color: #bebebe;
    font-weight: normal;
    cursor: pointer;
}

.user-popup-roles input[type="checkbox"] {
    margin-right: 10px;
    accent-color: #4da3ff;
    cursor: pointer;
}

.user-popup-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(165, 165, 165, 0.1);
}

.user-popup-buttons button {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
}

/* Item history icon styling */
.item-history-icon {
    color: #bebebe !important;
    font-size: 1.2rem !important;
    transition: all 0.2s ease !important;
}

.item-history-icon:hover {
    color: #4da3ff !important;
    transform: scale(1.1);
}

/* Login Screen Styling */
/* (legacy duplicate #login-screen / .login-box blocks removed — the canonical
   mobile-safe versions live near the top of this file. This block used to
   re-apply flex centering + min-height:100vh, which silently overrode the
   canonical rules and pushed the Login button off-screen on iPhones.) */

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h2 {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #0f0f0f;
    border: 1px solid #2b2b2b;
    border-radius: 10px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.login-input-group:focus-within {
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.1);
}

.login-input-group i {
    margin-right: 12px;
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.login-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ebebeb;
    font-size: 1rem;
    outline: none;
    padding: 0;
}

.login-input-group input::placeholder {
    color: #8a8a8a;
}

.remember-me-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #bebebe;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.remember-me-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #4da3ff;
}

.login-btn {
    background: linear-gradient(135deg, #0071ff 0%, #0071ff 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(77, 163, 255, 0.3);
    margin-top: 5px;
}

.login-btn:hover {
    background: linear-gradient(135deg, #0071ff 0%, #0071ff 100%);
    box-shadow: 0 6px 16px rgba(77, 163, 255, 0.4);
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0);
}

.login-error {
    color: #ef4444;
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
    display: none;
    padding: 10px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Logout button styling in sidebar */
#logout-button {
    display: flex !important;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(165, 165, 165, 0.1);
    background: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

#logout-button:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2);
}

#logout-button i {
    color: #ef4444 !important;
}

#logout-button:hover i {
    color: #ef4444 !important;
}

/* Error Message */
#error-message,
#events-error-message {
    color: #ef4444; /* Red error message */
    text-align: center;
    display: none;
    margin-top: 20px;
}

/* Game Events Charts */
#event-charts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.chart-container {
    flex: 1 1 calc(25% - 20px); /* 4 charts per row, accounting for gap */
    box-sizing: border-box;
    min-width: 200px; /* Ensure charts don't shrink too much */
    max-width: calc(25% - 20px);
    background-color: #232323; /* Dark chart background */
    padding: 10px;
    border-radius: 8px;
}

.chart-container canvas {
    width: 100%;
}


/* Chat Panel Styles */
.chat-panel {
    display: none;
    position: fixed;
    /* Opens centered on screen. Drag the header to move it, grab the bottom-right
       corner to resize. Once dragged/resized, JS pins it with inline top/left so
       it stays where CS put it for the rest of the session. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    height: 660px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    min-width: 320px;
    min-height: 320px;
    resize: both;
    overflow: hidden; /* required for the resize grip; inner .chat-history scrolls */
    background-color: #232323; /* Dark panel background */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    flex-direction: column;
}

.chat-header {
    background-color: #232323; /* Darker header */
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move; /* signals the header is the drag handle */
    user-select: none;
}

.chat-header h3 {
    margin: 0;
    font-size: 1em;
    color: #ffffff;
}

/* Read-only bug-report banner at the top of the chat — for the admin's reference
   only. NOT part of the conversation and never sent through any API. */
.chat-bug-description {
    flex: 0 0 auto;
    max-height: 88px;
    overflow-y: auto;
    padding: 8px 12px;
    background-color: #191919;
    border-bottom: 1px solid #2b2b2b;
    color: #d4d4d4;
    font-size: 0.8rem;
    line-height: 1.45;
}
.chat-bug-description .chat-bug-description-label {
    display: block;
    color: #8a8a8a;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.chat-close-btn {
    background-color: #ef4444; /* Red close button */
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    font-size: 1.2em;
}

.chat-close-btn:hover {
    background-color: #dc2626; /* Darker red on hover */
}

.chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #2b2b2b; /* Dark border */
    background-color: #232323; /* Dark chat history background */
}

.chat-message {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9em;
}

.chat-message.admin {
    background-color: #0071ff; /* Muted blue for admin messages */
    color: #ffffff;
    margin-left: 20%;
    text-align: right;
}

.chat-message.user {
    background-color: #232323; /* Darker background for user messages */
    color: #bebebe;
    margin-right: 20%;
}

.chat-message strong {
    font-weight: 600;
}

.chat-message small {
    font-size: 0.8em;
    color: #8a8a8a; /* Lighter gray for timestamps */
}

/* The original bug report, injected as the first (reporter) message — a subtle
   left accent + caption marks it without breaking the "reads like a message" look. */
.chat-message.chat-report-msg {
    border-left: 3px solid #99ccff;
}
.chat-report-tag {
    display: block;
    margin-top: 4px;
    font-size: 0.72em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #99ccff;
}

.chat-input {
    display: flex;
    padding: 10px;
    background-color: #232323; /* Match panel background */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.chat-input textarea {
    flex: 1;
    height: 60px;
    resize: none;
    background-color: #232323; /* Dark textarea */
    border: 1px solid #2b2b2b; /* Gray border */
    color: #bebebe;
    border-radius: 4px;
    padding: 8px;
    margin-right: 10px;
}

.chat-input .confirm-btn {
    background-color: #10b981; /* Green send button */
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.chat-input .confirm-btn:hover {
    background-color: #10b981; /* Darker green on hover */
}

.chat-icon {
    cursor: pointer;
    color: #4da3ff; /* Muted blue for chat icon */
    font-size: 18px;
    display: inline-block;
    padding: 5px;
}

.chat-icon:hover {
    color: #0071ff; /* Darker muted blue on hover */
}

/* Tab Container */
.tab-container {
    margin-bottom: 20px;
    border-bottom: 2px solid #444;
}

.tab-button {
    background: #2b2b2b;
    color: #ddd;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s, color 0.3s;
}

.tab-button:hover {
    background: #3b3b3b;
}

.tab-button.active {
    background: #0071ff;
    color: #fff;
}

.tab-content {
    display: none;
}

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

/* Tables */
#profile-bug-reports-table, #profile-error-logs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: #191919;
    color: #ddd;
}

#profile-bug-reports-table th, #profile-error-logs-table th {
    background: #333;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #444;
}

#profile-bug-reports-table td, #profile-error-logs-table td {
    padding: 10px;
    border-bottom: 1px solid #444;
}

#profile-bug-reports-table tr:hover, #profile-error-logs-table tr:hover {
    background: #2b2b2b;
}

/* Status Dropdown */
select {
    background: #333;
    color: #ddd;
    border: 1px solid #555;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
}

select:hover {
    background: #444;
}

/* Tabs in My Profile Section — pill-style chips with real presence.
   Inactive tabs are filled with the secondary surface color so they read
   as chips. Active tab bumps to a lighter purple shade + a clear blue
   accent border, so it's obvious which one you're on at a glance. */
#profile-tabs {
    margin-bottom: 18px;
    display: flex;
    gap: 8px;
    align-items: center;
}

#profile-tabs a {
    display: inline-block !important;
    color: #d4d4d4;
    text-decoration: none;
    padding: 8px 16px;
    background-color: #191919;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.88rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    box-shadow: none;
}

#profile-tabs a.active {
    background: #333333;
    border-color: rgba(77, 163, 255, 0.55);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(77, 163, 255, 0.2);
}

#profile-tabs a:hover:not(.active) {
    background-color: #2b2b2b;
    border-color: rgba(255, 255, 255, 0.16);
    color: #ebebeb;
    transform: none;
    box-shadow: none;
}

/* Secondary action button — "View Completed Archive" and friends. Sits
   under the tab row, lower visual priority than the tabs. */
.view-archive-btn {
    margin: 10px 0 16px 0;
    padding: 6px 14px;
    background: transparent;
    color: #bebebe;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.view-archive-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #d4d4d4;
    border-color: rgba(255, 255, 255, 0.14);
}

/* Open Conversations tab */
.open-conversations-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.open-conversations-heading {
    margin: 0;
    color: #ebebeb;
    font-size: 1.15rem;
    font-weight: 600;
}

.open-conversations-refresh-btn {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid rgba(165, 165, 165, 0.25);
    background: rgba(27, 27, 27, 0.6);
    color: #d4d4d4;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.open-conversations-refresh-btn:hover {
    background: rgba(77, 163, 255, 0.18);
    border-color: rgba(77, 163, 255, 0.6);
    color: #99ccff;
}

.open-conversations-subtitle {
    color: #bebebe;
    font-size: 0.85rem;
    margin: 0 0 18px 0;
}

.open-conversations-loading,
.open-conversations-empty,
.open-conversations-error {
    color: #bebebe;
    font-size: 0.9rem;
    padding: 24px 12px;
    text-align: center;
}

.open-conversations-error {
    color: #fca5a5;
}

.open-conversations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.open-conversations-card {
    width: 100%;
    text-align: left;
    background: rgba(43, 43, 43, 0.6);
    border: 1px solid #2b2b2b;
    border-radius: 10px;
    padding: 14px 16px;
    color: #ebebeb;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.open-conversations-card:hover {
    background: rgba(77, 163, 255, 0.12);
    border-color: rgba(77, 163, 255, 0.55);
    transform: translateY(-1px);
}

.open-conversations-card-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.open-conversations-card-reporter {
    font-weight: 600;
    color: #ebebeb;
    font-size: 0.95rem;
}

.open-conversations-card-uid {
    color: #8a8a8a;
    font-weight: 400;
    font-size: 0.85em;
}

.open-conversations-card-meta {
    color: #bebebe;
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
}

.open-conversations-card-when {
    margin-left: auto;
    color: #8a8a8a;
    font-size: 0.75rem;
}

.open-conversations-card-bug {
    color: #d4d4d4;
    font-size: 0.82rem;
    line-height: 1.45;
    border-left: 2px solid rgba(165, 165, 165, 0.25);
    padding-left: 10px;
    margin-top: 2px;
}

.open-conversations-card-last {
    color: #d4d4d4;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 4px;
}

.open-conversations-card-sender {
    font-weight: 600;
    color: #99ccff;
    margin-right: 4px;
}

.open-conversations-card-text {
    color: #d4d4d4;
}

.open-conversations-card-footer {
    margin-top: 4px;
    color: #8a8a8a;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* "Emulate Data" pill on a conversation card (lives inside the card <button>,
   so it's a <span>, not a nested <button>). */
.conv-emulate-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(88, 88, 88, 0.5);
    color: #d4d4d4;
    border: 1px solid #3b3b3b;
    border-radius: 6px;
    padding: 4px 11px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.conv-emulate-btn:hover {
    background: rgba(153, 204, 255, 0.28);
    border-color: rgba(153, 204, 255, 0.65);
    color: #fff;
}

/* My Progress tab */
.my-progress-intro {
    color: #bebebe;
    font-size: 0.9rem;
    margin: 0 0 16px 0;
    max-width: 720px;
}

.my-progress-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.my-progress-toolbar-main {
    align-items: flex-end;
    gap: 18px 24px;
    padding: 16px 18px;
    background: linear-gradient(145deg, rgba(43, 43, 43, 0.55) 0%, rgba(27, 27, 27, 0.4) 100%);
    border: 1px solid rgba(87, 87, 87, 0.5);
    border-radius: 12px;
    margin-bottom: 12px;
}

.my-progress-field-range label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #bebebe;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.my-progress-date-input {
    min-width: 280px;
    max-width: 100%;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #ebebeb;
    background: #0f0f0f;
    border: 1px solid #6b6b6b;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.my-progress-date-input:hover {
    border-color: #8a8a8a;
}

.my-progress-date-input:focus {
    outline: none;
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.25);
}

.my-progress-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.my-progress-presets-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8a8a8a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}

.my-progress-preset-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #d4d4d4;
    background: #2b2b2b;
    border: 1px solid #6b6b6b;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.my-progress-preset-btn:hover {
    background: #6b6b6b;
    border-color: #8a8a8a;
    color: #ffffff;
}

.my-progress-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

.my-progress-toolbar label {
    color: #d4d4d4;
    font-size: 0.9rem;
}

.my-progress-toolbar select {
    background: #191919;
    color: #ebebeb;
    border: 1px solid #6b6b6b;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
}

.my-progress-refresh-btn {
    background: #6b6b6b;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.my-progress-refresh-btn:hover {
    background: #8a8a8a;
}

.my-progress-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0071ff 0%, #0071ff 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(77, 163, 255, 0.35);
    transition: transform 0.15s, box-shadow 0.2s;
}

.my-progress-report-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(77, 163, 255, 0.45);
}

.my-progress-period-label {
    color: #bebebe;
    font-size: 0.85rem;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* Flatpickr — match admin panel dark theme */
.flatpickr-calendar {
    background: #191919 !important;
    border: 1px solid #6b6b6b !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;
}

.flatpickr-months .flatpickr-month {
    background: #191919 !important;
    color: #ebebeb !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: #2b2b2b !important;
    color: #ebebeb !important;
    font-weight: 600 !important;
}

.flatpickr-weekdays {
    background: #191919 !important;
}

span.flatpickr-weekday {
    color: #bebebe !important;
    font-weight: 600 !important;
}

.flatpickr-day {
    color: #ebebeb !important;
    border-radius: 6px !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: #2b2b2b !important;
    border-color: #6b6b6b !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #0071ff !important;
    border-color: #4da3ff !important;
    color: #fff !important;
}

.flatpickr-day.inRange {
    background: rgba(77, 163, 255, 0.25) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.flatpickr-day.today {
    border-color: #4da3ff !important;
}

.flatpickr-day.flatpickr-disabled {
    color: #6b6b6b !important;
}

/* Progress report modal */
.my-progress-report-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.my-progress-report-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(27, 27, 27, 0.75);
    backdrop-filter: blur(4px);
}

.my-progress-report-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #191919 0%, #0f0f0f 100%);
    border: 1px solid #6b6b6b;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.my-progress-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #2b2b2b;
}

.my-progress-report-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
}

.my-progress-report-close {
    background: none;
    border: none;
    color: #bebebe;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 6px;
}

.my-progress-report-close:hover {
    color: #ebebeb;
    background: rgba(255, 255, 255, 0.06);
}

.my-progress-report-meta {
    padding: 14px 22px;
    font-size: 0.9rem;
    color: #bebebe;
    border-bottom: 1px solid #2b2b2b;
}

.my-progress-report-meta strong {
    color: #ebebeb;
}

.my-progress-report-ai {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: rgba(77, 163, 255, 0.08);
    border: 1px solid rgba(77, 163, 255, 0.25);
    border-radius: 10px;
}

.my-progress-report-ai--error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.my-progress-report-ai-heading {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #99ccff;
}

.my-progress-report-ai--error .my-progress-report-ai-heading {
    color: #fca5a5;
}

.my-progress-report-ai-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #ebebeb;
    white-space: pre-wrap;
    word-break: break-word;
}

.my-progress-report-ai-error {
    margin: 0;
    font-size: 0.88rem;
    color: #fca5a5;
    line-height: 1.45;
}

.my-progress-report-details-heading {
    margin: 8px 0 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #bebebe;
}

.my-progress-report-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px 24px;
}

.my-progress-report-item {
    padding: 14px 16px;
    margin-bottom: 12px;
    background: rgba(43, 43, 43, 0.6);
    border: 1px solid #2b2b2b;
    border-radius: 10px;
}

.my-progress-report-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.my-progress-report-item-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4da3ff;
    background: rgba(77, 163, 255, 0.15);
    border-radius: 6px;
}

.my-progress-report-item-time {
    font-size: 0.75rem;
    color: #bebebe;
    font-family: ui-monospace, monospace;
}

.my-progress-report-item-title {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ebebeb;
    line-height: 1.4;
}

.my-progress-report-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.my-progress-report-item-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background-color: #6b6b6b; /* default if no per-tag color is set */
    line-height: 1.4;
    white-space: nowrap;
}

.my-progress-report-item-detail {
    font-size: 0.85rem;
    color: #d4d4d4;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.my-progress-report-item-notes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(67, 67, 67, 0.8);
}

.my-progress-report-item-notes-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a8a8a;
    margin-bottom: 6px;
}

.my-progress-report-item-notes-body {
    font-size: 0.78rem;
    color: #bebebe;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.my-progress-report-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #2b2b2b;
    background: rgba(27, 27, 27, 0.5);
    border-radius: 0 0 14px 14px;
}

.my-progress-report-copy-btn,
.my-progress-report-print-btn,
.my-progress-report-close-btn {
    padding: 10px 18px;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 8px;
    cursor: pointer;
    border: none;
}

.my-progress-report-copy-btn {
    background: #2b2b2b;
    color: #ebebeb;
}

.my-progress-report-copy-btn:hover {
    background: #6b6b6b;
}

.my-progress-report-print-btn {
    background: #6b6b6b;
    color: #fff;
}

.my-progress-report-print-btn:hover {
    background: #8a8a8a;
}

.my-progress-report-close-btn {
    margin-left: auto;
    background: transparent;
    color: #bebebe;
    border: 1px solid #6b6b6b;
}

.my-progress-report-close-btn:hover {
    color: #ebebeb;
    border-color: #8a8a8a;
}

.my-progress-report-loading,
.my-progress-report-empty,
.my-progress-report-error {
    text-align: center;
    padding: 32px 16px;
    color: #bebebe;
}

.my-progress-report-error {
    color: #f87171;
}

@media (max-width: 720px) {
    .my-progress-toolbar-actions {
        margin-left: 0;
        width: 100%;
    }

    .my-progress-toolbar-actions .my-progress-refresh-btn,
    .my-progress-toolbar-actions .my-progress-report-btn {
        flex: 1;
        justify-content: center;
    }
}

.my-progress-loading {
    color: #bebebe;
    padding: 12px 0;
}

.my-progress-error {
    color: #f87171;
    padding: 12px 0;
}

.my-progress-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.my-progress-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #232323;
    border: 1px solid #2b2b2b;
    border-radius: 14px;
    padding: 16px 18px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.my-progress-stat-card:hover {
    border-color: #3b3b3b;
    transform: translateY(-1px);
}

.my-progress-stat-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.my-progress-stat-body { flex: 1; min-width: 0; }

.my-progress-stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.05;
}

.my-progress-stat-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #d4d4d4;
    margin-top: 3px;
}

.my-progress-stat-sub {
    font-size: 0.72rem;
    color: #8a8a8a;
    margin-top: 3px;
}

.my-progress-stat-delta {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; font-weight: 700;
    margin-top: 8px; padding: 2px 8px; border-radius: 999px;
}
.my-progress-stat-delta.up { color: #34d399; background: rgba(52, 211, 153, 0.12); }
.my-progress-stat-delta.down { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.my-progress-stat-delta.flat { color: #bebebe; background: rgba(165, 165, 165, 0.12); }

/* Icon accent palette (shared by stat cards + activity rows) */
.my-progress-stat-icon.violet, .my-progress-activity-icon.violet { background: rgba(153, 204, 255, 0.16); color: #99ccff; }
.my-progress-stat-icon.blue,   .my-progress-activity-icon.blue   { background: rgba(77, 163, 255, 0.15); color: #0071ff; }
.my-progress-stat-icon.amber,  .my-progress-activity-icon.amber  { background: rgba(251,191,36,0.15); color: #fbbf24; }
.my-progress-stat-icon.green,  .my-progress-activity-icon.green  { background: rgba(52,211,153,0.15); color: #34d399; }
.my-progress-stat-icon.pink,   .my-progress-activity-icon.pink   { background: rgba(244,114,182,0.15); color: #f472b6; }

/* Quick-glance line */
.my-progress-quickglance {
    font-size: 0.9rem; color: #d4d4d4;
    margin: 2px 0 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.my-progress-quickglance i { color: #fbbf24; }
.my-progress-quickglance .qg-pill { font-weight: 700; }
.my-progress-quickglance .qg-pill.up { color: #34d399; }
.my-progress-quickglance .qg-pill.down { color: #f87171; }

/* Titled panel (Recent activity card) */
.my-progress-panel {
    background: #232323; border: 1px solid #2b2b2b; border-radius: 14px;
    padding: 16px 18px; display: flex; flex-direction: column;
}
.my-progress-panel-title {
    font-size: 0.95rem; font-weight: 700; color: #ebebeb; margin: 0 0 12px;
    display: flex; align-items: center; gap: 8px;
}
.my-progress-panel-title i { color: #99ccff; }

/* Recent activity feed */
.my-progress-activity { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.my-progress-activity-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 8px; border-radius: 10px; transition: background 0.12s ease;
}
.my-progress-activity-item:hover { background: rgba(153, 204, 255, 0.06); }
.my-progress-activity-icon {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 0.9rem; margin-top: 1px;
}
.my-progress-activity-main { flex: 1; min-width: 0; }
.my-progress-activity-title {
    color: #ebebeb; font-weight: 600; font-size: 0.9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.my-progress-activity-meta { color: #8a8a8a; font-size: 0.76rem; margin-top: 2px; }
.my-progress-activity-empty { color: #8a8a8a; padding: 28px; text-align: center; }

.my-progress-active-breakdown {
    font-size: 0.85rem;
    color: #99ccff;
    margin: 0 0 12px 0;
    max-width: 900px;
}

.my-progress-pace-note,
.my-progress-legacy-note {
    font-size: 0.85rem;
    color: #bebebe;
    margin: 0 0 16px 0;
    max-width: 800px;
}

.my-progress-legacy-note {
    color: #fbbf24;
}

.my-progress-charts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.my-progress-chart-wrap {
    position: relative;
    background: #232323;
    border: 1px solid #2b2b2b;
    border-radius: 14px;
    padding: 16px;
}

.my-progress-chart-wrap--tall {
    height: 320px;
}

.my-progress-chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 960px) {
    .my-progress-chart-row {
        grid-template-columns: 1fr;
    }
}

.my-progress-chart-wrap--pie {
    height: 280px;
}

.my-progress-chart-wrap--medium {
    height: 280px;
}

/* Filter Buttons in Bug Reports Tab */
.filter-buttons {
    margin-bottom: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.status-filter-btn {
    background: linear-gradient(135deg, #10b981, #10b981);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.status-filter-btn:hover {
    background: linear-gradient(135deg, #10b981, #10b981);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.status-filter-btn:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* Trello-like view styles */
.trello-board {
    display: flex;
    gap: 15px; /* Reduced gap for better spacing */
    padding: 20px 0;
    overflow-x: auto;
    width: 100%;
}

.trello-column {
    flex: 1 1 33.33%; /* Each column takes up exactly 33% of the board */
    min-width: 300px; /* Minimum width to ensure readability */
    /* Column sits just barely above the app background so the elevated
       cards inside can pop. Roblox-Creator-Hub style depth hierarchy:
       body (#0f0f0f) → column (#191919) → card (#232323). */
    background-color: #191919;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 15px;
    min-height: 300px;
    box-sizing: border-box;
}

.trello-column h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #ffffff; /* White text for headings */
}

/* Per-column view sort (Default / Highest bug count) — title stays centered,
   the dropdown sits below it, right-aligned. */
.trello-col-head { display: flex; flex-direction: column; align-items: stretch; }
.trello-col-head h3 { margin-bottom: 8px; }
.trello-sort-select {
    align-self: flex-end;
    margin-bottom: 12px;
    background: #191919;
    color: #d4d4d4;
    border: 1px solid #2b2b2b;
    border-radius: 6px;
    font-size: 0.72rem;
    padding: 3px 8px;
    cursor: pointer;
}
.trello-sort-select:hover { border-color: #3b3b3b; }
.trello-sort-select:focus { outline: none; border-color: #4da3ff; }

.trello-cards {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between cards */
}

.trello-card {
    position: relative; /* For absolute positioning of the unassign button */
    /* #191919 is the canonical "secondary dark" surface color for this theme
       — purple-tinted to match the Royale High aesthetic and elevated enough
       above the column to pop cleanly. Border is a slightly-transparent light
       so it reads as a soft edge rather than a hard line. */
    background-color: #191919;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px;
    padding-top: 40px; /* Add top padding to prevent unassign button from covering content */
    margin-bottom: 10px;
    cursor: move;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    color: #bebebe;
}

.trello-card:hover {
    background-color: #2b2b2b;
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.trello-card h4 {
    margin: 0 0 10px 0;
    font-size: 1rem;          /* 16px — was 14px; bigger heading for at-a-glance scanning */
    font-weight: 600;
    color: #ffffff;
    line-height: 1.35;
}

.trello-card p {
    margin: 0 0 8px 0;
    font-size: 0.9rem;        /* ~14.4px — was 12px; primary body text the dev reads for hours */
    line-height: 1.55;        /* Comfortable for multi-line stack traces / bug descriptions */
    color: #bebebe;
    word-break: break-word;   /* Long error messages without spaces shouldn't blow out the card */
}

.trello-card .bug-item {
    border-top: 1px solid #2b2b2b; /* Darker border for separation */
    padding-top: 8px;
    margin-top: 8px;
}

.trello-card h5 {
    margin: 10px 0 5px 0;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff; /* White for subheadings */
}

.trello-card.dragging {
    opacity: 0.7; /* Slightly less opaque when dragging */
    border: 2px dashed #4da3ff; /* Muted blue dashed border when dragging */
}

.trello-column.drag-over {
    background-color: #232323; /* Slightly lighter background when dragging over */
    border: 2px dashed #4da3ff; /* Muted blue dashed border */
}

.trello-card .notes-container {
    margin-top: 10px;
}

.trello-card .note-item {
    background-color: #232323; /* Even darker background for notes */
    border: 1px solid #2b2b2b;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 5px;
}

.trello-card .note-item p {
    margin: 0;
    font-size: 11px;
}

.trello-card .note-item button {
    margin-top: 5px;
    padding: 3px 8px;
    font-size: 10px;
    border-radius: 3px;
    cursor: pointer;
}

.trello-card .edit-note-btn {
    background-color: #0071ff; /* Muted blue for edit button */
    color: #ffffff;
    border: none;
    margin-right: 5px;
}

.trello-card .edit-note-btn:hover {
    background-color: #0071ff; /* Darker blue on hover */
}

.trello-card .remove-note-btn {
    background-color: #ef4444; /* Red for remove button */
    color: #ffffff;
    border: none;
}

.trello-card .remove-note-btn:hover {
    background-color: #dc2626; /* Darker red on hover */
}

.trello-card .add-note-btn {
    background-color: #10b981; /* Green for add note button */
    color: #ffffff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

/* Start / Complete + Unassign (Trello card top-right) */
.trello-card .trello-card-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 62%;
    z-index: 1;
}

.trello-card .trello-card-actions .unassign-task-btn {
    position: static;
    top: auto;
    right: auto;
}

/* ---------- Link / Merge controls on cards ---------- */
.trello-link-merge-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(67, 67, 67, 0.6);
}

.trello-merge-btn,
.trello-link-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(165, 165, 165, 0.25);
    background: rgba(27, 27, 27, 0.6);
    color: #d4d4d4;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.trello-merge-btn:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.6);
    color: #fbbf24;
}

.trello-link-btn:hover {
    background: rgba(77, 163, 255, 0.18);
    border-color: rgba(77, 163, 255, 0.6);
    color: #99ccff;
}

.linked-tasks-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(67, 67, 67, 0.6);
}

.linked-tasks-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a8a8a;
    margin-right: 2px;
}

.linked-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    background: rgba(77, 163, 255, 0.16);
    border: 1px solid rgba(77, 163, 255, 0.35);
    color: #d4d4d4;
    font-size: 0.75rem;
    max-width: 100%;
}

.linked-task-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.linked-task-unlink-btn {
    background: transparent;
    border: none;
    color: #bebebe;
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    font-size: 0.95rem;
    border-radius: 999px;
}

.linked-task-unlink-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

/* ---------- Merge mode visual states + banner ---------- */
.trello-card.merge-source {
    outline: 2px solid #fbbf24;
    outline-offset: -2px;
}

.trello-card.merge-target-eligible {
    cursor: pointer;
    outline: 1px dashed rgba(251, 191, 36, 0.4);
    outline-offset: -2px;
}

.trello-card.merge-target-eligible:hover {
    outline-color: rgba(251, 191, 36, 0.9);
}

.trello-card.merge-target-selected {
    outline: 2px solid #fbbf24;
    outline-offset: -2px;
    background: rgba(245, 158, 11, 0.08);
}

.trello-merge-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    background: linear-gradient(135deg, #92400e 0%, #92400e 100%);
    color: #fde68a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.trello-merge-banner-title {
    flex: 1;
    font-size: 0.9rem;
}

.trello-merge-banner-title strong {
    color: #fff;
}

.trello-merge-banner-count {
    font-size: 0.8rem;
    color: #fde68a;
    font-weight: 600;
}

.trello-merge-confirm-btn,
.trello-merge-cancel-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.trello-merge-confirm-btn {
    background: #fff;
    color: #92400e;
}

.trello-merge-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.trello-merge-cancel-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fde68a;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.trello-merge-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ---------- Link picker modal ---------- */
.trello-link-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.trello-link-modal {
    background: #0f0f0f;
    border: 1px solid #191919;
    border-radius: 12px;
    width: 540px;
    max-width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.trello-link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #191919;
}

.trello-link-modal-header h3 {
    margin: 0;
    color: #ebebeb;
    font-size: 1.05rem;
    font-weight: 600;
}

.trello-link-modal-close {
    background: transparent;
    border: none;
    color: #bebebe;
    font-size: 1.4rem;
    width: 28px;
    height: 28px;
    line-height: 24px;
    border-radius: 6px;
    cursor: pointer;
}

.trello-link-modal-close:hover {
    background: rgba(165, 165, 165, 0.15);
    color: #ebebeb;
}

.trello-link-modal-body {
    overflow-y: auto;
    padding: 12px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trello-link-modal-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(43, 43, 43, 0.6);
    border: 1px solid #191919;
    color: #ebebeb;
    cursor: pointer;
    transition: all 0.15s ease;
}

.trello-link-modal-row:hover {
    background: rgba(77, 163, 255, 0.15);
    border-color: rgba(77, 163, 255, 0.5);
}

.trello-link-modal-row-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.trello-link-modal-row-subtitle {
    font-size: 0.78rem;
    color: #bebebe;
    line-height: 1.4;
}

.trello-link-modal-empty {
    padding: 32px 12px;
    text-align: center;
    color: #bebebe;
    margin: 0;
}

.trello-card .trello-quick-status-btn {
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.trello-card .trello-quick-start-btn {
    background-color: #0071ff;
    color: #ffffff;
}

.trello-card .trello-quick-start-btn:hover {
    background-color: #0071ff;
}

.trello-card .trello-quick-complete-btn {
    background-color: #10b981;
    color: #ffffff;
}

.trello-card .trello-quick-complete-btn:hover {
    background-color: #10b981;
}

.trello-card .trello-archive-btn {
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background-color: #f59e0b;
    color: #ffffff;
}

.trello-card .trello-archive-btn:hover {
    background-color: #f59e0b;
}

/* Unassign Task Button (Trello View) */
.trello-card .unassign-task-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #ef4444; /* Red background */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.trello-card .collaborators-display {
    position: absolute;
    top: 5px;
    left: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: #d4d4d4;
}

.trello-card .add-collaborator-card-btn {
    background: #10b981;
    color: white;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.trello-card .unassign-task-btn:hover {
    background-color: #dc2626; /* Darker red on hover */
}

/* Drop Slot Styles */
.drop-slot {
    height: 10px; /* Height of the drop slot */
    width: 100%;
    border: 2px dashed transparent; /* Invisible by default */
    margin: 5px 0;
    transition: all 0.3s ease;
}

.drop-slot.drag-over-slot {
    border: 2px dashed #4da3ff; /* Dotted border when dragging over */
    background-color: rgba(77, 163, 255, 0.1); /* Slight blue tint */
}

.drop-slot.highlighted {
    border-color: #888;
}


/* Bug Cluster Details Div */
.bug-cluster-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    right: 0;
    top: 0;
    width: 350px; /* Fixed width for the div */
    height: 100%;
    background-color: #191919; /* Darker background for div */
    border-left: 1px solid #2b2b2b; /* Subtle gray border on the left */
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3); /* Shadow on the left for depth */
    color: #bebebe; /* Light gray text */
    overflow-y: auto;
}

/* Bug Details Div */
.bug-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    right: 0;
    top: 0;
    width: 350px; /* Fixed width for the div */
    height: 100%;
    background-color: #191919; /* Darker background for div */
    border-left: 1px solid #2b2b2b; /* Subtle gray border on the left */
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3); /* Shadow on the left for depth */
    color: #bebebe; /* Light gray text */
    overflow-y: auto;
}

/* Shared Content Styles */
.bug-cluster-modal-content,
.bug-modal-content {
    position: relative;
    padding: 20px;
    padding-top: 40px; /* Increased padding for unassign button */
}

.bug-cluster-modal-content .modal-close,
.bug-modal-content .modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #bebebe; /* Light gray close button */
    cursor: pointer;
    transition: color 0.3s ease;
}

.bug-cluster-modal-content .modal-close:hover,
.bug-modal-content .modal-close:hover {
    color: #ef4444; /* Red on hover */
}

.bug-cluster-modal-content h3,
.bug-modal-content h3 {
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff; /* White for headings */
    line-height: 1.2;
}

.bug-cluster-modal-content p,
.bug-modal-content p {
    margin: 5px 0;
    font-size: 14px;
    color: #bebebe; /* Light gray text */
    line-height: 1.5;
}

.bug-cluster-modal-content .notes-container,
.bug-modal-content .notes-container {
    margin: 20px 0;
    padding: 15px;
    background-color: #232323; /* Darker background for notes section */
    border-radius: 8px;
    border: 1px solid #2b2b2b; /* Subtle gray border */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
}

.bug-cluster-modal-content .note-item,
.bug-modal-content .note-item {
    background-color: #232323; /* Slightly lighter background for individual notes */
    border: 1px solid #2b2b2b;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.bug-cluster-modal-content .note-item p,
.bug-modal-content .note-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.bug-cluster-modal-content .note-item button,
.bug-modal-content .note-item button {
    margin-top: 8px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bug-cluster-modal-content .edit-note-btn,
.bug-modal-content .edit-note-btn {
    background-color: #0071ff; /* Muted blue for edit button */
    color: #ffffff;
    border: none;
    margin-right: 8px;
}

.bug-cluster-modal-content .edit-note-btn:hover,
.bug-modal-content .edit-note-btn:hover {
    background-color: #0071ff; /* Darker blue on hover */
}

.bug-cluster-modal-content .remove-note-btn,
.bug-modal-content .remove-note-btn {
    background-color: #ef4444; /* Red for remove button */
    color: #ffffff;
    border: none;
}

.bug-cluster-modal-content .remove-note-btn:hover,
.bug-modal-content .remove-note-btn:hover {
    background-color: #dc2626; /* Darker red on hover */
}

.bug-cluster-modal-content .add-note-btn,
.bug-modal-content .add-note-btn {
    background-color: #10b981; /* Green for add note button */
    color: #ffffff;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
}

.bug-cluster-modal-content .add-note-btn:hover,
.bug-modal-content .add-note-btn:hover {
    background-color: #10b981; /* Darker green on hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.bug-cluster-modal-content .expandable-section,
.bug-modal-content .expandable-section {
    margin-top: 20px;
}

.bug-cluster-modal-content .expand-bugs-btn,
.bug-modal-content .expand-bugs-btn {
    padding: 8px 15px;
    background-color: #0071ff; /* Muted blue button */
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
}

.bug-cluster-modal-content .expand-bugs-btn:hover,
.bug-modal-content .expand-bugs-btn:hover {
    background-color: #0071ff; /* Darker blue on hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.bug-cluster-modal-content .bugs-container,
.bug-modal-content .bugs-container {
    margin-top: 10px;
    max-height: 300px; /* Increased height for better visibility */
    overflow-y: auto;
    background-color: #232323; /* Darker background */
    border: 1px solid #2b2b2b; /* Subtle gray border */
    border-radius: 8px;
    padding: 15px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
}

/* Custom scrollbar for bugs-container */
.bug-cluster-modal-content .bugs-container::-webkit-scrollbar,
.bug-modal-content .bugs-container::-webkit-scrollbar {
    width: 8px;
}

.bug-cluster-modal-content .bugs-container::-webkit-scrollbar-track,
.bug-modal-content .bugs-container::-webkit-scrollbar-track {
    background: #191919; /* Darker track */
    border-radius: 4px;
}

.bug-cluster-modal-content .bugs-container::-webkit-scrollbar-thumb,
.bug-modal-content .bugs-container::-webkit-scrollbar-thumb {
    background: #2b2b2b; /* Subtle gray thumb */
    border-radius: 4px;
}

.bug-cluster-modal-content .bugs-container::-webkit-scrollbar-thumb:hover,
.bug-modal-content .bugs-container::-webkit-scrollbar-thumb:hover {
    background: #6b6b6b; /* Slightly lighter on hover */
}

.bug-cluster-modal-content .bug-item,
.bug-modal-content .bug-item {
    border-bottom: 1px solid #2b2b2b; /* Divider between items */
    padding: 10px 0;
    transition: background 0.3s ease;
}

.bug-cluster-modal-content .bug-item:hover,
.bug-modal-content .bug-item:hover {
    background-color: #232323; /* Slight highlight on hover */
}

.bug-cluster-modal-content .bug-item:last-child,
.bug-modal-content .bug-item:last-child {
    border-bottom: none; /* Remove border for the last item */
}

.bug-cluster-modal-content .bug-item p,
.bug-modal-content .bug-item p {
    margin: 4px 0;
    font-size: 13px;
    color: #bebebe; /* Light gray text */
    line-height: 1.4;
}

/* Unassign Task Button in Div */
.bug-cluster-modal-content .modal-unassign-btn,
.bug-modal-content .modal-unassign-btn {
    position: absolute;
    top: 10px;
    right: 40px; /* Adjusted to avoid overlap with close button */
    background-color: #ef4444; /* Red background */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.bug-cluster-modal-content .modal-unassign-btn:hover,
.bug-modal-content .modal-unassign-btn:hover {
    background-color: #dc2626; /* Darker red on hover */
    transform: scale(1.1);
}

/* User Task Details Div */
.user-task-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    right: 0;
    top: 0;
    width: 350px; /* Fixed width for the div */
    height: 100%;
    background-color: #191919; /* Darker background for div */
    border-left: 1px solid #2b2b2b; /* Subtle gray border on the left */
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3); /* Shadow on the left for depth */
    color: #bebebe; /* Light gray text */
    overflow-y: auto;
}

/* Error Log Details Div */
.error-log-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    right: 0;
    top: 0;
    width: 350px; /* Fixed width for the div */
    height: 100%;
    background-color: #191919; /* Darker background for div */
    border-left: 1px solid #2b2b2b; /* Subtle gray border on the left */
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3); /* Shadow on the left for depth */
    color: #bebebe; /* Light gray text */
    overflow-y: auto;
}

/* Shared Content Styles for New Modals */
.user-task-modal-content,
.error-log-modal-content {
    position: relative;
    padding: 20px;
    padding-top: 40px; /* Increased padding for unassign button */
}

/* Shared Modal Close Button */
.user-task-modal-content .modal-close,
.error-log-modal-content .modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #bebebe; /* Light gray close button */
    cursor: pointer;
    transition: color 0.3s ease;
}

.user-task-modal-content .modal-close:hover,
.error-log-modal-content .modal-close:hover {
    color: #ef4444; /* Red on hover */
}

/* Shared Modal Title */
.user-task-modal-content h3,
.error-log-modal-content h3 {
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff; /* White for headings */
    line-height: 1.2;
}

/* Shared Modal Description */
.user-task-modal-content p,
.error-log-modal-content p {
    margin: 5px 0;
    font-size: 14px;
    color: #bebebe; /* Light gray text */
    line-height: 1.5;
}

/* Shared Notes Container */
.user-task-modal-content .notes-container,
.error-log-modal-content .notes-container {
    margin: 20px 0;
    padding: 15px;
    background-color: #232323; /* Darker background for notes section */
    border-radius: 8px;
    border: 1px solid #2b2b2b; /* Subtle gray border */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
}

/* Shared Note Item */
.user-task-modal-content .note-item,
.error-log-modal-content .note-item {
    background-color: #232323; /* Slightly lighter background for individual notes */
    border: 1px solid #2b2b2b;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-task-modal-content .note-item p,
.error-log-modal-content .note-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

/* Shared Note Buttons */
.user-task-modal-content .note-item button,
.error-log-modal-content .note-item button {
    margin-top: 8px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-task-modal-content .edit-note-btn,
.error-log-modal-content .edit-note-btn {
    background-color: #0071ff; /* Muted blue for edit button */
    color: #ffffff;
    border: none;
    margin-right: 8px;
}

.user-task-modal-content .edit-note-btn:hover,
.error-log-modal-content .edit-note-btn:hover {
    background-color: #0071ff; /* Darker blue on hover */
}

.user-task-modal-content .remove-note-btn,
.error-log-modal-content .remove-note-btn {
    background-color: #ef4444; /* Red for remove button */
    color: #ffffff;
    border: none;
}

.user-task-modal-content .remove-note-btn:hover,
.error-log-modal-content .remove-note-btn:hover {
    background-color: #dc2626; /* Darker red on hover */
}

/* Shared Add Note Button */
.user-task-modal-content .add-note-btn,
.error-log-modal-content .add-note-btn {
    background-color: #10b981; /* Green for add note button */
    color: #ffffff;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
}

.user-task-modal-content .add-note-btn:hover,
.error-log-modal-content .add-note-btn:hover {
    background-color: #10b981; /* Darker green on hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Expandable Section for Error Log Modal */
.error-log-modal-content .expandable-section {
    margin-top: 20px;
}

.error-log-modal-content .expand-details-btn {
    padding: 8px 15px;
    background-color: #0071ff; /* Muted blue button */
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
}

.error-log-modal-content .expand-details-btn:hover {
    background-color: #0071ff; /* Darker blue on hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.error-log-modal-content .details-container {
    margin-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    background-color: #232323;
    border: 1px solid #2b2b2b;
    border-radius: 8px;
    padding: 15px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.error-log-modal-content .details-container::-webkit-scrollbar {
    width: 8px;
}

.error-log-modal-content .details-container::-webkit-scrollbar-track {
    background: #191919;
    border-radius: 4px;
}

.error-log-modal-content .details-container::-webkit-scrollbar-thumb {
    background: #2b2b2b;
    border-radius: 4px;
}

.error-log-modal-content .details-container::-webkit-scrollbar-thumb:hover {
    background: #6b6b6b;
}

.error-log-modal-content .error-item {
    border-bottom: 1px solid #2b2b2b;
    padding: 10px 0;
    transition: background 0.3s ease;
}

.error-log-modal-content .error-item:hover {
    background-color: #232323;
}

.error-log-modal-content .error-item:last-child {
    border-bottom: none;
}

.error-log-modal-content .error-item p {
    margin: 4px 0;
    font-size: 13px;
    color: #bebebe;
    line-height: 1.4;
}

/* Unassign Task Button in Div */
.user-task-modal-content .modal-unassign-btn,
.error-log-modal-content .modal-unassign-btn {
    position: absolute;
    top: 10px;
    right: 40px;
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.user-task-modal-content .modal-unassign-btn:hover,
.error-log-modal-content .modal-unassign-btn:hover {
    background-color: #dc2626;
    transform: scale(1.1);
}

.chat-btn {
    padding: 5px 10px;
    background-color: #0071ff; /* Muted blue to match theme */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-top: 5px; /* Space from previous content */
    display: inline-block; /* Ensure it fits within the layout */
}

.chat-btn:hover {
    background-color: #0071ff; /* Darker blue on hover */
}

/* Ensure bug-item layout accommodates the chat button */
.bug-cluster-modal .bug-item {
    padding: 10px;
    border-bottom: 1px solid #2b2b2b;
}

.bug-cluster-modal .bug-item:last-child {
    border-bottom: none;
}

.archive-tab {
    display: block;
    margin: 10px 0;
    cursor: pointer;
    color: #4da3ff;
}
.archive-view {
    margin-top: 20px;
    display: none;
}
.trello-column {
    min-height: 200px;
}

/* Permissions Display */
#permissions-display {
    display: none !important; /* Hidden as requested */
    margin-bottom: 20px;
}

.permissions-banner {
    background: linear-gradient(135deg, #191919 0%, #191919 100%);
    border: 1px solid #4a4a4a;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.permissions-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #ebebeb;
}

.permissions-header i {
    color: #4da3ff;
    font-size: 1.1rem;
}

.permissions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.permission-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #0071ff 0%, #0071ff 100%);
    color: #ffffff;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.permission-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.permission-badge i {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Merge Mode Overlay */
.merge-mode-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    pointer-events: none;
}

.merge-mode-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #0071ff 0%, #0071ff 100%);
    color: white;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 10001;
    pointer-events: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.merge-mode-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.merge-mode-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.merge-done-btn {
    padding: 10px 24px;
    background: #10b981;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.merge-done-btn:hover {
    background: #10b981;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

.merge-done-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.merge-confirm-btn {
    padding: 10px 24px;
    background: #10b981;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.merge-confirm-btn:hover {
    background: #10b981;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

.merge-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.merge-cancel-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 6px;
    transition: all 0.2s;
    font-weight: 500;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.merge-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.merge-done-container {
    display: none;
}

/* Merge button in cluster row */
.merge-cluster-btn {
    margin-left: 12px;
    padding: 6px 14px;
    background: #6b6b6b;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.merge-cluster-btn:hover {
    background: #4a4a4a;
    transform: translateY(-1px);
}

/* Assign button in cluster row - same style as merge */
.add-dev-btn {
    margin-left: 12px;
    padding: 6px 14px;
    background: #6b6b6b;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.add-dev-btn:hover {
    background: #4a4a4a;
    transform: translateY(-1px);
}

/* Cluster highlighting - simple border/background, no layout shift */
.cluster-header.merge-source-highlight {
    background: rgba(77, 163, 255, 0.15) !important;
    border: 3px solid #4da3ff !important;
    box-shadow: inset 0 0 0 1px rgba(77, 163, 255, 0.3) !important;
}

.cluster-header.merge-selected-highlight {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 3px solid #10b981 !important;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.3) !important;
}

.cluster-header.merge-selectable {
    transition: all 0.2s;
}

.cluster-header.merge-selectable:hover {
    background: rgba(77, 163, 255, 0.1) !important;
    border: 2px dashed #4da3ff !important;
}

/* =========================================================================
   MOBILE-RESPONSIVE STYLES
   -------------------------------------------------------------------------
   Breakpoints:
     - 960px → tablet: kanban columns stack vertically, charts go single-col
     -  768px → small tablet / large phone: sidebar collapses off-canvas
                behind a hamburger button, main content goes full-width,
                toolbars wrap, modals lose their fixed widths
     -  480px → phone: tighter padding everywhere, smaller header sizes
   ========================================================================= */

/* Hamburger toggle button — only ever visible on mobile (display: none here
   at desktop). Fixed top-left, well above sidebar z-index so it can act as
   a close button when the sidebar is open. */
.mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #191919;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ebebeb;
    font-size: 1.1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.mobile-nav-toggle:hover {
    background: #2b2b2b;
}

.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

body.sidebar-open .mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* ====== Tablet & narrower: kanban columns stack, two-column grids unwrap == */
@media (max-width: 960px) {
    .trello-board {
        flex-direction: column;
        gap: 12px;
    }

    .trello-column {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        min-height: auto;
    }

    /* Dev-tools result modal grid (was 2 columns side-by-side) */
    .dev-tools-match-grid {
        grid-template-columns: 1fr;
    }
}

/* ====== Small tablet / large phone: sidebar goes off-canvas =============== */
@media (max-width: 768px) {

    /* The desktop layout was display:flex with the sidebar holding the
       viewport open at 240px. On mobile we want the sidebar to float over
       the content rather than push it, so it doesn't steal horizontal space.
       Also relinquish the desktop's `overflow: hidden; height: 100vh` —
       mobile users expect body-level scrolling, not nested inner scrolls. */
    body {
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
    }

    /* Body now scrolls, so main-content shouldn't have its own scroll
       container (would create a nested scroll trap). */
    .main-content {
        overflow-y: visible;
        height: auto;
    }

    /* When the off-canvas sidebar is open, lock background scrolling so
       tapping the menu doesn't accidentally scroll the page underneath. */
    body.sidebar-open {
        overflow: hidden;
    }

    /* Player profile tabs (inline-styled) — let them wrap onto multiple
       lines instead of overflowing the viewport. */
    #player-profile-tabs {
        flex-wrap: wrap;
    }

    /* Show the hamburger + backdrop on this breakpoint. */
    .mobile-nav-toggle {
        display: flex;
    }

    .mobile-nav-backdrop {
        display: block;
    }

    /* Sidebar slides in from the left when body.sidebar-open is set. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1050;
        width: min(82vw, 320px);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.5);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    /* Main content takes full width, with extra top padding so the
       hamburger button doesn't overlap the page title. */
    .main-content {
        width: 100%;
        min-height: 100vh;
        padding: 64px 14px 20px 14px;
    }

    /* Content section headings — give them room next to the hamburger. */
    .content-section h2 {
        margin-top: 0;
        font-size: 1.5rem;
    }

    /* Profile tabs: let them wrap onto multiple lines instead of overflowing. */
    #profile-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }

    #profile-tabs a {
        padding: 7px 12px;
        font-size: 0.82rem;
    }

    /* Dev-tools toolbar: stack the inputs vertically so they fit. */
    .dev-tools-toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .dev-tools-field,
    .dev-tools-checkbox {
        width: 100%;
    }

    .dev-tools-field input,
    .dev-tools-field select {
        width: 100%;
    }

    /* All modal backdrops: minimal padding so the modal can claim the screen. */
    .dev-tools-result-backdrop,
    .cluster-broadcast-backdrop,
    .trello-link-modal-backdrop,
    .popup-overlay {
        padding: 8px;
    }

    .dev-tools-result-modal,
    .cluster-broadcast-modal,
    .trello-link-modal,
    .popup {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh;
    }

    /* Cluster modal (active one in showBugClusterModal) is sized with
       inline styles; just cap its width via specificity. */
    #cluster-modal,
    .cluster-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        max-height: 92vh;
    }

    /* Cards: tighter horizontal padding, less aggressive top padding. */
    .trello-card {
        padding: 10px;
        padding-top: 42px;
    }

    .trello-card h4 {
        font-size: 0.95rem;
    }

    /* Tables: let them scroll horizontally inside their container instead
       of bursting out of the viewport. Wrap a generic rule for any .table-
       like element. */
    table,
    .scrollable-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Sidebar nav-link tap targets — make sure they're comfortable. */
    .sidebar-nav ul li {
        padding: 12px 16px;
        margin: 1px 8px;
        font-size: 0.95rem;
    }

    /* Login box: full width with small side padding. */
    .login-box {
        padding: 24px 18px;
        border-radius: 12px;
    }

    /* Filter button rows wrap. */
    .filter-buttons {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Emulation banner stacks. */
    .emulation-banner-content {
        flex-wrap: wrap;
    }
}

/* ====== Phone-sized: tighter everything ================================== */
@media (max-width: 480px) {
    .main-content {
        padding: 60px 10px 16px 10px;
    }

    .content-section h2 {
        font-size: 1.3rem;
    }

    .trello-card {
        padding: 10px;
        padding-top: 40px;
    }

    .trello-card h4 {
        font-size: 0.9rem;
    }

    .trello-card p {
        font-size: 0.85rem;
    }

    /* Modal headers shrink a bit so the close button stays in reach. */
    .dev-tools-result-header h3,
    .cluster-broadcast-header h3,
    .trello-link-modal-header h3 {
        font-size: 0.95rem;
    }

    /* Cluster card buttons (Unassign / Start / Complete) wrap if needed. */
    .trello-card-actions {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* "View Completed Archive" — full-width button looks better than tiny. */
    .view-archive-btn {
        width: 100%;
    }
}

/* Disable hover effects on touch devices — they get stuck "stuck-hover" on
   tap and look ugly. Use the hover media query to apply hover styles only
   where hover is actually meaningful (mouse, trackpad). */
@media (hover: none) {
    .trello-card:hover {
        transform: none;
    }
}

/* =========================================================================
   CARD DETAIL MODALS — centered, dimmed-backdrop style
   -------------------------------------------------------------------------
   The 4 card-detail modals (bug cluster / bug / error log / user task) used
   to slam open as 350px right-side drawers, which pulled the user's eye
   away from the card they just clicked. They now open as centered cards
   over a dimmed backdrop — Trello-style — so the focus stays in the middle
   of the screen where the action is.
   The JS already wraps each modal as:
       <div class="X-modal"><div class="X-modal-content">...</div></div>
   so the outer becomes the backdrop and the inner becomes the centered
   card. These rules are at the bottom of the file so they override the
   older drawer-style rules without needing to surgically edit four
   scattered blocks.
   ========================================================================= */

.bug-cluster-modal,
.bug-modal,
.error-log-modal,
.user-task-modal {
    /* Backdrop — full screen, dimmed, click-outside closes (JS handler).
       Uses flex to vertically + horizontally center the inner content card.
       jQuery's .fadeIn() restores the CSS-defined display value (flex)
       after .fadeOut() sets display:none, so the centering survives toggles. */
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: none;             /* JS toggles to `flex` via fadeIn */
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
    overflow: auto;            /* fallback scroll if the screen is shorter than the card */
    padding: 20px;
    box-sizing: border-box;
}

/* When jQuery's .fadeIn() restores display, it computes the default for the
   tag (block). Force flex on the visible state so centering wins. */
.bug-cluster-modal[style*="display: block"],
.bug-modal[style*="display: block"],
.error-log-modal[style*="display: block"],
.user-task-modal[style*="display: block"] {
    display: flex !important;
}

.bug-cluster-modal-content,
.bug-modal-content,
.error-log-modal-content,
.user-task-modal-content {
    /* The actual centered modal card. */
    position: relative;        /* override absolute-from-old-content rules */
    top: auto;
    left: auto;
    transform: none;
    margin: 0;                 /* centering handled by parent flex now */
    width: 640px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #191919;       /* canonical secondary surface */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    padding: 24px 28px;
    /* Soft scale-in on open. jQuery's .fadeIn() flips opacity, so this just
       overlays a subtle pop on top of that. */
    animation: card-modal-pop 0.18s ease-out;
}

@keyframes card-modal-pop {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Close (X) button — keep it visible against the new surface. */
.bug-cluster-modal-content .modal-close,
.bug-modal-content .modal-close,
.error-log-modal-content .modal-close,
.user-task-modal-content .modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 1.1rem;
    color: #bebebe;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bug-cluster-modal-content .modal-close:hover,
.bug-modal-content .modal-close:hover,
.error-log-modal-content .modal-close:hover,
.user-task-modal-content .modal-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ebebeb;
    border-color: rgba(255, 255, 255, 0.16);
}

/* Phone — go near-full-screen for breathing room. */
@media (max-width: 600px) {
    .bug-cluster-modal,
    .bug-modal,
    .error-log-modal,
    .user-task-modal {
        padding: 8px;
    }
    .bug-cluster-modal-content,
    .bug-modal-content,
    .error-log-modal-content,
    .user-task-modal-content {
        margin: 8px auto;
        max-height: calc(100vh - 16px);
        padding: 18px 16px;
    }
}

/* =========================================================================
   CLUSTER DETAIL MODAL — intuitive layout
   -------------------------------------------------------------------------
   Tags ARE the title (no "Bug Report Cluster" header — that was engineery).
   Reports inside the cluster read as quoted player reports with relative
   timestamps and action buttons, not as DB rows with ID / Cluster ID /
   Description labels.
   ========================================================================= */

.cluster-detail-modal {
    /* Override the legacy padding-top:40px (was making room for an absolute
       Unassign button that's now in the toolbar). */
    padding: 22px 26px 24px 26px;
}

.cluster-detail-header {
    margin: 0 0 18px 0;
    padding-right: 44px;  /* keep room for the close X */
}

.cluster-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* Big, bold tags — they're the visual identity of the cluster. */
.cluster-detail-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: rgba(77, 163, 255, 0.18);
    color: #99ccff;
    border: 1px solid rgba(77, 163, 255, 0.35);
    line-height: 1.3;
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.22);
}

/* Type-coded coloring — mirror the small chip system but at this larger
   scale so the dev gets the same color-language they're used to. */
.cluster-detail-tag[data-type="what"]    { background: rgba(248, 113, 113, 0.16); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
.cluster-detail-tag[data-type="where"]   { background: rgba(77, 163, 255, 0.16); color: #99ccff; border-color: rgba(77, 163, 255, 0.35); }
.cluster-detail-tag[data-type="who"]     { background: rgba(167, 139, 250, 0.16); color: #ddd6fe; border-color: rgba(167, 139, 250, 0.35); }
.cluster-detail-tag[data-type="when"]    { background: rgba(251, 191, 36, 0.16); color: #fde68a; border-color: rgba(251, 191, 36, 0.35); }

.cluster-detail-tag-empty {
    background: rgba(165, 165, 165, 0.12);
    color: #bebebe;
    border-color: rgba(165, 165, 165, 0.25);
    font-style: italic;
    font-weight: 500;
}

.cluster-detail-subtitle {
    margin: 0;
    color: #bebebe;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Footer — primary + destructive actions live at the bottom of the modal
   so they don't compete with the reports for attention. */
.cluster-detail-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* The status slot is display:contents so the button inside becomes a
   direct flex child of the footer (sizes to its content, sits inline
   with the other actions). Collapses to nothing when empty. */
.cluster-detail-status-slot {
    display: contents;
}

/* ---- Status-change button in card detail modals ----
   Error-log modal: full-width row above the notes. Cluster modal: inline
   action in the footer. Colors match the board's quick-status buttons:
   Start = blue, Complete = green, Reopen = neutral. */
.modal-status-action-row {
    margin: 0 0 16px 0;
}

.modal-status-action-btn {
    width: 100%;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* In the cluster footer the button sizes to content, not full-width. */
.cluster-detail-status-slot .modal-status-action-btn {
    width: auto;
    padding: 8px 14px;
    font-size: 0.85rem;
}

.modal-status-start {
    background: rgba(77, 163, 255, 0.18);
    color: #99ccff;
    border-color: rgba(77, 163, 255, 0.45);
}
.modal-status-start:hover {
    background: rgba(77, 163, 255, 0.3);
    color: #99ccff;
    border-color: rgba(77, 163, 255, 0.7);
}

.modal-status-complete {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.45);
}
.modal-status-complete:hover {
    background: rgba(34, 197, 94, 0.3);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.7);
}

.modal-status-reopen {
    background: rgba(165, 165, 165, 0.14);
    color: #d4d4d4;
    border-color: rgba(165, 165, 165, 0.3);
}
.modal-status-reopen:hover {
    background: rgba(165, 165, 165, 0.24);
    color: #ebebeb;
    border-color: rgba(165, 165, 165, 0.5);
}

/* Override the legacy `.modal-unassign-btn` rule that absolute-positions it
   to top:10/right:40 — that was for the old top-of-modal Unassign. Now it
   lives in the footer as a normal flex child, and the legacy red-bg styles
   are replaced by the .cluster-detail-action-danger outline style. */
.cluster-detail-footer .modal-unassign-btn {
    position: static;
    top: auto;
    right: auto;
    background-color: transparent;
    color: #fca5a5;
    padding: 8px 14px;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cluster-detail-footer .modal-unassign-btn:hover {
    background-color: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    transform: none;       /* override the legacy scale(1.1) hover */
}

.cluster-detail-action {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid rgba(77, 163, 255, 0.4);
    background: rgba(77, 163, 255, 0.15);
    color: #99ccff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cluster-detail-action:hover {
    background: rgba(77, 163, 255, 0.25);
    border-color: rgba(77, 163, 255, 0.6);
    color: #ebebeb;
}

.cluster-detail-action-danger {
    background: transparent;
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.4);
}

.cluster-detail-action-danger:hover {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.7);
    color: #fca5a5;
}

/* Section containers — give each its own breathing room. */
.cluster-detail-section {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cluster-detail-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.cluster-detail-section-title {
    margin: 0 0 10px 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #bebebe;
}

.cluster-detail-add-note {
    margin-top: 10px;
    padding: 7px 14px;
    border-radius: 6px;
    background: transparent;
    color: #bebebe;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cluster-detail-add-note:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ebebeb;
}

/* The robot on a cluster card. Small and quiet: it sits in the corner and does
   not compete with the tags, which are what identifies the card. */
.card-bot-row {
    float: right;
    margin: -2px 0 0 6px;
}

.ask-bot-btn {
    background: rgba(88, 101, 242, 0.12);
    color: #c7cdff;
    border: 1px solid rgba(88, 101, 242, 0.4);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ask-bot-btn:hover {
    background: rgba(88, 101, 242, 0.24);
    border-color: rgba(88, 101, 242, 0.75);
    color: #eef0ff;
}

/* The bot narrating itself while it works. Quiet on purpose: it sits between
   the bubbles as a line of activity, not as something said. */
.bot-chat-status {
    margin: 6px 4px;
    padding-left: 10px;
    border-left: 2px solid rgba(88, 101, 242, 0.45);
    color: #9aa0a6;
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.45;
}

body.theme-light .bot-chat-status { color: #57606a; }

.bot-chat-waiting {
    padding: 6px 12px;
    font-size: 0.78rem;
    color: #9aa0a6;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bot-chat-empty {
    color: #9aa0a6;
    font-size: 0.85rem;
    line-height: 1.55;
    padding: 4px 2px;
}

.bot-chat-via {
    color: #8e8e8e;
    font-size: 0.75rem;
    margin-left: 6px;
}

/* Inside a chat bubble the note body should not carry its own outer spacing. */
.chat-message .note-body { margin: 4px 0 0 0; }
.chat-message .note-body p:last-child { margin-bottom: 0; }

body.theme-light .ask-bot-btn { background: rgba(88, 101, 242, 0.08); color: #4149c9; }
body.theme-light .ask-bot-btn:hover { background: rgba(88, 101, 242, 0.16); color: #2f36a8; }
body.theme-light .bot-chat-waiting,
body.theme-light .bot-chat-empty { color: #57606a; }

/* Rendered note bodies. The bot writes a verdict line, then named sections,
   then numbered repro steps, and all of it used to collapse into one paragraph
   because the note was injected as plain text. */
.note-body { margin: 0 0 6px 0; }
.note-body p { margin: 0 0 8px 0; line-height: 1.5; }
.note-body p:last-child { margin-bottom: 0; }

.note-verdict {
    font-weight: 700;
    font-size: 0.95rem;
    color: #ebebeb;
    margin: 0 0 8px 0;
}

.note-head {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9aa0a6;
    margin: 12px 0 4px 0;
}
.note-head:first-child { margin-top: 0; }

.note-body ol.note-steps,
.note-body ul.note-steps {
    margin: 0 0 8px 0;
    padding-left: 20px;
}
.note-body ol.note-steps li,
.note-body ul.note-steps li { margin: 2px 0; line-height: 1.5; }

.note-body code {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.85em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-word;
}

.note-meta {
    color: #8e8e8e;
    font-size: 0.78rem;
    margin-top: 6px;
}

/* When the newest report landed. A big cluster that went quiet three weeks ago
   should not look the same as one still filling up today. */
.latest-report-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #9aa0a6;
    font-size: 0.75rem;
    white-space: nowrap;
}

body.theme-light .note-verdict { color: #1f2328; }
body.theme-light .note-head { color: #57606a; }
body.theme-light .note-body code { background: rgba(0, 0, 0, 0.06); }
body.theme-light .note-meta { color: #6e7781; }
body.theme-light .latest-report-chip { background: rgba(0, 0, 0, 0.05); color: #57606a; }

/* Reports section sits directly under the cluster tags — it's the primary
   content. First report always visible; the rest are hidden behind a
   "Show N more reports" toggle so the modal stays scannable when a
   cluster has dozens of reports. */
.cluster-detail-reports-section {
    /* Pull the report block tight against the header */
    padding-top: 0;
}

.cluster-detail-reports {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Collapsed state — all reports after the first are hidden. */
.cluster-detail-reports[data-collapsed="true"] .cluster-report-item:not(:first-child) {
    display: none;
}

/* "Show N more reports" / "Show less" — secondary link-style action so it
   reads as a quiet affordance rather than a primary CTA. */
.cluster-detail-expand-reports {
    align-self: flex-start;
    margin-top: 10px;
    padding: 4px 10px;
    background: transparent;
    border: none;
    color: #99ccff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cluster-detail-expand-reports:hover {
    background: rgba(77, 163, 255, 0.1);
    color: #ebebeb;
}

/* Individual report — reads like a forum post / chat quote. */
.cluster-report-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 14px;
}

.cluster-report-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.82rem;
}

.cluster-report-user {
    color: #99ccff;
    font-weight: 600;
}

/* Clickable "look up this player's data" links — bug-reports cluster rows and
   my-profile assignment cards/modals. Reads as interactive without the harsh
   default underline; jumps to the Player Data Lookup page on click. */
.user-lookup-link {
    color: #99ccff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px dotted rgba(153, 204, 255, 0.5);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.user-lookup-link:hover {
    color: #99ccff;
    border-bottom-color: #99ccff;
    text-decoration: none;
}

.cluster-report-time {
    color: #8a8a8a;
    font-size: 0.78rem;
}

.cluster-report-quote {
    margin: 0 0 10px 0;
    color: #ebebeb;
    font-size: 0.9rem;
    line-height: 1.55;
    font-style: italic;
    quotes: "“" "”";
}

.cluster-report-quote::before { content: open-quote; color: #8a8a8a; margin-right: 2px; }
.cluster-report-quote::after  { content: close-quote; color: #8a8a8a; margin-left: 2px; }

.cluster-report-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.cluster-report-action {
    padding: 5px 12px;
    border-radius: 5px;
    background: rgba(77, 163, 255, 0.12);
    color: #99ccff;
    border: 1px solid rgba(77, 163, 255, 0.3);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cluster-report-action:hover {
    background: rgba(77, 163, 255, 0.22);
    color: #99ccff;
    border-color: rgba(77, 163, 255, 0.55);
}

.cluster-report-action-secondary {
    background: transparent;
    color: #bebebe;
    border-color: rgba(255, 255, 255, 0.1);
}

.cluster-report-action-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #d4d4d4;
    border-color: rgba(255, 255, 255, 0.22);
}

.cluster-report-empty {
    color: #8a8a8a;
    font-style: italic;
    text-align: center;
    padding: 20px;
    margin: 0;
}

/* =========================================================================
   INLINE NOTE EDITOR — used in card detail modals for Add/Edit Note.
   Replaces the old "open a second modal on top of the first modal" UX —
   editing happens right where the note belongs.
   ========================================================================= */

.inline-note-editor {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inline-note-editor-edit {
    margin-top: 4px;
}

.inline-note-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    background: #0f0f0f;
    color: #ebebeb;
    border: 1px solid rgba(77, 163, 255, 0.4);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.inline-note-textarea:focus {
    outline: none;
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

.inline-note-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.inline-note-save,
.inline-note-cancel {
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.inline-note-save {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.45);
}

.inline-note-save:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.28);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.7);
}

.inline-note-save:disabled {
    opacity: 0.6;
    cursor: wait;
}

.inline-note-cancel {
    background: transparent;
    color: #bebebe;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.inline-note-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ebebeb;
    border-color: rgba(255, 255, 255, 0.22);
}

/* =========================================================================
   MODERATION PAGE — professional table-driven views
   -------------------------------------------------------------------------
   Game Bans / Trade Bans sub-tabs. Replaces the old inline-styled
   "everything is a giant bright cell" look with a tight, scannable table
   layout. All colors / spacing live here; row markup carries only
   semantic class names (mod-row-banned, mod-status-permanent, etc).
   ========================================================================= */

/* ---- Tabs (in-page, sit under the page H2) ---- */
.mod-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 0;
}

.mod-tabs a {
    display: inline-block;
    padding: 10px 18px;
    color: #bebebe;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    margin-bottom: -1px;       /* sit on top of the bottom border */
}

.mod-tabs a:hover:not(.active) {
    color: #d4d4d4;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.mod-tabs a.active {
    color: #ebebeb;
    border-bottom-color: #4da3ff;
}

/* ---- Toolbar row (search + primary action) ---- */
.mod-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.mod-search {
    position: relative;
    flex: 0 1 360px;
    min-width: 220px;
}

.mod-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8a8a;
    font-size: 0.85rem;
    pointer-events: none;
}

.mod-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #ebebeb;
    font-size: 0.88rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mod-search-input:focus {
    outline: none;
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

.mod-search-input::placeholder {
    color: #6b6b6b;
}

/* ---- Buttons ---- */
.mod-btn {
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    border: 1px solid transparent;
    font-family: inherit;
}

.mod-btn-primary {
    background: rgba(77, 163, 255, 0.18);
    color: #99ccff;
    border-color: rgba(77, 163, 255, 0.4);
}

.mod-btn-primary:hover {
    background: rgba(77, 163, 255, 0.28);
    color: #ebebeb;
    border-color: rgba(77, 163, 255, 0.65);
}

.mod-btn-ghost {
    background: transparent;
    color: #d4d4d4;
    border-color: rgba(255, 255, 255, 0.1);
}

.mod-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    color: #ebebeb;
    border-color: rgba(255, 255, 255, 0.22);
}

.mod-btn-ghost:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Destructive variant — used for "Issue Game Ban" / "Ban player" actions */
.mod-btn-danger {
    background: rgba(248, 113, 113, 0.16);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.4);
}

.mod-btn-danger:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.28);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.65);
}

.mod-btn-danger:disabled {
    opacity: 0.55;
    cursor: wait;
}

.mod-btn-danger i {
    margin-right: 6px;
}

/* ---- Filter chips (Trade Bans status filters) ---- */
.mod-filter-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.mod-chip {
    padding: 6px 12px;
    background: transparent;
    color: #bebebe;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.mod-chip:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: #d4d4d4;
    border-color: rgba(255, 255, 255, 0.16);
}

.mod-chip.active {
    background: rgba(77, 163, 255, 0.18);
    color: #ebebeb;
    border-color: rgba(77, 163, 255, 0.45);
}

/* ---- Table ---- */
.mod-table-wrap {
    background: #191919;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    overflow: hidden;
    /* Horizontal scroll on narrow viewports (Trade Bans has 7 columns). */
    overflow-x: auto;
}

.mod-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    /* Override the global mobile rule that turns every <table> into a
       block-display horizontal-scroll element — we handle scroll on the
       wrapper so the table itself stays a proper grid. */
    display: table;
}

.mod-table thead th {
    text-align: left;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.03);
    color: #bebebe;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.mod-table tbody td {
    padding: 11px 14px;
    color: #ebebeb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.mod-table tbody tr:last-child td {
    border-bottom: none;
}

.mod-table tbody tr {
    transition: background-color 0.12s ease;
}

/* Zebra striping so long ticket lists don't blur into one block (CS ask). */
.ticket-section .mod-table tbody tr:nth-child(even),
#closed-archive-zone .mod-table tbody tr:nth-child(even),
#ticket-pool-zone .mod-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.025);
}

.mod-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Player ids in the Moderation tables are links to that player's profile. */
.mod-player-id .user-lookup-link {
    color: #99ccff;
    text-decoration: none;
    font-weight: inherit;
}
.mod-player-id .user-lookup-link:hover,
.mod-player-id .user-lookup-link:focus-visible {
    text-decoration: underline;
}

/* Ticket row actions: one tidy, equal-width vertical stack. Previously these
   were loose buttons with inline margin-left, which wrapped into a ragged
   column at this width. */
.appeal-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 118px;
}

.appeal-actions .mod-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    white-space: nowrap;
}

/* The verdict line on a closed ticket sits in the same stack. */
.appeal-actions .mod-cell-muted {
    display: block;
    text-align: center;
    line-height: 1.35;
}

/* Unanswered player messages, rendered inside the Message button so an agent can
   scan their queue without opening every ticket. Keep the button on one line so
   the badge never wraps under the label. */
.appeal-msg-btn {
    white-space: nowrap;
}

.appeal-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 7px;
    border-radius: 9px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* "Responded / needs reply" chips on My Tickets rows. */
.reply-chip {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}
.reply-chip-waiting {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}
.reply-chip-done {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.35);
}

/* Right-align numeric columns. */
.mod-table .mod-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Sortable column header affordance. */
.mod-table .mod-sortable {
    cursor: pointer;
    user-select: none;
}

.mod-table .mod-sortable:hover {
    color: #d4d4d4;
}

.mod-sort-arrow {
    color: #8a8a8a;
    font-size: 0.7em;
    margin-left: 4px;
}

/* ---- Secondary / muted text inside cells ---- */
.mod-cell-secondary {
    color: #bebebe;
}

.mod-cell-muted {
    color: #8a8a8a;
    font-style: italic;
}

.mod-player-id {
    color: #ebebeb;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mod-link {
    color: #99ccff;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dashed rgba(153, 204, 255, 0.4);
}

.mod-link:hover {
    color: #ebebeb;
    border-bottom-color: rgba(153, 204, 255, 0.8);
}

/* ---- Status chip (Game Bans column) ---- */
.mod-status-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.mod-status-permanent {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.35);
}

.mod-status-temporary {
    background: rgba(251, 191, 36, 0.12);
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.35);
}

.mod-status-expired {
    background: rgba(165, 165, 165, 0.12);
    color: #bebebe;
    border-color: rgba(165, 165, 165, 0.25);
}

/* ---- Row-state tint (Trade Bans) — full-row background color so the
   moderation state is unmistakable at a glance, paired with a left-edge
   accent for extra reinforcement. Hover bumps the tint slightly stronger
   so the row still has a clear hover affordance. */
.mod-table tr.mod-row-banned {
    background-color: rgba(248, 113, 113, 0.08);
    box-shadow: inset 3px 0 0 #f87171;
}
.mod-table tr.mod-row-banned:hover {
    background-color: rgba(248, 113, 113, 0.16);
}

.mod-table tr.mod-row-review {
    background-color: rgba(251, 191, 36, 0.08);
    box-shadow: inset 3px 0 0 #fbbf24;
}
.mod-table tr.mod-row-review:hover {
    background-color: rgba(251, 191, 36, 0.16);
}

.mod-table tr.mod-row-cleared {
    background-color: rgba(52, 211, 153, 0.08);
    box-shadow: inset 3px 0 0 #34d399;
}
.mod-table tr.mod-row-cleared:hover {
    background-color: rgba(52, 211, 153, 0.16);
}

/* ---- State dropdown inside row ---- */
.mod-state-select {
    background: #0f0f0f;
    color: #ebebeb;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 0.82rem;
    font-family: inherit;
    min-width: 110px;
    cursor: pointer;
}

.mod-state-select:focus {
    outline: none;
    border-color: #4da3ff;
}

/* ---- Loading + empty states ---- */
.mod-loading {
    text-align: center;
    padding: 24px;
    color: #bebebe;
    font-size: 0.88rem;
}

.mod-tab-blurb {
    color: #bebebe;
    font-size: 0.85rem;
    margin: 0 0 14px 0;
}

/* Ban-appeal status chips + filter chips (reuse .mod-status-chip base). */
.appeal-status-pending {
    background: rgba(251, 191, 36, 0.12);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.35);
}
.appeal-status-approved {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.4);
}
.appeal-status-denied {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.35);
}

/* Ticket-type badge in the combined My Tickets / Ban Appeals list. */
.mod-type-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.appeal-type-trade {
    background: rgba(77, 163, 255, 0.12);
    color: #99ccff;
    border: 1px solid rgba(77, 163, 255, 0.3);
}
.appeal-type-game {
    background: rgba(167, 139, 250, 0.12);
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, 0.3);
}
.appeal-type-scam {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.32);
}
.appeal-type-exploit {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

/* "Investigating" status (scam/hack in-progress). */
.appeal-status-investigating {
    background: rgba(77, 163, 255, 0.14);
    color: #99ccff;
    border: 1px solid rgba(77, 163, 255, 0.4);
}

/* Ticket-type filter chips + the contextual status row beneath them. */
.appeals-type-chip {
    padding: 6px 12px;
    background: transparent;
    color: #bebebe;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}
.appeals-type-chip:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: #d4d4d4;
}
.appeals-type-chip.active {
    background: rgba(167, 139, 250, 0.2);
    color: #ede9fe;
    border-color: rgba(167, 139, 250, 0.5);
}
.mod-filter-chips-status {
    margin-top: 8px;
}
/* "Status" / "Type" / "Kind" label in front of each filter row. */
.filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-right: 4px;
    align-self: center;
}
/* Trade/Game sub-filter under "Ban Appeals" — indented and lighter. */
.mod-filter-subchips {
    margin-top: 6px;
    margin-left: 18px;
}
.appeals-subtype-chip {
    padding: 4px 11px;
    background: transparent;
    color: #bebebe;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}
.appeals-subtype-chip:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: #d4d4d4;
}
.appeals-subtype-chip.active {
    background: rgba(167, 139, 250, 0.18);
    color: #ede9fe;
    border-color: rgba(167, 139, 250, 0.45);
}

/* Support Tickets stats dashboard (Moderation "all" view). */
.tickets-stats {
    margin: 0 0 22px;
}
.tickets-stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.tickets-stat {
    background: #191919;
    border: 1px solid #2b2b2b;
    border-radius: 12px;
    padding: 14px 16px;
}
.tickets-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.tickets-stat-label {
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #8a8a8a;
}
.tickets-stats-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.ticket-range-btn {
    padding: 5px 12px;
    background: transparent;
    color: #bebebe;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ticket-range-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: #d4d4d4;
}
.ticket-range-btn.active {
    background: rgba(77, 163, 255, 0.18);
    color: #ebebeb;
    border-color: rgba(77, 163, 255, 0.45);
}
.tickets-stats-chart {
    position: relative;
    height: 260px;
    background: #191919;
    border: 1px solid #2b2b2b;
    border-radius: 12px;
    padding: 12px 14px;
}

/* Per-type ticket sections (each kind gets its own table + columns). */
.ticket-section {
    margin-bottom: 26px;
}
.ticket-section:last-child {
    margin-bottom: 0;
}
.ticket-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
}
.ticket-section-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #ebebeb;
}
.ticket-section-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: #8a8a8a;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 1px 9px;
}
.ticket-section-foot {
    margin-top: 8px;
}

/* Assigned Agents cell: a wrap of removable purple pills + an "add" button. */
.assignee-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.assignee-bubble {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px 2px 9px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.28);
    border: 1px solid rgba(167, 139, 250, 0.45);
    color: #ddd6fe;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.assignee-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    color: #ede9fe;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.assignee-remove:hover {
    background: rgba(239, 68, 68, 0.55);
    color: #fff;
}
.assignee-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px dashed rgba(167, 139, 250, 0.5);
    border-radius: 50%;
    background: transparent;
    color: #a78bfa;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.assignee-add:hover {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(167, 139, 250, 0.85);
    color: #ddd6fe;
}

/* Floating picker of assignable staff, opened by the "+" button. */
.assignee-picker {
    min-width: 200px;
    max-width: 240px;
    max-height: 300px;
    overflow-y: auto;
    background: #1c1c1c;
    border: 1px solid #3b3b3b;
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    padding: 5px;
    z-index: 9999;
}
.assignee-picker-group {
    padding: 6px 10px 3px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.assignee-picker-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #d4d4d4;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}
.assignee-picker-item:hover {
    background: rgba(139, 92, 246, 0.18);
    color: #fff;
}
.assignee-picker-empty {
    padding: 10px 12px;
    font-size: 0.8rem;
    color: #8a8a8a;
}

/* System/handoff lines inside the internal notes thread (kind='assignment'). */
.note-event {
    margin: 8px 0;
    padding: 6px 10px;
    font-size: 0.8rem;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.08);
    border-left: 2px solid rgba(167, 139, 250, 0.5);
    border-radius: 4px;
    text-align: center;
}
.note-event small {
    color: #8a8a8a;
    margin-left: 6px;
}

.appeals-chip {
    padding: 6px 12px;
    background: transparent;
    color: #bebebe;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}
.appeals-chip:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: #d4d4d4;
}
.appeals-chip.active {
    background: rgba(77, 163, 255, 0.18);
    color: #ebebeb;
    border-color: rgba(77, 163, 255, 0.45);
}

.mod-table tbody td[colspan] {
    text-align: center;
    padding: 32px 14px;
    color: #8a8a8a;
    font-style: italic;
}

/* ---- Pagination ---- */
.mod-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    padding: 6px 0;
}

.mod-page-info {
    color: #bebebe;
    font-size: 0.85rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 80px;
    text-align: center;
}

/* ---- Phone tweaks ---- */
@media (max-width: 600px) {
    .mod-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .mod-search { flex: 1 1 auto; min-width: 0; }
    .mod-btn-primary,
    .mod-btn-danger { width: 100%; margin-left: 0 !important; }
    .mod-tabs a { padding: 10px 14px; font-size: 0.85rem; }
}

/* ---- Issue Ban modals ---- */
.mod-issue-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.mod-issue-modal-content {
    background: #191919;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    width: 480px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 24px 26px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    position: relative;
    animation: card-modal-pop 0.18s ease-out;
}

.mod-issue-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 1.1rem;
    color: #bebebe;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mod-issue-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ebebeb;
}

.mod-issue-title {
    margin: 0 0 4px 0;
    color: #ebebeb;
    font-size: 1.1rem;
    font-weight: 600;
    padding-right: 44px;       /* keep clear of the close button */
}

.mod-issue-title i {
    margin-right: 8px;
    color: #fca5a5;
}

.mod-issue-subtitle {
    margin: 0 0 18px 0;
    color: #bebebe;
    font-size: 0.85rem;
    line-height: 1.5;
}

.mod-issue-field {
    margin-bottom: 14px;
}

/* Single-player vs CSV mass-ban toggle at the top of the issue-ban modals. */
.mod-ban-mode-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    background: #191919;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    padding: 4px;
}
.mod-ban-mode-toggle label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 7px;
    color: #bebebe;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mod-ban-mode-toggle label:has(input:checked) {
    background: #333333;
    color: #fff;
}
.mod-ban-mode-toggle input { accent-color: #4da3ff; cursor: pointer; }
#game-ban-csv-field input[type="file"],
#trade-ban-csv-field input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    color: #d4d4d4;
    font-size: 0.85rem;
}

.mod-issue-field label {
    display: block;
    color: #d4d4d4;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.mod-issue-field input[type="text"],
.mod-issue-field input[type="datetime-local"],
.mod-issue-field textarea,
.mod-issue-field select.mod-issue-select {
    width: 100%;
    padding: 9px 12px;
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #ebebeb;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mod-issue-field select.mod-issue-select:focus {
    outline: none;
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

.mod-issue-field textarea {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

.mod-issue-field input:focus,
.mod-issue-field textarea:focus {
    outline: none;
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

.mod-issue-field input::placeholder,
.mod-issue-field textarea::placeholder {
    color: #6b6b6b;
}

/* datetime-local picker icon — make it visible on the dark bg */
.mod-issue-field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

.mod-issue-hint {
    display: block;
    margin-top: 5px;
    color: #8a8a8a;
    font-size: 0.78rem;
}

.mod-issue-error {
    margin: 6px 0 14px 0;
    padding: 10px 12px;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 6px;
    color: #fca5a5;
    font-size: 0.85rem;
}

.mod-issue-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ============================================================
   AUTO-RESPONSES — library page, cluster suggestion strip, card badge
   ============================================================ */

/* ---- Library page ---- */
.ar-page { max-width: 920px; }
.ar-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:1.25rem; }
.ar-title { margin:0 0 4px; color:#fff; font-size:1.5rem; }
.ar-subtitle { margin:0; color:#bebebe; font-size:0.9rem; max-width:640px; line-height:1.45; }
.ar-list { display:flex; flex-direction:column; gap:12px; }
.ar-loading, .ar-empty { color:#bebebe; padding:24px; text-align:center; background:#191919; border:1px solid #2b2b2b; border-radius:10px; }
.ar-card { display:flex; gap:16px; justify-content:space-between; background:#191919; border:1px solid #2b2b2b; border-radius:10px; padding:16px; }
.ar-card-inactive { opacity:0.6; }
.ar-card-main { flex:1; min-width:0; }
.ar-card-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ar-card-name { color:#fff; font-weight:600; font-size:1rem; }
.ar-pill { font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:0.03em; }
.ar-pill-on { background:rgba(52,211,153,0.16); color:#86efac; }
.ar-pill-off { background:rgba(165, 165, 165, 0.16); color:#d4d4d4; }
.ar-card-row { display:flex; gap:8px; margin:4px 0; font-size:0.85rem; }
.ar-card-label { color:#8a8a8a; flex:0 0 92px; text-transform:uppercase; font-size:0.68rem; letter-spacing:0.04em; padding-top:2px; }
.ar-card-q { color:#d4d4d4; }
.ar-card-reply { color:#bebebe; white-space:pre-wrap; }
.ar-card-meta { color:#6b6b6b; font-size:0.74rem; margin-top:8px; }
.ar-card-actions { display:flex; flex-direction:column; gap:6px; flex:0 0 auto; }

.ar-btn { background:#2b2b2b; color:#ebebeb; border:none; border-radius:7px; padding:8px 14px; font-size:0.85rem; cursor:pointer; transition:background 0.15s ease; }
.ar-btn:hover { background:#3b3b3b; }
.ar-btn-primary { background:#0071ff; color:#fff; }
.ar-btn-primary:hover { background:#0053cc; }
.ar-btn-primary:disabled { background:#4a4a4a; cursor:default; }
.ar-btn-sm { padding:5px 12px; font-size:0.78rem; }
.ar-btn-danger { background:transparent; color:#f87171; }
.ar-btn-danger:hover { background:rgba(248,113,113,0.12); }

/* editor modal */
.ar-modal { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; }
.ar-modal-card { background:#191919; border:1px solid #333333; border-radius:12px; width:560px; max-width:100%; max-height:calc(100vh - 40px); overflow-y:auto; padding:24px; position:relative; }
.ar-modal-card h3 { margin:0 0 4px; color:#fff; }
.ar-modal-close { position:absolute; top:12px; right:14px; background:none; border:none; color:#bebebe; font-size:1.4rem; cursor:pointer; line-height:1; }
.ar-modal-close:hover { color:#fff; }
.ar-label { display:block; color:#d4d4d4; font-size:0.82rem; font-weight:600; margin:14px 0 6px; }
.ar-hint { color:#8a8a8a; font-weight:400; font-size:0.76rem; }
.ar-input { width:100%; box-sizing:border-box; background:#0f0f0f; border:1px solid #333333; border-radius:8px; color:#ebebeb; padding:10px 12px; font-size:0.9rem; font-family:inherit; }
.ar-input:focus { outline:none; border-color:#4da3ff; }
.ar-textarea { resize:vertical; min-height:64px; }
.ar-textarea-tall { min-height:120px; }
.ar-check { display:flex; align-items:center; gap:8px; color:#d4d4d4; font-size:0.85rem; margin-top:14px; cursor:pointer; }
.ar-error { color:#f87171; font-size:0.82rem; margin-top:12px; }
.ar-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ---- Cluster-detail suggestion strip ---- */
.ar-strip { margin:0 0 14px; border-radius:10px; padding:14px 16px; border:1px solid #333333; background:#191919; }
.ar-strip-suggested { border-color:rgba(153, 204, 255, 0.5); background:linear-gradient(180deg, rgba(77, 163, 255, 0.10), rgba(77, 163, 255, 0.03)); }
.ar-strip-sent { border-color:rgba(52,211,153,0.4); background:rgba(52,211,153,0.07); }
.ar-strip-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.ar-strip-badge { font-size:0.72rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:#99ccff; background:rgba(153, 204, 255, 0.18); padding:3px 9px; border-radius:999px; }
.ar-strip-badge-sent { color:#86efac; background:rgba(52,211,153,0.16); }
.ar-strip-issue { color:#fff; font-weight:600; font-size:0.95rem; }
.ar-strip-conf { color:#8a8a8a; font-size:0.76rem; }
.ar-strip-reply { color:#d4d4d4; font-size:0.88rem; line-height:1.45; white-space:pre-wrap; background:rgba(255,255,255,0.02); border-left:2px solid rgba(153, 204, 255, 0.4); padding:8px 12px; border-radius:4px; margin-bottom:10px; }
.ar-strip-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ar-strip-hint { color:#8a8a8a; font-size:0.78rem; }
.ar-strip-progress { color:#8a8a8a; font-size:0.8rem; }

/* matched-vs-all send choice */
.ar-strip-choice-note { width:100%; color:#d4d4d4; font-size:0.86rem; margin-bottom:8px; }
.ar-strip-choice-note strong { color:#fff; }
.ar-strip-choice-btns { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ar-strip-peek { display:inline-block; margin-top:8px; color:#99ccff; font-size:0.8rem; text-decoration:none; border-bottom:1px dotted rgba(153, 204, 255, 0.5); cursor:pointer; }
.ar-strip-peek:hover { color:#99ccff; }
.ar-strip-excluded { width:100%; margin-top:8px; max-height:200px; overflow-y:auto; background:rgba(0,0,0,0.18); border:1px solid #333333; border-radius:6px; padding:8px 10px; }
.ar-strip-excluded-item { color:#bebebe; font-size:0.8rem; line-height:1.4; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.ar-strip-excluded-item:last-child { border-bottom:none; }
.ar-strip-excluded-more { color:#8a8a8a; font-size:0.76rem; padding-top:6px; }
.ar-strip-row { display:flex; align-items:center; gap:10px; }
.ar-strip-sent-text { color:#bebebe; font-size:0.86rem; }

/* ---- Responded-state badge on cluster cards ---- */
.ar-card-badge-row { display:flex; justify-content:space-between; align-items:flex-end; gap:8px; margin-top:8px; }
.ar-card-badge-slot:empty { display:none; }
.ar-card-badge { font-size:0.68rem; font-weight:700; letter-spacing:0.02em; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.ar-card-badge-sent { color:#86efac; background:rgba(52,211,153,0.16); }
.ar-card-badge-suggested { color:#99ccff; background:rgba(153, 204, 255, 0.18); }

/* ---- Urgency-label chips (cards + library) + board filter bar ---- */
.ar-labels-header { margin-top: 2.25rem; }
.bl-card-chips { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
/* inline variant for the Bug Reports cluster rows (sits beside the tag pills) */
.bl-cluster-chips { display:inline-flex; flex-wrap:wrap; gap:4px; vertical-align:middle; margin-left:6px; }
.bl-chip { font-size:0.68rem; font-weight:700; letter-spacing:0.02em; padding:3px 9px; border-radius:999px; white-space:nowrap; }
/* Follow-up chip: same player re-reporting (bug_reports.followup_of) — shown
   on report rows and, with a count, on cluster cards. Amber = "someone is
   waiting on a reply", one notch below the red criticals. */
.followup-chip { display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:0.02em; padding:3px 9px; border-radius:999px; white-space:nowrap; color:#fbbf24; background:rgba(251,191,36,0.13); box-shadow:inset 0 0 0 1px rgba(251,191,36,0.35); vertical-align:middle; }
.bl-chip-critical { color:#fca5a5; background:rgba(248,113,113,0.16); box-shadow:inset 0 0 0 1px rgba(248,113,113,0.35); }
.bl-chip-urgent { color:#fbbf24; background:rgba(251,146,60,0.15); box-shadow:inset 0 0 0 1px rgba(251,146,60,0.35); }
.bl-chip-info { color:#99ccff; background:rgba(77, 163, 255, 0.14); box-shadow:inset 0 0 0 1px rgba(77, 163, 255, 0.3); }
.bl-chip-pending { color:#8a8a8a; background:rgba(165, 165, 165, 0.10); box-shadow:inset 0 0 0 1px rgba(165, 165, 165, 0.22); font-weight:600; animation:blPendingPulse 1.2s ease-in-out infinite; }
@keyframes blPendingPulse { 0%,100% { opacity:0.45; } 50% { opacity:1; } }
.ar-select { appearance:auto; }

.bl-filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 14px; padding:10px 12px; background:#191919; border:1px solid #2b2b2b; border-radius:10px; }
.bl-filter-label { color:#8a8a8a; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; font-weight:700; }
.bl-filter-chip { border:none; cursor:pointer; font-size:0.78rem; font-weight:600; padding:5px 12px; border-radius:999px; background:#2b2b2b; color:#d4d4d4; transition:filter 0.12s ease; }
.bl-filter-chip:hover { filter:brightness(1.25); }
.bl-filter-chip.active { outline:2px solid #99ccff; outline-offset:1px; }
.bl-filter-chip.bl-filter-all.active { outline-color:#bebebe; }
.bl-filter-count { opacity:0.7; font-weight:700; margin-left:2px; }

/* ---- Break-apart (split) preview ---- */
.ar-split-tune { display:flex; flex-direction:column; gap:4px; padding:10px 12px; margin-bottom:14px; background:#0f0f0f; border:1px solid #333333; border-radius:8px; }
.ar-split-tune label { color:#d4d4d4; font-size:0.82rem; font-weight:600; }
.ar-split-thr-val { color:#99ccff; font-variant-numeric:tabular-nums; }
.ar-split-tune input[type="range"] { width:100%; accent-color:#4da3ff; cursor:pointer; }
.ar-split-tune-hint { color:#8a8a8a; font-size:0.74rem; }
.ar-split-intro { color:#bebebe; font-size:0.88rem; line-height:1.45; margin:0 0 14px; }
.ar-split-group { border:1px solid #333333; border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.ar-split-stay { border-color:rgba(165, 165, 165, 0.4); background:rgba(165, 165, 165, 0.06); }
.ar-split-peel { border-color:rgba(153, 204, 255, 0.45); background:rgba(77, 163, 255, 0.07); }
.ar-split-tag { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:#99ccff; margin-bottom:3px; }
.ar-split-stay .ar-split-tag { color:#d4d4d4; }
.ar-split-meta { color:#8a8a8a; font-size:0.78rem; margin-bottom:4px; }
.ar-split-sample { color:#d4d4d4; font-size:0.84rem; font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ===================== Guided Tour (local-only /tutorial player) ===================== */
.gt-wrap { max-width: 1240px; margin: 0 auto; padding: 28px 24px 10px; }
.gt-hdr { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.gt-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #99ccff; }
.gt-hdr h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin: 4px 0 0; }
.gt-sub { color: #8a8a8a; font-size: 0.86rem; max-width: 56ch; }

.gt-player { display: grid; grid-template-columns: 262px 1fr; gap: 14px; align-items: start; }
@media (max-width: 950px) { .gt-player { grid-template-columns: 1fr; } }

/* chapter rail */
.gt-rail { background: #232323; border: 1px solid #3b3b3b; border-radius: 10px; overflow: hidden; position: sticky; top: 14px; }
.gt-rail-h { padding: 11px 14px; border-bottom: 1px solid #3b3b3b; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #8a8a8a; display: flex; justify-content: space-between; align-items: baseline; }
.gt-rail-count { text-transform: none; letter-spacing: 0; color: #6b6b6b; font-variant-numeric: tabular-nums; }
.gt-rail-list { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 220px); overflow-y: auto; }
.gt-rail-list li { border-bottom: 1px solid #333333; }
.gt-rail-list li:last-child { border-bottom: none; }
.gt-rail-list button { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 14px; cursor: pointer; font-size: 0.8rem; line-height: 1.35; color: #bebebe; }
.gt-rail-list button:hover { background: #2b2b2b; color: #ebebeb; }
.gt-rail-list button:focus-visible { outline: 2px solid #7c3aed; outline-offset: -2px; }
.gt-num { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; background: #333333; display: grid; place-items: center; font-size: 0.62rem; font-weight: 700; color: #6b6b6b; font-variant-numeric: tabular-nums; margin-top: 1px; }
.gt-rail-list li.on button { color: #ebebeb; background: rgba(124, 58, 237, 0.14); }
.gt-rail-list li.on .gt-num { background: #7c3aed; color: #fff; }
.gt-rail-list li.done .gt-num { color: #a78bfa; }
.gt-steps-count { margin-left: auto; flex: 0 0 auto; font-size: 0.62rem; color: #6b6b6b; font-variant-numeric: tabular-nums; margin-top: 3px; }

/* screen */
.gt-screen { background: #232323; border: 1px solid #3b3b3b; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,0.35); }
.gt-scene-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 0; flex-wrap: wrap; }
.gt-ch { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #99ccff; white-space: nowrap; }
.gt-st { font-size: 1.05rem; font-weight: 700; color: #fff; }
.gt-stage { padding: 16px 18px 4px; min-height: 320px; display: grid; place-items: center; }
.gt-stage-inner { width: 100%; max-width: 760px; }
.gt-caption { margin: 10px 18px 8px; padding: 12px 16px; background: #2b2b2b; border: 1px solid #3b3b3b; border-left: 3px solid #7c3aed; border-radius: 8px; font-size: 0.9rem; line-height: 1.55; color: #ebebeb; max-width: 78ch; }
.gt-trylink { margin: 0 18px 16px; font-size: 0.82rem; }
.gt-trylink a { color: #99ccff; text-decoration: none; border-bottom: 1px dotted rgba(153, 204, 255, 0.5); }
.gt-trylink a:hover { color: #99ccff; }
.gt-trylink-hint { color: #6b6b6b; font-size: 0.72rem; margin-left: 10px; }

/* transport */
.gt-transport { background: #232323; border: 1px solid #3b3b3b; border-radius: 10px; padding: 12px 16px; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.gt-tbar { position: relative; height: 6px; background: #333333; border-radius: 3px; cursor: pointer; }
.gt-tfill { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; background: linear-gradient(90deg, #7c3aed, #a78bfa); border-radius: 3px; }
.gt-ttick { position: absolute; top: -2px; width: 2px; height: 10px; background: #4a4a4a; border-radius: 1px; }
.gt-tctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gt-tbtn { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #2b2b2b; border: 1px solid #3b3b3b; color: #ebebeb; font-size: 0.95rem; }
.gt-tbtn:hover { background: #333333; }
.gt-tbtn:focus-visible, .gt-speed:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.gt-tbtn.gt-play { width: 44px; height: 44px; background: #7c3aed; border-color: transparent; color: #fff; font-size: 1.05rem; }
.gt-tbtn.gt-play:hover { background: #8b5cf6; }
.gt-speed { all: unset; box-sizing: border-box; cursor: pointer; padding: 5px 11px; border-radius: 999px; border: 1px solid #3b3b3b; background: #2b2b2b; font-size: 0.72rem; font-weight: 700; color: #bebebe; }
.gt-speed:hover { color: #ebebeb; background: #333333; }
.gt-keys { font-size: 0.7rem; color: #6b6b6b; }
.gt-keys kbd { border: 1px solid #4a4a4a; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-family: inherit; font-size: 0.64rem; color: #bebebe; background: #2b2b2b; }
.gt-counter { margin-left: auto; font-size: 0.76rem; color: #8a8a8a; font-variant-numeric: tabular-nums; }
@media (max-width: 650px) { .gt-keys { display: none; } }

/* scenes - inert recreations built from REAL component classes */
.gt-scene { pointer-events: none; user-select: none; }
.gt-scene .trello-card { max-width: 560px; margin: 0 auto 10px; cursor: default; }
.gt-scene-table table { width: 100%; border-collapse: collapse; }
.gt-scene-table th, .gt-scene-table td { padding: 8px 10px; text-align: left; }
.gt-plain { text-align: left; color: #d4d4d4; font-size: 0.92rem; line-height: 1.6; }
.gt-center { text-align: center; }
.gt-center-narrow { max-width: 560px; margin: 0 auto; }
.gt-center-wide { max-width: 680px; margin: 0 auto; }
.gt-note { color: #6b6b6b; font-size: 0.76rem; margin-top: 8px; }
.gt-dim { color: #8a8a8a; font-weight: 400; }
.gt-cols { display: flex; gap: 12px; align-items: flex-start; }
@media (max-width: 700px) { .gt-cols { flex-direction: column; } }
.gt-col { flex: 1; background: #191919; border: 1px solid #333333; border-radius: 8px; padding: 10px; min-width: 0; }
.gt-col .trello-card { max-width: none; }
.gt-col-title { font-size: 0.72rem; font-weight: 700; color: #ebebeb; text-align: center; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gt-linkbtn { background: #333333; color: #d4d4d4; border: 1px solid #4a4a4a; border-radius: 5px; padding: 4px 12px; font-size: 0.78rem; cursor: default; }
.gt-modal { background: #232323; border: 1px solid #4a4a4a; border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,0.45); padding: 16px; max-width: 520px; margin: 0 auto; text-align: left; }
.gt-scene-modal h4 { color: #fff; }
.gt-chat { display: flex; flex-direction: column; gap: 8px; max-width: 480px; margin: 0 auto; }
.gt-chat .chat-message { max-width: 84%; }
.gt-tree { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.8rem; color: #bebebe; background: #191919; border: 1px solid #333333; border-radius: 8px; padding: 12px 14px; text-align: left; }
.gt-tree div { padding: 2px 0; }
.gt-ind { padding-left: 20px; }
.gt-k { color: #99ccff; }
.gt-v { color: #a78bfa; }
.gt-searchrow { display: flex; gap: 8px; }
.gt-searchrow input { flex: 1; background: #191919; border: 1px solid #4a4a4a; border-radius: 6px; padding: 8px 12px; color: #ebebeb; font-size: 0.88rem; }
.gt-traderow { background: #232323; border: 1px solid #333333; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; color: #d4d4d4; font-size: 0.88rem; text-align: left; }
.gt-traderow strong { color: #fff; }
.gt-traderow .gt-dim { float: right; font-variant-numeric: tabular-nums; }

/* splash steps */
.gt-splash { text-align: center; padding: 18px 8px; }
.gt-splash-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #99ccff; margin-bottom: 10px; }
.gt-splash h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin: 0 0 10px; }
.gt-splash p { color: #bebebe; font-size: 0.9rem; max-width: 54ch; margin: 0 auto 14px; line-height: 1.6; }
.gt-pills { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.gt-pills span { padding: 4px 12px; border-radius: 999px; border: 1px solid #4a4a4a; background: #2b2b2b; font-size: 0.74rem; font-weight: 600; color: #bebebe; }

/* highlight ring inside scenes */
.gt-hl { outline: 2px solid #fbbf24; outline-offset: 2px; border-radius: 6px; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.14); animation: gt-hlpulse 1.8s ease-in-out infinite; }
@keyframes gt-hlpulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(251,191,36,0.12); } 50% { box-shadow: 0 0 0 7px rgba(251,191,36,0.22); } }

/* spotlight a REAL page element (e.g. the sidebar) during a step */
.gt-spot { outline: 3px solid #fbbf24 !important; outline-offset: -3px; animation: gt-hlpulse 1.8s ease-in-out infinite; }

.gt-fade { animation: gt-fadein 0.28s ease; }
@keyframes gt-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .gt-hl, .gt-spot { animation: none; }
  .gt-fade { animation: none; }
  .gt-tfill { transition: none !important; }
}

/* Occurrence-count badge on assigned error log cards */
.el-occ-row { margin: 6px 0; }
.el-occ-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; color: #fbbf24; background: rgba(251, 191, 36, 0.12); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.4); font-variant-numeric: tabular-nums; }
.el-occ-badge-na { color: #8a8a8a; background: rgba(165, 165, 165, 0.10); box-shadow: inset 0 0 0 1px rgba(165, 165, 165, 0.3); font-weight: 600; }

/* Errors-over-time graph card on the Error Logs page */
.error-logs-timeline-card { background: #232323; border: 1px solid #3b3b3b; border-radius: 10px; padding: 12px 16px 8px; margin: 14px 0; max-width: 860px; }
.error-logs-timeline-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.error-logs-timeline-head h3 { font-size: 0.95rem; font-weight: 700; color: #fff; margin: 0; }
.error-logs-timeline-sub { color: #8a8a8a; font-size: 0.76rem; }
#error-logs-timeline-status { margin-left: auto; color: #8a8a8a; font-size: 0.76rem; }
.error-logs-timeline-plot { position: relative; height: 160px; }

/* Trade / game ban badges on the player profile header */
#player-mod-badges { margin-top: 9px; }
.pp-mod-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; margin-right: 6px; }
.pp-mod-chip-red { color: #fca5a5; background: rgba(239, 68, 68, 0.14); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.4); }
.pp-mod-chip-amber { color: #fbbf24; background: rgba(245, 158, 11, 0.13); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.4); }

/* ============================================================
   LIGHT THEME — body.theme-light
   Dark is the default; this layer flips the chrome. Most of the
   stylesheet uses hardcoded dark hexes (and many components carry
   inline styles), so this works in three tiers:
     1. re-point the :root tokens,
     2. class-level overrides for the main chrome,
     3. [style*="#hex"] catches for inline-styled surfaces — each
        dark hex has one role (bg / text / border), so matching the
        hex alone is safe.
   ============================================================ */
body.theme-light {
    --bg-page:       #f3f4f6;
    --bg-sidebar:    #ffffff;
    --bg-card:       #ffffff;
    --bg-elevated:   #f5f6f8;
    --bg-inset:      #eceef1;
    --border:        #dcdee2;
    --border-strong: #c9ccd1;
    --divider:       #aeb2b8;
    --text:          #101114;
    --text-strong:   #1b1d22;
    --text-body:     #2e3138;
    --text-muted:    #565a63;
    --text-dim:      #7d818a;

    background-color: #f3f4f6;
    color: #3a3d44;
}

/* ---- Sidebar ---- */
body.theme-light .sidebar {
    background: #ffffff;
    color: #565a63;
    border-right-color: #e4e6ea;
}
body.theme-light .sidebar-header,
body.theme-light .sidebar-userbar { border-bottom-color: #e9eaee; background: transparent; }
body.theme-light .sidebar-userbar h1,
body.theme-light #sidebar-greeting { color: #1b1d22; }
body.theme-light .sidebar-nav ul li { color: #565a63; }
body.theme-light .sidebar-nav ul li i { color: #82858c; }
body.theme-light .sidebar-nav ul li:hover { background: #f1f2f5; color: #101114; }
body.theme-light .sidebar-nav ul li.active { background: #e9ebef; color: #101114; }
body.theme-light .sidebar-nav ul li.active i { color: #101114; }
body.theme-light .nav-section-header { color: #40434a; }
body.theme-light .nav-section-header:hover { background: #f1f2f5; }
body.theme-light .sidebar-collapse-btn { color: #82858c; }
body.theme-light .sidebar-collapse-btn:hover { color: #101114; background: #f1f2f5; }

/* ---- Page chrome / content ---- */
body.theme-light .content,
body.theme-light .main-content,
body.theme-light .content-section { background-color: transparent; color: #2e3138; }
body.theme-light h1, body.theme-light h2, body.theme-light h3,
body.theme-light h4, body.theme-light h5 { color: #1b1d22; }
body.theme-light .content-section h2 { color: #16181d; }

/* ---- Generic surfaces: tables, cards, panels ---- */
body.theme-light table { color: #2e3138; }
body.theme-light th { color: #565a63; }
body.theme-light td { color: #2e3138; }
body.theme-light tr { border-color: #e4e6ea !important; }

body.theme-light .mod-table { background: #ffffff; }
body.theme-light .mod-table th { background: #f5f6f8; color: #565a63; border-color: #e4e6ea; }
body.theme-light .mod-table td { border-color: #eceef1; color: #2e3138; }
body.theme-light .mod-table-wrap { border-color: #e4e6ea; background: #ffffff; }

/* ---- Inputs ---- */
body.theme-light input[type="text"],
body.theme-light input[type="password"],
body.theme-light input[type="number"],
body.theme-light input[type="email"],
body.theme-light input[type="search"],
body.theme-light input[type="datetime-local"],
body.theme-light input[type="date"],
body.theme-light select,
body.theme-light textarea {
    background: #ffffff !important;
    color: #1b1d22 !important;
    border-color: #c9ccd1 !important;
}
body.theme-light ::placeholder { color: #9a9ea6; }

/* ---- Buttons (neutral/ghost only — brand + status colors stay) ---- */
body.theme-light .mod-btn-ghost { background: #ffffff; color: #40434a; border-color: #c9ccd1; }
body.theme-light .mod-btn-ghost:hover:not(:disabled) { background: #f1f2f5; }
body.theme-light .filter-button { background: #ffffff; color: #40434a; border-color: #c9ccd1; }
body.theme-light .filter-button.selected { color: #ffffff; }

/* ---- Chips ---- */
body.theme-light .mod-chip { background: #ffffff; color: #40434a; border-color: #c9ccd1; }
body.theme-light .mod-chip.active { color: #ffffff; }

/* ---- Inline-styled surfaces: dark hexes are used for exactly one
        role each, so matching the hex is safe. ---- */
/* Backgrounds → white/near-white */
body.theme-light [style*="#0f0f0f"], body.theme-light [style*="#141414"],
body.theme-light [style*="#191919"], body.theme-light [style*="#1a1a1a"],
body.theme-light [style*="#232323"], body.theme-light [style*="#2b2b2b"],
body.theme-light [style*="#333333"] {
    background-color: #ffffff !important;
    color: #2e3138 !important;
    border-color: #dcdee2 !important;
}
/* Neutral dark button bg (#4a4a4a = cancel buttons) → light grey */
body.theme-light [style*="background:#4a4a4a"], body.theme-light [style*="background: #4a4a4a"] {
    background-color: #e4e6ea !important;
    color: #1b1d22 !important;
}
/* Inline light text colors → dark text */
body.theme-light [style*="color:#fff"], body.theme-light [style*="color: #fff"],
body.theme-light [style*="color:#ffffff"], body.theme-light [style*="color: #ffffff"],
body.theme-light [style*="color:#ebebeb"], body.theme-light [style*="color: #ebebeb"],
body.theme-light [style*="color:#ddd"], body.theme-light [style*="color: #ddd"],
body.theme-light [style*="color:#d4d4d4"], body.theme-light [style*="color: #d4d4d4"],
body.theme-light [style*="color:#bebebe"], body.theme-light [style*="color: #bebebe"] {
    color: #24262c !important;
}
body.theme-light [style*="color:#8a8a8a"], body.theme-light [style*="color: #8a8a8a"],
body.theme-light [style*="color:#8f8f8f"], body.theme-light [style*="color: #8f8f8f"] {
    color: #6b6f77 !important;
}
/* Inline dark borders → light borders */
body.theme-light [style*="border: 1px solid #3b3b3b"], body.theme-light [style*="border:1px solid #3b3b3b"],
body.theme-light [style*="border: 1px solid #4a4a4a"], body.theme-light [style*="border:1px solid #4a4a4a"] {
    border-color: #dcdee2 !important;
}
/* Buttons that keep a colored bg keep white text even though their inline
   color matched the light-text catch above. */
body.theme-light [style*="background: #0071ff"], body.theme-light [style*="background:#0071ff"],
body.theme-light [style*="background: #ef4444"], body.theme-light [style*="background:#ef4444"],
body.theme-light [style*="background: #10b981"], body.theme-light [style*="background:#10b981"],
body.theme-light [style*="background: #7c3aed"], body.theme-light [style*="background:#7c3aed"] {
    color: #ffffff !important;
}

/* ---- Modals ---- */
body.theme-light .mod-issue-modal { background: rgba(20, 22, 26, 0.45); }
body.theme-light .mod-issue-modal-content { background: #ffffff; border-color: #dcdee2; color: #2e3138; }
body.theme-light .mod-issue-title { color: #16181d; }
body.theme-light .mod-issue-subtitle { color: #6b6f77; }
body.theme-light .mod-issue-field label { color: #2e3138; }
body.theme-light .modal-close { color: #6b6f77; }

/* ---- Scrollbars ---- */
body.theme-light ::-webkit-scrollbar-track { background: #eceef1; }
body.theme-light ::-webkit-scrollbar-thumb { background: #c2c5cb; }
body.theme-light ::-webkit-scrollbar-thumb:hover { background: #aeb2b8; }




/* ==== LIGHT THEME (auto-generated from the dark rules above — rerun gen-light-theme.js after restyling; do not hand-edit below) ==== */
body.theme-light {
    background-color: #f3f4f6;
    color: #565a63;
}
body.theme-light .sidebar {
    background: #ffffff;
    color: #565a63;
    border-right: 1px solid #e4e6ea;
}
body.theme-light .sidebar-header {
    border-bottom: 1px solid #e4e6ea;
}
body.theme-light .sidebar-userbar {
    border-bottom: 1px solid #e4e6ea;
}
body.theme-light #sidebar-greeting {
    color: #101114;
}
body.theme-light #sidebar-role {
    color: #6d28d9;
}
body.theme-light .sidebar-collapse-btn {
    color: #7d818a;
}
body.theme-light .sidebar-collapse-btn:hover {
    color: #2e3138;
}
body.theme-light .sidebar-header h2 {
    color: #101114;
}
body.theme-light .sidebar-nav ul li.nav-section-header {
    color: #24262c;
}
body.theme-light .sidebar-nav ul li.nav-section-header:hover {
    background: #f1f2f5;
    color: #101114;
}
body.theme-light .sidebar-nav ul li.nav-section-header.expanded {
    color: #101114;
}
body.theme-light .sidebar-nav ul li i {
    color: #7d818a;
}
body.theme-light .sidebar-nav ul li:hover {
    background: #f1f2f5;
    color: #101114;
}
body.theme-light .sidebar-nav ul li:hover i {
    color: #2e3138;
}
body.theme-light .sidebar-nav ul li.active {
    background: #ffffff;
    color: #101114;
}
body.theme-light .nav-sub-item.active {
    background: #ffffff;
}
body.theme-light .sidebar-nav ul li.active i {
    color: #101114;
}
body.theme-light .sidebar-footer button {
    color: #dc2626;
}
body.theme-light .main-content {
    background-color: #f3f4f6;
}
body.theme-light .content-section h2 {
    color: #101114;
}
body.theme-light #login-screen {
    background: linear-gradient(135deg, #f3f4f6 0%, #f7f7f9 100%);
}
body.theme-light .login-box {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light .login-header h2 {
    color: #101114;
}
body.theme-light .login-header p {
    color: #565a63;
}
body.theme-light .login-input-group {
    background: #f3f4f6;
    border: 1px solid #e0e2e6;
}
body.theme-light .login-input-group i {
    color: #565a63;
}
body.theme-light .login-input-group input {
    color: #1b1d22;
}
body.theme-light .login-input-group input::placeholder {
    color: #7d818a;
}
body.theme-light .remember-me-label {
    color: #565a63;
}
body.theme-light .filter-section label {
    color: #565a63;
}
body.theme-light .filter-section select,
body.theme-light .filter-section input[type="date"],
body.theme-light .filter-section input[type="text"] {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
    color: #565a63;
}
body.theme-light .filter-section select option {
    background-color: #ffffff;
    color: #565a63;
}
body.theme-light .filter-section button:disabled {
    background-color: #f0f1f4;
}
body.theme-light .error-logs-filter-section .filter-label {
    color: #1b1d22;
}
body.theme-light .error-logs-search-input {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
    color: #565a63;
}
body.theme-light .error-logs-search-input::placeholder {
    color: #7d818a;
}
body.theme-light #query-btn.query-button-primary:hover:not(:disabled) {
    background: #f7f7f9;
}
body.theme-light #query-btn.query-button-primary:disabled {
    background: #f7f7f9;
    border-color: #e0e2e6;
    color: #7d818a;
}
body.theme-light #loading-indicator,
body.theme-light #events-loading-indicator {
    color: #1d4ed8;
}
body.theme-light .filter-button {
    background-color: #f0f1f4;
    color: #565a63;
    border: 1px solid #dcdee2;
}
body.theme-light .filter-button:hover {
    background-color: #e8eaed;
    color: #1b1d22;
    border-color: #c9ccd1;
}
body.theme-light .pagination-controls button:disabled {
    background-color: #f0f1f4;
}
body.theme-light .pagination-controls span {
    color: #565a63;
}
body.theme-light .search-input-wrapper {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
}
body.theme-light .search-icon {
    color: #7d818a;
}
body.theme-light .bug-reports-search-input {
    color: #1b1d22;
}
body.theme-light .bug-reports-search-input::placeholder {
    color: #7d818a;
}
body.theme-light .search-clear-btn {
    color: #7d818a;
}
body.theme-light .search-clear-btn:hover {
    background-color: #f0f1f4;
    color: #565a63;
}
body.theme-light .merge-select-all-row {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
}
body.theme-light .merge-select-all-label {
    color: #565a63;
}
body.theme-light table {
    background-color: #ffffff;
    color: #565a63;
}
body.theme-light th,
body.theme-light td {
    border: 1px solid #e0e2e6;
}
body.theme-light th {
    background-color: #ffffff;
}
body.theme-light .error-log-place-chip {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
    color: #2e3138;
}
body.theme-light .error-log-place-chip-ver {
    color: #7d818a;
}
body.theme-light .error-log-place-expand-btn {
    color: #2e3138;
}
body.theme-light .error-log-place-expand-btn:hover {
    color: #1d4ed8;
}
body.theme-light .error-log-card-places-label {
    color: #7d818a;
}
body.theme-light .dev-tools-toolbar-label {
    color: #b45309;
}
body.theme-light .dev-tools-field {
    color: #b45309;
}
body.theme-light .dev-tools-field input,
body.theme-light .dev-tools-field select {
    background: #f3f4f6;
    color: #a16207;
}
body.theme-light .dev-tools-checkbox {
    color: #a16207;
}
body.theme-light .dev-tools-btn {
    color: #a16207;
}
body.theme-light .dev-tools-btn:hover:not(:disabled) {
    color: #101114;
}
body.theme-light .dev-tools-btn-secondary {
    border-color: #aeb2b8;
    color: #2e3138;
}
body.theme-light .dev-tools-btn-secondary:hover:not(:disabled) {
    color: #1b1d22;
}
body.theme-light .dev-tools-result-modal {
    background: #f3f4f6;
}
body.theme-light .dev-tools-result-header h3 {
    color: #1b1d22;
}
body.theme-light .dev-tools-result-close {
    color: #565a63;
}
body.theme-light .dev-tools-result-close:hover {
    color: #1b1d22;
}
body.theme-light .dev-tools-result-loading {
    color: #2e3138;
}
body.theme-light .dev-tools-result-error {
    color: #b91c1c;
}
body.theme-light .dev-tools-result-summary {
    color: #2e3138;
    border: 1px solid #e0e2e6;
}
body.theme-light .dev-tools-result-heading {
    color: #1b1d22;
}
body.theme-light .dev-tools-result-empty {
    color: #565a63;
}
body.theme-light .dev-tools-result-table {
    color: #2e3138;
}
body.theme-light .dev-tools-result-table th {
    border-bottom: 1px solid #e0e2e6;
    background: #f7f7f9;
    color: #1b1d22;
}
body.theme-light .dev-tools-match-card {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
    color: #2e3138;
}
body.theme-light .dev-tools-match-title {
    color: #1b1d22;
}
body.theme-light .dev-tools-match-arrow {
    color: #b45309;
}
body.theme-light .dev-tools-match-cluster-ref {
    color: #565a63;
}
body.theme-light .dev-tools-match-stat {
    color: #565a63;
    background: #f3f4f6;
    border: 1px solid #e0e2e6;
}
body.theme-light .dev-tools-match-stat strong {
    color: #1b1d22;
}
body.theme-light .dev-tools-match-status {
    color: #1d4ed8;
}
body.theme-light .dev-tools-match-label {
    color: #565a63;
}
body.theme-light .dev-tools-match-tag {
    background: #f0f1f4;
    color: #1b1d22;
}
body.theme-light .dev-tools-match-tag.is-task {
    color: #1d4ed8;
}
body.theme-light .dev-tools-match-tag.is-merged {
    color: #b45309;
}
body.theme-light .dev-tools-match-meta {
    color: #2e3138;
}
body.theme-light .dev-tools-match-meta strong {
    color: #565a63;
}
body.theme-light .dev-tools-match-assignee {
    background: #f3f4f6;
    border: 1px solid #e0e2e6;
    color: #1b1d22;
}
body.theme-light .dev-tools-match-buglist li {
    background: #f3f4f6;
    border: 1px solid #e0e2e6;
    color: #2e3138;
}
body.theme-light .dev-tools-match-bug-id {
    color: #7d818a;
}
body.theme-light .dev-tools-match-bug-user {
    color: #1d4ed8;
}
body.theme-light .dev-tools-match-bug-snippet {
    color: #1b1d22;
}
body.theme-light .dev-tools-match-col {
    background: #f3f4f6;
    border: 1px solid #e0e2e6;
}
body.theme-light .dev-tools-match-col-header {
    border-bottom: 1px solid #e0e2e6;
}
body.theme-light .dev-tools-match-col-header.is-task {
    color: #1d4ed8;
}
body.theme-light .dev-tools-match-col-header.is-merged {
    color: #b45309;
}
body.theme-light .dev-tools-match-empty {
    color: #7d818a;
}
body.theme-light .dev-tools-result-dry-banner {
    color: #b45309;
}
body.theme-light .dev-tools-result-thresholds {
    color: #2e3138;
    background: #f3f4f6;
    border: 1px solid #e0e2e6;
}
body.theme-light .dev-tools-result-thresholds strong {
    color: #b45309;
}
body.theme-light .dev-tools-result-count {
    color: #565a63;
}
body.theme-light .dev-tools-result-hint {
    color: #565a63;
}
body.theme-light .dev-tools-match-card-near {
    border-color: #aeb2b8;
}
body.theme-light .dev-tools-match-arrow-near {
    color: #565a63;
}
body.theme-light .dev-tools-match-stat-warn {
    color: #b91c1c;
}
body.theme-light .dev-tools-match-stat-ok {
    color: #15803d;
}
body.theme-light .modal-broadcast-btn {
    color: #1d4ed8;
}
body.theme-light .modal-broadcast-btn:hover {
    color: #101114;
}
body.theme-light .cluster-broadcast-modal {
    background: #f3f4f6;
}
body.theme-light .cluster-broadcast-header h3 {
    color: #1b1d22;
}
body.theme-light .cluster-broadcast-close {
    color: #565a63;
}
body.theme-light .cluster-broadcast-close:hover {
    color: #1b1d22;
}
body.theme-light .cluster-broadcast-info {
    color: #2e3138;
}
body.theme-light .cluster-broadcast-skipped {
    color: #b45309;
}
body.theme-light .cluster-broadcast-draft-status {
    color: #565a63;
}
body.theme-light .cluster-broadcast-redraft-btn {
    color: #2e3138;
}
body.theme-light .cluster-broadcast-redraft-btn:hover:not(:disabled) {
    color: #1d4ed8;
}
body.theme-light .cluster-broadcast-textarea {
    border: 1px solid #e0e2e6;
    color: #1b1d22;
}
body.theme-light .cluster-broadcast-progress {
    border: 1px solid #e0e2e6;
    color: #2e3138;
}
body.theme-light .cluster-broadcast-cancel {
    color: #2e3138;
}
body.theme-light .cluster-broadcast-cancel:hover {
    color: #1b1d22;
}
body.theme-light .popup {
    background-color: #ffffff;
    color: #565a63;
}
body.theme-light .popup h3 {
    color: #101114;
}
body.theme-light .popup select,
body.theme-light .popup textarea {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
    color: #565a63;
}
body.theme-light .popup select option {
    background-color: #ffffff;
    color: #565a63;
}
body.theme-light .popup select:disabled {
    background-color: #ffffff;
}
body.theme-light .emulation-banner-content strong {
    color: #101114;
}
body.theme-light .switch-back-button {
    color: #101114;
}
body.theme-light .user-popup-label {
    color: #565a63;
}
body.theme-light .user-popup-input {
    background: #ffffff;
    border: 1px solid #e0e2e6;
    color: #565a63;
}
body.theme-light .user-popup-roles {
    background: #ffffff;
    border: 1px solid #e0e2e6;
}
body.theme-light .user-popup-roles label {
    color: #565a63;
}
body.theme-light .item-history-icon {
    color: #565a63 !important;
}
body.theme-light .item-history-icon:hover {
    color: #1d4ed8 !important;
}
body.theme-light #login-screen {
    background: linear-gradient(135deg, #f3f4f6 0%, #f7f7f9 100%);
}
body.theme-light .login-box {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light .login-header h2 {
    color: #101114;
}
body.theme-light .login-input-group {
    background: #f3f4f6;
    border: 1px solid #e0e2e6;
}
body.theme-light .login-input-group input {
    color: #1b1d22;
}
body.theme-light .login-input-group input::placeholder {
    color: #7d818a;
}
body.theme-light .remember-me-label {
    color: #565a63;
}
body.theme-light #logout-button {
    color: #dc2626 !important;
}
body.theme-light .chart-container {
    background-color: #ffffff;
}
body.theme-light .chat-panel {
    background-color: #ffffff;
}
body.theme-light .chat-header {
    background-color: #ffffff;
}
body.theme-light .chat-header h3 {
    color: #101114;
}
body.theme-light .chat-bug-description {
    background-color: #f7f7f9;
    border-bottom: 1px solid #e0e2e6;
    color: #2e3138;
}
body.theme-light .chat-bug-description .chat-bug-description-label {
    color: #7d818a;
}
body.theme-light .chat-history {
    border-bottom: 1px solid #e0e2e6;
    background-color: #ffffff;
}
body.theme-light .chat-message.user {
    background-color: #ffffff;
    color: #565a63;
}
body.theme-light .chat-message small {
    color: #7d818a;
}
body.theme-light .chat-report-tag {
    color: #1d4ed8;
}
body.theme-light .chat-input {
    background-color: #ffffff;
}
body.theme-light .chat-input textarea {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
    color: #565a63;
}
body.theme-light .chat-icon {
    color: #1d4ed8;
}
body.theme-light .tab-container {
    border-bottom: 2px solid #d5d8dc;
}
body.theme-light .tab-button {
    background: #f0f1f4;
    color: #2e3138;
}
body.theme-light .tab-button:hover {
    background: #dfe1e5;
}
body.theme-light #profile-bug-reports-table,
body.theme-light #profile-error-logs-table {
    background: #f7f7f9;
    color: #2e3138;
}
body.theme-light #profile-bug-reports-table th,
body.theme-light #profile-error-logs-table th {
    background: #e8eaed;
    border-bottom: 2px solid #d5d8dc;
}
body.theme-light #profile-bug-reports-table td,
body.theme-light #profile-error-logs-table td {
    border-bottom: 1px solid #d5d8dc;
}
body.theme-light #profile-bug-reports-table tr:hover,
body.theme-light #profile-error-logs-table tr:hover {
    background: #f0f1f4;
}
body.theme-light select {
    background: #e8eaed;
    color: #2e3138;
    border: 1px solid #c9ccd1;
}
body.theme-light select:hover {
    background: #d5d8dc;
}
body.theme-light #profile-tabs a {
    color: #2e3138;
    background-color: #f7f7f9;
}
body.theme-light #profile-tabs a.active {
    background: #e8eaed;
    color: #101114;
}
body.theme-light #profile-tabs a:hover:not(.active) {
    background-color: #f0f1f4;
    color: #1b1d22;
}
body.theme-light .view-archive-btn {
    color: #565a63;
}
body.theme-light .view-archive-btn:hover {
    color: #2e3138;
}
body.theme-light .open-conversations-heading {
    color: #1b1d22;
}
body.theme-light .open-conversations-refresh-btn {
    color: #2e3138;
}
body.theme-light .open-conversations-refresh-btn:hover {
    color: #1d4ed8;
}
body.theme-light .open-conversations-subtitle {
    color: #565a63;
}
body.theme-light .open-conversations-loading,
body.theme-light .open-conversations-empty,
body.theme-light .open-conversations-error {
    color: #565a63;
}
body.theme-light .open-conversations-error {
    color: #b91c1c;
}
body.theme-light .open-conversations-card {
    border: 1px solid #e0e2e6;
    color: #1b1d22;
}
body.theme-light .open-conversations-card-reporter {
    color: #1b1d22;
}
body.theme-light .open-conversations-card-uid {
    color: #7d818a;
}
body.theme-light .open-conversations-card-meta {
    color: #565a63;
}
body.theme-light .open-conversations-card-when {
    color: #7d818a;
}
body.theme-light .open-conversations-card-bug {
    color: #2e3138;
}
body.theme-light .open-conversations-card-last {
    color: #2e3138;
}
body.theme-light .open-conversations-card-sender {
    color: #1d4ed8;
}
body.theme-light .open-conversations-card-text {
    color: #2e3138;
}
body.theme-light .open-conversations-card-footer {
    color: #7d818a;
}
body.theme-light .conv-emulate-btn {
    color: #2e3138;
    border: 1px solid #dcdee2;
}
body.theme-light .conv-emulate-btn:hover {
    color: #101114;
}
body.theme-light .my-progress-intro {
    color: #565a63;
}
body.theme-light .my-progress-field-range label {
    color: #565a63;
}
body.theme-light .my-progress-date-input {
    color: #1b1d22;
    background: #f3f4f6;
    border: 1px solid #aeb2b8;
}
body.theme-light .my-progress-presets-label {
    color: #7d818a;
}
body.theme-light .my-progress-preset-btn {
    color: #2e3138;
    background: #f0f1f4;
    border: 1px solid #aeb2b8;
}
body.theme-light .my-progress-toolbar label {
    color: #2e3138;
}
body.theme-light .my-progress-toolbar select {
    background: #f7f7f9;
    color: #1b1d22;
    border: 1px solid #aeb2b8;
}
body.theme-light .my-progress-period-label {
    color: #565a63;
}
body.theme-light .flatpickr-calendar {
    background: #f7f7f9 !important;
    border: 1px solid #aeb2b8 !important;
}
body.theme-light .flatpickr-months .flatpickr-month {
    background: #f7f7f9 !important;
    color: #1b1d22 !important;
}
body.theme-light .flatpickr-current-month .flatpickr-monthDropdown-months,
body.theme-light .flatpickr-current-month input.cur-year {
    background: #f0f1f4 !important;
    color: #1b1d22 !important;
}
body.theme-light .flatpickr-weekdays {
    background: #f7f7f9 !important;
}
body.theme-light span.flatpickr-weekday {
    color: #565a63 !important;
}
body.theme-light .flatpickr-day {
    color: #1b1d22 !important;
}
body.theme-light .flatpickr-day:hover,
body.theme-light .flatpickr-day:focus {
    background: #f0f1f4 !important;
    border-color: #aeb2b8 !important;
}
body.theme-light .my-progress-report-dialog {
    background: linear-gradient(180deg, #f7f7f9 0%, #f3f4f6 100%);
    border: 1px solid #aeb2b8;
}
body.theme-light .my-progress-report-header {
    border-bottom: 1px solid #e0e2e6;
}
body.theme-light .my-progress-report-header h3 {
    color: #101114;
}
body.theme-light .my-progress-report-close {
    color: #565a63;
}
body.theme-light .my-progress-report-close:hover {
    color: #1b1d22;
}
body.theme-light .my-progress-report-meta {
    color: #565a63;
    border-bottom: 1px solid #e0e2e6;
}
body.theme-light .my-progress-report-meta strong {
    color: #1b1d22;
}
body.theme-light .my-progress-report-ai-heading {
    color: #1d4ed8;
}
body.theme-light .my-progress-report-ai--error .my-progress-report-ai-heading {
    color: #b91c1c;
}
body.theme-light .my-progress-report-ai-text {
    color: #1b1d22;
}
body.theme-light .my-progress-report-ai-error {
    color: #b91c1c;
}
body.theme-light .my-progress-report-details-heading {
    color: #565a63;
}
body.theme-light .my-progress-report-item {
    border: 1px solid #e0e2e6;
}
body.theme-light .my-progress-report-item-num {
    color: #1d4ed8;
}
body.theme-light .my-progress-report-item-time {
    color: #565a63;
}
body.theme-light .my-progress-report-item-title {
    color: #1b1d22;
}
body.theme-light .my-progress-report-item-detail {
    color: #2e3138;
}
body.theme-light .my-progress-report-item-notes-label {
    color: #7d818a;
}
body.theme-light .my-progress-report-item-notes-body {
    color: #565a63;
}
body.theme-light .my-progress-report-footer {
    border-top: 1px solid #e0e2e6;
}
body.theme-light .my-progress-report-copy-btn {
    background: #f0f1f4;
    color: #1b1d22;
}
body.theme-light .my-progress-report-close-btn {
    color: #565a63;
    border: 1px solid #aeb2b8;
}
body.theme-light .my-progress-report-close-btn:hover {
    color: #1b1d22;
}
body.theme-light .my-progress-report-loading,
body.theme-light .my-progress-report-empty,
body.theme-light .my-progress-report-error {
    color: #565a63;
}
body.theme-light .my-progress-report-error {
    color: #dc2626;
}
body.theme-light .my-progress-loading {
    color: #565a63;
}
body.theme-light .my-progress-error {
    color: #dc2626;
}
body.theme-light .my-progress-stat-card {
    background: #ffffff;
    border: 1px solid #e0e2e6;
}
body.theme-light .my-progress-stat-card:hover {
    border-color: #dcdee2;
}
body.theme-light .my-progress-stat-value {
    color: #101114;
}
body.theme-light .my-progress-stat-label {
    color: #2e3138;
}
body.theme-light .my-progress-stat-sub {
    color: #7d818a;
}
body.theme-light .my-progress-stat-delta.up {
    color: #047857;
}
body.theme-light .my-progress-stat-delta.down {
    color: #dc2626;
}
body.theme-light .my-progress-stat-delta.flat {
    color: #565a63;
}
body.theme-light .my-progress-stat-icon.violet,
body.theme-light .my-progress-activity-icon.violet {
    color: #1d4ed8;
}
body.theme-light .my-progress-stat-icon.amber,
body.theme-light .my-progress-activity-icon.amber {
    color: #b45309;
}
body.theme-light .my-progress-stat-icon.green,
body.theme-light .my-progress-activity-icon.green {
    color: #047857;
}
body.theme-light .my-progress-quickglance {
    color: #2e3138;
}
body.theme-light .my-progress-quickglance i {
    color: #b45309;
}
body.theme-light .my-progress-quickglance .qg-pill.up {
    color: #047857;
}
body.theme-light .my-progress-quickglance .qg-pill.down {
    color: #dc2626;
}
body.theme-light .my-progress-panel {
    background: #ffffff;
    border: 1px solid #e0e2e6;
}
body.theme-light .my-progress-panel-title {
    color: #1b1d22;
}
body.theme-light .my-progress-panel-title i {
    color: #1d4ed8;
}
body.theme-light .my-progress-activity-title {
    color: #1b1d22;
}
body.theme-light .my-progress-activity-meta {
    color: #7d818a;
}
body.theme-light .my-progress-activity-empty {
    color: #7d818a;
}
body.theme-light .my-progress-active-breakdown {
    color: #1d4ed8;
}
body.theme-light .my-progress-pace-note,
body.theme-light .my-progress-legacy-note {
    color: #565a63;
}
body.theme-light .my-progress-legacy-note {
    color: #b45309;
}
body.theme-light .my-progress-chart-wrap {
    background: #ffffff;
    border: 1px solid #e0e2e6;
}
body.theme-light .trello-column {
    background-color: #f7f7f9;
}
body.theme-light .trello-column h3 {
    color: #101114;
}
body.theme-light .trello-sort-select {
    background: #f7f7f9;
    color: #2e3138;
    border: 1px solid #e0e2e6;
}
body.theme-light .trello-sort-select:hover {
    border-color: #dcdee2;
}
body.theme-light .trello-card {
    background-color: #f7f7f9;
    color: #565a63;
}
body.theme-light .trello-card:hover {
    background-color: #f0f1f4;
}
body.theme-light .trello-card h4 {
    color: #101114;
}
body.theme-light .trello-card p {
    color: #565a63;
}
body.theme-light .trello-card .bug-item {
    border-top: 1px solid #e0e2e6;
}
body.theme-light .trello-card h5 {
    color: #101114;
}
body.theme-light .trello-column.drag-over {
    background-color: #ffffff;
}
body.theme-light .trello-card .note-item {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
}
body.theme-light .trello-merge-btn,
body.theme-light .trello-link-btn {
    color: #2e3138;
}
body.theme-light .trello-merge-btn:hover {
    color: #b45309;
}
body.theme-light .trello-link-btn:hover {
    color: #1d4ed8;
}
body.theme-light .linked-tasks-label {
    color: #7d818a;
}
body.theme-light .linked-task-chip {
    color: #2e3138;
}
body.theme-light .linked-task-unlink-btn {
    color: #565a63;
}
body.theme-light .linked-task-unlink-btn:hover {
    color: #b91c1c;
}
body.theme-light .trello-merge-banner-title strong {
    color: #101114;
}
body.theme-light .trello-merge-banner-count {
    color: #a16207;
}
body.theme-light .trello-merge-cancel-btn {
    color: #a16207;
}
body.theme-light .trello-link-modal {
    background: #f3f4f6;
}
body.theme-light .trello-link-modal-header h3 {
    color: #1b1d22;
}
body.theme-light .trello-link-modal-close {
    color: #565a63;
}
body.theme-light .trello-link-modal-close:hover {
    color: #1b1d22;
}
body.theme-light .trello-link-modal-row {
    color: #1b1d22;
}
body.theme-light .trello-link-modal-row-subtitle {
    color: #565a63;
}
body.theme-light .trello-link-modal-empty {
    color: #565a63;
}
body.theme-light .trello-card .collaborators-display {
    color: #2e3138;
}
body.theme-light .bug-cluster-modal {
    background-color: #f7f7f9;
    border-left: 1px solid #e0e2e6;
    color: #565a63;
}
body.theme-light .bug-modal {
    background-color: #f7f7f9;
    border-left: 1px solid #e0e2e6;
    color: #565a63;
}
body.theme-light .bug-cluster-modal-content .modal-close,
body.theme-light .bug-modal-content .modal-close {
    color: #565a63;
}
body.theme-light .bug-cluster-modal-content h3,
body.theme-light .bug-modal-content h3 {
    color: #101114;
}
body.theme-light .bug-cluster-modal-content p,
body.theme-light .bug-modal-content p {
    color: #565a63;
}
body.theme-light .bug-cluster-modal-content .notes-container,
body.theme-light .bug-modal-content .notes-container {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
    box-shadow: none;
}
body.theme-light .bug-cluster-modal-content .note-item,
body.theme-light .bug-modal-content .note-item {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
}
body.theme-light .bug-cluster-modal-content .bugs-container,
body.theme-light .bug-modal-content .bugs-container {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
    box-shadow: none;
}
body.theme-light .bug-cluster-modal-content .bugs-container::-webkit-scrollbar-track,
body.theme-light .bug-modal-content .bugs-container::-webkit-scrollbar-track {
    background: #f7f7f9;
}
body.theme-light .bug-cluster-modal-content .bugs-container::-webkit-scrollbar-thumb,
body.theme-light .bug-modal-content .bugs-container::-webkit-scrollbar-thumb {
    background: #f0f1f4;
}
body.theme-light .bug-cluster-modal-content .bug-item,
body.theme-light .bug-modal-content .bug-item {
    border-bottom: 1px solid #e0e2e6;
}
body.theme-light .bug-cluster-modal-content .bug-item:hover,
body.theme-light .bug-modal-content .bug-item:hover {
    background-color: #ffffff;
}
body.theme-light .bug-cluster-modal-content .bug-item p,
body.theme-light .bug-modal-content .bug-item p {
    color: #565a63;
}
body.theme-light .user-task-modal {
    background-color: #f7f7f9;
    border-left: 1px solid #e0e2e6;
    color: #565a63;
}
body.theme-light .error-log-modal {
    background-color: #f7f7f9;
    border-left: 1px solid #e0e2e6;
    color: #565a63;
}
body.theme-light .user-task-modal-content .modal-close,
body.theme-light .error-log-modal-content .modal-close {
    color: #565a63;
}
body.theme-light .user-task-modal-content h3,
body.theme-light .error-log-modal-content h3 {
    color: #101114;
}
body.theme-light .user-task-modal-content p,
body.theme-light .error-log-modal-content p {
    color: #565a63;
}
body.theme-light .user-task-modal-content .notes-container,
body.theme-light .error-log-modal-content .notes-container {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
    box-shadow: none;
}
body.theme-light .user-task-modal-content .note-item,
body.theme-light .error-log-modal-content .note-item {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
}
body.theme-light .error-log-modal-content .details-container {
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
    box-shadow: none;
}
body.theme-light .error-log-modal-content .details-container::-webkit-scrollbar-track {
    background: #f7f7f9;
}
body.theme-light .error-log-modal-content .details-container::-webkit-scrollbar-thumb {
    background: #f0f1f4;
}
body.theme-light .error-log-modal-content .error-item {
    border-bottom: 1px solid #e0e2e6;
}
body.theme-light .error-log-modal-content .error-item:hover {
    background-color: #ffffff;
}
body.theme-light .error-log-modal-content .error-item p {
    color: #565a63;
}
body.theme-light .bug-cluster-modal .bug-item {
    border-bottom: 1px solid #e0e2e6;
}
body.theme-light .archive-tab {
    color: #1d4ed8;
}
body.theme-light .permissions-banner {
    background: linear-gradient(135deg, #f7f7f9 0%, #f7f7f9 100%);
    border: 1px solid #c9ccd1;
}
body.theme-light .permissions-header {
    color: #1b1d22;
}
body.theme-light .permissions-header i {
    color: #1d4ed8;
}
body.theme-light .merge-cluster-btn:hover {
    background: #ced1d6;
}
body.theme-light .add-dev-btn:hover {
    background: #ced1d6;
}
body.theme-light .mobile-nav-toggle {
    background: #f7f7f9;
    color: #1b1d22;
}
body.theme-light .mobile-nav-toggle:hover {
    background: #f0f1f4;
}
body.theme-light .bug-cluster-modal-content,
body.theme-light .bug-modal-content,
body.theme-light .error-log-modal-content,
body.theme-light .user-task-modal-content {
    background: #f7f7f9;
}
body.theme-light .bug-cluster-modal-content .modal-close,
body.theme-light .bug-modal-content .modal-close,
body.theme-light .error-log-modal-content .modal-close,
body.theme-light .user-task-modal-content .modal-close {
    color: #565a63;
}
body.theme-light .bug-cluster-modal-content .modal-close:hover,
body.theme-light .bug-modal-content .modal-close:hover,
body.theme-light .error-log-modal-content .modal-close:hover,
body.theme-light .user-task-modal-content .modal-close:hover {
    color: #1b1d22;
}
body.theme-light .cluster-detail-tag {
    color: #1d4ed8;
    box-shadow: none;
}
body.theme-light .cluster-detail-tag[data-type="what"] {
    color: #b91c1c;
}
body.theme-light .cluster-detail-tag[data-type="where"] {
    color: #1d4ed8;
}
body.theme-light .cluster-detail-tag[data-type="who"] {
    color: #5b21b6;
}
body.theme-light .cluster-detail-tag[data-type="when"] {
    color: #a16207;
}
body.theme-light .cluster-detail-tag-empty {
    color: #565a63;
}
body.theme-light .cluster-detail-subtitle {
    color: #565a63;
}
body.theme-light .modal-status-start {
    color: #1d4ed8;
}
body.theme-light .modal-status-start:hover {
    color: #1d4ed8;
}
body.theme-light .modal-status-complete {
    color: #15803d;
}
body.theme-light .modal-status-complete:hover {
    color: #15803d;
}
body.theme-light .modal-status-reopen {
    color: #2e3138;
}
body.theme-light .modal-status-reopen:hover {
    color: #1b1d22;
}
body.theme-light .cluster-detail-footer .modal-unassign-btn {
    color: #b91c1c;
}
body.theme-light .cluster-detail-footer .modal-unassign-btn:hover {
    color: #b91c1c;
}
body.theme-light .cluster-detail-action {
    color: #1d4ed8;
}
body.theme-light .cluster-detail-action:hover {
    color: #1b1d22;
}
body.theme-light .cluster-detail-action-danger {
    color: #b91c1c;
}
body.theme-light .cluster-detail-action-danger:hover {
    color: #b91c1c;
}
body.theme-light .cluster-detail-section-title {
    color: #565a63;
}
body.theme-light .cluster-detail-add-note {
    color: #565a63;
}
body.theme-light .cluster-detail-add-note:hover {
    color: #1b1d22;
}
body.theme-light .cluster-detail-expand-reports {
    color: #1d4ed8;
}
body.theme-light .cluster-detail-expand-reports:hover {
    color: #1b1d22;
}
body.theme-light .cluster-report-user {
    color: #1d4ed8;
}
body.theme-light .user-lookup-link {
    color: #1d4ed8;
}
body.theme-light .user-lookup-link:hover {
    color: #1d4ed8;
}
body.theme-light .cluster-report-time {
    color: #7d818a;
}
body.theme-light .cluster-report-quote {
    color: #1b1d22;
}
body.theme-light .cluster-report-quote::before {
    color: #7d818a;
}
body.theme-light .cluster-report-quote::after {
    color: #7d818a;
}
body.theme-light .cluster-report-action {
    color: #1d4ed8;
}
body.theme-light .cluster-report-action:hover {
    color: #1d4ed8;
}
body.theme-light .cluster-report-action-secondary {
    color: #565a63;
}
body.theme-light .cluster-report-action-secondary:hover {
    color: #2e3138;
}
body.theme-light .cluster-report-empty {
    color: #7d818a;
}
body.theme-light .inline-note-textarea {
    background: #f3f4f6;
    color: #1b1d22;
}
body.theme-light .inline-note-save {
    color: #15803d;
}
body.theme-light .inline-note-save:hover:not(:disabled) {
    color: #15803d;
}
body.theme-light .inline-note-cancel {
    color: #565a63;
}
body.theme-light .inline-note-cancel:hover {
    color: #1b1d22;
}
body.theme-light .mod-tabs a {
    color: #565a63;
}
body.theme-light .mod-tabs a:hover:not(.active) {
    color: #2e3138;
}
body.theme-light .mod-tabs a.active {
    color: #1b1d22;
}
body.theme-light .mod-search-icon {
    color: #7d818a;
}
body.theme-light .mod-search-input {
    background: #f3f4f6;
    color: #1b1d22;
}
body.theme-light .mod-btn-primary {
    color: #1d4ed8;
}
body.theme-light .mod-btn-primary:hover {
    color: #1b1d22;
}
body.theme-light .mod-btn-ghost {
    color: #2e3138;
}
body.theme-light .mod-btn-ghost:hover:not(:disabled) {
    color: #1b1d22;
}
body.theme-light .mod-btn-danger {
    color: #b91c1c;
}
body.theme-light .mod-btn-danger:hover:not(:disabled) {
    color: #b91c1c;
}
body.theme-light .mod-chip {
    color: #565a63;
}
body.theme-light .mod-chip:hover:not(.active) {
    color: #2e3138;
}
body.theme-light .mod-chip.active {
    color: #1b1d22;
}
body.theme-light .mod-table-wrap {
    background: #f7f7f9;
}
body.theme-light .mod-table thead th {
    color: #565a63;
}
body.theme-light .mod-table tbody td {
    color: #1b1d22;
}
body.theme-light .mod-table .mod-sortable:hover {
    color: #2e3138;
}
body.theme-light .mod-sort-arrow {
    color: #7d818a;
}
body.theme-light .mod-cell-secondary {
    color: #565a63;
}
body.theme-light .mod-cell-muted {
    color: #7d818a;
}
body.theme-light .mod-player-id {
    color: #1b1d22;
}
body.theme-light .mod-link {
    color: #1d4ed8;
}
body.theme-light .mod-link:hover {
    color: #1b1d22;
}
body.theme-light .mod-status-permanent {
    color: #b91c1c;
}
body.theme-light .mod-status-temporary {
    color: #a16207;
}
body.theme-light .mod-status-expired {
    color: #565a63;
}
body.theme-light .mod-state-select {
    background: #f3f4f6;
    color: #1b1d22;
}
body.theme-light .mod-loading {
    color: #565a63;
}
body.theme-light .mod-tab-blurb {
    color: #565a63;
}
body.theme-light .appeal-status-pending {
    color: #a16207;
}
body.theme-light .appeal-status-approved {
    color: #15803d;
}
body.theme-light .appeal-status-denied {
    color: #b91c1c;
}
body.theme-light .appeal-type-trade {
    color: #1d4ed8;
}
body.theme-light .appeal-type-scam {
    color: #b91c1c;
}
body.theme-light .appeal-type-exploit {
    color: #b45309;
}
body.theme-light .appeal-status-investigating {
    color: #1d4ed8;
}
body.theme-light .appeals-type-chip {
    color: #565a63;
}
body.theme-light .appeals-type-chip:hover:not(.active) {
    color: #2e3138;
}
body.theme-light .appeals-type-chip.active {
    color: #5b21b6;
}
body.theme-light .filter-label {
    color: #7d818a;
}
body.theme-light .appeals-subtype-chip {
    color: #565a63;
}
body.theme-light .appeals-subtype-chip:hover:not(.active) {
    color: #2e3138;
}
body.theme-light .appeals-subtype-chip.active {
    color: #5b21b6;
}
body.theme-light .tickets-stat {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light .tickets-stat-value {
    color: #101114;
}
body.theme-light .tickets-stat-label {
    color: #7d818a;
}
body.theme-light .ticket-range-btn {
    color: #565a63;
}
body.theme-light .ticket-range-btn:hover:not(.active) {
    color: #2e3138;
}
body.theme-light .ticket-range-btn.active {
    color: #1b1d22;
}
body.theme-light .tickets-stats-chart {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light .ticket-section-head h3 {
    color: #1b1d22;
}
body.theme-light .ticket-section-count {
    color: #7d818a;
}
body.theme-light .assignee-bubble {
    color: #5b21b6;
}
body.theme-light .assignee-remove {
    color: #5b21b6;
}
body.theme-light .assignee-remove:hover {
    color: #101114;
}
body.theme-light .assignee-add {
    color: #6d28d9;
}
body.theme-light .assignee-add:hover {
    color: #5b21b6;
}
body.theme-light .assignee-picker {
    background: #f1f2f5;
    border: 1px solid #dcdee2;
}
body.theme-light .assignee-picker-group {
    color: #7d818a;
}
body.theme-light .assignee-picker-item {
    color: #2e3138;
}
body.theme-light .assignee-picker-item:hover {
    color: #101114;
}
body.theme-light .assignee-picker-empty {
    color: #7d818a;
}
body.theme-light .note-event {
    color: #6d28d9;
}
body.theme-light .note-event small {
    color: #7d818a;
}
body.theme-light .appeals-chip {
    color: #565a63;
}
body.theme-light .appeals-chip:hover:not(.active) {
    color: #2e3138;
}
body.theme-light .appeals-chip.active {
    color: #1b1d22;
}
body.theme-light .mod-table tbody td[colspan] {
    color: #7d818a;
}
body.theme-light .mod-page-info {
    color: #565a63;
}
body.theme-light .mod-issue-modal-content {
    background: #f7f7f9;
}
body.theme-light .mod-issue-close {
    color: #565a63;
}
body.theme-light .mod-issue-close:hover {
    color: #1b1d22;
}
body.theme-light .mod-issue-title {
    color: #1b1d22;
}
body.theme-light .mod-issue-title i {
    color: #b91c1c;
}
body.theme-light .mod-issue-subtitle {
    color: #565a63;
}
body.theme-light .mod-ban-mode-toggle {
    background: #f7f7f9;
}
body.theme-light .mod-ban-mode-toggle label {
    color: #565a63;
}
body.theme-light .mod-ban-mode-toggle label:has(input:checked) {
    background: #e8eaed;
    color: #101114;
}
body.theme-light #game-ban-csv-field input[type="file"],
body.theme-light #trade-ban-csv-field input[type="file"] {
    color: #2e3138;
}
body.theme-light .mod-issue-field label {
    color: #2e3138;
}
body.theme-light .mod-issue-field input[type="text"],
body.theme-light .mod-issue-field input[type="datetime-local"],
body.theme-light .mod-issue-field textarea,
body.theme-light .mod-issue-field select.mod-issue-select {
    background: #f3f4f6;
    color: #1b1d22;
}
body.theme-light .mod-issue-hint {
    color: #7d818a;
}
body.theme-light .mod-issue-error {
    color: #b91c1c;
}
body.theme-light .ar-title {
    color: #101114;
}
body.theme-light .ar-subtitle {
    color: #565a63;
}
body.theme-light .ar-loading,
body.theme-light .ar-empty {
    color: #565a63;
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light .ar-card {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light .ar-card-name {
    color: #101114;
}
body.theme-light .ar-pill-on {
    color: #15803d;
}
body.theme-light .ar-pill-off {
    color: #2e3138;
}
body.theme-light .ar-card-label {
    color: #7d818a;
}
body.theme-light .ar-card-q {
    color: #2e3138;
}
body.theme-light .ar-card-reply {
    color: #565a63;
}
body.theme-light .ar-btn {
    background: #f0f1f4;
    color: #1b1d22;
}
body.theme-light .ar-btn:hover {
    background: #dfe1e5;
}
body.theme-light .ar-btn-primary:disabled {
    background: #ced1d6;
}
body.theme-light .ar-btn-danger {
    color: #dc2626;
}
body.theme-light .ar-modal-card {
    background: #f7f7f9;
    border: 1px solid #dcdee2;
}
body.theme-light .ar-modal-card h3 {
    color: #101114;
}
body.theme-light .ar-modal-close {
    color: #565a63;
}
body.theme-light .ar-modal-close:hover {
    color: #101114;
}
body.theme-light .ar-label {
    color: #2e3138;
}
body.theme-light .ar-hint {
    color: #7d818a;
}
body.theme-light .ar-input {
    background: #f3f4f6;
    border: 1px solid #dcdee2;
    color: #1b1d22;
}
body.theme-light .ar-check {
    color: #2e3138;
}
body.theme-light .ar-error {
    color: #dc2626;
}
body.theme-light .ar-strip {
    border: 1px solid #dcdee2;
    background: #f7f7f9;
}
body.theme-light .ar-strip-badge {
    color: #1d4ed8;
}
body.theme-light .ar-strip-badge-sent {
    color: #15803d;
}
body.theme-light .ar-strip-issue {
    color: #101114;
}
body.theme-light .ar-strip-conf {
    color: #7d818a;
}
body.theme-light .ar-strip-reply {
    color: #2e3138;
}
body.theme-light .ar-strip-hint {
    color: #7d818a;
}
body.theme-light .ar-strip-progress {
    color: #7d818a;
}
body.theme-light .ar-strip-choice-note {
    color: #2e3138;
}
body.theme-light .ar-strip-choice-note strong {
    color: #101114;
}
body.theme-light .ar-strip-peek {
    color: #1d4ed8;
}
body.theme-light .ar-strip-peek:hover {
    color: #1d4ed8;
}
body.theme-light .ar-strip-excluded {
    border: 1px solid #dcdee2;
}
body.theme-light .ar-strip-excluded-item {
    color: #565a63;
}
body.theme-light .ar-strip-excluded-more {
    color: #7d818a;
}
body.theme-light .ar-strip-sent-text {
    color: #565a63;
}
body.theme-light .ar-card-badge-sent {
    color: #15803d;
}
body.theme-light .ar-card-badge-suggested {
    color: #1d4ed8;
}
body.theme-light .followup-chip {
    color: #b45309;
}
body.theme-light .bl-chip-critical {
    color: #b91c1c;
}
body.theme-light .bl-chip-urgent {
    color: #b45309;
}
body.theme-light .bl-chip-info {
    color: #1d4ed8;
}
body.theme-light .bl-chip-pending {
    color: #7d818a;
}
body.theme-light .bl-filter-bar {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light .bl-filter-label {
    color: #7d818a;
}
body.theme-light .bl-filter-chip {
    background: #f0f1f4;
    color: #2e3138;
}
body.theme-light .ar-split-tune {
    background: #f3f4f6;
    border: 1px solid #dcdee2;
}
body.theme-light .ar-split-tune label {
    color: #2e3138;
}
body.theme-light .ar-split-thr-val {
    color: #1d4ed8;
}
body.theme-light .ar-split-tune-hint {
    color: #7d818a;
}
body.theme-light .ar-split-intro {
    color: #565a63;
}
body.theme-light .ar-split-group {
    border: 1px solid #dcdee2;
}
body.theme-light .ar-split-tag {
    color: #1d4ed8;
}
body.theme-light .ar-split-stay .ar-split-tag {
    color: #2e3138;
}
body.theme-light .ar-split-meta {
    color: #7d818a;
}
body.theme-light .ar-split-sample {
    color: #2e3138;
}
body.theme-light .gt-kicker {
    color: #1d4ed8;
}
body.theme-light .gt-hdr h2 {
    color: #101114;
}
body.theme-light .gt-sub {
    color: #7d818a;
}
body.theme-light .gt-rail {
    background: #ffffff;
    border: 1px solid #dcdee2;
}
body.theme-light .gt-rail-h {
    border-bottom: 1px solid #dcdee2;
    color: #7d818a;
}
body.theme-light .gt-rail-list li {
    border-bottom: 1px solid #dcdee2;
}
body.theme-light .gt-rail-list button {
    color: #565a63;
}
body.theme-light .gt-rail-list button:hover {
    background: #f0f1f4;
    color: #1b1d22;
}
body.theme-light .gt-num {
    background: #e8eaed;
}
body.theme-light .gt-rail-list li.on button {
    color: #1b1d22;
}
body.theme-light .gt-rail-list li.done .gt-num {
    color: #6d28d9;
}
body.theme-light .gt-screen {
    background: #ffffff;
    border: 1px solid #dcdee2;
}
body.theme-light .gt-ch {
    color: #1d4ed8;
}
body.theme-light .gt-st {
    color: #101114;
}
body.theme-light .gt-caption {
    background: #f0f1f4;
    border: 1px solid #dcdee2;
    color: #1b1d22;
}
body.theme-light .gt-trylink a {
    color: #1d4ed8;
}
body.theme-light .gt-trylink a:hover {
    color: #1d4ed8;
}
body.theme-light .gt-transport {
    background: #ffffff;
    border: 1px solid #dcdee2;
}
body.theme-light .gt-tbar {
    background: #e8eaed;
}
body.theme-light .gt-ttick {
    background: #ced1d6;
}
body.theme-light .gt-tbtn {
    background: #f0f1f4;
    border: 1px solid #dcdee2;
    color: #1b1d22;
}
body.theme-light .gt-tbtn:hover {
    background: #e8eaed;
}
body.theme-light .gt-speed {
    border: 1px solid #dcdee2;
    background: #f0f1f4;
    color: #565a63;
}
body.theme-light .gt-speed:hover {
    color: #1b1d22;
    background: #e8eaed;
}
body.theme-light .gt-keys kbd {
    border: 1px solid #c9ccd1;
    color: #565a63;
    background: #f0f1f4;
}
body.theme-light .gt-counter {
    color: #7d818a;
}
body.theme-light .gt-plain {
    color: #2e3138;
}
body.theme-light .gt-dim {
    color: #7d818a;
}
body.theme-light .gt-col {
    background: #f7f7f9;
    border: 1px solid #dcdee2;
}
body.theme-light .gt-col-title {
    color: #1b1d22;
}
body.theme-light .gt-linkbtn {
    background: #e8eaed;
    color: #2e3138;
    border: 1px solid #c9ccd1;
}
body.theme-light .gt-modal {
    background: #ffffff;
    border: 1px solid #c9ccd1;
}
body.theme-light .gt-scene-modal h4 {
    color: #101114;
}
body.theme-light .gt-tree {
    color: #565a63;
    background: #f7f7f9;
    border: 1px solid #dcdee2;
}
body.theme-light .gt-k {
    color: #1d4ed8;
}
body.theme-light .gt-v {
    color: #6d28d9;
}
body.theme-light .gt-searchrow input {
    background: #f7f7f9;
    border: 1px solid #c9ccd1;
    color: #1b1d22;
}
body.theme-light .gt-traderow {
    background: #ffffff;
    border: 1px solid #dcdee2;
    color: #2e3138;
}
body.theme-light .gt-traderow strong {
    color: #101114;
}
body.theme-light .gt-splash-kicker {
    color: #1d4ed8;
}
body.theme-light .gt-splash h2 {
    color: #101114;
}
body.theme-light .gt-splash p {
    color: #565a63;
}
body.theme-light .gt-pills span {
    border: 1px solid #c9ccd1;
    background: #f0f1f4;
    color: #565a63;
}
body.theme-light .el-occ-badge {
    color: #b45309;
}
body.theme-light .el-occ-badge-na {
    color: #7d818a;
}
body.theme-light .error-logs-timeline-card {
    background: #ffffff;
    border: 1px solid #dcdee2;
}
body.theme-light .error-logs-timeline-head h3 {
    color: #101114;
}
body.theme-light .error-logs-timeline-sub {
    color: #7d818a;
}
body.theme-light #error-logs-timeline-status {
    color: #7d818a;
}
body.theme-light .pp-mod-chip-red {
    color: #b91c1c;
}
body.theme-light .pp-mod-chip-amber {
    color: #b45309;
}
body.theme-light .cluster-tag {
    color: #2e3138;
    box-shadow: none;
}
body.theme-light .cluster-tag[data-type="what"] {
    color: #b91c1c;
}
body.theme-light .cluster-tag[data-type="where"] {
    color: #1d4ed8;
}
body.theme-light .cluster-tag[data-type="who"] {
    color: #5b21b6;
}
body.theme-light .cluster-tag[data-type="when"] {
    color: #a16207;
}
body.theme-light .cluster-tag:hover::after {
    background: #f7f7f9;
    color: #101114;
    border: 1px solid #d5d8dc;
}
body.theme-light .filter-section select,
body.theme-light .filter-section input {
    border: 1px solid #c9ccd1;
}
body.theme-light .pagination-controls button {
    background: #c5c8cd;
}
body.theme-light .pagination-controls button:disabled {
    background: #e8eaed;
}
body.theme-light .bubble-label {
    background: #c5c8cd;
    color: #43464d;
}
body.theme-light .tag-filter-section {
    background: #f0f1f4;
}
body.theme-light .tag-filter-section label {
    color: #1b1d22;
}
body.theme-light .tag-bubble {
    color: #2e3138;
    box-shadow: none;
}
body.theme-light .tag-bubble[data-type="what"] {
    color: #b91c1c;
}
body.theme-light .tag-bubble[data-type="where"] {
    color: #1d4ed8;
}
body.theme-light .tag-bubble[data-type="who"] {
    color: #5b21b6;
}
body.theme-light .tag-bubble[data-type="when"] {
    color: #a16207;
}
body.theme-light .bubble-checkbox:checked + .tag-bubble {
    box-shadow: none;
}
body.theme-light .no-tags {
    color: #7d818a;
}
body.theme-light .profile-table {
    background: #ffffff;
}
body.theme-light .profile-table th,
body.theme-light .profile-table td {
    border-bottom: 1px solid #c9ccd1;
}
body.theme-light .profile-table th {
    background: #f0f1f4;
    color: #1b1d22;
}
body.theme-light .profile-table tbody tr:hover {
    background: #e8eaed;
}
body.theme-light .profile-table .view-times-btn {
    background: #c5c8cd;
    color: #101114;
}
body.theme-light #profile-toolbar {
    background: #f7f7f9;
    border: 1px solid #dcdee2;
}
body.theme-light #profile-toolbar .pf-divider {
    background: #dfe1e5;
}
body.theme-light .pf-btn {
    color: #101114;
}
body.theme-light .pf-btn-slate {
    background: #ced1d6;
}
body.theme-light .pf-btn-slate:hover {
    background: #ced1d6;
}
body.theme-light .ds-section {
    background: #ffffff;
    border: 1px solid #dcdee2;
}
body.theme-light .ds-section-head {
    color: #1d4ed8;
    border-bottom: 1px solid #dcdee2;
}
body.theme-light .ds-raw-btn {
    background: #f0f1f4;
    color: #1d4ed8;
    border: 1px solid #c9ccd1;
}
body.theme-light .ds-raw-btn:hover {
    background: #dfe1e5;
    border-color: #c9ccd1;
}
body.theme-light .ds-raw-textarea {
    background: #f7f7f9;
    color: #2e3138;
    border: 1px solid #dcdee2;
}
body.theme-light .ds-raw-err {
    color: #dc2626;
}
body.theme-light #json-tree-root .jt-key-edit {
    color: #1d4ed8;
}
body.theme-light #json-editor-container {
    background: #f7f7f9;
}
body.theme-light #json-tree-root span[style*="width: 16px"] {
    color: #1d4ed8;
}
body.theme-light .profile-tab {
    color: #565a63;
}
body.theme-light .profile-tab:hover {
    color: #1b1d22;
}
body.theme-light .profile-tab.active {
    color: #1d4ed8;
}
body.theme-light #performance .perf-sub {
    color: #565a63;
}
body.theme-light #performance .perf-graph-card {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light #performance .perf-graph-title {
    color: #1b1d22;
}
body.theme-light #performance .perf-graph-title span {
    color: #7d818a;
}
body.theme-light #performance .perf-empty {
    color: #7d818a;
}
body.theme-light #super-admin-sql .sa-sql-tabs {
    border-bottom: 1px solid #e0e2e6;
}
body.theme-light #super-admin-sql .sa-sql-tab {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
    color: #565a63;
}
body.theme-light #super-admin-sql .sa-sql-tab:hover {
    color: #2e3138;
}
body.theme-light #super-admin-sql .sa-sql-tab.active {
    background: #ffffff;
    color: #101114;
}
body.theme-light #super-admin-sql .sa-sql-tab-rename {
    background: #f3f4f6;
    color: #101114;
}
body.theme-light #super-admin-sql .sa-sql-tab-close {
    color: #7d818a;
}
body.theme-light #super-admin-sql .sa-sql-tab-close:hover {
    color: #dc2626;
}
body.theme-light #super-admin-sql .sa-sql-tab-add {
    color: #565a63;
}
body.theme-light #super-admin-sql .sa-sql-tab-add:hover {
    color: #101114;
}
body.theme-light #super-admin-sql ::-webkit-scrollbar-thumb {
    background: #dfe1e5;
}
body.theme-light #super-admin-sql ::-webkit-scrollbar-thumb:hover {
    background: #ced1d6;
}
body.theme-light #super-admin-sql .sa-sql-warning {
    color: #b45309;
}
body.theme-light #super-admin-sql .sa-sql-editor {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light #super-admin-sql #sa-sql-input {
    background: #f3f4f6;
    color: #1b1d22;
    border: 1px solid #e0e2e6;
}
body.theme-light #super-admin-sql .CodeMirror {
    border: 1px solid #e0e2e6;
}
body.theme-light .CodeMirror-hints {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light .CodeMirror-hint {
    color: #2e3138;
}
body.theme-light #super-admin-sql .sa-sql-hint {
    color: #7d818a;
}
body.theme-light #super-admin-sql .sa-sql-note {
    color: #565a63;
}
body.theme-light #super-admin-sql .sa-sql-export-btn {
    background: #f0f1f4;
    color: #2e3138;
}
body.theme-light #super-admin-sql .sa-sql-export-btn:hover {
    background: #e8eaed;
    color: #101114;
}
body.theme-light #super-admin-sql .sa-sql-msg {
    color: #565a63;
}
body.theme-light #super-admin-sql .sa-sql-ok {
    color: #047857;
}
body.theme-light #super-admin-sql .sa-sql-error {
    color: #dc2626;
}
body.theme-light #super-admin-sql .sa-sql-table-wrap {
    border: 1px solid #e0e2e6;
    background: #f7f7f9;
}
body.theme-light #super-admin-sql .sa-sql-table thead th {
    background: #ffffff;
    color: #565a63;
    border-bottom: 2px solid #dcdee2;
}
body.theme-light #super-admin-sql .sa-sql-table td {
    color: #2e3138;
}
body.theme-light #super-admin-sql .sa-sql-table .sa-rownum {
    background: #f7f7f9;
    border-right: 1px solid #e0e2e6;
}
body.theme-light #super-admin-sql .sa-sql-table tbody tr:hover .sa-rownum {
    color: #1d4ed8;
}
body.theme-light #vision-board .vb-save-status {
    color: #7d818a;
}
body.theme-light #vision-board .vb-zoom {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light #vision-board .vb-zoom button {
    color: #2e3138;
}
body.theme-light #vision-board .vb-zoom button:hover {
    color: #101114;
}
body.theme-light #vision-board .vb-zoom #vb-zoom-level {
    color: #565a63;
}
body.theme-light #vision-board .vb-canvas {
    background-color: #f3f4f6;
}
body.theme-light #vision-board .vb-del:hover {
    color: #101114;
}
body.theme-light #vision-board .vb-text {
    color: #1b1d22;
}
body.theme-light #vision-board .vb-text:empty::before {
    color: #7d818a;
}
body.theme-light #vision-board .vb-loading {
    color: #7d818a;
}
body.theme-light #monetization .mon-head h1 {
    color: #101114;
}
body.theme-light #monetization .mon-head p {
    color: #7d818a;
}
body.theme-light #monetization .mon-field label {
    color: #7d818a;
}
body.theme-light #monetization .mon-controls input[type="date"] {
    background: #f3f4f6;
    border: 1px solid #dcdee2;
    color: #1b1d22;
}
body.theme-light #monetization .mon-presets {
    background: #f3f4f6;
    border: 1px solid #dcdee2;
}
body.theme-light #monetization .mon-preset {
    color: #565a63;
}
body.theme-light #monetization .mon-preset:hover {
    color: #1b1d22;
    background: #ffffff;
}
body.theme-light #monetization .mon-hero-main {
    background: linear-gradient(135deg,#f7f7f9 0%,#f1f2f5 100%);
    border: 1px solid #e0e2e6;
}
body.theme-light #monetization .mon-hero-label {
    color: #565a63;
}
body.theme-light #monetization .mon-hero-sub {
    color: #7d818a;
}
body.theme-light #monetization .mon-hero-sub b {
    color: #2e3138;
}
body.theme-light #monetization .mon-trend.up {
    color: #047857;
}
body.theme-light #monetization .mon-trend.down {
    color: #dc2626;
}
body.theme-light #monetization .mon-stat {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light #monetization .mon-stat .l {
    color: #7d818a;
}
body.theme-light #monetization .mon-stat .v {
    color: #1b1d22;
}
body.theme-light #monetization .mon-panel {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light #monetization .mon-panel h3 {
    color: #1b1d22;
}
body.theme-light #monetization .mon-panel .sub {
    color: #7d818a;
}
body.theme-light #monetization .mon-table th {
    color: #7d818a;
    border-bottom: 1px solid #dcdee2;
}
body.theme-light #monetization .mon-table td {
    color: #2e3138;
    border-top: 1px solid #e0e2e6;
}
body.theme-light #monetization .mon-table td.name {
    color: #1b1d22;
}
body.theme-light BELOW — DO NOT CHANGE IT -->
    <style>
        
        #economy .economy-wrapper {
    background: #f3f4f6;
}
body.theme-light #economy .economy-header {
    color: #101114;
}
body.theme-light #economy .kpi-card {
    background: linear-gradient(135deg,#f7f7f9 0%,#f7f7f9 100%);
    border: 1px solid #c9ccd1;
}
body.theme-light #economy .kpi-card:hover {
    border-color: #c9ccd1;
}
body.theme-light #economy .kpi-title {
    color: #565a63;
}
body.theme-light #economy .kpi-value {
    color: #101114;
}
body.theme-light #economy .chart-container {
    background: linear-gradient(135deg,#f7f7f9 0%,#f7f7f9 100%);
    border: 1px solid #c9ccd1;
}
body.theme-light #economy .chart-title {
    color: #101114;
}
body.theme-light #economy .top-players-leaderboard {
    border: 1px solid #e0e2e6;
}
body.theme-light #economy .top-players-title {
    color: #1b1d22;
}
body.theme-light #economy .top-players-subtitle {
    color: #565a63;
}
body.theme-light #economy .top-players-empty {
    color: #7d818a;
}
body.theme-light #economy .top-player-rank {
    color: #565a63;
}
body.theme-light #economy a.top-player-main:hover .top-player-name {
    color: #1d4ed8;
}
body.theme-light #economy .top-player-name {
    color: #1b1d22;
}
body.theme-light #economy .top-player-id {
    color: #7d818a;
}
body.theme-light #economy .top-player-value {
    color: #1d4ed8;
}
body.theme-light #market-cap-prev:hover:not(:disabled),
body.theme-light #market-cap-next:hover:not(:disabled) {
    background: #f0f1f4;
    border-color: #aeb2b8;
}
body.theme-light #economy-charity .charity-table {
    background: #f7f7f9;
}
body.theme-light #economy-charity .charity-table th {
    background: #f3f4f6;
    color: #1b1d22;
    border-bottom: 2px solid #e0e2e6;
}
body.theme-light #economy-charity .charity-table tbody tr {
    border-bottom: 1px solid #e0e2e6;
}
body.theme-light #economy-charity .charity-table td {
    color: #2e3138;
}
body.theme-light #economy-charity .charity-table td.name {
    color: #1b1d22;
}
body.theme-light #economy-charity .charity-table td.usd {
    color: #047857;
}
body.theme-light #economy-charity .charity-tab {
    background: #f7f7f9;
    color: #2e3138;
    border: 1px solid #e0e2e6;
}
body.theme-light #economy-charity .charity-tab:hover {
    background: #e8eaed;
    color: #101114;
}
body.theme-light #economy-charity .charity-default-badge {
    color: #101114;
}
body.theme-light #economy-charity .charity-action-btn.secondary {
    background: #f0f1f4;
    color: #2e3138;
}
body.theme-light #economy-charity .charity-action-btn.secondary:hover {
    background: #dfe1e5;
}
body.theme-light #economy-charity .charity-inline-form input,
body.theme-light #economy-charity .charity-link-form input {
    background: #f3f4f6;
    border: 1px solid #e0e2e6;
    color: #1b1d22;
}
body.theme-light #economy-charity .charity-manage {
    border-top: 1px solid #dcdee2;
}
body.theme-light #economy-charity .charity-item-row {
    background: #f7f7f9;
    border: 1px solid #e0e2e6;
}
body.theme-light #economy-charity .charity-item-name {
    color: #1b1d22;
}
body.theme-light #economy-charity .charity-item-id {
    color: #7d818a;
}
body.theme-light #economy-charity .charity-unlink-btn {
    border: 1px solid #dcdee2;
}
body.theme-light #economy-charity .charity-empty {
    color: #7d818a;
}

/* ---- Inline styles set via jQuery .css() serialize as rgb(...) — catch the
        common dark values in that form too, plus a few hexes missed above. ---- */
body.theme-light [style*="rgb(12, 12, 12)"], body.theme-light [style*="rgb(15, 15, 15)"],
body.theme-light [style*="rgb(20, 20, 20)"], body.theme-light [style*="rgb(25, 25, 25)"],
body.theme-light [style*="rgb(26, 26, 26)"], body.theme-light [style*="rgb(30, 30, 30)"],
body.theme-light [style*="rgb(35, 35, 35)"], body.theme-light [style*="rgb(43, 43, 43)"],
body.theme-light [style*="rgb(51, 51, 51)"],
body.theme-light [style*="#0c0c0c"], body.theme-light [style*="#1e1e1e"],
body.theme-light [style*="#2d2d2d"], body.theme-light [style*="#282828"] {
    background-color: #ffffff !important;
    color: #2e3138 !important;
    border-color: #dcdee2 !important;
}
body.theme-light [style*="color: rgb(255, 255, 255)"], body.theme-light [style*="color: rgb(235, 235, 235)"],
body.theme-light [style*="color: rgb(212, 212, 212)"], body.theme-light [style*="color: rgb(221, 221, 221)"],
body.theme-light [style*="color: rgb(190, 190, 190)"] {
    color: #24262c !important;
}
body.theme-light [style*="color: rgb(138, 138, 138)"], body.theme-light [style*="color: rgb(143, 143, 143)"] {
    color: #6b6f77 !important;
}
/* Pale accent text set inline (links, gains, warnings) → darker shades. */
body.theme-light [style*="color:#99ccff"], body.theme-light [style*="color: #99ccff"],
body.theme-light [style*="color:#4da3ff"], body.theme-light [style*="color: #4da3ff"] { color: #1d4ed8 !important; }
body.theme-light [style*="color:#34d399"], body.theme-light [style*="color: #34d399"] { color: #047857 !important; }
body.theme-light [style*="color:#f87171"], body.theme-light [style*="color: #f87171"] { color: #dc2626 !important; }
body.theme-light [style*="color:#fbbf24"], body.theme-light [style*="color: #fbbf24"] { color: #b45309 !important; }
body.theme-light [style*="color:#fca5a5"], body.theme-light [style*="color: #fca5a5"] { color: #b91c1c !important; }
body.theme-light [style*="color:#a78bfa"], body.theme-light [style*="color: #a78bfa"] { color: #6d28d9 !important; }
/* Colored (brand/status) backgrounds keep white text — rgb forms. */
body.theme-light [style*="background: rgb(0, 113, 255)"], body.theme-light [style*="background-color: rgb(0, 113, 255)"],
body.theme-light [style*="background: rgb(239, 68, 68)"], body.theme-light [style*="background-color: rgb(239, 68, 68)"],
body.theme-light [style*="background: rgb(16, 185, 129)"], body.theme-light [style*="background-color: rgb(16, 185, 129)"],
body.theme-light [style*="background: rgb(124, 58, 237)"], body.theme-light [style*="background-color: rgb(124, 58, 237)"] {
    color: #ffffff !important;
}

/* ---- Tickets page zones (pool / yours / closed archive). Token-based so
        both themes work without regenerating the light layer. ---- */
.ticket-zone {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 22px;
}
.ticket-zone-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ticket-zone-head h3 {
    margin: 0;
    font-size: 1.02rem;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ticket-zone-head h3 i { color: var(--text-dim); font-size: 0.9em; }
.ticket-zone-sub { color: var(--text-dim); font-size: 0.8rem; }
/* Zones share one clean card treatment — separation comes from the headers
   and spacing, not colored edges. */
.ticket-date-input {
    background: var(--bg-inset);
    color: var(--text-strong);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
}
#appeals-export-bar { margin-left: auto; }

/* Profile gain-percentile chips (violet = notable, grey = normal). Explicit
   light overrides included since these land after the generated layer. */
.pp-mod-chip-violet { color: #a78bfa; background: rgba(139, 92, 246, 0.13); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.4); }
.pp-mod-chip-grey { color: #bebebe; background: rgba(165, 165, 165, 0.10); box-shadow: inset 0 0 0 1px rgba(165, 165, 165, 0.3); }
body.theme-light .pp-mod-chip-violet { color: #6d28d9; }
body.theme-light .pp-mod-chip-grey { color: #565a63; }

/* ---- The Guide (role-aware handbook). Token-based so both themes work. ---- */
.guide-sub { color: var(--text-dim); font-size: 0.9rem; margin: -6px 0 20px; }
.guide-wrap { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.guide-toc {
    list-style: none; margin: 0; padding: 10px;
    width: 270px; flex-shrink: 0;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    position: sticky; top: 16px;
}
.guide-toc-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    color: var(--text-muted); font-size: 0.9rem; font-weight: 600;
}
.guide-toc-item i { width: 18px; text-align: center; color: var(--text-dim); }
.guide-toc-item:hover { background: var(--bg-elevated); color: var(--text-strong); }
.guide-toc-item.active { background: var(--bg-inset); color: var(--text); }
.guide-toc-item.active i { color: var(--blue-light); }
.guide-toc-num {
    font-size: 0.72rem; color: var(--text-dim); width: 16px; text-align: right;
    font-variant-numeric: tabular-nums;
}
.guide-page {
    flex: 1; min-width: 300px; max-width: 860px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    padding: 30px 36px;
}
.guide-chapter-kicker {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-dim);
}
.guide-chapter-head h2 { margin: 6px 0 18px; color: var(--text); display: flex; align-items: center; gap: 12px; }
.guide-chapter-head h2 i { color: var(--text-dim); font-size: 0.85em; }
.guide-body { color: var(--text-body); font-size: 0.95rem; line-height: 1.65; }
.guide-body h3 { color: var(--text-strong); margin: 24px 0 8px; font-size: 1.02rem; }
.guide-body ul, .guide-body ol { padding-left: 22px; margin: 10px 0; }
.guide-body li { margin-bottom: 7px; }
.guide-body p { margin: 10px 0; }
.guide-why {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-left: 3px solid var(--violet); border-radius: 8px;
    padding: 14px 18px; margin: 16px 0;
}
.guide-why-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--violet-light); margin-bottom: 6px;
}
.guide-tip {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-left: 3px solid var(--blue); border-radius: 8px;
    padding: 12px 18px; margin: 16px 0; color: var(--text-muted); font-size: 0.9rem;
}
.guide-table { border-collapse: collapse; margin: 12px 0; width: 100%; }
.guide-table th, .guide-table td { border: 1px solid var(--border); padding: 7px 12px; text-align: left; font-size: 0.88rem; }
.guide-table th { color: var(--text-muted); background: var(--bg-inset); }
.guide-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 10px; flex-wrap: wrap; }
.guide-end { color: var(--text-dim); font-size: 0.85rem; }
@media (max-width: 900px) {
    .guide-toc { width: 100%; position: static; display: flex; flex-wrap: wrap; gap: 4px; }
    .guide-toc-item { padding: 8px 10px; }
    .guide-page { padding: 20px; }
}

/* Guide button in the sidebar footer — always visible, styled like a nav row. */
.sidebar-guide-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 8px 8px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}
.sidebar-guide-btn i { color: var(--text-dim); width: 18px; text-align: center; }
.sidebar-guide-btn:hover { background: var(--bg-elevated); color: var(--text); }
.sidebar-guide-btn:hover i { color: var(--text); }

/* Guide editing (cs_manager / dev / admin) */
.guide-edit-tools { float: right; display: flex; gap: 8px; }
.guide-edited-note { color: var(--text-dim); font-size: 0.72rem; margin-left: 10px; font-style: italic; text-transform: none; letter-spacing: 0; }
.guide-body.guide-editing {
    outline: 2px dashed var(--blue-light);
    outline-offset: 10px;
    border-radius: 4px;
    cursor: text;
}

/* Role-gated guide content sits below the editable body; flag it in edit mode. */
.guide-locked-flag { position: relative; opacity: 0.75; }
.guide-locked-flag::before {
    content: 'role-gated, not editable';
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin: 12px 0 4px;
}