/* ============================================================
   CFLAG Modern Tactical Console
   Shared stylesheet for CFLAG public, account, and admin pages
   ============================================================ */

:root {
    --bg: #050504;
    --bg2: #0b0c09;
    --panel: #10130e;
    --panel2: #161b12;
    --panel3: #1d2317;

    --border: #323a28;
    --border2: #5d6744;

    --text: #e7dfc5;
    --muted: #9e987f;
    --strong: #fff3cf;

    --od: #4b5a32;
    --od2: #627044;
    --fde: #a99a71;
    --fde2: #c6b686;
    --orange: #d88924;
    --orange2: #f0a338;
    --red: #8b3028;

    --mono: "Consolas", "Cascadia Mono", "Courier New", monospace;
    --sans: "Segoe UI", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at 70% -10%, rgba(216,137,36,0.11), transparent 32%),
        radial-gradient(circle at 20% 10%, rgba(75,90,50,0.15), transparent 35%),
        linear-gradient(180deg, #090a08, #030403 62%, #010201);
    color: var(--text);
    font-family: var(--sans);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(169,154,113,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(169,154,113,0.025) 1px, transparent 1px);
    background-size: 34px 34px;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.65), transparent 16%, transparent 84%, rgba(0,0,0,.65)),
        radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.58));
}

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

a:hover {
    color: var(--fde2);
}

.console-shell {
    width: 1180px;
    max-width: calc(100vw - 48px);
    margin: 28px auto 42px auto;
}

/* Header */
.console-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 16px;
}

.brand-panel {
    position: relative;
    min-height: 150px;
    border: 1px solid var(--border);
    border-left: 5px solid var(--orange);
    background:
        linear-gradient(90deg, rgba(216,137,36,.10), transparent 38%),
        linear-gradient(180deg, rgba(22,27,18,.96), rgba(8,10,7,.96));
    box-shadow: 0 16px 34px rgba(0,0,0,.42);
    overflow: hidden;
    padding: 24px 28px;
}

.brand-panel::after {
    content: "CFLAG";
    position: absolute;
    right: 22px;
    bottom: -22px;
    font-size: 112px;
    font-weight: 900;
    letter-spacing: 6px;
    color: rgba(169,154,113,.045);
    line-height: 1;
}

.brand-kicker {
    color: var(--orange2);
    font-size: 12px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 8px;
}

.brand-title {
    color: var(--strong);
    font-size: 36px;
    line-height: .95;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 900;
    margin: 0;
}

.brand-subtitle {
    margin-top: 12px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.status-stack {
    width: 220px;
    display: grid;
    gap: 8px;
}

.status-card {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #141912, #090b08);
    padding: 13px 14px;
}

.status-label {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 800;
}

.status-value {
    margin-top: 4px;
    color: var(--strong);
    font-size: 18px;
    font-family: var(--mono);
    font-weight: 900;
}

.status-value.online {
    color: #b7c982;
}

.status-value.warn {
    color: var(--orange2);
}

/* Navigation */
.console-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    border: 1px solid var(--border);
    background: #070806;
    margin-bottom: 22px;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.console-nav a {
    position: relative;
    padding: 14px 18px;
    color: #beb79b;
    text-transform: uppercase;
    letter-spacing: .85px;
    font-size: 12px;
    font-weight: 900;
    border-right: 1px solid rgba(169,154,113,.16);
    min-width: 102px;
    text-align: center;
}

.console-nav a:last-child {
    border-right: none;
}

.console-nav a:hover {
    color: var(--strong);
    background: rgba(169,154,113,.07);
}

.console-nav a.active {
    color: #080806;
    background: var(--orange);
}

.console-nav a.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    background: rgba(0,0,0,.38);
}

/* Grid */
.console-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 16px;
    align-items: start;
}

.console-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--od2);
    background: linear-gradient(180deg, rgba(18,22,15,.98), rgba(7,9,6,.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 12px 28px rgba(0,0,0,.38);
    margin-bottom: 16px;
}

.console-card.accent {
    border-left-color: var(--orange);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #151b12, #0d100b);
}

.card-title {
    color: var(--fde2);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 900;
}

.card-kicker {
    color: var(--orange2);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
}

.card-body {
    padding: 12px;
}

/* HBMon injected legacy content cleanup */
.modern-live fieldset {
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.modern-live legend {
    display: none !important;
}

.modern-live table {
    width: 100% !important;
    background: #050705 !important;
    border-collapse: collapse !important;
    color: var(--text) !important;
    font-family: var(--sans) !important;
}

.modern-live th,
.modern-live .theme_color {
    background: #252d19 !important;
    color: var(--fde2) !important;
    border: 1px solid #39442d !important;
    text-transform: uppercase;
    letter-spacing: .55px;
    font-size: 12px;
}

.modern-live td {
    background: #0d110b !important;
    color: var(--text) !important;
    border: 1px solid #263020 !important;
    font-size: 12px;
}

.modern-live tr:nth-child(even) td {
    background: #12170f !important;
}

/* Active QSO panel inside injected #main */
#main {
    color: var(--text);
}

#main table,
#main tbody,
#main tr,
#main td,
#main div,
#main center {
    background: #050705 !important;
    color: var(--text) !important;
    border-color: #2d3827 !important;
}

#main td[colspan],
#main table[style] td,
#main tr[style] td {
    background:
        linear-gradient(90deg, rgba(216,137,36,.17), rgba(75,90,50,.08), transparent),
        #030403 !important;
    border: 1px solid #445035 !important;
    color: var(--strong) !important;
    font-family: var(--mono) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: .4px;
    padding: 14px !important;
}

#main b,
#main span,
#main font {
    color: var(--strong) !important;
    background: transparent !important;
}

#main font[color],
#main span[style*="color"] {
    color: var(--orange2) !important;
}

/* Badges */
#main span.tooltip,
#masters span.tooltip,
#peers span.tooltip {
    display: inline-block;
    padding: 4px 9px !important;
    background: #354222 !important;
    border: 1px solid var(--fde) !important;
    color: var(--strong) !important;
    border-radius: 0 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* Log */
#log {
    width: 100%;
    min-height: 230px;
    background: #010201 !important;
    color: #d9d1b8 !important;
    border: 1px solid #2d3827 !important;
    padding: 10px;
    font-family: var(--mono) !important;
    font-size: 12px !important;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* Hidden compatibility containers */
.compat-hidden {
    display: none;
}

/* Footer */
.console-footer {
    color: var(--muted);
    text-align: center;
    font-size: 12px;
    margin-top: 22px;
}

/* responsive */
@media (max-width: 900px) {
    .console-shell {
        max-width: calc(100vw - 22px);
        margin-top: 14px;
    }

    .console-header,
    .console-grid {
        grid-template-columns: 1fr;
    }

    .status-stack {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
    }

    .console-nav {
        flex-wrap: wrap;
    }

    .console-nav a {
        min-width: auto;
        flex: 1 1 140px;
    }
}


/* ============================================================
   Compact Masters / Peers Cards
   Replaces cramped legacy HBMon tables in modern right column
   ============================================================ */

.compat-inbox {
    display: none !important;
}

.compact-status {
    padding: 14px !important;
}

.status-tile {
    background:
        linear-gradient(135deg, rgba(216,137,36,0.08), rgba(63,79,47,0.10)),
        #060806;
    border: 1px solid #38432d;
    border-left: 4px solid var(--orange);
    padding: 14px;
}

.status-tile-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #8f7a32;
    box-shadow: 0 0 10px rgba(143,122,50,0.55);
}

.status-dot.online {
    background: #a9c46c;
    box-shadow: 0 0 10px rgba(169,196,108,0.55);
}

.status-dot.warn {
    background: var(--orange);
    box-shadow: 0 0 10px rgba(216,137,36,0.55);
}

.status-tile-title {
    color: var(--strong);
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-pill {
    margin-left: auto;
    padding: 3px 8px;
    background: #354222;
    border: 1px solid #6b7650;
    color: #fff6dd;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 900;
}

.status-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.status-tile-grid div {
    background: #0b0f0a;
    border: 1px solid #2d3827;
    padding: 9px 10px;
    min-width: 0;
}

.status-tile-grid span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 900;
    margin-bottom: 4px;
}

.status-tile-grid strong {
    display: block;
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}


/* ============================================================
   TS1 / TS2 Master Status Cards
   Replaces crowded master table with clear timeslot state
   ============================================================ */

.master-card,
.peer-card {
    background:
        linear-gradient(135deg, rgba(216,137,36,0.08), rgba(63,79,47,0.08)),
        #060806;
    border: 1px solid #38432d;
    border-left: 4px solid var(--orange);
    padding: 14px;
}

.master-card-header,
.peer-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.node-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--strong);
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.master-meta-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.master-meta-row div {
    background: #0b0f0a;
    border: 1px solid #2d3827;
    padding: 9px 10px;
}

.master-meta-row span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 900;
    margin-bottom: 4px;
}

.master-meta-row strong {
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
}

.timeslot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.timeslot-card {
    border: 1px solid #2d3827;
    background: #090c08;
    padding: 12px;
    min-height: 112px;
}

.timeslot-card.active {
    border-color: var(--orange);
    background:
        linear-gradient(135deg, rgba(216,137,36,0.16), rgba(63,79,47,0.10)),
        #0b0f0a;
    box-shadow: inset 0 0 0 1px rgba(216,137,36,0.16);
}

.timeslot-card.standby {
    opacity: .78;
}

.timeslot-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.timeslot-label {
    color: var(--fde2);
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .8px;
}

.timeslot-state {
    color: #080806;
    background: var(--orange);
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.timeslot-card.standby .timeslot-state {
    background: #354222;
    color: #d7dfc7;
}

.timeslot-tg {
    color: var(--strong);
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 8px;
}

.timeslot-source {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

@media (max-width: 800px) {
    .timeslot-grid,
    .master-meta-row {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Connected to Server - Color Reset After Bad Callsign Wrapper
   Removes broad orange look and restores readable values
   ============================================================ */

/* Default connected panel text back to off-white */
#cflag-connected,
#cflag-connected * {
    color: #fff6dd !important;
}

/* Labels / section headers */
#cflag-connected div[style*="text-align:left"] span,
#cflag-connected span[style*="font-weight"] {
    color: #c6b686 !important;
}

/* Yellow/important values */
#cflag-connected font[color="yellow"],
#cflag-connected span[style*="yellow"] {
    color: #f0d76a !important;
}

/* Station/user badges */
#cflag-connected span.tooltip,
#cflag-connected span.tooltip * {
    color: #fff6dd !important;
}

/* Try to color the first bold callsign in the badge orange without JS wrapping */
#cflag-connected span.tooltip > b:first-child,
#cflag-connected span.tooltip > b:first-child font {
    color: var(--orange2) !important;
}


/* ============================================================
   Stable Dynamic TG Name Display
   ============================================================ */

.timeslot-tg-name {
    color: var(--orange2) !important;
    font-family: var(--mono) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-top: -2px;
    margin-bottom: 8px;
}

.cflag-qso-tg-name {
    color: var(--orange2) !important;
    font-family: var(--mono) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-top: 8px;
}

.cflag-tg-name-filled {
    color: var(--orange2) !important;
    font-weight: 900 !important;
    font-family: var(--mono) !important;
}


/* ============================================================
   Modern Secondary Pages
   ============================================================ */

.console-grid.single-column {
    display: block !important;
}

.console-grid.single-column .console-card {
    width: 100%;
}

.console-grid.single-column .modern-live table {
    width: 100% !important;
}

.console-grid.single-column .table-scroll {
    overflow-x: auto;
}


/* ============================================================
   Stable Layout Width
   Prevents page shifting when scrollbar appears/disappears
   ============================================================ */

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;
}

/* Keep shell centered consistently across scroll/no-scroll pages */
.console-shell {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Firefox scrollbar styling */
html {
    scrollbar-width: thin;
    scrollbar-color: #4b5a32 #050705;
}

/* Chromium/WebKit scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #050705;
}

::-webkit-scrollbar-thumb {
    background: #4b5a32;
    border: 2px solid #050705;
}

::-webkit-scrollbar-thumb:hover {
    background: #627044;
}

/* CFLAG Active QSO Profile Card */
.qso-profile-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(227, 155, 53, 0.34);
    border-left: 4px solid #e39b35;
    background:
        radial-gradient(circle at 12% 15%, rgba(227, 155, 53, 0.16), transparent 32%),
        rgba(9, 17, 7, 0.92);
    color: #f7f0d0;
    text-decoration: none;
}

.qso-profile-card:hover {
    border-color: rgba(227, 155, 53, 0.65);
    filter: brightness(1.05);
}

.qso-profile-card-no-link:hover {
    filter: none;
}

.qso-profile-avatar {
    width: 74px;
    height: 74px;
    border: 2px solid #e39b35;
    background: rgba(227, 155, 53, 0.12);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
}

.qso-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qso-profile-avatar.fallback span {
    color: #ffd898;
    font-weight: 950;
    letter-spacing: 1px;
    font-size: 24px;
}

.qso-profile-label {
    color: #e39b35;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 900;
    margin-bottom: 2px;
}

.qso-profile-name {
    color: #fff4c6;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: 1px;
    font-weight: 950;
}

.qso-profile-display {
    color: #f7f0d0;
    font-size: 14px;
    margin-top: 4px;
}

.qso-profile-meta {
    color: #b8ad82;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .65px;
    margin-top: 5px;
}

.qso-profile-status {
    color: #a8ff9e;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.qso-live-dot {
    width: 9px;
    height: 9px;
    background: #a8ff9e;
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(168, 255, 158, .85);
    display: inline-block;
}

@media (max-width: 760px) {
    .qso-profile-card {
        grid-template-columns: auto 1fr;
    }

    .qso-profile-status {
        grid-column: 1 / -1;
    }
}

/* CFLAG Active QSO side profile layout */
.qso-live-card-body {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.qso-profile-panel {
    min-height: 132px;
    border: 1px solid rgba(227, 155, 53, 0.28);
    border-left: 4px solid #e39b35;
    background:
        radial-gradient(circle at 18% 18%, rgba(227, 155, 53, 0.15), transparent 34%),
        rgba(9, 17, 7, 0.95);
    overflow: hidden;
}

.qso-profile-panel-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.qso-panel-placeholder {
    color: #b8ad82;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1.2px;
    font-size: 12px;
    text-align: center;
    padding: 12px;
}

.qso-side-card {
    height: 100%;
    min-height: 132px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    color: #f7f0d0;
    text-decoration: none;
}

.qso-side-card:hover {
    filter: brightness(1.06);
}

.qso-side-card-no-link:hover {
    filter: none;
}

.qso-side-avatar {
    width: 82px;
    height: 82px;
    min-width: 82px;
    max-width: 82px;
    min-height: 82px;
    max-height: 82px;
    border: 2px solid #e39b35;
    background: rgba(227, 155, 53, 0.12);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
}

.qso-side-avatar img {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    object-fit: cover;
    display: block;
}

.qso-side-avatar.fallback span {
    color: #ffd898;
    font-weight: 950;
    letter-spacing: 1px;
    font-size: 24px;
}

.qso-side-info {
    min-width: 0;
}

.qso-side-status {
    color: #a8ff9e;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .9px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.qso-side-status.recent {
    color: #f5d982;
}

.qso-live-dot {
    width: 8px;
    height: 8px;
    background: #a8ff9e;
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(168, 255, 158, .85);
    display: inline-block;
    flex: 0 0 auto;
}

.qso-side-status.recent .qso-live-dot {
    background: #f5d982;
    box-shadow: 0 0 12px rgba(245, 217, 130, .72);
}

.qso-side-callsign {
    color: #fff4c6;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1;
    letter-spacing: .8px;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qso-side-name {
    color: #f7f0d0;
    font-size: 13px;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qso-side-meta {
    color: #b8ad82;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .55px;
    margin-top: 5px;
}

.qso-legacy-feed {
    min-width: 0;
}

.qso-legacy-feed table {
    margin: 0;
}

@media (max-width: 900px) {
    .qso-live-card-body {
        grid-template-columns: 1fr;
    }

    .qso-side-card {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .qso-side-avatar,
    .qso-side-avatar img {
        width: 74px !important;
        height: 74px !important;
        min-width: 74px !important;
        max-width: 74px !important;
        min-height: 74px !important;
        max-height: 74px !important;
    }
}

/* CFLAG Active QSO compact tuning */
.qso-live-card-body {
    grid-template-columns: 225px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    min-height: 122px !important;
}

.qso-profile-panel,
.qso-legacy-feed {
    min-height: 122px !important;
    height: 122px !important;
    max-height: 122px !important;
    overflow: hidden !important;
}

.qso-side-card {
    min-height: 122px !important;
    height: 122px !important;
    padding: 10px !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 11px !important;
}

.qso-side-avatar {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    aspect-ratio: 1 / 1 !important;
}

.qso-side-avatar img {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
}

.qso-side-callsign {
    font-size: 21px !important;
}

.qso-side-name {
    font-size: 12px !important;
    margin-top: 4px !important;
}

.qso-side-meta {
    font-size: 10px !important;
    line-height: 1.35 !important;
    margin-top: 4px !important;
}

.qso-side-status {
    font-size: 9px !important;
    margin-bottom: 4px !important;
}

.qso-legacy-feed {
    display: flex !important;
    align-items: stretch !important;
}

.qso-legacy-feed > table,
.qso-legacy-feed table {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.qso-legacy-feed th,
.qso-legacy-feed td {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

@media (max-width: 900px) {
    .qso-live-card-body {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .qso-profile-panel,
    .qso-legacy-feed {
        height: auto !important;
        max-height: none !important;
    }
}

/* CFLAG Masters card cleanup: hide peer summary and stack timeslots */
.cflag-master-hide-tile {
    display: none !important;
}

.cflag-master-slots-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.cflag-master-slot-tile {
    width: 100% !important;
    min-height: 92px !important;
    box-sizing: border-box !important;
}

.cflag-master-slot-tile * {
    max-width: 100%;
}

/* Reduce wasted vertical space after removing Peer / Connected boxes */
#cflag-masters-compact .cflag-master-slots-stack {
    margin-top: 0 !important;
}

#cflag-masters-compact .cflag-master-slot-tile {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* CFLAG Masters hard cleanup */
.cflag-master-force-hide {
    display: none !important;
}

.cflag-master-force-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
}

.cflag-master-slot-force {
    width: 100% !important;
    min-height: 82px !important;
    box-sizing: border-box !important;
}

.cflag-master-inner-clean {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

/* CFLAG Masters source-rendered cleanup */
#cflag-masters-compact .master-card {
    min-height: 0 !important;
}

#cflag-masters-compact .master-meta-row {
    display: none !important;
}

#cflag-masters-compact .timeslot-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

#cflag-masters-compact .timeslot-card {
    min-height: 86px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#cflag-masters-compact .timeslot-source {
    display: block !important;
    color: #b8ad82 !important;
}

/* CFLAG Masters page consistency pass */
.masters-page-shell {
    width: min(1500px, calc(100% - 48px)) !important;
    margin: 0 auto !important;
}

.masters-hero {
    padding: 13px 16px !important;
    margin-bottom: 16px !important;
}

.masters-title {
    font-size: 13px !important;
    letter-spacing: 2px !important;
    line-height: 1.1 !important;
}

.masters-subtitle {
    font-size: 10px !important;
    color: #e39b35 !important;
    font-weight: 900 !important;
}

.master-system-title {
    font-size: 18px !important;
}

.master-system-subtitle,
.master-meta-value,
.masters-slot-source {
    font-size: 11px !important;
}

.masters-slot-tg {
    font-size: 20px !important;
}

.master-system-card {
    min-height: 0 !important;
}

.masters-panel-header {
    font-size: 13px !important;
}

/* ============================================================
   CFLAG Masters Page - Shared Secondary Page Layout
   Source of truth for /masters.php
   ============================================================ */

.cflag-page-intro {
    width: 100%;
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange);
    background:
        linear-gradient(90deg, rgba(216,137,36,.10), transparent 38%),
        linear-gradient(180deg, rgba(22,27,18,.96), rgba(8,10,7,.96));
    box-shadow: 0 12px 28px rgba(0,0,0,.32);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.cflag-page-title {
    color: var(--fde2);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 900;
    line-height: 1.15;
}

.cflag-page-kicker {
    color: var(--orange2);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .75px;
    margin-top: 4px;
}

.cflag-secondary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.cflag-panel-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.masters-system-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
    gap: 14px;
}

.master-system-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange);
    background:
        radial-gradient(circle at 18% 18%, rgba(216,137,36,.10), transparent 32%),
        linear-gradient(180deg, rgba(18,22,15,.98), rgba(7,9,6,.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 10px 22px rgba(0,0,0,.30);
    padding: 14px;
    min-width: 0;
}

.master-system-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.master-system-title-wrap {
    min-width: 0;
}

.master-system-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--strong);
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
    min-width: 0;
}

.master-system-title span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #a9c46c;
    box-shadow: 0 0 12px rgba(169,196,108,.70);
    flex: 0 0 auto;
}

.master-system-subtitle {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .55px;
    font-size: 11px;
    margin-top: 7px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.master-status-pill {
    background: #354222;
    color: #d7dfc7;
    border: 1px solid #6b7650;
    padding: 5px 8px;
    text-transform: uppercase;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .6px;
    white-space: nowrap;
}

.master-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.master-meta-tile,
.masters-summary-tile {
    border: 1px solid #2d3827;
    background: #0b0f0a;
    padding: 9px 10px;
    min-width: 0;
}

.master-meta-label,
.masters-summary-label {
    display: block;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 900;
    margin-bottom: 4px;
}

.master-meta-value,
.masters-summary-value {
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.masters-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.masters-summary-value {
    color: var(--strong);
    font-size: 16px;
}

.masters-timeslot-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.masters-slot-card {
    border: 1px solid #2d3827;
    background: #090c08;
    padding: 12px;
    min-height: 86px;
}

.masters-slot-card.active {
    border-color: var(--orange);
    background:
        linear-gradient(135deg, rgba(216,137,36,.16), rgba(63,79,47,.10)),
        #0b0f0a;
    box-shadow: inset 0 0 0 1px rgba(216,137,36,.16);
}

.masters-slot-card.standby {
    opacity: .82;
}

.masters-slot-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.masters-slot-label {
    color: var(--fde2);
    font-family: var(--mono);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .8px;
}

.masters-slot-state {
    color: #080806;
    background: var(--orange);
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.masters-slot-card.standby .masters-slot-state {
    background: #354222;
    color: #d7dfc7;
}

.masters-slot-tg {
    color: var(--strong);
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 6px;
}

.masters-slot-name {
    color: var(--orange2);
    font-family: var(--mono);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .6px;
    font-size: 12px;
    margin-bottom: 6px;
}

.masters-slot-source {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.masters-empty {
    padding: 18px;
    border: 1px dashed #3c452e;
    background: #050705;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .7px;
    text-align: center;
}

.masters-raw-toggle {
    background: rgba(216,137,36,.14);
    color: var(--orange2);
    border: 1px solid rgba(216,137,36,.35);
    padding: 7px 10px;
    font-family: var(--sans);
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: .6px;
    font-size: 11px;
}

.masters-raw-toggle:hover {
    color: var(--strong);
    background: rgba(216,137,36,.20);
}

.masters-raw-panel {
    display: none;
    border-top: 1px solid var(--border);
    background: #050705;
    padding: 14px;
    overflow-x: auto;
}

.masters-raw-panel.open {
    display: block;
}

.masters-raw-panel fieldset {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    border: 1px solid var(--border) !important;
    background: #050705 !important;
    color: var(--text) !important;
    padding: 12px !important;
}

.masters-raw-panel legend {
    color: var(--fde2) !important;
    background: #050705 !important;
    padding: 0 8px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.masters-raw-panel table {
    width: 100% !important;
    min-width: 760px !important;
    border-collapse: collapse !important;
    background: #050705 !important;
    color: var(--text) !important;
}

.masters-raw-panel th,
.masters-raw-panel td {
    border: 1px solid #263020 !important;
    background: #0d110b !important;
    color: var(--text) !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
}

.masters-raw-panel th,
.masters-raw-panel .theme_color {
    background: #252d19 !important;
    color: var(--fde2) !important;
    text-transform: uppercase !important;
    letter-spacing: .55px !important;
}

@media (max-width: 1100px) {
    .cflag-secondary-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .masters-system-grid,
    .master-meta-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CFLAG Public User Directory + Public Profile
   Source of truth for /users.php and /user.php
   ============================================================ */

.cflag-form-panel {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(18,22,15,.98), rgba(7,9,6,.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 10px 22px rgba(0,0,0,.30);
    padding: 14px;
    margin-bottom: 16px;
}

.cflag-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}

.cflag-form-field label {
    display: block;
    color: var(--fde2);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 6px;
    letter-spacing: .9px;
}

.cflag-input,
.cflag-select {
    width: 100%;
    background: #050804;
    color: var(--strong);
    border: 1px solid #39442d;
    padding: 10px 11px;
    font-size: 14px;
    outline: none;
    font-family: var(--sans);
}

.cflag-input:focus,
.cflag-select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 1px rgba(216,137,36,.22);
}

.cflag-button,
a.cflag-button {
    background: var(--orange);
    color: #130c02;
    border: 1px solid rgba(216,137,36,.65);
    padding: 10px 13px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: .65px;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    font-family: var(--sans);
    line-height: 1.2;
    text-align: center;
}

.cflag-button:hover,
a.cflag-button:hover {
    color: #080806;
    background: var(--orange2);
}

.cflag-button.secondary,
a.cflag-button.secondary {
    background: rgba(216,137,36,.14);
    color: var(--orange2);
    border-color: rgba(216,137,36,.35);
}

.cflag-button.secondary:hover,
a.cflag-button.secondary:hover {
    color: var(--strong);
    background: rgba(216,137,36,.22);
}

.cflag-avatar {
    border: 2px solid var(--orange);
    background: rgba(216,137,36,.12);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(0,0,0,.25);
    flex: 0 0 auto;
}

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

.cflag-avatar-fallback span {
    color: #ffd898;
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 24px;
}

.user-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}

.user-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange);
    background:
        radial-gradient(circle at 18% 18%, rgba(216,137,36,.08), transparent 32%),
        linear-gradient(180deg, rgba(18,22,15,.98), rgba(7,9,6,.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 10px 22px rgba(0,0,0,.30);
    padding: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    min-height: 138px;
}

.user-card-name {
    color: var(--strong);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .9px;
    font-size: 16px;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.user-card-meta {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .55px;
    line-height: 1.55;
}

.user-card-bio {
    color: #d6cca0;
    font-size: 13px;
    line-height: 1.35;
    margin-top: 8px;
    max-height: 54px;
    overflow: hidden;
}

.user-card-actions {
    margin-top: 10px;
}

.directory-empty,
.profile-not-found {
    padding: 18px;
    border: 1px dashed #3c452e;
    background: #050705;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.profile-not-found {
    border-left: 4px solid var(--orange);
    text-transform: none;
    font-family: var(--sans);
    font-size: 14px;
}

.public-profile-hero {
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange);
    background:
        radial-gradient(circle at 15% 20%, rgba(216,137,36,.12), transparent 28%),
        linear-gradient(180deg, rgba(18,22,15,.98), rgba(7,9,6,.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 12px 28px rgba(0,0,0,.32);
    padding: 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin-bottom: 18px;
}

.public-profile-name {
    color: var(--strong);
    font-size: 32px;
    line-height: 1.05;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.public-profile-meta {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .75px;
    line-height: 1.6;
}

.public-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}

.profile-badge {
    border: 1px solid rgba(216,137,36,.35);
    color: var(--orange2);
    background: rgba(216,137,36,.10);
    padding: 7px 10px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .6px;
}

.public-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 18px;
    align-items: start;
}

.public-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--od2);
    background: linear-gradient(180deg, rgba(18,22,15,.98), rgba(7,9,6,.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 10px 22px rgba(0,0,0,.30);
    margin-bottom: 18px;
}

.public-card.accent {
    border-left-color: var(--orange);
}

.public-card-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #151b12, #0d100b);
    color: var(--fde2);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 900;
    font-size: 13px;
}

.public-card-body {
    padding: 14px;
    color: var(--text);
    line-height: 1.55;
}

.public-muted {
    color: var(--muted);
}

.public-table {
    width: 100%;
    border-collapse: collapse;
    background: #050705;
}

.public-table th,
.public-table td {
    border: 1px solid #263020;
    padding: 8px 9px;
    vertical-align: top;
    font-size: 12px;
}

.public-table th {
    background: #252d19;
    color: var(--fde2);
    text-transform: uppercase;
    letter-spacing: .7px;
    text-align: left;
    font-weight: 900;
}

.public-table td {
    color: var(--text);
}

.public-table strong {
    color: var(--strong);
}

.profile-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

@media (max-width: 980px) {
    .public-profile-grid {
        grid-template-columns: 1fr;
    }

    .public-profile-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .cflag-filter-form {
        grid-template-columns: 1fr;
    }

    .user-card {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CFLAG Last Heard / Filter Page Utilities
   Source of truth for /lastheard.php and future filtered tables
   ============================================================ */

.cflag-message-error {
    padding: 12px;
    border: 1px solid rgba(255, 121, 121, .35);
    border-left: 4px solid #ff7979;
    background: rgba(139, 48, 40, .18);
    color: #ffb3b3;
    font-family: var(--mono);
    font-size: 12px;
    margin-bottom: 14px;
}

.cflag-record-summary {
    color: var(--muted);
    margin-top: 12px;
    font-size: 13px;
    letter-spacing: .2px;
}

.cflag-record-summary strong {
    color: var(--strong);
}

.cflag-filter-form.lastheard-filter {
    grid-template-columns: minmax(150px, 180px) minmax(190px, 260px) minmax(260px, 1fr) auto;
}

.cflag-table-note {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .65px;
}

@media (max-width: 900px) {
    .cflag-filter-form.lastheard-filter {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CFLAG Shared Stats / Utility Tiles
   Reusable summary tiles for secondary public pages
   ============================================================ */

.cflag-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.cflag-stat-tile {
    border: 1px solid #2d3827;
    background:
        linear-gradient(135deg, rgba(216,137,36,.08), rgba(63,79,47,.08)),
        #0b0f0a;
    padding: 11px 12px;
    min-width: 0;
}

.cflag-stat-label {
    display: block;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 900;
    margin-bottom: 5px;
}

.cflag-stat-value {
    color: var(--strong);
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.cflag-filter-form.talkgroups-filter {
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 180px) auto auto;
}

.cflag-badge {
    display: inline-block;
    border: 1px solid rgba(216,137,36,.35);
    color: var(--orange2);
    background: rgba(216,137,36,.10);
    padding: 4px 7px;
    text-transform: uppercase;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .45px;
}

.cflag-badge.muted {
    color: var(--muted);
    border-color: #39442d;
    background: #0b0f0a;
}

@media (max-width: 800px) {
    .cflag-filter-form.talkgroups-filter {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CFLAG Shared Small Utility Cleanup
   Removes one-off inline alignment/status hacks
   ============================================================ */

.empty-state.left,
.cflag-empty-left {
    text-align: left !important;
}

.cflag-status-enabled {
    color: #a9c46c;
    font-weight: 900;
}

.cflag-status-disabled {
    color: #ffb3b3;
    font-weight: 900;
}

.cflag-description-cell {
    max-width: 420px;
    line-height: 1.35;
}

.cflag-metric-table td:first-child {
    color: var(--fde2);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.cflag-metric-table td:last-child {
    color: var(--strong);
    font-family: var(--mono);
    font-weight: 900;
}


/* ============================================================
   CFLAG System Page Table Tuning
   Improves metric/settings table hierarchy and row spacing
   ============================================================ */

.cflag-metric-table th {
    font-size: 13px !important;
    padding: 10px 12px !important;
    line-height: 1.25 !important;
    letter-spacing: .85px !important;
}

.cflag-metric-table td {
    font-size: 13px !important;
    padding: 9px 12px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

.cflag-metric-table td:first-child {
    font-size: 13px !important;
    letter-spacing: .55px !important;
}

.cflag-metric-table td:last-child {
    font-size: 13px !important;
}

.cflag-metric-table tr {
    min-height: 34px;
}


/* ============================================================
   CFLAG System Page Exact 7-Column Alignment
   Matches lower panels to the stat-card grid above
   ============================================================ */

.cflag-system-layout {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
}

.cflag-system-layout > .cflag-panel-stack:first-child {
    grid-column: 1 / span 5 !important;
}

.cflag-system-layout > .cflag-panel-stack:last-child {
    grid-column: 6 / span 2 !important;
}

.cflag-system-layout .console-card {
    margin-bottom: 0 !important;
}

@media (max-width: 1200px) {
    .cflag-system-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .cflag-system-layout > .cflag-panel-stack:first-child,
    .cflag-system-layout > .cflag-panel-stack:last-child {
        grid-column: auto !important;
    }
}


/* ============================================================
   CFLAG Live Feed / HBMon Secondary Pages
   Shared treatment for peers, bridges, log, and legacy live panels
   ============================================================ */

.cflag-live-note {
    padding: 12px 14px;
    border: 1px solid #2d3827;
    border-left: 4px solid var(--od2);
    background: #0b0f0a;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 16px;
}

.cflag-live-note strong {
    color: var(--strong);
}

.cflag-live-note a {
    font-weight: 900;
}

.cflag-feed-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 20px;
    align-items: start;
}

.cflag-feed-layout.single {
    grid-template-columns: 1fr;
}

.cflag-log-panel {
    width: 100%;
    min-height: 520px !important;
    max-height: 680px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    background: #010201 !important;
    color: #d9d1b8 !important;
    border: 1px solid #2d3827 !important;
    padding: 12px !important;
    font-family: var(--mono) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
}

.cflag-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .cflag-feed-layout {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CFLAG Nav Density Pass
   Keeps expanded public nav aligned without wrapping on desktop
   ============================================================ */

.console-nav a {
    min-width: 92px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
}

@media (max-width: 1200px) {
    .console-nav a {
        min-width: auto !important;
        flex: 1 1 120px !important;
    }
}


/* ============================================================
   CFLAG Peers Page Table Polish
   Makes HBMon peer table match cleaned secondary pages
   ============================================================ */

#peers table {
    width: 100% !important;
    min-width: 900px !important;
    table-layout: auto !important;
}

#peers th,
#peers .theme_color {
    font-size: 12px !important;
    padding: 9px 10px !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
}

#peers td {
    font-size: 12px !important;
    padding: 9px 10px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

#peers td b,
#peers td strong {
    color: var(--strong) !important;
}

#peers font[color="yellow"],
#peers span[style*="yellow"] {
    color: #f0d76a !important;
}

#peers font[color="cyan"],
#peers span[style*="cyan"] {
    color: var(--orange2) !important;
}


/* ============================================================
   CFLAG Auth / Registration Shared Layout
   Source of truth for /register.php and /admin/login.php
   ============================================================ */

.cflag-auth-wrap {
    max-width: 540px;
    margin: 0 auto;
}

.cflag-auth-wrap.wide {
    max-width: 980px;
}

.cflag-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
}

.cflag-form-row {
    margin-bottom: 14px;
}

.cflag-form-field.full,
.cflag-form-row.full {
    grid-column: 1 / -1;
}

.cflag-form label,
.cflag-auth-form label {
    display: block;
    color: var(--fde2);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.cflag-form input,
.cflag-form textarea,
.cflag-form select,
.cflag-auth-form input,
.cflag-auth-form textarea,
.cflag-auth-form select {
    width: 100%;
    background: #050804 !important;
    color: var(--strong) !important;
    border: 1px solid rgba(216,137,36,.34) !important;
    padding: 11px 12px !important;
    font-size: 15px !important;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
    font-family: var(--sans);
}

.cflag-auth-form input {
    padding: 12px 13px !important;
}

.cflag-form input:focus,
.cflag-form textarea:focus,
.cflag-form select:focus,
.cflag-auth-form input:focus,
.cflag-auth-form textarea:focus,
.cflag-auth-form select:focus {
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 2px rgba(216,137,36,.18);
}

.cflag-form input::placeholder,
.cflag-form textarea::placeholder,
.cflag-auth-form input::placeholder,
.cflag-auth-form textarea::placeholder {
    color: #776f55;
}

.cflag-auth-form input:-webkit-autofill,
.cflag-auth-form input:-webkit-autofill:hover,
.cflag-auth-form input:-webkit-autofill:focus,
.cflag-form input:-webkit-autofill,
.cflag-form input:-webkit-autofill:hover,
.cflag-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--strong);
    -webkit-box-shadow: 0 0 0 1000px #050804 inset;
    transition: background-color 9999s ease-in-out 0s;
    border: 1px solid rgba(216,137,36,.5) !important;
}

.cflag-form textarea {
    min-height: 105px;
    resize: vertical;
}

.cflag-help {
    color: var(--muted);
    font-size: 12px;
    margin-top: 5px;
    line-height: 1.35;
}

.cflag-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

.cflag-actions .cflag-button,
.cflag-actions button {
    min-width: 160px;
}

.cflag-auth-button {
    width: 100%;
    background: var(--orange);
    color: #130c02;
    border: 0;
    padding: 13px 14px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: .8px;
    font-family: var(--sans);
}

.cflag-auth-button:hover {
    filter: brightness(1.08);
}

.cflag-auth-field {
    margin-bottom: 16px;
}

.cflag-auth-footer,
.cflag-register-note {
    margin-top: 18px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.cflag-register-note {
    text-align: left;
    line-height: 1.5;
    letter-spacing: .5px;
}

.cflag-auth-footer a {
    color: #ffd898;
    font-weight: 900;
    text-decoration: none;
}

.cflag-auth-footer a:hover {
    color: var(--orange);
}

.cflag-alert-error,
.cflag-alert-success {
    margin-bottom: 16px;
    padding: 12px 14px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.cflag-alert-error {
    border: 1px solid #6e2a2a;
    border-left: 4px solid #ff7979;
    background: rgba(60,12,12,.80);
    color: #ffb3b3;
}

.cflag-alert-success {
    border: 1px solid #3d6b35;
    border-left: 4px solid #a8ff9e;
    background: rgba(18,60,18,.65);
    color: #a8ff9e;
}

@media (max-width: 900px) {
    .cflag-form-grid {
        grid-template-columns: 1fr;
    }

    .cflag-actions .cflag-button,
    .cflag-actions button {
        width: 100%;
    }
}


/* ============================================================
   CFLAG Account Profile / Change Request Shared Layout
   Source of truth for /account/profile.php and /account/change-request.php
   ============================================================ */

.profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.profile-mini-card {
    border: 1px solid rgba(216,137,36,.24);
    border-left: 4px solid var(--orange);
    background:
        radial-gradient(circle at 18% 18%, rgba(216,137,36,.08), transparent 32%),
        rgba(9,17,7,.95);
    min-width: 0;
}

.profile-mini-card-header {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(216,137,36,.22);
    color: var(--fde2);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 900;
    font-size: 12px;
    background: rgba(216,137,36,.055);
}

.profile-mini-card-body {
    padding: 13px 14px;
    color: var(--strong);
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.account-profile-head {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.account-profile-head-meta {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .65px;
    font-size: 12px;
    line-height: 1.5;
}

.cflag-profile-form-grid,
.cflag-change-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
}

.cflag-password-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cflag-profile-form label,
.cflag-change-form label {
    display: block;
    color: var(--fde2);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.cflag-profile-form input,
.cflag-profile-form textarea,
.cflag-profile-form select,
.cflag-change-form input,
.cflag-change-form textarea,
.cflag-change-form select {
    width: 100%;
    background: #050804 !important;
    color: var(--strong) !important;
    border: 1px solid rgba(216,137,36,.34) !important;
    padding: 11px 12px !important;
    font-size: 15px !important;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
    font-family: var(--sans);
}

.cflag-profile-form textarea,
.cflag-change-form textarea {
    min-height: 110px;
    resize: vertical;
}

.cflag-profile-form input:focus,
.cflag-profile-form textarea:focus,
.cflag-profile-form select:focus,
.cflag-change-form input:focus,
.cflag-change-form textarea:focus,
.cflag-change-form select:focus {
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 2px rgba(216,137,36,.18);
}

.cflag-profile-form input[readonly],
.cflag-change-form input[readonly] {
    background: rgba(5,8,4,.72) !important;
    color: var(--muted) !important;
    cursor: not-allowed;
}

.cflag-profile-actions,
.cflag-change-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    flex-wrap: wrap;
}

.cflag-profile-actions button,
.cflag-profile-actions .btn,
.cflag-change-actions button,
.cflag-change-actions .btn {
    background: var(--orange);
    color: #130c02;
    border: 1px solid rgba(216,137,36,.65);
    padding: 11px 14px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: .8px;
    text-decoration: none;
    display: inline-block;
    font-family: var(--sans);
    line-height: 1.2;
}

.cflag-profile-actions .btn,
.cflag-change-actions .btn {
    background: rgba(216,137,36,.14);
    color: var(--orange2);
    border: 1px solid rgba(216,137,36,.35);
}

.cflag-profile-actions button:hover,
.cflag-profile-actions .btn:hover,
.cflag-change-actions button:hover,
.cflag-change-actions .btn:hover {
    filter: brightness(1.08);
}

.profile-warning {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #8a6428;
    border-left: 4px solid var(--orange);
    background: rgba(90,58,16,.50);
    color: #ffd898;
    font-weight: 800;
    line-height: 1.4;
}

.profile-section-title {
    padding: 0 0 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(216,137,36,.25);
}

.profile-section-title-main {
    color: var(--fde2);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 900;
    font-size: 13px;
}

.profile-section-title-sub {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: 11px;
    margin-top: 4px;
}

.avatar-help {
    color: var(--muted);
    font-size: 12px;
    margin-top: 5px;
    line-height: 1.35;
}

.avatar-delete-label {
    margin-top: 8px;
}

.avatar-crop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.avatar-crop-grid.account-hidden {
    display: none !important;
}

.cflag-grid-full {
    grid-column: 1 / -1;
}

.cflag-section-divider {
    border: 0;
    border-top: 1px solid rgba(216,137,36,.25);
    margin: 24px 0;
}

.account-section-spacer {
    margin-top: 24px;
}

.account-section-header-plain {
    padding-left: 0 !important;
    background: transparent !important;
}

.account-request-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

@media (max-width: 1000px) {
    .profile-summary-grid,
    .cflag-password-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .profile-summary-grid,
    .cflag-profile-form-grid,
    .cflag-change-grid,
    .cflag-password-grid,
    .avatar-crop-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CFLAG Admin System Tools Shared Layout
   Source of truth for /admin/system-tools.php
   ============================================================ */

.system-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.system-tool-card {
    border: 1px solid rgba(227,155,53,0.24);
    border-left: 4px solid var(--admin-accent, #e39b35);
    background: rgba(9,17,7,0.95);
}

.system-tool-card-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(227,155,53,0.22);
    color: var(--admin-text, #f7f0d0);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900;
    font-size: 13px;
    background: rgba(227,155,53,0.055);
}

.system-tool-card-body {
    padding: 16px;
}

.system-tool-card-body p {
    margin: 0 0 14px 0;
    color: var(--admin-muted, #b8ad82);
    line-height: 1.45;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.system-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.system-button {
    border: 1px solid rgba(227,155,53,0.35);
    background: rgba(227,155,53,0.14);
    color: var(--admin-text, #f7f0d0);
    padding: 10px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .65px;
    transition: opacity .15s ease, transform .05s ease, background .15s ease;
}

.system-button:hover {
    background: var(--admin-accent, #e39b35);
    color: #130c02;
}

.system-button:active {
    transform: scale(.98);
}

.system-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.system-button.safe {
    border-color: rgba(118, 180, 255, .38);
    background: rgba(72, 126, 194, .20);
}

.system-button.safe:hover {
    background: #4f83c7;
    color: #fff;
}

.system-button.secondary {
    border-color: rgba(180, 173, 130, .38);
    background: rgba(184, 173, 130, .13);
}

.system-button.secondary:hover {
    background: #5c624a;
    color: #fff;
}

.system-button.warn {
    border-color: rgba(227,155,53,.55);
    background: rgba(227,155,53,.22);
    color: #ffd898;
}

.system-button.warn:hover {
    background: var(--admin-accent, #e39b35);
    color: #130c02;
}

.system-button.danger {
    border-color: rgba(214, 77, 77, .6);
    background: rgba(112, 32, 32, .35);
    color: #ffd0d0;
}

.system-button.danger:hover {
    background: #a83232;
    color: #fff;
}

.system-output-panel {
    border: 1px solid rgba(227,155,53,0.24);
    border-left: 4px solid var(--admin-accent, #e39b35);
    background: rgba(9,17,7,0.95);
    margin-bottom: 18px;
}

.system-output-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(227,155,53,0.22);
    background: rgba(227,155,53,0.055);
}

.system-output-title {
    color: var(--admin-text, #f7f0d0);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900;
    font-size: 13px;
}

.system-output-meta {
    margin-top: 5px;
    color: var(--admin-muted, #b8ad82);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .65px;
}

.system-output-box {
    margin: 0;
    padding: 16px;
    min-height: 360px;
    max-height: 680px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #020501;
    color: #f7f0d0;
    border: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
}

.system-note {
    color: var(--admin-muted, #b8ad82);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .55px;
    line-height: 1.55;
}

.system-ok {
    color: #8ee68e;
}

.system-fail {
    color: #ff8c8c;
}

@media (max-width: 900px) {
    .system-tools-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CFLAG Admin Shared Utility Cleanup
   Replaces one-off inline styles across admin CRUD pages
   ============================================================ */

.admin-control-sm {
    max-width: 240px !important;
}

.admin-control-md {
    max-width: 420px !important;
}

.admin-control-lg {
    max-width: 500px !important;
}

.admin-check-label {
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
    width: auto !important;
    color: var(--admin-text, #f7f0d0);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .65px;
}

.admin-check-input {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.admin-section-spacer {
    margin-top: 16px !important;
}

.admin-section-spacer-sm {
    margin-top: 14px !important;
}

.admin-section-spacer-xs {
    margin-top: 12px !important;
}

.admin-table-spacer {
    margin-top: 16px !important;
}

.admin-form-no-margin {
    margin: 0 !important;
}

.admin-form-stack-gap {
    margin-bottom: 8px !important;
}

.admin-mini-textarea {
    min-height: 55px !important;
    margin-bottom: 6px !important;
}

.admin-action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

.admin-divider {
    border: 0 !important;
    border-top: 1px solid rgba(227,155,53,.24) !important;
    margin: 22px 0 !important;
}

.admin-panel-spaced {
    margin-top: 14px !important;
}

.admin-muted-spacer {
    margin-top: 12px !important;
}

.admin-grid-spaced {
    margin-top: 14px !important;
}

.admin-hidden-grid {
    margin-top: 12px !important;
    display: none !important;
}

.admin-grid-full {
    grid-column: 1 / -1 !important;
}

.admin-label-spaced {
    margin-top: 8px !important;
}


/* ============================================================
   CFLAG System Tools Button Contrast Tune
   Improves readability on dark action buttons
   ============================================================ */

.system-button {
    color: #f7f0d0 !important;
    background: rgba(58, 76, 104, 0.34) !important;
    border-color: rgba(118, 180, 255, 0.34) !important;
}

.system-button:hover {
    background: #7ea6d8 !important;
    color: #081018 !important;
}

.system-button.safe {
    color: #eef6ff !important;
    background: rgba(72, 126, 194, 0.30) !important;
    border-color: rgba(118, 180, 255, 0.45) !important;
}

.system-button.safe:hover {
    background: #5d90d0 !important;
    color: #ffffff !important;
}

.system-button.secondary {
    color: #f7f0d0 !important;
    background: rgba(184, 173, 130, 0.18) !important;
    border-color: rgba(214, 196, 141, 0.34) !important;
}

.system-button.secondary:hover {
    background: #7a7458 !important;
    color: #ffffff !important;
}

.system-button.warn {
    color: #fff1c7 !important;
    background: rgba(156, 103, 28, 0.40) !important;
    border-color: rgba(227, 155, 53, 0.58) !important;
}

.system-button.warn:hover {
    background: #d28d2e !important;
    color: #130c02 !important;
}

.system-button.danger {
    color: #ffe0e0 !important;
    background: rgba(125, 38, 38, 0.50) !important;
    border-color: rgba(230, 115, 115, 0.55) !important;
}

.system-button.danger:hover {
    background: #b53b3b !important;
    color: #ffffff !important;
}


/* ============================================================
   CFLAG Admin Console Polish Pass
   Final visual tuning for admin shell, cards, forms, tables, and buttons
   ============================================================ */

/* Admin shell balance */
.admin-shell-grid {
    gap: 20px !important;
    align-items: start !important;
}

.admin-area .console-card,
.admin-area .panel,
.admin-area .system-tool-card,
.admin-area .system-output-panel {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 12px 28px rgba(0,0,0,.34) !important;
}

/* Admin page banner should match public intro rhythm */
.admin-page-banner {
    border: 1px solid var(--border, #323a28) !important;
    border-left: 4px solid var(--orange, #d88924) !important;
    background:
        linear-gradient(90deg, rgba(216,137,36,.10), transparent 38%),
        linear-gradient(180deg, rgba(22,27,18,.96), rgba(8,10,7,.96)) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.32) !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
}

.admin-page-title {
    color: var(--fde2, #c6b686) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.3px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

.admin-page-subtitle {
    color: var(--orange2, #f0a338) !important;
    font-family: var(--mono, Consolas, "Courier New", monospace) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .75px !important;
    margin-top: 4px !important;
}

/* Admin side menu polish */
.admin-menu-card {
    border: 1px solid var(--border, #323a28) !important;
    border-left: 4px solid var(--orange, #d88924) !important;
    background:
        linear-gradient(180deg, rgba(18,22,15,.98), rgba(7,9,6,.98)) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.34) !important;
}

.admin-menu-title {
    color: var(--fde2, #c6b686) !important;
    font-size: 13px !important;
    letter-spacing: 1.35px !important;
    font-weight: 900 !important;
}

.admin-menu-subtitle {
    color: var(--muted, #9e987f) !important;
    font-size: 11px !important;
    letter-spacing: .65px !important;
}

.admin-menu a {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    padding: 11px 13px !important;
    color: var(--strong, #fff3cf) !important;
    border-bottom: 1px solid rgba(169,154,113,.16) !important;
    background: rgba(7,9,6,.72) !important;
    font-size: 12px !important;
    letter-spacing: .75px !important;
}

.admin-menu a:hover {
    background: rgba(216,137,36,.14) !important;
    color: var(--orange2, #f0a338) !important;
}

.admin-menu a.active {
    background: var(--orange, #d88924) !important;
    color: #100c04 !important;
}

.admin-menu a.logout,
.admin-menu a[href*="logout"] {
    background: rgba(90,32,28,.55) !important;
    color: #ffd0d0 !important;
}

.admin-menu a.logout:hover,
.admin-menu a[href*="logout"]:hover {
    background: #a83232 !important;
    color: #fff !important;
}

/* Panels */
.admin-area .panel {
    border: 1px solid var(--border, #323a28) !important;
    border-left: 4px solid var(--od2, #627044) !important;
    background: linear-gradient(180deg, rgba(18,22,15,.98), rgba(7,9,6,.98)) !important;
    margin-bottom: 18px !important;
}

.admin-area .panel-header {
    min-height: 44px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--border, #323a28) !important;
    background: linear-gradient(180deg, #151b12, #0d100b) !important;
    color: var(--fde2, #c6b686) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.3px !important;
    font-weight: 900 !important;
}

.admin-area .panel-body {
    padding: 14px !important;
}

/* Forms */
.admin-area label {
    color: var(--fde2, #c6b686) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .85px !important;
    margin-bottom: 6px !important;
}

.admin-area input,
.admin-area textarea,
.admin-area select {
    background: #050804 !important;
    color: var(--strong, #fff3cf) !important;
    border: 1px solid #39442d !important;
    padding: 10px 11px !important;
    font-size: 13px !important;
    font-family: var(--sans, "Segoe UI", Arial, sans-serif) !important;
    outline: none !important;
}

.admin-area textarea {
    min-height: 90px;
    resize: vertical;
}

.admin-area input:focus,
.admin-area textarea:focus,
.admin-area select:focus {
    border-color: var(--orange, #d88924) !important;
    box-shadow: 0 0 0 1px rgba(216,137,36,.22) !important;
}

.admin-area input[readonly],
.admin-area input:disabled,
.admin-area select:disabled,
.admin-area textarea:disabled {
    opacity: .72 !important;
    color: var(--muted, #9e987f) !important;
    cursor: not-allowed !important;
}

/* Tables */
.admin-area table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #050705 !important;
}

.admin-area th {
    background: #252d19 !important;
    color: var(--fde2, #c6b686) !important;
    border: 1px solid #39442d !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    letter-spacing: .65px !important;
    font-weight: 900 !important;
    vertical-align: middle !important;
}

.admin-area td {
    background: #0d110b !important;
    color: var(--text, #e7dfc5) !important;
    border: 1px solid #263020 !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

.admin-area tr:nth-child(even) td {
    background: #12170f !important;
}

.admin-area td b,
.admin-area td strong {
    color: var(--strong, #fff3cf) !important;
}

/* Admin buttons */
.admin-area button,
.admin-area .button,
.admin-area .btn,
.admin-area input[type="submit"] {
    border: 1px solid rgba(216,137,36,.45) !important;
    background: rgba(216,137,36,.18) !important;
    color: var(--strong, #fff3cf) !important;
    padding: 9px 12px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .65px !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

.admin-area button:hover,
.admin-area .button:hover,
.admin-area .btn:hover,
.admin-area input[type="submit"]:hover {
    background: var(--orange, #d88924) !important;
    color: #100c04 !important;
}

.admin-area .danger,
.admin-area button.danger,
.admin-area .btn.danger {
    border-color: rgba(230,115,115,.55) !important;
    background: rgba(125,38,38,.50) !important;
    color: #ffe0e0 !important;
}

.admin-area .danger:hover,
.admin-area button.danger:hover,
.admin-area .btn.danger:hover {
    background: #b53b3b !important;
    color: #fff !important;
}

.admin-area .muted {
    color: var(--muted, #9e987f) !important;
}

/* Alerts/messages */
.admin-area .alert,
.admin-area .notice,
.admin-area .success,
.admin-area .error {
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

.admin-area .success {
    border: 1px solid #3d6b35 !important;
    border-left: 4px solid #a8ff9e !important;
    background: rgba(18,60,18,.65) !important;
    color: #a8ff9e !important;
}

.admin-area .error {
    border: 1px solid #6e2a2a !important;
    border-left: 4px solid #ff7979 !important;
    background: rgba(60,12,12,.80) !important;
    color: #ffb3b3 !important;
}

.admin-area .notice {
    border: 1px solid rgba(216,137,36,.35) !important;
    border-left: 4px solid var(--orange, #d88924) !important;
    background: rgba(216,137,36,.10) !important;
    color: #ffd898 !important;
}

/* Better spacing on compact action forms inside tables */
.admin-area td form {
    display: inline-block;
    margin: 2px 4px 2px 0;
}

.admin-area td form button,
.admin-area td .btn,
.admin-area td .button {
    padding: 7px 9px !important;
    font-size: 11px !important;
}

/* Admin dashboard tiles */
.admin-area .grid {
    gap: 14px !important;
}

.admin-area .grid-2 {
    gap: 16px !important;
}

/* Responsive admin */
@media (max-width: 1050px) {
    .admin-shell-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-menu-card {
        order: -1;
    }

    .admin-menu {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    }
}


/* ============================================================
   CFLAG Admin Layout Extracted From includes/admin-layout.php
   Extracted: 2026-05-20 21:20:48
   ============================================================ */

/*
      Admin pages use the same public dashboard shell and width.
      Admin-only navigation is a right-side rail.
      Accent stays in the CFLAG orange/gold family.
    */

    :root {
        --admin-accent: #e39b35;
        --admin-accent-soft: rgba(227, 155, 53, 0.14);
        --admin-accent-line: rgba(227, 155, 53, 0.38);
        --admin-panel-line: rgba(227, 155, 53, 0.24);
        --admin-text: #f7f0d0;
        --admin-muted: #b8ad82;
        --admin-dark: #090f07;
        --admin-darker: #050804;
    }

    .admin-area {
        width: 100%;
    }

    .admin-shell-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 245px;
        gap: 18px;
        align-items: start;
    }

    .admin-main {
        min-width: 0;
    }

    .admin-rail {
        position: sticky;
        top: 18px;
        border: 1px solid var(--admin-accent-line);
        border-left: 4px solid var(--admin-accent);
        background: rgba(8, 15, 7, 0.94);
    }

    .admin-rail-header {
        padding: 14px 14px;
        border-bottom: 1px solid var(--admin-panel-line);
        background: linear-gradient(90deg, rgba(227,155,53,0.16), rgba(8,15,7,0.95));
    }

    .admin-rail-title {
        color: var(--admin-text);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 13px;
    }

    .admin-rail-subtitle {
        color: var(--admin-muted);
        font-size: 11px;
        margin-top: 5px;
        text-transform: uppercase;
        letter-spacing: .7px;
        line-height: 1.35;
    }

    .admin-user-pill {
        margin-top: 10px;
        border: 1px solid var(--admin-accent-line);
        background: var(--admin-accent-soft);
        color: #ffd898;
        padding: 7px 8px;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    .admin-side-nav {
        display: flex;
        flex-direction: column;
    }

    .admin-side-nav a {
        color: var(--admin-text);
        text-decoration: none;
        padding: 13px 14px;
        border-bottom: 1px solid rgba(227,155,53,0.18);
        text-transform: uppercase;
        font-weight: 900;
        font-size: 12px;
        letter-spacing: .7px;
    }

    .admin-side-nav a:hover,
    .admin-side-nav a.active {
        background: var(--admin-accent);
        color: #130c02;
    }

    .admin-side-nav a.logout-link {
        color: #ffd0d0;
        background: rgba(112, 32, 32, 0.25);
    }

    .admin-side-nav a.logout-link:hover {
        background: #702020;
        color: #fff;
    }

    .admin-page-banner {
        border: 1px solid var(--admin-accent-line);
        border-left: 4px solid var(--admin-accent);
        background: linear-gradient(90deg, rgba(227,155,53,0.13), rgba(8,15,7,0.94));
        padding: 14px 16px;
        margin-bottom: 16px;
    }

    .admin-page-title {
        color: var(--admin-text);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 13px;
    }

    .admin-page-subtitle {
        color: var(--admin-muted);
        margin-top: 5px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .8px;
    }

    .admin-area .panel {
        border: 1px solid var(--admin-panel-line);
        border-left: 4px solid var(--admin-accent);
        background: rgba(9,17,7,0.95);
        margin-bottom: 18px;
        width: 100%;
    }

    .admin-area .panel-header {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(227,155,53,0.22);
        color: var(--admin-text);
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 900;
        font-size: 13px;
        background: rgba(227,155,53,0.055);
    }

    .admin-area .panel-body {
        padding: 16px;
    }

    .admin-area table {
        width: 100%;
        border-collapse: collapse;
        background: rgba(6,12,5,0.75);
    }

    .admin-area th,
    .admin-area td {
        border: 1px solid rgba(227,155,53,0.18);
        padding: 9px 10px;
        text-align: left;
        vertical-align: top;
    }

    .admin-area th {
        background: #28331c;
        color: #f5d982;
        text-transform: uppercase;
        font-size: 12px;
    }

    .admin-area input,
    .admin-area select,
    .admin-area textarea {
        width: 100%;
        background: var(--admin-darker);
        color: var(--admin-text);
        border: 1px solid rgba(227,155,53,0.32);
        padding: 9px;
        font-size: 14px;
    }

    .admin-area input[type="checkbox"] {
        width: auto;
    }

    .admin-area textarea {
        min-height: 70px;
        resize: vertical;
    }


    .cflag-avatar {
        border: 2px solid var(--admin-accent);
        background: rgba(227,155,53,0.12);
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
    }

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

    .cflag-avatar-fallback span {
        color: #ffd898;
        font-weight: 900;
        letter-spacing: 1px;
        font-size: 28px;
    }

    .admin-profile-head {
        display: flex;
        gap: 18px;
        align-items: center;
        margin-bottom: 18px;
    }

    .admin-profile-head-meta {
        color: var(--admin-muted);
        text-transform: uppercase;
        letter-spacing: .65px;
        font-size: 12px;
        line-height: 1.5;
    }

    .admin-area button,
    .admin-area .btn,
    .admin-area input[type="submit"] {
        background: var(--admin-accent);
        color: #130c02;
        border: 1px solid rgba(227,155,53,0.55);
        padding: 10px 13px;
        font-weight: 900;
        text-transform: uppercase;
        cursor: pointer;
        letter-spacing: .7px;
        text-decoration: none;
        display: inline-block;
        width: auto;
    }

    .admin-area button:hover,
    .admin-area .btn:hover,
    .admin-area input[type="submit"]:hover {
        filter: brightness(1.08);
    }

    .admin-area input[readonly] {
        background: rgba(5,8,4,0.75);
        color: var(--admin-muted);
        cursor: not-allowed;
    }

    .admin-area button.danger,
    .admin-area .btn.danger {
        background: #702020;
        color: #ffd0d0;
        border-color: rgba(255,120,120,0.35);
    }

    .admin-area label {
        display: block;
        color: var(--admin-muted);
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 900;
        margin-bottom: 6px;
    }

    .admin-area .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .admin-area .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .admin-area .field {
        margin-bottom: 14px;
    }

    .admin-area .actions {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    .admin-area .btn {
        display: inline-block;
        background: var(--admin-accent);
        color: #130c02;
        border: 0;
        padding: 10px 14px;
        font-weight: 900;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        font-size: 12px;
        letter-spacing: .7px;
    }

    .admin-area .btn.secondary {
        background: #223019;
        color: var(--admin-text);
        border: 1px solid rgba(227,155,53,0.28);
    }

    .admin-area .btn.danger {
        background: #702020;
        color: #fff;
    }

    .admin-area .notice {
        padding: 12px 14px;
        border: 1px solid var(--admin-accent-line);
        background: var(--admin-accent-soft);
        color: #ffd898;
        margin-bottom: 16px;
    }

    .admin-area .error {
        padding: 12px 14px;
        border: 1px solid #6e2a2a;
        background: #241010;
        color: #ff7979;
        margin-bottom: 16px;
    }

    .admin-area .badge {
        display: inline-block;
        padding: 4px 8px;
        border: 1px solid rgba(227,155,53,0.25);
        background: rgba(227,155,53,0.10);
        color: #f5d982;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 900;
    }

    .admin-area .badge.good {
        color: #b9f27c;
    }

    .admin-area .badge.bad {
        color: #ff7979;
    }

    .admin-area .muted {
        color: var(--admin-muted);
    }

    .admin-area .table-scroll,
    .admin-area .panel-body.table-scroll {
        overflow-x: auto;
    }

    @media (max-width: 1000px) {
        .admin-shell-grid {
            grid-template-columns: 1fr;
        }

        .admin-rail {
            position: static;
            order: -1;
        }

        .admin-side-nav {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 700px) {
        .admin-area .grid,
        .admin-area .grid-2 {
            grid-template-columns: 1fr;
        }

        .admin-side-nav {
            grid-template-columns: 1fr;
        }
    }

/* ============================================================
   CFLAG Legacy Footer Cleanup
   Removes inline footer styling from old HBMon footer include
   ============================================================ */

.legacy-hbmon-footer {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.legacy-hbmon-footer p,
.legacy-hbmon-footer span {
    text-align: center;
}


/* ============================================================
   CFLAG Avatar Cropper Extracted From includes/avatar-cropper.php
   Extracted: 2026-05-20 21:22:42
   ============================================================ */

.avatar-native-input-hidden {
            position: absolute !important;
            left: -99999px !important;
            opacity: 0 !important;
            width: 1px !important;
            height: 1px !important;
            overflow: hidden !important;
        }

        .avatar-cropper-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-top: 8px;
        }

        .avatar-cropper-help {
            color: #b8ad82;
            font-size: 12px;
            line-height: 1.45;
            margin-top: 8px;
        }

        .avatar-cropper-selected {
            color: #a8ff9e;
            font-weight: 800;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .avatar-crop-modal {
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.82);
            padding: 24px;
        }

        .avatar-crop-modal.open {
            display: flex;
        }

        .avatar-crop-card {
            width: min(980px, 96vw);
            max-height: 94vh;
            background: #071006;
            border: 1px solid rgba(227,155,53,0.42);
            box-shadow: 0 18px 70px rgba(0,0,0,0.65);
            display: grid;
            grid-template-rows: auto 1fr auto;
        }

        .avatar-crop-header {
            padding: 16px 18px;
            border-bottom: 1px solid rgba(227,155,53,0.25);
            background: rgba(227,155,53,0.08);
        }

        .avatar-crop-title {
            color: #f7f0d0;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-size: 16px;
        }

        .avatar-crop-subtitle {
            color: #b8ad82;
            text-transform: uppercase;
            letter-spacing: .7px;
            font-size: 11px;
            margin-top: 4px;
        }

        .avatar-crop-body {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 230px;
            gap: 18px;
            padding: 18px;
            overflow: auto;
        }

        .avatar-crop-stage {
            min-height: 520px;
            max-height: 62vh;
            background: #020402;
            border: 1px solid rgba(227,155,53,0.28);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .avatar-crop-stage img {
            max-width: 100%;
            display: block;
        }

        .avatar-crop-side {
            border: 1px solid rgba(227,155,53,0.24);
            background: rgba(9,17,7,0.8);
            padding: 14px;
        }

        .avatar-preview-label {
            color: #f5d982;
            text-transform: uppercase;
            font-weight: 900;
            font-size: 12px;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        .avatar-preview-box {
            width: 150px;
            height: 150px;
            margin: 0 auto 14px auto;
            overflow: hidden;
            border: 2px solid #e39b35;
            background: #050804;
        }

        .avatar-crop-control {
            margin-top: 16px;
        }

        .avatar-crop-control label {
            display: block;
            color: #f5d982;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 900;
            margin-bottom: 8px;
            letter-spacing: 1px;
        }

        .avatar-crop-control input[type="range"] {
            width: 100%;
            padding: 0;
        }

        .avatar-crop-footer {
            padding: 14px 18px;
            border-top: 1px solid rgba(227,155,53,0.25);
            display: flex;
            justify-content: space-between;
            gap: 12px;
            background: rgba(0,0,0,0.22);
        }

        .avatar-crop-footer-left,
        .avatar-crop-footer-right {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .avatar-crop-btn {
            background: #e39b35;
            color: #130c02;
            border: 1px solid rgba(227,155,53,0.55);
            padding: 11px 14px;
            font-weight: 900;
            text-transform: uppercase;
            cursor: pointer;
            letter-spacing: .8px;
        }

        .avatar-crop-btn.secondary {
            background: rgba(227,155,53,0.14);
            color: #ffd898;
        }

        .avatar-crop-btn.danger {
            background: #702020;
            color: #ffd0d0;
            border-color: rgba(255,120,120,0.35);
        }

        .avatar-crop-btn:hover {
            filter: brightness(1.08);
        }

        @media (max-width: 800px) {
            .avatar-crop-body {
                grid-template-columns: 1fr;
            }

            .avatar-crop-stage {
                min-height: 380px;
            }
        }
/* ============================================================
   CFLAG Final Shell Width Standard
   Restores wide shared page stance after CSS consolidation
   ============================================================ */

.console-shell {
    width: 1560px !important;
    max-width: calc(100vw - 64px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.console-header {
    grid-template-columns: minmax(0, 1.25fr) minmax(560px, 0.9fr) !important;
    gap: 20px !important;
}

.console-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(560px, 0.9fr) !important;
    gap: 20px !important;
}

.console-grid.single-column {
    display: block !important;
    width: 100% !important;
}

.console-nav {
    width: 100% !important;
}

.status-stack {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

@media (max-width: 1350px) {
    .console-shell {
        width: 1240px !important;
        max-width: calc(100vw - 36px) !important;
    }

    .console-header,
    .console-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 780px) {
    .console-shell {
        max-width: calc(100vw - 22px) !important;
        margin-top: 14px !important;
    }

    .status-stack {
        grid-template-columns: 1fr !important;
    }
}


/* Admin user management merge pass */
.admin-user-profile-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
}

.admin-user-profile-title {
    color: #fff3c0;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.admin-user-profile-subtitle {
    color: #e39b35;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-top: 3px;
}

.admin-user-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.admin-mini-badge {
    display: inline-block;
    border: 1px solid rgba(227, 155, 53, .5);
    background: rgba(227, 155, 53, .14);
    color: #fff3c0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 6px 9px;
}

.admin-user-bio-preview {
    border: 1px solid rgba(227, 155, 53, .25);
    background: rgba(0, 0, 0, .18);
    padding: 12px;
    margin-top: 16px;
}

.admin-small-label {
    color: #ffe29a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.admin-user-profile-actions {
    text-align: right;
}

@media (max-width: 900px) {
    .admin-user-profile-head {
        grid-template-columns: 1fr;
    }

    .admin-user-profile-actions {
        text-align: left;
    }
}

/* User Management tabbed workspace */
.cflag-user-filter-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 220px auto;
    gap: 12px;
    align-items: end;
}

.cflag-user-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cflag-user-counts {
    margin-top: 10px;
}

.cflag-user-workspace {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.cflag-user-list-panel .panel-body {
    padding: 10px;
}

.cflag-user-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 760px;
    overflow-y: auto;
    padding-right: 4px;
}

.cflag-user-list-item {
    display: block;
    border: 1px solid rgba(227, 155, 53, .24);
    background: rgba(0, 0, 0, .18);
    color: #fff3c0;
    text-decoration: none;
    padding: 10px;
    border-left: 3px solid rgba(227, 155, 53, .45);
}

.cflag-user-list-item:hover,
.cflag-user-list-item.selected {
    border-color: rgba(227, 155, 53, .85);
    background: rgba(227, 155, 53, .12);
}

.cflag-user-list-name {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.cflag-user-list-meta {
    color: #b8ad82;
    font-size: 11px;
    margin-top: 3px;
}

.cflag-user-list-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.cflag-user-list-badges span,
.cflag-user-hero-badges span {
    border: 1px solid rgba(227, 155, 53, .45);
    background: rgba(227, 155, 53, .12);
    color: #fff3c0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 7px;
}

.cflag-user-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    border: 1px solid rgba(227, 155, 53, .28);
    background: rgba(0, 0, 0, .18);
    padding: 14px;
    margin-bottom: 14px;
}

.cflag-user-hero-title {
    color: #fff3c0;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.05;
}

.cflag-user-hero-subtitle {
    color: #e39b35;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
    margin-top: 4px;
}

.cflag-user-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.cflag-user-hero-actions {
    text-align: right;
}

.cflag-user-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid rgba(227, 155, 53, .26);
    margin-bottom: 14px;
}

.cflag-user-tab {
    border: 1px solid rgba(227, 155, 53, .35);
    border-bottom: none;
    background: rgba(0, 0, 0, .2);
    color: #fff3c0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 9px 12px;
}

.cflag-user-tab.active,
.cflag-user-tab:hover {
    background: #e39b35;
    border-color: #e39b35;
    color: #050805;
}

.cflag-user-tab-panel {
    display: none;
}

.cflag-user-tab-panel.active {
    display: block;
}

.cflag-user-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cflag-user-stat {
    border: 1px solid rgba(227, 155, 53, .25);
    background: rgba(0, 0, 0, .18);
    padding: 11px;
}

.cflag-user-stat-label,
.cflag-small-label {
    color: #ffe29a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.cflag-user-stat-value {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.cflag-user-bio-card {
    border: 1px solid rgba(227, 155, 53, .25);
    background: rgba(0, 0, 0, .18);
    padding: 12px;
    margin-top: 12px;
}

@media (max-width: 1150px) {
    .cflag-user-workspace {
        grid-template-columns: 1fr;
    }

    .cflag-user-list {
        max-height: 360px;
    }
}

@media (max-width: 900px) {
    .cflag-user-filter-row,
    .cflag-user-hero,
    .cflag-user-stat-grid {
        grid-template-columns: 1fr;
    }

    .cflag-user-hero-actions {
        text-align: left;
    }
}

/* =========================================================
   CFLAG Compact Sticky Header / Nav
   Goal: reduce vertical page chrome and keep navigation visible
   ========================================================= */

/* Main top banner area */
.console-header,
.cflag-header,
.site-header,
.header,
.top-header {
    position: sticky;
    top: 0;
    z-index: 900;
}

/* Header + nav should sit above page content */
.console-nav,
nav.console-nav {
    position: sticky;
    top: 0;
    z-index: 950;
}

/* Add a dark backing so sticky elements do not look transparent while scrolling */
.console-header,
.cflag-header,
.site-header,
.header,
.top-header,
.console-nav {
    background: rgba(3, 8, 3, 0.96);
    backdrop-filter: blur(5px);
}

/* Shrink the large title/banner cards */
.console-title,
.console-hero,
.hero-card,
.header-main,
.brand-panel {
    min-height: 86px !important;
    padding: 14px 22px !important;
}

/* Shrink main title typography */
.console-title h1,
.console-hero h1,
.hero-card h1,
.header-main h1,
.brand-panel h1,
.admin-page-title {
    font-size: 26px !important;
    line-height: 1.02 !important;
    margin: 0 !important;
}

/* Shrink subtitles */
.console-title .subtitle,
.console-hero .subtitle,
.hero-card .subtitle,
.header-main .subtitle,
.brand-panel .subtitle,
.admin-page-subtitle {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 6px !important;
}

/* Shrink the status tiles in the top header */
.header-status,
.status-card,
.top-status-card,
.console-status-card {
    min-height: 74px !important;
    padding: 12px 14px !important;
}

/* Smaller status tile labels */
.header-status .label,
.status-card .label,
.top-status-card .label,
.console-status-card .label {
    font-size: 10px !important;
    letter-spacing: .8px !important;
}

/* Smaller status tile values */
.header-status .value,
.status-card .value,
.top-status-card .value,
.console-status-card .value {
    font-size: 14px !important;
    line-height: 1.1 !important;
}

/* Compact nav bar */
.console-nav {
    min-height: 34px !important;
    height: auto !important;
    display: flex;
    align-items: stretch;
}

/* Compact nav links */
.console-nav a {
    padding: 10px 16px !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

/* Reduce vertical whitespace directly below nav */
.console-nav + *,
.admin-page-banner,
.page-banner {
    margin-top: 12px !important;
}

/* Admin banner/header panels should be shorter */
.admin-page-banner,
.page-banner {
    padding: 12px 16px !important;
    min-height: unset !important;
}

/* Page title banners do not need to be huge */
.admin-page-title,
.page-title {
    font-size: 18px !important;
    line-height: 1.05 !important;
}

.admin-page-subtitle,
.page-subtitle {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-top: 5px !important;
}

/* If header uses a grid, reduce row/card gap */
.console-header-grid,
.header-grid,
.top-grid,
.cflag-header-grid {
    gap: 12px !important;
}

/* Make anchor jumps account for sticky nav */
html {
    scroll-padding-top: 130px;
}

/* On shorter screens, compact even more */
@media (max-height: 850px) {
    .console-title,
    .console-hero,
    .hero-card,
    .header-main,
    .brand-panel {
        min-height: 72px !important;
        padding: 10px 18px !important;
    }

    .console-title h1,
    .console-hero h1,
    .hero-card h1,
    .header-main h1,
    .brand-panel h1 {
        font-size: 22px !important;
    }

    .header-status,
    .status-card,
    .top-status-card,
    .console-status-card {
        min-height: 62px !important;
        padding: 9px 12px !important;
    }

    .console-nav a {
        padding: 8px 14px !important;
        font-size: 10px !important;
    }

    html {
        scroll-padding-top: 110px;
    }
}

/* =========================================================
   Compact Sticky CFLAG Command Header
   ========================================================= */

:root {
    --cflag-command-header-height: 74px;
    --cflag-nav-height: 38px;
}

.console-header.cflag-command-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 14px;
    align-items: stretch;
    min-height: var(--cflag-command-header-height) !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(227, 155, 53, .28);
    border-left: 4px solid #e39b35;
    background:
        linear-gradient(90deg, rgba(18, 23, 13, .98), rgba(4, 10, 5, .98));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    backdrop-filter: blur(6px);
}

.cflag-command-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.cflag-command-kicker {
    color: #e39b35;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.cflag-command-title {
    color: #fff3c0;
    font-size: 25px;
    font-weight: 950;
    letter-spacing: 1.2px;
    line-height: .95;
    margin-top: 5px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cflag-command-subtitle {
    color: #b9ad7b;
    font-size: 11px;
    letter-spacing: .7px;
    line-height: 1;
    margin-top: 7px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cflag-command-timeslots {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    min-width: 0;
}

.cflag-command-ts-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .22);
    padding: 6px 9px;
    min-width: 0;
}

.cflag-command-ts-row.active {
    border-color: rgba(227, 155, 53, .9);
    background: rgba(227, 155, 53, .12);
    box-shadow: inset 3px 0 0 #e39b35;
}

.cflag-command-ts-label {
    grid-row: 1 / 3;
    color: #e39b35;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cflag-command-ts-main {
    color: #fff3c0;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .5px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cflag-command-ts-sub {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.05;
    margin-top: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.console-nav,
nav.console-nav {
    position: sticky;
    top: var(--cflag-command-header-height);
    z-index: 1190;
    min-height: var(--cflag-nav-height) !important;
    background: rgba(3, 8, 3, .97);
    backdrop-filter: blur(6px);
}

.console-nav a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

.admin-page-banner,
.page-banner {
    margin-top: 12px !important;
}

html {
    scroll-padding-top: calc(var(--cflag-command-header-height) + var(--cflag-nav-height) + 18px);
}

@media (max-width: 1100px) {
    :root {
        --cflag-command-header-height: 104px;
    }

    .console-header.cflag-command-header {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .cflag-command-title {
        font-size: 21px;
    }

    .cflag-command-timeslots {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
    }
}

@media (max-width: 720px) {
    :root {
        --cflag-command-header-height: 142px;
    }

    .cflag-command-timeslots {
        grid-template-columns: 1fr;
    }

    .cflag-command-title {
        white-space: normal;
    }

    .cflag-command-subtitle {
        display: none;
    }
}

/* =========================================================
   Sticky command shell: header + nav together
   ========================================================= */

.cflag-sticky-command-shell {
    position: sticky;
    top: 0;
    z-index: 1500;
    background: rgba(3, 8, 3, .98);
    backdrop-filter: blur(7px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .36);
}

.cflag-sticky-command-shell .console-header.cflag-command-header {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    margin-bottom: 0 !important;
}

.cflag-sticky-command-shell .console-nav,
.cflag-sticky-command-shell nav.console-nav {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    margin-top: 8px !important;
}

.cflag-sticky-command-shell .console-nav a {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* Make the whole command shell more compact */
.console-header.cflag-command-header {
    grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr) !important;
    min-height: 68px !important;
    padding: 8px 14px !important;
}

.cflag-command-title {
    font-size: 24px !important;
}

.cflag-command-kicker {
    font-size: 9px !important;
}

.cflag-command-subtitle {
    font-size: 10px !important;
}

.cflag-command-ts-row {
    padding: 5px 9px !important;
}

.cflag-command-ts-main {
    font-size: 12px !important;
}

.cflag-command-ts-sub {
    font-size: 9px !important;
}

html {
    scroll-padding-top: 125px;
}

/* Header live/recent state polish */
.cflag-command-ts-row.recent {
    border-color: rgba(227, 155, 53, .55);
    background: rgba(227, 155, 53, .07);
    box-shadow: inset 3px 0 0 rgba(227, 155, 53, .55);
}

html {
    scroll-padding-top: 125px;
}

/* =========================================================
   Stabilized compact header: branding + nav only
   ========================================================= */

.cflag-sticky-command-shell {
    position: sticky;
    top: 0;
    z-index: 1500;
    background: rgba(3, 8, 3, .98);
    backdrop-filter: blur(7px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
}

.console-header.cflag-command-header.cflag-command-header-simple {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    display: block !important;
    min-height: unset !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    border: 1px solid rgba(227, 155, 53, .28);
    border-left: 4px solid #e39b35;
    background:
        linear-gradient(90deg, rgba(18, 23, 13, .98), rgba(4, 10, 5, .98));
}

.cflag-command-header-simple .cflag-command-brand {
    display: block !important;
}

.cflag-command-header-simple .cflag-command-kicker {
    color: #e39b35;
    font-size: 9px !important;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.cflag-command-header-simple .cflag-command-title {
    color: #fff3c0;
    font-size: 23px !important;
    font-weight: 950;
    letter-spacing: 1.1px;
    line-height: 1;
    margin-top: 5px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cflag-command-header-simple .cflag-command-subtitle {
    color: #b9ad7b;
    font-size: 10px !important;
    letter-spacing: .7px;
    line-height: 1;
    margin-top: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide any orphaned TS widget markup if a browser cached older header HTML */
.cflag-command-timeslots,
.cflag-command-ts-row,
.cflag-command-ts-main,
.cflag-command-ts-sub,
.cflag-command-ts-label {
    display: none !important;
}

.cflag-sticky-command-shell .console-nav,
.cflag-sticky-command-shell nav.console-nav {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    margin-top: 8px !important;
    background: rgba(3, 8, 3, .97);
}

.cflag-sticky-command-shell .console-nav a {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

html {
    scroll-padding-top: 120px;
}

/* =========================================================
   Compact Masters Page Layout
   ========================================================= */

#cflag-master-systems {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.masters-system-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

.master-system-card.master-system-card-compact {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) minmax(330px, .95fr);
    gap: 10px;
    align-items: stretch;
    padding: 10px 12px !important;
    min-height: unset !important;
    border-left: 3px solid #e39b35;
}

.master-compact-main {
    min-width: 0;
}

.master-compact-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff3c0;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
}

.master-compact-subtitle {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-top: 5px;
}

.master-status-pill.compact {
    margin-left: auto;
    font-size: 9px !important;
    padding: 4px 7px !important;
}

.master-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.master-compact-meta span {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .18);
    color: #d4c99a;
    font-size: 10px;
    padding: 5px 7px;
    line-height: 1.1;
}

.master-compact-meta strong {
    color: #ffe29a;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.masters-timeslot-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
}

.masters-slot-chip {
    border: 1px solid rgba(227, 155, 53, .25);
    background: rgba(0, 0, 0, .22);
    padding: 8px;
    min-width: 0;
}

.masters-slot-chip.active {
    border-color: rgba(227, 155, 53, .95);
    background: rgba(227, 155, 53, .12);
    box-shadow: inset 3px 0 0 #e39b35;
}

.masters-slot-chip-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.masters-slot-chip-head strong {
    color: #9fb86b;
    font-size: 9px;
}

.masters-slot-chip.active .masters-slot-chip-head strong {
    color: #e39b35;
}

.masters-slot-chip-main {
    color: #fff3c0;
    font-size: 15px;
    font-weight: 950;
    line-height: 1;
    margin-top: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.masters-slot-chip-sub {
    color: #b9ad7b;
    font-size: 10px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tighten top masters panels */
.cflag-secondary-layout {
    gap: 14px !important;
}

.cflag-secondary-layout .console-card .card-body {
    padding: 10px 12px !important;
}

.masters-summary-grid {
    gap: 8px !important;
}

.masters-summary-tile {
    padding: 9px !important;
}

.masters-summary-label {
    font-size: 9px !important;
}

.masters-summary-value {
    font-size: 14px !important;
}

/* Raw diagnostic feed should not dominate the page */
#mastersRawPanel.open {
    max-height: 380px;
    overflow-y: auto;
}

@media (max-width: 1100px) {
    .master-system-card.master-system-card-compact {
        grid-template-columns: 1fr;
    }

    .masters-timeslot-compact {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .masters-timeslot-compact {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Masters page: compact single-column connected systems rows
   ========================================================= */

#cflag-master-systems {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 5px;
}

.masters-system-row-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.master-system-row {
    display: grid;
    grid-template-columns: minmax(190px, .65fr) minmax(360px, 1.25fr) minmax(260px, .8fr);
    gap: 10px;
    align-items: stretch;
    border: 1px solid rgba(227, 155, 53, .25);
    border-left: 4px solid #e39b35;
    background:
        linear-gradient(90deg, rgba(227, 155, 53, .08), rgba(0, 0, 0, .12));
    padding: 9px 10px;
    min-height: 86px;
}

.master-row-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.master-row-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff3c0;
    font-size: 17px;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
    line-height: 1;
    min-width: 0;
}

.master-row-title > span:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.master-row-subtitle {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .45px;
    text-transform: uppercase;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.master-status-pill.compact {
    margin-left: auto;
    font-size: 8px !important;
    line-height: 1 !important;
    padding: 4px 6px !important;
    background: rgba(112, 146, 71, .45);
    border: 1px solid rgba(170, 210, 105, .55);
    color: #fff3c0;
}

.master-row-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-content: center;
    min-width: 0;
}

.master-row-meta-item {
    border: 1px solid rgba(227, 155, 53, .20);
    background: rgba(0, 0, 0, .18);
    padding: 6px 7px;
    min-width: 0;
}

.master-row-meta-item span {
    display: block;
    color: #ffe29a;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 4px;
}

.master-row-meta-item strong {
    display: block;
    color: #fff;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.master-row-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    min-width: 0;
}

.masters-row-slot {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .20);
    padding: 7px;
    min-width: 0;
}

.masters-row-slot.active {
    border-color: rgba(227, 155, 53, .95);
    background: rgba(227, 155, 53, .12);
    box-shadow: inset 3px 0 0 #e39b35;
}

.masters-row-slot-head {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: #b9ad7b;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
    line-height: 1;
}

.masters-row-slot-head strong {
    color: #9fb86b;
    font-size: 8px;
}

.masters-row-slot.active .masters-row-slot-head strong {
    color: #e39b35;
}

.masters-row-slot-main {
    color: #fff3c0;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
    margin-top: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.masters-row-slot-sub {
    color: #b9ad7b;
    font-size: 9px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tighter masters page layout */
.cflag-secondary-layout {
    gap: 12px !important;
    grid-template-columns: minmax(0, 1fr) 310px !important;
}

.cflag-secondary-layout .console-card .card-body {
    padding: 9px 10px !important;
}

.masters-summary-grid {
    gap: 7px !important;
}

.masters-summary-tile {
    padding: 9px !important;
}

.masters-summary-label {
    font-size: 8px !important;
    letter-spacing: .8px !important;
}

.masters-summary-value {
    font-size: 14px !important;
}

/* Raw diagnostic feed: compact and contained */
#mastersRawPanel.open {
    max-height: 330px;
    overflow-y: auto;
}

#mastersRawPanel fieldset {
    margin: 8px 0 !important;
    padding: 10px !important;
}

#mastersRawPanel table {
    font-size: 10px !important;
}

#mastersRawPanel td,
#mastersRawPanel th {
    padding: 4px 6px !important;
}

#mastersRawTarget {
    font-size: 10px;
    line-height: 1.25;
}

@media (max-width: 1250px) {
    .master-system-row {
        grid-template-columns: 1fr;
    }

    .master-row-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .master-row-slots {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 850px) {
    .cflag-secondary-layout {
        grid-template-columns: 1fr !important;
    }

    .master-row-meta,
    .master-row-slots {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Masters page readability pass
   ========================================================= */

#cflag-master-systems {
    max-height: 390px;
    overflow-y: auto;
    padding-right: 6px;
}

.masters-system-row-stack {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.master-system-row {
    display: grid !important;
    grid-template-columns: 235px minmax(420px, 1fr) 275px !important;
    gap: 10px;
    align-items: stretch;
    border: 1px solid rgba(227, 155, 53, .30) !important;
    border-left: 4px solid #e39b35 !important;
    background:
        linear-gradient(90deg, rgba(227, 155, 53, .10), rgba(0, 0, 0, .14)) !important;
    padding: 11px 12px !important;
    min-height: 96px !important;
}

.master-row-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.master-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff3c0;
    font-size: 19px !important;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
    line-height: 1.05;
}

.master-row-title > span:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.master-row-subtitle {
    color: #d6c98d !important;
    font-size: 12px !important;
    font-weight: 850;
    letter-spacing: .45px;
    text-transform: uppercase;
    margin-top: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.master-status-pill.compact {
    margin-left: auto;
    font-size: 9px !important;
    line-height: 1 !important;
    padding: 5px 7px !important;
}

.master-row-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    align-content: center;
    min-width: 0;
}

.master-row-meta-item {
    border: 1px solid rgba(227, 155, 53, .24);
    background: rgba(0, 0, 0, .20);
    padding: 7px 8px;
    min-width: 0;
}

.master-row-meta-item span {
    display: block;
    color: #ffe29a;
    font-size: 9px !important;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
}

.master-row-meta-item strong {
    display: block;
    color: #fff;
    font-size: 12px !important;
    font-weight: 850;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.master-row-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    min-width: 0;
}

.masters-row-slot {
    border: 1px solid rgba(227, 155, 53, .25);
    background: rgba(0, 0, 0, .22);
    padding: 8px;
    min-width: 0;
}

.masters-row-slot.active {
    border-color: rgba(227, 155, 53, .95);
    background: rgba(227, 155, 53, .13);
    box-shadow: inset 3px 0 0 #e39b35;
}

.masters-row-slot-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #d6c98d;
    font-size: 10px !important;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
    line-height: 1;
}

.masters-row-slot-head strong {
    color: #9fc36b;
    font-size: 9px !important;
}

.masters-row-slot.active .masters-row-slot-head strong {
    color: #e39b35;
}

.masters-row-slot-main {
    color: #fff3c0;
    font-size: 16px !important;
    font-weight: 950;
    line-height: 1;
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.masters-row-slot-sub {
    color: #d6c98d;
    font-size: 10px !important;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Raw HBMon diagnostic formatting */
#mastersRawPanel.open {
    max-height: 360px;
    overflow-y: auto;
}

#mastersRawTarget {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.hbmon-raw-formatted {
    padding: 10px;
}

.hbmon-raw-section-title {
    color: #99ff00;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.hbmon-raw-user-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hbmon-raw-user-card {
    border: 1px solid rgba(227, 155, 53, .28);
    border-left: 3px solid #e39b35;
    background: rgba(0, 0, 0, .18);
    padding: 9px 10px;
}

.hbmon-raw-user-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: #fff3c0;
    margin-bottom: 8px;
}

.hbmon-raw-user-head strong {
    font-size: 15px;
    font-weight: 950;
}

.hbmon-raw-user-head span {
    color: #ffe29a;
    font-size: 12px;
    font-weight: 850;
}

.hbmon-raw-user-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.hbmon-raw-user-grid div {
    border: 1px solid rgba(227, 155, 53, .20);
    background: rgba(0, 0, 0, .20);
    padding: 6px 7px;
    min-width: 0;
}

.hbmon-raw-user-grid span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.hbmon-raw-user-grid strong {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hbmon-raw-peers {
    margin-top: 14px;
}

.hbmon-raw-peers pre {
    white-space: pre-wrap;
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .22);
    color: #fff3c0;
    padding: 8px;
    margin: 0;
}

@media (max-width: 1300px) {
    .master-system-row {
        grid-template-columns: 220px minmax(360px, 1fr) 250px !important;
    }

    .master-row-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .master-system-row {
        grid-template-columns: 1fr !important;
    }

    .master-row-meta,
    .hbmon-raw-user-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .master-row-meta,
    .master-row-slots,
    .hbmon-raw-user-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Raw HBMon diagnostic clean formatting
   ========================================================= */

#mastersRawPanel.open {
    max-height: 420px !important;
    overflow-y: auto !important;
}

#mastersRawTarget {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.raw-diagnostic-clean {
    padding: 10px;
}

.raw-section-title {
    color: #99ff00;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.raw-user-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.raw-user-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid rgba(227, 155, 53, .28);
    border-left: 4px solid #e39b35;
    background: rgba(0, 0, 0, .20);
    padding: 10px;
}

.raw-user-id {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.raw-user-callsign {
    color: #fff3c0;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
    line-height: 1;
}

.raw-user-dmr {
    color: #e39b35;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .4px;
    margin-top: 7px;
}

.raw-user-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.raw-user-fields div {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .20);
    padding: 7px 8px;
    min-width: 0;
}

.raw-user-fields span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
}

.raw-user-fields strong {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.raw-peers-box {
    margin-top: 14px;
}

.raw-peers-box pre,
.raw-source-details pre {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .26);
    color: #fff3c0;
    padding: 10px;
    margin: 8px 0 0 0;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.35;
    max-height: 220px;
    overflow-y: auto;
}

.raw-source-details {
    margin-top: 14px;
    border-top: 1px solid rgba(227, 155, 53, .20);
    padding-top: 10px;
}

.raw-source-details summary {
    cursor: pointer;
    color: #ffe29a;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
}

@media (max-width: 950px) {
    .raw-user-row {
        grid-template-columns: 1fr;
    }

    .raw-user-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .raw-user-fields {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Forced clean HBMon raw diagnostic formatter
   ========================================================= */

#mastersRawPanel.open {
    max-height: 420px !important;
    overflow-y: auto !important;
}

#mastersRawTarget[data-cflag-formatted-raw="1"] {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.raw-clean-panel {
    padding: 10px;
}

.raw-clean-title {
    color: #99ff00;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.raw-clean-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.raw-clean-user {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid rgba(227, 155, 53, .30);
    border-left: 4px solid #e39b35;
    background: rgba(0, 0, 0, .22);
    padding: 10px;
}

.raw-clean-id {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.raw-clean-call {
    color: #fff3c0;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
}

.raw-clean-dmr {
    color: #e39b35;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .4px;
    margin-top: 7px;
}

.raw-clean-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.raw-clean-grid div {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .24);
    padding: 7px 8px;
    min-width: 0;
}

.raw-clean-grid span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
}

.raw-clean-grid strong {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.raw-clean-peers {
    margin-top: 14px;
}

.raw-clean-peers pre,
.raw-clean-source pre {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .28);
    color: #fff3c0;
    padding: 10px;
    margin: 8px 0 0 0;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.35;
    max-height: 220px;
    overflow-y: auto;
}

.raw-clean-source {
    margin-top: 14px;
    border-top: 1px solid rgba(227, 155, 53, .20);
    padding-top: 10px;
}

.raw-clean-source summary {
    cursor: pointer;
    color: #ffe29a;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
}

@media (max-width: 950px) {
    .raw-clean-user {
        grid-template-columns: 1fr;
    }

    .raw-clean-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .raw-clean-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Final forced clean raw HBMon formatter
   ========================================================= */

#mastersRawPanel.open {
    max-height: 430px !important;
    overflow-y: auto !important;
}

#mastersRawTarget[data-cflag-formatted-raw-final="1"] {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.raw-clean-panel-final {
    padding: 10px;
}

.raw-clean-title-final {
    color: #99ff00;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.raw-clean-stack-final {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.raw-clean-user-final {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid rgba(227, 155, 53, .30);
    border-left: 4px solid #e39b35;
    background: rgba(0, 0, 0, .24);
    padding: 10px;
}

.raw-clean-id-final {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.raw-clean-call-final {
    color: #fff3c0;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
}

.raw-clean-dmr-final {
    color: #e39b35;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .4px;
    margin-top: 7px;
}

.raw-clean-grid-final {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.raw-clean-grid-final div {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .24);
    padding: 7px 8px;
    min-width: 0;
}

.raw-clean-grid-final span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
}

.raw-clean-grid-final strong {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.raw-clean-peers-final {
    margin-top: 14px;
}

.raw-clean-peers-final pre,
.raw-clean-source-final pre {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .28);
    color: #fff3c0;
    padding: 10px;
    margin: 8px 0 0 0;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.35;
    max-height: 220px;
    overflow-y: auto;
}

.raw-clean-source-final {
    margin-top: 14px;
    border-top: 1px solid rgba(227, 155, 53, .20);
    padding-top: 10px;
}

.raw-clean-source-final summary {
    cursor: pointer;
    color: #ffe29a;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
}

@media (max-width: 950px) {
    .raw-clean-user-final {
        grid-template-columns: 1fr;
    }

    .raw-clean-grid-final {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .raw-clean-grid-final {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Clean Masters Raw Diagnostic Panel
   ========================================================= */

#mastersCleanRawTarget {
    padding: 10px;
}

#mastersRawTarget.cflag-hide-ugly-hbmon-raw {
    display: none !important;
}

.cflag-clean-raw-panel {
    display: block;
}

.cflag-clean-raw-title {
    color: #99ff00;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.cflag-clean-raw-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cflag-clean-raw-user {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid rgba(227, 155, 53, .30);
    border-left: 4px solid #e39b35;
    background: rgba(0, 0, 0, .24);
    padding: 10px;
}

.cflag-clean-raw-id {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.cflag-clean-raw-callsign {
    color: #fff3c0;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
}

.cflag-clean-raw-dmr {
    color: #e39b35;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .4px;
    margin-top: 7px;
}

.cflag-clean-raw-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.cflag-clean-raw-fields div {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .24);
    padding: 7px 8px;
    min-width: 0;
}

.cflag-clean-raw-fields span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
}

.cflag-clean-raw-fields strong {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cflag-clean-raw-peers {
    margin-top: 14px;
}

.cflag-clean-raw-peers pre {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .28);
    color: #fff3c0;
    padding: 10px;
    margin: 8px 0 0 0;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.35;
    max-height: 160px;
    overflow-y: auto;
}

@media (max-width: 950px) {
    .cflag-clean-raw-user {
        grid-template-columns: 1fr;
    }

    .cflag-clean-raw-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .cflag-clean-raw-fields {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Connected Systems Page
   ========================================================= */

body.connected-users-mode .connected-hidden-source {
    display: none !important;
}

.connected-users-page {
    margin-top: 14px;
}

.connected-page-card .card-body {
    padding: 12px;
}

.connected-refresh-note {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.connected-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.connected-summary-grid div {
    border: 1px solid rgba(227, 155, 53, .25);
    background: rgba(0, 0, 0, .20);
    padding: 10px;
}

.connected-summary-grid span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.connected-summary-grid strong {
    color: #fff3c0;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.connected-table-wrap {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid rgba(227, 155, 53, .28);
}

.connected-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.connected-users-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(37, 50, 25, .98);
    color: #ffe29a;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 10px 9px;
    border-bottom: 1px solid rgba(227, 155, 53, .30);
    text-align: left;
}

.connected-users-table tbody tr {
    background: rgba(0, 0, 0, .18);
}

.connected-users-table tbody tr:nth-child(even) {
    background: rgba(227, 155, 53, .065);
}

.connected-users-table tbody tr:hover {
    background: rgba(227, 155, 53, .13);
}

.connected-users-table td {
    color: #fff;
    padding: 10px 9px;
    border-bottom: 1px solid rgba(227, 155, 53, .16);
    vertical-align: middle;
}

.connected-primary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.connected-primary strong {
    color: #fff3c0;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: .5px;
}

.connected-sub {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 800;
    margin-top: 4px;
}

.connected-status {
    display: inline-block;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 4px 6px;
    border: 1px solid rgba(170, 210, 105, .55);
    background: rgba(112, 146, 71, .45);
    color: #fff3c0;
}

.connected-actions {
    text-align: right;
}

.connected-small-btn {
    font-size: 10px !important;
    padding: 6px 9px !important;
    white-space: nowrap;
}

.connected-empty {
    border: 1px dashed rgba(227, 155, 53, .35);
    color: #b9ad7b;
    padding: 18px;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .connected-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .connected-table-wrap {
        overflow-x: auto;
    }

    .connected-users-table {
        min-width: 980px;
    }
}

@media (max-width: 650px) {
    .connected-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Connected Systems Page
   ========================================================= */

body.connected-users-mode .connected-hidden-source {
    display: none !important;
}

.connected-users-page {
    margin-top: 14px;
}

.connected-page-card .card-body {
    padding: 12px;
}

.connected-refresh-note {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.connected-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.connected-summary-grid div {
    border: 1px solid rgba(227, 155, 53, .25);
    background: rgba(0, 0, 0, .20);
    padding: 10px;
}

.connected-summary-grid span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.connected-summary-grid strong {
    color: #fff3c0;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.connected-table-wrap {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid rgba(227, 155, 53, .28);
}

.connected-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.connected-users-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(37, 50, 25, .98);
    color: #ffe29a;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 10px 9px;
    border-bottom: 1px solid rgba(227, 155, 53, .30);
    text-align: left;
}

.connected-users-table tbody tr {
    background: rgba(0, 0, 0, .18);
}

.connected-users-table tbody tr:nth-child(even) {
    background: rgba(227, 155, 53, .065);
}

.connected-users-table tbody tr:hover {
    background: rgba(227, 155, 53, .13);
}

.connected-users-table td {
    color: #fff;
    padding: 10px 9px;
    border-bottom: 1px solid rgba(227, 155, 53, .16);
    vertical-align: middle;
}

.connected-primary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.connected-primary strong {
    color: #fff3c0;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: .5px;
}

.connected-sub {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 800;
    margin-top: 4px;
}

.connected-status {
    display: inline-block;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 4px 6px;
    border: 1px solid rgba(170, 210, 105, .55);
    background: rgba(112, 146, 71, .45);
    color: #fff3c0;
}

.connected-actions {
    text-align: right;
}

.connected-small-btn {
    font-size: 10px !important;
    padding: 6px 9px !important;
    white-space: nowrap;
}

.connected-empty {
    border: 1px dashed rgba(227, 155, 53, .35);
    color: #b9ad7b;
    padding: 18px;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .connected-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .connected-table-wrap {
        overflow-x: auto;
    }

    .connected-users-table {
        min-width: 980px;
    }
}

@media (max-width: 650px) {
    .connected-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Connected Systems Page
   ========================================================= */

body.connected-users-mode .connected-hidden-source {
    display: none !important;
}

.connected-users-page {
    margin-top: 14px;
}

.connected-page-card .card-body {
    padding: 12px;
}

.connected-refresh-note {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.connected-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.connected-summary-grid div {
    border: 1px solid rgba(227, 155, 53, .25);
    background: rgba(0, 0, 0, .20);
    padding: 10px;
}

.connected-summary-grid span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.connected-summary-grid strong {
    color: #fff3c0;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.connected-table-wrap {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid rgba(227, 155, 53, .28);
}

.connected-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.connected-users-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(37, 50, 25, .98);
    color: #ffe29a;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 10px 9px;
    border-bottom: 1px solid rgba(227, 155, 53, .30);
    text-align: left;
}

.connected-users-table tbody tr {
    background: rgba(0, 0, 0, .18);
}

.connected-users-table tbody tr:nth-child(even) {
    background: rgba(227, 155, 53, .065);
}

.connected-users-table tbody tr:hover {
    background: rgba(227, 155, 53, .13);
}

.connected-users-table td {
    color: #fff;
    padding: 10px 9px;
    border-bottom: 1px solid rgba(227, 155, 53, .16);
    vertical-align: middle;
}

.connected-primary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.connected-primary strong {
    color: #fff3c0;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: .5px;
}

.connected-sub {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 800;
    margin-top: 4px;
}

.connected-status {
    display: inline-block;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 4px 6px;
    border: 1px solid rgba(170, 210, 105, .55);
    background: rgba(112, 146, 71, .45);
    color: #fff3c0;
}

.connected-actions {
    text-align: right;
}

.connected-small-btn {
    font-size: 10px !important;
    padding: 6px 9px !important;
    white-space: nowrap;
}

.connected-empty {
    border: 1px dashed rgba(227, 155, 53, .35);
    color: #b9ad7b;
    padding: 18px;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .connected-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .connected-table-wrap {
        overflow-x: auto;
    }

    .connected-users-table {
        min-width: 980px;
    }
}

@media (max-width: 650px) {
    .connected-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Connected Systems Module
   ========================================================= */

.connected-users-main,
.connected-device-main {
    margin-top: 14px;
}

.connected-page-card .card-body {
    padding: 12px;
}

.connected-refresh-note {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.connected-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.connected-summary-grid div {
    border: 1px solid rgba(227, 155, 53, .25);
    background: rgba(0, 0, 0, .20);
    padding: 10px;
    min-width: 0;
}

.connected-summary-grid span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.connected-summary-grid strong {
    display: block;
    color: #fff3c0;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connected-table-wrap {
    max-height: 560px;
    overflow-y: auto;
    border: 1px solid rgba(227, 155, 53, .28);
}

.connected-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.connected-users-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(37, 50, 25, .98);
    color: #ffe29a;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 10px 9px;
    border-bottom: 1px solid rgba(227, 155, 53, .30);
    text-align: left;
}

.connected-users-table tbody tr {
    background: rgba(0, 0, 0, .18);
}

.connected-users-table tbody tr:nth-child(even) {
    background: rgba(227, 155, 53, .075);
}

.connected-users-table tbody tr:hover {
    background: rgba(227, 155, 53, .15);
}

.connected-users-table td {
    color: #fff;
    padding: 10px 9px;
    border-bottom: 1px solid rgba(227, 155, 53, .16);
    vertical-align: middle;
}

.connected-primary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.connected-primary strong {
    color: #fff3c0;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: .5px;
}

.connected-sub {
    color: #b9ad7b;
    font-size: 10px;
    font-weight: 800;
    margin-top: 4px;
}

.connected-status {
    display: inline-block;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 4px 6px;
    border: 1px solid rgba(170, 210, 105, .55);
    background: rgba(112, 146, 71, .45);
    color: #fff3c0;
}

.connected-actions {
    text-align: right;
}

.connected-small-btn {
    font-size: 10px !important;
    padding: 6px 9px !important;
    white-space: nowrap;
}

.connected-empty {
    border: 1px dashed rgba(227, 155, 53, .35);
    color: #b9ad7b;
    padding: 18px;
    text-align: center;
    font-size: 13px;
}

.connected-device-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
    gap: 14px;
    align-items: start;
}

.connected-device-live-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(227, 155, 53, .25);
    background: rgba(0, 0, 0, .20);
    padding: 12px;
    margin-bottom: 12px;
}

.connected-device-live-call {
    color: #fff3c0;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
}

.connected-device-live-peer {
    color: #e39b35;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .5px;
    margin-top: 7px;
    text-transform: uppercase;
}

@media (max-width: 1150px) {
    .connected-device-layout {
        grid-template-columns: 1fr;
    }

    .connected-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .connected-table-wrap {
        overflow-x: auto;
    }

    .connected-users-table {
        min-width: 980px;
    }
}

@media (max-width: 650px) {
    .connected-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Connected Device Detail v2
   ========================================================= */

.connected-device-v2 {
    margin-top: 14px;
}

.connected-device-detail-grid {
    display: grid;
    grid-template-columns: minmax(230px, 25%) minmax(0, 75%);
    gap: 14px;
    align-items: start;
}

.connected-device-left-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.connected-device-main-panel {
    min-width: 0;
}

.connected-live-card .card-body,
.connected-quick-card .card-body,
.connected-profile-card .card-body {
    padding: 12px;
}

.connected-live-compact-card {
    border: 1px solid rgba(227, 155, 53, .26);
    background: rgba(0, 0, 0, .18);
    padding: 10px;
}

.connected-live-compact-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(227, 155, 53, .18);
    padding-bottom: 9px;
    margin-bottom: 9px;
}

.connected-live-compact-call,
.connected-live-compact-title {
    color: #fff3c0;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
}

.connected-live-compact-peer,
.connected-live-compact-muted {
    color: #e39b35;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-top: 7px;
}

.connected-live-compact-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.connected-live-compact-facts div,
.connected-mini-facts div {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .20);
    padding: 8px;
    min-width: 0;
}

.connected-live-compact-facts span,
.connected-mini-facts span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.connected-live-compact-facts strong,
.connected-mini-facts strong {
    display: block;
    color: #fff3c0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connected-mini-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.connected-side-actions {
    margin-top: 10px;
}

.connected-profile-state {
    color: #ffe29a;
    border: 1px solid rgba(227, 155, 53, .35);
    background: rgba(227, 155, 53, .10);
    padding: 6px 9px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.connected-public-hero {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(227, 155, 53, .25);
    border-left: 4px solid #e39b35;
    background: rgba(0, 0, 0, .18);
    padding: 14px;
    margin-bottom: 12px;
}

.connected-public-title {
    color: #fff3c0;
    font-size: 26px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
}

.connected-public-subtitle {
    color: #b9ad7b;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-top: 8px;
}

.connected-profile-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.connected-profile-facts div {
    border: 1px solid rgba(227, 155, 53, .24);
    background: rgba(0, 0, 0, .20);
    padding: 10px;
    min-width: 0;
}

.connected-profile-facts span {
    display: block;
    color: #ffe29a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.connected-profile-facts strong {
    display: block;
    color: #fff3c0;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connected-section-title {
    color: #ffe29a;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.connected-map-section {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .14);
    padding: 12px;
    margin-bottom: 12px;
}

.connected-map-frame {
    width: 100%;
    height: 340px;
    border: 1px solid rgba(227, 155, 53, .28);
    background: #111;
}

.connected-map-frame.small {
    height: 270px;
}

.connected-map-caption {
    color: #b9ad7b;
    font-size: 11px;
    margin-top: 7px;
}

.connected-map-placeholder {
    min-height: 260px;
    border: 1px dashed rgba(227, 155, 53, .35);
    background: rgba(0, 0, 0, .20);
    color: #b9ad7b;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    font-size: 13px;
}

.connected-map-placeholder.compact {
    min-height: 270px;
}

.connected-notes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.connected-notes-grid > div {
    border: 1px solid rgba(227, 155, 53, .22);
    background: rgba(0, 0, 0, .14);
    padding: 12px;
}

.connected-notes-grid p {
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

.connected-form-section {
    border: 1px solid rgba(227, 155, 53, .20);
    background: rgba(0, 0, 0, .12);
    padding: 12px;
    margin-bottom: 12px;
}

.connected-form-grid {
    display: grid;
    gap: 10px;
}

.connected-form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.connected-form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.connected-form-wide {
    grid-column: 1 / -1;
}

.connected-form-map-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    gap: 12px;
    align-items: stretch;
}

.connected-device-form label {
    display: block;
    color: #ffe29a;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.connected-device-form input[type="text"],
.connected-device-form input[type="email"],
.connected-device-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(227, 155, 53, .30);
    background: rgba(0, 0, 0, .28);
    color: #fff3c0;
    padding: 8px 9px;
    font-size: 13px;
    font-family: inherit;
}

.connected-device-form textarea {
    resize: vertical;
    min-height: 96px;
}

.connected-device-form input:focus,
.connected-device-form textarea:focus {
    outline: none;
    border-color: rgba(227, 155, 53, .85);
    box-shadow: 0 0 0 2px rgba(227, 155, 53, .12);
}

.connected-form-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border-top: 1px solid rgba(227, 155, 53, .18);
    padding-top: 12px;
}

.connected-checkbox {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

@media (max-width: 1250px) {
    .connected-device-detail-grid {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .connected-profile-facts,
    .connected-form-grid.three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .connected-form-map-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .connected-device-detail-grid {
        grid-template-columns: 1fr;
    }

    .connected-notes-grid,
    .connected-form-grid.two,
    .connected-form-grid.three,
    .connected-profile-facts {
        grid-template-columns: 1fr;
    }

    .connected-form-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================================================
   Connected Device Ownership / Self-Service
   ========================================================= */

.connected-claim-form {
    margin-top: 12px;
    border-top: 1px solid rgba(227, 155, 53, .18);
    padding-top: 12px;
}

.connected-claim-form label {
    display: block;
    color: #ffe29a;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.connected-claim-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(227, 155, 53, .30);
    background: rgba(0, 0, 0, .28);
    color: #fff3c0;
    padding: 8px 9px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 8px;
}

.connected-device-form select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(227, 155, 53, .30);
    background: rgba(0, 0, 0, .28);
    color: #fff3c0;
    padding: 8px 9px;
    font-size: 13px;
    font-family: inherit;
}

.connected-device-form input[disabled] {
    opacity: .75;
    cursor: not-allowed;
}