* {
    box-sizing: border-box;
}

:root {
    --background: #0b0e13;
    --sidebar: #0e1117;
    --panel: #12161d;
    --panel-hover: #171c24;

    --border: rgba(255,255,255,.07);

    --text: #eef1f5;
    --text-secondary: #929ba9;
    --text-muted: #626b79;

    --accent: #6f8cff;
    --success: #55c98a;
    --danger: #ff6464;
}

html,
body {
    margin: 0;

    width: 100%;
    height: 100%;

    background: var(--background);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    overflow: hidden;
}

button {
    font-family: inherit;
}

[hidden] {
    display: none !important;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background-color: #0b0e13;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 48px 48px;
}

.login-card {
    width: min(440px, 100%);
    padding: 36px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(18,22,29,.96);
    box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

.login-card .logo {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(111,140,255,.3);
    border-radius: 10px;
    background: rgba(111,140,255,.12);
    color: #a7b7ff;
    font-size: 13px;
    font-weight: 800;
}

.login-card h1 {
    margin: 24px 0 8px;
    color: var(--text);
    font-size: 25px;
    font-weight: 700;
}

.login-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.roblox-button {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 26px;
    padding: 0 16px;
    border: 1px solid #718bff;
    border-radius: 7px;
    background: #617bfa;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.roblox-button:hover {
    border-color: #8da0ff;
    background: #7188ff;
}

.login-card small {
    display: block;
    margin-top: 14px;
    color: var(--text-muted);
    font-size: 10px;
    text-align: center;
}


/* =========================================
   APP
========================================= */

.app {
    display: flex;

    width: 100vw;
    height: 100vh;

    overflow: hidden;
}


/* =========================================
   SIDEBAR
========================================= */

.sidebar {
    position: relative;

    width: 255px;
    min-width: 255px;

    height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 20px 14px;

    background: var(--sidebar);

    border-right:
        1px solid var(--border);
}


/* BRAND */

.brand {
    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        4px 7px 22px;
}

.brand-icon {
    width: 36px;
    height: 36px;
    display: block;
    object-fit: contain;
    border-radius: 10px;
}

.brand-name {
    color: #f4f6f9;

    font-size: 14px;
    font-weight: 750;
}

.brand-subtitle {
    margin-top: 2px;

    color: #626b79;

    font-size: 10px;
}


/* SERVER SELECTOR */

.server-selector {
    position: relative;
    padding:
        0 7px 20px;
}

.server-label {
    margin-bottom: 7px;

    color: #525b68;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .08em;
}

.server-select {
    width: 100%;
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background: #12161d;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.server-select:hover,
.server-select[aria-expanded="true"] {
    border-color: rgba(111,140,255,.32);
    background: #171c24;
}

.server-status-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 8px
        rgba(85,201,138,.55);
}

.server-select-info {
    min-width: 0;

    flex: 1;
}

.server-select-info strong {
    display: block;

    overflow: hidden;

    color: #e9ecf1;

    font-size: 11px;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.server-select-info span {
    display: block;

    margin-top: 2px;

    color: #626b79;

    font-size: 9px;
}

.server-arrow {
    color: #596271;

    font-size: 18px;
}

.server-menu {
    position: absolute;
    top: calc(100% - 13px);
    left: 7px;
    z-index: 400;
    width: min(300px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #12161d;
    box-shadow: 0 16px 40px rgba(0,0,0,.48);
}

.server-menu[hidden] {
    display: none;
}

.server-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 1px solid var(--border);
}

.server-option {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 0;
    background: transparent;
    color: #dce1e8;
    text-align: left;
    cursor: pointer;
}

.server-option:hover,
.server-option.active {
    background: rgba(111,140,255,.1);
}

.server-option strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-option span {
    color: #778190;
    font-size: 9px;
}

.server-menu-empty {
    padding: 14px 12px;
    color: #7b8593;
    font-size: 10px;
}

.server-invite {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 4px;
    padding: 7px 9px;
    color: #9da7b5;
    font-size: 9px;
}

.server-invite button,
.server-menu-actions button {
    border: 0;
    background: transparent;
    color: #9eafff;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}

.server-menu-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
}

.server-dialog {
    width: min(420px, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #12161d;
    color: var(--text);
}

.server-dialog::backdrop {
    background: rgba(3,5,8,.76);
    backdrop-filter: blur(3px);
}

.server-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.server-dialog-eyebrow {
    color: #7589ee;
    font-size: 9px;
    font-weight: 750;
}

.server-dialog-header h2 {
    margin: 6px 0 0;
    font-size: 17px;
}

.server-dialog form[hidden] {
    display: none;
}

.server-dialog form:not([hidden]) {
    display: grid;
    gap: 13px;
}

.server-dialog label {
    display: grid;
    gap: 7px;
    color: #a0a9b6;
    font-size: 10px;
}

.server-dialog input {
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    background: #0b0e13;
    color: var(--text);
    font: inherit;
}

.server-dialog input:focus {
    border-color: rgba(111,140,255,.65);
}

.server-dialog-message {
    min-height: 1em;
    margin: 0;
    color: #ff9e79;
    font-size: 10px;
}

.icon-button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: #a8b0bb;
    font-size: 18px;
    cursor: pointer;
}

.server-invite-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.server-leave-button {
    align-self: center;
    margin: 0 10px;
    padding: 6px 8px;
    border: 1px solid rgba(255,125,125,.22);
    border-radius: 5px;
    background: rgba(255,100,100,.07);
    color: #ff9a9a;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}

.server-leave-button:hover {
    background: rgba(255,100,100,.15);
}

.server-members-dialog {
    width: min(560px, calc(100vw - 32px));
}

.server-members-content {
    display: grid;
    gap: 18px;
    max-height: min(62vh, 560px);
    overflow-y: auto;
    padding-right: 3px;
}

.server-members-content h3 {
    margin: 0 0 8px;
    color: #dbe1e9;
    font-size: 11px;
}

.server-member-list {
    display: grid;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.server-member-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 10px;
}

.server-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 10px 11px;
    border-bottom: 1px solid var(--border);
}

.server-member-row:last-child {
    border-bottom: 0;
}

.server-member-info {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.server-member-info strong {
    overflow: hidden;
    color: #e3e7ec;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-member-info span {
    color: var(--text-muted);
    font-size: 9px;
}

.server-member-actions {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}

.server-member-actions button {
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #1a2029;
    color: #c4ccd7;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}

.server-member-actions [data-member-action="ban"] {
    border-color: rgba(255,100,100,.25);
    color: #ff9a9a;
}

.server-member-actions [data-member-action="unban"] {
    border-color: rgba(85,201,138,.25);
    color: #81d7a7;
}

.server-member-actions button:hover {
    background: #242c38;
}


/* NAVIGATION */

.navigation {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.nav-section-title {
    padding:
        7px 9px 7px;

    color: #505967;

    font-size: 9px;
    font-weight: 750;

    letter-spacing: .08em;
}

.nav-section-title.second {
    margin-top: 16px;
}

.nav-item {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 11px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #7e8795;

    text-align: left;

    font-size: 12px;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.nav-item:hover {
    background:
        rgba(255,255,255,.035);

    color: #cfd4dc;
}

.nav-item.active {
    background:
        rgba(111,140,255,.11);

    color: #dfe5ff;
}

.nav-icon {
    width: 17px;

    color: #646e7d;

    text-align: center;

    font-size: 15px;
}

.nav-item.active .nav-icon {
    color: var(--accent);
}

.nav-count {
    margin-left: auto;

    min-width: 20px;

    padding: 2px 6px;

    border-radius: 5px;

    background:
        rgba(255,255,255,.05);

    color: #727b89;

    text-align: center;

    font-size: 9px;
}


/* SIDEBAR BOTTOM */

.sidebar-bottom {
    margin-top: auto;
}

.connection-card {
    margin: 0 3px 9px;

    padding: 11px;

    border:
        1px solid var(--border);

    border-radius: 9px;

    background:
        rgba(255,255,255,.015);
}

.connection-card-top {
    display: flex;

    align-items: center;
}

.connection-indicator {
    display: flex;

    align-items: center;

    gap: 6px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 650;
}

.connection-indicator::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #737b87;
}

.connection-indicator.connected {
    color: var(--success);
}

.connection-indicator.connected::before {
    background: var(--success);

    box-shadow:
        0 0 7px
        rgba(85,201,138,.5);
}

.connection-indicator.disconnected {
    color: var(--danger);
}

.connection-indicator.disconnected::before {
    background: var(--danger);
}

.connection-description {
    display: block;

    margin-top: 4px;

    color: #515a67;

    font-size: 9px;
}

.account-card {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px;

    border-top:
        1px solid var(--border);
}

.account-avatar {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border-radius: 8px;

    object-fit: cover;

    background: #1a2029;
}

.account-info {
    min-width: 0;

    flex: 1;
}

.account-info strong {
    display: block;

    overflow: hidden;

    color: #dfe3e9;

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.account-info span {
    display: block;

    margin-top: 2px;

    color: #5d6674;

    font-size: 8px;
}

.account-info .account-tier {
    color: #8fa6ff;
    font-weight: 700;
}

.logout-button {
    width: 28px;
    height: 28px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: #626b79;

    cursor: pointer;
}

.logout-button:hover {
    background:
        rgba(255,255,255,.05);

    color: #d1d6dd;
}


/* =========================================
   MAIN
========================================= */

.main {
    min-width: 0;

    flex: 1;

    height: 100vh;

    overflow-y: auto;

    background: var(--background);
}


/* TOPBAR */

.topbar {
    height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 32px;

    border-bottom:
        1px solid var(--border);

    background:
        rgba(11,14,19,.88);

    backdrop-filter:
        blur(12px);
}

.page-heading h1 {
    margin: 0;

    color: #f1f3f6;

    font-size: 16px;
    font-weight: 700;
}

.page-heading p {
    margin: 3px 0 0;

    color: #626b79;

    font-size: 10px;
}

.mobile-brand {
    display: none;
}

.topbar-actions {
    display: flex;

    align-items: center;

    gap: 10px;
}

.topbar-legal-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 5px;
    border: 0;
    background: transparent;
    color: #8994a3;
    font: inherit;
    font-size: 9px;
    text-decoration: none;
    cursor: pointer;
}

.topbar-legal-link:hover {
    color: #d9e0ea;
}

.live-status {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #737d8b;

    font-size: 10px;
}

.live-status::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #626b79;
}

.live-status.connected {
    color: var(--success);
}

.live-status.connected::before {
    background: var(--success);

    box-shadow:
        0 0 7px
        rgba(85,201,138,.55);
}

.live-status.disconnected {
    color: var(--danger);
}

.live-status.disconnected::before {
    background: var(--danger);
}

.refresh-button {
    width: 32px;
    height: 32px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    background: #141820;

    color: #89929f;

    cursor: pointer;

    font-size: 16px;
}

.refresh-button:hover {
    background: #1b2029;

    color: white;
}

.refresh-button.loading {
    animation:
        spin .6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================
   PAGES
========================================= */

.page {
    display: none;

    padding:
        28px 32px 50px;

    max-width: 1500px;

    margin: 0 auto;
}

.page.active {
    display: block;
}

.page-intro {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;
}

.page-intro h2 {
    margin: 0;

    color: #edf0f4;

    font-size: 19px;
    font-weight: 700;
}

.page-intro p {
    margin: 5px 0 0;

    color: #697280;

    font-size: 11px;
}

.last-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #aeb8c6;
    font-size: 9px;
    font-weight: 650;
}

.last-updated::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    content: "";
}


/* =========================================
   STAT CARDS
========================================= */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    margin-bottom: 12px;
}

.stat-card {
    min-width: 0;
    min-height: 110px;
    padding: 17px 18px;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
}

.stat-card:last-child {
    border-right: 0;
}

.stat-card-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #656e7c;

    font-size: 9px;
    font-weight: 750;

    letter-spacing: 0;
}

.stat-icon {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background:
        rgba(255,255,255,.045);

    color: #7d8795;

    font-size: 11px;
}

.stat-icon.success {
    color: var(--success);

    background:
        rgba(85,201,138,.08);
}

.stat-value {
    margin-top: 17px;

    color: #f0f2f5;

    font-size: 25px;
    font-weight: 700;
}

.status-value {
    font-size: 19px;

    color: var(--success);
}

.status-value.is-offline {
    color: var(--danger);
}

.stat-description {
    margin-top: 3px;

    color: #596270;

    font-size: 9px;
}


/* =========================================
   PANELS
========================================= */

.content-grid {
    display: grid;

    grid-template-columns:
        1.3fr 1fr;

    gap: 12px;

    margin-bottom: 12px;
}

.panel {
    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background: var(--panel);
}

.panel-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 17px 18px;

    border-bottom:
        1px solid var(--border);
}

.panel-header h3 {
    margin: 0;

    color: #e3e7ec;

    font-size: 12px;
    font-weight: 700;
}

.panel-header p {
    margin: 4px 0 0;

    color: #606a78;

    font-size: 9px;
}

.panel-live {
    padding: 4px 7px;

    border-radius: 5px;

    background:
        rgba(85,201,138,.08);

    color: var(--success);

    font-size: 8px;
    font-weight: 700;
}

.panel-link {
    border: 0;

    background: transparent;

    color: var(--accent);

    font-size: 10px;

    cursor: pointer;
}

.info-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);
}

.info-item {
    padding: 15px 18px;

    border-bottom:
        1px solid rgba(255,255,255,.045);
}

.info-item:nth-child(odd) {
    border-right:
        1px solid rgba(255,255,255,.045);
}

.info-item span {
    display: block;

    color: #596270;

    font-size: 9px;
}

.info-item strong {
    display: block;

    margin-top: 5px;

    color: #dfe3e9;

    font-size: 11px;
}


/* PROFILE */

.profile-panel {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 19px;
}

.profile-avatar {
    width: 52px;
    height: 52px;

    border-radius: 12px;

    object-fit: cover;

    background: #1b2028;
}

.profile-details strong {
    display: block;

    color: #e6e9ee;

    font-size: 13px;
}

.profile-details > span {
    display: block;

    margin-top: 3px;

    color: #7a8492;

    font-size: 10px;
}

.profile-details small {
    display: block;

    margin-top: 8px;

    color: #555f6d;

    font-size: 8px;
}


/* =========================================
   MINI MAP
========================================= */

.map-preview-panel {
    margin-top: 12px;
}

.mini-map {
    position: relative;

    height: 320px;

    overflow: hidden;

    background: #080b0f;
}

.mini-map img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================
   REAL MAP
========================================= */

.map-container {
    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 14px;

    background: #07090c;
}

.map-toolbar {
    height: 64px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 18px;

    border-bottom:
        1px solid var(--border);

    background: #10141a;
}

.map-title {
    display: block;

    color: #edf0f4;

    font-size: 12px;
    font-weight: 700;
}

.map-subtitle {
    display: block;

    margin-top: 3px;

    color: #606a78;

    font-size: 9px;
}

.map-controls {
    display: flex;

    gap: 5px;
}

.map-controls button {
    height: 32px;

    min-width: 32px;

    padding:
        0 9px;

    border:
        1px solid var(--border);

    border-radius: 7px;

    background: #171b22;

    color: #aeb5bf;

    cursor: pointer;

    font-size: 13px;
}

.map-controls button:hover {
    background: #20252d;

    color: white;
}

.map-viewport {
    position: relative;

    width: 100%;

    height: calc(100vh - 250px);

    min-height: 500px;

    overflow: hidden;

    background: #050608;

    cursor: grab;
}

.map-viewport.dragging {
    cursor: grabbing;
}

.map-canvas {
    position: absolute;

    left: 0;
    top: 0;

    width: 2048px;
    height: 2048px;

    transform:
        translate(0, 0)
        scale(.65);

    transform-origin: 0 0;

    user-select: none;
}

.erlc-map-image {
    display: block;

    width: 2048px;
    height: 2048px;

    pointer-events: none;

    user-select: none;
}


/* MAP PLAYER */

.map-player-marker {
    position: absolute;

    width: 0;
    height: 0;

    z-index: 20;

    transform:
        translate(-50%, -50%);

    cursor: pointer;
}

.map-player-dot {
    width: 16px;
    height: 16px;

    margin-left: -8px;
    margin-top: -8px;

    border:
        3px solid #12161d;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 0 3px
            rgba(255,255,255,.22),

        0 0 18px
            rgba(255,255,255,.7);
}

.map-player-label {
    position: absolute;

    left: 50%;
    top: 14px;

    transform:
        translateX(-50%);

    padding:
        4px 7px;

    border:
        1px solid rgba(255,255,255,.1);

    border-radius: 6px;

    background:
        rgba(8,10,14,.92);

    color: white;

    font-size: 9px;
    font-weight: 650;

    white-space: nowrap;

    pointer-events: none;
}


/* PLAYER POPUP */

.player-popup {
    position: absolute;

    left: 16px;
    top: 16px;

    width: 260px;

    padding: 14px;

    border:
        1px solid rgba(255,255,255,.1);

    border-radius: 11px;

    background:
        rgba(13,16,22,.97);

    box-shadow:
        0 15px 50px
        rgba(0,0,0,.5);

    z-index: 100;

    cursor: default;
}

.popup-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding-bottom: 11px;

    border-bottom:
        1px solid var(--border);
}

.popup-header strong {
    display: block;

    color: #eef1f5;

    font-size: 12px;
}

.popup-header span {
    display: block;

    margin-top: 3px;

    color: #707987;

    font-size: 9px;
}

.popup-close {
    width: 24px;
    height: 24px;

    border: 0;

    border-radius: 6px;

    background: rgba(255,255,255,.05);

    color: #8a93a1;

    cursor: pointer;
}

.popup-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    padding-top: 12px;
}

.popup-grid span {
    display: block;

    color: #596270;

    font-size: 8px;
}

.popup-grid strong {
    display: block;

    margin-top: 3px;

    color: #dce1e7;

    font-size: 10px;
}


/* MAP FOOTER */

.map-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 48px;

    padding:
        0 18px;

    border-top:
        1px solid var(--border);

    background: #10141a;
}

.map-legend {
    display: flex;

    align-items: center;

    gap: 18px;
}

.legend-item {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #747d8a;

    font-size: 9px;
}

.legend-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.legend-dot.player {
    background: white;
}

.legend-dot.police {
    background: #4d8cff;
}

.legend-dot.sheriff {
    background: #e0b44d;
}

.legend-dot.fire {
    background: #ff6255;
}

.map-coordinate-info {
    color: #505966;

    font-size: 8px;
}


/* =========================================
   PLAYERS
========================================= */

.players-panel {
    overflow: hidden;
}

.players-header,
.player-row {
    display: grid;

    grid-template-columns:
        2fr
        1fr
        1.2fr
        1.5fr
        .8fr;

    align-items: center;

    gap: 20px;
}

.players-header {
    padding:
        12px 18px;

    border-bottom:
        1px solid var(--border);

    color: #555f6d;

    font-size: 8px;
    font-weight: 750;

    letter-spacing: .05em;

    text-transform: uppercase;
}

.player-row {
    padding:
        15px 18px;

    border-bottom:
        1px solid rgba(255,255,255,.045);

    transition:
        background .15s ease;
}

.player-row:hover {
    background:
        rgba(255,255,255,.025);
}

.player-main {
    display: flex;

    align-items: center;

    gap: 10px;
}

.player-avatar {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #252b35,
            #161a21
        );

    color: white;

    font-size: 11px;
    font-weight: 700;
}

.player-name {
    color: #e0e4e9;

    font-size: 10px;
    font-weight: 650;
}

.player-id {
    margin-top: 3px;

    color: #555f6c;

    font-size: 8px;
}

.player-permission {
    color: #929ba8;

    font-size: 9px;
}

.player-location {
    color: #bfc5cd;

    font-size: 9px;
}

.player-location small {
    display: block;

    margin-top: 3px;

    color: #596270;

    font-size: 8px;
}

.team-badge {
    display: inline-flex;

    padding:
        5px 8px;

    border-radius: 6px;

    font-size: 8px;
    font-weight: 650;
}

.team-civilian {
    background:
        rgba(150,150,150,.1);

    color: #aeb5bf;
}

.team-law {
    background:
        rgba(70,130,255,.11);

    color: #79a5ff;
}

.team-fire {
    background:
        rgba(255,90,60,.11);

    color: #ff806c;
}

.team-dot {
    background:
        rgba(255,190,60,.11);

    color: #ffc65e;
}

.team-default {
    background:
        rgba(255,255,255,.06);

    color: #aeb5bf;
}

.wanted-badge {
    color: #ff6666;

    font-size: 9px;

    letter-spacing: 1px;
}

.not-wanted {
    color: var(--success);

    font-size: 9px;
}


/* =========================================
   EMPTY / LOADING
========================================= */

.loading-state {
    padding: 60px 20px;

    color: #697280;

    text-align: center;

    font-size: 10px;
}

.empty-state {
    padding: 60px 20px;

    color: #697280;

    text-align: center;
}

.empty-icon {
    margin-bottom: 10px;

    color: #4e5764;

    font-size: 30px;
}

.empty-state h3 {
    margin: 0 0 6px;

    color: #dfe3e8;

    font-size: 12px;
}

.empty-state p {
    margin: 0;

    color: #626c79;

    font-size: 9px;
}


/* =========================================
   EMPTY LARGE
========================================= */

.empty-large {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    min-height: 420px;

    padding: 40px;

    border:
        1px dashed
        rgba(255,255,255,.09);

    border-radius: 14px;

    text-align: center;
}

.empty-large-icon {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    border-radius: 15px;

    background:
        rgba(111,140,255,.08);

    color: #708aff;

    font-size: 24px;
}

.empty-large h3 {
    margin: 0;

    color: #e4e8ed;

    font-size: 14px;
}

.empty-large p {
    max-width: 390px;

    margin: 7px 0 18px;

    color: #646e7b;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================
   BUTTONS
========================================= */

.primary-button,
.secondary-button {
    padding:
        9px 13px;

    border-radius: 7px;

    font-size: 10px;

    cursor: pointer;
}

.primary-button {
    border:
        1px solid
        rgba(111,140,255,.35);

    background:
        rgba(111,140,255,.12);

    color: #9badff;
}

.primary-button:hover {
    background:
        rgba(111,140,255,.18);
}

.secondary-button {
    border:
        1px solid var(--border);

    background: #141820;

    color: #9ba4b1;
}

.secondary-button:hover {
    background: #1b2028;

    color: white;
}


/* =========================================
   SETTINGS
========================================= */

.settings-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}

.settings-list {
    padding: 0 18px;
}

.setting-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 15px 0;

    border-bottom:
        1px solid rgba(255,255,255,.045);
}

.setting-row:last-child {
    border-bottom: 0;
}

.setting-row strong {
    color: #dce1e7;

    font-size: 10px;
}

.setting-row div span {
    display: block;

    margin-top: 3px;

    color: #596270;

    font-size: 8px;
}

.setting-status {
    color: var(--success);

    font-size: 9px;
}

.server-delete-panel {
    grid-column: 1 / -1;
    border-color: rgba(255, 102, 102, .28);
}

.server-delete-panel .panel-header {
    align-items: center;
}

.server-delete-panel .panel-header p {
    max-width: 480px;
    color: #9a7474;
}

.server-delete-button,
.server-delete-confirm {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 102, 102, .45);
    border-radius: 6px;
    background: rgba(180, 48, 48, .16);
    color: #ff9a9a;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.server-delete-button:hover,
.server-delete-confirm:not(:disabled):hover {
    background: rgba(180, 48, 48, .3);
}

.server-delete-confirm:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.server-delete-confirmation {
    display: grid;
    gap: 12px;
}

.server-delete-confirmation > p {
    margin: 0;
    color: #a0a9b6;
    font-size: 11px;
    line-height: 1.5;
}

.server-delete-confirmation .server-delete-warning {
    padding: 11px;
    border: 1px solid rgba(255, 102, 102, .28);
    border-radius: 6px;
    background: rgba(180, 48, 48, .1);
    color: #ffb0a8;
}

.server-delete-warning strong {
    color: #fff;
}

.server-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.server-delete-actions .secondary-button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: #a8b0bb;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}


.calls-layout {
    display: grid;
    grid-template-columns: minmax(270px, .8fr) minmax(0, 1.4fr);
    align-items: start;
    gap: 12px;
}

.call-form-fields {
    display: grid;
    gap: 12px;
    padding: 16px 18px 18px;
}

.call-form-fields label,
.call-controls label {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 10px;
}

.call-form-fields input,
.call-form-fields select,
.call-form-fields textarea,
.call-controls input,
.call-controls select,
.calls-filter-label select,
.call-type-adder input {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    background: #0e1117;
    color: var(--text);
    font: inherit;
    font-size: 11px;
}

.call-form-fields textarea {
    resize: vertical;
}

.call-form-fields input:focus,
.call-form-fields select:focus,
.call-form-fields textarea:focus,
.call-controls input:focus,
.call-controls select:focus,
.calls-filter-label select:focus,
.call-type-adder input:focus {
    border-color: rgba(111,140,255,.65);
}

.call-form-message {
    min-height: 1em;
    margin: 0;
    color: #ff9e79;
    font-size: 10px;
}

.call-type-settings {
    padding: 14px 18px 16px;
    border-top: 1px solid var(--border);
}

.call-type-heading,
.call-type-adder,
.call-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.call-type-heading strong {
    font-size: 11px;
}

.call-type-heading span,
.call-meta {
    color: var(--text-muted);
    font-size: 9px;
}

.call-type-adder {
    margin-top: 10px;
}

.call-type-adder button,
.call-type-row button,
.call-delete {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #171b22;
    color: #d3d8df;
    font: inherit;
    cursor: pointer;
}

.call-type-adder button {
    color: #9cb2ff;
    font-size: 18px;
}

.call-type-list {
    display: grid;
    margin-top: 8px;
}

.call-type-row {
    min-height: 30px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 10px;
}

.call-type-row button,
.call-delete {
    width: 27px;
    min-width: 27px;
    height: 27px;
    color: #ff8585;
}

.calls-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 10px;
}

.calls-filter-label select {
    width: auto;
    min-width: 130px;
}

.calls-list {
    display: grid;
}

.erlc-calls-section {
    border-top: 1px solid var(--border);
}

.erlc-calls-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 8px;
}

.erlc-calls-heading h4 {
    margin: 0;
    font-size: 11px;
}

.erlc-calls-heading span {
    color: var(--text-muted);
    font-size: 9px;
}

.erlc-calls-list {
    display: grid;
}

.erlc-call-row {
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
}

.erlc-call-row:last-child {
    border-bottom: 0;
}

.call-responders {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(255,255,255,.018);
}

.call-responders-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #cfd5df;
    font-size: 10px;
}

.call-responders-heading span {
    color: var(--text-muted);
}

.call-responders ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.call-responders li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 9px;
    color: #8fa6ff;
    font-size: 10px;
}

.call-responders li span,
.call-no-responders {
    color: var(--text-muted);
    font-size: 9px;
}

.call-no-responders {
    margin: 0;
}

.call-membership-button {
    justify-self: start;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(111,140,255,.38);
    border-radius: 6px;
    background: rgba(111,140,255,.12);
    color: #b2c0ff;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.call-membership-button:hover:not(:disabled) {
    background: rgba(111,140,255,.2);
}

.call-membership-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.erlc-call-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.erlc-call-topline strong {
    color: #8ed8c8;
    font-size: 10px;
}

.erlc-call-topline span {
    color: var(--text-muted);
    font-size: 9px;
}

.dispatch-note {
    margin: 0;
    padding: 11px 18px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.5;
}

.calls-empty {
    padding: 28px 18px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.call-row {
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid #637083;
}

.call-row:last-child {
    border-bottom: 0;
}

.call-row.priority-low { border-left-color: #62a9a1; }
.call-row.priority-normal { border-left-color: #718cff; }
.call-row.priority-high { border-left-color: #e3a44e; }
.call-row.priority-urgent { border-left-color: #ff6464; }

.call-row-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.call-row-heading h4 {
    margin: 3px 0 0;
    font-size: 13px;
}

.call-priority {
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.priority-urgent .call-priority { color: #ff8585; }
.priority-high .call-priority { color: #e3b06b; }

.call-status {
    padding: 4px 7px;
    border-radius: 4px;
    background: #202630;
    color: #c1cad7;
    font-size: 9px;
}

.call-status.status-responding { background: rgba(85,201,138,.13); color: #75dca4; }
.call-status.status-closed { background: rgba(255,255,255,.06); color: #87909c; }

.call-location {
    margin-top: 10px;
    color: #e3e7ec;
    font-size: 11px;
    font-weight: 650;
}

.call-details {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.call-meta {
    margin-top: 8px;
}

.call-controls {
    display: flex;
    align-items: end;
    gap: 8px;
    margin-top: 12px;
}

.call-controls label {
    flex: 0 1 128px;
}

.call-controls .call-unit-field {
    flex: 1 1 140px;
}

.call-save {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(111,140,255,.4);
    border-radius: 6px;
    background: rgba(111,140,255,.13);
    color: #b2c0ff;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.call-delete:hover,
.call-type-row button:hover { background: rgba(255,100,100,.12); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* =========================================
   RESPONSIVE
========================================= */

.jurisdiction-layout {
    display: grid;
    gap: 12px;
}

.jurisdiction-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 12px;
    padding: 18px;
}

.jurisdiction-form-fields label {
    display: grid;
    gap: 7px;
    color: #929ba9;
    font-size: 10px;
}

.jurisdiction-form-fields input,
.jurisdiction-form-fields select {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    background: #0e1117;
    color: var(--text);
    font: inherit;
}

.jurisdiction-form-fields input:focus {
    border-color: rgba(111,140,255,.65);
}

.jurisdiction-form-message {
    grid-column: 1 / -1;
    min-height: 1em;
    margin: 0;
    color: #ff9e79;
    font-size: 10px;
}

.jurisdiction-list {
    display: grid;
}

.jurisdiction-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
}

.jurisdiction-row:last-child {
    border-bottom: 0;
}

.jurisdiction-row h4 {
    margin: 0;
    color: #e3e7ec;
    font-size: 12px;
}

.jurisdiction-row p {
    margin: 5px 0 0;
    color: #737d8b;
    font-size: 10px;
}

.jurisdiction-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.jurisdiction-row-actions button,
.boundary-tools button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #171b22;
    color: #d3d8df;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.jurisdiction-row-actions button:hover,
.boundary-tools button:hover:not(:disabled) {
    background: #222a35;
}

.jurisdiction-row-actions .jurisdiction-delete {
    color: #ff8585;
}

.jurisdiction-row .boundary-missing {
    color: #e4b15b;
}

.jurisdiction-alerts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 500;
    display: grid;
    width: min(380px, calc(100vw - 32px));
    gap: 8px;
    pointer-events: none;
}

.jurisdiction-alerts[hidden],
.boundary-tools[hidden] {
    display: none;
}

.jurisdiction-alert {
    padding: 12px 14px;
    border: 1px solid rgba(255,125,90,.4);
    border-radius: 8px;
    background: #211814;
    color: #ffd4bf;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    font-size: 11px;
}

.jurisdiction-alert strong {
    display: block;
    margin-bottom: 4px;
    color: #ff9e79;
}

.boundary-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.boundary-tools span {
    max-width: 180px;
    color: #a9b3c1;
    font-size: 9px;
}

.boundary-tools button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.map-viewport.is-drawing {
    cursor: crosshair;
}

.erlc-jurisdiction-shapes {
    position: absolute;
    inset: 0;
    width: 2048px;
    height: 2048px;
    overflow: visible;
    pointer-events: none;
    z-index: 40;
}

@media (max-width: 800px) {
    .calls-layout {
        grid-template-columns: 1fr;
    }

    .call-controls {
        flex-wrap: wrap;
    }

    .call-controls label,
    .call-controls .call-unit-field {
        flex: 1 1 130px;
    }

    .jurisdiction-form-fields {
        grid-template-columns: 1fr 1fr;
    }

    .boundary-tools {
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .jurisdiction-form-fields {
        grid-template-columns: 1fr;
    }

    .jurisdiction-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .jurisdiction-row-actions {
        width: 100%;
    }
}

@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .content-grid {
        grid-template-columns:
            1fr;
    }

    .players-header,
    .player-row {
        grid-template-columns:
            2fr
            1fr
            1.2fr
            1.5fr;
    }

    .players-header div:last-child,
    .player-wanted {
        display: none;
    }

}

@media (max-width: 800px) {

    .sidebar {
        width: 210px;
        min-width: 210px;
    }

    .page {
        padding:
            22px 18px 40px;
    }

    .topbar {
        padding:
            0 18px;
    }

    .map-viewport {
        height: 550px;
    }

}

@media (max-width: 650px) {

    body {
        overflow: auto;
    }

    .app {
        height: auto;

        min-height: 100vh;
    }

    .sidebar {
        display: none;
    }

    .main {
        height: auto;

        min-height: 100vh;
    }

    .mobile-brand {
        display: block;

        margin-bottom: 3px;

        color: #6f8cff;

        font-size: 9px;
        font-weight: 700;
    }

    .topbar {
        height: 70px;
    }

    .page-heading h1 {
        font-size: 15px;
    }

    .stats-grid {
        grid-template-columns:
            1fr;
    }

    .page-intro {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

    .players-header {
        display: none;
    }

    .player-row {
        grid-template-columns:
            1fr 1fr;

        gap: 12px;
    }

    .player-permission {
        display: none;
    }

    .player-location {
        text-align: right;
    }

    .settings-grid {
        grid-template-columns:
            1fr;
    }

    .map-footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        padding:
            12px 18px;
    }

    .map-legend {
        flex-wrap: wrap;
    }

}

.erlc-marker-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
}

.map-player-marker {
    position: absolute;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid #fff;
    background: #4f8cff;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .55);
    pointer-events: auto;
    cursor: pointer;
    z-index: 100;
}

.map-player-marker.you {
    width: 22px;
    height: 22px;
    background: #fff;
    border-color: #111827;
    box-shadow:
        0 0 0 5px rgba(255,255,255,.3),
        0 4px 18px rgba(0,0,0,.6);
}

.map-player-marker.selected {
    width: 25px;
    height: 25px;
    box-shadow:
        0 0 0 6px rgba(79,140,255,.3),
        0 5px 20px rgba(0,0,0,.65);
}

/* Public landing page */
.commandly-home {
    --home-bg: #090d12;
    --home-panel: #101720;
    --home-border: rgba(173, 194, 219, .12);
    --home-text: #f1f5f9;
    --home-muted: #98a7b9;
    --home-blue: #3884ff;
    --home-mint: #4ad6b0;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--home-bg);
    color: var(--home-text);
    font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
    font-size: 14px;
}

.commandly-home a { color: inherit; }
.commandly-home button { color: inherit; }
.content-width { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.site-header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 max(32px, calc((100vw - 1120px) / 2)); border-bottom: 1px solid rgba(173, 194, 219, .1); background: rgba(9, 13, 18, .94); }
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: #f5f7fb; font-size: 14px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 29px; height: 29px; display: inline-grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(84, 137, 255, .36); border-radius: 8px; background: linear-gradient(145deg, #172944, #101927); color: #a9c6ff; font-size: 12px; font-weight: 800; }
.site-nav { display: flex; align-items: center; gap: 30px; height: 66px; }
.site-nav a { position: relative; display: inline-flex; align-items: center; height: 100%; color: #a7b2c0; font-size: 11px; text-decoration: none; transition: color .18s ease; }
.site-nav a:hover, .site-nav a.is-active { color: #6fa3ff; }
.site-nav a.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--home-blue); content: ""; }
.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 700; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: linear-gradient(120deg, #337bfa, #2868e7); box-shadow: 0 8px 24px rgba(40, 104, 231, .2); color: white !important; }
.button-primary:hover { background: #4389ff; }
.button-small { min-height: 34px; padding-inline: 13px; font-size: 10px; }
.roblox-glyph { position: relative; width: 12px; height: 12px; display: inline-block; transform: rotate(12deg); background: currentColor; }
.roblox-glyph::after { position: absolute; top: 4px; left: 4px; width: 4px; height: 4px; background: #3278f3; content: ""; }
.button-arrow { margin-left: 2px; font-size: 16px; font-weight: 400; }
.hero-section { min-height: 505px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 42px; padding-block: 66px 70px; }
.hero-copy { position: relative; z-index: 1; animation: home-arrive .6s both; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 15px; color: #92a8c1; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-line { width: 18px; height: 1px; background: #5796ff; }
.hero-copy h1 { margin: 0; font-size: clamp(42px, 5vw, 62px); font-weight: 760; line-height: .99; letter-spacing: -.025em; }
.hero-copy h1 span { color: #a7bfdc; }
.hero-description { max-width: 410px; margin: 22px 0 0; color: #a3b0bf; font-size: 13px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 21px; margin-top: 25px; }
.text-link { color: #c0ccda !important; font-size: 11px; text-decoration: none; }
.text-link span { margin-left: 4px; color: #68a1ff; }
.hero-proof { display: flex; align-items: center; gap: 8px; margin-top: 17px; color: #8090a2; font-size: 9px; }
.status-pulse, .preview-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--home-mint); box-shadow: 0 0 10px rgba(74, 214, 176, .6); }
.proof-divider { height: 12px; margin-inline: 4px; border-left: 1px solid var(--home-border); }
.dashboard-preview { overflow: hidden; border: 1px solid rgba(146, 172, 205, .22); border-radius: 9px; background: #0c121a; box-shadow: 0 30px 80px rgba(0, 0, 0, .4), 0 0 50px rgba(40, 104, 231, .08); transform: perspective(1200px) rotateY(-4deg) rotateX(1deg); animation: preview-arrive .8s .12s both; }
.preview-window-bar { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--home-border); color: #77899e; font-size: 7px; font-weight: 700; letter-spacing: .09em; }
.window-dots { display: flex; gap: 4px; }.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #f16e6e; }.window-dots i:nth-child(2) { background: #e9b45c; }.window-dots i:nth-child(3) { background: #52c797; }
.preview-live { display: flex; align-items: center; gap: 5px; color: #9db0c4; font-size: 7px; }.preview-live i { width: 5px; height: 5px; }
/* Hero preview: a scaled copy of the real dashboard overview */
.hp-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 330px; background: #090e14; }
.hp-sidebar { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid rgba(147, 171, 199, .14); background: #0b1118; }
.hp-brand { display: flex; align-items: center; gap: 7px; margin: 0 3px 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(147, 171, 199, .1); }
.hp-brand img { width: 20px; height: 20px; border: 1px solid rgba(66, 139, 255, .22); border-radius: 5px; }
.hp-brand b, .hp-server b { display: block; color: #f3f6fa; font-size: 9px; font-weight: 700; }
.hp-brand small { display: block; margin-top: 2px; color: #6f7f92; font-size: 5.5px; font-weight: 600; letter-spacing: .09em; }
.hp-server { display: flex; align-items: center; gap: 6px; margin: 0 2px 8px; padding: 6px; border: 1px solid rgba(147, 171, 199, .13); border-radius: 5px; background: #101923; }
.hp-server > i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #25d99b; box-shadow: 0 0 6px rgba(37, 217, 155, .6); }
.hp-server b { font-size: 7.5px; }
.hp-server small { display: block; margin-top: 2px; color: #75869a; font-size: 6px; }
.hp-section { padding: 4px 6px 3px; color: #718196; font-size: 5.5px; font-weight: 700; letter-spacing: .08em; }
.hp-nav { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 4px; color: #a4b1c0; font-size: 7.5px; }
.hp-nav svg { width: 11px; height: 11px; flex: 0 0 auto; color: #91a3b8; }
.hp-nav.is-active { background: #142a47; color: #7eb2ff; box-shadow: inset 2px 0 #428bff; }
.hp-nav.is-active svg { color: #78adff; }
.hp-nav em { margin-left: auto; padding: 1px 5px; border-radius: 3px; background: rgba(147, 171, 199, .1); color: #a8b8ca; font-size: 6px; font-style: normal; }
.hp-nav em.is-alert { background: rgba(229, 72, 77, .16); color: #ff8e91; }
.hp-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.hp-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hp-heading b { display: block; color: #edf3fa; font-size: 12px; font-weight: 700; }
.hp-heading small { display: block; margin-top: 3px; color: #8193a6; font-size: 6.5px; }
.hp-tag { padding: 3px 6px; border: 1px solid rgba(147, 171, 199, .15); border-radius: 3px; color: #8ea3b9; font-size: 5.5px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.hp-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hp-metrics > div { min-width: 0; display: flex; align-items: flex-start; gap: 5px; padding: 6px; border: 1px solid rgba(147, 171, 199, .13); border-radius: 5px; background: #0f1720; }
.hp-metrics span { min-width: 0; display: grid; gap: 2px; }
.hp-metrics small, .hp-metrics em { overflow: hidden; color: #8898aa; font-size: 5.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.hp-metrics b { overflow: hidden; color: #f0f5fa; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hp-metrics b.is-online { color: #36dfa8; }
.hp-icon { width: 15px; height: 15px; flex: 0 0 auto; padding: 3px; border-radius: 4px; }
.hp-icon.blue { background: #142846; color: #6fa8ff; }
.hp-icon.coral { background: rgba(229, 72, 77, .14); color: #ff8a8d; }
.hp-icon.gold { background: rgba(244, 187, 80, .14); color: #f2c465; }
.hp-icon.mint { background: rgba(37, 217, 155, .11); color: #36dfa8; }
.hp-grid { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 6px; }
.hp-panel { min-width: 0; overflow: hidden; border: 1px solid rgba(147, 171, 199, .13); border-radius: 5px; background: #0f1720; }
.hp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 7px; }
.hp-panel-head small { display: block; color: #718196; font-size: 5px; font-weight: 700; letter-spacing: .1em; }
.hp-panel-head b { color: #e4ebf4; font-size: 7.5px; }
.hp-panel-head em { color: #78aaff; font-size: 6px; font-style: normal; }
.hp-subhead { margin-top: 2px; border-top: 1px solid rgba(147, 171, 199, .08); }
.hp-map { position: relative; aspect-ratio: 1.45; overflow: hidden; margin: 0 6px 6px; border-radius: 4px; background: #0b1118; }
.hp-map img { position: absolute; top: 50%; left: 50%; width: 118%; height: auto; transform: translate(-50%, -52%); opacity: .92; }
.hp-zone { position: absolute; border: 1px solid rgba(79, 140, 255, .8); background: rgba(79, 140, 255, .14); }
.hp-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border: 1px solid #0b1118; border-radius: 50%; background: #4f8cff; box-shadow: 0 0 0 2px rgba(79, 140, 255, .25); }
.hp-dot.you { background: #25d99b; box-shadow: 0 0 0 2px rgba(37, 217, 155, .3); }
.hp-dot.call { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .3); animation: hp-ping 1.6s ease-out infinite; }
@keyframes hp-ping { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 100% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } }
.hp-call { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-top: 1px solid rgba(147, 171, 199, .08); }
.hp-call > i { width: 14px; height: 14px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 3px; background: rgba(229, 72, 77, .14); color: #ff8a8d; font-size: 8px; font-style: normal; font-weight: 800; }
.hp-call span { min-width: 0; flex: 1; }
.hp-call b, .hp-call small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-call b { color: #dce6f0; font-size: 6.5px; font-weight: 600; }
.hp-call small { margin-top: 2px; color: #8395a8; font-size: 5.5px; }
.hp-call time { color: #8193a6; font-size: 5.5px; }
.hp-bolo { display: flex; align-items: center; gap: 5px; margin: 0 6px 6px; padding: 5px 6px; border-radius: 3px; background: #b3262b; color: white; font-size: 5.5px; }
.hp-bolo strong { padding: 1px 4px; border-radius: 2px; background: white; color: #b3262b; font-size: 6px; letter-spacing: .08em; }
.hp-bolo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-plate { padding: 1px 4px; border: 1px solid #28303b; border-radius: 2px; background: #fbfbf7; color: #0d1a2b; font-family: ui-monospace, Consolas, monospace; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.feature-icon svg { width: 16px; height: 16px; }
.feature-grid .feature-item:nth-child(4n + 1) { border-left: 1px solid var(--home-border); }
.feature-grid .feature-item:nth-child(n + 5) { border-top: 1px solid var(--home-border); }
@media (prefers-reduced-motion: reduce) { .hp-dot.call { animation: none; } }
.preview-caption { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-top: 1px solid var(--home-border); color: #9babbc; font-size: 8px; }.caption-spark { color: #73a5ff; font-size: 13px; }
.section-rule { border-top: 1px solid rgba(173, 194, 219, .1); }.features-section { padding: 58px 0 64px; background: #0b1016; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }.section-heading .eyebrow, .community-section .eyebrow, .pricing-heading .eyebrow, .faq-inner .eyebrow { margin-bottom: 10px; }.section-heading h2, .pricing-heading h2, .faq-inner h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }.section-heading > p { max-width: 340px; margin: 0 0 2px; color: var(--home-muted); font-size: 11px; line-height: 1.7; }.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--home-border); border-bottom: 1px solid var(--home-border); }.feature-item { position: relative; min-height: 170px; padding: 21px 20px; border-right: 1px solid var(--home-border); }.feature-item:first-child { border-left: 1px solid var(--home-border); }.feature-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; font-size: 15px; }.icon-blue { background: rgba(56, 132, 255, .15); color: #72a9ff; }.icon-coral { background: rgba(242, 109, 104, .13); color: #f2837c; }.icon-mint { background: rgba(74, 214, 176, .12); color: #61dabb; }.icon-gold { background: rgba(244, 187, 80, .13); color: #f2c465; }.feature-item h3 { margin: 14px 0 6px; font-size: 12px; }.feature-item p { max-width: 210px; margin: 0; color: #8e9cad; font-size: 10px; line-height: 1.65; }.feature-index { position: absolute; top: 22px; right: 18px; color: #506073; font-size: 9px; }
.community-section { position: relative; overflow: hidden; padding: 56px 0; background: linear-gradient(105deg, #101a25, #101720 62%, #18222a); }.community-section::after { position: absolute; top: -110px; right: 7%; width: 330px; height: 330px; border: 1px solid rgba(119, 160, 210, .1); border-radius: 50%; box-shadow: 0 0 0 34px rgba(119, 160, 210, .025), 0 0 0 69px rgba(119, 160, 210, .02); content: ""; pointer-events: none; }.community-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 35px; }.community-inner > div:first-child { max-width: 515px; }.community-inner h2 { margin: 0; font-size: 29px; line-height: 1.12; }.community-inner > div:first-child > p:not(.eyebrow) { max-width: 470px; margin: 13px 0 20px; color: #a3b0bf; font-size: 11px; line-height: 1.7; }.community-aside { width: 265px; padding: 13px 0 13px 23px; border-left: 1px solid rgba(173, 194, 219, .18); }.community-number { color: #e5edf6; font-size: 23px; font-weight: 700; }.community-number span { color: #77899d; font-size: 11px; font-weight: 500; }.community-rule { width: 46px; display: block; margin: 15px 0; border-top: 2px solid #5493ff; }.community-aside p { margin: 0; color: #a8b5c3; font-size: 10px; line-height: 1.7; }
.pricing-section { padding: 65px 0 62px; background: #0a0f15; }.pricing-heading { display: flex; flex-direction: column; align-items: center; text-align: center; }.pricing-heading h2 { font-size: 29px; }.pricing-heading > p:not(.eyebrow) { margin: 9px 0 18px; color: var(--home-muted); font-size: 11px; }.billing-switch { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid rgba(173, 194, 219, .1); border-radius: 7px; background: #121a24; }.billing-option { min-height: 33px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 5px; background: transparent; color: #a1afbf; font: inherit; font-size: 10px; cursor: pointer; transition: background .2s ease, color .2s ease; }.billing-option:hover { color: white; }.billing-option.is-selected { background: #347af1; color: white; box-shadow: 0 3px 10px rgba(52, 122, 241, .28); }.lifetime-tag { padding: 3px 5px; border-radius: 3px; background: rgba(74, 214, 176, .18); color: #67dfbd; font-size: 7px; font-weight: 700; }.billing-option.is-selected .lifetime-tag { background: rgba(255,255,255,.18); color: white; }.pricing-grid { width: min(630px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px auto 0; align-items: stretch; }.price-card { position: relative; padding: 23px 23px 20px; border: 1px solid var(--home-border); border-radius: 7px; background: linear-gradient(145deg, #111a24, #0e151d); }.pro-card { border-color: rgba(61, 133, 255, .8); box-shadow: 0 0 0 1px rgba(61, 133, 255, .08), 0 15px 45px rgba(22, 74, 161, .12); }.plan-symbol { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; font-size: 12px; }.free-symbol { background: rgba(56, 132, 255, .15); color: #70a5ff; }.pro-symbol { background: rgba(244, 187, 80, .14); color: #f2c465; }.plan-label { margin: 15px 0 5px; color: #8092a7; font-size: 8px; font-weight: 700; letter-spacing: .13em; }.price-card h3 { margin: 0; font-size: 18px; }.plan-description { min-height: 32px; margin: 6px 0 15px; color: #a3b0bf; font-size: 10px; line-height: 1.55; }.price-line { min-height: 40px; display: flex; align-items: baseline; gap: 7px; margin-bottom: 12px; }.price-amount { color: #f3f6fa; font-size: 32px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }.price-unit { color: #b6c1cf; font-size: 10px; }.price-unit small { display: block; margin-top: 2px; color: #8190a1; font-size: 8px; }.price-card > .button { width: 100%; }.button-outline { border-color: rgba(157, 178, 205, .28); background: rgba(255,255,255,.015); color: #e3eaf3 !important; }.button-outline:hover { border-color: #6f9fe9; background: rgba(77, 132, 213, .1); }.plan-features { display: grid; gap: 9px; margin: 17px 0 0; padding: 15px 0 0; border-top: 1px solid var(--home-border); list-style: none; }.plan-features li { position: relative; padding-left: 17px; color: #aab6c4; font-size: 9px; line-height: 1.45; }.plan-features li::before { position: absolute; left: 0; color: var(--home-mint); content: "✓"; font-size: 11px; font-weight: 700; }.free-card .plan-features li::before { color: #70a5ff; }.popular-badge { position: absolute; top: 20px; right: 19px; padding: 5px 7px; border-radius: 4px; background: rgba(52, 122, 241, .17); color: #8bb7ff; font-size: 7px; font-weight: 700; letter-spacing: .06em; }.pricing-note { margin: 15px auto 0; color: #718195; font-size: 9px; text-align: center; }.pricing-note span { margin-right: 4px; color: #8fa1b5; }
.faq-section { padding: 52px 0 58px; background: #0b1016; }.faq-inner { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; }.faq-inner h2 { font-size: 26px; }.faq-list details { border-bottom: 1px solid var(--home-border); }.faq-list details:first-child { border-top: 1px solid var(--home-border); }.faq-list summary { position: relative; padding: 15px 28px 15px 0; color: #e3eaf2; font-size: 11px; font-weight: 650; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { position: absolute; right: 3px; color: #79aaff; content: "+"; font-size: 17px; font-weight: 400; }.faq-list details[open] summary::after { content: "−"; }.faq-list details p { max-width: 580px; margin: -3px 0 15px; color: #97a6b6; font-size: 10px; line-height: 1.7; }
.site-footer { border-top: 1px solid var(--home-border); background: #090d12; }.footer-inner { min-height: 74px; display: flex; align-items: center; gap: 20px; }.footer-brand { font-size: 11px; }.footer-brand .brand-mark { width: 24px; height: 24px; border-radius: 6px; font-size: 10px; }.footer-copy { flex: 1; color: #758497; font-size: 9px; }.footer-inner nav { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }.footer-inner nav a, .footer-inner nav button { padding: 0; border: 0; background: transparent; color: #8796a8; font: inherit; font-size: 9px; text-decoration: none; cursor: pointer; }.footer-inner nav a:hover, .footer-inner nav button:hover { color: #dce6f2; }
.commandly-home .cookie-banner { position: fixed; z-index: 1000; right: 20px; bottom: 20px; left: 20px; width: min(720px, calc(100% - 40px)); margin-inline: auto; }
.commandly-home .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.price-amount[data-price-amount] { min-width: 3.1em; white-space: nowrap; }

/* Dashboard overview */
.app {
    width: 100%;
    --background: #090e14;
    --sidebar: #0b1118;
    --panel: #0f1720;
    --panel-hover: #141f2b;
    --border: rgba(147, 171, 199, .13);
    --accent: #428bff;
    --success: #25d99b;
}

.app .sidebar {
    width: 232px;
    min-width: 232px;
    padding: 14px 11px 12px;
    border-right-color: rgba(147, 171, 199, .14);
}

.app .brand {
    gap: 10px;
    margin: 0 -11px 16px;
    padding: 2px 17px 14px;
    border-bottom: 1px solid rgba(147, 171, 199, .1);
}

.app .brand-icon {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(66, 139, 255, .22);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.app .brand-name {
    color: #f3f6fa;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.app .brand-subtitle {
    margin-top: 3px;
    color: #6f7f92;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.app .server-selector { padding: 0 3px 18px; }
.app .server-label { color: #75869a; font-size: 9px; }
.app .server-select { min-height: 51px; border-radius: 7px; background: #101923; }
.app .server-select:hover, .app .server-select[aria-expanded="true"] { border-color: rgba(66, 139, 255, .44); background: #131f2c; }
.app .navigation { gap: 4px; }
.app .nav-section-title { padding: 9px 10px 6px; color: #718196; font-size: 9px; }
.app .nav-section-title.second { margin-top: 14px; }
.app .nav-item { min-height: 38px; gap: 11px; padding: 9px 10px; border-radius: 6px; color: #a4b1c0; font-size: 11px; }
.app .nav-item:hover { background: rgba(123, 164, 214, .08); color: #e5eef8; }
.app .nav-item.active { background: #142a47; color: #7eb2ff; box-shadow: inset 2px 0 #428bff; }
.app .nav-icon { width: 19px; height: 19px; flex: 0 0 19px; color: #91a3b8; stroke-width: 1.9; }
.app .nav-item.active .nav-icon { color: #78adff; }
.app .nav-count { background: rgba(147, 171, 199, .1); color: #a8b8ca; }
.app .sidebar-bottom .connection-card { margin-bottom: 10px; border-radius: 7px; background: #101923; }
.app .account-card { min-height: 54px; border: 1px solid var(--border); border-radius: 7px; background: #101923; }

.app .main { background: #090e14; }
.app .topbar { height: 58px; padding-inline: 25px; background: rgba(9, 14, 20, .94); border-bottom-color: rgba(147, 171, 199, .12); }
.app .page-heading h1 { font-size: 14px; }
.app .page-heading p { color: #8a9aab; font-size: 9px; }
.app .topbar-actions { gap: 13px; }
.app .topbar-legal-link { color: #9baabc; }
.app .live-status { color: #a5b3c2; }
.app .refresh-button { width: 30px; height: 30px; border-radius: 6px; background: #101923; }
.app .page { max-width: 1600px; padding: 21px 25px 38px; }
.app .page.active[data-page-content="overview"] { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr); align-content: start; gap: 12px; }
.app .page.active[data-page-content="overview"] > .page-intro,
.app .page.active[data-page-content="overview"] > .stats-grid { grid-column: 1 / -1; }
.app .overview-grid { display: contents; }
.app .page-intro { align-items: flex-end; margin-bottom: 2px; }
.app [data-page-content="map"] > .page-intro { margin-bottom: 18px; }
.app .page-intro h2 { font-size: 20px; }
.app .page-intro p { color: #98a8b8; font-size: 10px; }
.app .last-updated { border: 0; color: #bdc8d3; font-size: 9px; }

.app .stats-grid { gap: 11px; overflow: visible; margin-bottom: 0; border: 0; border-radius: 0; background: transparent; }
.app .stat-card { min-height: 98px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 7px; background: #0f1720; transition: border-color .18s ease, background .18s ease; }
.app .stat-card:hover { border-color: rgba(95, 151, 225, .36); background: #111b26; }
.app .stat-card-header { color: #8494a7; font-size: 8px; }
.app .stat-icon { width: 30px; height: 30px; border-radius: 7px; background: #142846; color: #6fa8ff; }
.app .stat-icon.success { background: rgba(37, 217, 155, .11); color: #36dfa8; }
.app .stat-value { margin-top: 11px; font-size: 21px; }
.app .status-value { color: #2ddba1; }
.app .stat-description { color: #94a2b2; font-size: 8px; }

.app .content-grid { display: contents; }
.app .panel { border-color: var(--border); border-radius: 8px; background: #0f1720; }
.app .panel-header { min-height: 62px; padding: 13px 15px; }
.app .panel-header h3 { color: #e7edf4; font-size: 12px; }
.app .panel-header p { color: #91a0b0; font-size: 9px; }
.app .panel-live { border: 1px solid rgba(37, 217, 155, .17); background: rgba(37, 217, 155, .08); color: #4bdfae; }
.app .info-item { padding: 13px 15px; border-color: rgba(147, 171, 199, .1); }
.app .info-item span { color: #94a3b3; font-size: 9px; }
.app .info-item strong { color: #e0e8f0; font-size: 10px; }
.app .profile-panel { min-height: 100px; padding: 15px; }
.app .profile-avatar { width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 8px; }
.app .profile-details strong { color: #e8eef5; font-size: 12px; }
.app .profile-details > span { color: #9baabc; }
.app .profile-details small { color: #8192a4; }
.app .map-preview-panel { margin-top: 0; }
.app .mini-map { height: 250px; background: #090f13; }
.app .mini-map img { object-fit: cover; }
.app .panel-link { color: #78adff; font-size: 9px; }
.app .panel-link:hover { color: #b4d3ff; }
.app .quick-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 11px; }
.app .quick-action { min-width: 0; min-height: 47px; display: grid; grid-template-columns: 25px minmax(0, 1fr) 10px; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid rgba(147, 171, 199, .11); border-radius: 6px; background: #111b26; color: #e0e8f1; text-align: left; font: inherit; font-size: 9px; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.app .quick-action:hover { border-color: rgba(66, 139, 255, .45); background: #142338; }
.app .quick-action:focus-visible { outline: 2px solid #6da7ff; outline-offset: 2px; }
.app .quick-action-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 5px; background: #172b48; color: #75aaff; font-size: 13px; }
.app .quick-action:nth-child(2) .quick-action-icon { background: rgba(37, 217, 155, .11); color: #4cddb0; }
.app .quick-action:nth-child(3) .quick-action-icon { background: rgba(245, 126, 110, .11); color: #f08d7d; }
.app .quick-action > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .quick-action small { display: block; overflow: hidden; margin-top: 3px; color: #93a2b2; font-size: 7px; font-weight: 400; text-overflow: ellipsis; }
.app .quick-action-arrow { color: #8093a9; font-size: 16px; text-align: right; }

@media (max-width: 1100px) {
    .app .sidebar { width: 208px; min-width: 208px; }
    .app .page.active[data-page-content="overview"] { grid-template-columns: minmax(0, 1fr); }
    .app .page.active[data-page-content="overview"] > .page-intro,
    .app .page.active[data-page-content="overview"] > .stats-grid { grid-column: 1; }
    .app .quick-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .app .sidebar { display: none; }
    .app .topbar { height: 62px; padding-inline: 16px; }
    .app .page { padding: 20px 15px 30px; }
    .app .page.active[data-page-content="overview"] { gap: 10px; }
    .app .page-intro { align-items: flex-start; }
    .app .last-updated { padding-right: 0; font-size: 7px; }
    .app .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .app .stat-card { min-height: 88px; padding: 11px; }
    .app .stat-value { font-size: 19px; }
    .app .quick-actions-grid { gap: 6px; padding: 9px; }
    .app .quick-action { grid-template-columns: 22px minmax(0, 1fr) 8px; gap: 5px; padding-inline: 6px; font-size: 8px; }
    .app .quick-action-icon { width: 22px; height: 22px; }
    .app .mini-map { height: 210px; }
}
.app .quick-actions-grid { grid-template-columns: minmax(0, 1fr); }

.app .audit-panel { overflow: hidden; }
.app .audit-filters { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(140px, 1fr)); gap: 11px; padding: 14px; border-bottom: 1px solid var(--border); background: #0c131b; }
.app .audit-filters label { min-width: 0; display: grid; align-content: start; gap: 6px; color: #a3b1c0; font-size: 9px; font-weight: 650; }
.app .audit-filters input, .app .audit-filters select { width: 100%; min-width: 0; height: 35px; padding: 0 10px; border: 1px solid rgba(147, 171, 199, .16); border-radius: 5px; outline: 0; background: #111b26; color: #e5edf5; font: inherit; font-size: 10px; }
.app .audit-filters input::placeholder { color: #738397; }
.app .audit-filters input:focus, .app .audit-filters select:focus { border-color: rgba(66, 139, 255, .7); box-shadow: 0 0 0 2px rgba(66, 139, 255, .12); }
.app .audit-table-wrap { overflow-x: auto; }
.app .audit-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
.app .audit-table th { height: 36px; padding: 0 13px; background: #111a24; color: #93a4b7; font-size: 8px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.app .audit-table td { padding: 11px 13px; border-top: 1px solid rgba(147, 171, 199, .09); color: #d2dce7; font-size: 9px; vertical-align: middle; }
.app .audit-table tbody tr:hover { background: rgba(105, 151, 207, .045); }
.app .audit-table time { color: #9eacbb; white-space: nowrap; }
.app .audit-source { display: inline-flex; padding: 4px 6px; border: 1px solid rgba(147, 171, 199, .14); border-radius: 4px; background: rgba(147, 171, 199, .06); color: #bdc8d4; font-size: 8px; white-space: nowrap; }
.app .audit-source.game { border-color: rgba(66, 139, 255, .2); background: rgba(66, 139, 255, .1); color: #86b7ff; }
.app .audit-source.website { border-color: rgba(74, 214, 176, .2); background: rgba(74, 214, 176, .08); color: #68d9b8; }
.app .audit-event-type { color: #e5edf5; font-weight: 650; white-space: nowrap; }
.app .audit-actor, .app .audit-summary { display: block; color: #d8e2ed; }
.app .audit-roblox-id, .app .audit-metadata { display: block; margin-top: 3px; color: #8293a6; font-size: 8px; }
.app .audit-summary { min-width: 220px; }
.app .audit-empty { height: 96px; color: #91a1b2 !important; text-align: center; }
.app .audit-footer { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border); color: #8c9bad; font-size: 9px; }
.app .audit-footer .secondary-button { min-height: 30px; padding: 0 11px; font-size: 9px; }

@media (max-width: 900px) {
    .app .audit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app .audit-search { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
    .app .audit-filters { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 11px; }
    .app .audit-search { grid-column: 1; }
    .app .audit-footer { align-items: flex-start; flex-direction: column; }
}
@keyframes home-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes preview-arrive { from { opacity: 0; transform: perspective(1200px) rotateY(-4deg) translateY(14px); } to { opacity: 1; transform: perspective(1200px) rotateY(-4deg) rotateX(1deg); } }
@media (max-width: 900px) {
    .content-width { width: min(100% - 44px, 720px); }
    .site-header { padding-inline: 22px; }
    .site-nav { gap: 18px; }
    .hero-section { grid-template-columns: 1fr; gap: 34px; padding-block: 55px; }
    .hero-copy { max-width: 600px; }
    .dashboard-preview { width: min(100%, 630px); justify-self: center; }
    .community-inner { max-width: 720px; }
}
@media (max-width: 600px) {
    .content-width { width: calc(100% - 36px); }
    .site-header { min-height: 60px; gap: 10px; padding-inline: 17px; }
    .site-brand { gap: 7px; font-size: 12px; }.brand-mark { width: 27px; height: 27px; }
    .site-nav { height: 60px; gap: 13px; }.site-nav a { font-size: 9px; }.site-nav a:first-child, .site-nav a:last-child { display: none; }
    .header-cta { min-height: 32px; gap: 7px; padding-inline: 9px; font-size: 8px; }.header-cta .roblox-glyph { width: 10px; height: 10px; }.header-cta .roblox-glyph::after { top: 3px; left: 3px; width: 4px; height: 4px; }
    .hero-section { gap: 30px; padding-block: 46px 42px; }.hero-copy h1 { font-size: clamp(40px, 12vw, 53px); }.hero-description { max-width: 440px; font-size: 12px; }.hero-actions { gap: 15px; }.hero-actions .button { min-height: 41px; padding-inline: 12px; font-size: 10px; }.hero-proof { flex-wrap: wrap; font-size: 8px; }
    .dashboard-preview { transform: none; }
    .hp-layout { grid-template-columns: 1fr; min-height: 0; }
    .hp-sidebar { display: none; }
    .hp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-grid { grid-template-columns: 1fr; }
    .feature-grid .feature-item:nth-child(4n + 1) { border-left: 0; }
    .feature-grid .feature-item:nth-child(2n + 1) { border-left: 1px solid var(--home-border); }
    .feature-grid .feature-item:nth-child(n + 3) { border-top: 1px solid var(--home-border); }
    .features-section, .pricing-section { padding-block: 44px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.section-heading h2, .pricing-heading h2 { font-size: 23px; }.section-heading > p { max-width: 450px; }.feature-grid { grid-template-columns: repeat(2, 1fr); }.feature-item { min-height: 155px; padding: 17px 13px; }.feature-item:nth-child(3) { border-left: 1px solid var(--home-border); }.feature-item:nth-child(n+3) { border-top: 1px solid var(--home-border); }.feature-item h3 { font-size: 11px; }.feature-item p { font-size: 9px; }.feature-index { right: 12px; }
    .community-section { padding-block: 43px; }.community-inner { align-items: flex-start; flex-direction: column; gap: 25px; }.community-inner h2 { font-size: 25px; }.community-aside { width: 100%; padding: 0; border: 0; }.community-rule { margin-block: 9px; }
    .pricing-heading h2 { max-width: 340px; }.pricing-heading > p:not(.eyebrow) { max-width: 300px; line-height: 1.6; }.pricing-grid { grid-template-columns: 1fr; max-width: 370px; gap: 12px; margin-top: 19px; }.price-card { padding: 19px; }.plan-description { min-height: 0; }.pricing-note { max-width: 360px; line-height: 1.6; }
    .faq-section { padding-block: 42px; }.faq-inner { grid-template-columns: 1fr; gap: 20px; }.faq-inner h2 { font-size: 23px; }
    .footer-inner { align-items: flex-start; flex-wrap: wrap; gap: 10px 16px; padding-block: 17px; }.footer-copy { flex: 1 1 calc(100% - 120px); align-self: center; }.footer-inner nav { width: 100%; gap: 13px; }
    .commandly-home .cookie-banner { right: 10px; bottom: 10px; left: 10px; width: calc(100% - 20px); }
}
@media (max-width: 380px) {
    .site-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .commandly-home *, .commandly-home *::before, .commandly-home *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.marker-label {
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(15,23,42,.95);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    pointer-events: none;
    white-space: nowrap;
}

.map-player-popup {
    position: absolute;
    left: 25px;
    top: -15px;
    width: 250px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(15,23,42,.98);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    box-shadow: 0 18px 45px rgba(0,0,0,.5);
    z-index: 200;
    pointer-events: auto;
}

.popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.popup-close {
    border: 0;
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.popup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.popup-item {
    padding: 7px;
    border-radius: 7px;
    background: rgba(255,255,255,.05);
}

.popup-key {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 2px;
}

.popup-value {
    display: block;
    font-size: 11px;
    font-weight: 700;
    word-break: break-word;
}

.player-row.is-selected,
.player-card.is-selected {
    outline: 2px solid rgba(79,140,255,.45);
    outline-offset: -2px;
}

.login-legal-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
}

.login-legal-links a,
.login-legal-links button,
.sidebar-legal-link,
.legal-footer button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #8994a3;
    font: inherit;
    font-size: 10px;
    text-decoration: none;
    cursor: pointer;
}

.login-legal-links a:hover,
.login-legal-links button:hover,
.sidebar-legal-link:hover,
.legal-footer button:hover {
    color: #cbd4e0;
}

.sidebar-legal-link {
    align-self: flex-start;
    margin: 0 0 8px 7px;
    text-align: left;
}

.cookie-banner {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    width: min(760px, calc(100vw - 36px));
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    background: #141922;
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner-copy h2 {
    margin: 0;
    color: #eef1f5;
    font-size: 13px;
}

.cookie-banner-copy p {
    max-width: 520px;
    margin: 6px 0;
    color: #a3adbb;
    font-size: 10px;
    line-height: 1.55;
}

.cookie-banner-copy a {
    color: #9db1ff;
    font-size: 10px;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.cookie-banner-actions button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    background: #1b222d;
    color: #dbe1e9;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.cookie-banner-actions [data-cookie-accept] {
    border-color: rgba(111,140,255,.5);
    background: #536bd0;
    color: #fff;
}

.cookie-banner-actions button:hover {
    filter: brightness(1.12);
}

.legal-body {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #0b0e13;
}

.legal-page {
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 30px 24px 60px;
}

.legal-back {
    color: #bac5d4;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.legal-header {
    margin: 30px 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.legal-eyebrow {
    margin: 0 0 8px;
    color: #91a6fa;
    font-size: 9px;
    font-weight: 700;
}

.legal-header h1 {
    margin: 0;
    color: #f0f2f5;
    font-size: 27px;
}

.legal-header > p:last-child {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 10px;
}

.legal-notice {
    margin-bottom: 22px;
    padding: 12px 14px;
    border-left: 3px solid #d8a44f;
    background: rgba(216,164,79,.08);
    color: #d9c49f;
    font-size: 10px;
    line-height: 1.6;
}

.legal-content section {
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

.legal-content h2 {
    margin: 0 0 9px;
    color: #e4e9f0;
    font-size: 14px;
}

.legal-content p {
    margin: 8px 0 0;
    color: #a2acba;
    font-size: 11px;
    line-height: 1.75;
}

.legal-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-top: 18px;
    color: var(--text-muted);
    font-size: 10px;
}

@media (max-width: 650px) {
    .cookie-banner {
        right: 10px;
        bottom: 10px;
        grid-template-columns: 1fr;
        gap: 12px;
        width: calc(100vw - 20px);
        padding: 15px;
    }

    .cookie-banner-actions {
        justify-content: stretch;
    }

    .cookie-banner-actions button {
        flex: 1 1 130px;
    }

    .legal-page {
        padding: 22px 18px 44px;
    }

    .legal-header h1 {
        font-size: 23px;
    }
}

.content-grid > .panel,
.map-preview-panel {
    border-radius: 8px;
}

.map-coordinate-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7b8593;
    font-size: 9px;
}

.map-coordinate-info strong {
    min-width: 72px;
    color: #9bb0ff;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
}

@media (max-width: 1100px) {
    .stat-card:nth-child(2) {
        border-right: 0;
    }

    .stat-card:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 650px) {
    .stat-card,
    .stat-card:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .stat-card:last-child {
        border-bottom: 0;
    }
}

.members-panel { overflow: visible; }
.members-table-scroll { width: 100%; overflow-x: hidden; }
.members-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; text-align: left; }
.members-table th:nth-child(1), .members-table td:nth-child(1) { width: 29%; }
.members-table th:nth-child(2), .members-table td:nth-child(2) { width: 16%; }
.members-table th:nth-child(3), .members-table td:nth-child(3) { width: 17%; }
.members-table th:nth-child(4), .members-table td:nth-child(4) { width: 14%; }
.members-table th:nth-child(5), .members-table td:nth-child(5) { width: 15%; }
.members-table th:nth-child(6), .members-table td:nth-child(6) { width: 9%; }
.members-table th { height: 42px; padding: 0 15px; border-bottom: 1px solid var(--border); background: #111a24; color: #91a2b5; font-size: 8px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.members-table th button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.members-table th button:hover { color: #dce9f8; }
.members-table td { height: 62px; padding: 8px 15px; overflow: hidden; border-bottom: 1px solid rgba(147, 171, 199, .09); color: #c5d0dd; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.members-table tbody tr:last-child td { border-bottom: 0; }
.members-table tbody tr:hover { background: rgba(105, 151, 207, .045); }
.member-table-empty { padding: 25px !important; color: #8d9daf !important; font-size: 10px !important; text-align: center; }
.member-identity-button { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.member-identity-copy, .banned-member-identity > span { min-width: 0; display: grid; gap: 4px; }
.member-identity-copy strong, .banned-member-identity strong { color: #e6edf5; font-size: 10px; font-weight: 650; }
.member-identity-copy small, .banned-member-identity small { color: #7f91a5; font-size: 8px; }
.member-avatar { position: relative; width: 34px; height: 34px; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(147, 171, 199, .17); border-radius: 7px; background: #182635; color: #b6d4f4; font-size: 11px; font-weight: 750; }
.member-avatar-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.member-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member-presence { display: inline-flex; align-items: center; gap: 7px; color: #9aa8b8; }
.member-presence i { width: 7px; height: 7px; border-radius: 50%; background: #68788a; }
.member-presence.is-online { color: #63d6ad; }
.member-presence.is-online i { background: #36d99e; box-shadow: 0 0 9px rgba(54, 217, 158, .4); }
.member-role-badge { display: inline-flex; padding: 4px 7px; border: 1px solid rgba(147, 171, 199, .15); border-radius: 4px; background: rgba(147, 171, 199, .07); color: #bac8d7; font-size: 8px; }
.member-role-badge.role-owner { border-color: rgba(239, 189, 95, .25); background: rgba(239, 189, 95, .08); color: #e9c678; }
.member-role-badge.role-staff { border-color: rgba(91, 166, 255, .23); background: rgba(91, 166, 255, .08); color: #8fbeff; }
.member-joined-date { color: #8e9eaf !important; font-size: 9px !important; }
.member-table-actions { width: 52px; text-align: right; }
.member-action-wrap { position: relative; display: flex; justify-content: flex-end; }
.member-more-button { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #aab8c8; font-size: 20px; line-height: 1; cursor: pointer; }
.member-more-button:hover, .member-more-button[aria-expanded="true"] { border-color: rgba(147, 171, 199, .17); background: #172332; color: #edf4fb; }
.member-action-menu { position: fixed; z-index: 100; width: 164px; padding: 5px; border: 1px solid rgba(147, 171, 199, .2); border-radius: 6px; background: #111a24; box-shadow: 0 12px 28px rgba(0, 0, 0, .42); }
.member-action-menu[hidden] { display: none; }
.member-action-menu button { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 4px; background: transparent; color: #d2deea; text-align: left; font: inherit; font-size: 9px; cursor: pointer; }
.member-action-menu button:hover { background: rgba(105, 151, 207, .1); }
.member-action-menu button.is-danger { color: #ff9a91; }
.members-banned-section { margin-top: 24px; }
.members-section-heading { margin-bottom: 10px; }
.members-section-heading h3 { margin: 0; color: #e1e9f1; font-size: 12px; }
.members-section-heading p { margin: 5px 0 0; color: #8798ab; font-size: 9px; }
.members-banned-list { overflow: hidden; }
.banned-member-row { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid rgba(147, 171, 199, .09); }
.banned-member-row:last-child { border-bottom: 0; }
.banned-member-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.unban-member-button { padding: 6px 9px; border: 1px solid rgba(147, 171, 199, .17); border-radius: 5px; background: #131e29; color: #cbd7e4; font: inherit; font-size: 9px; cursor: pointer; }
.unban-member-button:hover { border-color: rgba(66, 139, 255, .4); }
.members-status { min-height: 1em; margin: 9px 0 0; color: #8798ab; font-size: 9px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.member-profile-dialog { position: fixed; inset: 0 0 0 auto; box-sizing: border-box; width: min(900px, 100vw); max-width: none; height: min(100vh, 980px); max-height: 100vh; margin: 0; padding: 35px 38px 30px; overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(147, 171, 199, .2); border-radius: 10px 0 0 10px; background: #0c141d; color: #e5edf5; box-shadow: -20px 0 70px rgba(0, 0, 0, .3); }
.member-profile-dialog[open] { animation: member-panel-in .2s ease-out; }
.member-profile-dialog::backdrop { background: rgba(2, 6, 10, .68); backdrop-filter: blur(3px); }
.member-profile-close { position: absolute; z-index: 2; top: 16px; right: 16px; width: 34px; height: 34px; border: 1px solid rgba(147, 171, 199, .16); border-radius: 6px; background: #121e2a; color: #aebdcc; font-size: 20px; cursor: pointer; }
.member-profile-close:hover { color: white; background: #1a2938; }
.member-profile-heading { display: flex; align-items: center; gap: 18px; padding: 12px 0 27px; border-bottom: 1px solid rgba(147, 171, 199, .13); }
.member-avatar-large { width: 82px; height: 82px; border-radius: 10px; font-size: 24px; }
.member-profile-names { min-width: 0; flex: 1; }
.member-profile-eyebrow { color: #7baee9; font-size: 8px; font-weight: 750; }
.member-profile-names h2 { margin: 6px 0; color: #f0f5fa; font-size: 23px; font-weight: 650; }
.member-profile-names p { margin: 0; overflow-wrap: anywhere; color: #9aabba; font-size: 9px; }
.member-profile-names p span { margin: 0 4px; color: #596b7e; }
.member-profile-names p strong { color: #bbc9d8; font-weight: 500; }
.member-profile-copy { min-height: 32px; padding: 0 10px; border: 1px solid rgba(147, 171, 199, .18); border-radius: 5px; background: #131e29; color: #d4e2ef; font: inherit; font-size: 9px; cursor: pointer; }
.member-profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 19px 0; border-bottom: 1px solid rgba(147, 171, 199, .13); }
.member-profile-stats > div { min-height: 67px; display: grid; align-content: center; gap: 8px; padding: 11px 12px; border: 1px solid rgba(147, 171, 199, .11); border-radius: 6px; background: rgba(147, 171, 199, .035); }
.member-profile-stats span { color: #8799ab; font-size: 8px; }
.member-profile-stats strong { overflow: hidden; color: #e2eaf2; font-size: 11px; font-weight: 600; text-overflow: ellipsis; }
.member-profile-stats .profile-online { color: #65d9b0; }
.member-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; padding: 23px 0; border-bottom: 1px solid rgba(147, 171, 199, .13); }
.member-profile-section h3 { margin: 0 0 13px; color: #dce6ef; font-size: 11px; font-weight: 650; }
.member-profile-section dl { display: grid; gap: 12px; margin: 0; }
.member-profile-section dl > div { display: grid; grid-template-columns: minmax(100px, .85fr) minmax(0, 1.15fr); gap: 12px; }
.member-profile-section dt { color: #8596a8; font-size: 9px; }
.member-profile-section dd { margin: 0; overflow-wrap: anywhere; color: #d5e0eb; font-size: 9px; }
.member-recent-activity { padding-top: 20px; }
.member-activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.member-activity-heading h3 { margin: 0; }
.member-activity-heading > span { color: #7e90a3; font-size: 8px; }
.member-activity-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.member-activity-list li { min-height: 52px; display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-top: 1px solid rgba(147, 171, 199, .09); }
.member-activity-mark { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 3px; border-radius: 50%; background: #63a7f5; box-shadow: 0 0 8px rgba(99, 167, 245, .35); }
.member-activity-list li > div { display: grid; gap: 5px; }
.member-activity-list strong { color: #cbd8e5; font-size: 9px; font-weight: 550; }
.member-activity-list time, .member-activity-empty { color: #8798aa; font-size: 8px; }
.member-activity-empty { padding: 13px 0; }
.player-identity-copy { min-width: 0; display: grid; gap: 4px; }
.player-identity-copy strong { overflow: hidden; color: #e0e4e9; font-size: 10px; text-overflow: ellipsis; }
.player-identity-copy small { color: #7f91a5; font-size: 8px; }
.players-header, .player-row { grid-template-columns: minmax(170px, 1.8fr) minmax(70px, .9fr) minmax(150px, 1.6fr) minmax(90px, 1.1fr) minmax(90px, 1.3fr) minmax(50px, .6fr) 42px; }
.player-main { min-width: 0; }
.player-row-actions { display: flex; justify-content: flex-end; }
@keyframes member-panel-in { from { opacity: .7; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }

.account-menu-wrap { position: relative; flex: 0 0 auto; }
.account-menu-trigger { display: grid; place-items: center; font-size: 20px; line-height: 1; }
.account-menu-popover { position: absolute; z-index: 120; right: 0; bottom: calc(100% + 8px); width: 196px; padding: 5px; border: 1px solid rgba(147, 171, 199, .19); border-radius: 7px; background: #111a24; box-shadow: 0 12px 28px rgba(0, 0, 0, .4); transform-origin: bottom right; animation: account-menu-rise .16s ease-out; }
.account-menu-popover[hidden] { display: none; }
.account-menu-popover > button { width: 100%; display: block; padding: 9px 10px; border: 0; border-radius: 4px; background: transparent; color: #d3deea; text-align: left; font: inherit; font-size: 10px; cursor: pointer; }
.account-menu-popover > button:hover { background: rgba(105, 151, 207, .1); color: white; }
.account-menu-popover > [data-logout] { color: #ff9b91; }
.account-menu-version { display: flex; justify-content: space-between; margin-top: 4px; padding: 9px 10px 5px; border-top: 1px solid rgba(147, 171, 199, .1); color: #8394a7; font-size: 8px; }
.account-menu-version span { color: #aab9c8; }
@keyframes account-menu-rise { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.account-settings-dialog { box-sizing: border-box; width: min(540px, calc(100vw - 28px)); max-width: none; max-height: min(86vh, 760px); padding: 23px; overflow-y: auto; border: 1px solid rgba(147, 171, 199, .2); border-radius: 9px; background: #0d151e; color: #e3ebf3; box-shadow: 0 24px 80px rgba(0, 0, 0, .48); }
.account-settings-dialog::backdrop { background: rgba(2, 6, 10, .72); backdrop-filter: blur(3px); }
.account-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid rgba(147, 171, 199, .13); }
.account-settings-eyebrow { color: #78aef0; font-size: 8px; font-weight: 750; }
.account-settings-header h2 { margin: 6px 0 0; color: #edf3f8; font-size: 18px; }
.account-settings-content { display: grid; gap: 18px; padding-top: 17px; }
.account-settings-section { display: grid; gap: 7px; }
.account-settings-section h3 { margin: 0 0 2px; color: #b9c7d6; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.account-preference-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border: 1px solid rgba(147, 171, 199, .1); border-radius: 5px; background: rgba(147, 171, 199, .035); cursor: pointer; }
.account-preference-row > span { min-width: 0; display: grid; gap: 4px; }
.account-preference-row strong { color: #dae4ed; font-size: 10px; font-weight: 600; }
.account-preference-row small { color: #8799ab; font-size: 8px; }
.account-preference-row select { min-width: 105px; height: 31px; padding: 0 8px; border: 1px solid rgba(147, 171, 199, .18); border-radius: 4px; background: #111b26; color: #dfe8f0; font: inherit; font-size: 9px; }
.account-preference-row input[type="checkbox"], .account-sound-teams input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #54c9a1; }
.account-sound-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 9px 10px; border: 1px solid rgba(147, 171, 199, .1); border-radius: 5px; background: rgba(147, 171, 199, .025); }
.account-sound-label { grid-column: 1 / -1; color: #8799ab; font-size: 8px; }
.account-sound-teams label { display: flex; align-items: center; gap: 6px; color: #c2cfdd; font-size: 8px; cursor: pointer; }
.account-sound-teams input:disabled { opacity: .4; }
.account-sound-preview { justify-self: start; min-height: 30px; padding: 0 10px; font-size: 9px; }
.account-settings-saved { margin: 0; color: #70c9a8; font-size: 8px; }
.app > .sidebar { min-height: 0; overflow: hidden; }
.app > .sidebar > .navigation { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.app > .sidebar > .sidebar-bottom { flex: 0 0 auto; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

.app .sidebar { width: 244px; min-width: 244px; }
.app .nav-item { min-height: 41px; gap: 10px; font-size: 12px; }
.app .nav-icon { width: 20px; height: 20px; display: grid; place-items: center; font-size: 17px; }
.app .page.active[data-page-content="overview"] { display: block; padding: 17px 20px 28px; }
.app .page.active[data-page-content="overview"] > .page-intro { align-items: center; margin-bottom: 12px; }
.app .overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.app .overview-metric { min-width: 0; min-height: 82px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 7px; background: #0f1720; }
.app .overview-metric-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(86, 157, 255, .2); border-radius: 7px; background: rgba(60, 139, 255, .12); color: #59aaff; font-size: 19px; }
.app .overview-metric-icon.calls { border-color: rgba(243, 114, 111, .2); background: rgba(243, 114, 111, .1); color: #f0827d; }
.app .overview-metric-icon.servers { border-color: rgba(42, 218, 159, .2); background: rgba(42, 218, 159, .1); color: #3ed5a1; }
.app .overview-metric-icon.status { border-color: rgba(113, 127, 249, .22); background: rgba(113, 127, 249, .1); color: #8d99ff; }
.app .overview-metric > div { min-width: 0; display: grid; gap: 3px; }
.app .overview-metric > div > span { color: #98a8b8; font-size: 9px; }
.app .overview-metric strong { color: #edf3fa; font-size: 19px; line-height: 1.05; }
.app .overview-metric small { overflow: hidden; color: #8495a7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.app .overview-main-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .78fr); align-items: start; gap: 11px; margin-top: 11px; }
.app .overview-map-panel, .app .overview-list-panel, .app .overview-lower-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: #0f1720; }
.app .overview-panel-heading { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; }
.app .overview-panel-heading h3 { margin: 0; color: #e4ecf4; font-size: 11px; font-weight: 650; }
.app .overview-eyebrow { color: #52c8a6; font-size: 8px; font-weight: 750; }
.app .overview-map-panel .overview-panel-heading h3 { margin-top: 3px; font-size: 13px; }
.app .overview-link { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: transparent; color: #58baff; font: inherit; font-size: 8px; cursor: pointer; white-space: nowrap; }
.app .overview-link:hover { color: #b6e1ff; }
.app .overview-link span { font-size: 12px; }
.app .overview-map-viewport { position: relative; height: clamp(300px, 37vw, 430px); overflow: hidden; border-top: 1px solid rgba(147, 171, 199, .09); background: #0a1118; }
.app .overview-map-square { position: absolute; top: 0; bottom: 0; left: 50%; width: auto; height: 100%; aspect-ratio: 1; transform: translateX(-50%); }
.app .overview-map-image, .app .overview-map-markers { position: absolute; inset: 0; width: 100%; height: 100%; }
.app .overview-map-image { display: block; object-fit: contain; }
.app .overview-map-markers { pointer-events: none; }
.app .overview-jurisdiction-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.app .overview-map-marker { position: absolute; width: 13px; height: 13px; padding: 0; border: 2px solid #eaf5ff; border-radius: 50%; background: #1389ff; box-shadow: 0 0 0 4px rgba(19, 137, 255, .22), 0 2px 8px rgba(0, 0, 0, .65); transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; }
.app .overview-map-marker.you { background: #24dba0; box-shadow: 0 0 0 4px rgba(36, 219, 160, .2), 0 2px 8px rgba(0, 0, 0, .65); }
.app .overview-map-marker:hover { z-index: 2; transform: translate(-50%, -50%) scale(1.3); }
.app .overview-map-legend { position: absolute; bottom: 9px; left: 9px; display: grid; gap: 5px; padding: 7px 9px; border: 1px solid rgba(147, 171, 199, .13); border-radius: 5px; background: rgba(7, 13, 19, .88); color: #c3d0de; font-size: 8px; }
.app .overview-map-legend span { display: flex; align-items: center; gap: 6px; }
.app .overview-map-legend i { width: 8px; height: 8px; display: block; border-radius: 50%; background: #168cff; }
.app .overview-map-legend .legend-call { background: #ff595b; }
.app .overview-map-legend .legend-station { border-radius: 2px; background: #4a9dff; }
.app .overview-rail { display: grid; gap: 11px; }
.app .overview-list-panel .overview-panel-heading, .app .overview-lower-panel .overview-panel-heading { min-height: 40px; padding: 8px 11px; }
.app .overview-call-list { padding: 0 11px 3px; }
.app .overview-call-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 52px; border-top: 1px solid rgba(147, 171, 199, .08); }
.app .overview-call-mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(243, 107, 109, .16); color: #ff7777; font-size: 11px; }
.app .overview-call-copy { min-width: 0; display: grid; gap: 3px; }
.app .overview-call-copy strong { overflow: hidden; color: #dce6f0; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app .overview-call-copy small { overflow: hidden; color: #8496a9; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.app .overview-call-age { color: #8799ab; font-size: 8px; white-space: nowrap; }
.app .overview-player-list { padding: 0 10px 4px; }
.app .overview-player-row { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; border-top: 1px solid rgba(147, 171, 199, .08); background: transparent; text-align: left; cursor: pointer; }
.app .overview-player-row .member-avatar { width: 28px; height: 28px; border-radius: 50%; }
.app .overview-player-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.app .overview-player-copy strong { overflow: hidden; color: #dce6f0; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app .overview-player-copy small { color: #8496a9; font-size: 8px; }
.app .overview-player-team { padding: 3px 5px; border-radius: 4px; background: rgba(69, 147, 255, .16); color: #94c8ff; font-size: 7px; white-space: nowrap; }
.app .overview-empty { padding: 13px 2px; color: #8294a7; font-size: 8px; text-align: center; }
.app .overview-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 11px; margin-top: 11px; }
.app .overview-lower-panel { min-height: 156px; }
.app .overview-activity-list, .app .overview-server-list { padding: 0 11px 9px; }
.app .overview-activity-row { min-height: 31px; display: grid; grid-template-columns: 39px 16px minmax(0, 1fr); align-items: center; gap: 7px; border-top: 1px solid rgba(147, 171, 199, .08); }
.app .overview-activity-row time { color: #8193a6; font-size: 8px; }
.app .overview-activity-icon { color: #45d2a4; font-size: 11px; text-align: center; }
.app .overview-activity-row p { min-width: 0; overflow: hidden; margin: 0; color: #c2cfdd; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.app .overview-server-row { min-height: 54px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-top: 1px solid rgba(147, 171, 199, .08); }
.app .overview-server-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 5px; background: #172a3c; color: #63b4ff; font-size: 14px; }
.app .overview-server-copy { min-width: 0; display: grid; gap: 4px; }
.app .overview-server-copy strong { overflow: hidden; color: #dce6f0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.app .overview-server-copy small { color: #8395a8; font-size: 8px; }
.app .overview-server-state { padding: 4px 6px; border-radius: 4px; background: rgba(37, 217, 155, .13); color: #52dcb0; font-size: 7px; }
.app .overview-server-state.is-active.is-offline { background: rgba(243, 107, 109, .12); color: #ff8b8b; }
.app .overview-map-marker.call { border-color: #fff0f0; background: #ff555b; box-shadow: 0 0 0 4px rgba(255, 75, 83, .22), 0 2px 8px rgba(0, 0, 0, .65); }
.app .overview-map-marker:focus-visible { outline: 2px solid white; outline-offset: 3px; }

@media (max-width: 1100px) {
    .app .sidebar { width: 208px; min-width: 208px; }
    .app .overview-main-grid { grid-template-columns: minmax(0, 1.45fr) minmax(250px, .85fr); }
}
@media (max-width: 900px) {
    .app .overview-main-grid { grid-template-columns: minmax(0, 1fr); }
    .app .overview-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .app .overview-map-viewport { height: min(56vw, 410px); min-height: 280px; }
}
@media (max-width: 650px) {
    .app .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .app .overview-metric { min-height: 72px; gap: 8px; padding: 9px; }
    .app .overview-metric-icon { width: 32px; height: 32px; font-size: 15px; }
    .app .overview-metric strong { font-size: 16px; }
    .app .overview-main-grid { grid-template-columns: minmax(0, 1fr); }
    .app .overview-rail { grid-template-columns: minmax(0, 1fr); }
    .app .overview-map-viewport { height: 290px; min-height: 0; }
    .app .overview-bottom-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .member-profile-dialog { padding: 30px 25px 25px; }
}
@media (max-width: 650px) {
    .members-table th, .members-table td { padding: 8px 5px; font-size: 8px; }
    .members-table th:nth-child(1), .members-table td:nth-child(1) { width: 39%; }
    .members-table th:nth-child(2), .members-table td:nth-child(2) { width: 17%; }
    .members-table th:nth-child(3), .members-table td:nth-child(3) { width: 20%; }
    .members-table th:nth-child(4), .members-table td:nth-child(4) { width: 15%; }
    .members-table th:nth-child(5), .members-table td:nth-child(5) { display: none; }
    .members-table th:nth-child(6), .members-table td:nth-child(6) { width: 9%; }
    .member-identity-button { gap: 6px; }
    .member-identity-button .member-avatar { width: 26px; height: 26px; }
    .member-identity-copy small { display: none; }
    .member-identity-copy strong { max-width: 100%; overflow: hidden; font-size: 8px; text-overflow: ellipsis; }
    .member-profile-dialog { inset: auto 0 0; width: 100%; height: min(92vh, 900px); max-height: 92vh; padding: 27px 18px 23px; border-radius: 10px 10px 0 0; }
    .member-profile-close { top: 11px; right: 12px; }
    .member-profile-heading { align-items: flex-start; gap: 12px; padding-top: 16px; }
    .member-avatar-large { width: 58px; height: 58px; }
    .member-profile-names h2 { font-size: 18px; }
    .member-profile-copy { align-self: flex-start; padding-inline: 7px; font-size: 8px; }
    .member-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .member-profile-grid { grid-template-columns: 1fr; gap: 21px; }
    .players-header { display: none; }
    .player-row { grid-template-columns: minmax(0, 1fr) minmax(70px, 1fr); gap: 10px; }
    .player-row > div:nth-child(4), .player-row > div:nth-child(5), .player-row > div:nth-child(6) { display: none; }
    .player-row-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Players: vehicle column */
.player-vehicle { min-width: 0; display: flex; align-items: center; gap: 8px; }
.player-vehicle-plate { flex: 0 0 auto; padding: 3px 6px; border: 1px solid #c9d2dd; border-radius: 3px; background: #eef2f6; color: #111a24; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.player-vehicle-copy { min-width: 0; display: grid; gap: 3px; }
.player-vehicle-copy strong { overflow: hidden; color: #dce4ec; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.player-vehicle-copy small { display: flex; align-items: center; gap: 5px; overflow: hidden; color: #8193a7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.player-vehicle-swatch { width: 8px; height: 8px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; }
.player-vehicle-empty { color: #66778a; font-size: 9px; }

/* Sidebar: CAD entry */
.app .nav-badge { min-width: 20px; margin-left: auto; padding: 2px 6px; border-radius: 4px; background: rgba(229, 72, 77, .16); color: #ff8e91; font-size: 10px; font-weight: 700; text-align: center; }

/* =========================
   POLICE CAD
   Night-mode records workspace with a navy command bar, modelled on the
   CAD/MDT software agencies use (high contrast, standard status colors).
========================= */
.app .cad-page {
    --cad-navy: #0a1a30;
    --cad-navy-2: #11294a;
    --cad-gold: #c9a33a;
    --cad-bg: #070c13;
    --cad-surface: #0f1722;
    --cad-subtle: #0c131c;
    --cad-raised: #172231;
    --cad-line: #223044;
    --cad-line-soft: #19242f;
    --cad-text: #e6edf5;
    --cad-body: #c5d0dc;
    --cad-muted: #8c9cb0;
    --cad-heading: #9fbde3;
    --cad-blue: #3f84f5;
    --cad-blue-hover: #5a96f7;
    --cad-red: #e5484d;
    --cad-red-bg: rgba(229, 72, 77, .14);
    --cad-amber: #f5b544;
    --cad-amber-bg: rgba(242, 178, 0, .14);
    --cad-green: #3ecf7a;
    --cad-green-bg: rgba(62, 207, 122, .13);
    --cad-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    max-width: none;
    min-height: calc(100vh - 58px);
    margin: 0;
    padding: 0 0 24px;
    background: var(--cad-bg);
    color: var(--cad-text);
    font-size: 13px;
}
.app .page.cad-page { max-width: none; padding: 0; }
.app .cad-page.active { display: flex; flex-direction: column; gap: 14px; }
.app .cad-page > :not(.cad-header) { margin-inline: 24px; }

/* Command bar */
.cad-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--cad-line); background: var(--cad-surface); color: var(--cad-text); }
.cad-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cad-seal { width: 42px; height: 42px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--cad-line); border-radius: 8px; background: var(--cad-raised); color: #7fb0ff; }
.cad-seal svg { width: 22px; height: 22px; }
.cad-eyebrow { display: block; color: var(--cad-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cad-title h2 { margin: 2px 0 0; color: var(--cad-text); font-size: 22px; font-weight: 700; letter-spacing: .01em; }

.cad-unit { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border: 1px solid var(--cad-line); border-radius: 6px; background: var(--cad-subtle); }
.cad-unit-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 4px; background: var(--cad-green-bg); color: var(--cad-green); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cad-unit-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cad-unit.is-offline .cad-unit-status { background: var(--cad-amber-bg); color: var(--cad-amber); }
.cad-unit-copy { display: grid; gap: 2px; }
.cad-unit-copy strong { color: var(--cad-text); font-family: var(--cad-mono); font-size: 16px; letter-spacing: .05em; }
.cad-unit-copy strong:empty { display: none; }
.cad-unit-copy small { color: var(--cad-muted); font-size: 12px; }

/* Actions */
.cad-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.cad-action { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border: 1px solid var(--cad-line); border-radius: 6px; background: var(--cad-surface); color: var(--cad-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cad-action svg { width: 17px; height: 17px; color: #7fb0ff; }
.cad-action:hover { border-color: var(--cad-blue); background: var(--cad-raised); }
.cad-action.is-alert { border-color: rgba(229, 72, 77, .45); color: #ff9a9d; }
.cad-action.is-alert svg { color: #ff8a8d; }
.cad-action.is-alert:hover { border-color: var(--cad-red); background: var(--cad-red-bg); }

/* Query bar */
.cad-search { display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; border: 1px solid #2c3d53; border-radius: 7px; background: var(--cad-surface); }
.cad-search:focus-within { border-color: var(--cad-blue); box-shadow: 0 0 0 3px rgba(63, 132, 245, .2); }
.cad-search > svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--cad-muted); }
.cad-search input { min-width: 0; flex: 1; height: 42px; border: 0; outline: 0; background: transparent; color: var(--cad-text); font: inherit; font-family: var(--cad-mono); font-size: 16px; letter-spacing: .03em; }
.cad-search input::placeholder { color: #62748a; font-family: Inter, system-ui, sans-serif; font-size: 14px; letter-spacing: 0; }
.cad-search button { height: 42px; padding: 0 22px; border: 0; border-radius: 5px; background: var(--cad-blue); color: white; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.cad-search button:hover { background: var(--cad-blue-hover); }

/* Layout */
.cad-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; gap: 14px; }
.cad-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cad-results { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.cad-results > .cad-empty { flex: 1; align-content: center; }
.cad-rail { display: grid; align-content: start; gap: 14px; }

.cad-card, .cad-record { min-width: 0; overflow: hidden; border: 1px solid var(--cad-line); border-radius: 7px; background: var(--cad-surface); }
.cad-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 14px; border-bottom: 1px solid var(--cad-line); background: var(--cad-subtle); }
.cad-card-header h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cad-text); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cad-card-header h3 svg { width: 17px; height: 17px; color: #7fb0ff; }
.cad-count { min-width: 26px; padding: 3px 8px; border-radius: 4px; background: var(--cad-raised); color: var(--cad-text); font-family: var(--cad-mono); font-size: 13px; font-weight: 700; text-align: center; }
.cad-count.is-alert { background: var(--cad-red-bg); color: #ff8e91; }
.cad-count.is-warn { background: var(--cad-amber-bg); color: var(--cad-amber); }
.cad-list { max-height: 380px; overflow-y: auto; }
.cad-list-empty { padding: 16px 14px; color: var(--cad-muted); font-size: 13px; }

.cad-item { display: grid; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--cad-line-soft); border-left: 4px solid transparent; }
.cad-item:last-child { border-bottom: 0; }
.cad-item.priority-high { border-left-color: var(--cad-red); background: rgba(229, 72, 77, .06); }
.cad-item.priority-medium { border-left-color: #e0a100; }
.cad-item.priority-low { border-left-color: #5b7fa8; }
.cad-item-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cad-item-top strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cad-item p { margin: 0; color: var(--cad-body); font-size: 13px; line-height: 1.5; }
.cad-item > small, .cad-item-foot small { color: var(--cad-muted); font-size: 12px; }
.cad-item-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.cad-item-foot > span { display: flex; flex: 0 0 auto; gap: 5px; }

.cad-tag { padding: 3px 7px; border-radius: 3px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cad-tag.priority-high { background: var(--cad-red); color: white; }
.cad-tag.priority-medium { background: #e0a100; color: #1c1300; }
.cad-tag.priority-low { background: var(--cad-raised); color: #a9bdd4; }

.cad-mini { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid var(--cad-line); border-radius: 5px; background: var(--cad-surface); color: var(--cad-text); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cad-mini:hover { border-color: var(--cad-blue); color: white; }
.cad-mini.is-alert { border-color: rgba(229, 72, 77, .45); color: #ff9a9d; }
.cad-mini.is-alert:hover { background: var(--cad-red-bg); border-color: var(--cad-red); }
.cad-mini.is-muted { color: var(--cad-muted); }
.cad-mini:disabled { opacity: .5; cursor: wait; }
.cad-link { padding: 0; border: 0; background: none; color: #7fb0ff; font: inherit; font-weight: 600; cursor: pointer; }
.cad-link:hover { text-decoration: underline; }

/* License plates */
.cad-plate { display: inline-block; padding: 3px 8px; border: 1px solid #28303b; border-radius: 4px; background: #fbfbf7; color: #0d1a2b; font-family: var(--cad-mono); font-size: 12px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; box-shadow: inset 0 0 0 1px #fff; }
.cad-plate.is-large { padding: 8px 16px; border-width: 2px; border-radius: 6px; font-size: 22px; box-shadow: inset 0 0 0 3px #fbfbf7, inset 0 0 0 4px #5a6573; }
.cad-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 7px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; vertical-align: -2px; }
.cad-mono { font-family: var(--cad-mono); }

/* Units */
.cad-unit-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--cad-line-soft); }
.cad-unit-row:last-child { border-bottom: 0; }
.cad-unit-row .member-avatar { width: 36px; height: 36px; border-color: var(--cad-line); border-radius: 50%; background: var(--cad-raised); color: #9fbde3; }
.cad-unit-row-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.cad-unit-row-copy strong { overflow: hidden; font-family: var(--cad-mono); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cad-unit-row-copy em { color: var(--cad-muted); font-family: Inter, system-ui, sans-serif; font-size: 12px; font-style: normal; font-weight: 500; }
.cad-unit-row-copy small { overflow: hidden; color: var(--cad-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* Empty / loading */
.cad-empty { display: grid; justify-items: center; gap: 8px; padding: 52px 24px; border: 1px dashed #2c3d53; border-radius: 7px; background: var(--cad-surface); color: var(--cad-muted); font-size: 14px; text-align: center; }
.cad-empty svg { width: 32px; height: 32px; color: #5f7590; }
.cad-empty strong { color: var(--cad-text); font-size: 16px; }
.cad-empty span { max-width: 440px; line-height: 1.6; }
.cad-empty.is-error strong { color: #ff8e91; }
.cad-spinner { width: 26px; height: 26px; border: 3px solid var(--cad-line); border-top-color: var(--cad-blue); border-radius: 50%; animation: cad-spin .8s linear infinite; }
@keyframes cad-spin { to { transform: rotate(360deg); } }
.cad-results-meta { color: var(--cad-muted); font-size: 13px; }
.cad-results-meta strong { color: var(--cad-text); font-family: var(--cad-mono); }

/* Alerts */
.cad-alert { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 12px 18px; border-bottom: 1px solid rgba(0, 0, 0, .35); font-size: 14px; }
.cad-alert strong { font-size: 15px; font-weight: 900; letter-spacing: .12em; }
.cad-alert small { margin-left: auto; font-size: 12px; opacity: .9; }
.cad-alert.is-bolo { background: #b3262b; color: white; }
.cad-alert.is-bolo strong { padding: 2px 8px; border-radius: 3px; background: white; color: #b3262b; animation: cad-flash 1.1s steps(2, start) infinite; }
.cad-alert.is-warrant { background: #c78f00; color: #140d00; }
.cad-alert.is-warrant strong { padding: 2px 8px; border-radius: 3px; background: #140d00; color: #f5b544; }
.cad-alert.is-wanted { background: var(--cad-red-bg); color: #ffb4b6; }
@keyframes cad-flash { to { visibility: hidden; } }

/* Record header */
.cad-person-head, .cad-vehicle-head { display: flex; align-items: center; gap: 16px; padding: 18px; }
.cad-person-head .member-avatar { width: 84px; height: 84px; border: 2px solid var(--cad-line); border-radius: 8px; background: linear-gradient(180deg, #1b2a3d, #111c2a); color: #9fbde3; font-size: 28px; }
.cad-person-head .member-avatar img { object-fit: cover; object-position: center top; }
.cad-person-names { min-width: 0; flex: 1; display: grid; justify-items: start; gap: 5px; }
.cad-person-names h3 { margin: 0; color: var(--cad-text); font-size: 22px; font-weight: 700; }
.cad-person-names small { color: var(--cad-muted); font-size: 13px; }
.cad-vehicle-head > div { min-width: 0; flex: 1; display: grid; gap: 5px; }
.cad-vehicle-head strong { font-size: 17px; }
.cad-vehicle-head small { color: var(--cad-muted); font-size: 13px; }
.cad-record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cad-vehicle-record .cad-record-actions { padding: 0 18px 18px; justify-content: flex-start; }
.cad-live { display: inline-flex; align-items: center; gap: 6px; color: var(--cad-muted); font-size: 12px; font-weight: 600; }
.cad-live.is-live { color: var(--cad-green); }
.cad-live.is-live::before { width: 8px; height: 8px; border-radius: 50%; background: currentColor; content: ""; }

/* Fact grid */
.cad-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1px; margin: 0; border-top: 1px solid var(--cad-line); border-bottom: 1px solid var(--cad-line); background: var(--cad-line); }
.cad-facts > div { padding: 11px 18px; background: var(--cad-subtle); }
.cad-facts dt { color: var(--cad-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cad-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 0 0; color: var(--cad-text); font-size: 14px; font-weight: 600; }
.cad-flag { padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.cad-flag.is-bolo { background: var(--cad-red); color: white; }
.cad-flag.is-warrant { background: #f2b200; color: #140d00; }
.cad-flag.is-clear { background: var(--cad-green-bg); color: var(--cad-green); }

.cad-section-title { padding: 16px 18px 8px; color: var(--cad-heading); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cad-record > .cad-list-empty { padding-top: 0; padding-inline: 18px; }

/* Tables */
.cad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cad-table th { padding: 9px 18px; border-bottom: 1px solid var(--cad-line); background: #0b121b; color: var(--cad-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.cad-table td { padding: 11px 18px; border-bottom: 1px solid var(--cad-line-soft); color: var(--cad-body); vertical-align: top; }
.cad-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .018); }
.cad-table td strong { color: var(--cad-text); font-weight: 600; }
.cad-table td small { display: block; margin-top: 4px; color: var(--cad-muted); font-size: 12px; line-height: 1.5; }
.cad-table tbody tr:last-child td { border-bottom: 0; }
.cad-table tr.is-clickable { cursor: pointer; }
.cad-table tr.is-clickable:hover td { background: rgba(63, 132, 245, .09); }
.cad-cell-actions { text-align: right; }
.cad-kind { padding: 3px 8px; border-radius: 3px; background: var(--cad-raised); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cad-kind.kind-citation { background: rgba(63, 132, 245, .16); color: #8cb8ff; }
.cad-kind.kind-warning { background: var(--cad-amber-bg); color: var(--cad-amber); }
.cad-kind.kind-arrest { background: var(--cad-red-bg); color: var(--cad-red); }
.cad-kind.kind-report { background: var(--cad-green-bg); color: var(--cad-green); }
.cad-kind.kind-patient { background: rgba(229, 72, 77, .13); color: #ff9a9d; }
.cad-kind.kind-incident { background: rgba(245, 128, 48, .15); color: #ffae6e; }
.cad-kind.kind-service { background: rgba(63, 132, 245, .16); color: #8cb8ff; }
.cad-kind.kind-impound { background: var(--cad-amber-bg); color: var(--cad-amber); }
.cad-item p b { color: var(--cad-text); font-weight: 700; }
.cad-status { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cad-status.status-active, .cad-status.status-open { color: var(--cad-amber); }
.cad-status.status-served, .cad-status.status-closed, .cad-status.status-cleared { color: var(--cad-green); }
.cad-status.status-revoked { color: var(--cad-muted); }

/* Tabs */
.cad-tabs { display: flex; gap: 2px; overflow-x: auto; }
.cad-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--cad-muted); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cad-tabs button:hover { color: var(--cad-text); }
.cad-tabs button.is-active { border-bottom-color: var(--cad-blue); color: white; }
.cad-tabs button span { padding: 1px 7px; border-radius: 10px; background: var(--cad-raised); color: var(--cad-text); font-family: var(--cad-mono); font-size: 11px; }
.cad-tabs button.is-active span { background: var(--cad-blue); color: white; }
.cad-record-tabs { margin-top: 10px; padding: 0 8px; border-top: 1px solid var(--cad-line); border-bottom: 1px solid var(--cad-line); background: var(--cad-subtle); }
.cad-record-panel { min-height: 64px; }
.cad-record-panel > .cad-list-empty { padding-inline: 18px; }
.cad-feed .cad-card-header { padding: 0 8px; }
.cad-feed-body { overflow-x: auto; }

/* Dialog */
.cad-dialog { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid #223044; border-radius: 8px; background: #0f1722; color: #e6edf5; font-size: 13px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.cad-dialog::backdrop { background: rgba(8, 18, 32, .6); backdrop-filter: blur(2px); }
.cad-dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 44px); }
.cad-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #223044; background: #0f1722; color: #e6edf5; }
.cad-dialog-header h2 { margin: 4px 0 0; color: #e6edf5; font-size: 19px; }
.cad-dialog-header .cad-eyebrow { color: #8c9cb0; }
.cad-dialog-header .icon-button { color: #8c9cb0; }
.cad-dialog-body { overflow-y: auto; padding: 18px 20px; }
.cad-dialog-body .cad-facts { margin: -18px -20px 0; border-top: 0; background: #223044; }
.cad-dialog-body .cad-facts > div { background: #0c131c; }
.cad-dialog-body .cad-facts dt { color: #8c9cb0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cad-dialog-body .cad-facts dd { color: #e6edf5; }
.cad-dialog-body .cad-section-title { padding-inline: 0; color: #9fbde3; }
.cad-dialog-body .cad-mini { border-color: #223044; background: #0f1722; color: #e6edf5; }
.cad-dialog-footer { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid #223044; background: #0c131c; }
.cad-dialog-footer .secondary-button { border-color: #2c3d53; background: #0f1722; color: #e6edf5; }
.cad-dialog-message { flex: 1; margin: 0; color: #ff8e91; font-size: 13px; font-weight: 600; }
.cad-submit { min-height: 40px; padding: 0 20px; border: 0; border-radius: 5px; background: #3f84f5; color: white; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cad-submit:hover { background: #5a96f7; }
.cad-submit:disabled { opacity: .6; cursor: wait; }
.cad-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cad-field { grid-column: 1 / -1; display: grid; gap: 6px; }
.cad-field.is-half { grid-column: span 1; }
.cad-field label { color: #9fb0c3; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cad-field label span { color: #ff8e91; }
.cad-field input, .cad-field select, .cad-field textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #2c3d53; border-radius: 5px; background: #0a1119; color: #eef3f8; font: inherit; font-size: 14px; }
.cad-field textarea { resize: vertical; line-height: 1.55; }
.cad-field input:focus, .cad-field select:focus, .cad-field textarea:focus { border-color: #3f84f5; outline: 0; box-shadow: 0 0 0 3px rgba(63, 132, 245, .2); }
.cad-field.is-mono input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.cad-field small { color: #8a9bb0; font-size: 12px; }
.cad-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; color: #dbe6f2; font-size: 14px; cursor: pointer; }
.cad-check input { width: 17px; height: 17px; accent-color: #3f84f5; }
.cad-involved { display: flex; flex-wrap: wrap; gap: 6px; }
.cad-narrative { margin: 0; color: #c5d0dc; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }

@media (max-width: 1150px) {
    .cad-grid { grid-template-columns: minmax(0, 1fr); }
    .cad-rail { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 650px) {
    .app .cad-page { min-height: calc(100vh - 62px); }
    .app .cad-page > :not(.cad-header) { margin-inline: 12px; }
    .cad-header { padding-inline: 12px; }
    .cad-header { flex-direction: column; align-items: stretch; }
    .cad-search button { padding: 0 13px; }
    .cad-person-head { flex-wrap: wrap; }
    .cad-record-actions { justify-content: flex-start; }
    .cad-form-grid { grid-template-columns: 1fr; }
    .cad-field.is-half { grid-column: 1 / -1; }
    .cad-alert small { margin-left: 0; }
    .cad-table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .cad-alert.is-bolo strong, .cad-spinner { animation: none; }
}

/* Audit logs: header actions */
.audit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.audit-actions .secondary-button { display: inline-flex; align-items: center; gap: 6px; }
.audit-actions .secondary-button svg { width: 14px; height: 14px; }

/* Server menu: pinned to the viewport (see positionMenu in app.js) so the
   scrolling sidebar can't clip it. */
.app .server-menu { position: fixed; top: 0; left: 0; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; }

/* Welcome page: accounts that aren't in a server yet */
.app .welcome-page.active { min-height: calc(100vh - 58px); display: grid; place-items: center; padding: 32px 20px; }
.welcome-card { width: min(560px, 100%); display: grid; justify-items: center; gap: 12px; padding: 34px 30px 28px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, #111b27, #0e161f); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.welcome-logo { width: 54px; height: 54px; border: 1px solid rgba(66, 139, 255, .25); border-radius: 13px; }
.welcome-eyebrow { color: #7fa9e0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.welcome-card h2 { margin: 0; color: #f2f6fa; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.welcome-card > p { max-width: 430px; margin: 0; color: #93a3b5; font-size: 13px; line-height: 1.65; }
.welcome-options { width: 100%; display: grid; gap: 10px; margin-top: 10px; }
.welcome-option { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(147, 171, 199, .18); border-radius: 9px; background: #101923; color: #e3eaf2; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.welcome-option:hover { border-color: rgba(66, 139, 255, .55); background: #132030; transform: translateY(-1px); }
.welcome-option.is-primary { border-color: rgba(66, 139, 255, .5); background: linear-gradient(180deg, #16305a, #122848); }
.welcome-option.is-primary:hover { border-color: #5a96f7; }
.welcome-option-icon { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; background: rgba(66, 139, 255, .14); color: #8cb8ff; }
.welcome-option.is-primary .welcome-option-icon { background: #3f84f5; color: white; }
.welcome-option-icon svg { width: 19px; height: 19px; }
.welcome-option > span:not(.welcome-option-icon) { min-width: 0; flex: 1; display: grid; gap: 4px; }
.welcome-option strong { font-size: 14px; }
.welcome-option small { color: #93a3b5; font-size: 12px; line-height: 1.45; }
.welcome-option-arrow { width: 17px; height: 17px; flex: 0 0 auto; color: #7f93aa; }
.welcome-note { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; color: #74869a; font-size: 12px; }
.welcome-note svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Settings: invite code */
.setting-invite { display: flex; align-items: center; gap: 8px; }
.setting-invite code { padding: 6px 10px; border: 1px solid rgba(147, 171, 199, .18); border-radius: 5px; background: #0b1118; color: #e6edf5; font-family: ui-monospace, Consolas, monospace; font-size: 12px; letter-spacing: .08em; }
.setting-invite .secondary-button { display: inline-flex; align-items: center; gap: 6px; }
.setting-invite .secondary-button svg { width: 13px; height: 13px; }

/* Site logo image (header + footer) */
.brand-logo { display: block; padding: 0; border: 0; background: none; object-fit: contain; }

/* Account settings: legal links */
.account-legal-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.account-legal-links a, .account-legal-links button { display: flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid rgba(147, 171, 199, .1); border-radius: 5px; background: rgba(147, 171, 199, .035); color: #c3d0dd; font: inherit; font-size: 10px; text-align: left; text-decoration: none; cursor: pointer; }
.account-legal-links a:hover, .account-legal-links button:hover { border-color: rgba(66, 139, 255, .45); color: white; }

/* Settings: member permissions */
.permissions-form { display: grid; gap: 0; padding: 0 15px 15px; }
.permissions-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .045); border-bottom: 1px solid rgba(255, 255, 255, .045); }
.permissions-role { display: grid; gap: 3px; }
.permissions-role strong { color: #dce1e7; font-size: 11px; }
.permissions-role span { color: #7f90a3; font-size: 9px; }
.permissions-options { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.permissions-option { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid rgba(147, 171, 199, .16); border-radius: 6px; background: #101923; color: #cfdae6; font-size: 10px; font-weight: 600; cursor: pointer; }
.permissions-option:has(input:checked) { border-color: rgba(66, 139, 255, .55); background: rgba(66, 139, 255, .1); color: white; }
.permissions-option input { width: 15px; height: 15px; margin: 0; accent-color: #428bff; }
.permissions-option svg { width: 14px; height: 14px; color: #7fb0ff; }
.permissions-note { margin: 0; padding-top: 12px; color: #7f90a3; font-size: 9px; line-height: 1.6; }
.permissions-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 12px; }
.permissions-status { color: #8ea3b9; font-size: 9px; }
.permissions-save:disabled { opacity: .5; cursor: default; }

/* Team boundaries: rename button */
.jurisdiction-row-actions .jurisdiction-rename { width: 32px; display: grid; place-items: center; padding: 0; }
.jurisdiction-row-actions .jurisdiction-rename svg { width: 14px; height: 14px; color: #9fbde3; }
.jurisdiction-row-actions .jurisdiction-rename:hover svg { color: white; }

/* Overview: beta notice */
.beta-banner { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 7px 11px; border: 1px solid rgba(240, 168, 48, .28); border-radius: 6px; background: rgba(240, 168, 48, .08); color: #e9d3a6; font-size: 10px; line-height: 1.4; }
.beta-tag { flex: 0 0 auto; padding: 2px 6px; border-radius: 3px; background: #f0a830; color: #1c1300; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.beta-banner strong { color: #fff3d9; }

/* =========================================
   SIDEBAR — grouped, collapsible navigation
========================================= */

.app .brand { margin-bottom: 12px; padding-bottom: 12px; }
.app .server-selector { padding-bottom: 12px; }
.app .server-label { display: none; }
.app .navigation { gap: 2px; padding-right: 2px; scrollbar-width: thin; }
.app .nav-group { display: grid; gap: 1px; }
.app .nav-group + .nav-group { margin-top: 8px; }
.app .nav-group[hidden] { display: none; }
.app .nav-section-title,
.app .nav-section-title.second {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 6px 10px 5px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #6c7d91;
    font: inherit;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.app .nav-section-title:hover { color: #b3c2d3; }
.app .nav-section-title:focus-visible { outline: 2px solid #428bff; outline-offset: -2px; }
.app .nav-group-chevron { width: 12px; height: 12px; opacity: 0; transition: transform .15s ease, opacity .15s ease; }
.app .nav-section-title:hover .nav-group-chevron,
.app .nav-section-title:focus-visible .nav-group-chevron,
.app .nav-group.collapsed .nav-group-chevron { opacity: 1; }
.app .nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }
.app .nav-group-items { display: grid; gap: 1px; }
/* A collapsed group still shows the page you are on. */
.app .nav-group.collapsed .nav-item:not(.active) { display: none; }
.app .nav-item { min-height: 34px; padding: 7px 10px; font-size: 11.5px; }
.app .nav-item[hidden] { display: none; }
.app .nav-icon { width: 17px; height: 17px; flex-basis: 17px; }
.app .nav-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 85, 91, .14);
    color: #ff8a8e;
    font-size: 8.5px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.app .nav-live[hidden] { display: none; }
.app .nav-live::before,
.app .session-live-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff555b;
    animation: session-pulse 1.6s ease-in-out infinite;
}
@keyframes session-pulse { 50% { opacity: .35; } }

/* Connection status becomes one slim line above the account card. */
.app .sidebar-bottom { padding-top: 10px; border-top: 1px solid rgba(147, 171, 199, .1); }
.app .sidebar-bottom .connection-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 2px 8px;
    padding: 0 8px;
    border: 0;
    background: transparent;
}
.app .connection-description { margin: 0; color: #6c7d91; font-size: 9px; }

/* =========================================
   SESSIONS
========================================= */

.app .session-start {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1.1fr);
    align-items: center;
    gap: 10px 18px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--border);
}
.app .session-start[hidden], .app .session-report[hidden] { display: none; }
.app .session-start-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app .session-start-copy > div { display: grid; gap: 4px; }
.app .session-start-copy strong { color: #e7edf4; font-size: 13px; }
.app .session-start-copy span { color: #93a3b4; font-size: 10px; }
.app .session-start-icon {
    width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
    border: 1px solid rgba(86, 157, 255, .2); border-radius: 7px; background: rgba(60, 139, 255, .12); color: #59aaff;
}
.app .session-start-icon svg { width: 19px; height: 19px; }
.app .session-start-fields { display: flex; gap: 8px; }
.app .session-start-fields input {
    min-width: 0; flex: 1; min-height: 36px; padding: 0 11px;
    border: 1px solid var(--border); border-radius: 6px; background: #0a1118; color: #e7edf4; font: inherit; font-size: 11px;
}
.app .session-start-fields input:focus { border-color: rgba(66, 139, 255, .6); outline: none; }
.app .session-start-fields .primary-button,
.app .session-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; font-size: 10.5px; white-space: nowrap; }
.app .session-start-fields svg, .app .session-actions svg { width: 14px; height: 14px; }
.app .session-start-note { grid-column: 1 / -1; margin: 0; color: #6f8094; font-size: 9px; }
.app .session-error { grid-column: 1 / -1; margin: 0; color: #ff8a8e; font-size: 10px; }

.app .session-report { margin-top: 14px; display: grid; gap: 11px; }
.app .session-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: #0f1720;
}
.app .session-header.is-live { border-color: rgba(255, 85, 91, .28); background: linear-gradient(90deg, rgba(255, 85, 91, .07), #0f1720 55%); }
.app .session-title { min-width: 0; display: grid; gap: 5px; }
.app .session-title-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.app .session-title h3 { overflow: hidden; margin: 0; color: #f0f5fa; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.app .session-title p { margin: 0; color: #8e9fb1; font-size: 10px; }
.app .session-live-pill, .app .session-ended-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
    font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.app .session-live-pill { background: rgba(255, 85, 91, .14); color: #ff8a8e; }
.app .session-ended-pill { background: rgba(147, 171, 199, .12); color: #a9b8c8; }
.app .session-clock { color: #f0f5fa; font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 650; }
.app .session-header-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.app .session-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.app .session-end-button { border: 1px solid rgba(255, 85, 91, .4); border-radius: 7px; background: rgba(255, 85, 91, .12); color: #ff9a9d; cursor: pointer; padding: 9px 13px; }
.app .session-end-button:hover { background: rgba(255, 85, 91, .2); }
.app .session-end-button:disabled, .app .session-actions button:disabled { opacity: .6; cursor: wait; }

.app .session-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }
.app .session-metrics .overview-metric { min-height: 74px; }
.app .session-metrics .overview-metric strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.app .session-metrics .overview-metric-icon svg { width: 18px; height: 18px; }

.app .session-chart-panel { padding-bottom: 10px; }
.app .session-legend { display: flex; gap: 14px; color: #b6c4d3; font-size: 9.5px; }
.app .session-legend span { display: inline-flex; align-items: center; gap: 6px; }
.app .session-legend i { width: 10px; height: 3px; border-radius: 2px; }
.app .session-chart { position: relative; padding: 0 12px; }
.app .session-chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.app .session-chart .grid line { stroke: rgba(147, 171, 199, .1); stroke-width: 1; }
.app .session-chart .axis text { fill: #7d8ea1; font-size: 9px; }
.app .session-chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.app .session-chart .end-label { fill: #c7d3df; font-size: 9.5px; }
.app .session-chart .crosshair { stroke: rgba(220, 230, 240, .35); stroke-width: 1; }
.app .session-chart .hover-dot { stroke: #0f1720; stroke-width: 2; }
.app .session-chart-tooltip {
    position: absolute; top: 4px; z-index: 2; display: grid; gap: 3px; min-width: 120px; padding: 7px 9px;
    border: 1px solid rgba(147, 171, 199, .2); border-radius: 6px; background: rgba(8, 13, 19, .96);
    color: #c7d3df; font-size: 9.5px; pointer-events: none; transform: translateX(-50%);
}
.app .session-chart-tooltip strong { color: #f0f5fa; font-size: 10px; }
.app .session-chart-tooltip span { display: flex; align-items: center; gap: 6px; }
.app .session-chart-tooltip i { width: 8px; height: 8px; border-radius: 50%; }
.app .session-chart-empty { padding: 34px 12px; color: #8294a7; font-size: 10px; text-align: center; }

.app .session-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; align-items: start; }
.app .session-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: #0f1720; }
.app .session-panel .overview-panel-heading small { color: #8294a7; font-size: 9px; }
.app .session-list { max-height: 360px; overflow-y: auto; padding: 0 12px 6px; scrollbar-width: thin; }
.app .session-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
    min-height: 42px; padding: 7px 0; border-top: 1px solid rgba(147, 171, 199, .08);
}
.app .session-row-main { min-width: 0; display: grid; gap: 3px; }
.app .session-row-main strong { overflow: hidden; color: #dce6f0; font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app .session-row-main small { overflow: hidden; color: #8496a9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.app .session-row-value { color: #e4ecf4; font-size: 10.5px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.app .session-bar { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(147, 171, 199, .08); }
.app .session-bar i { display: block; height: 100%; border-radius: 2px; background: #c7801c; }
.app .session-tag {
    display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 4px; vertical-align: 1px;
    background: rgba(69, 147, 255, .16); color: #94c8ff; font-size: 8px; font-weight: 650;
}
.app .session-tag.handled { background: rgba(37, 217, 155, .14); color: #5fe0b3; }
.app .session-tag.unhandled { background: rgba(147, 171, 199, .12); color: #a9b8c8; }
.app .session-tag.new { background: rgba(199, 128, 28, .18); color: #f0b25c; }
.app .session-online-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #25d99b; vertical-align: 1px; }

.app .session-history { margin-top: 14px; border: 1px solid var(--border); }
.app .session-history-count { color: #8294a7; font-size: 9px; }
.app .session-history-list { padding: 0 12px 6px; }
.app .session-history-row {
    width: 100%; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(70px, .5fr)) 16px; align-items: center; gap: 10px;
    min-height: 50px; padding: 7px 4px; border: 0; border-top: 1px solid rgba(147, 171, 199, .08);
    background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.app .session-history-row:hover { background: rgba(123, 164, 214, .05); }
.app .session-history-row > span { display: grid; gap: 3px; min-width: 0; }
.app .session-history-row strong { overflow: hidden; color: #dce6f0; font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app .session-history-row small { color: #8496a9; font-size: 9px; }
.app .session-history-row b { color: #e4ecf4; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.app .session-history-row svg { width: 14px; height: 14px; color: #6f8094; }

@media (max-width: 1250px) {
    .app .session-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .app .session-start { grid-template-columns: minmax(0, 1fr); }
    .app .session-grid { grid-template-columns: minmax(0, 1fr); }
    .app .session-history-row { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(60px, auto)) 16px; }
    .app .session-history-row .hide-narrow { display: none; }
}
@media (max-width: 650px) {
    .app .session-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app .session-start-fields { flex-direction: column; }
}
.app .session-history[hidden] { display: none; }

/* =========================================
   OVERVIEW — full-height rail, readable activity
========================================= */

/* The rail matches the map's height; each list scrolls inside its panel. */
.app .overview-main-grid { align-items: stretch; }
.app .overview-rail { height: 0; min-height: 100%; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.app .overview-list-panel { display: flex; flex-direction: column; min-height: 0; }
.app .overview-list-panel .overview-panel-heading { flex: 0 0 auto; border-bottom: 1px solid rgba(147, 171, 199, .08); }
.app .overview-call-list,
.app .overview-player-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 171, 199, .25) transparent;
}
.app .overview-call-row:first-child,
.app .overview-player-row:first-child { border-top: 0; }
.app .overview-metric-icon svg { width: 19px; height: 19px; }
.app .overview-my-time { font-variant-numeric: tabular-nums; }
.app .overview-my-time.is-counting { color: #8d99ff; }

.app .overview-activity-row { min-height: 40px; grid-template-columns: 48px 18px minmax(0, 1fr); gap: 9px; }
.app .overview-activity-row time { font-size: 10px; }
.app .overview-activity-icon { font-size: 13px; }
.app .overview-activity-row p { font-size: 11px; }
.app .overview-lower-panel .overview-panel-heading h3 { font-size: 12px; }

@media (max-width: 900px) {
    .app .overview-rail { height: auto; min-height: 0; grid-template-rows: none; }
    .app .overview-call-list, .app .overview-player-list { max-height: 320px; }
}

/* =========================================
   SEARCH — glass command panel
========================================= */

.app .search-trigger { display: grid; place-items: center; padding: 0; }
.app .search-trigger svg { width: 15px; height: 15px; }

.search-dialog {
    width: min(620px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 32px));
    margin: 12vh auto auto;
    padding: 0;
    overflow: hidden;
    display: none;
    flex-direction: column;
    border: 1px solid rgba(200, 220, 255, .16);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(30, 44, 64, .62), rgba(12, 19, 28, .58));
    color: #e7edf4;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
}
.search-dialog[open] { display: flex; animation: search-in .16s ease-out; }
.search-dialog::backdrop {
    background: rgba(4, 8, 13, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
@keyframes search-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }

.search-box { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid rgba(200, 220, 255, .1); }
.search-box-icon { width: 18px; height: 18px; flex: 0 0 auto; color: #9fb2c8; }
.search-box input {
    min-width: 0; flex: 1; border: 0; outline: none; background: transparent;
    color: #f2f6fb; font: inherit; font-size: 15px;
}
.search-box input::placeholder { color: #8395aa; }
.search-dialog kbd {
    display: inline-block; min-width: 18px; padding: 2px 5px; border: 1px solid rgba(200, 220, 255, .18); border-radius: 4px;
    background: rgba(255, 255, 255, .06); color: #b4c2d2; font: inherit; font-size: 9.5px; text-align: center;
}
.search-hint { margin: 0; padding: 10px 18px 2px; color: #9fb0c3; font-size: 10px; font-weight: 650; letter-spacing: .04em; }
.search-hint[hidden] { display: none; }
.search-results { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.search-result {
    width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 10px;
    border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.search-result.active { background: rgba(80, 140, 255, .18); box-shadow: inset 0 0 0 1px rgba(110, 160, 255, .25); }
.search-result-icon {
    width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px;
    background: rgba(255, 255, 255, .07); color: #a9c6ff;
}
.search-result-icon.player { color: #5fe0b3; }
.search-result-icon.call { color: #ff8a8e; }
.search-result-icon svg { width: 16px; height: 16px; }
.search-result-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.search-result-copy strong { overflow: hidden; color: #eef3f9; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.search-result-copy small { overflow: hidden; color: #96a8bc; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.search-result-go { width: 14px; height: 14px; color: #8fb4ff; opacity: 0; }
.search-result.active .search-result-go { opacity: 1; }
.search-empty { padding: 26px 12px; color: #96a8bc; font-size: 11px; text-align: center; }
.search-footer {
    display: flex; flex-wrap: wrap; gap: 16px; padding: 9px 16px; border-top: 1px solid rgba(200, 220, 255, .1);
    color: #8ea0b4; font-size: 10px;
}
.search-footer span { display: inline-flex; align-items: center; gap: 4px; }

/* Where search dropped you. */
.search-flash { animation: search-flash 1.8s ease-out; }
@keyframes search-flash {
    0%, 35% { box-shadow: 0 0 0 2px rgba(80, 140, 255, .75), 0 0 24px rgba(80, 140, 255, .3); }
    100% { box-shadow: 0 0 0 2px rgba(80, 140, 255, 0); }
}

@media (max-width: 650px) {
    .search-dialog { margin-top: 16px; }
    .search-footer { display: none; }
}

/* =========================================
   OVERVIEW v2 — map-first command layout
========================================= */

.app .page.active[data-page-content="overview"] { padding-bottom: 24px; }
.app .ov-intro { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.app .ov-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.app .ov-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px;
    border: 1px solid var(--border); border-radius: 999px; background: #0f1720; color: #93a3b4; font-size: 10.5px; white-space: nowrap;
}
.app .ov-chip svg { width: 14px; height: 14px; color: #6fa6ff; }
.app .ov-chip b { color: #eef3f9; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.app .ov-chip-time small { color: #7d8ea1; font-size: 9.5px; }
.app .ov-chip-time small::before { content: "·"; margin-right: 6px; }
.app .ov-chip-time .overview-my-time.is-counting { color: #8d99ff; }

.app .ov-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 12px;
    height: clamp(520px, calc(100vh - 270px), 760px);
}

/* Map panel: the shared Live Map viewport fills it. */
.app .ov-map-panel { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: #050608; }
.app .ov-map-host { position: absolute; inset: 0; }
.app .ov-map-host .map-viewport { width: 100%; height: 100%; min-height: 0; }
.app .ov-map-layers { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.app .ov-layer, .app .ov-map-zoom button, .app .ov-map-open {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px;
    border: 1px solid rgba(160, 190, 230, .18); border-radius: 7px;
    background: rgba(9, 15, 23, .82); color: #dce6f0; font: inherit; font-size: 11px; cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.app .ov-layer:hover, .app .ov-map-zoom button:hover, .app .ov-map-open:hover { border-color: rgba(110, 160, 255, .5); }
.app .ov-layer[aria-pressed="false"] { color: #7d8ea1; background: rgba(9, 15, 23, .6); }
.app .ov-layer[aria-pressed="false"] .ov-layer-dot { opacity: .3; }
.app .ov-layer-dot { width: 10px; height: 10px; border-radius: 50%; }
.app .ov-layer-dot.players { background: #4f8cff; }
.app .ov-layer-dot.units { background: #2fd39b; }
.app .ov-layer-dot.calls { background: #ff555b; }
.app .ov-layer-dot.jurisdictions { border-radius: 3px; background: #e0b44d; }
.app .ov-map-zoom { position: absolute; left: 12px; bottom: 12px; z-index: 5; display: grid; gap: 4px; }
.app .ov-map-zoom button { width: 34px; height: 34px; justify-content: center; padding: 0; }
.app .ov-map-zoom svg, .app .ov-map-open svg { width: 15px; height: 15px; }
.app .ov-map-open { position: absolute; right: 12px; bottom: 12px; z-index: 5; }

.app .ov-map-panel.hide-players .map-player-marker.is-player,
.app .ov-map-panel.hide-units .map-player-marker.is-unit,
.app .ov-map-panel.hide-calls .erlc-call-layer,
.app .ov-map-panel.hide-jurisdictions .erlc-jurisdiction-shapes { display: none; }

/* Call markers stay the same size at any zoom. */
.erlc-call-layer { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.map-call-marker {
    position: absolute; width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
    border: 2px solid #fff0f0; border-radius: 50%; background: #e5484d; color: #fff; font: 800 13px/1 system-ui, sans-serif;
    box-shadow: 0 0 0 6px rgba(229, 72, 77, .25), 0 3px 10px rgba(0, 0, 0, .6);
    transform: translate(-50%, -50%) scale(var(--map-counter, 1)); pointer-events: auto; cursor: pointer;
}
.map-call-marker.fire { background: #f06a3a; }
.map-call-marker.dot { background: #d79a1f; }
.map-call-marker::after {
    content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(229, 72, 77, .55);
    animation: call-ping 1.8s ease-out infinite;
}
@keyframes call-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* Right column */
.app .ov-side { min-height: 0; display: grid; grid-template-rows: minmax(0, 1.25fr) auto minmax(0, 1fr); gap: 12px; }
.app .ov-card { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: #0f1720; }
.app .ov-card-heading { flex: 0 0 auto; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid rgba(147, 171, 199, .08); }
.app .ov-card-heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: #eef3f9; font-size: 13px; font-weight: 650; }
.app .ov-card-heading h3 svg { width: 16px; height: 16px; color: #6fa6ff; }
.app .ov-card .overview-link { font-size: 10px; }
.app .ov-count-badge { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10px; text-align: center; }
.app .ov-count { color: #8fa2b6; font-size: 13px; font-weight: 600; }
.app .ov-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(147, 171, 199, .25) transparent; }

.app .ov-call-list { padding: 6px; display: grid; align-content: start; gap: 6px; }
.app .ov-call {
    position: relative; width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) 14px; gap: 10px; align-items: center;
    padding: 10px 10px 10px 12px; border: 1px solid rgba(147, 171, 199, .08); border-left: 3px solid #4f8cff; border-radius: 7px;
    background: rgba(255, 255, 255, .02); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.app .ov-call:hover { background: rgba(123, 164, 214, .07); }
.app .ov-call.police, .app .ov-call.sheriff { border-left-color: #e5484d; }
.app .ov-call.fire { border-left-color: #f06a3a; }
.app .ov-call.dot { border-left-color: #d79a1f; }
.app .ov-call-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: rgba(229, 72, 77, .16); color: #ff7b80; }
.app .ov-call.fire .ov-call-icon { background: rgba(240, 106, 58, .16); color: #ff9a6e; }
.app .ov-call.dot .ov-call-icon { background: rgba(215, 154, 31, .16); color: #f0b84a; }
.app .ov-call-icon svg { width: 18px; height: 18px; }
.app .ov-call-body { min-width: 0; display: grid; gap: 4px; }
.app .ov-call-top { display: flex; align-items: center; gap: 7px; }
.app .ov-call-number { color: #a9b8c8; font-size: 10.5px; }
.app .ov-call-top time { margin-left: auto; color: #7d8ea1; font-size: 10px; white-space: nowrap; }
.app .ov-call-body strong { overflow: hidden; color: #eef3f9; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app .ov-call-body small { display: flex; align-items: center; gap: 4px; overflow: hidden; color: #8fa2b6; font-size: 10.5px; white-space: nowrap; }
.app .ov-call-body small svg { width: 12px; height: 12px; flex: 0 0 auto; color: #6fa6ff; }
.app .ov-call-meta { display: flex; gap: 10px; color: #a9b8c8; font-size: 10px; }
.app .ov-call-meta span { display: inline-flex; align-items: center; gap: 4px; }
.app .ov-call-meta svg { width: 12px; height: 12px; }
.app .ov-call-chevron { width: 14px; height: 14px; color: #6f8094; }

.app .ov-session-card { flex-direction: row; align-items: center; gap: 12px; padding: 14px; }
.app .ov-session-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(86, 157, 255, .2); border-radius: 9px; background: rgba(60, 139, 255, .1); color: #6fa6ff; }
.app .ov-session-icon.live { border-color: rgba(255, 85, 91, .3); background: rgba(255, 85, 91, .1); color: #ff8a8e; }
.app .ov-session-icon svg { width: 19px; height: 19px; }
.app .ov-session-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.app .ov-session-copy > span { display: flex; align-items: center; gap: 7px; color: #b6c4d3; font-size: 11px; }
.app .ov-session-copy strong { color: #f3f7fb; font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; }
.app .ov-session-copy strong.muted { color: #8fa2b6; font-size: 15px; }
.app .ov-session-copy small { overflow: hidden; color: #7d8ea1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.app .ov-session-card .session-live-pill { padding: 1px 6px; font-size: 8.5px; }

.app .ov-activity-panel .overview-activity-list { padding: 2px 14px 8px; }
.app .ov-activity-panel .overview-activity-row { grid-template-columns: 40px 26px minmax(0, 1fr); align-items: start; padding: 8px 0; }
.app .ov-activity-panel .overview-activity-row:first-child { border-top: 0; }
.app .ov-activity-panel .overview-activity-row time { padding-top: 5px; }
.app .ov-activity-panel .overview-activity-row p { white-space: normal; line-height: 1.4; padding-top: 3px; }
.app .overview-activity-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: rgba(79, 140, 255, .12); color: #6fa6ff; }
.app .overview-activity-icon svg { width: 13px; height: 13px; }
.app .overview-activity-icon.join { background: rgba(47, 211, 155, .12); color: #4fdcaa; }
.app .overview-activity-icon.leave, .app .overview-activity-icon.muted { background: rgba(147, 171, 199, .1); color: #93a3b4; }
.app .overview-activity-icon.call { background: rgba(229, 72, 77, .14); color: #ff7b80; }

/* Bottom tables */
.app .ov-bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.app .ov-table-panel { height: 360px; }
.app .ov-table-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.app .ov-search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 6px; background: #0a1118; }
.app .ov-search svg { width: 13px; height: 13px; color: #7d8ea1; }
.app .ov-search input { width: 130px; border: 0; outline: 0; background: transparent; color: #e7edf4; font: inherit; font-size: 11px; }
.app .ov-table-tools select { height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: #0a1118; color: #dce6f0; font: inherit; font-size: 11px; }
.app .ov-live-pill { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border: 1px solid rgba(47, 211, 155, .25); border-radius: 6px; color: #4fdcaa; font-size: 10.5px; }
.app .ov-live-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fd39b; animation: session-pulse 1.6s ease-in-out infinite; }

.app .ov-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.app .ov-table th {
    position: sticky; top: 0; z-index: 1; padding: 9px 14px; background: #0f1720; color: #7d8ea1;
    font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-align: left; text-transform: uppercase; border-bottom: 1px solid rgba(147, 171, 199, .1);
}
.app .ov-table td { padding: 8px 14px; border-bottom: 1px solid rgba(147, 171, 199, .06); color: #dce6f0; white-space: nowrap; }
.app .ov-table tbody tr { cursor: pointer; }
.app .ov-table tbody tr:hover td { background: rgba(123, 164, 214, .05); }
.app .ov-table tbody tr:focus-visible { outline: 2px solid #428bff; outline-offset: -2px; }
.app .ov-muted { color: #9fb0c3 !important; overflow: hidden; max-width: 180px; text-overflow: ellipsis; }
.app .ov-table-empty { padding: 26px 14px !important; color: #8294a7 !important; text-align: center; cursor: default; }
.app .ov-player { display: flex; align-items: center; gap: 9px; }
.app .ov-player .member-avatar { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; }
.app .ov-player > span:last-child { display: grid; gap: 1px; }
.app .ov-player strong, .app .ov-unit { color: #eef3f9; font-weight: 600; }
.app .ov-player small, .app .ov-unit-name { display: block; color: #7d8ea1; font-size: 10px; }
.app .ov-you { margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: rgba(141, 153, 255, .18); color: #a9b2ff; font-size: 8.5px; vertical-align: 1px; }
.app .ov-team {
    display: inline-block; min-width: 54px; padding: 3px 8px; border-radius: 5px; text-align: center;
    background: rgba(147, 171, 199, .12); color: #c3cfdb; font-size: 10px; font-weight: 650;
}
.app .ov-team.police { background: rgba(74, 144, 255, .18); color: #8dbaff; }
.app .ov-team.sheriff { background: rgba(199, 128, 28, .2); color: #f0b25c; }
.app .ov-team.fire { background: rgba(229, 72, 77, .18); color: #ff8a8e; }
.app .ov-team.dot { background: rgba(215, 154, 31, .2); color: #f3c460; }
.app .ov-team.prisoner { background: rgba(240, 106, 58, .18); color: #ff9a6e; }
.app .ov-wanted { color: #7d8ea1; }
.app .ov-wanted.is-wanted { color: #ff7b80; letter-spacing: 1px; }
.app .ov-status { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 650; }
.app .ov-status.free { background: rgba(47, 211, 155, .14); color: #4fdcaa; }
.app .ov-status.busy { background: rgba(74, 144, 255, .18); color: #8dbaff; }

@media (max-width: 1250px) {
    .app .ov-grid { grid-template-columns: minmax(0, 1fr) 310px; }
}
@media (max-width: 1000px) {
    .app .ov-grid { height: auto; grid-template-columns: minmax(0, 1fr); }
    .app .ov-map-panel { height: 460px; }
    .app .ov-side { grid-template-rows: none; }
    .app .ov-calls-panel, .app .ov-activity-panel { max-height: 360px; }
    .app .ov-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
    .app .ov-map-panel { height: 360px; }
    .app .ov-layer { min-height: 28px; padding: 0 9px; font-size: 10px; }
    .app .ov-search input { width: 100px; }
}

/* Player markers keep a readable size at low zoom (see --marker-scale). */
.erlc-marker-layer .map-player-marker { transform: translate(-50%, -50%) scale(var(--marker-scale, 1)); }
/* Marker colors follow the Live Map legend. */
.erlc-marker-layer .map-player-marker.is-player:not(.you) { background: #e8eef5; border-color: #12161d; }
.erlc-marker-layer .map-player-marker.team-police:not(.you) { background: #4f8cff; }
.erlc-marker-layer .map-player-marker.team-sheriff:not(.you) { background: #e0b44d; }
.erlc-marker-layer .map-player-marker.team-fire:not(.you) { background: #ff5a5f; }
.erlc-marker-layer .map-player-marker.team-dot:not(.you) { background: #f08a24; }
.app .ov-layer-dot.players { background: #e8eef5; }
.app .ov-layer-dot.units { background: linear-gradient(90deg, #4f8cff 50%, #ff5a5f 50%); }

/* =========================================
   SESSIONS — automatic personal & multi sessions
========================================= */

.app .session-kind {
    display: inline-block; margin-right: 6px; padding: 2px 6px; border-radius: 4px; vertical-align: 1px;
    background: rgba(147, 171, 199, .12); color: #b6c4d3; font-size: 8.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
}
.app .session-kind.multi { background: rgba(74, 144, 255, .18); color: #8dbaff; }
.app .session-kind.personal { background: rgba(141, 153, 255, .18); color: #a9b2ff; }
.app .session-kind.mine { background: rgba(47, 211, 155, .14); color: #4fdcaa; }
.app .session-title-row .session-kind { margin-right: 0; }

.app .session-live { margin-top: 14px; border: 1px solid var(--border); }
.app .session-live[hidden] { display: none; }
.app .session-live-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 0 12px 12px; }
.app .session-live-card {
    display: grid; gap: 5px; padding: 12px 13px; border: 1px solid rgba(147, 171, 199, .12); border-radius: 8px;
    background: rgba(255, 255, 255, .02); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.app .session-live-card:hover { border-color: rgba(110, 160, 255, .4); background: rgba(123, 164, 214, .06); }
.app .session-live-card.manual { border-left: 3px solid #ff555b; }
.app .session-live-card.multi { border-left: 3px solid #4a90ff; }
.app .session-live-card.personal { border-left: 3px solid #8d99ff; }
.app .session-live-top { display: flex; align-items: center; gap: 4px; }
.app .session-live-top .session-live-pill { margin-left: auto; padding: 1px 6px; font-size: 8.5px; }
.app .session-live-card strong { overflow: hidden; color: #eef3f9; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app .session-live-clock { color: #f3f7fb; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.app .session-live-card small { color: #8fa2b6; font-size: 10px; }

.app .session-auto-note { align-self: center; color: #8fa2b6; font-size: 10px; }
.app .session-metrics.is-personal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app .session-history-tools { display: flex; align-items: center; gap: 10px; }
.app .session-history-tools select {
    height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: #0a1118; color: #dce6f0; font: inherit; font-size: 10.5px;
}
.app .session-history-tools select[hidden] { display: none; }
.app .ov-session-copy .session-kind { margin-right: 0; }

@media (max-width: 900px) {
    .app .session-metrics.is-personal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Landing hero preview — mirrors the dashboard Overview */
.hp-layout { min-height: 400px; }
.hp-nav { padding: 4px 6px; }
.hp-nav em.is-live { background: rgba(255, 85, 91, .16); color: #ff8a8e; font-weight: 700; letter-spacing: .05em; }
.hp-main { gap: 7px; padding: 11px; }
.hp-search { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border: 1px solid rgba(147, 171, 199, .16); border-radius: 4px; background: #0f1720; color: #8193a6; font-size: 6px; white-space: nowrap; }
.hp-search svg { width: 8px; height: 8px; }
.hp-search kbd { margin-left: 6px; padding: 0 3px; border: 1px solid rgba(147, 171, 199, .2); border-radius: 2px; color: #a8b8ca; font: inherit; font-size: 5px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hp-chips span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border: 1px solid rgba(147, 171, 199, .14); border-radius: 999px; background: #0f1720; color: #8898aa; font-size: 6px; }
.hp-chips svg { width: 8px; height: 8px; color: #6fa8ff; }
.hp-chips b { color: #f0f5fa; font-size: 6.5px; }
.hp-chips b.is-time { color: #8d99ff; }

.hp-ov { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 6px; }
.hp-ov-map { position: relative; min-height: 236px; overflow: hidden; border: 1px solid rgba(147, 171, 199, .13); border-radius: 5px; background: #050608; }
.hp-ov-map img { position: absolute; top: 50%; left: 50%; width: 112%; height: auto; transform: translate(-50%, -50%); opacity: .95; }
.hp-layers { position: absolute; top: 5px; left: 5px; z-index: 2; display: flex; align-items: center; gap: 3px; padding: 2px 5px; border: 1px solid rgba(160, 190, 230, .18); border-radius: 3px; background: rgba(9, 15, 23, .85); color: #dce6f0; font-size: 5px; }
.hp-layers i { width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; }
.hp-layers i:first-child { margin-left: 0; }
.hp-layers i.players { background: #e8eef5; }
.hp-layers i.units { background: #4f8cff; }
.hp-layers i.calls { background: #ff555b; }
.hp-layers i.zones { border-radius: 1px; background: #e0b44d; }
.hp-ov-map .hp-dot { background: #e8eef5; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.hp-ov-map .hp-dot.police { background: #4f8cff; }
.hp-ov-map .hp-dot.sheriff { background: #e0b44d; }
.hp-ov-map .hp-dot.fire { background: #ff5a5f; }
.hp-ov-map .hp-dot.dot { background: #f08a24; }
.hp-ov-map .hp-dot.you { width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 2px solid #111827; background: #fff; }
.hp-call-pin { position: absolute; z-index: 1; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; display: grid; place-items: center; border: 1px solid #fff0f0; border-radius: 50%; background: #e5484d; color: #fff; font-size: 6px; font-style: normal; font-weight: 800; box-shadow: 0 0 0 3px rgba(229, 72, 77, .3); animation: hp-ping 1.6s ease-out infinite; }
.hp-call-pin.fire { background: #f06a3a; }
.hp-zoom { position: absolute; left: 5px; bottom: 5px; display: grid; gap: 2px; }
.hp-zoom i { width: 11px; height: 11px; display: grid; place-items: center; border: 1px solid rgba(160, 190, 230, .18); border-radius: 2px; background: rgba(9, 15, 23, .85); color: #dce6f0; font-size: 7px; font-style: normal; }

.hp-ov-side { min-width: 0; display: grid; gap: 5px; align-content: start; }
.hp-card { min-width: 0; overflow: hidden; border: 1px solid rgba(147, 171, 199, .13); border-radius: 5px; background: #0f1720; }
.hp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 6px; border-bottom: 1px solid rgba(147, 171, 199, .08); }
.hp-card-head b { color: #e4ebf4; font-size: 7px; }
.hp-card-head b em { margin-left: 2px; padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 5.5px; font-style: normal; }
.hp-card-head b em.is-muted { background: none; color: #8193a6; }
.hp-card-head small { color: #78aaff; font-size: 5.5px; }
.hp-card-head small.hp-live { color: #4fdcaa; }
.hp-ov-call { display: grid; gap: 1px; margin: 4px; padding: 3px 5px; border-left: 2px solid #e5484d; border-radius: 3px; background: rgba(255, 255, 255, .02); }
.hp-ov-call.fire { border-left-color: #f06a3a; }
.hp-ov-call b { overflow: hidden; color: #eef3f9; font-size: 6.5px; text-overflow: ellipsis; white-space: nowrap; }
.hp-ov-call small { color: #8fa2b6; font-size: 5.5px; }
.hp-ov-call .hp-badge { justify-self: start; }
.hp-badge { display: inline-block; padding: 0 4px; border-radius: 2px; background: rgba(147, 171, 199, .12); color: #c3cfdb; font-size: 5px; font-weight: 700; }
.hp-badge.police { background: rgba(74, 144, 255, .2); color: #8dbaff; }
.hp-badge.sheriff { background: rgba(199, 128, 28, .22); color: #f0b25c; }
.hp-badge.fire { background: rgba(229, 72, 77, .2); color: #ff8a8e; }
.hp-badge.dot { background: rgba(215, 154, 31, .22); color: #f3c460; }
.hp-session { display: flex; align-items: center; gap: 6px; padding: 6px; }
.hp-session-icon { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; background: rgba(255, 85, 91, .12); color: #ff8a8e; }
.hp-session-icon svg { width: 10px; height: 10px; }
.hp-session > span:last-child { display: grid; gap: 1px; }
.hp-session small { color: #8fa2b6; font-size: 5.5px; }
.hp-session small em { padding: 0 3px; border-radius: 2px; background: rgba(74, 144, 255, .2); color: #8dbaff; font-size: 4.5px; font-style: normal; font-weight: 700; }
.hp-session b { color: #f3f7fb; font-size: 10px; }
.hp-activity { display: flex; gap: 5px; padding: 3px 6px; border-top: 1px solid rgba(147, 171, 199, .06); color: #c2cfdd; font-size: 5.5px; }
.hp-activity:first-of-type { border-top: 0; }
.hp-activity time { color: #8193a6; }

.hp-tables { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 6px; }
.hp-row { display: grid; grid-template-columns: 1.3fr .8fr 1fr; align-items: center; gap: 4px; padding: 3px 6px; border-top: 1px solid rgba(147, 171, 199, .06); color: #9fb0c3; font-size: 5.5px; white-space: nowrap; }
.hp-row:first-of-type { border-top: 0; }
.hp-row > span { overflow: hidden; text-overflow: ellipsis; }
.hp-row > span:first-child { display: flex; align-items: center; gap: 3px; color: #e4ebf4; }
.hp-row b { color: #eef3f9; }
.hp-row .hp-badge { justify-self: start; }
.hp-avatar { width: 9px; height: 9px; display: grid; place-items: center; border-radius: 50%; background: #1a2638; color: #9fc2ff; font-size: 5px; font-style: normal; }
.hp-status { justify-self: start; padding: 0 4px; border-radius: 2px; background: rgba(47, 211, 155, .14); color: #4fdcaa; font-size: 5px; font-weight: 700; }
.hp-status.busy { background: rgba(74, 144, 255, .18); color: #8dbaff; }

@media (prefers-reduced-motion: reduce) { .hp-call-pin { animation: none; } }
@media (max-width: 760px) {
    .hp-ov, .hp-tables { grid-template-columns: 1fr; }
    .hp-ov-map { min-height: 220px; }
}

/* =========================================
   IN-GAME MODERATION
========================================= */

.app .players-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app .players-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.app .players-actions svg { width: 14px; height: 14px; }
.app .moderation-button {
    padding: 9px 13px; border: 1px solid rgba(229, 72, 77, .45); border-radius: 7px;
    background: rgba(229, 72, 77, .14); color: #ff9a9d; font: inherit; font-size: 10px; cursor: pointer;
}
.app .moderation-button:hover { background: rgba(229, 72, 77, .22); }

.moderation-dialog form { display: grid; gap: 12px; }
.moderation-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border: 1px solid rgba(147, 171, 199, .14); border-radius: 8px; background: #0a1118; }
.moderation-toggle label { position: relative; margin: 0; cursor: pointer; }
.moderation-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.moderation-toggle span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border-radius: 6px; color: #a9b8c8; font-size: 11px; font-weight: 650; }
.moderation-toggle svg { width: 14px; height: 14px; }
.moderation-toggle input:checked + span { background: rgba(229, 72, 77, .18); color: #ffb0b2; box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .4); }
.moderation-toggle input[value="kick"]:checked + span { background: rgba(240, 168, 48, .16); color: #f3c460; box-shadow: inset 0 0 0 1px rgba(240, 168, 48, .4); }
.moderation-toggle input:focus-visible + span { outline: 2px solid #428bff; outline-offset: 1px; }
.moderation-optional { color: #7d8ea1; font-weight: 400; }
.moderation-hint { margin: 0; color: #8fa2b6; font-size: 10.5px; line-height: 1.45; }

.ban-list-dialog { width: min(520px, calc(100vw - 32px)); }
.ban-list-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ban-list-search { flex: 1; display: flex; align-items: center; gap: 7px; margin: 0 !important; padding: 0 10px; border: 1px solid rgba(147, 171, 199, .16); border-radius: 7px; background: #0a1118; }
.ban-list-search svg { width: 14px; height: 14px; color: #7d8ea1; }
.ban-list-search input { min-height: 34px; padding: 0 !important; border: 0 !important; background: transparent !important; }
.ban-list-count { color: #8fa2b6; font-size: 10.5px; white-space: nowrap; }
.ban-list-tools .secondary-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; }
.ban-list-tools .secondary-button svg { width: 14px; height: 14px; }
.ban-list { max-height: 360px; overflow-y: auto; border: 1px solid rgba(147, 171, 199, .1); border-radius: 8px; scrollbar-width: thin; }
.ban-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid rgba(147, 171, 199, .08); }
.ban-row:first-child { border-top: 0; }
.ban-row .member-avatar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; }
.ban-row-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.ban-row-copy strong { overflow: hidden; color: #eef3f9; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ban-row-copy small { color: #8094a8; font-size: 10px; }

/* Map player popup */
.map-player-popup { width: 268px; display: grid; gap: 10px; cursor: default; }
.map-player-popup .popup-head { margin-bottom: 0; }
.popup-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.popup-identity .member-avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; }
.popup-identity > span:last-child { min-width: 0; display: grid; gap: 2px; }
.popup-identity strong { overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.popup-identity small { color: #93a3b4; font-size: 10.5px; }
.popup-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.map-player-popup .ov-team { min-width: 0; }
.popup-tag { padding: 3px 7px; border-radius: 5px; font-size: 10px; font-weight: 650; }
.popup-tag.staff { background: rgba(141, 153, 255, .18); color: #a9b2ff; }
.popup-tag.wanted { background: rgba(229, 72, 77, .18); color: #ff8a8e; }
.map-player-popup .popup-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.map-player-popup .popup-item { padding: 7px 8px; border-radius: 7px; background: rgba(255, 255, 255, .04); }
.map-player-popup .popup-item.wide { grid-column: 1 / -1; }
.popup-plate { margin-left: 4px; padding: 0 5px; border-radius: 3px; background: #f4f4ef; color: #0d1a2b; font-family: ui-monospace, Consolas, monospace; font-size: 10px; font-weight: 800; }
.popup-actions { display: flex; gap: 6px; }
.popup-actions button {
    flex: 1; min-height: 30px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px;
    background: rgba(255, 255, 255, .06); color: #e5edf6; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.popup-actions button:hover { background: rgba(255, 255, 255, .12); }
.popup-actions button[data-game-action="kick"] { border-color: rgba(240, 168, 48, .4); color: #f3c460; }
.popup-actions button.is-danger { border-color: rgba(229, 72, 77, .5); background: rgba(229, 72, 77, .16); color: #ffb0b2; }
.popup-actions button.is-danger:hover { background: rgba(229, 72, 77, .26); }
.server-dialog label.ban-list-search { display: flex; flex-direction: row; align-items: center; }
/* The selected player (and its popup) sits above every other marker. */
.erlc-marker-layer .map-player-marker.selected { z-index: 400; }
.map-player-popup .popup-key { display: block; color: #8fa2b6; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; }
.map-player-popup .popup-value { display: block; margin-top: 3px; color: #eef3f9; font-size: 12px; font-weight: 600; }