:root {
    --bg-main: #080808;
    --bg-panel: #111111;
    --bg-panel-2: #1a1a1a;
    --line: #303030;
    --text-main: #ffffff;
    --text-muted: #d6d6d6;
    --danger: #c94a4a;
    --ok: #48a765;
    --accent: #8c8c8c;
    --font-body: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    background: #040404;
}

html,
body {
    margin: 0;
    min-height: 100%;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.015em;
}

body {
    position: relative;
    background: transparent;
}

.city-skyline,
.film-grain,
.city-haze {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 0;
}

.city-skyline {
    background:
        url('../img/nyc-skyline-bg.png') center bottom / cover no-repeat;
    opacity: 0.88;
}

.film-grain {
    opacity: 0.08;
    background-image: radial-gradient(rgba(255, 255, 255, 0.6) 0.4px, transparent 0.4px);
    background-size: 3px 3px;
}

.city-haze {
    background:
        linear-gradient(180deg,
            #040404 0%,
            #040404 22%,
            rgba(4, 4, 4, 0.98) 38%,
            rgba(4, 4, 4, 0.82) 52%,
            rgba(4, 4, 4, 0.45) 68%,
            rgba(4, 4, 4, 0.12) 84%,
            transparent 100%),
        radial-gradient(ellipse 120% 80% at 50% 100%, rgba(201, 162, 74, 0.06) 0%, transparent 55%);
}

.app-shell {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px;
}

.app-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 12px;
}

.app-layout.guest-layout {
    grid-template-columns: 1fr;
}

.sidebar {
    border: 1px solid var(--line);
    background: linear-gradient(170deg, rgba(22, 22, 22, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%);
    padding: 10px;
    min-height: calc(100vh - 28px);
    position: sticky;
    top: 14px;
}

.sidebar-toggle {
    display: none;
}

.brand-block {
    border-bottom: 1px solid #343434;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* ---- Daypart widget in sidebar brand-block ---- */
.brand-daypart {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 7px 10px 7px 13px;
    border-radius: 2px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.brand-daypart::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}
.dp-graveyard          { color: #a78bfa; }
.dp-graveyard::before  { background: #a78bfa; box-shadow: 0 0 8px rgba(167,139,250,0.5); }
.dp-morning            { color: #fb923c; }
.dp-morning::before    { background: #fb923c; box-shadow: 0 0 8px rgba(251,146,60,0.5); }
.dp-day                { color: #60a5fa; }
.dp-day::before        { background: #60a5fa; box-shadow: 0 0 8px rgba(96,165,250,0.45); }
.dp-night              { color: #818cf8; }
.dp-night::before      { background: #818cf8; box-shadow: 0 0 8px rgba(129,140,248,0.5); }
.bdp-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: 0.85;
}
.bdp-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.bdp-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: currentColor;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.bdp-modifier {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.03em;
}
.bdp-modifier.is-up   { color: var(--ok); }
.bdp-modifier.is-down { color: var(--danger); }
.bdp-time {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    font-family: monospace;
    color: var(--text-dim);
    letter-spacing: 0.05em;
    text-align: right;
    line-height: 1.2;
}
.bdp-tz {
    display: block;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    opacity: 0.6;
    font-family: inherit;
}

.topbar {
    background: linear-gradient(130deg, rgba(26, 26, 26, 0.96) 0%, rgba(12, 12, 12, 0.98) 100%);
    border: 1px solid var(--line);
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
}

.identity {
    text-align: left;
    line-height: 1.35;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.identity-hero {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.identity-avatar-box {
    width: 94px;
    min-width: 94px;
    height: 94px;
    border: 1px solid #444;
    background: #151515;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.identity-avatar-box.is-empty {
    background: #111;
    color: #f1f1f1;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.1;
    padding: 4px;
}

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

.identity-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #5a5a5a;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    background: radial-gradient(circle at 30% 30%, #3a3a3a 0%, #171717 70%);
    color: #ffffff;
}

.identity-stack {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.identity-primary {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    border: 1px solid #3b3b3b;
    background: linear-gradient(120deg, #1f1f1f 0%, #151515 100%);
    padding: 5px 9px;
}

.identity-name {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.04em;
    color: #f2e3cd;
}

.identity-role {
    color: #d4d4d4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
}

.identity-crew-affiliation {
    --crew-color: #8f6b3d;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 2px;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--crew-color) 72%, #1a1a1a 28%);
    background: color-mix(in srgb, var(--crew-color) 18%, #111 82%);
    color: #f6f0e8;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.identity-crew-tag {
    font-weight: 700;
    color: color-mix(in srgb, var(--crew-color) 55%, #ffffff 45%);
}

.identity-mini-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: stretch;
}

.identity-secondary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.identity-chip {
    border: 1px solid #353535;
    background: #171717;
    padding: 5px 8px;
    color: #f5f5f5;
    position: relative;
}

.resource-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    min-width: 182px;
}

.resource-chip .label {
    flex: 0 0 52px;
    text-align: left;
}

.resource-chip [data-resource-value] {
    flex: 0 0 76px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

.regen-next {
    margin-left: 0;
    color: #f5ebd6;
    font-size: 10px;
    opacity: 0.96;
    border: 1px solid #4b4b4b;
    background: #212121;
    padding: 1px 4px;
    letter-spacing: 0.03em;
    display: none;
}

.resource-chip[data-resource-tooltip] {
    cursor: help;
}

.resource-chip[data-resource-tooltip]:hover::after,
.resource-chip[data-resource-tooltip]:focus-within::after {
    content: attr(data-resource-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    border: 1px solid #5a4a34;
    background: #15110d;
    color: #f2dec0;
    padding: 4px 7px;
    font-size: 10px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 20;
}

.resource-chip[data-resource-tooltip]:hover::before,
.resource-chip[data-resource-tooltip]:focus-within::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 3px);
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-right: 1px solid #5a4a34;
    border-bottom: 1px solid #5a4a34;
    background: #15110d;
    pointer-events: none;
    z-index: 19;
}

.resource-chip.is-regen-pop {
    animation: resourceRegenPulse 520ms ease;
}

.resource-chip.is-regen-pop [data-resource-value] {
    animation: resourceRegenValuePulse 520ms ease;
}

.cash-chip-wrap {
    position: relative;
}

.hp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 160px;
    border-color: #3a3535;
    background: linear-gradient(120deg, #1d1917 0%, #151212 100%);
}
.hp-chip .label {
    color: var(--ok);
    font-weight: 700;
}
.hp-bar-wrap {
    flex: 1;
    min-width: 50px;
    height: 6px;
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    overflow: hidden;
    display: block;
    align-self: center;
}
.hp-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--ok);
    transition: width 0.4s ease;
}
.hp-values {
    font-size: 11px;
    font-weight: 700;
    color: var(--ok);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hp-chip--warn .label    { color: var(--warn); }
.hp-chip--warn .hp-bar-fill { background: var(--warn); }
.hp-chip--warn .hp-values   { color: var(--warn); }
.hp-chip--crit .label    { color: var(--danger); }
.hp-chip--crit .hp-bar-fill { background: var(--danger); }
.hp-chip--crit .hp-values   { color: var(--danger); }
.hp-chip--full              { border-color: rgba(72,167,101,0.4); }
.hp-chip--full .label       { color: #6bda8a; }
.hp-chip--full .hp-bar-fill { background: #6bda8a; box-shadow: 0 0 6px rgba(107,218,138,0.5); }
.hp-chip--full .hp-values   { color: #6bda8a; }

.energy-chip {
    border-color: #4f4f4f;
    background: linear-gradient(120deg, #1f1f1f 0%, #171717 100%);
}

.energy-chip,
.energy-chip .regen-next {
    color: #ffd54a;
    font-weight: 700;
}

.nerve-chip {
    border-color: #4f4f4f;
    background: linear-gradient(120deg, #1f1f1f 0%, #171717 100%);
}

.nerve-chip,
.nerve-chip .regen-next {
    color: #87ceeb;
    font-weight: 700;
}
.energy-chip .hp-bar-fill { background: #ffd54a; }
.nerve-chip  .hp-bar-fill { background: #87ceeb; }

.cash-chip-header {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 252px;
    padding-right: 8px;
    border-color: #575757;
    background: linear-gradient(120deg, #242424 0%, #191919 100%);
}

.cash-chip-header .label {
    flex: 0 0 40px;
    text-align: left;
}

.cash-chip-header .cash-value {
    display: inline-block;
    min-width: 20ch;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.time-shift-note {
    border: 1px solid #454545;
    background: #1a1a1a;
    padding: 6px 8px;
    margin-top: 8px;
}

.sound-toggle {
    border: 1px solid #454545;
    background: #191919;
    color: #f6ecd9;
    width: 36px;
    height: 30px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sound-toggle:hover {
    border-color: #767676;
    background: #262626;
}

.sound-icon {
    width: 12px;
    height: 12px;
    position: relative;
    border: 1px solid #f0d2a1;
    border-left-width: 5px;
    background: #3a2d1d;
    clip-path: polygon(0 24%, 44% 24%, 100% 0, 100% 100%, 44% 76%, 0 76%);
}

.sound-icon::before,
.sound-icon::after {
    content: "";
    position: absolute;
    border-right: 2px solid #f0d2a1;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-left: 0;
    border-radius: 50%;
}

.sound-icon::before {
    right: -5px;
    top: 2px;
    width: 4px;
    height: 6px;
    opacity: 0.85;
}

.sound-icon::after {
    right: -9px;
    top: 0;
    width: 7px;
    height: 10px;
    opacity: 0.65;
}

.sound-off-slash {
    position: absolute;
    width: 18px;
    height: 3px;
    background: #ff7f6f;
    transform: rotate(-42deg);
    opacity: 0;
}

.sound-toggle.is-muted .sound-off-slash {
    opacity: 1;
}

.topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    align-self: flex-start;
    flex-shrink: 0;
}

.header-shortcut-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.header-shortcut {
    min-width: 28px;
    height: 28px;
    border: 1px solid #434343;
    background: #1a1a1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 6px;
}

.header-shortcut .shortcut-icon {
    font-size: 11px;
    line-height: 1;
    font-family: var(--font-display);
    letter-spacing: 0.03em;
}

.header-shortcut.is-available {
    border-color: #6d6d6d;
    background: #202020;
}

.header-shortcut.is-available .shortcut-icon {
    color: #ffffff;
    font-weight: 700;
}

.header-shortcut.is-locked {
    border-color: #2f2f2f;
    background: #141414;
}

.header-shortcut.is-locked .shortcut-icon {
    color: #4e4e4e;
    font-weight: 700;
}

.header-shortcut:hover {
    filter: brightness(1.08);
}

.identity-perks-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.perk-chip {
    border: 1px solid #4f4435;
    background: linear-gradient(120deg, #231d16 0%, #18130f 100%);
    color: #eadfc8;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    cursor: help;
}

.perk-chip em {
    font-style: normal;
    color: #c6b08e;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.perk-chip strong {
    font-size: 11px;
    color: #f8e6c5;
}

.perk-chip:hover::after,
.perk-chip:focus-within::after {
    content: attr(data-perk-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    border: 1px solid #5a4a34;
    background: #15110d;
    color: #f2dec0;
    padding: 4px 7px;
    font-size: 10px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 20;
}

.perk-chip:hover::before,
.perk-chip:focus-within::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 3px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #5a4a34;
    pointer-events: none;
    z-index: 19;
}

.perk-manage-link {
    border: 1px solid #4f4435;
    background: #15120e;
    color: #e8d3ad;
    text-decoration: none;
    padding: 4px 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
}

.perk-manage-link:hover {
    filter: brightness(1.08);
    text-decoration: none;
}

/* ── Staff CP toggle ──────────────────────────────────────────── */
.staff-cp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #4a3a28;
    background: #0e0d0b;
    color: #b89a6a;
    height: 30px;
    padding: 0 12px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 700;
    cursor: pointer;
    border-radius: 2px;
    transition: background 120ms, border-color 120ms;
}

.staff-cp-toggle:hover {
    background: #141310;
    filter: brightness(1.1);
}

.staff-cp-toggle.is-admin {
    border-color: #7a2828;
    color: #ff9090;
    background: #130808;
}

.staff-cp-toggle.is-moderator {
    border-color: #2a6a34;
    color: #7ee888;
    background: #081208;
}

.staff-cp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #c94a4a;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
    letter-spacing: 0;
}

/* ── Staff slide-out drawer ───────────────────────────────────── */
.staff-drawer {
    position: fixed;
    top: 14px;
    right: 0;
    width: 300px;
    height: calc(100vh - 28px);
    border: 1px solid #2a2016;
    background: #0a0907;
    box-shadow: -14px 0 32px rgba(0, 0, 0, 0.55);
    transform: translateX(102%);
    transition: transform 220ms ease;
    z-index: 19;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.staff-drawer.is-open {
    transform: translateX(0);
}

.staff-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #1e1a12;
    background: #0c0b09;
    flex-shrink: 0;
}

.staff-drawer-head h3 {
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.staff-drawer-head h3.is-admin {
    color: #ff9090;
}

.staff-drawer-head h3.is-moderator {
    color: #7ee888;
}

.staff-drawer-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.staff-drawer-group {
    border: 1px solid #1e1a12;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.staff-drawer-group-header {
    padding: 7px 12px;
    background: #100f0d;
    border-bottom: 1px solid #1e1a12;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #5a4a30;
}

.staff-drawer-links {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
}

.staff-drawer-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    font-size: 12.5px;
    color: #8a7a5a;
    text-decoration: none;
    border-radius: 3px;
    transition: background 110ms, color 110ms;
}

.staff-drawer-link:hover {
    background: rgba(200, 160, 60, 0.07);
    color: #c0a870;
}

.staff-drawer-link .sdl-icon {
    width: 16px;
    text-align: center;
    font-style: normal;
}

.character-drawer-toggle {
    border: 1px solid #565656;
    background: #1b1b1b;
    color: #f4e6ce;
    height: 30px;
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.character-drawer-toggle:hover {
    border-color: #8a6c3f;
}

.character-drawer {
    position: fixed;
    top: 14px;
    right: 0;
    width: 320px;
    height: calc(100vh - 28px);
    border: 1px solid #4e3f2b;
    background: linear-gradient(165deg, rgba(23, 21, 19, 0.98) 0%, rgba(11, 11, 11, 0.98) 100%);
    box-shadow: -12px 0 28px rgba(0, 0, 0, 0.45);
    transform: translateX(102%);
    transition: transform 220ms ease;
    z-index: 18;
    padding: 10px;
    overflow-y: auto;
}

.character-drawer.is-open {
    transform: translateX(0);
}

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

.character-drawer-head h3 {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.character-drawer-avatar {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    object-position: center top;
    border: 1px solid #5a4a34;
    margin-bottom: 8px;
}

.character-drawer-health {
    margin-bottom: 8px;
}

.character-drawer-health-track {
    margin-top: 4px;
    width: 100%;
    height: 10px;
    border: 1px solid #5d4a2f;
    background: #1b1b1b;
}

.character-drawer-health-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #9f2727 0%, #d47135 45%, #5ea646 100%);
}

.character-drawer-avatar.character-drawer-avatar-empty {
    width: 100%;
    height: 210px;
    border: 1px solid #444;
    background: #111;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    color: #f1f1f1;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.character-drawer-stats {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}

.character-drawer-stats div {
    border: 1px solid #403628;
    background: rgba(0, 0, 0, 0.22);
    padding: 5px 7px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.character-drawer-stats span {
    color: #d3c6af;
}

.character-drawer-perk-row span { color: #f0c040 !important; }
.character-drawer-perk-row strong { color: #f0c040 !important; }

.character-progress-block {
    margin-bottom: 6px;
    display: grid;
    gap: 4px;
    font-size: 11px;
    color: #b0a090;
}

.character-progress-track {
    width: 100%;
    height: 8px;
    border: 1px solid #5b4a33;
    background: #181818;
}

.character-progress-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #665329 0%, #b98f44 55%, #e4c785 100%);
}

.character-drawer-groups {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.character-drawer-group {
    border: 1px solid #433628;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
}

.character-drawer-group h4 {
    margin: 0 0 8px;
    color: #e0cfb0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
}

.character-training-cooldown {
    margin: 4px 0 8px;
    border-left: 2px solid #6f593b;
    padding-left: 7px;
    color: #cdbca0;
    font-size: 11px;
}

.character-training-cooldown-muted {
    border-left-color: #3a3a3a;
    color: #5a5a5a;
}

.character-drawer-actions {
    display: grid;
    gap: 8px;
}

.character-drawer-actions-inline {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.character-drawer-actions form,
.character-drawer-actions-inline form {
    margin: 0;
}

.character-drawer-actions .btn,
.character-drawer-actions-inline .btn {
    width: 100%;
    text-align: center;
}


.profile-avatar.profile-avatar-empty {
    display: grid;
    place-items: center;
    color: #f1f1f1;
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    font-size: 14px;
    text-align: center;
}

/* ─── Bank Page ──────────────────────────────────────────────── */

.bank-page {
    display: grid;
    gap: 16px;
}

.bank-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #252525;
    border: 1px solid #2c2c2c;
}

.bank-header-stat {
    background: #111;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bank-header-stat span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #5a5045;
}

.bank-header-stat strong {
    font-size: 22px;
    font-weight: 700;
    color: #e3be86;
    letter-spacing: -0.01em;
}

.bank-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 680px) {
    .bank-action-grid,
    .bank-header { grid-template-columns: 1fr; }
}

.bank-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bank-card-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9a8a74;
    margin: 0;
}

.bank-form {
    display: grid;
    gap: 10px;
}

.bank-field {
    display: grid;
    gap: 4px;
}

.bank-field label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6a6055;
}

.bank-field input {
    background: #0e0e0e;
    border: 1px solid #2e2e2e;
    color: #e0d4c0;
    padding: 7px 10px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

.bank-field input:focus {
    outline: none;
    border-color: #6f593b;
}

.bank-tax-preview,
.bank-interest-preview {
    font-size: 12px;
    color: #8a8070;
    padding: 6px 8px;
    background: rgba(0,0,0,0.25);
    border-left: 2px solid #6f593b;
}

.bank-tax-preview strong,
.bank-interest-preview strong {
    color: #e3be86;
}

.bank-submit-btn {
    margin-top: 2px;
}

/* Rate option cards */
.bank-rate-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bank-rate-card {
    cursor: pointer;
    display: block;
}

.bank-rate-card input {
    display: none;
}

.bank-rate-card-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #2c2820;
    background: #0e0e0e;
    transition: border-color 120ms ease, background 120ms ease;
}

.bank-rate-card.is-selected .bank-rate-card-inner,
.bank-rate-card:hover .bank-rate-card-inner {
    border-color: #7a5c30;
    background: rgba(80, 55, 15, 0.2);
}

.bank-rate-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a6a55;
}

.bank-rate-pct {
    font-size: 22px;
    font-weight: 700;
    color: #e3be86;
}

.bank-rate-tag {
    font-size: 10px;
    color: #5a5045;
}

/* Deposit ledger */
.bank-ledger {
    padding-bottom: 10px;
}

.bank-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bank-section-head h3 {
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #c8bca8;
}

.bank-collect-all-btn {
    font-size: 11px;
    padding: 4px 10px;
}

.bank-deposit-group {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
}

.bank-group-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 3px 0;
    margin-bottom: 2px;
    color: #5a5045;
    border-bottom: 1px solid #222;
}

.bank-group-label.is-ready { color: #4a8a4a; border-color: #2a4028; }
.bank-group-label.is-active { color: #8f6b3d; border-color: #4a3515; }

.bank-deposit-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #242018;
    background: #0d0d0d;
}

.bank-deposit-row.is-matured {
    border-color: #2a4028;
    background: rgba(20, 45, 20, 0.25);
}

.bank-deposit-row.is-past {
    opacity: 0.5;
}

.bank-deposit-info strong {
    display: block;
    font-size: 14px;
    color: #d4c8b4;
}

.bank-deposit-sub {
    display: block;
    font-size: 10px;
    color: #5a5045;
    margin-top: 2px;
}

.bank-deposit-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.bank-deposit-badge {
    display: inline-block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 6px;
    border: 1px solid currentColor;
}

.bank-deposit-badge.is-ready-badge   { color: #4a8a4a; }
.bank-deposit-badge.is-locked-badge  { color: #8f6b3d; }
.bank-deposit-badge.is-collected-badge { color: #4a5a6a; }
.bank-deposit-badge.is-early-badge   { color: #8a4a4a; }

.bank-deposit-return {
    font-size: 11px;
    color: #7a7060;
}

.bank-deposit-countdown {
    font-size: 11px;
    color: #8f6b3d;
    font-variant-numeric: tabular-nums;
}

.bank-deposit-action form {
    margin: 0;
}

.bank-collect-btn {
    font-size: 11px;
    padding: 4px 10px;
    min-width: 72px;
}

.bank-withdraw-btn {
    font-size: 11px;
    padding: 4px 10px;
    min-width: 100px;
    border-color: #6a3030;
    color: #c47070;
}

.bank-withdraw-btn:hover:not(:disabled) {
    border-color: #9a4040;
    color: #e08080;
    background: rgba(100,30,30,0.15);
}

/* Past deposits collapsible */
.bank-past-deposits {
    margin-top: 4px;
}

.bank-past-deposits summary {
    cursor: pointer;
    font-size: 11px;
    color: #5a5045;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 4px 0;
    user-select: none;
}

.bank-past-deposits summary:hover {
    color: #8a7a60;
}

/* Transfer history */
.bank-transfer-list {
    display: grid;
    gap: 4px;
}

.bank-transfer-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #202020;
    background: #0d0d0d;
}

.bank-transfer-row.is-in  { border-left: 2px solid #2a5a2a; }
.bank-transfer-row.is-out { border-left: 2px solid #5a2a2a; }

.bank-transfer-badge {
    display: inline-block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 6px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.bank-transfer-badge.is-in-badge  { color: #4a8a4a; }
.bank-transfer-badge.is-out-badge { color: #8a4a4a; }

.bank-transfer-party {
    font-size: 13px;
    color: #c0b4a0;
}

.bank-transfer-amounts {
    text-align: right;
}

.bank-transfer-amounts strong {
    display: block;
    font-size: 14px;
    color: #d4c8b4;
}

.bank-transfer-row.is-in  .bank-transfer-amounts strong { color: #5ab05a; }
.bank-transfer-row.is-out .bank-transfer-amounts strong { color: #b05a5a; }

.bank-transfer-amounts span {
    font-size: 10px;
    color: #5a5045;
}

.bank-transfer-time {
    font-size: 10px;
    white-space: nowrap;
    text-align: right;
}

/* ─── Character Page ─────────────────────────────────────────── */

.char-page {
    display: grid;
    gap: 16px;
}

/* Top two-col grid: core + snapshot */
.char-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Bottom two-col grid: weapon + protection command */
.char-cmd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 720px) {
    .char-top-grid,
    .char-cmd-grid {
        grid-template-columns: 1fr;
    }
}

.char-card-title {
    margin: 0 0 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9a8a74;
}

/* ── Gear pairs (weapon/bullets, protection) */
.char-gear-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-bottom: 8px;
    background: #252525;
    border: 1px solid #2c2c2c;
}

.char-gear-wide {
    grid-column: 1 / -1;
}

.char-gear-cell {
    background: #141414;
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.char-gear-cell-right {
    border-left: 1px solid #252525;
}

.char-gear-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6a6055;
}

.char-gear-name {
    font-size: 15px;
    color: #e8dcc8;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.char-ammo {
    color: #e3be86;
}

/* ── Bar shared styles */
.char-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
    font-size: 11px;
    color: #7a7060;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.char-pct {
    font-style: normal;
    color: #a09075;
    font-size: 10px;
}

.char-bar {
    width: 100%;
    height: 8px;
    background: #171717;
    border: 1px solid #2a2a2a;
    overflow: hidden;
}

.char-bar .char-bar-fill {
    height: 100%;
    transition: width 0.4s ease;
}

/* Health: red → orange → green */
.char-bar-health .char-bar-fill {
    background: linear-gradient(90deg, #8c2424 0%, #c87030 45%, #3d8f54 100%);
    background-size: 200% 100%;
}

/* Weapon skill: gold gradient */
.char-bar-weapon .char-bar-fill {
    background: linear-gradient(90deg, #4a3510 0%, #8f6b3d 45%, #e3be86 100%);
}

/* Armor integrity: red → amber → steel blue */
.char-bar-armor .char-bar-fill {
    background: linear-gradient(90deg, #7a2222 0%, #a06030 45%, #3d6a9a 100%);
}

/* ── Health block */
.char-health-block {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid #252525;
    background: #0e0e0e;
}

/* ── Combat rating row */
.char-combat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #222;
    border: 1px solid #2c2c2c;
    margin-top: 4px;
}

.char-combat-cell {
    background: #111;
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.char-combat-cell span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a5045;
}

.char-combat-cell strong {
    font-size: 22px;
    font-weight: 700;
    color: #ddd4c0;
    letter-spacing: -0.01em;
}

.char-perk-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 7px 12px;
    background: #0e1a0e;
    border: 1px solid #2a4a2a;
    border-radius: 3px;
    font-size: 0.78rem;
}
.char-perk-badge-icon { font-size: 1rem; }
.char-perk-badge-text { color: #a0c8a0; }
.char-perk-badge-text em { color: #4caf50; font-style: normal; font-weight: 600; }

/* ── Snapshot card */
.char-prog-block {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #252525;
    background: #0e0e0e;
}

.char-snapshot-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #222;
    border: 1px solid #2c2c2c;
    margin-top: 4px;
}

.char-snap-stat {
    background: #111;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.char-snap-stat span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a5045;
}

.char-snap-stat strong {
    font-size: 20px;
    font-weight: 700;
    color: #ddd4c0;
}

/* ── Command cards (weapon / protection) */
.char-cmd-card {
    display: flex;
    flex-direction: column;
}

.char-cmd-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.char-cmd-head h3 {
    margin: 0 0 4px;
    font-size: 13px;
    color: #d4c8b4;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.char-cmd-head .meta {
    margin: 0;
}

.char-train-form {
    flex-shrink: 0;
}

.char-train-btn {
    white-space: nowrap;
}

.char-cooldown-bar {
    margin-bottom: 10px;
    padding: 5px 9px;
    border-left: 2px solid #6f593b;
    background: rgba(0,0,0,0.2);
    font-size: 11px;
    color: #c0af95;
}

.char-cooldown-bar-muted {
    border-left-color: #3a3a3a;
    color: #6a6a6a;
}

/* ── Upgrade list rows */
.char-upgrade-list {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

.char-upgrade-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #2c2820;
    background: #0f0f0f;
}

.char-upgrade-row.is-owned {
    border-color: #2a4028;
    background: rgba(24, 52, 28, 0.25);
}

.char-upgrade-row.is-next {
    border-color: #5c4020;
    background: rgba(40, 28, 8, 0.35);
}

.char-upgrade-row.is-future {
    opacity: 0.5;
}

.char-upgrade-info strong {
    display: block;
    font-size: 12px;
    color: #d4c8b4;
}

.char-upgrade-info small {
    display: block;
    font-size: 10px;
    color: #6a6055;
    margin-top: 2px;
}

.char-upgrade-row.is-owned .char-upgrade-info strong {
    color: #7ab87a;
}

.char-upgrade-price {
    font-size: 11px;
    color: #9a8a74;
    text-align: right;
    white-space: nowrap;
}

.char-upgrade-action {
    min-width: 64px;
    text-align: right;
}

.char-buy-btn {
    min-width: 56px;
    padding: 4px 10px;
    font-size: 11px;
}

.char-gold-buy-btn {
    min-width: 68px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #1a1000;
    background: linear-gradient(135deg, #e4c040 0%, #f0a000 100%);
    border: 1px solid #b07800;
    border-radius: 3px;
    cursor: pointer;
}
.char-gold-buy-btn:hover { background: linear-gradient(135deg, #f0d050 0%, #f8b800 100%); }

.char-gold-badge {
    font-size: 9px;
    font-weight: 700;
    color: #f0c040;
    background: #1a1200;
    border: 1px solid #5a4000;
    border-radius: 2px;
    padding: 1px 5px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.char-gold-cost {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f0c040;
}

.char-upgrade-row.is-gold-tier {
    background: linear-gradient(90deg, #120e00 0%, #0e0d0b 100%);
    border-color: #5a4000;
}

.char-upgrade-tag {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
}

.char-upgrade-tag.is-owned-tag {
    color: #4a8a4a;
    border: 1px solid #2a4a2a;
    background: rgba(24, 52, 24, 0.3);
}

.char-upgrade-tag.is-locked-tag {
    color: #4a4040;
    border: 1px solid #2c2828;
    background: transparent;
}



.notification-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #454545;
    background: #191919;
    color: #f6ecd9;
    text-decoration: none;
    width: 34px;
    height: 30px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}

body.daypart-graveyard .topbar,
body.daypart-graveyard .dashboard-hero,
body.daypart-graveyard .message-center-hero {
    background: linear-gradient(120deg, rgba(28, 28, 28, 0.96) 0%, rgba(12, 12, 12, 0.98) 100%);
}

body.daypart-morning .topbar,
body.daypart-morning .dashboard-hero,
body.daypart-morning .message-center-hero {
    background: linear-gradient(120deg, rgba(34, 34, 34, 0.96) 0%, rgba(14, 14, 14, 0.98) 100%);
}

body.daypart-night .topbar,
body.daypart-night .dashboard-hero,
body.daypart-night .message-center-hero {
    background: linear-gradient(120deg, rgba(24, 24, 24, 0.97) 0%, rgba(10, 10, 10, 0.99) 100%);
}

.notification-link:hover {
    border-color: #767676;
    background: #262626;
}

.rewards-link {
    border-color: #3f4a3f;
    background: #141a14;
}

.rewards-link.has-items {
    border-color: #57a064;
    background: #162319;
    box-shadow: 0 0 0 1px rgba(87, 160, 100, 0.4), 0 0 12px rgba(87, 160, 100, 0.45);
}

.rewards-link:hover {
    border-color: #66b774;
    background: #1b2b1f;
}

.reward-icon {
    width: 12px;
    height: 10px;
    position: relative;
    display: inline-block;
    border: 1px solid #9ad9a4;
    background: linear-gradient(160deg, #1e3022 0%, #152118 100%);
}

.reward-icon::before,
.reward-icon::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 5px;
    height: 5px;
    border: 1px solid #9ad9a4;
    border-bottom: none;
    background: transparent;
}

.reward-icon::before {
    left: 0;
    border-right: none;
}

.reward-icon::after {
    right: 0;
    border-left: none;
}

.notification-icon {
    width: 12px;
    height: 10px;
    border: 1px solid #d8d8d8;
    border-radius: 5px 5px 2px 2px;
    position: relative;
    display: inline-block;
}

.notification-icon::before {
    content: "";
    position: absolute;
    left: 4px;
    top: -4px;
    width: 2px;
    height: 2px;
    border: 1px solid #d8d8d8;
    border-radius: 50%;
}

.notification-icon::after {
    content: "";
    position: absolute;
    left: 4px;
    bottom: -3px;
    width: 2px;
    height: 2px;
    background: #d8d8d8;
    border-radius: 50%;
}

.notification-badge {
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4e4e4e;
    color: #ffffff;
    border: 1px solid #7a7a7a;
    font-weight: 700;
    font-size: 9px;
}

.notification-badge.is-hidden {
    display: none;
}

.heat-meter {
    display: inline-flex;
    gap: 2px;
    padding: 2px 4px;
    border: 1px solid #3f3327;
    background: #1b1612;
    vertical-align: middle;
}

.heat-seg {
    width: 6px;
    height: 10px;
    background: #2a231c;
    border: 1px solid #3d3126;
}

.heat-meter.heat-low .heat-seg.on {
    background: #4b8a49;
    border-color: #68a764;
}

.heat-meter.heat-mid .heat-seg.on {
    background: #b07a2b;
    border-color: #d09e4b;
}

.heat-meter.heat-high .heat-seg.on {
    background: #a43a31;
    border-color: #c8584d;
}

.heat-percent {
    margin-left: 6px;
    color: #d8c7ac;
    font-size: 10px;
    vertical-align: middle;
}

.resource-delta {
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translate(-50%, -28px);
    opacity: 0;
    white-space: nowrap;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 0 10px rgba(255, 42, 42, 0.6);
    z-index: 3;
    color: #ff2f2f;
}

.resource-delta.nerve {
    color: #ff2f2f;
}

.label {
    color: var(--accent);
    margin-right: 4px;
    text-transform: uppercase;
    font-family: var(--font-display);
}

.nav {
    margin-top: 0;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    align-items: stretch;
}

.nav-label {
    margin-top: 8px;
    margin-bottom: 2px;
    padding: 0 2px;
    color: #d0b88f;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-display);
    font-size: 9px;
}

.nav-label:first-child {
    margin-top: 0;
}

.nav a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    text-decoration: none;
    border: 1px solid var(--line);
    background: linear-gradient(120deg, #1d1d1d 0%, #141414 100%);
    color: var(--text-main);
    padding: 7px 10px;
    min-height: 32px;
    font-family: var(--font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
    text-align: left;
}

.nav a:hover {
    border-color: var(--accent);
    background: linear-gradient(120deg, #292929 0%, #1f1f1f 100%);
    transform: translateY(-1px);
}

.nav a.is-active,
.nav-submenu a.is-active {
    border-color: #9f9f9f;
    background: linear-gradient(120deg, #333333 0%, #252525 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.nav a:focus-visible {
    outline: 1px solid #c39a62;
    outline-offset: 1px;
}

.nav-collapsible {
    display: grid;
    gap: 4px;
}

.nav-collapsible > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    border: 1px solid var(--line);
    background: linear-gradient(120deg, #1d1d1d 0%, #141414 100%);
    color: var(--text-main);
    padding: 7px 10px;
    min-height: 32px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.nav-collapsible > summary::-webkit-details-marker {
    display: none;
}

.nav-collapsible > summary::after {
    content: "+";
    color: #baa179;
    font-size: 13px;
    line-height: 1;
}

.nav-collapsible[open] > summary::after {
    content: "-";
}

.nav-collapsible > summary:hover,
.nav-collapsible > summary:focus-visible {
    border-color: var(--accent);
    background: linear-gradient(120deg, #292929 0%, #1f1f1f 100%);
    transform: translateY(-1px);
}

.nav-collapsible.is-active > summary,
.nav-collapsible[open] > summary {
    border-color: #9f9f9f;
    background: linear-gradient(120deg, #333333 0%, #252525 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.nav-submenu {
    display: grid;
    gap: 4px;
    padding-left: 8px;
    border-left: 2px solid #61503a;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-3px);
    transition: max-height 180ms ease, opacity 140ms ease, transform 180ms ease;
}

.nav-collapsible[open] .nav-submenu {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
}

.content {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.guest-topbar {
    justify-content: space-between;
}

.guest-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.guest-nav a {
    color: var(--text-main);
    text-decoration: none;
    border: 1px solid var(--line);
    background: var(--bg-panel);
    padding: 6px 10px;
}

.guest-nav a:hover {
    border-color: var(--accent);
    background: #211c17;
}

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

.panel {
    background: linear-gradient(150deg, rgba(24, 24, 24, 0.96) 0%, rgba(10, 10, 10, 0.96) 100%);
    border: 1px solid var(--line);
    padding: 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.panel h2 {
    margin-top: 0;
    margin-bottom: 8px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero p {
    max-width: 68ch;
}

.auth-switch {
    margin-bottom: 10px;
}

.form-inline {
    max-width: 100%;
    margin-bottom: 10px;
}

.auth-hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.auth-landing {
    border-color: #4a3b2a;
}

.auth-landing-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) minmax(320px, 1fr);
    gap: 14px;
    align-items: start;
}

.auth-pitch {
    border: 1px solid #3f3226;
    background: linear-gradient(140deg, #1a1511 0%, #120f0d 100%);
    padding: 14px;
}

.auth-pitch h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

.auth-pitch ul {
    margin: 10px 0;
    padding-left: 18px;
    color: #d8c6ac;
}

.auth-pitch li {
    margin-bottom: 5px;
}

.auth-panel-wrap {
    border: 1px solid #4c3a2a;
    background: linear-gradient(140deg, #1a1612 0%, #13100d 100%);
    padding: 14px;
}

.auth-panel-wrap h3 {
    margin-top: 0;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.auth-switch-inline {
    margin-top: 10px;
}

.auth-card {
    border: 1px solid #3f3327;
    background: #15110d;
}

.auth-card.is-active {
    border-color: #6d5538;
    box-shadow: inset 0 0 0 1px rgba(211, 173, 118, 0.16);
}

.ban-appeal-box {
    border-top: 1px solid #4c3a2a;
    margin-top: 10px;
    padding-top: 8px;
}

.ban-appeal-box h4 {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    align-items: center;
}

.hero-seal-wrap {
    display: flex;
    justify-content: center;
}

.hero-seal {
    width: min(220px, 100%);
    opacity: 0.9;
    filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.5));
}

.skyline-panel {
    overflow: hidden;
    padding: 0;
}

.hero-image {
    width: 100%;
    display: block;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.grid.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.stat-card {
    border: 1px solid var(--line);
    background: var(--bg-panel-2);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-card span {
    color: var(--text-muted);
    text-transform: uppercase;
    font-family: var(--font-display);
}

.stat-card strong {
    font-size: 14px;
    color: #ead9bf;
}

.meta {
    color: var(--text-muted);
}

.alert {
    border: 1px solid var(--line);
    padding: 14px 16px;
    margin: 10px 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.alert-success {
    background: rgba(72, 167, 101, 0.16);
    border-color: var(--ok);
}

.alert-error {
    background: rgba(201, 74, 74, 0.16);
    border-color: var(--danger);
}

.alert-info {
    background: rgba(181, 138, 75, 0.15);
    border-color: var(--accent);
}

.btn {
    background: linear-gradient(120deg, #2f2f2f 0%, #464646 100%);
    color: #ffffff;
    border: 1px solid #5f5f5f;
    padding: 7px 11px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-block;
}

.cash-value {
    position: relative;
    display: inline-block;
}

.cash-chip {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 3px);
    transform: translateX(-50%);
    display: inline-block;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    color: #c8f0a6;
    animation: cashChip 1.4s ease forwards;
    pointer-events: none;
    z-index: 6;
}

.cash-chip.loss {
    color: #ff8f8f;
}

.owner-live-trend {
    display: inline-flex;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1;
    vertical-align: middle;
}

.owner-live-trend.up {
    color: #58c26b;
}

.owner-live-trend.down {
    color: #e05252;
}

.btn:hover {
    filter: brightness(1.06);
}

.panel a {
    color: #e9cd9f;
    text-decoration: none;
}

.panel a:visited {
    color: #e9cd9f;
}

.panel a:hover {
    color: #ffd9a0;
    text-decoration: underline;
}

.panel a.btn:hover {
    text-decoration: none;
}

.link-muted {
    color: #f3e5cf;
    text-decoration: none;
}

.link-muted:visited {
    color: #f3e5cf;
}

.link-muted:hover {
    color: #ffd9a0;
    text-decoration: underline;
}

.btn:disabled {
    background: #2a2622;
    border-color: #433c35;
    color: #81766a;
    cursor: not-allowed;
    filter: none;
}

.btn-ghost {
    background: transparent;
    border-color: var(--line);
}

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

.action-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border: 1px solid #3a3024;
    background: #1a1511;
    padding: 7px 9px;
    margin-bottom: 10px;
}

.action-toolbar .actions {
    align-items: center;
}

.action-toolbar .actions form {
    margin: 0;
}

.filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f5f5f5;
}

.filter-toggle input {
    accent-color: #b58a4b;
}

.actions.stack {
    flex-direction: column;
    align-items: flex-start;
}

.form-panel {
    max-width: 420px;
    gap: 7px;
}

input,
button {
    font: inherit;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid #4a3d2e;
    background: #15110d;
    color: #f2e8d6;
    padding: 7px 8px;
}

textarea {
    min-height: 92px;
    resize: vertical;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.activity-card {
    border: 1px solid var(--line);
    background: var(--bg-panel-2);
    padding: 10px;
    position: relative;
    overflow: hidden;
    animation: cardFade 360ms ease both;
}

.activity-card.crime-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 5px;
    min-height: 62px;
    padding: 8px;
}

.crime-row .activity-image {
    flex: 0 0 68px;
    width: 68px;
    height: 48px;
    margin: 0;
}

.crime-row .row-main {
    flex: 1 1 200px;
    min-width: 170px;
}

.crime-row .row-main h3 {
    margin: 0 0 2px;
    font-size: 11px;
}

.crime-row .row-main p {
    margin: 0;
    color: #cfc5b5;
    white-space: normal;
    overflow: hidden;
    max-height: 3.6em;
    font-size: 10px;
}

.crime-row .row-requirements {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 290px;
    min-width: 210px;
    align-items: center;
    gap: 4px;
}

.crime-row .row-requirements span {
    border: 1px solid #3b3126;
    background: #201912;
    padding: 2px 6px;
}

.crime-row .row-requirements .req-cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    border: 1px solid #3b3126;
    background: #1b1612;
}

.crime-row .row-requirements .req-inline {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    flex-wrap: wrap;
}

.crime-row .row-requirements .reward-cell {
    position: relative;
    overflow: hidden;
    border-color: #6f5530;
    flex: 1 1 190px;
    min-width: 170px;
}

.crime-row .row-requirements .reward-cell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    animation: none;
}

.crime-row .row-requirements .req-cell em {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #bca88c;
    opacity: 0.9;
    font-size: 9px;
}

.crime-row .row-requirements .req-cell strong {
    color: #f4efe5;
    font-size: 10px;
}

.crime-row .row-requirements .req-cell.req-energy strong {
    color: #ffd54a;
}

.crime-row .row-requirements .req-cell.req-nerve strong {
    color: #87ceeb;
}

.crime-row .row-stats {
    flex: 0 0 110px;
    min-width: 98px;
    text-align: left;
}

.crime-row .row-stats strong {
    font-size: 12px;
    color: #f5dfbe;
}

.crime-row .row-stats .odds-bar {
    margin-top: 2px;
    width: 100%;
    height: 6px;
    border: 1px solid #3d3125;
    background: #15120f;
    overflow: hidden;
}

.crime-row .row-stats .odds-bar span {
    display: block;
    height: 100%;
    width: 0;
    transition: width 220ms ease;
}

.crime-row .row-stats .odds-bar.low span {
    background: linear-gradient(90deg, #7a2a20, #b14f34);
}

.crime-row .row-stats .odds-bar.mid span {
    background: linear-gradient(90deg, #8f5e24, #c6944c);
}

.crime-row .row-stats .odds-bar.high span {
    background: linear-gradient(90deg, #355e2e, #67a95a);
}

.crime-row .row-stats span {
    display: block;
    color: #bcae99;
}

.crime-row .availability-tag {
    flex: 0 1 auto;
    margin: 0;
}

.crime-row .row-action {
    flex: 0 0 auto;
    margin: 0;
    margin-left: auto;
}

.crime-row .row-action .btn {
    white-space: nowrap;
    padding: 5px 8px;
    min-height: 29px;
    font-size: 10px;
}

.crimes-page .cards.cards-rows {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: hidden;
}

.crimes-page {
    overflow-x: hidden;
}

.crimes-page .action-toolbar {
    border: 1px solid #4a3828;
    background: linear-gradient(145deg, #1a1511 0%, #120f0c 100%);
    box-shadow: inset 0 0 0 1px rgba(183, 145, 96, 0.08);
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
}

.crimes-page .action-toolbar .actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.crimes-page .action-toolbar .filter-toggle,
.crimes-page .action-toolbar .meta,
.crimes-page .action-toolbar .btn {
    white-space: nowrap;
}

.crimes-page .activity-card.crime-row {
    border-color: #4b3a29;
    background:
        linear-gradient(145deg, rgba(27, 22, 17, 0.97) 0%, rgba(15, 13, 11, 0.98) 100%),
        radial-gradient(circle at 85% 12%, rgba(196, 150, 92, 0.08) 0%, rgba(0, 0, 0, 0) 44%);
    box-shadow: inset 0 0 0 1px rgba(201, 161, 108, 0.08), 0 8px 16px rgba(0, 0, 0, 0.28);
    display: grid;
    grid-template-columns: 68px minmax(190px, 1.1fr) minmax(260px, 1.55fr) minmax(104px, 0.55fr) auto;
    align-items: center;
    overflow: visible;
}

.crimes-page .activity-card.crime-row:hover,
.crimes-page .activity-card.crime-row:focus-within {
    z-index: 25;
}

.crimes-page .crime-row .row-main h3 {
    color: #ecd3ad;
}

.crimes-page .crime-row .row-requirements .req-cell {
    border-color: #4a3827;
    background: #19140f;
}

.crimes-page .crime-row .row-main,
.crimes-page .crime-row .row-requirements,
.crimes-page .crime-row .row-stats {
    min-width: 0;
}

.crimes-page .crime-row .row-action {
    margin-left: 0;
}

.crimes-page .crime-row .row-requirements .req-inline {
    gap: 5px;
}

.crimes-page .crime-row .req-cell-drops {
    position: relative;
    z-index: 2;
}

.crimes-page .crime-drop-trigger {
    appearance: none;
    border: 1px dashed #5c4a34;
    background: #211810;
    color: #edd9b7;
    padding: 1px 6px;
    font-size: 10px;
    line-height: 1.3;
    cursor: pointer;
}

.crimes-page .crime-drop-trigger:focus-visible {
    outline: 1px solid #8f734f;
    outline-offset: 1px;
}

.crimes-page .crime-drop-trigger:hover {
    border: 1px dashed #5c4a34;
    background: #281d13;
    color: #f3dfbc;
}

.crimes-page .crime-drop-tooltip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    min-width: 230px;
    max-width: 320px;
    border: 1px solid #5a4731;
    background: #13100d;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    padding: 6px 7px;
    display: none;
    z-index: 40;
}

.crimes-page .req-cell-drops:hover .crime-drop-tooltip,
.crimes-page .req-cell-drops:focus-within .crime-drop-tooltip {
    display: grid;
    gap: 4px;
}

.crimes-page .crime-drop-tooltip-line {
    color: #dcc8a8;
    font-size: 10px;
    line-height: 1.3;
}

@media (max-width: 1100px) {
    .crimes-page .activity-card.crime-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .crimes-page .action-toolbar {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .crimes-page .action-toolbar .actions {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}

.major-heist-card {
    align-items: flex-start;
    border-color: #3f3a32;
    background:
        linear-gradient(145deg, rgba(24, 22, 19, 0.95) 0%, rgba(15, 14, 12, 0.96) 100%),
        radial-gradient(circle at 90% 10%, rgba(188, 170, 139, 0.05) 0%, rgba(0, 0, 0, 0) 38%);
    box-shadow: inset 0 0 0 1px rgba(132, 113, 84, 0.12);
}

.major-heists-page > h2 {
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.major-heists-page .action-toolbar {
    border: 1px solid #433829;
    background: #18140f;
    padding: 7px 8px;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
}

.major-heists-page .action-toolbar .filter-toggle,
.major-heists-page .action-toolbar .meta {
    white-space: nowrap;
}

.major-heists-page .action-toolbar .meta {
    margin-left: auto;
}

.numbers-page .action-toolbar {
    border: 1px solid #4a3828;
    background: linear-gradient(145deg, #1a1511 0%, #120f0c 100%);
    box-shadow: inset 0 0 0 1px rgba(183, 145, 96, 0.08);
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
}

.numbers-page .action-toolbar .filter-toggle,
.numbers-page .action-toolbar .meta {
    white-space: nowrap;
}

.numbers-page .action-toolbar .meta {
    margin-left: auto;
}

.car-theft-page .action-toolbar {
    border: 1px solid #4a3828;
    background: linear-gradient(145deg, #1a1511 0%, #120f0c 100%);
    box-shadow: inset 0 0 0 1px rgba(183, 145, 96, 0.08);
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
}

.numbers-page .activity-card.crime-row,
.car-theft-page .activity-card.crime-row {
    border-color: #4b3a29;
    background:
        linear-gradient(145deg, rgba(27, 22, 17, 0.97) 0%, rgba(15, 13, 11, 0.98) 100%),
        radial-gradient(circle at 85% 12%, rgba(196, 150, 92, 0.08) 0%, rgba(0, 0, 0, 0) 44%);
    box-shadow: inset 0 0 0 1px rgba(201, 161, 108, 0.08), 0 8px 16px rgba(0, 0, 0, 0.28);
}

.numbers-page .crime-row .row-main h3,
.car-theft-page .crime-row .row-main h3 {
    color: #ecd3ad;
}

.numbers-page .crime-row .row-requirements .req-cell,
.car-theft-page .crime-row .row-requirements .req-cell {
    border-color: #4a3827;
    background: #19140f;
}

.car-theft-page .action-toolbar .filter-toggle,
.car-theft-page .action-toolbar .meta {
    white-space: nowrap;
}

.car-theft-page .action-toolbar .meta {
    margin-left: auto;
}

.major-heist-tabs-shell {
    margin-top: 10px;
}

.major-heists-main-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
    margin-bottom: 8px;
}

.major-heists-main-tabs .btn {
    border-color: #5d4830;
    background: #1a140e;
    color: #dcc6a6;
}

.major-heists-main-tabs .btn.is-active {
    border-color: #896947;
    background: linear-gradient(135deg, #312418 0%, #22180f 100%);
    color: #ffecce;
    box-shadow: inset 0 0 0 1px rgba(199, 163, 115, 0.24);
}

.major-heist-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.major-heist-tab-btn {
    border-color: #5d4830;
    background: #1a140e;
    color: #dcc6a6;
}

.major-heist-tab-btn.is-ready {
    border-color: #3f8a52;
    box-shadow: inset 0 0 0 1px rgba(93, 193, 117, 0.2);
}

.major-heist-tab-btn.is-blocked {
    border-color: #8b3f3f;
    box-shadow: inset 0 0 0 1px rgba(191, 89, 89, 0.16);
}

.major-heist-tab-btn span {
    opacity: 0.8;
}

.major-heist-tab-btn:hover {
    border-color: #7d623f;
    color: #f0ddc0;
}

.major-heist-tab-btn.is-active {
    border-color: #896947;
    background: linear-gradient(135deg, #312418 0%, #22180f 100%);
    color: #ffecce;
    box-shadow: inset 0 0 0 1px rgba(199, 163, 115, 0.24);
}

.major-heist-tab-btn.is-ready.is-active {
    border-color: #57b16c;
}

.major-heist-tab-btn.is-blocked.is-active {
    border-color: #bc5555;
}

.major-heist-tab-panel {
    display: block;
}

.major-heist-tab-kicker {
    margin: 0 0 8px;
    color: #c5b196;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.smuggling-page .stats {
    margin-top: 9px;
}

.smuggling-page .stats .stat-card {
    padding: 8px 9px;
}

.smuggling-run-panel {
    border-color: #4a3b2a;
    background: linear-gradient(148deg, rgba(26, 21, 16, 0.95) 0%, rgba(13, 11, 9, 0.98) 100%);
}

.smuggling-run-panel > h3 {
    margin-bottom: 6px;
}

.smuggling-run-hero {
    display: grid;
    grid-template-columns: minmax(220px, 0.88fr) minmax(300px, 1fr);
    gap: 10px;
    align-items: start;
}

.smuggling-run-copy {
    font-size: 12px;
}

.smuggling-kicker {
    margin: 0 0 4px;
    color: #ccb18c;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.smuggling-run-copy h4 {
    margin: 0 0 6px;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f3debf;
}

.smuggling-run-copy .meta {
    line-height: 1.4;
}

.smuggling-run-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.smuggling-run-chip {
    border: 1px solid #58432d;
    background: #1c150f;
    color: #dec9ab;
    padding: 2px 7px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 9px;
}

.smuggling-run-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    align-items: stretch;
    border: 1px solid #463525;
    background: rgba(12, 9, 7, 0.72);
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.smuggling-flow-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    position: relative;
    padding-bottom: 2px;
    min-width: 760px;
}

.smuggling-flow-step {
    min-width: 0;
}

.smuggling-flow-step .meta {
    display: block;
    margin-bottom: 4px;
}

.smuggling-flow-step-submit {
    position: relative;
}

.smuggling-step-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #d7c1a1;
}

.smuggling-step-index {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid #7f6445;
    background: #1f1710;
    color: #f0ddbe;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.smuggling-flow-step-submit .btn,
.smuggling-flow-step-submit .availability-tag {
    width: 100%;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.smuggling-flow-step-submit .availability-tag {
    padding: 5px 8px;
    margin: 0;
}

.smuggling-flow-row .smuggling-flow-step:not(:last-child)::after {
    content: ">";
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(4px);
    color: #8f7354;
    font-weight: 700;
    font-size: 12px;
    pointer-events: none;
}

.smuggling-flow-row .smuggling-flow-step {
    position: relative;
}

.smuggling-flow-step select {
    max-width: 100%;
}

.smuggling-flow-step-submit .btn {
    white-space: normal;
}

.smuggling-detail-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) minmax(170px, 0.9fr) minmax(220px, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 760px;
}

.smuggling-run-form .meta {
    font-size: 10px;
}

.smuggling-run-form input[type="number"],
.smuggling-run-form select {
    width: 100%;
    border-color: #5f4a35;
    background: #130f0c;
    color: #efe4d3;
    padding: 6px 7px;
}

.smuggling-run-form .btn {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 11px;
}

.smuggling-qty-wrap {
    display: grid;
    gap: 5px;
}

.smuggling-qty-wrap input[type="range"] {
    width: 100%;
}

.smuggling-qty-toggles {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.smuggling-projection-box {
    border: 1px solid #5a4935;
    background: #18120d;
    padding: 7px;
    display: grid;
    gap: 3px;
    min-height: 74px;
}

.smuggling-projection-box strong {
    font-size: 15px;
    letter-spacing: 0.04em;
    color: #f0e2c8;
}

.smuggling-projection-box strong.is-up {
    color: #9be3ad;
}

.smuggling-projection-box strong.is-down {
    color: #f0aaaa;
}

.smuggling-tabs-shell {
    margin-top: 10px;
}

.smuggling-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.smuggling-tab-btn {
    border-color: #5e482f;
    background: #1b140e;
    color: #decaac;
}

.smuggling-tab-btn:hover {
    border-color: #806447;
    color: #f4e6ce;
}

.smuggling-tab-btn.is-active {
    border-color: #9a754f;
    background: linear-gradient(135deg, #332518 0%, #261b12 100%);
    color: #fdeecf;
}

.smuggling-page .smuggling-tab-panel[data-smuggling-tab-panel="routes"] .cards.cards-rows {
    grid-template-columns: minmax(0, 1fr);
}

.smuggling-page .smuggling-route-card {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(310px, 1.6fr) minmax(130px, 0.65fr);
    align-items: center;
    gap: 8px;
}

.smuggling-page .smuggling-route-card .row-main,
.smuggling-page .smuggling-route-card .row-requirements,
.smuggling-page .smuggling-route-card .row-stats {
    min-width: 0;
}

.smuggling-page .smuggling-route-card .row-requirements .req-inline {
    gap: 5px;
}

.smuggling-page .smuggling-route-card .row-stats {
    text-align: left;
}

.smuggling-route-card.is-route-best {
    border-color: #3f8255;
    box-shadow: inset 0 0 0 1px rgba(95, 182, 119, 0.22);
}

.smuggling-route-card.is-route-best .card-kicker {
    border-color: #4b9d64;
    background: #1d3526;
    color: #d7f2de;
}

.smuggling-route-card.is-route-worst {
    border-color: #884646;
    box-shadow: inset 0 0 0 1px rgba(189, 90, 90, 0.2);
}

.smuggling-route-card.is-route-worst .card-kicker {
    border-color: #ab5858;
    background: #3b1f1f;
    color: #f8d6d6;
}

.smuggling-route-card.is-route-mid {
    border-color: #6f5a3e;
}

.smuggling-class-chip {
    display: inline-block;
    border: 1px solid #555;
    background: #222;
    color: #f0f0f0;
    padding: 2px 7px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
}

.smuggling-class-chip.is-hauler {
    border-color: #5a915f;
    background: #1f3021;
    color: #daf2dc;
}

.smuggling-class-chip.is-runner {
    border-color: #4d7f99;
    background: #1b2730;
    color: #d7eaf6;
}

.smuggling-class-chip.is-hot,
.smuggling-class-chip.is-worst {
    border-color: #9b4f4f;
    background: #341d1d;
    color: #f5d7d7;
}

.smuggling-class-chip.is-fragile {
    border-color: #9a7450;
    background: #332617;
    color: #f1dfca;
}

.smuggling-class-chip.is-balanced {
    border-color: #6b6b6b;
    background: #242424;
    color: #e6e6e6;
}

tr.is-smuggling-best {
    outline: 1px solid #4d8d62;
    background: rgba(43, 74, 51, 0.2);
}

.smuggling-market-table td small.meta {
    display: block;
    margin-top: 3px;
}

.smuggling-item-cell {
    position: relative;
    display: grid;
    gap: 2px;
    cursor: help;
}

.smuggling-item-tooltip {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 6;
    min-width: 152px;
    border: 1px solid #6a5236;
    background: linear-gradient(145deg, rgba(27, 20, 14, 0.98) 0%, rgba(14, 10, 7, 0.98) 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
    padding: 6px 7px;
    display: grid;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    pointer-events: none;
}

.smuggling-item-tooltip span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.smuggling-item-tooltip em {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #c6ad8a;
    font-size: 10px;
}

.smuggling-item-tooltip strong {
    color: #f3e2c5;
    font-size: 11px;
}

.smuggling-item-cell:hover .smuggling-item-tooltip,
.smuggling-item-cell:focus-within .smuggling-item-tooltip,
.smuggling-item-cell:focus .smuggling-item-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.smuggling-market-table th,
.smuggling-market-table td {
    text-align: center;
    vertical-align: top;
}

.smuggling-market-table th:first-child,
.smuggling-market-table td:first-child {
    text-align: left;
}

.smuggling-market-table td.is-best-buy {
    background: linear-gradient(145deg, rgba(50, 98, 60, 0.3) 0%, rgba(25, 56, 33, 0.28) 100%);
    box-shadow: inset 0 0 0 1px rgba(98, 178, 118, 0.24);
}

.smuggling-market-table td.is-best-sell {
    background: linear-gradient(145deg, rgba(39, 66, 104, 0.3) 0%, rgba(20, 35, 58, 0.28) 100%);
    box-shadow: inset 0 0 0 1px rgba(96, 142, 214, 0.24);
}

.smuggling-market-table td.is-best-buy .smuggling-buy-line strong {
    color: #99e1ac;
}

.smuggling-market-table td.is-best-sell .smuggling-sell-line strong {
    color: #9fc9ff;
}

.smuggling-quote-box {
    min-width: 132px;
    display: grid;
    grid-template-rows: 16px minmax(24px, auto) minmax(24px, auto) minmax(18px, auto);
    gap: 4px;
}

.smuggling-quote-flags {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-height: 16px;
}

.smuggling-quote-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #4f3b28;
    background: rgba(21, 16, 12, 0.78);
    padding: 3px 6px;
    text-align: left;
    white-space: nowrap;
}

.smuggling-quote-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #c7b08d;
    font-size: 10px;
}

.smuggling-buy-line.is-best,
.smuggling-sell-line.is-best {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.smuggling-swing-line {
    display: block;
    border: 1px dashed #4a3b2a;
    background: rgba(16, 12, 9, 0.7);
    padding: 2px 6px;
    text-align: left;
    white-space: nowrap;
}

.smuggling-market-legend {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.smuggling-trade-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid #665240;
    background: #1b1510;
    color: #ead8bf;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    margin-left: 0;
    vertical-align: middle;
}

.smuggling-trade-tag.is-buy {
    border-color: #4f8a5d;
    background: #1a2d20;
    color: #cdeed7;
}

.smuggling-trade-tag.is-sell {
    border-color: #567ab1;
    background: #19273a;
    color: #d7e6ff;
}

@media (max-width: 900px) {
    .smuggling-run-hero {
        grid-template-columns: 1fr;
    }

    .smuggling-flow-row {
        grid-template-columns: 1fr 1fr;
        min-width: 0;
    }

    .smuggling-flow-row .smuggling-flow-step::after {
        content: none;
    }

    .smuggling-detail-row {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .smuggling-page .smuggling-route-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
}

.organized-crime-page .cards.cards-rows {
    gap: 10px;
}

.organized-crime-page .oc-heist-hero {
    border: 1px solid #3a3a3a;
    background: linear-gradient(150deg, rgba(31, 31, 31, 0.96), rgba(17, 17, 17, 0.96));
    padding: 12px 14px;
    margin-bottom: 10px;
    text-align: left;
}

.organized-crime-page .oc-heist-title {
    margin: 0 0 7px;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #ffffff;
}

.organized-crime-page .oc-watch-strip {
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 7px;
}

.organized-crime-page .oc-watch-strip span {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    color: #c0c0c0;
    padding: 4px 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
}

.organized-crime-page .oc-watch-strip strong {
    color: #ffffff;
    margin-left: 4px;
}

.organized-crime-page > .availability-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: fit-content;
    max-width: 100%;
    margin: 10px auto;
    padding: 6px 12px;
    border-color: #4a4a4a;
    background: #1a1a1a;
    color: #ffffff;
}

.organized-crime-page .crime-row {
    border-color: #3a3a3a;
    background: linear-gradient(150deg, rgba(31, 31, 31, 0.96), rgba(17, 17, 17, 0.96));
    position: relative;
    overflow: hidden;
    box-shadow: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.organized-crime-page .crime-row:hover {
    transform: none;
    border-color: #555555;
    box-shadow: none;
}

.organized-crime-page .crime-row.activity-card::before {
    content: none;
}

.organized-crime-page .crime-row .row-main h3 {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
}

.organized-crime-page .crime-row .row-main h3::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d9d9d9;
    box-shadow: 0 0 0 3px rgba(217, 217, 217, 0.18);
}

.organized-crime-page .cards.cards-rows > .crime-row:nth-child(2) .row-main h3::before {
    background: #d9d9d9;
    box-shadow: 0 0 0 3px rgba(217, 217, 217, 0.18);
}

.organized-crime-page .cards.cards-rows > .crime-row:nth-child(3) .row-main h3::before {
    background: #d9d9d9;
    box-shadow: 0 0 0 3px rgba(217, 217, 217, 0.18);
}

.organized-crime-page .cards.cards-rows > .crime-row:nth-child(4) .row-main h3::before {
    background: #d9d9d9;
    box-shadow: 0 0 0 3px rgba(217, 217, 217, 0.18);
}

.organized-crime-page .crime-row.ready {
    border-color: #5a5a5a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.organized-crime-page .crime-row.unavailable {
    opacity: 0.72;
    filter: saturate(0.82);
}

.organized-crime-page .oc-seat-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 142px;
    overflow: visible;
}

.organized-crime-page .oc-seat-card .row-main {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
}

.organized-crime-page .oc-seat-card .oc-role-actions {
    flex: 0 0 auto;
    margin-top: 8px;
}

.organized-crime-page .crime-row .row-action,
.organized-crime-page .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.organized-crime-page .crime-row .row-main p,
.organized-crime-page .crime-row .meta,
.organized-crime-page .oc-heist-hero .meta,
.organized-crime-page .oc-option-panel .meta,
.organized-crime-page .panel .meta {
    color: #a8a8a8;
}

.organized-crime-page .oc-role-actions {
    flex: 1 1 100%;
    display: grid;
    gap: 8px;
}

.organized-crime-page .oc-role-action-row {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
}

.organized-crime-page input[type="text"],
.organized-crime-page input[type="number"],
.organized-crime-page select {
    min-height: 30px;
    border: 1px solid #4a4a4a;
    background: #131313;
    color: #f4f4f4;
    padding: 7px 8px;
    font-size: 11px;
}

.organized-crime-page .btn.btn-ghost {
    border-color: #4a4a4a;
}

.organized-crime-page .oc-option-panel {
    position: relative;
}

.organized-crime-page .oc-option-panel.is-cooldown-locked > *:not(.oc-cooldown-overlay) {
    filter: blur(1.5px) grayscale(0.35);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.organized-crime-page .oc-cooldown-overlay {
    position: absolute;
    inset: 8px;
    z-index: 4;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    border: 1px solid #4a4a4a;
    background: rgba(15, 15, 15, 0.94);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    text-align: center;
    padding: 10px;
}

.organized-crime-page .oc-cooldown-overlay strong {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.organized-crime-page .oc-cooldown-overlay span {
    border: 1px solid #4a4a4a;
    background: #1a1a1a;
    color: #ffffff;
    padding: 4px 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.organized-crime-page .oc-cooldown-overlay small {
    color: #9a9a9a;
}

.organized-crime-page .oc-disband-actions {
    margin-top: 6px;
}

.organized-crime-page .oc-commit-actions {
    margin-top: 8px;
}

.organized-crime-page .stat-card {
    border-color: #3a3a3a;
    background: #1a1a1a;
}

.organized-crime-page .stat-card span {
    color: #a0a0a0;
}

.organized-crime-page .stat-card strong {
    color: #ffffff;
}

.organized-crime-page .panel {
    border-color: #3a3a3a;
    background: linear-gradient(150deg, rgba(31, 31, 31, 0.96), rgba(17, 17, 17, 0.96));
}

@media (max-width: 720px) {
    .organized-crime-page .oc-heist-title {
        font-size: 12px;
        letter-spacing: 0.07em;
    }

    .organized-crime-page .oc-heist-hero {
        text-align: left;
    }
}

.blackjack-table {
    border-color: #8b6e3c;
    background:
        radial-gradient(circle at 50% 30%, rgba(48, 121, 77, 0.96) 0%, rgba(23, 66, 41, 0.94) 42%, rgba(10, 27, 17, 0.98) 100%);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(245, 224, 178, 0.2), 0 14px 30px rgba(0, 0, 0, 0.5);
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.blackjack-table::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 0.6px, transparent 0.6px);
    background-size: 4px 4px;
    opacity: 0.26;
}

.blackjack-table::after {
    content: "";
    position: absolute;
    inset: -10% -30%;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%);
    animation: tableGlowSweep 9s linear infinite;
}

.blackjack-table > * {
    position: relative;
    z-index: 1;
}

.casino-hub {
    border-color: #4d3f30;
    background:
        radial-gradient(circle at 10% 8%, rgba(176, 129, 61, 0.08) 0%, rgba(0, 0, 0, 0) 35%),
        linear-gradient(145deg, rgba(28, 23, 19, 0.95) 0%, rgba(13, 11, 10, 0.98) 100%);
}

.casino-room-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.casino-room-card {
    border-color: #5b4932;
    background: linear-gradient(145deg, rgba(33, 28, 23, 0.95) 0%, rgba(17, 14, 12, 0.97) 100%);
}

.casino-room-image {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border: 1px solid #5f5039;
    margin-bottom: 8px;
}

.casino-room-card h3 {
    margin-top: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.casino-room-card p {
    margin-top: 0;
    color: #d2c4ad;
}

.casino-room-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.casino-room-meta span {
    border: 1px solid rgba(219, 187, 133, 0.36);
    background: rgba(0, 0, 0, 0.18);
    padding: 3px 6px;
    font-size: 11px;
    color: #ead7b2;
}

.casino-room-card.is-soon {
    opacity: 0.94;
}

.blackjack-stats .stat-card {
    border-color: #7a6037;
    background: rgba(12, 31, 21, 0.7);
    text-align: left;
}

.blackjack-stats.is-hidden {
    display: none;
}

.casino-owner-panel .stats {
    margin-top: 10px;
}

.casino-owner-management-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.casino-owner-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-color: rgba(241, 217, 170, 0.45);
    background: linear-gradient(180deg, rgba(10, 30, 20, 0.78) 0%, rgba(8, 24, 16, 0.8) 100%);
}

.casino-owner-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 6px 8px;
    align-items: end;
    justify-items: stretch;
}

.casino-owner-form label {
    grid-column: 1 / -1;
    color: #d6c39d;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
}

.casino-owner-form input {
    grid-column: 1 / 2;
    width: 100%;
    min-height: 38px;
}

.casino-owner-form .btn {
    grid-column: 2 / 3;
    width: 100%;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.casino-owner-form:not(:has(input[type="number"], input[type="text"], input[type="search"], textarea, select)) .btn {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .casino-owner-management-grid {
        grid-template-columns: 1fr;
    }
}

.blackjack-stats-toggle-wrap {
    justify-content: center;
    margin-bottom: 8px;
}

.blackjack-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 12px;
    margin: 10px 0;
    justify-items: center;
}

.blackjack-seat {
    border: 1px solid rgba(241, 217, 170, 0.45);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(10, 30, 20, 0.78) 0%, rgba(8, 24, 16, 0.8) 100%);
    padding: 12px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 440px;
    text-align: left;
}

.blackjack-hand-stack {
    display: grid;
    gap: 8px;
}

.blackjack-player-hand {
    border: 1px solid rgba(241, 217, 170, 0.32);
    border-radius: 12px;
    padding: 9px;
    background: rgba(10, 30, 20, 0.62);
}

.blackjack-player-hand.is-active {
    border-color: rgba(252, 224, 164, 0.78);
    box-shadow: 0 0 0 1px rgba(252, 224, 164, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.blackjack-player-hand .meta {
    margin-top: 0;
    margin-bottom: 6px;
}

.blackjack-seat h3 {
    margin-top: 0;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f7e4be;
}

.blackjack-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 122px;
    align-items: flex-start;
    justify-content: center;
}

.blackjack-card {
    border: 1px solid #4060a0;
    border-radius: 10px;
    background:
        repeating-linear-gradient(135deg, #1a3a7a 0 8px, #16306a 8px 16px);
    color: #e7e7e7;
    width: 88px;
    height: 126px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(255,255,255,.06);
}

.blackjack-card-face {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: linear-gradient(160deg, #ffffff 0%, #efefef 100%);
    color: #111;
    width: 88px;
    height: 126px;
    padding: 7px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255,255,255,.5);
    animation: blackjackDealIn 320ms ease both;
    transform-origin: 50% 85%;
    transition: transform 120ms ease;
}

.blackjack-cards .blackjack-card-face:hover {
    transform: translateY(-3px);
}

.blackjack-cards .blackjack-card-face:nth-child(2) {
    animation-delay: 70ms;
}

.blackjack-cards .blackjack-card-face:nth-child(3) {
    animation-delay: 120ms;
}

.blackjack-cards .blackjack-card-face:nth-child(4) {
    animation-delay: 170ms;
}

.card-rank {
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
}

.card-center {
    width: 100%;
    text-align: center;
    font-size: 32px;
    line-height: 1;
    align-self: center;
    margin-top: 2px;
}

.card-corner {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 18px;
}

.card-suit-char {
    font-size: 13px;
    line-height: 1;
}

.blackjack-card-face.suit-red {
    color: #b01f2d;
}

.blackjack-card-face.suit-black {
    color: #1a1a1a;
}

.blackjack-card-back {
    border-color: #6f6046;
    color: #f3dfbb;
    background:
        repeating-linear-gradient(45deg, #1f2e4d 0 8px, #2a3f68 8px 16px),
        linear-gradient(120deg, #2f4670 0%, #223658 100%);
}

.blackjack-card.is-hidden,
.blackjack-card.is-empty {
    border-color: #5a5a5a;
    background: #2a2a2a;
    color: #e2e2e2;
}

.blackjack-card.is-placeholder {
    opacity: 0.18;
}

.blackjack-bet-form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.blackjack-bet-form input[type="number"] {
    width: 130px;
}

.blackjack-chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip-btn {
    border: 2px solid #e6d0a0;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #ba2a2a 0%, #821d1d 100%);
    color: #fff4d7;
    font-weight: 700;
    padding: 6px 10px;
    min-width: 66px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    animation: chipSettleIn 260ms ease both;
}

.chip-btn::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px dashed rgba(255, 236, 198, 0.6);
    border-radius: 999px;
}

.chip-btn::after {
    content: "";
    position: absolute;
    width: 36%;
    height: 170%;
    left: -45%;
    top: -35%;
    transform: rotate(26deg);
    background: rgba(255, 255, 255, 0.25);
    transition: left 200ms ease;
}

.chip-btn[data-chip-amount="500"],
.chip-btn[data-chip-amount="5000"] {
    background: radial-gradient(circle at 30% 30%, #2c4cc2 0%, #223894 100%);
}

.chip-btn[data-chip-amount="1000"] {
    background: radial-gradient(circle at 30% 30%, #2a9b5f 0%, #1f7548 100%);
}

.chip-btn[data-chip-amount="50000"] {
    background: radial-gradient(circle at 30% 30%, #5c3aa9 0%, #41297a 100%);
}

.chip-btn[data-chip-amount="500000"] {
    background: radial-gradient(circle at 30% 30%, #d4b05a 0%, #9f7a2d 100%);
    color: #1d1608;
    border-color: #f0d89c;
}

.chip-btn:hover {
    transform: translateY(-1px);
}

.chip-btn:hover::after {
    left: 120%;
}

.chip-btn.is-active {
    outline: 2px solid #f7e3bc;
    outline-offset: 1px;
    transform: translateY(-1px) scale(1.03);
}

.blackjack-outcome {
    border: 1px solid #4b4234;
    padding: 9px 10px;
    margin-top: 0;
    border-radius: 8px;
    font-weight: 700;
    animation: blackjackResultPop 260ms ease both;
}

.blackjack-outcome-win {
    border-color: #4a8f5e;
    background: rgba(30, 87, 46, 0.32);
}

.blackjack-outcome-lose {
    border-color: #be4a4a;
    background: rgba(170, 26, 26, 0.45);
    color: #ffdede;
}

.blackjack-outcome-push {
    border-color: #887255;
    background: rgba(95, 78, 47, 0.3);
}

.blackjack-policy-strip {
    margin-top: 10px;
    border: 1px solid #725a34;
    background: linear-gradient(120deg, rgba(23, 37, 24, 0.86) 0%, rgba(12, 22, 14, 0.9) 100%);
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.blackjack-policy-strip span {
    border: 1px solid rgba(230, 203, 151, 0.35);
    background: rgba(0, 0, 0, 0.18);
    padding: 4px 7px;
}

.video-poker-table {
    max-width: 1020px;
}

.video-poker-paytable {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    border: 1px solid rgba(241, 217, 170, 0.32);
    border-radius: 10px;
    padding: 10px;
    background: rgba(8, 24, 16, 0.55);
}

.video-poker-paytable span {
    color: #f1e3c6;
}

.video-poker-paytable strong {
    color: #f9efdb;
}

.video-poker-card-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.video-poker-card-wrap.is-selectable {
    cursor: pointer;
}

.video-poker-hold-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.video-poker-hold-input:checked + .blackjack-card-face {
    position: relative;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 0 3px rgba(255, 230, 175, 0.95), 0 0 20px rgba(247, 216, 149, 0.5), 0 10px 20px rgba(0, 0, 0, 0.5);
}

.video-poker-hold-input:checked + .blackjack-card-face::after {
    content: "HELD";
    position: absolute;
    top: 5px;
    right: 5px;
    border: 1px solid #f8e1ad;
    border-radius: 999px;
    background: #234c34;
    color: #fff0c8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 1px 6px;
}

.video-poker-hold-chip {
    border: 1px solid rgba(245, 223, 185, 0.45);
    border-radius: 999px;
    background: rgba(8, 23, 15, 0.88);
    color: #f0debc;
    padding: 2px 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
}

.video-poker-hold-input:checked ~ .video-poker-hold-chip {
    border-color: rgba(245, 223, 185, 0.8);
    background: rgba(31, 75, 48, 0.95);
    color: #fff2d7;
    box-shadow: 0 0 0 1px rgba(255, 229, 176, 0.5);
}

.video-poker-draw-cta {
    justify-content: center;
    margin-top: 8px;
}

.roulette-table {
    max-width: 1220px;
    background:
        radial-gradient(circle at 50% 28%, rgba(109, 41, 31, 0.78) 0%, rgba(63, 20, 15, 0.88) 42%, rgba(19, 8, 6, 0.96) 100%),
        linear-gradient(165deg, rgba(35, 12, 10, 0.94) 0%, rgba(15, 7, 7, 0.98) 100%);
}

.roulette-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
    margin-top: 8px;
}

.roulette-wheel-face,
.roulette-history {
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
    background: rgba(8, 7, 8, 0.34);
    padding: 10px;
}

.roulette-wheel-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.roulette-wheel-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    color: #e5d0b1;
}

.roulette-result-ball {
    width: 92px;
    height: 92px;
    border-radius: 999px;
    border: 3px solid rgba(255, 235, 206, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 33px;
    font-weight: 800;
    color: #fff8ee;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.42);
}

.roulette-result-ball.roulette-red,
.roulette-history-chip.roulette-red {
    background: linear-gradient(145deg, #cb3b3b 0%, #8f2323 100%);
}

.roulette-result-ball.roulette-black,
.roulette-history-chip.roulette-black {
    background: linear-gradient(145deg, #444 0%, #1d1d1d 100%);
}

.roulette-result-ball.roulette-green,
.roulette-history-chip.roulette-green {
    background: linear-gradient(145deg, #2f9159 0%, #236843 100%);
}

.roulette-history {
    text-align: left;
}

.roulette-history-row {
    margin-top: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 31px;
}

.roulette-history-chip {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255, 236, 207, 0.46);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff6e8;
    font-weight: 700;
    font-size: 10px;
}

.roulette-controls {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.roulette-chip-row {
    justify-content: center;
    align-items: center;
}

.roulette-chip-custom {
    width: 124px;
    height: 34px;
    border: 1px solid #a38458;
    background: #2b1f16;
    color: #f6e6c8;
    text-align: center;
}

.roulette-board {
    border: 1px solid rgba(240, 211, 169, 0.26);
    border-radius: 12px;
    padding: 8px;
    background: rgba(10, 6, 7, 0.36);
    display: grid;
    gap: 7px;
    max-width: 1120px;
    margin: 0 auto;
}

.roulette-number-grid {
    display: grid;
    grid-template-columns: 56px minmax(840px, 1fr) 70px;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.roulette-number-columns {
    display: grid;
    grid-template-columns: repeat(12, minmax(52px, 1fr));
    grid-template-rows: repeat(3, minmax(36px, auto));
    gap: 3px;
}

.roulette-spot {
    position: relative;
    border: 1px solid rgba(236, 214, 180, 0.3);
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(36, 28, 22, 0.92) 0%, rgba(17, 12, 10, 0.94) 100%);
    color: #faedd4;
    min-height: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.roulette-spot > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.roulette-spot em {
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-style: normal;
    font-size: 8px;
    line-height: 1.1;
    min-height: 14px;
    min-width: 28px;
    padding: 1px 4px;
    border-radius: 999px;
    border: 1px solid #f0d39f;
    background: radial-gradient(circle at 30% 30%, #f3c97a 0%, #a7772b 100%);
    color: #1d1307;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.roulette-spot em:empty {
    display: none;
}

.roulette-spot:hover,
.roulette-spot.is-drop-target {
    transform: translateY(-1px);
    border-color: #f2cd8f;
    box-shadow: 0 0 0 1px rgba(242, 205, 143, 0.35);
}

.roulette-spot.is-bet {
    border-color: #f0d7a9;
    box-shadow: 0 0 0 1px rgba(240, 215, 169, 0.34), inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.roulette-spot.is-winning-spot {
    border-color: #ffe5b5;
    box-shadow: 0 0 0 1px rgba(255, 229, 181, 0.55), 0 0 14px rgba(255, 205, 120, 0.42), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
    animation: rouletteWinningPulse 1100ms ease-in-out infinite;
}

.roulette-spot.is-winning-spot > span {
    color: #fff4de;
}

.roulette-spot.is-chip-pop {
    animation: rouletteChipPop 220ms ease;
}

.roulette-spot.roulette-red {
    background: linear-gradient(160deg, rgba(156, 36, 36, 0.88) 0%, rgba(94, 20, 20, 0.9) 100%);
}

.roulette-spot.roulette-black {
    background: linear-gradient(160deg, rgba(59, 59, 59, 0.88) 0%, rgba(24, 24, 24, 0.9) 100%);
}

.roulette-spot-zero {
    background: linear-gradient(160deg, rgba(32, 130, 77, 0.9) 0%, rgba(20, 86, 50, 0.92) 100%);
    min-height: 100%;
}

.roulette-spot-number {
    min-height: 36px;
}

.roulette-column-bets {
    display: grid;
    grid-template-rows: repeat(3, minmax(36px, auto));
    gap: 3px;
}

.roulette-spot-column {
    min-height: 36px;
    font-size: 10px;
    letter-spacing: 0.04em;
    background: linear-gradient(160deg, rgba(45, 38, 28, 0.94) 0%, rgba(23, 19, 14, 0.96) 100%);
}

.roulette-outside-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(96px, 1fr));
    gap: 5px;
}

.roulette-spot-outside {
    min-height: 38px;
}

.roulette-help {
    margin: 2px 0 0;
    text-align: center;
}

.roulette-form-row {
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.roulette-form-row input[type="text"],
.roulette-form-row select,
.roulette-form-row input[type="number"],
.roulette-form-row .btn {
    height: 36px;
}

.roulette-form-row input[type="text"] {
    width: 132px;
    text-align: center;
}

.roulette-form-row select,
.roulette-form-row input[type="number"] {
    width: 140px;
}

.roulette-form-row input[type="number"].is-hidden {
    display: none;
}

.roulette-bottom-actions {
    justify-content: center;
    margin-top: 8px;
}

[data-roulette-total-bet].is-over-limit {
    color: #ffb8b8;
}

@keyframes rouletteChipPop {
    0% {
        transform: scale(0.96);
    }
    65% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rouletteWinningPulse {
    0% {
        transform: translateY(0);
        filter: saturate(1);
    }
    50% {
        transform: translateY(-1px);
        filter: saturate(1.15);
    }
    100% {
        transform: translateY(0);
        filter: saturate(1);
    }
}

.keno-table .blackjack-outcome {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.keno-table {
    padding: 10px;
}

.keno-tabs-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.keno-tabs {
    display: inline-flex;
    gap: 6px;
}

.keno-auto-btn {
    min-width: 136px;
}

.keno-tab-panel.is-hidden {
    display: none;
}

.keno-board-wrap {
    position: relative;
    background: rgba(8, 7, 8, 0.34);
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
    padding: 12px;
    grid-column: 1;
    grid-row: 1 / span 3;
}

.keno-board {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    margin-left: 0;
    margin-right: 0;
}

.keno-cell {
    position: relative;
    border: 1px solid rgba(234, 210, 167, 0.28);
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(13, 38, 25, 0.82) 0%, rgba(8, 24, 16, 0.8) 100%);
    color: #f2ebde;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    font-size: 11px;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.keno-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(252, 223, 164, 0.6);
}

.keno-cell input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.keno-cell.is-selected {
    border-color: rgba(107, 205, 134, 0.85);
    background: linear-gradient(145deg, rgba(25, 102, 52, 0.92) 0%, rgba(14, 70, 34, 0.9) 100%);
    color: #e3ffe9;
}

.keno-cell.is-drawn {
    border-color: rgba(232, 112, 112, 0.9);
    background: linear-gradient(145deg, rgba(129, 34, 34, 0.94) 0%, rgba(93, 23, 23, 0.92) 100%);
    color: #ffe3e3;
}

.keno-cell.is-hit {
    border-color: #c8a0ff;
    background: linear-gradient(145deg, rgba(91, 51, 154, 0.96) 0%, rgba(66, 37, 117, 0.94) 100%);
    color: #f4e9ff;
}

.keno-payout-panel {
    margin-top: 10px;
    border: 1px solid #6d5937;
    background: linear-gradient(120deg, rgba(21, 34, 23, 0.8) 0%, rgba(11, 19, 13, 0.88) 100%);
    padding: 8px;
}

.keno-controls {
    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 8px;
    margin-top: 8px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    align-items: start;
}
    display: grid;
    gap: 7px;
}

.keno-controls .blackjack-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(206, 173, 116, 0.42);
    background: linear-gradient(120deg, rgba(25, 20, 12, 0.86) 0%, rgba(15, 12, 9, 0.9) 100%);
    padding: 6px;
}

.keno-table .chip-btn {
    min-width: 58px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #9a7a4a;
    background: linear-gradient(145deg, #3f2f18 0%, #2a2012 100%);
    color: #f8e8c9;
    font-size: 10px;
    letter-spacing: 0.03em;
    padding: 0 8px;
    animation: none;
    box-shadow: none;
}

.keno-table .chip-btn::before,
.keno-table .chip-btn::after {
    display: none;
}

.keno-table .chip-btn[data-chip-amount="1000"],
.keno-table .chip-btn[data-chip-amount="5000"],
.keno-table .chip-btn[data-chip-amount="50000"],
.keno-table .chip-btn[data-chip-amount="500000"] {
    background: linear-gradient(145deg, #4f3b1e 0%, #342815 100%);
}

.keno-table .chip-btn:hover {
    transform: translateY(-1px);
    border-color: #c8a56a;
}

.keno-table .chip-btn.is-active {
    transform: none;
    border-color: #f0d29a;
    background: linear-gradient(145deg, #6c4f25 0%, #4a371b 100%);
    outline: none;
}

.keno-tabs .btn,
.keno-auto-btn,
.keno-control-row .btn,
.keno-bottom-actions .btn {
    background: linear-gradient(120deg, #5f4a27 0%, #7d6338 100%);
    border-color: #aa8a54;
    color: #fff2d8;
}

.keno-tabs .btn.btn-ghost,
.keno-auto-btn.btn-ghost,
.keno-control-row .btn.btn-ghost,
.keno-bottom-actions .btn.btn-ghost {
    background: linear-gradient(120deg, #342815 0%, #48371f 100%);
    border-color: #8d7043;
}

.keno-tabs .btn,
.keno-auto-btn,
.keno-control-row .btn,
.keno-control-row input[type="text"] {
    height: 34px;
}

.keno-control-row {
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.keno-control-row .btn,
.keno-control-row input[type="text"] {
    min-width: 124px;
}

.keno-control-row .btn:first-of-type {
    min-width: 132px;
}

.keno-control-row input[type="text"] {
    text-align: center;
    border: 1px solid #9b7c48;
    background: #2a2115;
    color: #fff0d2;
    padding: 6px 8px;
}

.keno-bottom-actions {
    justify-content: center;
    margin-top: 8px;
}

.keno-payout-panel h3 {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #f2dfb7;
}

.keno-payout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
    gap: 5px;
}

.keno-payout-cell {
    border: 1px solid rgba(216, 192, 149, 0.3);
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 6px;
    text-align: left;
}

.keno-payout-cell span {
    display: block;
    color: #ddd1b7;
}

.keno-payout-cell strong {
    color: #f8eccf;
}

/* ── Keno page revamp ── */
.keno-page { }

.keno-panel {
    max-width: 640px;
    margin: 0 auto;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.keno-panel .bj-top-strip {
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.keno-panel .keno-controls {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0 12px;
}

.keno-panel .keno-clear-row {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    border-top: 1px solid var(--line);
    background: transparent;
    padding: 8px 12px;
}

.keno-panel .bj-rules-strip {
    padding: 6px 16px 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.keno-controls {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.keno-pick-bar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(8, 7, 8, 0.34);
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
}

.keno-pick-bar .btn {
    width: 100%;
}

.keno-util-btn {
    font-size: .78rem;
    letter-spacing: .04em;
    padding: 8px 10px;
    border-color: rgba(232, 203, 161, 0.22);
    color: #b8a882;
    background: rgba(232, 203, 161, 0.04);
    text-transform: uppercase;
}

.keno-util-btn:hover {
    border-color: rgba(232, 203, 161, 0.45);
    color: #e8d4aa;
    background: rgba(232, 203, 161, 0.1);
}

.keno-util-btn[aria-pressed="true"] {
    border-color: rgba(72, 167, 101, 0.6);
    background: rgba(25, 102, 52, 0.3);
    color: #90e8a8;
}

.keno-bet-panel {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(8, 7, 8, 0.34);
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
}

.keno-bet-label {
    font-size: .75rem;
    color: var(--muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.keno-bet-display {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    background: #111;
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 6px;
    color: var(--text);
    font-size: .95rem;
    text-align: center;
}

.keno-action-bar {
    grid-column: 2;
    grid-row: 3;
    padding: 10px 12px;
    background: rgba(8, 7, 8, 0.34);
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
    display: flex;
    justify-content: center;
}

.keno-draw-btn {
    min-width: unset;
    width: 100%;
}

.keno-clear-row {
    padding: 10px 12px;
    background: rgba(8, 7, 8, 0.34);
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.keno-clear-btn {
    min-width: 140px;
}

.keno-balls-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(232, 203, 161, 0.15);
}

.keno-balls-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    white-space: nowrap;
}

.keno-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.keno-ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid rgba(200, 160, 80, 0.5);
    background: rgba(30, 20, 10, 0.9);
    color: #f8e8c9;
}

.keno-ball.is-hit {
    border-color: #c8a0ff;
    background: rgba(91, 51, 154, 0.9);
    color: #f4e9ff;
}

.keno-ball.is-miss {
    border-color: rgba(232, 112, 112, 0.6);
    background: rgba(93, 23, 23, 0.85);
    color: #ffe3e3;
}

.slots-table {
    padding: 10px;
    background: radial-gradient(circle at 50% -20%, rgba(255, 214, 131, 0.22) 0%, rgba(18, 48, 31, 0.92) 50%, rgba(8, 18, 12, 0.96) 100%);
}

.slots-reels-panel,
.slots-paytable-panel {
    margin-top: 10px;
}

.slots-reels-panel .blackjack-outcome {
    margin-top: 8px;
}

.slots-machine-cabinet {
    border: 2px solid rgba(208, 168, 95, 0.58);
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(49, 26, 11, 0.94) 0%, rgba(29, 16, 8, 0.97) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 220, 152, 0.2), 0 16px 34px rgba(0, 0, 0, 0.34);
    padding: 12px;
}

.slots-marquee {
    border: 1px solid rgba(228, 188, 118, 0.52);
    border-radius: 12px;
    padding: 8px 10px;
    background: linear-gradient(120deg, rgba(111, 76, 31, 0.65) 0%, rgba(73, 45, 19, 0.7) 100%);
    margin-bottom: 10px;
    text-align: center;
}

.slots-marquee strong {
    display: block;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffe7be;
}

.slots-marquee span {
    display: block;
    margin-top: 3px;
    color: #e7d1aa;
    font-size: 11px;
}

.slots-reel-frame {
    position: relative;
    border: 1px solid rgba(230, 198, 130, 0.34);
    border-radius: 14px;
    padding: 10px;
    background: radial-gradient(circle at 50% 30%, rgba(46, 30, 15, 0.94) 0%, rgba(18, 11, 7, 0.98) 100%);
}

.slots-payline-marker {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255, 194, 86, 0.18) 0%, rgba(255, 220, 141, 0.95) 50%, rgba(255, 194, 86, 0.18) 100%);
    box-shadow: 0 0 10px rgba(255, 215, 120, 0.6);
    pointer-events: none;
    z-index: 3;
}

.slots-reel-window {
    display: grid;
    grid-template-columns: repeat(3, minmax(76px, 1fr));
    grid-template-rows: repeat(3, minmax(76px, 1fr));
    gap: 8px;
    margin: 0 auto;
    padding: 12px;
    border: 2px solid rgba(211, 177, 111, 0.5);
    border-radius: 16px;
    background: radial-gradient(circle at 50% 35%, rgba(64, 39, 19, 0.95) 0%, rgba(23, 14, 8, 0.94) 60%, rgba(12, 8, 5, 0.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 229, 173, 0.2), 0 14px 28px rgba(0, 0, 0, 0.36);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.slots-reel {
    border: 1px solid rgba(180, 140, 70, 0.35);
    border-radius: 10px;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    text-align: center;
    background: linear-gradient(155deg, #22180d 0%, #15100a 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, 0.08), 0 8px 18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transform: translateY(0);
    transition: transform 64ms linear;
}

.slots-symbol-image,
.slots-reel img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    display: block;
}

.slots-reel span {
    color: #c8b48a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.slots-reel.is-win-payline {
    animation: slotsWinPulse 600ms ease-in-out 3;
    border-color: rgba(255, 220, 80, 0.95);
    box-shadow: 0 0 14px rgba(255, 210, 60, 0.6), inset 0 0 0 1px rgba(255, 244, 196, 0.7);
}

@keyframes slotsWinPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 210, 60, 0.4); }
    50%       { box-shadow: 0 0 20px rgba(255, 210, 60, 0.9); }
}

.slots-reel.is-payline {
    border-color: rgba(255, 220, 133, 0.95);
    box-shadow: inset 0 0 0 1px rgba(255, 244, 196, 0.7), 0 0 0 1px rgba(255, 191, 73, 0.45), 0 10px 18px rgba(0, 0, 0, 0.28);
}

.slots-reel.is-seven span {
    color: #ff6b5e;
}

.slots-reel.is-diamond span {
    color: #7dd4f8;
}

.slots-reel.is-bar span {
    color: #d0cfc8;
}

.slots-reel.is-bell span {
    color: #f5c842;
}

.slots-reel.is-cherry span {
    color: #ff7a92;
}

.slots-reel.is-horseshoe span {
    color: #b8b8b8;
}

.slots-reel.is-lemon span {
    color: #e8d840;
}

.slots-reel-window.is-recent-spin .slots-reel {
    animation: slotsReelPop 680ms ease;
}

.slots-reel-window.is-spinning .slots-reel {
    opacity: 0.06;
}

.slots-spin-overlay {
    position: absolute;
    inset: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(76px, 1fr));
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms linear;
}

.slots-reel-window.is-spinning .slots-spin-overlay {
    opacity: 1;
}

.slots-spin-column {
    border: 1px solid rgba(180, 140, 70, 0.35);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(155deg, #22180d 0%, #15100a 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, 0.08), 0 8px 18px rgba(0, 0, 0, 0.4);
    transition: opacity 200ms ease-out;
}

.slots-spin-strip {
    display: flex;
    flex-direction: column;
    gap: 0;
    animation-name: slotsStripSpin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.slots-spin-strip-col-1 {
    animation-duration: 320ms;
}

.slots-spin-strip-col-2 {
    animation-duration: 360ms;
}

.slots-spin-strip-col-3 {
    animation-duration: 405ms;
}

.slots-spin-symbol {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slots-spin-symbol img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.slots-button-deck {
    margin-top: 10px;
    border: 1px solid rgba(201, 164, 99, 0.35);
    border-radius: 12px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(40, 23, 12, 0.88) 0%, rgba(23, 14, 8, 0.9) 100%);
}

.slots-paytable-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
}

.slots-payline {
    border: 1px solid rgba(201, 172, 116, 0.35);
    border-radius: 8px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
}

.slots-payline span {
    display: block;
    color: #d9ccb0;
}

.slots-payline strong {
    color: #f5e8ca;
}

.slots-controls {
    margin-top: 0;
    display: grid;
    gap: 8px;
    max-width: 380px;
}

.slots-controls input {
    height: 36px;
}

.slots-bottom-actions {
    margin-top: 8px;
}

.slots-spin-btn {
    min-width: 150px;
    border-color: rgba(255, 208, 114, 0.7);
    background: linear-gradient(120deg, #8e1c17 0%, #b52e26 45%, #8f1e19 100%);
    color: #fff3d6;
    box-shadow: 0 4px 14px rgba(146, 22, 18, 0.35);
}

.slots-spin-btn[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

.slots-tier-jackpot .slots-machine-cabinet {
    box-shadow: inset 0 0 0 1px rgba(255, 231, 159, 0.35), 0 0 0 2px rgba(255, 209, 105, 0.35), 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 26px rgba(255, 206, 86, 0.38);
}

.slots-tier-jackpot .slots-outcome {
    animation: slotsJackpotPulse 1s ease-in-out infinite;
}

.slots-tier-big .slots-machine-cabinet {
    box-shadow: inset 0 0 0 1px rgba(189, 255, 196, 0.3), 0 16px 34px rgba(0, 0, 0, 0.34), 0 0 18px rgba(91, 201, 108, 0.28);
}

.slots-tier-win .slots-machine-cabinet {
    box-shadow: inset 0 0 0 1px rgba(159, 236, 167, 0.25), 0 16px 34px rgba(0, 0, 0, 0.34);
}

.slots-tier-lose .slots-machine-cabinet {
    filter: saturate(0.94);
}

@keyframes slotsReelPop {
    0% {
        transform: translateY(6px) scale(0.96);
        opacity: 0.55;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes slotsJackpotPulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255, 225, 139, 0);
    }
    50% {
        transform: scale(1.02);
        text-shadow: 0 0 14px rgba(255, 219, 120, 0.7);
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255, 225, 139, 0);
    }
}

@keyframes slotsStripSpin {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

/* ── Slots page revamp ─────────────────────────────────────── */
.sl-page { }

.sl-panel {
    max-width: 760px;
    margin: 0 auto;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.sl-panel .bj-top-strip {
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 12px 16px 0;
    gap: 0;
}

.sl-panel .bj-table-title-row {
    position: relative;
    justify-content: center;
    padding: 0 4px 10px;
}

.sl-panel .bj-table-title-row .bj-back-link {
    position: absolute;
    left: 4px;
}

.sl-panel .bj-table-title-row .bj-table-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e8c060;
    text-shadow: 0 1px 8px rgba(232,192,96,0.25);
}

.sl-panel .bj-room-title {
    font-size: 1.28rem;
    letter-spacing: .04em;
}

/* Full-width stat band across the bottom of the header */
.sl-panel .bj-table-info-row {
    margin: 0 -16px;
    padding: 0;
    border-top: 1px solid var(--line);
    background: rgba(0,0,0,0.18);
    gap: 0;
    flex-wrap: nowrap;
    align-items: stretch;
}

.sl-panel .bj-table-box-group {
    flex: 1;
    gap: 0;
    flex-wrap: nowrap;
}

.sl-panel .bj-table-box-group-left {
    flex: 2;
    justify-content: stretch;
}
.sl-panel .bj-table-box-group-right {
    flex: 1;
    justify-content: stretch;
}

.sl-panel .bj-table-box {
    flex: 1;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.06);
    border-radius: 0;
    min-width: 0;
    min-height: 0;
    padding: 10px 14px;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.sl-panel .bj-table-box-group-right .bj-table-box:last-child { border-right: none; }

.sl-panel .bj-table-box span {
    font-size: .62rem;
    letter-spacing: .09em;
    color: #505050;
}

.sl-panel .bj-table-box strong {
    font-size: 1.02rem;
    font-weight: 700;
    color: #c8bfae;
}

.sl-panel .bj-table-box-owner strong { color: #e8c060; }

.sl-panel .sl-box-maxbet strong {
    color: #48a765 !important;
    font-weight: 800;
}

/* Wealth status colours */
.sl-wealth-val { font-weight: 800; }
.sl-wealth-empire, .sl-wealth-dynasty, .sl-wealth-titan { color: #e8c060 !important; }
.sl-wealth-very-wealthy, .sl-wealth-wealthy { color: #48a765 !important; }
.sl-wealth-stable, .sl-wealth-growing { color: #8cb87a !important; }
.sl-wealth-fragile { color: #c9a44e !important; }
.sl-wealth-at-risk { color: #c04040 !important; }
.sl-wealth-unowned { color: #555 !important; }

.sl-panel .bj-rules-strip {
    padding: 6px 16px 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── Blackjack player header — matches slots header style ── */
.bj-top-strip-player {
    padding: 12px 16px 0;
    gap: 0;
}
.bj-top-strip-player .bj-table-title-row {
    position: relative;
    justify-content: center;
    padding: 0 4px 10px;
}
.bj-top-strip-player .bj-table-title-row .bj-back-link {
    position: absolute;
    left: 4px;
}
.bj-top-strip-player .bj-table-title-row .bj-room-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e8c060;
    text-shadow: 0 1px 8px rgba(232,192,96,0.25);
}
.bj-top-strip-player .bj-table-info-row {
    margin: 0 -16px;
    padding: 0;
    border-top: 1px solid var(--line);
    background: rgba(0,0,0,0.18);
    gap: 0;
    flex-wrap: nowrap;
    align-items: stretch;
}
.bj-top-strip-player .bj-table-box-group { flex: 1; gap: 0; flex-wrap: nowrap; }
.bj-top-strip-player .bj-table-box-group-left {
    flex: 2;
    justify-content: stretch;
}
.bj-top-strip-player .bj-table-box-group-right {
    flex: 1;
    justify-content: stretch;
}
.bj-top-strip-player .bj-table-box {
    flex: 1;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.06);
    border-radius: 0;
    min-width: 0;
    min-height: 0;
    padding: 10px 14px;
    gap: 4px;
    align-items: center;
    text-align: center;
}
.bj-top-strip-player .bj-table-box-group-right .bj-table-box:last-child { border-right: none; }
.bj-top-strip-player .bj-table-box span {
    font-size: .62rem;
    letter-spacing: .09em;
    color: #505050;
}
.bj-top-strip-player .bj-table-box strong {
    font-size: 1.02rem;
    font-weight: 700;
    color: #c8bfae;
}
.bj-top-strip-player .bj-table-box-owner strong { color: #e8c060; }
.bj-top-strip-player .sl-box-maxbet strong {
    color: #48a765 !important;
    font-weight: 800;
}

.sl-game-wrap {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 10px;
    margin-top: 8px;
    padding: 0 12px 12px;
    align-items: start;
}

.sl-main-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-machine { }

.sl-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Bet panel */
.sl-bet-panel {
    padding: 12px;
    background: rgba(8, 7, 8, 0.34);
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-bet-label {
    font-size: .68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.sl-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sl-chip-btn {
    flex: 1;
    min-width: 0;
    padding: 5px 4px;
    border: 1px solid rgba(232, 203, 161, 0.25);
    border-radius: 6px;
    background: rgba(232, 203, 161, 0.05);
    color: #b8a882;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: border-color 120ms, background 120ms, color 120ms;
}

.sl-chip-btn:hover {
    border-color: rgba(232, 203, 161, 0.5);
    color: #e8d4aa;
    background: rgba(232, 203, 161, 0.1);
}

.sl-chip-btn.is-active {
    border-color: rgba(255, 208, 100, 0.8);
    background: rgba(255, 200, 80, 0.15);
    color: #ffd46e;
}

.sl-bet-adj-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sl-adj-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(232, 203, 161, 0.25);
    border-radius: 6px;
    background: rgba(232, 203, 161, 0.05);
    color: #b8a882;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms, background 120ms;
}

.sl-adj-btn:hover {
    border-color: rgba(232, 203, 161, 0.5);
    background: rgba(232, 203, 161, 0.1);
    color: #e8d4aa;
}

.sl-bet-display {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    background: #111;
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 6px;
    color: var(--text);
    font-size: .9rem;
    text-align: center;
    box-sizing: border-box;
}

/* Spin panel */
.sl-spin-panel {
    padding: 12px;
    background: rgba(8, 7, 8, 0.34);
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
}

.sl-spin-btn {
    flex: 2;
    padding: 12px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .1em;
    border-color: rgba(255, 208, 114, 0.7);
    background: linear-gradient(120deg, #8e1c17 0%, #c0352b 50%, #8f1e19 100%);
    color: #fff3d6;
    box-shadow: 0 4px 18px rgba(146, 22, 18, 0.45);
    text-transform: uppercase;
}

.sl-spin-btn:hover:not([disabled]) {
    background: linear-gradient(120deg, #a82520 0%, #d43d32 50%, #a32520 100%);
    box-shadow: 0 6px 22px rgba(180, 30, 24, 0.55);
}

.sl-spin-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sl-auto-btn {
    flex: 1;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-color: rgba(232, 203, 161, 0.22);
    color: #b8a882;
}

.sl-auto-btn[aria-pressed="true"] {
    border-color: rgba(72, 167, 101, 0.6);
    background: rgba(25, 102, 52, 0.3);
    color: #90e8a8;
}

/* Paytable */
.sl-paytable-panel {
    padding: 12px;
    background: rgba(8, 7, 8, 0.34);
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
}

.sl-paytable-title {
    font-size: .68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 8px;
}

.sl-paytable-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sl-pay-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
}

.sl-pay-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
}

.sl-pay-combo {
    flex: 1;
    font-size: .75rem;
    color: #c8b896;
}

.sl-pay-mult {
    font-size: .78rem;
    font-weight: 700;
    color: #e8d4aa;
    white-space: nowrap;
}

.sl-pay-tier-jackpot .sl-pay-mult { color: #ffd46e; }
.sl-pay-tier-jackpot .sl-pay-combo { color: #e8c070; }
.sl-pay-tier-big .sl-pay-mult { color: #b0d4f8; }
.sl-pay-tier-mid .sl-pay-mult { color: #d8e8c0; }

.sl-pay-divider {
    height: 1px;
    background: rgba(232, 203, 161, 0.15);
    margin: 2px 0;
}

/* Clear row */
.sl-clear-row {
    display: flex;
    justify-content: center;
    padding: 10px 12px;
    background: rgba(8, 7, 8, 0.34);
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.sl-clear-btn { min-width: 160px; }

.sl-clear-form {
    display: block;
}
.sl-clear-form .sl-clear-btn {
    width: 100%;
    min-width: 0;
    font-size: .72rem;
    opacity: 0.6;
}
.sl-clear-form .sl-clear-btn:hover {
    opacity: 1;
}

/* ── Staggered reel column stop ──────────────────────── */
.slots-reel-window.col-0-stopped .slots-spin-column:nth-child(1),
.slots-reel-window.col-1-stopped .slots-spin-column:nth-child(2),
.slots-reel-window.col-2-stopped .slots-spin-column:nth-child(3) {
    opacity: 0;
}

/* Reveal reel cells for stopped columns, overriding the global dim */
.slots-reel-window.is-spinning.col-0-stopped .slots-reel:nth-child(3n+1),
.slots-reel-window.is-spinning.col-1-stopped .slots-reel:nth-child(3n+2),
.slots-reel-window.is-spinning.col-2-stopped .slots-reel:nth-child(3n+3) {
    opacity: 1;
    animation: slotsReelDrop 240ms ease-out both;
}

@keyframes slotsReelDrop {
    0%   { transform: translateY(-10px); }
    65%  { transform: translateY(3px); }
    100% { transform: translateY(0); }
}

/* Result badge dismiss animation */
.bj-result-badge.sl-badge-dismiss {
    animation: slBadgeDismiss 350ms ease-in forwards;
    pointer-events: none;
}

@keyframes slBadgeDismiss {
    0%   { opacity: 1;    transform: translate(-50%, -50%) scale(1); }
    60%  { opacity: 0.4;  transform: translate(-50%, -58%) scale(1.06); }
    100% { opacity: 0;    transform: translate(-50%, -70%) scale(0.85); }
}

.hitlist-page {
    display: grid;
    gap: 10px;
}

.murder-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.murder-header-row h2 {
    margin: 0;
}

.murder-bullet-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: #d0d0d0;
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    border-radius: 20px;
    padding: 4px 14px;
    white-space: nowrap;
}

.murder-header-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.murder-perk-chip {
    font-size: 0.78rem;
    font-weight: 600;
    color: #f0c040;
    background: #1a1500;
    border: 1px solid #5a4000;
    border-radius: 20px;
    padding: 4px 12px;
    white-space: nowrap;
}

.murder-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.murder-tabs .btn span {
    color: #bfbfbf;
    margin-left: 4px;
}

.hit-card {
    border: 1px solid #3a3a3a;
    background: linear-gradient(150deg, rgba(31, 31, 31, 0.96), rgba(17, 17, 17, 0.96));
    padding: 10px;
}

.detective-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.detective-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid #242424;
    border-radius: 4px;
    background: #0f0f0f;
    transition: border-color 150ms, background 150ms;
    overflow: hidden;
}

.detective-card-v2::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: transparent;
    transition: background 150ms;
}

.detective-card-v2::after { display: none; }

.detective-card-v2 input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.detective-card-v2:hover {
    border-color: #333333;
    background: #111111;
}

.detective-card-v2:has(input[type="radio"]:checked) {
    border-color: #464646;
    background: #131313;
}

.detective-card-v2:has(input[type="radio"]:checked)::before {
    background: #a07838;
}

.detective-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 10px 14px;
    border-bottom: 1px solid #1c1c1c;
}

.detective-card-head strong {
    font-size: 13px;
    color: #e8e8e8;
    font-weight: 600;
    line-height: 1.2;
}

.detective-card-head .fee {
    font-size: 12px;
    font-weight: 700;
    color: #b89040;
    white-space: nowrap;
}

.detective-persona {
    font-size: 11px;
    color: #4e4e4e;
    line-height: 1.5;
    margin: 0;
    padding: 9px 14px 0;
    flex: 1;
    font-style: italic;
}

.detective-services {
    font-size: 10.5px;
    color: #424242;
    padding: 5px 14px 12px;
    margin: 0;
    line-height: 1.4;
}

.detective-services em {
    color: #565656;
    font-style: normal;
    font-weight: 600;
}

.detective-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid #1c1c1c;
    margin-top: auto;
}

.dc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    border-right: 1px solid #1a1a1a;
    gap: 2px;
}

.dc-stat:last-child {
    border-right: none;
}

.dc-stat span {
    font-size: 9px;
    color: #464646;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.dc-stat strong {
    font-size: 11px;
    color: #888888;
    font-weight: 600;
    line-height: 1.2;
    transition: color 150ms;
}

.detective-card-v2:has(input[type="radio"]:checked) .dc-stat strong {
    color: #b08040;
}

/* ================================================================
   DETECTIVE CARDS — refined "case file" styling
   (higher specificity to override forced-uppercase label rule)
   ================================================================ */
.hit-detectives .detective-card-v2 {
    text-transform: none;
    letter-spacing: normal;
    border: 1px solid #2b2b2b;
    border-radius: 8px;
    background: linear-gradient(165deg, #17171a 0%, #101012 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.hit-detectives .detective-card-v2 * {
    text-transform: none;
    letter-spacing: normal;
}

.hit-detectives .detective-card-v2:hover {
    border-color: #4a4335;
    background: linear-gradient(165deg, #1b1b1e 0%, #121214 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Gold accent bar thicker + glow when selected */
.hit-detectives .detective-card-v2::before {
    width: 3px;
    background: transparent;
}
.hit-detectives .detective-card-v2:has(input[type="radio"]:checked) {
    border-color: #c9a24a;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(201, 162, 74, 0.12) 0%, rgba(201, 162, 74, 0) 55%),
        linear-gradient(165deg, #1b1913 0%, #121011 100%);
    box-shadow:
        0 0 0 1px rgba(201, 162, 74, 0.25) inset,
        0 6px 18px rgba(0, 0, 0, 0.45);
}
.hit-detectives .detective-card-v2:has(input[type="radio"]:checked)::before {
    background: var(--nav-gold, #c9a24a);
    box-shadow: 0 0 10px rgba(201, 162, 74, 0.7);
}

/* Header: nicely cased title + gold fee chip */
.hit-detectives .detective-card-head {
    padding: 11px 13px 10px 15px;
    border-bottom: 1px solid #232323;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
}
.hit-detectives .detective-card-head strong {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #f2ead6;
    line-height: 1.25;
}
.hit-detectives .detective-card-head .fee {
    font-size: 11px;
    font-weight: 700;
    color: #e2c477;
    background: rgba(201, 162, 74, 0.12);
    border: 1px solid rgba(201, 162, 74, 0.28);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

/* Flavor text: readable, not near-black */
.hit-detectives .detective-persona {
    font-size: 11px;
    line-height: 1.55;
    color: #a2a2a2;
    font-style: italic;
    padding: 10px 15px 4px;
}
.hit-detectives .detective-services {
    font-size: 10.5px;
    line-height: 1.5;
    color: #8f8f8f;
    padding: 4px 15px 12px;
}
.hit-detectives .detective-services em {
    font-style: normal;
    font-weight: 700;
    color: #c9a24a;
    letter-spacing: 0.02em;
}

/* Stat footer: keep compact, restore intentional uppercase labels */
.hit-detectives .detective-card-stats {
    border-top: 1px solid #232323;
    background: rgba(0, 0, 0, 0.22);
}
.hit-detectives .dc-stat {
    border-right: 1px solid #202020;
    padding: 9px 6px;
    gap: 3px;
}
.hit-detectives .dc-stat span {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 8.5px;
    color: #7a7264;
}
.hit-detectives .dc-stat strong {
    font-size: 12px;
    color: #c6c6c6;
}
.hit-detectives .detective-card-v2:has(input[type="radio"]:checked) .dc-stat strong {
    color: #e2c477;
}

.murder-resolved-wrap {
    margin-top: 20px;
}

.murder-resolved-wrap summary {
    cursor: pointer;
    color: #888888;
    font-size: 12px;
    margin-bottom: 8px;
    user-select: none;
}

.hit-card h3 {
    margin: 0 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.hit-form-stack {
    display: grid;
    gap: 10px;
}

.hit-form-stack label,
.hit-shot-form label {
    display: grid;
    gap: 4px;
    color: #d4d4d4;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hit-form-stack input:not([type="radio"]),
.hit-shot-form input {
    width: 100%;
    border: 1px solid #4a4a4a;
    background: #131313;
    color: #f4f4f4;
    padding: 7px 8px;
    font-size: 11px;
}

.hit-detective-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.detective-pill {
    border: 1px solid #3e3e3e;
    background: #151515;
    padding: 8px;
    display: grid;
    gap: 3px;
}

.detective-pill.selectable {
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.detective-pill.selectable:hover {
    border-color: #7b6e57;
    transform: translateY(-1px);
}

.detective-pill.selectable input[type="radio"] {
    position: absolute;
    top: 10px;
    left: 9px;
    margin: 0;
}

.detective-pill.selectable:has(input[type="radio"]:checked) {
    border-color: #c9a36f;
    background: linear-gradient(145deg, rgba(64, 50, 31, 0.44), rgba(20, 17, 13, 0.96));
    box-shadow: 0 0 0 1px rgba(201, 163, 111, 0.25) inset;
}

.detective-pill strong {
    color: #f5e8cf;
}

.detective-pill .fee {
    color: #d9c299;
    font-weight: 600;
}

.hit-bullet-intel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    padding: 6px 8px;
    color: #c0c0c0;
    font-size: 12px;
}

.hit-warning-badge {
    border: 1px solid rgba(201, 74, 74, 0.8);
    background: rgba(133, 29, 29, 0.35);
    color: #ffdada;
    padding: 5px 7px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hit-track-list,
.hit-log-list {
    display: grid;
    gap: 8px;
}

.hit-searching-card {
    border-color: #4a3f30;
    background: linear-gradient(160deg, rgba(45, 35, 23, 0.92), rgba(18, 15, 11, 0.98));
    box-shadow: inset 0 0 0 1px rgba(217, 178, 120, 0.14);
    padding: 14px;
    gap: 12px;
}

.hit-searching-card > h3 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f2e1c5;
    margin: 0;
    font-size: 13px;
}

.hit-searching-card > h3::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d5ad72;
    box-shadow: 0 0 0 3px rgba(213, 173, 114, 0.22);
}

.hit-track-list-searching {
    gap: 12px;
}

.hit-searching-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #3a3a3a;
    background: #131313;
}

.hit-searching-sentence {
    margin: 0;
    font-size: 13px;
    color: #d0d0d0;
    line-height: 1.5;
    flex: 1 1 auto;
}

.hit-searching-sentence strong {
    color: #ffffff;
    font-weight: 600;
}

.hit-searching-timer {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid #4a4a4a;
    background: #1e1e1e;
    color: #ffffff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    border-radius: 4px;
    font-size: 12px;
}

.hit-searching-cancel {
    flex: 0 0 auto;
}

.hit-searching-cancel .btn-sm {
    padding: 4px 12px;
    font-size: 12px;
    min-height: 28px;
}

@media (max-width: 700px) {
    .hit-searching-card {
        padding: 11px;
    }

    .hit-searching-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.hit-track-item,
.hit-log-item {
    border: 1px solid #3c3c3c;
    background: #141414;
    padding: 8px;
    display: grid;
    gap: 5px;
}

.hit-found-item {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-color: rgba(201, 74, 74, 0.35);
    background: linear-gradient(160deg, rgba(24, 12, 12, 0.99), rgba(8, 4, 4, 0.99));
    overflow: hidden;
}

.hit-found-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.hit-found-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hit-found-name {
    font-size: 17px;
    color: #ffffff;
    letter-spacing: 0.02em;
    font-family: var(--font-display);
}

.hit-found-pill {
    font-size: 11px;
    color: #c0c0c0;
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    padding: 2px 8px;
}

.hit-found-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hit-found-expires {
    font-size: 11px;
    color: #a0a0a0;
    font-variant-numeric: tabular-nums;
}

.hit-found-immunity {
    margin: 0;
    font-size: 12px;
    color: #f0b369;
    background: rgba(240, 130, 40, 0.08);
    border: 1px solid rgba(240, 130, 40, 0.25);
    padding: 4px 10px;
    border-radius: 3px;
}

.hit-found-note {
    margin: 0;
    color: #999;
    font-size: 11px;
    font-style: italic;
}

.hit-found-shot-form {
    display: grid;
    gap: 8px;
}

.hit-found-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hit-found-slider-row input[type="range"] {
    flex: 1;
    accent-color: #888;
}

.hit-found-btns-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hit-found-btns-row .btn {
    min-width: 52px;
}

.hit-found-btns-row .btn:last-child {
    margin-left: auto;
}

.hit-found-cancel-form {
    display: flex;
}

.hit-track-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.status-chip {
    border: 1px solid #555;
    background: #1c1c1c;
    padding: 2px 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hit-track-item.status-tracked .status-chip {
    border-color: rgba(72, 167, 101, 0.8);
    color: #7fe09b;
}

.hit-track-item.status-failed .status-chip,
.hit-track-item.status-expired .status-chip,
.hit-track-item.status-consumed .status-chip {
    border-color: rgba(201, 74, 74, 0.8);
    color: #e19494;
}

.hit-track-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #c8c8c8;
}

.hit-shot-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
}

.hit-shot-form input[type="range"] {
    accent-color: #c9a36f;
}

.hit-slider-readout {
    color: #e7d4b0;
    font-size: 10px;
}

.hit-shot-presets {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.hit-shot-presets .btn {
    min-width: 58px;
    padding: 5px 8px;
}

.hit-row-inline-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.hit-log-item.success {
    border-color: rgba(72, 167, 101, 0.65);
    position: relative;
    overflow: hidden;
}

.hit-log-item.fail {
    border-color: rgba(201, 74, 74, 0.65);
    position: relative;
    overflow: hidden;
}

.hit-log-item.success::before,
.hit-log-item.fail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
}

.hit-log-item.success::before {
    background: #43b266;
}

.hit-log-item.fail::before {
    background: #d25555;
}

.hit-log-item.status-searching {
    border-color: rgba(170, 130, 35, 0.4);
    position: relative;
    overflow: hidden;
}

.hit-log-item.status-searching::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #9a7020;
}

.hit-log-outcome-chip.outcome-searching {
    background: rgba(160, 120, 30, 0.12);
    border-color: rgba(160, 120, 30, 0.45);
    color: #b08030;
}

.hit-log-sentence {
    margin: 0;
    font-size: 13px;
    color: #d0d0d0;
    padding-left: 10px;
    flex: 1 1 auto;
}

.hit-log-sentence strong {
    color: #ffffff;
    font-weight: 600;
}

.hit-log-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 10px;
}

.hit-log-outcome-chip {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid transparent;
}

.hit-log-outcome-chip.outcome-kill {
    background: rgba(72, 167, 101, 0.15);
    border-color: rgba(72, 167, 101, 0.55);
    color: #7fe09b;
}

.hit-log-outcome-chip.outcome-survive {
    background: rgba(201, 74, 74, 0.15);
    border-color: rgba(201, 74, 74, 0.55);
    color: #e19494;
}

.hit-log-time {
    margin-left: auto;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    flex: 0 0 auto;
}

.hit-log-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 20px;
    margin-top: 4px;
}

.hit-log-stats span {
    font-size: 11px;
    color: #999;
}

.hit-log-stats strong {
    color: #d0d0d0;
}

.hit-log-note {
    margin: 2px 0 0;
    font-size: 11px;
    color: #888888;
    padding-left: 20px;
    font-style: italic;
}

/* Target HP bar in Found tab */
.hit-target-hp-wrap {
    display: grid;
    gap: 4px;
}

.hit-target-hp-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hit-target-hp-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.hit-target-hp-numbers {
    font-size: 11px;
    font-weight: 600;
    color: #ccc;
    font-variant-numeric: tabular-nums;
}

.hit-target-hp-track {
    height: 12px;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    overflow: hidden;
}

.hit-target-hp-fill {
    height: 100%;
    transition: width 0.3s ease;
}

/* ─── Found card redesign ─────────────────────────── */

.hit-found-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -14px -14px 0;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(201, 74, 74, 0.2);
    background: rgba(180, 40, 40, 0.08);
}

.hit-found-acquire-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #b06060;
}

.hit-found-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hit-intel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #252525;
    border: 1px solid #333;
}

.hit-intel-cell {
    background: #141414;
    padding: 10px 12px;
    display: grid;
    gap: 3px;
}

.hit-intel-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #606060;
}

.hit-intel-value {
    font-size: 14px;
    font-weight: 700;
    color: #e8d4b0;
    font-variant-numeric: tabular-nums;
}

.hit-shot-controls {
    display: grid;
    gap: 8px;
}

.hit-shot-presets-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hit-shot-presets-label {
    font-size: 10px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hit-shot-controls input[type="range"] {
    width: 100%;
    accent-color: #c94a4a;
    margin: 0;
}

.btn-take-shot {
    width: 100%;
    padding: 11px;
    background: linear-gradient(160deg, rgba(110, 24, 24, 0.97), rgba(55, 10, 10, 0.97));
    border: 1px solid rgba(201, 74, 74, 0.45);
    color: #ffcccc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font-display);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-take-shot:hover:not(:disabled) {
    background: linear-gradient(160deg, rgba(150, 35, 35, 0.97), rgba(85, 18, 18, 0.97));
    border-color: rgba(201, 74, 74, 0.75);
    color: #ffffff;
}

.btn-take-shot:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

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

    .hit-detective-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .hit-detective-grid {
        grid-template-columns: 1fr;
    }

    .hit-shot-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .keno-board {
        grid-template-columns: repeat(10, 1fr);
    }

    .slots-reel-window {
        grid-template-columns: repeat(3, minmax(70px, 1fr));
        grid-template-rows: repeat(3, minmax(68px, 1fr));
    }

    .slots-spin-overlay {
        grid-template-columns: repeat(3, minmax(70px, 1fr));
    }

    .slots-spin-symbol {
        min-height: 68px;
    }

    .slots-symbol-image,
    .slots-reel img {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }
}

@media (max-width: 620px) {
    .keno-tabs-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .keno-auto-btn {
        width: 100%;
    }

    .keno-controls {
        grid-template-columns: 1fr;
        max-width: 440px;
    }

    .keno-board-wrap {
        grid-column: unset;
        grid-row: unset;
    }

    .keno-pick-bar {
        grid-column: unset;
        grid-row: unset;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .keno-pick-bar .btn {
        flex: 1;
        width: auto;
    }

    .keno-bet-panel {
        grid-column: unset;
        grid-row: unset;
    }

    .keno-action-bar {
        grid-column: unset;
        grid-row: unset;
    }

    .keno-clear-row {
        max-width: 440px;
    }

    .sl-game-wrap {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .keno-board {
        grid-template-columns: repeat(10, 1fr);
    }

    .keno-cell {
        font-size: 8px;
    }

    .keno-control-row .btn,
    .keno-control-row input[type="text"] {
        min-width: 96px;
        height: 32px;
    }

    .roulette-display {
        grid-template-columns: 1fr;
    }

    .roulette-number-grid {
        grid-template-columns: 1fr;
    }

    .roulette-spot-zero {
        min-height: 44px;
    }

    .roulette-number-columns {
        grid-template-columns: repeat(12, minmax(42px, 1fr));
    }

    .roulette-column-bets {
        grid-template-columns: repeat(3, minmax(74px, 1fr));
        grid-template-rows: 1fr;
    }

    .roulette-outside-grid {
        grid-template-columns: repeat(3, minmax(90px, 1fr));
    }

    .roulette-form-row input[type="text"],
    .roulette-form-row select,
    .roulette-form-row input[type="number"],
    .roulette-form-row .btn {
        width: 100%;
        max-width: 330px;
    }

    .slots-controls {
        max-width: 330px;
    }
}

.blackjack-table .alert-error {
    border-color: #cb4d4d;
    background: rgba(170, 18, 18, 0.5);
    color: #ffe1e1;
}

@keyframes blackjackDealIn {
    0% {
        opacity: 0;
        transform: translateY(18px) rotate(-3deg) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }
}

@keyframes blackjackResultPop {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tableGlowSweep {
    0% {
        transform: translateX(-4%) rotate(0deg);
    }
    50% {
        transform: translateX(4%) rotate(1deg);
    }
    100% {
        transform: translateX(-4%) rotate(0deg);
    }
}

@keyframes chipSettleIn {
    0% {
        opacity: 0;
        transform: translateY(5px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 700px) {
    .blackjack-card,
    .blackjack-card-face {
        width: 72px;
        height: 106px;
    }

    .card-rank {
        font-size: 14px;
    }

    .card-center {
        font-size: 30px;
    }
}

.heist-inventory-panel {
    border-color: #463a2b;
    background: linear-gradient(140deg, rgba(30, 25, 20, 0.9) 0%, rgba(16, 13, 10, 0.95) 100%);
}

.heist-loot-sell-form {
    margin-top: 4px;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 6px;
    align-items: center;
}

.heist-loot-sell-form input[type="number"] {
    border: 1px solid #5a4938;
    background: #12100d;
    color: #f6f0e4;
    padding: 4px 6px;
    min-height: 30px;
}

.heist-loot-sell-form .btn {
    min-height: 30px;
    padding: 4px 7px;
}

.heist-signal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    margin-top: 4px;
}

.intel-chip {
    border: 1px solid #4a4034;
    background: #191611;
    color: #ddd2bd;
    padding: 2px 7px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 10px;
}

.intel-chip.is-ready {
    border-color: #3f7047;
    background: rgba(38, 86, 49, 0.35);
    color: #d8f3dd;
}

.intel-chip.is-missing {
    border-color: #7a3a3a;
    background: rgba(117, 41, 41, 0.3);
    color: #f3d0d0;
}

.heist-intel-panel {
    width: 100%;
    border: 1px solid #3b3126;
    background: #14110d;
    padding: 7px;
    box-shadow: inset 0 0 0 1px rgba(102, 82, 54, 0.2);
}

.heist-intel-details {
    width: 100%;
    margin-top: 6px;
    border: 1px solid #3a3024;
    background: #15120f;
}

.heist-intel-details > summary {
    cursor: pointer;
    padding: 7px 9px;
    color: #e4d0ae;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    list-style: none;
}

.heist-intel-details > summary::-webkit-details-marker {
    display: none;
}

.heist-intel-details > summary::after {
    content: 'Expand';
    float: right;
    color: #baa178;
    font-size: 10px;
}

.heist-intel-details[open] > summary::after {
    content: 'Collapse';
}

.heist-intel-details .heist-intel-panel {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.heist-intel-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f1dfc2;
    margin-bottom: 6px;
}

.heist-intel-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 6px;
}

.heist-intel-item {
    border: 1px solid #4a3c2d;
    background: #1c1612;
    padding: 7px;
    display: grid;
    gap: 3px;
}

.heist-intel-item.is-ready {
    border-color: #58633c;
    background: #1b1e13;
}

.heist-intel-item.is-maxed {
    border-color: #3f7047;
    background: #162117;
}

.heist-intel-item.is-missing {
    border-color: #7a3a3a;
    background: #211414;
}

.heist-intel-head {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    align-items: center;
}

.intel-state-badge {
    border: 1px solid #5a5a5a;
    background: #232323;
    color: #f0f0f0;
    padding: 1px 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bullet-factory-page {
    --bf-line: #3f3f3f;
    --bf-line-soft: #525252;
    --bf-accent: #b7b7b7;
    --bf-bg-a: #161616;
    --bf-bg-b: #111111;
    --bf-soft: #d0d0d0;
    width: min(960px, 100%);
    margin: 10px auto 0;
    border: 1px solid #3a3a3a;
    background: linear-gradient(150deg, rgba(31, 31, 31, 0.96), rgba(17, 17, 17, 0.96));
    box-shadow: none;
    padding: 10px;
    position: relative;
}

.bullet-factory-page.is-viewer {
    width: min(960px, 100%);
    max-width: 100%;
    height: auto;
    margin: 10px auto 0;
    overflow: visible;
    border-color: #3a3a3a;
    box-shadow: none;
}

.bullet-factory-page h2 {
    margin: 0;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-size: 12px;
    color: #ffffff;
}

.bullet-factory-page .meta {
    color: #a8a8a8;
    font-size: 11px;
}

.bf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid #5a2a2a;
    background: linear-gradient(145deg, rgba(92, 28, 28, 0.92), rgba(45, 14, 14, 0.96));
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
}

.bf-header-copy {
    width: auto;
}

.bf-header-copy h2,
.bf-header-copy .meta {
    position: relative;
    z-index: 1;
}

.bf-header-copy .meta {
    margin: 0;
    color: #f0d6d6;
}

.bf-owner-ribbon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 auto 9px;
}

.bf-ribbon-chip {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    color: #c0c0c0;
    padding: 4px 8px;
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 3px;
}

.bf-ribbon-chip strong {
    color: #ffffff;
}

.bullet-owner-tabs {
    display: flex;
    gap: 5px;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.bullet-owner-tabs .btn {
    min-width: 108px;
    min-height: 31px;
    text-align: center;
    padding: 5px 10px;
    border-color: #4a4a4a;
    background: #101010;
    color: #ffffff;
    font-size: 11px;
}

.bullet-owner-tabs .btn.is-active {
    border-color: #6a6a6a;
    background: #1a1a1a;
    color: #ffffff;
    box-shadow: none;
}

.bf-series-list {
    display: grid;
    gap: 6px;
    margin-top: 7px;
}

.bf-series-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: 1px solid #3a3a3a;
    background: #141414;
    padding: 6px 8px;
}

.bf-series-item span {
    color: #c0c0c0;
    font-size: 11px;
    letter-spacing: 0.03em;
}

.bf-series-item strong {
    color: #ffffff;
    font-size: 11px;
}

.bullet-factory-page .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 7px;
    margin: 0 auto;
    width: 100%;
}

.bullet-factory-page .stat-card {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    padding: 7px;
    text-align: center;
    transition: border-color 160ms ease, background 160ms ease;
}

.bullet-factory-page .stat-card strong[data-bf-anim-value] {
    display: inline-block;
    transition: color 150ms ease, text-shadow 160ms ease;
}

.bullet-factory-page .stat-card strong[data-bf-anim-value].is-value-pop {
    color: #ffffff;
    text-shadow: none;
}

.bf-stat-card {
    position: relative;
    overflow: hidden;
}

.bf-stat-card::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: #d9d9d9;
    box-shadow: 0 0 0 3px rgba(217, 217, 217, 0.14);
}

.bf-stat-card span,
.bf-stat-card strong,
.bf-stat-card small {
    position: relative;
    z-index: 1;
}

.bf-stat-card.is-stock::before,
.bf-stat-card.is-price::before,
.bf-stat-card.is-restock::before,
.bf-stat-card.is-access::before,
.bf-stat-card.is-bank::before,
.bf-stat-card.is-production::before,
.bf-stat-card.is-runway::before {
    border-radius: 50%;
    transform: none;
}

.bf-production-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.bf-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #6a6a6a;
    background: #6f6f6f;
}

.bf-production-state.is-live .bf-live-dot {
    background: #6fb581;
    border-color: #6fb581;
    box-shadow: 0 0 0 0 rgba(111, 181, 129, 0.42);
    animation: bfLivePulse 1.8s ease-out infinite;
}

.bf-production-state.is-paused .bf-live-dot {
    background: #9b6d6d;
    border-color: #9b6d6d;
}

@keyframes bfLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(111, 181, 129, 0.4);
    }
    75% {
        box-shadow: 0 0 0 8px rgba(111, 181, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(111, 181, 129, 0);
    }
}

.bullet-factory-page .stat-card:hover {
    border-color: #555555;
    transform: none;
    background: #1a1a1a;
}

.bullet-factory-page .stat-card span {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a0a0a0;
}

.bullet-factory-page .stat-card strong {
    color: #ffffff;
    font-size: 13px;
}

.bullet-factory-page .stat-card small {
    display: block;
    margin-top: 2px;
    color: #909090;
    font-size: 10px;
}

.bullet-buy-panel {
    margin-top: 8px;
    border: 1px solid #3a3a3a;
    background: linear-gradient(150deg, rgba(31, 31, 31, 0.96), rgba(17, 17, 17, 0.96));
    padding: 10px;
    width: 100%;
}

.bullet-buy-panel + .bullet-buy-panel {
    border-top: 1px solid #2d2d2d;
}

.bullet-buy-panel .actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 6px;
    justify-content: flex-start;
}

.bf-buy-ammo-panel {
    text-align: center;
    position: relative;
}

.bf-buy-ammo-panel .meta,
.bf-buy-ammo-panel h3,
.bf-buy-ammo-panel .bullet-cooldown-note {
    text-align: center;
}

.bf-buy-form {
    max-width: 520px;
    margin: 8px auto 0;
    display: grid;
    gap: 10px;
    justify-items: center;
    justify-content: center;
    text-align: center;
}

.bullet-buy-panel .actions.bf-buy-form {
    display: grid;
    justify-items: center;
    justify-content: center;
}

.bf-buy-form .bullet-qty-label {
    margin: 0;
    width: 100%;
    text-align: center;
}

.bf-buy-slider-wrap {
    width: min(100%, 420px);
    display: grid;
    gap: 6px;
}

.bf-buy-form input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: #b63a3a;
}

.bf-buy-form input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(90deg, #6f1f1f 0%, #b63a3a 100%);
    border-radius: 999px;
}

.bf-buy-form input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    border: 1px solid #f0c0c0;
    background: #d04b4b;
    box-shadow: 0 0 0 3px rgba(182, 58, 58, 0.18);
}

.bf-buy-form input[type="range"]::-moz-range-track {
    height: 6px;
    background: linear-gradient(90deg, #6f1f1f 0%, #b63a3a 100%);
    border-radius: 999px;
    border: 0;
}

.bf-buy-form input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #f0c0c0;
    background: #d04b4b;
    box-shadow: 0 0 0 3px rgba(182, 58, 58, 0.18);
}

.bf-buy-scale {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #8d8d8d;
    font-size: 10px;
    letter-spacing: 0.04em;
}

.bf-buy-readout {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #3a3a3a;
    background: #171717;
    color: #bcbcbc;
    font-size: 11px;
    text-align: center;
    border-radius: 3px;
}

.bf-buy-readout strong {
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
}

.bf-buy-readout em {
    color: #bcbcbc;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}

.bf-buy-form .btn {
    justify-self: center;
    min-width: 160px;
}

.bf-buy-ammo-panel.is-locked .bf-buy-form {
    opacity: 0.24;
    filter: grayscale(0.5);
    pointer-events: none;
    user-select: none;
}

.bf-buy-lock-banner {
    width: min(500px, 92%);
    margin: 10px auto 0;
    border: 1px solid #872d2d;
    background: linear-gradient(145deg, rgba(125, 32, 32, 0.9), rgba(70, 17, 17, 0.95));
    color: #ffe1e1;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
}

.bullet-buy-panel.bf-smelt-panel {
    text-align: center;
    border-color: #3a3a3a;
    background: linear-gradient(150deg, rgba(31, 31, 31, 0.96), rgba(17, 17, 17, 0.96)) !important;
    box-shadow: none;
}

.bf-smelt-panel-head {
    margin: -10px -10px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #7a2b2b;
    background: linear-gradient(165deg, rgba(96, 24, 24, 0.98), rgba(46, 12, 12, 0.99));
}

.bf-smelt-panel h3,
.bf-smelt-panel .meta {
    text-align: center;
}

.bf-smelt-panel .meta {
    color: #e2bcbc;
}

.bf-smelt-panel-head h3 {
    margin-bottom: 0;
}

.bf-smelt-panel-head .meta {
    margin: 0;
}

.bullet-buy-panel.bf-smelt-panel .bf-smelt-panel-head h3 {
    margin: 0;
}

.bullet-buy-panel.bf-smelt-panel .bf-smelt-panel-head .meta {
    margin: 0;
}

.bf-smelt-form {
    max-width: 520px;
    margin: 8px auto 0;
    display: grid;
    gap: 10px;
    justify-items: center;
    justify-content: center;
    text-align: center;
}

.bullet-buy-panel .actions.bf-smelt-form {
    display: grid;
    justify-items: center;
    justify-content: center;
}

.bf-smelt-form .bullet-qty-label {
    margin: 0;
    width: 100%;
    text-align: center;
}

.bf-smelt-form select {
    width: min(500px, 90%);
    min-width: 0;
    min-height: 36px;
    border-color: #5a2a2a;
    background: linear-gradient(145deg, rgba(46, 14, 14, 0.78), rgba(22, 11, 11, 0.96));
    color: #f3e2e2;
}

.bf-smelt-form select:focus {
    outline: 1px solid #b63a3a;
    outline-offset: 1px;
}

.bf-smelt-form .btn {
    justify-self: center;
    min-width: 190px;
}

.bf-smelt-btn-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.bf-smelt-btn-row .btn {
    min-width: 190px;
    height: 38px;
    min-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
}

.bf-hidden-submit-form {
    display: none;
}

.bf-control-grid {
    display: grid;
    gap: 7px;
    margin-top: 6px;
}

.bf-control-row {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(130px, 160px) 170px;
    gap: 7px;
    align-items: center;
    border: 1px solid #3a3a3a;
    background: #141414;
    padding: 7px;
}

.bf-control-row-inline {
    grid-template-columns: 170px 1fr;
}

.bf-control-row .btn {
    width: 100%;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
    white-space: nowrap;
}

.bf-control-label {
    margin: 0;
    justify-self: end;
    text-align: right;
}

.bf-smelt-row {
    margin-top: 8px;
    grid-template-columns: minmax(190px, 1fr) minmax(260px, 1fr) 140px;
}

.bullet-qty-label {
    color: #d4d4d4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}

.bullet-buy-panel input[type="number"] {
    width: 118px;
    min-width: 100px;
    height: 30px;
    border: 1px solid #4a4a4a;
    background: #131313;
    color: #f4f4f4;
    padding: 0 8px;
    font-size: 11px;
}

.bullet-buy-panel select {
    min-width: 260px;
    max-width: 100%;
    height: 30px;
    border: 1px solid #4a4a4a;
    background: #131313;
    color: #f4f4f4;
    padding: 0 8px;
    font-size: 11px;
}

.bullet-buy-panel .btn {
    min-height: 30px;
    width: auto;
    min-width: 130px;
    font-size: 11px;
    padding: 6px 10px;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.bullet-buy-panel .btn:hover:not(:disabled) {
    transform: none;
}

.bullet-buy-panel .btn:focus-visible {
    outline: 1px solid #8d8d8d;
    outline-offset: 1px;
}

.bf-control-row input[type="number"],
.bf-control-row select {
    width: 100%;
}

.bullet-buy-panel .meta {
    color: #a8a8a8;
    text-align: left;
}

.bullet-buy-panel h3 {
    margin-top: 0;
    margin-bottom: 6px;
    letter-spacing: 0.07em;
    font-size: 12px;
    color: #ffffff;
    text-align: left;
    text-transform: uppercase;
}

.bullet-buy-panel.bf-buy-ammo-panel h3 {
    text-align: center;
}

@media (max-width: 900px) {
    .bullet-factory-page.is-viewer {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .bullet-factory-page {
        width: 100%;
    }

    .bf-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bullet-owner-tabs {
        justify-content: flex-start;
    }

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

    .bf-control-row,
    .bf-control-row-inline,
    .bf-smelt-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* ─── Bullet Factory Redesign ──────────────────────────────── */

.bf-page {
    display: grid;
    gap: 14px;
}

/* Top bar */
.bf-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #3a2a2a;
    background: linear-gradient(145deg, #1c0e0e 0%, #100808 100%);
    flex-wrap: wrap;
}

.bf-page-h2 {
    margin: 0 0 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
}

.bf-top-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bf-chip {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8a7060;
    padding: 2px 7px;
    border: 1px solid #3a2a20;
    background: rgba(0,0,0,0.3);
}

.bf-chip strong { color: #d4b89a; }

/* Tab nav */
.bf-tabs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.bf-tab {
    display: inline-block;
    padding: 5px 14px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a6a5a;
    border: 1px solid #2e2020;
    background: #100808;
    text-decoration: none;
    transition: border-color 120ms, color 120ms, background 120ms;
}

.bf-tab:hover { border-color: #5a3030; color: #c0a080; background: #1a0e0e; }

.bf-tab.is-active {
    border-color: #8a3a3a;
    color: #e0b090;
    background: #1e0e0e;
}

/* Stat tiles */
.bf-stat-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #2a1a1a;
    border: 1px solid #2e1e1e;
}

@media (max-width: 700px) {
    .bf-stat-tiles { grid-template-columns: repeat(2, 1fr); }
}

.bf-tile {
    background: #0e0808;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bf-tile span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a4535;
}

.bf-tile strong {
    font-size: 20px;
    font-weight: 700;
    color: #e0d0bc;
    letter-spacing: -0.01em;
}

.bf-tile small {
    font-size: 10px;
    color: #4a3a2a;
}

/* Access strip */
.bf-access-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 11px;
    border: 1px solid #2a2a2a;
}

.bf-access-strip.is-open  { border-color: #2a4028; background: rgba(20,45,20,0.3); color: #6aaa6a; }
.bf-access-strip.is-blocked { border-color: #4a2020; background: rgba(50,15,15,0.3); color: #c07070; }

.bf-access-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bf-access-strip.is-open .bf-access-dot  { background: #4a9a4a; box-shadow: 0 0 0 0 rgba(74,154,74,0.4); animation: bfLivePulse 1.8s ease-out infinite; }
.bf-access-strip.is-blocked .bf-access-dot { background: #9a4a4a; }

/* Market two-col grid */
.bf-market-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 720px) { .bf-market-grid { grid-template-columns: 1fr; } }

/* Buy + Smelt card heads */
.bf-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bf-card-head h3 {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #b0a090;
}

.bf-balance-chip {
    font-size: 10px;
    color: #8a7a60;
    padding: 2px 7px;
    border: 1px solid #2e2820;
    background: rgba(0,0,0,0.3);
}

/* Buy panel */
.bf-buy-card.is-locked {
    position: relative;
}

.bf-buy-card.is-locked .bf-buy-form {
    opacity: 0.25;
    pointer-events: none;
    user-select: none;
    filter: grayscale(0.4);
}

.bf-lock-overlay {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #7a2a2a;
    background: rgba(80,15,15,0.7);
    font-size: 11px;
    color: #f0c0c0;
    text-align: center;
}

.bf-lock-overlay[hidden] { display: none; }

/* Slider section */
.bf-slider-section {
    display: grid;
    gap: 5px;
}

.bf-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #5a4535;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bf-qty-label { color: #8a7060; }

.bf-buy-form input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: #b63a3a;
    cursor: pointer;
}

/* Order readout */
.bf-order-readout {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0;
    border: 1px solid #2a2020;
    background: #0e0808;
    margin: 4px 0;
}

.bf-readout-cell {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.bf-readout-cell span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #4a3a2a;
}

.bf-readout-cell strong {
    font-size: 16px;
    font-weight: 700;
    color: #c8bca8;
}

.bf-readout-total strong {
    color: #e3be86;
    font-size: 18px;
}

.bf-readout-op {
    font-size: 16px;
    color: #3a2a20;
    padding: 0 2px;
    user-select: none;
}

.bf-buy-submit {
    width: 100%;
    margin-top: 4px;
}

/* Car grid */
.bf-car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 5px;
    max-height: 260px;
    overflow-y: auto;
    margin: 8px 0 10px;
    padding-right: 2px;
}

.bf-car-card {
    cursor: pointer;
    display: block;
}

.bf-car-card-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid #2e2020;
    background: #0e0808;
    transition: border-color 100ms, background 100ms;
}

.bf-car-card:hover .bf-car-card-inner {
    border-color: #5a3030;
    background: rgba(50,15,10,0.5);
}

.bf-car-card.is-selected .bf-car-card-inner {
    border-color: #8a3a2a;
    background: rgba(80,20,10,0.4);
}

.bf-car-name {
    display: block;
    font-size: 11px;
    color: #d4c0a8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bf-car-value {
    display: block;
    font-size: 10px;
    color: #6a5a40;
}

.bf-car-yield {
    display: block;
    font-size: 11px;
    color: #a07050;
    margin-top: 2px;
}

.bf-car-yield em {
    font-style: normal;
    font-size: 9px;
    color: #5a4030;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bf-smelt-submit,
.bf-smelt-all-btn {
    font-size: 11px;
}

.bf-smelt-submit {
    width: 100%;
    margin-top: 2px;
}

.bf-empty-note { margin-top: 10px; }

/* Control panel */
.bf-control-panel {
    display: grid;
    gap: 0;
}

.bf-control-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #1e1a18;
}

.bf-control-section:last-child { border-bottom: 0; }

.bf-control-section-head { flex: 1; }
.bf-control-section-head h4 { margin: 0 0 3px; font-size: 12px; color: #c8b89a; text-transform: uppercase; letter-spacing: 0.07em; }
.bf-control-section-head .meta { margin: 0; }

.bf-control-form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.bf-control-form input[type="number"] {
    width: 110px;
    padding: 5px 8px;
    background: #0e0e0e;
    border: 1px solid #2e2e2e;
    color: #d4c8b4;
    font-size: 12px;
}

.bf-control-bank-row {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Production state (reused live dot) */
.bf-prod-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Stats bar chart */
.bf-stats-panel h3 {
    margin: 0 0 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #9a8a74;
}

.bf-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: end;
    height: 180px;
}

.bf-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
}

.bf-chart-val {
    font-size: 9px;
    color: #6a5a40;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bf-chart-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bf-chart-bar {
    width: 70%;
    min-height: 3px;
    border-radius: 1px 1px 0 0;
    transition: height 0.4s ease;
}

.bf-chart-bar.is-pos { background: linear-gradient(180deg, #8a6b3a 0%, #5a4020 100%); }
.bf-chart-bar.is-neg { background: linear-gradient(180deg, #7a3030 0%, #4a1a1a 100%); }

.bf-chart-label {
    font-size: 9px;
    color: #4a3a2a;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}



.heist-intel-item.is-ready .intel-state-badge {
    border-color: #70804b;
    background: #27311c;
}

.heist-intel-item.is-maxed .intel-state-badge {
    border-color: #4a8752;
    background: #1f3823;
}

.heist-intel-item.is-missing .intel-state-badge {
    border-color: #8a4c4c;
    background: #3a1f1f;
}

.heist-intel-meta,
.heist-intel-numbers {
    color: #d4c7b3;
}

.heist-intel-use-label {
    color: #dfcfb4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.heist-intel-use-input {
    border: 1px solid #5a4938;
    background: #12100d;
    color: #f6f0e4;
    width: 100%;
    max-width: 100px;
    padding: 5px 6px;
}

.major-heist-card .row-action {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    align-items: center;
    gap: 7px;
    width: 100%;
}

.major-heist-card .row-action select {
    border: 1px solid #574534;
    background: #14110d;
    color: #f4ede0;
    padding: 6px 7px;
}

.major-heist-card .row-main h3 {
    font-size: 14px;
    margin-bottom: 2px;
}

.major-heist-card .row-main p {
    color: #d6cab8;
}

.major-heist-card .availability-tag {
    width: 100%;
}

.major-heist-card .heist-live-note {
    border-left: 2px solid #6f5a3a;
    padding-left: 8px;
    color: #cebfaa;
}

.activity-image {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border: 1px solid #3d3125;
    margin-bottom: 8px;
    opacity: 0.88;
}

.card-kicker {
    display: inline-block;
    border: 1px solid #6f5531;
    background: #2a2017;
    color: #f2dfbf;
    padding: 2px 6px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.activity-card.unavailable {
    opacity: 0.46;
    filter: grayscale(0.35);
}

.activity-card.ready {
    border-color: #6d5230;
    box-shadow: inset 0 0 0 1px rgba(181, 138, 75, 0.22);
}

.availability-tag {
    display: inline-block;
    border: 1px solid #6e332d;
    color: #f1c8c4;
    background: rgba(120, 38, 31, 0.28);
    padding: 3px 7px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.locked-panel {
    margin-top: 10px;
    border: 1px solid #3f3125;
    background: #15110e;
    padding: 8px;
}

.locked-panel > summary {
    cursor: pointer;
    font-family: var(--font-display);
    text-transform: uppercase;
    color: #f0dfc4;
    letter-spacing: 0.06em;
}

.locked-card {
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(20, 17, 14, 0.92) 0px,
            rgba(20, 17, 14, 0.92) 9px,
            rgba(45, 34, 25, 0.92) 9px,
            rgba(45, 34, 25, 0.92) 11px
        );
}

.activity-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.06) 30%, transparent 60%);
    transform: translateX(-140%);
    animation: cardSweep 4.8s ease-in-out infinite;
    pointer-events: none;
}

.activity-card:nth-child(2n) {
    animation-delay: 60ms;
}

.activity-card:nth-child(3n) {
    animation-delay: 120ms;
}

.activity-card h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-family: var(--font-display);
}

.activity-card ul {
    list-style: square;
    padding-left: 16px;
    margin: 7px 0 10px;
}

/* ================================================================
   PROFILE PAGE
   ================================================================ */

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

/* --- Outer panel --- */
.profile-page {
    border-color: #4a3b2a;
    position: relative;
    overflow: visible;
    padding: 0;
}

/* Top accent stripe */
.profile-page::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, #5a4520, #a07840, #5a4520);
    border-radius: 8px 8px 0 0;
}
.profile-page.is-admin::before {
    background: linear-gradient(90deg, #7a1a1a, #c54040, #7a1a1a);
}
.profile-page.is-moderator::before {
    background: linear-gradient(90deg, #1d5e28, #4ba757, #1d5e28);
}

/* Inner padding wrapper so ::before lines up */
.profile-page > h2,
.profile-page > nav,
.profile-page > .profile-hero,
.profile-page > .grid,
.profile-page > .panel,
.profile-page > article,
.profile-page > p {
    padding-left: 18px;
    padding-right: 18px;
}
.profile-page > h2 {
    padding-top: 22px;
    padding-bottom: 0;
    font-size: 1.15rem;
    color: #c8a870;
    letter-spacing: .04em;
    margin: 0 0 4px;
}

/* --- Tab nav --- */
.profile-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 18px 14px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,.05);
    margin-bottom: 0;
}
.profile-tabs .btn {
    font-size: .8rem;
    padding: 5px 14px;
    border-color: #333;
    color: #888;
    background: transparent;
    border-radius: 5px;
    transition: border-color .15s, color .15s, background .15s;
}
.profile-tabs .btn:hover { border-color: #666; color: #ccc; background: rgba(255,255,255,.04); }
.profile-tabs .btn.is-active {
    border-color: #9a7540;
    background: linear-gradient(135deg, #2a1e0e 0%, #1e1608 100%);
    color: #e8c070;
    font-weight: 600;
}

/* --- Hero section --- */
.profile-hero {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: start;
    padding: 20px 18px 16px;
}

/* --- Avatar --- */
.profile-avatar {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 2px solid #6a5030;
    background: #15120f;
    box-shadow: 0 4px 20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
    display: block;
    border-radius: 4px;
}
.profile-avatar.profile-avatar-empty {
    display: grid;
    place-items: center;
    color: #3a3028;
    font-family: var(--font-display);
    letter-spacing: .05em;
    font-size: 11px;
    text-align: center;
    background: linear-gradient(160deg, #1a150f, #110e0a);
    border-style: dashed;
}

/* --- Hero main content --- */
.profile-hero-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Identity row: username + online badge + state-don chip */
.profile-identity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.profile-identity-row strong {
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: #f0e8d8;
    letter-spacing: .03em;
}

/* Online/offline badge */
.profile-online-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    border-radius: 3px;
}
.profile-online-state::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.profile-online-state.is-online {
    border: 1px solid #2f7a39;
    color: #7ee88a;
    background: rgba(27, 87, 39, .25);
}
.profile-online-state.is-online::before { background: #5adf6a; box-shadow: 0 0 5px #5adf6a; }
.profile-online-state.is-offline {
    border: 1px solid #5a2e2e;
    color: #c07070;
    background: rgba(70, 20, 20, .25);
}
.profile-online-state.is-offline::before { background: #884040; }

/* State Don chip (inline in identity row) */
.profile-state-don-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid #c9a040;
    background: linear-gradient(135deg, #3a2608 0%, #6a4c18 50%, #3a2608 100%);
    color: #f5e090;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 3px;
}

/* Crew affiliation row */
.profile-crew-row {
    --crew-color: #8f6b3d;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--crew-color) 8%, #141414 92%);
    border: 1px solid color-mix(in srgb, var(--crew-color) 30%, #2a2a2a 70%);
    border-radius: 4px;
    font-size: .8rem;
}
.profile-crew-tag {
    font-weight: 700;
    color: var(--crew-color);
    font-family: var(--font-display);
    letter-spacing: .05em;
    font-size: .78rem;
}
.profile-crew-name {
    color: #ddd;
    text-decoration: none;
    font-weight: 600;
    font-size: .83rem;
    transition: color .15s;
}
.profile-crew-name:hover { color: #fff; text-decoration: underline; }
.profile-crew-role {
    margin-left: auto;
    font-size: .72rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

.crew-affiliation-badge {
    --crew-color: #8f6b3d;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--crew-color) 60%, #262626 40%);
    background: color-mix(in srgb, var(--crew-color) 14%, #141414 86%);
    color: #e8dcc8;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 3px;
}

/* Meta info grid (rank, account type, wealth, etc.) */
.profile-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
    margin-top: 2px;
}
.profile-meta-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    background: #0e0e0e;
    border: 1px solid #282828;
    border-radius: 4px;
    min-width: 0;
}
.profile-meta-chip span {
    font-size: .66rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-meta-chip strong {
    font-size: .82rem;
    color: #ccc;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Message / action buttons */
.profile-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Quote */
.profile-quote {
    border-left: 3px solid #8a6830;
    margin: 4px 0 0;
    padding: 6px 0 6px 12px;
    color: #c8b890;
    font-style: italic;
    font-size: .88rem;
    line-height: 1.5;
    background: rgba(138,104,48,.06);
}

/* State-don legacy banner (kept for backward compat) */
.state-don-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid #d8b05f;
    background: linear-gradient(120deg, #4a3310 0%, #9a702b 45%, #d9b86f 100%);
    color: #fff7dc;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 3px;
}
.state-don-kicker {
    border: 1px solid rgba(255,240,198,.5);
    background: rgba(34,21,5,.35);
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
}

/* --- Profile sections grid --- */
.profile-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    padding: 14px 18px 0;
}
.profile-sections > .panel {
    padding: 16px;
    border-radius: 6px;
    background: #0e0e0e;
    border-color: #282828;
}
.profile-sections > .panel h3 {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #a08050;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #222;
}

/* Criminal record stat tiles */
.profile-record-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
}
.profile-record-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 6px;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.profile-record-tile:hover {
    background: #1a1a1a;
    border-color: #444;
}
.profile-record-tile strong {
    font-size: 1rem;
    font-weight: 700;
    color: #e8d8b8;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.profile-record-tile span {
    font-size: .65rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.2;
}

/* --- Bio panel --- */
.profile-bio-panel {
    margin: 14px 18px 18px;
    padding: 16px;
    border-radius: 6px;
    background: #0e0e0e;
    border: 1px solid #282828;
}
.profile-bio-panel h3 {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #a08050;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #222;
}
.profile-bio-content {
    border: 1px solid #2a2218;
    background: #0c0a08;
    padding: 14px;
    color: #d8cfc0;
    font-size: .88rem;
    line-height: 1.65;
    border-radius: 4px;
}
.profile-bio-content p { margin: 0 0 .7em; }
.profile-bio-content p:last-child { margin-bottom: 0; }

/* --- Edit panel --- */
.profile-edit-panel {
    margin: 14px 18px 18px;
    padding: 16px;
    border-radius: 6px;
    background: #0e0e0e;
    border: 1px solid #282828;
}
.profile-edit-panel h3 {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #a08050;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #222;
}
.profile-edit-form {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}
.profile-edit-form input[type="text"],
.profile-edit-form textarea,
.profile-edit-form input[type="file"] {
    border: 1px solid #4a3820;
    background: #0d0b08;
    color: #f0e4d0;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: .87rem;
    transition: border-color .15s;
}
.profile-edit-form input[type="text"]:focus,
.profile-edit-form textarea:focus {
    border-color: #8a6030;
    outline: none;
}
.profile-edit-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; }

.profile-privacy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 8px;
}

.profile-visibility-fieldset {
    border: 1px solid #3a2e1e;
    background: #0d0b08;
    padding: 14px;
    border-radius: 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: 6px;
}
.profile-visibility-fieldset legend {
    color: #c8a870;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 0 6px;
    text-transform: uppercase;
}

.profile-edit-form .filter-toggle,
.profile-visibility-fieldset .filter-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid #342a1c;
    background: #110e0a;
    color: #c8b898;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: .82rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.profile-edit-form .filter-toggle:hover,
.profile-visibility-fieldset .filter-toggle:hover {
    background: #181410;
    border-color: #5a4530;
}
.profile-edit-form .filter-toggle input,
.profile-visibility-fieldset .filter-toggle input {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    accent-color: #c0a060;
}

@media (max-width: 820px) {
    .profile-hero {
        grid-template-columns: 140px 1fr;
    }
    .profile-avatar { width: 140px; height: 140px; }
}

@media (max-width: 620px) {
    .profile-hero { grid-template-columns: 1fr; }
    .profile-avatar { width: 100%; height: auto; max-width: 200px; }
    .profile-meta-grid { grid-template-columns: repeat(2, 1fr); }
    .profile-privacy-grid,
    .profile-visibility-fieldset {
        grid-template-columns: 1fr;
    }
}

/* --- Search tab --- */
.profile-search-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.profile-search-list li {
    border: 1px solid #222;
    border-radius: 4px;
    background: #0e0e0e;
    transition: border-color .15s, background .15s;
}
.profile-search-list li:hover {
    border-color: #6a5030;
    background: #16120a;
}
.profile-search-list li a {
    display: block;
    padding: 8px 12px;
    color: #e0cca8;
    text-decoration: none;
    font-weight: 600;
    font-size: .87rem;
}
.profile-search-list li a:hover { color: #fff; text-decoration: none; }

.stock-hub {
    border-color: #3a3a3a;
    background: var(--bg-panel);
    overflow-x: hidden;
    line-height: 1.55;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.stock-hub-head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.stock-pulse {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    color: #ffffff;
    padding: 7px 10px;
    display: grid;
    text-align: center;
    min-width: 96px;
}

.stock-pulse span {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a0a0a0;
}

.stock-pulse strong {
    font-size: 20px;
}

.stock-pulse.is-open {
    border-color: #406d49;
    background: #1a241b;
    color: #cfead4;
}

.stock-pulse.is-closed {
    border-color: #7a3f3f;
    background: #261717;
    color: #f0c7c7;
}

.stock-session-countdown {
    margin-top: 4px;
    font-size: 12px;
    color: #a0a0a0;
    letter-spacing: 0.03em;
}

.stock-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.stock-marquee {
    border: 1px solid #3a3a3a;
    background: #111111;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
}

.stock-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    min-width: max-content;
    animation: stockMarqueeMove 34s linear infinite;
}

.stock-marquee:hover .stock-marquee-track {
    animation-play-state: paused;
}

.stock-marquee-item {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    color: #d0d0d0;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.stock-marquee-item strong {
    color: #ffffff;
    letter-spacing: 0.05em;
}

.stock-marquee-item em {
    font-style: normal;
    color: #cccccc;
}

.stock-marquee-item b {
    font-weight: 700;
}

.stock-marquee-item.is-up b {
    color: #83da8f;
}

.stock-marquee-item.is-down b {
    color: #ea8b8b;
}

.stock-marquee-item.is-flat b {
    color: #888888;
}

.stock-overview-card {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    padding: 8px;
    display: grid;
    gap: 3px;
}

.stock-overview-card span {
    font-size: 11px;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stock-overview-card strong {
    font-size: 19px;
    color: #ffffff;
}

.stock-ticker-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    justify-content: stretch;
    max-width: 100%;
    min-width: 0;
}

.stock-card {
    border: 1px solid #3a3a3a;
    background: #131313;
    padding: 9px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 66px;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
}

.stock-card.activity-card::before {
    content: none;
    animation: none;
}

.stock-symbol-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #ffffff;
    font-size: 12px;
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
}

.stock-card .stock-row-main {
    flex: 0 1 210px;
    min-width: 0;
    text-align: left;
}

.stock-row-main h3 {
    margin: 0 0 2px;
    color: #ffffff;
}

.stock-row-main p {
    margin: 0;
    color: #c0c0c0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.stock-row-main p strong {
    color: #d0d0d0;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.stock-sector-badge {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    color: #aaaaaa;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
}

.stock-card .stock-row-requirements {
    flex: 999 1 280px;
    display: grid;
    gap: 5px;
    min-width: 0;
    align-content: center;
    grid-template-rows: auto auto;
}

.stock-metrics-top,
.stock-metrics-bottom {
    min-width: 0;
}

.stock-metrics-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
}

.stock-metrics-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 5px;
}

.stock-row-requirements .req-cell {
    padding: 2px 6px;
}

.stock-row-requirements .reward-cell {
    flex: 0 1 auto;
    min-width: 0;
}

.stock-metrics-top .reward-cell {
    width: 70%;
    justify-self: start;
}

.stock-card .stock-row-requirements .reward-cell::after {
    content: none;
    animation: none;
}

.stock-metrics-top .req-cell,
.stock-metrics-bottom .req-cell {
    min-width: 0;
}

@media (max-width: 760px) {
    .stock-metrics-bottom {
        grid-template-columns: repeat(2, minmax(0, max-content));
    }
}

.stock-card .stock-row-stats {
    flex: 1 1 150px;
    min-width: 112px;
    text-align: left;
    display: grid;
    gap: 3px;
}

.stock-row-stats strong.is-up {
    color: #83da8f;
}

.stock-row-stats strong.is-down {
    color: #ea8b8b;
}

.stock-card .stock-row-action {
    flex: 1 1 186px;
    min-width: 140px;
    display: grid;
    gap: 5px;
    align-items: center;
    margin-left: 0;
}

.stock-row-action .stock-trade-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stock-row-action input[type="number"] {
    width: 100%;
    border: 1px solid #3a3a3a;
    background: #131313;
    color: #ffffff;
    padding: 5px 6px;
    font-size: 11px;
    text-align: center;
}

.stock-row-action .stock-trade-actions {
    width: 100%;
}

.stock-row-action .btn {
    width: 100%;
}

.stock-graph-toggle {
    width: 100%;
    min-height: 24px;
    font-size: 9px;
    padding: 3px 6px;
}

.stock-inline-graph {
    flex: 1 1 100%;
    min-width: 0;
    margin-top: 2px;
}

.stock-inline-graph[hidden] {
    display: none !important;
}

.stock-card-tabs {
    grid-column: 1;
    grid-row: 2;
    display: inline-flex;
    gap: 4px;
    border: 0;
    background: transparent;
    padding: 0;
}

.stock-tab-btn {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    color: #d0d0d0;
    padding: 4px 7px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    min-width: 100px;
}

.stock-tab-btn:hover {
    border-color: #666666;
    background: #252525;
}

.stock-tab-btn.is-active {
    border-color: #888888;
    background: #2a2a2a;
    color: #ffffff;
}

.stock-tab-panel {
    display: none;
    grid-column: 2;
    grid-row: 1 / span 2;
}

.stock-tab-panel.is-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 0;
}

.stock-card-price {
    font-family: var(--font-display);
    font-size: 30px;
    color: #fff0d4;
    min-width: 112px;
    text-align: left;
}

.stock-card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 10px;
    font-size: 10px;
    color: #ccb897;
    text-align: left;
    min-width: 230px;
}

.stock-trade-form-compact {
    display: inline-flex;
    align-items: end;
    gap: 6px;
    justify-content: flex-end;
    margin-left: auto;
}

.stock-trade-label {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a0a0a0;
    text-align: left;
    margin-bottom: 1px;
}

.stock-trade-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: auto;
}

.stock-trade-actions .btn {
    padding: 6px 7px;
    min-height: 30px;
    font-size: 10px;
}

.stock-trend-panel {
    border: 1px solid #3a3a3a;
    background: #111111;
    padding: 6px;
    display: grid;
    gap: 5px;
    width: 100%;
}

.stock-trend-ranges {
    display: inline-flex;
    gap: 4px;
}

.stock-range-btn {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    color: #d0d0d0;
    padding: 3px 7px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.stock-range-btn:hover {
    border-color: #666666;
    background: #252525;
}

.stock-range-btn.is-active {
    border-color: #888888;
    background: #2a2a2a;
    color: #ffffff;
}

.stock-trend-canvas {
    width: 100%;
    height: 84px;
    display: block;
    border: 1px solid #3a3a3a;
    background: #0d0d0d;
}

.stock-trend-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 8px;
    color: #a0a0a0;
}

.stock-trend-meta span {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    padding: 1px 4px;
}

.stock-trade-form {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.stock-trade-form input[type="number"] {
    width: 112px;
    border: 1px solid #3a3a3a;
    background: #131313;
    color: #ffffff;
    padding: 4px 5px;
    font-size: 11px;
    text-align: center;
}

.stock-ledger-hub {
    margin-top: 12px;
    border: 1px solid #3a3a3a;
    background: #111111;
    padding: 10px;
    display: grid;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.stock-ledger-tabs {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 10px;
    width: min(420px, 100%);
}

.stock-ledger-tab-btn {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    color: #d0d0d0;
    padding: 6px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.stock-ledger-tab-btn:hover {
    border-color: #666666;
    background: #252525;
}

.stock-ledger-tab-btn.is-active {
    border-color: #888888;
    background: #2a2a2a;
    color: #ffffff;
}

.stock-ledger-panel {
    display: none;
    min-width: 0;
}

.stock-ledger-panel.is-active {
    display: block;
}

.stock-ledger-hub .stock-holdings-inline,
.stock-ledger-hub .stock-orders-panel {
    margin-top: 0;
}

.stock-holdings-inline {
    margin-top: 12px;
    border: 1px solid #3a3a3a;
    background: #111111;
    padding: 10px;
}

.stock-holdings-head {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
    text-align: center;
}

.stock-holdings-head h3 {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #ffffff;
    font-size: 16px;
}

.stock-holdings-summary {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.stock-holdings-summary span {
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    padding: 4px 7px;
    display: grid;
    gap: 2px;
    min-width: 112px;
}

.stock-holdings-summary em {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #a0a0a0;
    font-size: 10px;
}

.stock-holdings-summary strong {
    color: #ffffff;
    font-size: 14px;
}

.stock-holdings-summary strong.is-up {
    color: #83da8f;
}

.stock-holdings-summary strong.is-down {
    color: #ea8b8b;
}

.stock-holdings-table-wrap {
    overflow-x: auto;
    border: 1px solid #3a3a3a;
}

.stock-holdings-table {
    min-width: 720px;
}

.table.stock-holdings-table th,
.table.stock-holdings-table td {
    text-align: center;
}

.stock-holdings-table th {
    background: #1a1a1a;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    text-align: center;
}

.stock-holdings-table td {
    background: #131313;
    color: #d0d0d0;
    vertical-align: middle;
    font-size: 12px;
    text-align: center;
}

.stock-holdings-table tbody tr:nth-child(even) td {
    background: #1a1a1a;
}

.stock-holdings-table td small {
    display: block;
    color: #888888;
    margin-top: 2px;
    font-size: 10px;
}

.stock-holdings-table td.stock-symbol-cell {
    text-align: center;
}

.stock-holdings-table td.stock-symbol-cell strong,
.stock-holdings-table td.stock-symbol-cell small {
    text-align: center;
}

.stock-quick-sell {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.stock-quick-sell-form {
    margin: 0;
}

.stock-quick-sell-form .btn {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 10px;
}

.stock-orders-panel {
    margin-top: 0;
    text-align: center;
}

.stock-orders-panel .table th,
.stock-orders-panel .table td {
    text-align: center;
}

@keyframes stockMarqueeMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 980px) {
    .stock-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stock-ticker-grid {
        grid-template-columns: 1fr;
        justify-content: center;
    }

    .stock-card {
        align-items: flex-start;
    }

    .stock-card .stock-row-stats,
    .stock-card .stock-row-action {
        flex: 1 1 100%;
    }

    .stock-row-main {
        max-width: none;
    }

    .stock-holdings-head {
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .stock-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stock-ticker-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .stock-card {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .stock-card .stock-row-main,
    .stock-card .stock-row-requirements,
    .stock-card .stock-row-stats,
    .stock-card .stock-row-action {
        flex-basis: 100%;
        min-width: 0;
    }

    .stock-row-stats {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .stock-row-action input[type="number"],
    .stock-row-action .stock-trade-actions,
    .stock-graph-toggle {
        width: 100%;
    }

    .stock-holdings-table-wrap {
        border: 0;
        overflow: visible;
    }

    .stock-holdings-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 8px;
    }

    .stock-holdings-table thead {
        display: none;
    }

    .stock-holdings-table tbody,
    .stock-holdings-table tr,
    .stock-holdings-table td {
        display: block;
        width: 100%;
    }

    .stock-holdings-table tr {
        border: 1px solid #4a3a28;
        background: #17120e;
        padding: 6px;
    }

    .stock-holdings-table td {
        border: 0;
        border-bottom: 1px dashed #3f3225;
        padding: 5px 3px;
        display: grid;
        justify-items: center;
        gap: 8px;
        text-align: center;
    }

    .stock-holdings-table td:last-child {
        border-bottom: 0;
    }

    .stock-holdings-table td::before {
        content: attr(data-label);
        color: #baa37f;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 9px;
        text-align: center;
    }

    .stock-holdings-table td.stock-symbol-cell {
        display: block;
        text-align: center;
        border-bottom: 1px solid #4a3a28;
        padding-bottom: 6px;
        margin-bottom: 3px;
    }

    .stock-holdings-table td.stock-symbol-cell::before {
        display: block;
        margin-bottom: 2px;
    }

    .stock-holdings-table td.stock-symbol-cell strong {
        display: block;
        font-size: 13px;
    }

    .stock-quick-sell {
        justify-content: flex-end;
    }

    .stock-quick-sell-form {
        width: auto;
    }
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    border: 1px solid var(--line);
    padding: 6px;
    text-align: left;
}

.table thead {
    background: #191510;
}

.table.table-items-center th,
.table.table-items-center td {
    text-align: center;
}

.table.table-online th,
.table.table-online td {
    text-align: center;
}

.table.table-online th:nth-child(2),
.table.table-online td:nth-child(2) {
    text-align: left;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #69b965;
    box-shadow: 0 0 6px rgba(105, 185, 101, 0.75);
}

.online-list-box {
    border: 1px solid #3b3126;
    background: #18140f;
    padding: 9px 10px;
    margin-bottom: 10px;
}

.online-stats-row {
    margin-bottom: 10px;
}

.online-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    line-height: 1.7;
}

.online-item {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.online-separator {
    color: #9d8a6c;
    margin-right: 6px;
}

.panel .online-name {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.panel .online-name:visited {
    color: #ffffff;
}

.panel .online-name.is-admin {
    color: #ff6f6f;
    font-weight: 700;
}

.panel .online-name.is-admin:visited {
    color: #ff6f6f;
}

.panel .online-name.is-moderator {
    color: #7fe08a;
    font-weight: 700;
}

.panel .online-name.is-moderator:visited {
    color: #7fe08a;
}

.panel .online-name:hover {
    text-decoration: underline;
}

.panel .online-name.is-admin:hover,
.panel .online-name.is-admin:focus {
    color: #ff8f8f;
}

.panel .online-name.is-moderator:hover,
.panel .online-name.is-moderator:focus {
    color: #9aeca4;
}

.panel .online-name:not(.is-admin):not(.is-moderator):hover,
.panel .online-name:not(.is-admin):not(.is-moderator):focus {
    color: #ffffff;
}

.staff-log-wrap {
    overflow-x: auto;
    border: 1px solid #3f3123;
    background: #130f0d;
}

.staff-log-table {
    min-width: 860px;
}

.staff-log-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #1d1611;
    color: #e7cfad;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
}

.staff-log-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.staff-log-table tbody tr:hover {
    background: rgba(214, 173, 110, 0.1);
}

.staff-badge {
    display: inline-block;
    border: 1px solid #4a3a2a;
    background: #1b1510;
    color: #dfccac;
    padding: 2px 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.staff-badge.is-success {
    border-color: #3f7249;
    color: #8cdf99;
}

.staff-badge.is-failure {
    border-color: #864040;
    color: #f0a0a0;
}

.staff-badge.is-info,
.staff-badge.is-type-system {
    border-color: #6a5a41;
    color: #d9c29a;
}

.staff-badge.is-type-op {
    border-color: #4f6f86;
    color: #a9d4f2;
}

.chat-dock {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 30;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-toast-wrap {
    position: absolute;
    right: 0;
    bottom: 46px;
    display: grid;
    gap: 6px;
    width: 280px;
    pointer-events: none;
}

.chat-toast {
    border: 1px solid #5c4932;
    background: rgba(22, 17, 13, 0.96);
    color: #f0dfc2;
    padding: 8px 10px;
    font-size: 11px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    animation: chatToastIn 0.2s ease-out;
}

.chat-toast.is-error {
    border-color: #8a4040;
    background: rgba(36, 18, 18, 0.96);
    color: #f4bbbb;
}

.chat-toast.is-hiding {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.notify-toast-wrap {
    position: fixed;
    top: 88px;
    right: 16px;
    z-index: 2200;
    display: grid;
    gap: 10px;
    width: min(380px, calc(100vw - 24px));
    pointer-events: none;
}

.notify-toast {
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(10, 12, 18, 0.96);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
    border-radius: 12px;
    padding: 10px 12px;
    animation: notifyToastIn 0.22s ease-out;
}

.notify-toast strong {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
    letter-spacing: 0.04em;
}

.notify-toast p {
    margin: 0;
    font-size: 12px;
    color: rgba(235, 235, 245, 0.92);
    line-height: 1.35;
}

.notify-toast.type-success {
    border-color: rgba(120, 214, 134, 0.58);
}

.notify-toast.type-warning {
    border-color: rgba(241, 195, 95, 0.65);
}

.notify-toast.type-danger {
    border-color: rgba(229, 101, 101, 0.72);
}

.notify-toast.is-hiding {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.chat-launcher {
    border: 1px solid #5b4731;
    background: #18130f;
    color: #f0dfc2;
    padding: 7px 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    position: relative;
}

.chat-launcher-badge {
    position: absolute;
    top: -7px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #c84a4a;
    border: 1px solid #e28d8d;
    color: #fff;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.chat-launcher-badge.is-hidden {
    display: none;
}

.chat-roster,
.chat-popup {
    position: absolute;
    right: 0;
    width: 320px;
    border: 1px solid #5c4932;
    background: #12100d;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    display: none;
}

.chat-roster.is-open,
.chat-popup.is-open {
    display: block;
}

.chat-roster {
    bottom: 42px;
    max-height: 360px;
    overflow: hidden;
}

.chat-roster-head,
.chat-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #433628;
    background: #181410;
}

.chat-roster-list {
    max-height: 305px;
    overflow-y: auto;
    display: grid;
}

.chat-roster-item {
    border-bottom: 1px solid #2e241a;
    padding: 9px 10px;
    cursor: pointer;
    display: grid;
    gap: 4px;
    background: transparent;
    color: inherit;
    appearance: none;
    text-align: left;
    width: 100%;
}

.chat-roster-item:hover {
    background: #1e1812;
}

.chat-roster-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-roster-role {
    border: 1px solid #4f4334;
    color: #ddc7a3;
    padding: 1px 5px;
    font-size: 9px;
    letter-spacing: 0.07em;
    margin-right: auto;
}

.chat-roster-unread {
    color: #fff3f3;
    font-size: 9px;
    border: 1px solid #e58f8f;
    background: #9b3c3c;
    border-radius: 10px;
    padding: 1px 5px;
}

.chat-roster-snippet {
    color: #cdbda4;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-presence-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #c3b18f;
    font-size: 10px;
}

.chat-presence-meta small {
    color: #9f8e72;
    font-size: 9px;
}

.chat-presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #4e4031;
}

.chat-presence-dot.is-online {
    background: #44b85b;
    border-color: #6ddd80;
}

.chat-presence-dot.is-offline {
    background: #bf5050;
    border-color: #e08989;
}

.chat-popup {
    bottom: 42px;
}

.chat-popup-stack {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-popup-window {
    width: 300px;
    border: 1px solid #5c4932;
    background: linear-gradient(180deg, #15110d 0%, #0f0c09 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.15s ease;
}

.chat-popup-window.is-dragging {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.66);
}

.chat-popup-window.is-minimized .chat-popup-body {
    display: none;
}

.chat-popup-window .chat-popup-head {
    border-bottom: 0;
    cursor: grab;
}

.chat-popup-title-wrap {
    display: grid;
    gap: 2px;
}

.chat-popup-window .chat-popup-head:active {
    cursor: grabbing;
}

.chat-popup-window .chat-popup-body {
    border-top: 1px solid #433628;
}

.chat-popup-messages {
    height: 260px;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    gap: 6px;
    background: transparent;
    justify-items: start;
    align-content: start;
}

.chat-msg {
    max-width: 84%;
    padding: 7px 9px;
    border: 1px solid #4d3f2f;
    background: #1b1510;
    color: #eee0c8;
    font-size: 11px;
    line-height: 1.35;
    border-radius: 9px;
    border-bottom-left-radius: 3px;
    display: inline-block;
    width: fit-content;
    justify-self: start;
}

.chat-msg.mine {
    border-color: #486038;
    background: #182617;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 3px;
    justify-self: end;
}

.chat-msg time {
    display: block;
    margin-top: 4px;
    color: #b8a88f;
    font-size: 9px;
}

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

@keyframes notifyToastIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-popup-form {
    border-top: 1px solid #3c3125;
    padding: 7px;
    display: grid;
    gap: 6px;
}

.chat-popup-form textarea {
    min-height: 46px;
    max-height: 120px;
}

@media (max-width: 720px) {
    .chat-dock {
        right: 8px;
        bottom: 8px;
    }

    .chat-roster,
    .chat-popup {
        width: min(92vw, 340px);
    }

    .chat-popup-stack {
        display: none;
    }

    .notify-toast-wrap {
        top: 78px;
        right: 10px;
        width: calc(100vw - 20px);
    }
}

.staff-admin-page {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.staff-admin-header {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(165deg, rgba(12, 12, 13, 0.98), rgba(28, 28, 31, 0.97));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.staff-admin-header-main h1 {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #efefef;
}

.staff-admin-header-main .meta {
    margin: 4px 0 0;
}

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

.staff-admin-page .panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(160deg, rgba(26, 26, 29, 0.96), rgba(14, 14, 16, 0.97));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.staff-admin-page .stats {
    justify-content: center;
}

.staff-admin-page .grid.two-col {
    align-items: start;
    gap: 12px;
}

.staff-admin-page .actions,
.staff-admin-page .action-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.staff-admin-page .form-grid,
.staff-admin-page .hit-form-stack {
    max-width: 820px;
    margin: 0 auto;
}

.staff-admin-page .table,
.staff-admin-page .staff-log-wrap {
    width: 100%;
}

.staff-admin-page .btn {
    min-height: 34px;
    padding-inline: 12px;
}

.staff-admin-page .cards {
    align-items: stretch;
}

@media (max-width: 900px) {
    .staff-admin-page {
        width: min(100%, 980px);
    }

    .staff-admin-header {
        flex-direction: column;
        align-items: stretch;
    }

    .staff-admin-header-actions {
        justify-content: center;
    }

    .staff-admin-page .form-grid,
    .staff-admin-page .hit-form-stack {
        max-width: 100%;
    }
}

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

    .profile-avatar {
        width: 100%;
        max-width: 200px;
        height: 200px;
    }
}

.table.table-vehicle-list th,
.table.table-vehicle-list td {
    text-align: center;
}

.table.table-vehicle-list th:nth-child(2),
.table.table-vehicle-list td:nth-child(2) {
    text-align: left;
}

.smuggling-market-table th,
.smuggling-market-table td {
    text-align: center !important;
    vertical-align: top;
}

.smuggling-market-table th:first-child,
.smuggling-market-table td:first-child {
    text-align: left !important;
}

.garage-page .table.table-vehicle-list th:nth-child(2),
.garage-page .table.table-vehicle-list td:nth-child(2) {
    text-align: center;
    font-weight: 700;
}

.garage-page .garage-selected-actions {
    margin-top: 0;
    margin-bottom: 8px;
}

.garage-page .garage-vehicle-table {
    min-width: 0;
    width: 100%;
}

.garage-page .garage-vehicle-table th,
.garage-page .garage-vehicle-table td {
    white-space: normal;
}

.garage-page .garage-vehicle-table th:nth-child(6),
.garage-page .garage-vehicle-table td:nth-child(6) {
    white-space: normal;
    min-width: 150px;
}

.garage-page .garage-vehicle-table th:nth-child(9),
.garage-page .garage-vehicle-table td:nth-child(9) {
    min-width: 150px;
}

.garage-page .garage-vehicle-table td:nth-child(4) .damage-chip {
    margin-right: 6px;
    vertical-align: middle;
}

.garage-page .garage-vehicle-table td:nth-child(6) .meta {
    display: block;
    margin-top: 3px;
    font-size: 10px;
}

.garage-page .value-trend {
    display: inline-block;
    margin-right: 5px;
    font-size: 10px;
    font-weight: 700;
}

.garage-page .value-trend.is-up {
    color: #74c17d;
}

.garage-page .value-trend.is-down {
    color: #d77a7a;
}

.damage-chip {
    display: inline-block;
    width: 30px;
    height: 9px;
    border: 1px solid #5a4f42;
    background: #2f2a24;
}

.damage-chip.is-low {
    border-color: #4f8658;
    background: #305338;
}

.damage-chip.is-mid {
    border-color: #a17a45;
    background: #5b4425;
}

.damage-chip.is-high {
    border-color: #9a4a4a;
    background: #5b2525;
}

.garage-actions {
    margin: 8px 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.inline-form {
    margin: 0;
}

.garage-sort-form {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.garage-sort-form select {
    border: 1px solid var(--line);
    background: #17130f;
    color: var(--text-main);
    padding: 5px 7px;
}

.garage-row-tools {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

.garage-options {
    display: grid;
    grid-template-columns: minmax(150px, 1fr);
    gap: 4px;
    min-width: 170px;
}

.btn.btn-garage {
    width: 100%;
    padding: 5px 6px;
    font-size: 9px;
    letter-spacing: 0.04em;
}

@media (max-width: 980px) {
    .garage-options {
        grid-template-columns: 1fr;
        min-width: 0;
    }
}

.table input[type="checkbox"] {
    transform: scale(1.05);
    accent-color: #b58a4b;
}

.resource-panel {
    border: 1px solid var(--line);
    background: #1b1713;
    padding: 8px;
    margin-bottom: 10px;
}

.resource-panel.compact {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 6px;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.resource-item {
    border: 1px solid #3f3428;
    padding: 8px;
    background: #221b15;
}

.dashboard-hero {
    border-color: #3f3f3f;
    background:
        linear-gradient(140deg, rgba(34, 34, 34, 0.96) 0%, rgba(10, 10, 10, 0.98) 100%),
        radial-gradient(circle at 80% 20%, rgba(180, 180, 180, 0.08) 0%, rgba(0, 0, 0, 0) 45%);
}

.dashboard-hero-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-kicker {
    color: #d9d9d9;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dashboard-identity {
    display: grid;
    gap: 1px;
}

.dashboard-identity strong {
    font-family: var(--font-display);
    font-size: 19px;
    color: #ffffff;
    letter-spacing: 0.04em;
}

.dashboard-identity span {
    color: #d6d6d6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dashboard-actions {
    display: grid;
    gap: 6px;
    justify-items: end;
}

.dashboard-actions-row {
    justify-content: flex-end;
}

.dashboard-hero-stats {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 7px;
}

.dashboard-hero .stat-card {
    border-color: #4a4a4a;
    background: linear-gradient(140deg, #242424 0%, #171717 100%);
}

.dashboard-hero .dashboard-kicker,
.dashboard-hero .dashboard-identity span,
.dashboard-hero .dashboard-identity strong,
.dashboard-hero .stat-card span,
.dashboard-hero .stat-card strong,
.dashboard-hero .dashboard-rank-progress small,
.dashboard-command-resource .dashboard-resource-head span,
.dashboard-command-resource .dashboard-resource-head strong {
    color: #ffffff;
    font-weight: 700;
}

.dashboard-rank-progress {
    margin-top: 6px;
}

.dashboard-rank-progress-meter {
    height: 7px;
    border-color: #514234;
    background: #19140f;
}

.dashboard-rank-progress-meter span {
    background: linear-gradient(90deg, #8a6131 0%, #d2a266 100%);
}

.dashboard-rank-progress small {
    display: block;
    margin-top: 4px;
    color: #c6b39a;
    line-height: 1.25;
}

.forum-page {
    border-color: #3c3c3c;
    background:
        linear-gradient(145deg, rgba(24, 24, 24, 0.95) 0%, rgba(13, 13, 13, 0.97) 100%),
        radial-gradient(circle at 85% 8%, rgba(190, 190, 190, 0.06) 0%, rgba(0, 0, 0, 0) 45%);
}

.forum-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.forum-left,
.forum-right {
    display: grid;
    gap: 10px;
}

.forum-card {
    border: 1px solid #3f3f3f;
    background: linear-gradient(155deg, rgba(29, 29, 29, 0.95) 0%, rgba(16, 16, 16, 0.97) 100%);
    padding: 10px;
}

.forum-card h3 {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #ececec;
}

.forum-create-toggle > summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #e5e5e5;
}

.forum-create-toggle > summary::-webkit-details-marker {
    display: none;
}

.forum-create-toggle > summary::before {
    content: "+";
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    align-items: center;
    justify-content: center;
    border: 1px solid #545454;
    color: #dddddd;
}

.forum-create-toggle[open] > summary::before {
    content: "-";
}

.forum-create-toggle .forum-form {
    margin-top: 8px;
}

.forum-form {
    display: grid;
    gap: 6px;
}

.forum-form input[type="text"],
.forum-form textarea {
    width: 100%;
    border: 1px solid #454545;
    background: #141414;
    color: #ededed;
}

.forum-form textarea {
    resize: vertical;
    min-height: 80px;
}

.forum-emoji-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.forum-emoji-row .btn {
    min-width: 35px;
    padding: 4px 6px;
}

.forum-topic-list {
    display: grid;
    gap: 6px;
    max-height: 64vh;
    overflow-y: auto;
    padding-right: 2px;
}

.forum-topic-item {
    display: block;
    border: 1px solid #464646;
    background: linear-gradient(145deg, rgba(32, 32, 32, 0.9) 0%, rgba(18, 18, 18, 0.93) 100%);
    color: #efefef;
    text-decoration: none;
    padding: 7px 8px;
    transition: border-color 120ms ease, transform 120ms ease;
}

.forum-topic-item:hover {
    border-color: #464646;
    transform: none;
}

.forum-topic-item,
.forum-topic-item:hover,
.forum-topic-item:focus,
.forum-topic-item:active,
.forum-topic-item *,
.forum-topic-item:hover * {
    text-decoration: none !important;
}

.forum-topic-item.is-active {
    border-color: #a6a6a6;
    box-shadow: 0 0 0 1px rgba(166, 166, 166, 0.25);
}

.forum-topic-head {
    display: none;
}

.forum-topic-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 22px;
}

.forum-topic-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 18px;
    min-width: 18px;
}

.forum-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.forum-dot.important {
    background: #b85b5b;
}

.forum-dot.sticky {
    background: #5a9d71;
}

.forum-topic-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-topic-stats {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    white-space: nowrap;
    color: #c8c8c8;
}

.forum-reply-count {
    color: #d0d0d0;
    font-size: 10px;
}

.forum-vote-totals {
    display: inline-flex;
    gap: 3px;
}

.forum-flag {
    border: 1px solid #555;
    background: #1f1f1f;
    color: #e9e9e9;
    padding: 1px 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.forum-flag.sticky {
    border-color: #5b8f6a;
    background: #1f2b22;
}

.forum-flag.important {
    border-color: #9b5d5d;
    background: #302020;
}

.forum-flag.locked {
    border-color: #7a5b5b;
    background: #2b2424;
}

.forum-flag.default {
    border-color: #637f6a;
    background: #202b23;
}

.forum-thread-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.forum-thread-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.forum-thread-body {
    margin-top: 8px;
    border: 1px solid #444;
    background: #151515;
    padding: 9px;
    white-space: pre-wrap;
    color: #e9e9e9;
}

.forum-topic-actions,
.forum-mod-tools,
.forum-post-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.inline-form {
    display: inline-flex;
}

.vote-btn {
    min-width: 30px;
    padding: 3px 8px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.vote-btn.vote-up,
.vote-chip.vote-up {
    color: #7fcd93;
}

.vote-btn.vote-down,
.vote-chip.vote-down {
    color: #d99a9a;
}

.vote-chip .vote-icon {
    display: inline-block;
    line-height: 1;
}

.vote-chip.vote-down .vote-icon {
    transform: rotate(180deg);
}

.vote-chip {
    border: 1px solid #4a4a4a;
    background: #1a1a1a;
    padding: 1px 5px;
    font-size: 10px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.forum-edit-topic {
    margin-top: 8px;
    border-top: 1px solid #3e3e3e;
    padding-top: 8px;
}

.forum-edit-topic > summary {
    cursor: pointer;
    color: #dcdcdc;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.forum-author-tools {
    margin-top: 8px;
}

.forum-post-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.forum-post {
    border: 1px solid #434343;
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.93) 0%, rgba(17, 17, 17, 0.96) 100%);
    padding: 8px;
}

.forum-post.forum-post-admin {
    border-color: #a35353;
    box-shadow: inset 0 0 0 1px rgba(163, 83, 83, 0.22);
}

.forum-post.forum-post-moderator {
    border-color: #4f8f61;
    box-shadow: inset 0 0 0 1px rgba(79, 143, 97, 0.22);
}

.forum-post header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 6px;
}

.forum-post p {
    margin: 0;
    color: #e7e7e7;
    white-space: pre-wrap;
}

.forum-pagination {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.forum-pagination .btn {
    padding: 3px 8px;
    min-height: 26px;
}

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

    .forum-topic-list {
        max-height: 42vh;
    }

    .forum-topic-stats {
        gap: 3px;
    }
}

.dashboard-command-resources {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 7px;
}

.dashboard-command-resource {
    border: 1px solid #474747;
    background: linear-gradient(145deg, #212121 0%, #171717 100%);
    padding: 7px;
    color: #ffffff;
}

.dashboard-command-resource .meter {
    border-color: #454545;
    background: #111111;
}

.dashboard-meter-energy span {
    background: linear-gradient(90deg, #b98f18 0%, #f2d164 100%);
}

.dashboard-meter-nerve span {
    background: linear-gradient(90deg, #2f89c7 0%, #7fd9ff 100%);
}

.dashboard-meter-health-high span {
    background: linear-gradient(90deg, #2f7d3d 0%, #63c274 100%);
}

.dashboard-meter-health-mid span {
    background: linear-gradient(90deg, #995b16 0%, #de8f38 100%);
}

.dashboard-meter-health-low span {
    background: linear-gradient(90deg, #7f1b1b 0%, #d64a4a 100%);
}

.dashboard-grid {
    align-items: stretch;
}

.dashboard-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-resource-list {
    display: grid;
    gap: 8px;
}

.dashboard-resource-item {
    border: 1px solid #3f3326;
    background: #1d1712;
    padding: 8px;
}

.dashboard-resource-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.dashboard-resource-head span {
    color: #cab89e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dashboard-resource-head strong {
    color: #f5e2c0;
}

.dashboard-note {
    margin: 0;
}

.dashboard-statedon-panel {
    border-color: #4a4a4a;
    background:
        linear-gradient(140deg, rgba(26, 26, 26, 0.96) 0%, rgba(10, 10, 10, 0.99) 100%),
        radial-gradient(circle at 86% 12%, rgba(148, 148, 148, 0.18) 0%, rgba(0, 0, 0, 0) 46%);
    padding: 12px;
    font-size: 13px;
}

.dashboard-statedon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.dashboard-statedon-card {
    border: 1px solid #4c4c4c;
    background: linear-gradient(150deg, #202020 0%, #161616 100%);
    padding: 12px;
    display: grid;
    gap: 10px;
    min-height: 142px;
    align-content: start;
}

.dashboard-statedon-metric-row {
    border: 1px solid #3f3f3f;
    background: #161616;
    padding: 8px;
    display: grid;
    gap: 6px;
}

.dashboard-statedon-label {
    color: #c7c7c7;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}

.dashboard-statedon-main {
    font-size: 17px;
    line-height: 1.2;
    color: #f2f2f2;
    font-weight: 700;
    text-align: left;
}

.dashboard-statedon-levy {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #efefef;
    font-weight: 700;
    text-shadow: none;
    text-align: left;
}

.dashboard-statedon-money {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #f5f5f5;
    font-weight: 700;
    text-shadow: none;
    text-align: left;
}

.dashboard-statedon-actions {
    margin-top: 2px;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(170px, 210px);
    gap: 12px;
    align-items: stretch;
}

.dashboard-statedon-levy-form {
    border: 1px solid #4a4a4a;
    background: #171717;
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(180px, auto) 110px auto;
    gap: 10px;
    align-items: end;
}

.dashboard-statedon-levy-form label {
    display: grid;
    gap: 4px;
    color: #d9d9d9;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
}

.dashboard-statedon-levy-form input[type="number"] {
    height: 36px;
}

.dashboard-statedon-levy-form .btn,
.dashboard-statedon-collect-form .btn {
    height: 36px;
    min-width: 132px;
    font-size: 13px;
}

.dashboard-statedon-collect-form {
    border: 1px solid #4a4a4a;
    background: #171717;
    padding: 10px;
    display: flex;
    align-items: center;
}

.dashboard-statedon-collect-form .btn {
    width: 100%;
}

.dashboard-economy-office {
    border-color: #5b3d3d;
    background:
        linear-gradient(135deg, rgba(30, 20, 20, 0.95) 0%, rgba(13, 10, 10, 0.98) 100%),
        radial-gradient(circle at 88% 10%, rgba(164, 67, 67, 0.18) 0%, rgba(0, 0, 0, 0) 42%);
}

.dashboard-economy-office .dashboard-actions-row {
    justify-content: flex-start;
}

.dashboard-economy-office label {
    display: inline-grid;
    gap: 4px;
    min-width: 230px;
}

.dashboard-economy-row {
    border-color: #454545;
    background:
        linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(12, 12, 12, 0.98) 100%),
        radial-gradient(circle at 85% 10%, rgba(165, 165, 165, 0.14) 0%, rgba(0, 0, 0, 0) 42%);
}

.economy-row-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: 9px;
}

.economy-cell {
    border: 1px solid #4a4a4a;
    background: linear-gradient(145deg, #1f1f1f 0%, #151515 100%);
    padding: 10px;
    display: grid;
    gap: 6px;
    min-height: 132px;
}

.economy-label {
    color: #c8c8c8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
}

.economy-value {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.04em;
    color: #f1f1f1;
}

.economy-pulse {
    position: relative;
    overflow: hidden;
}

.economy-pulse::after {
    content: "";
    position: absolute;
    right: -26px;
    top: -26px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    opacity: 0.35;
}

.economy-pulse.is-hot {
    border-color: #5f5f5f;
    background: linear-gradient(145deg, #2a2a2a 0%, #1c1c1c 100%);
}

.economy-pulse.is-hot::after {
    background: radial-gradient(circle, rgba(196, 196, 196, 0.72) 0%, rgba(196, 196, 196, 0) 70%);
}

.economy-pulse.is-warm {
    border-color: #595959;
    background: linear-gradient(145deg, #292929 0%, #1b1b1b 100%);
}

.economy-pulse.is-warm::after {
    background: radial-gradient(circle, rgba(176, 176, 176, 0.74) 0%, rgba(176, 176, 176, 0) 70%);
}

.economy-pulse.is-cool {
    border-color: #555555;
    background: linear-gradient(145deg, #222222 0%, #181818 100%);
}

.economy-pulse.is-cool::after {
    background: radial-gradient(circle, rgba(156, 156, 156, 0.72) 0%, rgba(156, 156, 156, 0) 70%);
}

.economy-pulse.is-vacant {
    border-color: #5f5f5f;
    background: linear-gradient(145deg, #222222 0%, #171717 100%);
}

.economy-pulse.is-vacant::after {
    background: radial-gradient(circle, rgba(189, 189, 189, 0.85) 0%, rgba(189, 189, 189, 0) 70%);
}

.dashboard-panel h2 {
    margin-bottom: 2px;
}

.dashboard-economy-flow {
    border-color: #5a3d3d;
    background:
        linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%),
        radial-gradient(circle at 10% 0%, rgba(170, 76, 76, 0.2) 0%, rgba(0, 0, 0, 0) 44%);
}

.dashboard-economy-flow-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.economy-flow-chart {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(162px, 1fr));
    align-items: stretch;
    gap: 8px;
}

.economy-flow-bar {
    min-height: 254px;
    border: 1px solid #5a3f3f;
    background: linear-gradient(160deg, #1c1c1c 0%, #141414 100%);
    padding: 8px;
    display: grid;
    gap: 3px;
    align-content: start;
    box-shadow: inset 0 0 0 1px rgba(120, 54, 54, 0.14);
}

.economy-flow-bar-track {
    height: 76px;
    border: 1px solid #614848;
    background: linear-gradient(180deg, #111111 0%, #0d0d0d 100%);
    padding: 4px;
    display: flex;
    align-items: flex-end;
}

.economy-flow-bar-fill {
    width: 100%;
    display: block;
    border: 1px solid #b05c5c;
    background: linear-gradient(180deg, #dc7a7a 0%, #923f3f 100%);
    box-shadow: 0 0 14px rgba(170, 70, 70, 0.28);
    transition: height 280ms ease;
}

.economy-flow-bar strong {
    font-family: var(--font-display);
    letter-spacing: 0.03em;
    color: #ededed;
}

.economy-flow-bar span {
    color: #c7c7c7;
}

.dashboard-tab-shell {
    border-color: #424242;
    background: linear-gradient(135deg, rgba(24, 24, 24, 0.96) 0%, rgba(13, 13, 13, 0.98) 100%);
    padding: 8px;
}

.dashboard-tab-nav {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.dashboard-tab-btn {
    border: 1px solid #4b4b4b;
    background: linear-gradient(145deg, #1f1f1f 0%, #171717 100%);
    color: #d7d7d7;
    padding: 6px 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 10px;
    cursor: pointer;
}

.dashboard-tab-btn:hover {
    border-color: #767676;
    color: #f2f2f2;
}

.dashboard-tab-btn.is-active {
    border-color: #9a9a9a;
    background: linear-gradient(145deg, #2d2d2d 0%, #202020 100%);
    color: #ffffff;
}

.dashboard-economy-overhaul {
    border-color: #4e4e4e;
    background:
        linear-gradient(135deg, rgba(25, 25, 25, 0.97) 0%, rgba(11, 11, 11, 0.99) 100%),
        radial-gradient(circle at 90% 6%, rgba(184, 184, 184, 0.15) 0%, rgba(0, 0, 0, 0) 38%);
    padding: 12px;
}

.economy-overhaul-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.economy-overhaul-head h2 {
    margin: 2px 0 0;
}

.economy-pulse-tag {
    border: 1px solid #575757;
    background: #1b1b1b;
    padding: 6px 10px;
    display: grid;
    gap: 2px;
    min-width: 150px;
}

.economy-pulse-tag span {
    color: #bcbcbc;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
}

.economy-pulse-tag strong {
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    color: #f5f5f5;
}

.economy-pulse-tag.is-hot {
    border-color: #7d7d7d;
    background: linear-gradient(140deg, #2f2f2f 0%, #202020 100%);
}

.economy-pulse-tag.is-warm {
    border-color: #6f6f6f;
    background: linear-gradient(140deg, #2a2a2a 0%, #1d1d1d 100%);
}

.economy-pulse-tag.is-cool {
    border-color: #616161;
    background: linear-gradient(140deg, #262626 0%, #1b1b1b 100%);
}

.economy-pulse-tag.is-vacant {
    border-color: #7a7a7a;
    background: linear-gradient(140deg, #2d2d2d 0%, #1e1e1e 100%);
}

.economy-kpi-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 8px;
}

.economy-kpi-card {
    border: 1px solid #4d4d4d;
    background: linear-gradient(145deg, #202020 0%, #171717 100%);
    padding: 9px;
    display: grid;
    gap: 5px;
}

.economy-kpi-card span {
    color: #c7c7c7;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 10px;
}

.economy-kpi-card strong {
    color: #f5f5f5;
    font-size: 17px;
    font-family: var(--font-display);
    letter-spacing: 0.03em;
}

.economy-kpi-card small {
    color: #b2b2b2;
}

.economy-overhaul-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.9fr);
    gap: 10px;
}

.economy-lanes,
.economy-intel-card {
    border: 1px solid #4b4b4b;
    background: linear-gradient(150deg, #1b1b1b 0%, #141414 100%);
    padding: 10px;
}

.economy-lanes h3,
.economy-intel-card h3 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

.economy-lane-list {
    display: grid;
    gap: 8px;
}

.economy-lane {
    border: 1px solid #474747;
    background: #171717;
    padding: 7px;
    display: grid;
    gap: 5px;
}

.economy-lane-head,
.economy-lane-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
}

.economy-lane-head strong {
    color: #f0f0f0;
    font-family: var(--font-display);
}

.economy-lane-head span,
.economy-lane-meta span,
.economy-lane small {
    color: #c3c3c3;
}

.economy-lane-compare {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    color: #bfae9a;
}

.economy-lane-compare.is-up {
    color: #89cf93;
}

.economy-lane-compare.is-down {
    color: #e78686;
}

.economy-lane-compare.is-flat {
    color: #9e8e7b;
}

.economy-total-compare {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
    margin: 2px 0 8px;
    font-weight: 700;
}

.economy-total-compare.is-up {
    color: #89cf93;
}

.economy-total-compare.is-down {
    color: #e78686;
}

.economy-total-compare.is-flat {
    color: #9e8e7b;
}

.trend-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.trend-arrow {
    font-weight: 700;
}

.economy-lane-bar {
    height: 10px;
    border: 1px solid #595959;
    background: #0f0f0f;
    padding: 1px;
}

.economy-lane-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #4a0f12 0%, #7a1f25 55%, #a33a42 100%);
}

.economy-intel-list {
    display: grid;
    gap: 7px;
}

.economy-intel-list div {
    border: 1px solid #464646;
    background: #171717;
    padding: 7px;
    display: grid;
    gap: 2px;
}

.economy-intel-list span {
    color: #c8c8c8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 10px;
}

.economy-intel-list strong {
    color: #f4f4f4;
}

@media (max-width: 1080px) {
    .economy-kpi-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .economy-overhaul-grid {
        grid-template-columns: 1fr;
    }
}

.economy-flow-includes {
    min-height: 50px;
    line-height: 1.35;
}

@media (max-width: 1100px) {
    .economy-flow-chart {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

.dashboard-groups {
    display: grid;
    gap: 12px;
}

.dashboard-group {
    border: 1px solid #3f3125;
    background: #18130f;
    padding: 10px;
}

.dashboard-group h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ead6b4;
}

.message-center-hero {
    border-color: #414141;
    background: linear-gradient(140deg, rgba(31, 31, 31, 0.96) 0%, rgba(12, 12, 12, 0.96) 100%);
}

.message-list {
    display: grid;
    gap: 9px;
}

.notification-actions {
    gap: 6px;
    flex-wrap: wrap;
}

.notification-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #3d3226;
    background: #17120e;
    padding: 7px 9px;
    margin-bottom: 9px;
}

.notification-bulk-bar .filter-toggle {
    white-space: nowrap;
}

.notification-bulk-bar .filter-toggle input[type="checkbox"] {
    width: auto;
    min-width: 0;
    height: auto;
}

.message-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.message-tabs .btn {
    padding: 5px 8px;
    font-size: 9px;
}

.message-tabs .btn.is-active {
    border-color: #c89d5a;
    background: #2b2117;
}

.message-card {
    border: 1px solid #3e3226;
    background: #18130f;
    padding: 10px;
    padding-right: 92px;
    padding-bottom: 28px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    display: grid;
    gap: 6px;
    position: relative;
}

.message-select {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cdb89b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.message-select input {
    accent-color: #b58a4b;
    width: auto;
    min-width: 0;
    height: auto;
}

.message-card.is-unread {
    border-left: 4px solid #b58a4b;
}

.message-card.is-read {
    opacity: 0.85;
}

.message-card.type-success {
    border-color: var(--ok);
    box-shadow: inset 3px 0 0 rgba(72, 167, 101, 0.4);
}

.message-card.type-warning {
    border-color: #756039;
}

.message-card.type-danger {
    border-color: var(--danger);
    box-shadow: inset 3px 0 0 rgba(201, 74, 74, 0.42);
}

.message-card-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
    padding-right: 30px;
}

.message-card-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 13px;
}

.message-type {
    display: inline-block;
    margin-top: 3px;
    color: #cab08c;
    border: 1px solid #5a4730;
    background: #211a14;
    padding: 1px 5px;
    font-size: 9px;
    letter-spacing: 0.06em;
}

.message-state {
    position: absolute;
    right: 10px;
    bottom: 8px;
    color: #d7c6aa;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.message-body {
    margin: 8px 0 7px;
    color: #efe7db;
}

.message-time {
    color: #bda98b;
    font-size: 10px;
    padding-right: 90px;
}

@media (max-width: 760px) {
    .message-card {
        padding-right: 10px;
        padding-bottom: 10px;
    }

    .message-select {
        position: static;
        order: -1;
    }

    .message-state {
        position: static;
    }

    .message-card-head {
        padding-right: 0;
    }

    .message-time {
        padding-right: 0;
    }
}

.jail-hero {
    position: relative;
    overflow: hidden;
    border-color: #4a3828;
}

.jail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        rgba(34, 26, 19, 0.06) 0,
        rgba(34, 26, 19, 0.06) 10px,
        rgba(125, 97, 58, 0.12) 10px,
        rgba(125, 97, 58, 0.12) 11px
    );
}

.jail-hero.is-jailed {
    box-shadow: inset 0 0 0 1px rgba(167, 67, 51, 0.25);
}

.jail-hero.is-free {
    box-shadow: inset 0 0 0 1px rgba(86, 128, 76, 0.22);
}

.jail-stats,
.jail-timer,
.jail-panel {
    position: relative;
    z-index: 1;
}

.jail-timer {
    margin-top: 8px;
    border: 1px solid #63472e;
    background: #1a1410;
    color: #f1dcc0;
    padding: 7px 9px;
    display: inline-block;
}

.jail-note {
    margin-top: 8px;
}

.table.table-jail th,
.table.table-jail td {
    vertical-align: middle;
    text-align: center;
}

.table.table-jail td:nth-child(3) {
    color: #f1ddb8;
    font-weight: 600;
}

.tick-note {
    color: #f2d7a5;
}

.result-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.64);
    opacity: 0;
    transition: opacity 180ms ease;
    z-index: 20;
    display: grid;
    place-items: center;
}

.result-modal[hidden] {
    display: none;
}

.result-modal.show {
    opacity: 1;
}

.result-modal-panel {
    width: min(460px, calc(100% - 24px));
    border: 1px solid #6c4a25;
    background: linear-gradient(180deg, #1f1711 0%, #120f0c 100%);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
    padding: 14px;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: all 200ms ease;
}

.result-modal-panel.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.result-modal-panel h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-family: var(--font-display);
}

.meter {
    width: 100%;
    height: 7px;
    background: #0d0c0b;
    border: 1px solid #3a3127;
    margin-top: 5px;
}

.meter > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8a6637, #b58a4b);
}

.meter.odds > span {
    background: linear-gradient(90deg, #7f3124, #c57b47);
}

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

@keyframes cardSweep {
    0% {
        transform: translateX(-140%);
    }
    40% {
        transform: translateX(140%);
    }
    100% {
        transform: translateX(140%);
    }
}

@keyframes cashChip {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }
    25% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes resourceFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, -26px);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 2px);
    }
}

@keyframes resourceRegenPulse {
    0% {
        box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
        transform: translateY(0);
    }
    35% {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.16);
        transform: translateY(-1px);
    }
    100% {
        box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
        transform: translateY(0);
    }
}

@keyframes resourceRegenValuePulse {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rewardSweep {
    0% {
        left: -45%;
    }
    35% {
        left: 110%;
    }
    100% {
        left: 110%;
    }
}

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

    .sidebar {
        min-height: auto;
        position: fixed;
        left: 10px;
        top: 42px;
        width: 220px;
        z-index: 15;
        transform: translateX(-120%);
        transition: transform 180ms ease;
    }

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

    .sidebar-toggle {
        display: inline-block;
        margin-bottom: 8px;
        border: 1px solid var(--line);
        background: #1a1612;
        color: var(--text-main);
        padding: 6px 10px;
    }

    .topbar {
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .identity-hero {
        align-items: flex-start;
    }

    .topbar-actions {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .identity-mini-row {
        flex-wrap: wrap;
    }

    .identity-perks-row {
        width: 100%;
    }

    .resource-chip,
    .cash-chip-header {
        min-width: 100%;
    }

    .staff-cp-toggle {
        align-self: auto;
    }

    .dashboard-actions {
        justify-items: start;
    }

    .dashboard-actions-row {
        justify-content: flex-start;
    }

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

    .dashboard-command-resources {
        grid-template-columns: 1fr;
    }

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

    .dashboard-statedon-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-statedon-actions {
        grid-template-columns: 1fr;
    }

    .dashboard-statedon-levy-form {
        grid-template-columns: 1fr;
    }

    .dashboard-economy-flow-head {
        align-items: flex-start;
    }

    .economy-flow-chart {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .economy-flow-bar {
        min-height: 238px;
    }

    .guest-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .auth-landing-grid {
        grid-template-columns: 1fr;
    }

    .action-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .activity-card.crime-row {
        align-items: stretch;
    }

    .crime-row .activity-image {
        flex: 0 0 100%;
        width: 100%;
        height: 90px;
    }

    .crime-row .row-main,
    .crime-row .row-requirements,
    .crime-row .row-stats,
    .crime-row .availability-tag,
    .crime-row .row-action {
        flex: 1 1 100%;
        min-width: 0;
    }

    .crime-row .row-stats {
        text-align: left;
    }

    .crime-row .row-requirements .req-inline {
        flex-wrap: wrap;
    }

    .heist-intel-list {
        grid-template-columns: 1fr;
    }

    .major-heist-card .row-action {
        grid-template-columns: 1fr;
    }

    .economy-flow-chart {
        grid-template-columns: 1fr;
    }

    .crime-row .row-action {
        margin-left: 0;
    }

    .major-heists-page .action-toolbar {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .major-heists-page .action-toolbar .meta {
        margin-left: 0;
    }

    .numbers-page .action-toolbar {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .numbers-page .action-toolbar .meta {
        margin-left: 0;
    }

    .car-theft-page .action-toolbar {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .car-theft-page .action-toolbar .meta {
        margin-left: 0;
    }
}

.crew-layout {
    align-items: flex-start;
}

.crew-subpanel {
    margin-top: 12px;
}

.crew-empty-box {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.16) 100%);
    padding: 10px 12px;
    margin: 8px 0 10px;
}

.crew-empty-box strong {
    display: block;
    color: #f2e3cd;
    margin-bottom: 2px;
}

.crew-action-stack {
    display: grid;
    gap: 8px;
    align-content: start;
}

.crew-action-stack textarea {
    width: 100%;
    min-height: 62px;
}

.crew-chat-feed {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.18);
    display: grid;
    gap: 8px;
}

.crew-chat-item {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(16, 16, 16, 0.55);
}

.crew-chat-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.crew-chat-item p {
    margin: 4px 0;
}

.crew-chat-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.crew-chat-delete-form {
    margin: 0;
}

.crew-chat-delete-form .btn {
    padding: 4px 8px;
    font-size: 11px;
}

.crew-chat-body {
    margin-top: 8px;
    padding: 8px;
    border-left: 3px solid rgba(143, 107, 61, 0.85);
    background: rgba(0, 0, 0, 0.22);
}

.crew-tabs {
    margin-bottom: 12px;
}

.succession-grid {
    display: grid;
    gap: 8px;
}

.succession-card {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 10px;
    position: relative; overflow: hidden;
}

.succession-card.is-dead {
    opacity: .7;
}

.succession-rank {
    font-family: var(--font-display);
    font-size: 18px;
    color: #f2d2a2;
}

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

.succession-status {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 7px;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #e6e6e6;
}

.crew-color-preview {
    --crew-color: #8f6b3d;
    height: 18px;
    border: 1px solid color-mix(in srgb, var(--crew-color) 65%, #1f1f1f 35%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--crew-color) 92%, #000 8%) 0%, color-mix(in srgb, var(--crew-color) 58%, #000 42%) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.taxation-explainer {
    border-left: 4px solid #8f6b3d;
}

.taxation-payout-grid {
    display: grid;
    gap: 8px;
    max-width: 720px;
}

.taxation-edit-form {
    gap: 12px;
}

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

.taxation-field {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.18) 100%);
    padding: 8px 10px;
}

.taxation-field input,
.taxation-field select {
    margin: 0;
}

.taxation-payout-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
}

.taxation-payout-row span {
    color: #f2e3cd;
    font-size: 13px;
}

.taxation-save-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

.taxation-total-indicator {
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: #d7c9b4;
}

.taxation-total-indicator.is-over {
    color: #f06a6a;
}

.taxation-visual-breakdown {
    border: 1px solid rgba(143, 107, 61, 0.35);
}

.taxation-bar {
    display: flex;
    width: 100%;
    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.24);
}

.taxation-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: #f6f0e8;
    white-space: nowrap;
    padding: 2px 8px;
    min-width: 50px;
}

.taxation-segment.is-payout {
    background: linear-gradient(90deg, #8f6b3d 0%, #a47d45 100%);
}

.taxation-segment.is-bank {
    background: linear-gradient(90deg, #262626 0%, #343434 100%);
}

.taxation-segment.is-distribute {
    background: linear-gradient(90deg, #326b4b 0%, #3f8e62 100%);
}

.taxation-segment.is-reserve {
    background: linear-gradient(90deg, #6c4e2a 0%, #8b6535 100%);
}

.next-cycle-human-label {
    font-size: 11px;
    line-height: 1.3;
    display: inline-block;
}

.crew-affiliation-preset {
    margin-bottom: 6px;
}

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

    .taxation-payout-row {
        grid-template-columns: 1fr;
    }
}

.crew-profile-head {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.crew-avatar {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.28);
}

.crew-avatar-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    text-align: center;
    padding: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   CREW PAGE REVAMP
   ═══════════════════════════════════════════════════════════════════ */
.crew-page { display: grid; gap: 16px; }

/* ── No-crew state ── */
.crew-none-banner {
    display: flex; align-items: center; gap: 16px; padding: 20px;
    background: linear-gradient(160deg,rgba(20,12,6,0.99),rgba(8,4,2,0.99));
    border: 1px solid rgba(143,107,61,0.3);
}
.crew-none-banner-icon { font-size: 32px; opacity: 0.6; }
.crew-none-title { font-family: var(--font-display); font-size: 22px; color: #f2d2a2; margin: 0 0 4px; }
.crew-none-sub { color: #888; margin: 0; }
.crew-nogroup-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
}
.crew-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.crew-panel-title { font-family: var(--font-display); font-size: 16px; color: #f2d2a2; margin: 0; }
.crew-count-chip {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    background: rgba(143,107,61,0.2); border: 1px solid rgba(143,107,61,0.4); color: #c8a870; letter-spacing: 0.06em;
}
.crew-count-chip-alert {
    background: rgba(201,74,74,0.2); border-color: rgba(201,74,74,0.4); color: #e19494;
}
.crew-application-notice {
    padding: 8px 12px; background: rgba(72,167,101,0.1); border: 1px solid rgba(72,167,101,0.3);
    color: #7fe09b; font-size: 12px; margin-bottom: 10px;
}
.crew-eligibility-notice { color: #e09030; font-size: 12px; margin-top: 6px; }
.crew-empty-state {
    padding: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); color: #888;
}
.crew-empty-state strong { display: block; color: #c8b898; margin-bottom: 4px; }

/* ── Invite cards (no-crew) ── */
.crew-section-heading {
    font-family: var(--font-display); font-size: 14px; color: #c8a870;
    text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px;
}
.crew-invite-cards { display: grid; gap: 8px; }
.crew-invite-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border: 1px solid rgba(143,107,61,0.3); background: rgba(143,107,61,0.06);
}
.crew-invite-name { font-size: 14px; font-weight: 700; color: #f2d2a2; display: block; }
.crew-invite-card-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Recruiting crew cards (no-crew) ── */
.crew-recruiting-list { display: grid; gap: 8px; }
.crew-recruit-card { border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); overflow: hidden; }
.crew-recruit-card-info { padding: 10px 12px 8px; }
.crew-recruit-card-name { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.crew-recruit-card-name strong { color: #f2e3cd; font-size: 14px; }
.crew-recruit-card-meta { display: flex; gap: 12px; font-size: 11px; color: #888; margin-bottom: 4px; }
.crew-recruit-desc { font-size: 12px; color: #666; margin: 4px 0 0; font-style: italic; }
.crew-recruit-apply-form {
    padding: 8px 12px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.2);
    display: flex; gap: 8px; align-items: flex-end;
}
.crew-recruit-apply-form textarea { flex: 1; min-height: 48px; font-size: 12px; margin: 0; }
.crew-tag-chip {
    font-size: 11px; font-weight: 700; color: #c8a870; background: rgba(143,107,61,0.15);
    border: 1px solid rgba(143,107,61,0.35); padding: 1px 6px; letter-spacing: 0.04em;
}

/* ── Forms ── */
.crew-form { display: grid; gap: 10px; }
.crew-form-field { display: grid; gap: 4px; }
.crew-form-field label { font-size: 11px; text-transform: uppercase; color: #888; letter-spacing: 0.06em; }
.crew-form-field input, .crew-form-field select, .crew-form-field textarea { margin: 0; }
.crew-form-compact { gap: 6px; }
.crew-form-inline { display: flex; gap: 8px; align-items: center; }
.crew-form-inline input { flex: 1; margin: 0; }
.crew-bank-form-group .crew-form-inline .btn { width: 152px; flex-shrink: 0; }

/* ── Crew header (member state) ── */
.crew-header {
    display: flex; gap: 18px; align-items: center; padding: 18px 22px;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--crew-color, #8f6b3d) 12%, #111 88%) 0%,
        #111 55%);
    border: 1px solid var(--line, #303030);
    border-top: 4px solid var(--crew-color, #8f6b3d);
    flex-wrap: wrap;
}
.crew-header-avatar-col { flex-shrink: 0; }
.crew-header-avatar-img {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: 6px;
    border: 2px solid color-mix(in srgb, var(--crew-color, #8f6b3d) 70%, transparent 30%);
    box-shadow: 0 0 14px color-mix(in srgb, var(--crew-color, #8f6b3d) 30%, transparent 70%);
}
.crew-header-avatar-placeholder {
    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    font-family: var(--font-display); font-size: 24px; font-weight: 700;
    color: color-mix(in srgb, var(--crew-color, #8f6b3d) 90%, #fff 10%);
    background: color-mix(in srgb, var(--crew-color, #8f6b3d) 18%, #0d0d0d 82%);
    border: 2px solid color-mix(in srgb, var(--crew-color, #8f6b3d) 55%, transparent 45%);
    box-shadow: 0 0 14px color-mix(in srgb, var(--crew-color, #8f6b3d) 22%, transparent 78%);
}
.crew-header-info-col { flex: 1; min-width: 0; }
.crew-header-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.crew-header-tag-label {
    font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--crew-color, #8f6b3d) 95%, #fff 5%);
    background: color-mix(in srgb, var(--crew-color, #8f6b3d) 16%, transparent 84%);
    border: 1px solid color-mix(in srgb, var(--crew-color, #8f6b3d) 40%, transparent 60%);
    padding: 2px 7px; border-radius: 3px;
}
.crew-header-crew-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #f2d2a2; margin: 0; }
.crew-header-meta-strip {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #777;
}
.crew-hm-item strong { color: #c8b898; }
.crew-hm-sep { color: #383838; }
.crew-header-affil-row { margin-top: 6px; }
.crew-header-vaults-col {
    display: flex; gap: 0; flex-wrap: wrap; margin-left: auto;
    border-left: 1px solid rgba(255,255,255,0.07); padding-left: 20px;
}
.crew-vault-card {
    padding: 6px 18px; background: transparent; border: none; min-width: 110px; text-align: center;
    border-right: 1px solid rgba(255,255,255,0.07);
}
.crew-vault-card:last-child { border-right: none; padding-right: 0; }
.crew-vault-label {
    display: block; font-size: 10px; text-transform: uppercase; color: #555; letter-spacing: 0.08em; margin-bottom: 5px;
}
.crew-vault-value { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #f2d2a2; }

/* ── Tabs nav ── */
.crew-tabs-nav {
    display: flex; gap: 2px; border-bottom: 1px solid #252525; padding-bottom: 0; flex-wrap: wrap;
}
.crew-tab-link {
    padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.07em; color: #666; text-decoration: none;
    border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.crew-tab-link:hover { color: #c8b898; }
.crew-tab-link.is-active {
    color: #f2d2a2;
    border-bottom-color: color-mix(in srgb, var(--crew-color, #8f6b3d) 90%, #fff 10%);
}

/* ── Tab panels ── */
.crew-tab-panel-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid #222;
}
.crew-tab-panel-title { font-family: var(--font-display); font-size: 15px; color: #f2d2a2; margin: 0; }

/* ── Member roster ── */
.crew-member-roster {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
}
.crew-member-card {
    background: linear-gradient(160deg,rgba(16,10,6,0.99),rgba(8,4,2,0.99));
    border: 1px solid #282828; padding: 12px; display: grid; gap: 8px;
    position: relative; overflow: hidden;
}
.crew-mc-is-dead { opacity: .7; }
.crew-mc-dead-overlay {
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    background: rgba(160,20,20,0.28);
    border-top: 1px solid rgba(201,74,74,0.35);
    border-bottom: 1px solid rgba(201,74,74,0.35);
    padding: 9px 0;
    pointer-events: none; z-index: 2;
}
.crew-mc-dead-overlay strong {
    font-size: 14px; font-weight: 800; letter-spacing: .22em;
    text-transform: uppercase; color: #e86060;
    text-shadow: 0 0 10px rgba(201,74,74,0.7);
}
.crew-mc-head { display: flex; align-items: center; gap: 10px; }
.crew-mc-avatar-wrap { position: relative; flex-shrink: 0; }
.crew-mc-online-dot {
    position: absolute; top: -3px; right: -3px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #48a765;
    border: 2px solid #0d0905;
    box-shadow: 0 0 6px rgba(72,167,101,0.7);
    z-index: 3;
}
.crew-mc-avatar {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; letter-spacing: 0.03em; flex-shrink: 0;
}
.crew-mc-avatar-img { object-fit: cover; display: block; }
.crew-mc-avatar-leader        { background: rgba(201,160,40,0.18); border: 1px solid rgba(201,160,40,0.5);  color: #d4a830; }
.crew-mc-avatar-underboss     { background: rgba(180,60,60,0.18);  border: 1px solid rgba(180,60,60,0.4);   color: #e08080; }
.crew-mc-avatar-left_hand_man,
.crew-mc-avatar-right_hand_man{ background: rgba(80,120,180,0.18); border: 1px solid rgba(80,120,180,0.4);  color: #8ab0e0; }
.crew-mc-avatar-recruiter     { background: rgba(72,167,101,0.18); border: 1px solid rgba(72,167,101,0.4);  color: #7fe09b; }
.crew-mc-avatar-member        { background: rgba(255,255,255,0.06);border: 1px solid rgba(255,255,255,0.15);color: #aaa; }
.crew-mc-identity { min-width: 0; }
.crew-mc-name { display: block; font-size: 13px; font-weight: 700; color: #ffffff; text-decoration: none; }
.crew-mc-name:hover { color: #fff; }
.crew-role-chip {
    display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; padding: 1px 6px; margin-top: 2px;
}
.crew-role-leader        { background: rgba(201,160,40,0.15); border: 1px solid rgba(201,160,40,0.45); color: #d4a830; }
.crew-role-underboss     { background: rgba(180,60,60,0.15);  border: 1px solid rgba(180,60,60,0.4);   color: #e08080; }
.crew-role-left_hand_man,
.crew-role-right_hand_man{ background: rgba(80,120,180,0.15); border: 1px solid rgba(80,120,180,0.35); color: #8ab0e0; }
.crew-role-recruiter     { background: rgba(72,167,101,0.15); border: 1px solid rgba(72,167,101,0.35); color: #7fe09b; }
.crew-role-member        { background: rgba(255,255,255,0.05);border: 1px solid rgba(255,255,255,0.12);color: #888; }
.crew-mc-rank { font-size: 11px; color: #666; padding-top: 2px; border-top: 1px solid #1e1e1e; }
.crew-mc-bars { display: grid; gap: 5px; }
.crew-bar-row { display: flex; align-items: center; gap: 6px; }
.crew-bar-label { font-size: 10px; color: #555; width: 32px; flex-shrink: 0; text-transform: uppercase; }
.crew-bar-track { flex: 1; height: 5px; background: #1a1a1a; border: 1px solid #262626; overflow: hidden; }
.crew-bar-fill { height: 100%; transition: width 0.3s ease; }
.crew-bar-nums {
    font-size: 10px; color: #666; width: 48px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.crew-mc-loadout { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid #1e1e1e; padding-top: 6px; }
.crew-mc-loadout-item { font-size: 11px; color: #666; }
.crew-mc-footer { display: flex; gap: 6px; border-top: 1px solid #1e1e1e; padding-top: 8px; }
.crew-mc-stat { flex: 1; text-align: center; }
.crew-mc-stat span { display: block; font-size: 10px; text-transform: uppercase; color: #555; margin-bottom: 2px; }
.crew-mc-stat strong { font-size: 13px; color: #c8b898; font-variant-numeric: tabular-nums; }

/* ── Recruiting layout ── */
.crew-recruiting-layout {
    display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start;
}
.crew-recruiting-sidebar { display: grid; gap: 14px; }
.crew-recruiting-main { display: grid; gap: 14px; }
.crew-invites-sent-list { display: grid; gap: 6px; }
.crew-invite-sent-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);
}
.crew-invite-sent-name { font-weight: 700; color: #f2e3cd; font-size: 13px; }
.crew-invite-sent-role { color: #888; font-size: 12px; }
.crew-app-list { display: grid; gap: 8px; }
.crew-app-card { border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); overflow: hidden; }
.crew-app-card-info { padding: 10px 12px; }
.crew-app-name { display: block; font-size: 14px; font-weight: 700; color: #f2e3cd; margin-bottom: 3px; }
.crew-app-message {
    font-size: 12px; color: #888; font-style: italic; margin: 6px 0 0; padding: 6px 8px;
    border-left: 2px solid #333; background: rgba(0,0,0,0.2);
}
.crew-app-card-actions {
    display: flex; gap: 8px; padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.15);
}

/* ── Management layout ── */
.crew-mgmt-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.crew-mgmt-col { display: grid; gap: 14px; }
.crew-mgmt-member-list { display: grid; gap: 6px; }
.crew-mgmt-member-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.crew-mgmt-member-identity { display: flex; align-items: center; gap: 8px; }
.crew-mgmt-member-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crew-inline-form { display: flex; align-items: center; gap: 6px; margin: 0; }
.crew-inline-select { font-size: 12px; padding: 4px 6px; margin: 0; min-width: 100px; }
.crew-btn-sm { padding: 4px 10px; font-size: 11px; }
.crew-btn-kick { border-color: rgba(201,74,74,0.4); color: #e19494; }
.crew-btn-kick:hover { background: rgba(201,74,74,0.12); }
.crew-bank-vaults { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.crew-bank-forms { display: grid; gap: 12px; }
.crew-bank-form-group {
    padding: 10px 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.15); display: grid; gap: 8px;
}
.crew-bank-form-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase; color: #888; letter-spacing: 0.06em; margin: 0 0 4px;
}
.crew-ledger-list { display: grid; gap: 4px; max-height: 200px; overflow-y: auto; }
.crew-ledger-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 12px; flex-wrap: wrap;
}
.crew-ledger-actor { font-weight: 700; color: #c8b898; flex-shrink: 0; }
.crew-ledger-action { color: #888; flex: 1; }
.crew-ledger-time { color: #555; font-size: 11px; flex-shrink: 0; margin-left: auto; }
.crew-perm-table-wrap { overflow-x: auto; }
.crew-perm-table { min-width: 500px; }
.crew-danger-zone {
    border-color: rgba(201,74,74,0.3);
    background: linear-gradient(160deg,rgba(20,6,6,0.99),rgba(8,2,2,0.99));
}
.crew-danger-title { color: #e19494; }
.crew-btn-danger { border-color: rgba(201,74,74,0.5); color: #e19494; }
.crew-btn-danger:hover:not(:disabled) { background: rgba(201,74,74,0.12); }
.crew-danger-divider { border: 0; border-top: 1px solid rgba(201,74,74,0.2); margin: 12px 0; }
.crew-btn-accept { background: rgba(72,167,101,0.1); border-color: rgba(72,167,101,0.4); color: #7fe09b; }
.crew-btn-accept:hover { background: rgba(72,167,101,0.18); }
.crew-row-dead { opacity: .55; background: rgba(160,20,20,0.07); }
.crew-row-dead td { color: #886060; }
.crew-row-dead a { color: #a07070; pointer-events: none; }
.crew-dead-badge {
    display: inline-block; margin-left: 7px;
    font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: #e86060; background: rgba(160,20,20,0.22);
    border: 1px solid rgba(201,74,74,0.35); padding: 1px 5px; border-radius: 2px;
    vertical-align: middle; line-height: 1.6;
}

/* ── Taxation improvements ── */
.crew-tax-table-wrap { overflow-x: auto; }

/* ── Chat ── */
.crew-chat-feed {
    max-height: 420px; overflow-y: auto; border: 1px solid #1e1e1e; background: rgba(0,0,0,0.2);
    display: grid; gap: 2px; padding: 8px; margin-bottom: 12px;
}
.crew-chat-msg {
    padding: 8px 10px; background: rgba(255,255,255,0.03); border-left: 2px solid #2a2a2a;
}
.crew-chat-msg-mine { border-left-color: rgba(143,107,61,0.6); background: rgba(143,107,61,0.06); }
.crew-chat-msg-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px;
}
.crew-chat-msg-meta strong a { color: #f2e3cd; text-decoration: none; font-size: 13px; }
.crew-chat-msg-meta strong a:hover { color: #fff; }
.crew-chat-role-tag { font-size: 10px; color: #555; }
.crew-chat-time { font-size: 11px; color: #444; margin-left: auto; }
.crew-chat-del-form { margin: 0; }
.crew-chat-del-btn {
    background: none; border: none; color: #444; cursor: pointer; font-size: 12px; padding: 2px 6px;
}
.crew-chat-del-btn:hover { color: #c94a4a; }
.crew-chat-msg-body { font-size: 13px; color: #c8b898; line-height: 1.5; }
.crew-chat-empty { text-align: center; color: #555; padding: 20px; }
.crew-chat-compose { display: grid; gap: 8px; }
.crew-chat-compose textarea { margin: 0; }

/* ── Profile layout ── */
.crew-profile-layout {
    display: grid; grid-template-columns: 1fr 380px; gap: 14px; align-items: start;
}
.crew-profile-id-block { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.crew-profile-avatar-wrap { flex-shrink: 0; }
.crew-profile-avatar {
    width: 100px; height: 100px; object-fit: cover;
    border: 2px solid rgba(143,107,61,0.4); background: #111; display: block;
}
.crew-profile-avatar-empty {
    width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 24px; font-weight: 700;
    color: #8f6b3d; background: rgba(143,107,61,0.1); border: 2px solid rgba(143,107,61,0.3);
}
.crew-profile-id-info { flex: 1; min-width: 0; }
.crew-profile-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.crew-profile-name-row h3 { margin: 0; font-size: 18px; color: #f2d2a2; }
.crew-profile-id-meta { display: grid; gap: 4px; font-size: 13px; color: #888; margin-bottom: 10px; }
.crew-profile-desc {
    font-size: 13px; color: #a09080; line-height: 1.6; padding: 8px 10px;
    border-left: 2px solid rgba(143,107,61,0.4); background: rgba(0,0,0,0.2);
}
.crew-profile-edit-col { display: grid; gap: 14px; }
.crew-color-row { display: flex; align-items: center; gap: 10px; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .crew-nogroup-grid { grid-template-columns: 1fr; }
    .crew-recruiting-layout { grid-template-columns: 1fr; }
    .crew-mgmt-layout { grid-template-columns: 1fr; }
    .crew-profile-layout { grid-template-columns: 1fr; }
    .crew-member-roster { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .crew-header { flex-direction: column; align-items: flex-start; }
    .crew-header-vaults-col { margin-left: 0; }
}

/* ── Hospital ── */
.hosp-layout {
    display: grid;
    gap: 14px;
}

.hosp-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.hosp-panel-head h2 {
    margin: 0;
}

.hosp-status-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 10px;
    border: 1px solid;
}

.hosp-status-badge.is-admitted {
    color: #e3be86;
    border-color: rgba(227, 190, 134, 0.4);
    background: rgba(227, 190, 134, 0.08);
}

.hosp-status-badge.is-free {
    color: #888;
    border-color: #333;
    background: transparent;
}

.hosp-health-block {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
}

.hosp-health-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #a09080;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hosp-health-bar {
    position: relative;
    height: 14px;
    background: #1a1714;
    border: 1px solid #2a2520;
    overflow: hidden;
}

.hosp-health-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    transition: width 0.4s ease;
}

.hosp-health-fill.is-high  { background: #48a765; }
.hosp-health-fill.is-mid   { background: #c9993a; }
.hosp-health-fill.is-low   { background: #c94a4a; }

.hosp-health-projected {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: rgba(227, 190, 134, 0.25);
    border-right: 1px dashed rgba(227, 190, 134, 0.5);
    pointer-events: none;
}

.hosp-health-sublabel {
    font-size: 11px;
    color: #786858;
}

.ok-text { color: #48a765; font-weight: 600; }
.danger-text { color: #c94a4a; font-weight: 600; }

.hosp-forced-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(201, 74, 74, 0.08);
    border: 1px solid rgba(201, 74, 74, 0.3);
    border-left: 3px solid #c94a4a;
    font-size: 13px;
}

/* Treatment panel */
.hosp-treatment-panel h3,
.hosp-admissions-panel h3 {
    margin: 0 0 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #786858;
}

.hosp-treatment-ready,
.hosp-treatment-waiting {
    display: grid;
    gap: 12px;
}

.hosp-treatment-full p {
    color: #48a765;
    font-weight: 600;
}

.hosp-countdown {
    font-size: 28px;
    font-family: var(--font-display, inherit);
    font-weight: 700;
    color: #e3be86;
    letter-spacing: 0.06em;
    line-height: 1;
}

.hosp-treat-btn {
    align-self: flex-start;
    min-width: 200px;
}

/* Admissions */
.hosp-admissions-actions {
    display: grid;
    gap: 8px;
}

/* Neutral Theme Override Layer: black/dark gray surfaces with white text */
:root {
    --bg-main: #050505;
    --bg-panel: #111111;
    --bg-panel-2: #1a1a1a;
    --line: #3a3a3a;
    --text-main: #ffffff;
    --text-muted: #d1d1d1;
    --accent: #b8b8b8;
}

html,
body {
    background: #040404;
    color: #ffffff;
}

html {
    background: #040404;
}

body {
    background: transparent;
}

.sidebar,
.topbar,
.panel,
.hit-card,
.hit-track-item,
.hit-log-item,
.heist-inventory-panel,
.heist-intel-panel,
.heist-intel-details,
.resource-chip,
.identity-primary,
.identity-chip {
    border-color: #3c3c3c !important;
    background: linear-gradient(165deg, rgba(22, 22, 22, 0.96), rgba(12, 12, 12, 0.98)) !important;
    color: #ffffff !important;
    box-shadow: none;
}

.meta,
.subtitle,
.hit-track-meta,
.next-cycle-human-label,
.identity-role,
.murder-tabs .btn span,
.profile-quote {
    color: #d4d4d4 !important;
}

h1,
h2,
h3,
h4,
strong,
.title,
.identity-name,
.detective-pill .fee,
.heist-intel-title {
    color: #ffffff !important;
}

.btn,
.btn.btn-ghost,
button,
input[type="submit"] {
    border-color: #4a4a4a;
    background: linear-gradient(145deg, #262626 0%, #1a1a1a 100%);
    color: #ffffff;
}

.btn:hover,
.btn.btn-ghost:hover,
button:hover,
input[type="submit"]:hover {
    border-color: #6a6a6a;
    background: linear-gradient(145deg, #303030 0%, #212121 100%);
}

input,
select,
textarea {
    border-color: #444444 !important;
    background: #121212 !important;
    color: #ffffff !important;
}

input::placeholder,
textarea::placeholder {
    color: #bcbcbc;
}

.status-chip,
.intel-chip,
.hit-bullet-intel,
.hit-warning-badge,
.resource-chip .regen-next,
.detective-card-v2:has(input[type="radio"]:checked),
.detective-pill.selectable:has(input[type="radio"]:checked),
.hit-searching-card {
    border-color: #666666 !important;
    background: linear-gradient(155deg, rgba(28, 28, 28, 0.98), rgba(15, 15, 15, 0.98)) !important;
    color: #ffffff !important;
}

.hit-searching-card > h3::before {
    background: #d9d9d9;
    box-shadow: 0 0 0 3px rgba(217, 217, 217, 0.18);
}

.taxation-segment.is-payout,
.taxation-segment.is-bank,
.taxation-segment.is-distribute,
.taxation-segment.is-reserve {
    background: linear-gradient(90deg, #2f2f2f 0%, #3d3d3d 100%) !important;
}

a {
    color: #ffffff;
}

a:hover {
    color: #d8d8d8;
    text-decoration: none;
}

/* Index Page Polish Overrides */
.guest-topbar {
    border-color: #3a3a3a !important;
    background: linear-gradient(145deg, rgba(18, 18, 18, 0.98), rgba(10, 10, 10, 0.98)) !important;
}

.guest-nav a {
    border-color: #454545 !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.guest-nav a:hover {
    border-color: #6a6a6a !important;
    background: #252525 !important;
}

.auth-landing {
    border-color: #3d3d3d !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.04), transparent 44%),
        linear-gradient(165deg, rgba(16, 16, 16, 0.98), rgba(9, 9, 9, 0.98)) !important;
    padding: 16px;
}

.auth-landing-grid {
    gap: 16px;
}

.auth-pitch,
.auth-panel-wrap {
    border-color: #3f3f3f !important;
    background: linear-gradient(155deg, rgba(20, 20, 20, 0.97), rgba(11, 11, 11, 0.98)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.auth-pitch h2,
.auth-panel-wrap h3 {
    color: #ffffff !important;
    letter-spacing: 0.05em;
}

.auth-pitch p,
.auth-pitch li,
.auth-switch-inline,
.auth-switch-inline a,
.ban-appeal-box .meta {
    color: #d7d7d7 !important;
}

.auth-pitch ul {
    margin: 12px 0 14px;
    padding-left: 20px;
}

.auth-panel-wrap .form-grid {
    display: grid;
    gap: 8px;
}

.auth-panel-wrap label {
    color: #ececec;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.auth-panel-wrap input,
.auth-panel-wrap textarea {
    border: 1px solid #4a4a4a !important;
    background: #131313 !important;
    color: #ffffff !important;
    min-height: 36px;
    padding: 8px 9px;
}

.auth-panel-wrap input:focus,
.auth-panel-wrap textarea:focus {
    border-color: #7a7a7a !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.auth-landing .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.auth-landing .actions .btn,
.auth-panel-wrap .btn {
    min-height: 34px;
    border-color: #4b4b4b !important;
    background: linear-gradient(145deg, #262626, #1a1a1a) !important;
    color: #ffffff !important;
}

.auth-landing .actions .btn:hover,
.auth-panel-wrap .btn:hover {
    border-color: #6f6f6f !important;
    background: linear-gradient(145deg, #2f2f2f, #222222) !important;
}

.ban-appeal-box {
    border-top-color: #3f3f3f !important;
    margin-top: 12px;
    padding-top: 10px;
}

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

    .auth-landing {
        padding: 12px;
    }
}


/* ================================================================
   THE GANGSTER'S ULTIMATUM — DARK GAMING THEME v2
   Functional dark UI inspired by TORN.
   Cool dark grays · green/red functional indicators · compact layouts
   ================================================================ */

/* ---- Root Palette Override ---- */
:root {
    --bg-main:         #111111;
    --bg-panel:        #1a1a1a;
    --bg-panel-2:      #1e1e1e;
    --bg-row:          #1d1d1d;
    --bg-row-hover:    #232323;
    --bg-header:       #151515;
    --bg-input:        #161616;
    --line:            #2d2d2d;
    --line-strong:     #383838;
    --text-main:       #e2e2e2;
    --text-muted:      #909090;
    --text-dim:        #555555;
    --ok:              #4ea65a;
    --ok-dim:          #2e6636;
    --ok-glow:         rgba(78,166,90,0.12);
    --danger:          #c84040;
    --danger-dim:      #7a2020;
    --danger-glow:     rgba(200,64,64,0.12);
    --warn:            #c89030;
    --energy-color:    #d97b28;
    --nerve-color:     #c84040;
    --health-color:    #4ea65a;
    --cash-color:      #4ea65a;
    --respect-color:   #6a9ad0;
    --accent:          #555555;
    --accent-hi:       #707070;
    --font-ui:         "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display:    "Inter", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-title:      "Cinzel", "Times New Roman", serif;
}

/* ================================================================
   BASE
   ================================================================ */
body {
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-ui);
}

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

a:hover {
    color: #6fcf7e;
    text-decoration: none;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
    background: #131313;
    border-right: 1px solid var(--line);
    box-shadow: none;
}

.sidebar .brand-block,
.sidebar .brand-block a {
    padding: 16px 14px 12px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    display: block;
}

.sidebar .title {
    font-family: var(--font-title);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e2e2e2;
    font-weight: 700;
    margin: 0;
}

.sidebar .subtitle {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 3px;
}

.nav {
    padding: 6px 0 12px;
}

.nav-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 10px 14px 3px;
    margin: 0;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    color: #8a8a8a;
    text-decoration: none;
    border-left: 2px solid transparent;
    border-right: 0;
    transition: color 0.1s, background 0.1s, border-color 0.1s;
    line-height: 1.25;
    font-weight: 500;
}

.nav a:hover {
    color: #d0d0d0;
    background: rgba(255, 255, 255, 0.04);
    border-left-color: var(--accent-hi);
}

.nav a.active,
.nav a[aria-current="page"] {
    color: var(--ok);
    border-left-color: var(--ok);
    background: rgba(78, 166, 90, 0.07);
    font-weight: 600;
}

/* Casino submenu disclosure */
.sidebar details > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    color: #8a8a8a;
    border-left: 2px solid transparent;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    list-style: none;
}

.sidebar details > summary:hover {
    color: #d0d0d0;
    background: rgba(255, 255, 255, 0.04);
}

.sidebar details[open] > summary {
    color: #c0c0c0;
}

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
    background: #151515;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}

/* ================================================================
   PANEL — Core container
   ================================================================ */
.panel {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: none;
}

/* Panel title strip */
.panel > h2:first-child {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b8b8b8;
    padding: 10px 14px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
    border-radius: 2px 2px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* Styled panel header used in crimes, etc. */
.panel-header-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
    border-radius: 2px 2px 0 0;
}

.panel-header-strip .panel-title {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c0c0c0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-header-strip .panel-tag {
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ok);
    background: rgba(78, 166, 90, 0.1);
    border: 1px solid rgba(78, 166, 90, 0.28);
    padding: 2px 6px;
    border-radius: 2px;
}

.panel-header-strip .panel-meta {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.04em;
}

/* Inline meta notes inside panels */
.panel .meta {
    font-size: 10.5px;
    color: var(--text-muted);
    padding: 6px 14px;
    margin: 0;
    border-bottom: 1px solid var(--line);
    line-height: 1.4;
}

/* ================================================================
   ACTION TOOLBAR
   ================================================================ */
.action-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #161616;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.action-toolbar .actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.filter-toggle input[type="checkbox"] {
    accent-color: var(--ok);
}

/* ================================================================
   CRIME CARDS (crimes.php)
   ================================================================ */
.crimes-page .cards.cards-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 0 0 2px 2px;
    overflow: hidden;
}

.activity-card.crime-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "img  main   action"
        "img  reqs   action"
        "img  stats  action";
    gap: 0 14px;
    align-items: center;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--line);
    background: var(--bg-panel);
    transition: background 0.1s;
    border-radius: 0;
    position: relative;
}

.activity-card.crime-row:last-child {
    border-bottom: none;
}

.activity-card.crime-row:hover {
    background: var(--bg-row-hover);
}

.activity-card.crime-row.unavailable {
    opacity: 0.55;
}

.activity-card.crime-row .activity-image {
    grid-area: img;
    grid-row: 1 / 4;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    object-fit: cover;
    filter: brightness(0.75) saturate(0.5);
    align-self: center;
    border: 1px solid var(--line-strong);
}

/* Main title + description */
.activity-card.crime-row .row-main {
    grid-area: main;
    padding-bottom: 3px;
}

.activity-card.crime-row .row-main h3 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 2px;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.activity-card.crime-row .row-main p {
    font-size: 10px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 360px;
}

/* Requirements row */
.activity-card.crime-row .row-requirements {
    grid-area: reqs;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    flex-wrap: wrap;
    padding: 3px 0;
}

.req-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}

.req-cell em {
    font-style: normal;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.req-cell strong {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
}

.req-cell.reward-cell em   { color: #3a7a43; }
.req-cell.reward-cell strong { color: var(--ok); }

.req-cell.req-energy em    { color: #8a4a18; }
.req-cell.req-energy strong { color: var(--energy-color); }

.req-cell.req-nerve em     { color: #7a2828; }
.req-cell.req-nerve strong { color: var(--nerve-color); }

/* Divider between reward and req-inline */
.req-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--line);
}

/* Stats / Odds row */
.activity-card.crime-row .row-stats {
    grid-area: stats;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 3px;
    flex-wrap: wrap;
}

.row-stats > strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    min-width: 38px;
}

/* Odds bar — filled + segmented look */
.odds-bar {
    position: relative;
    height: 6px;
    width: 80px;
    background: #282828;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.odds-bar span {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    transition: width 0.35s ease;
}

/* Color by tier */
.odds-bar.high span { background: var(--ok); }
.odds-bar.mid  span { background: var(--warn); }
.odds-bar.low  span { background: var(--danger); }

/* Segmented overlay — 8 hairline dividers via gradient */
.odds-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent calc(12.5% - 1px),
        rgba(20, 20, 20, 0.55) calc(12.5% - 1px),
        rgba(20, 20, 20, 0.55) 12.5%
    );
    pointer-events: none;
    border-radius: 2px;
}

.row-stats .meta {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.03em;
}

.row-stats span:not(.meta) {
    font-size: 9.5px;
    color: var(--text-muted);
}

/* Availability warning */
.availability-tag {
    position: absolute;
    bottom: 8px;
    right: 110px;
    font-size: 9px;
    font-weight: 600;
    color: var(--danger);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(200, 64, 64, 0.08);
    border: 1px solid rgba(200, 64, 64, 0.2);
    padding: 2px 6px;
    border-radius: 2px;
}

/* Commit action button */
.row-action {
    grid-area: action;
    grid-row: 1 / 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.row-action .btn {
    font-size: 10.5px;
    padding: 6px 16px;
    background: #1e1e1e;
    border: 1px solid var(--line-strong);
    color: #b0b0b0;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    white-space: nowrap;
    font-family: var(--font-ui);
}

.row-action .btn:hover:not(:disabled) {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

.row-action .btn:disabled {
    background: #181818;
    border-color: var(--line);
    color: var(--text-dim);
    cursor: not-allowed;
}

/* Locked crimes panel */
.locked-panel {
    border: 1px solid var(--line);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.locked-panel summary {
    padding: 9px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    cursor: pointer;
    background: var(--bg-header);
    border-radius: 3px;
    user-select: none;
    list-style: none;
}

.locked-panel[open] summary {
    border-bottom: 1px solid var(--line);
    border-radius: 3px 3px 0 0;
}

/* Drop item tooltip */
.crime-drop-trigger {
    font-size: 9.5px;
    color: var(--text-muted);
    background: #1e1e1e;
    border: 1px solid var(--line-strong);
    padding: 2px 7px;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--font-ui);
}

.crime-drop-trigger:hover {
    color: var(--text-main);
    border-color: var(--accent-hi);
}

/* ================================================================
   BUTTONS — Global overrides
   ================================================================ */
.btn,
button.btn {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 7px 16px;
    border-radius: 3px;
    border: 1px solid var(--line-strong);
    background: #1e1e1e;
    color: #c0c0c0;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    text-decoration: none;
    display: inline-block;
    line-height: 1.3;
}

.btn:hover:not(:disabled),
button.btn:hover:not(:disabled) {
    background: #2a2a2a;
    border-color: var(--accent-hi);
    color: var(--text-main);
}

.btn:disabled,
button.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-primary,
.btn.btn-primary {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

.btn-primary:hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled) {
    background: #3d8a49;
    border-color: #3d8a49;
}

.btn-danger,
.btn.btn-danger {
    background: var(--danger-dim);
    border-color: var(--danger);
    color: #ffb0b0;
}

.btn-sm {
    font-size: 10px;
    padding: 4px 10px;
}

/* ================================================================
   TABS — Dashboard / content tabs
   ================================================================ */
.dashboard-tab-btn,
.tab-btn {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 9px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
    font-family: var(--font-ui);
    white-space: nowrap;
}

.dashboard-tab-btn:hover,
.tab-btn:hover {
    color: var(--text-main);
}

.dashboard-tab-btn.active,
.tab-btn.active {
    color: var(--ok);
    border-bottom-color: var(--ok);
}

/* ================================================================
   STAT CARDS (dashboard hero)
   ================================================================ */
.stat-card {
    background: var(--bg-panel-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 12px 14px;
    box-shadow: none;
}

.stat-card .stat-label {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 5px;
}

.stat-card .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-card .stat-sub {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Resource meters */
.meter {
    height: 6px;
    background: #282828;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.meter-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.meter-energy .meter-fill { background: var(--energy-color); }
.meter-nerve  .meter-fill { background: var(--nerve-color); }
.meter-health .meter-fill { background: var(--health-color); }

/* Segmented overlay on all meters */
.meter::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(10% - 1px),
        rgba(20, 20, 20, 0.45) calc(10% - 1px),
        rgba(20, 20, 20, 0.45) 10%
    );
    pointer-events: none;
}

/* ================================================================
   ECONOMY KPI CARDS
   ================================================================ */
.economy-kpi-card {
    background: var(--bg-panel-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 12px 14px;
    box-shadow: none;
}

.economy-kpi-label {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 6px;
}

.economy-kpi-value {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

/* ================================================================
   TABLES
   ================================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

th {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-strong);
    background: var(--bg-header);
    text-align: left;
    white-space: nowrap;
}

td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--text-main);
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* ================================================================
   FORMS
   ================================================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    background: var(--bg-input);
    border: 1px solid var(--line-strong);
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: 12.5px;
    padding: 7px 10px;
    border-radius: 3px;
    transition: border-color 0.12s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--ok);
}

label {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ================================================================
   NOTIFICATIONS / STATUS BADGES
   ================================================================ */
.badge {
    display: inline-block;
    font-size: 8.5px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 2px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-family: var(--font-ui);
}

.badge-ok      { background: rgba(78,166,90,0.12);  color: var(--ok);     border: 1px solid rgba(78,166,90,0.28); }
.badge-danger  { background: rgba(200,64,64,0.12);  color: var(--danger); border: 1px solid rgba(200,64,64,0.28); }
.badge-warn    { background: rgba(200,144,48,0.12); color: var(--warn);   border: 1px solid rgba(200,144,48,0.28); }
.badge-neutral { background: rgba(80,80,80,0.18);   color: #888;          border: 1px solid rgba(80,80,80,0.3); }

/* ================================================================
   MODALS
   ================================================================ */
.modal-overlay {
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(2px);
}

.modal-box,
.modal {
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
}

.modal-header {
    padding: 11px 16px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
    border-radius: 3px 3px 0 0;
}

.modal-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-main);
}

/* ================================================================
   FLASH / ALERT MESSAGES
   ================================================================ */
.flash-success,
.alert-success {
    background: rgba(78, 166, 90, 0.08);
    border: 1px solid rgba(78, 166, 90, 0.28);
    color: #8fd898;
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 12.5px;
    margin: 8px 0;
}

.flash-error,
.alert-danger {
    background: rgba(200, 64, 64, 0.08);
    border: 1px solid rgba(200, 64, 64, 0.28);
    color: #e09090;
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 12.5px;
    margin: 8px 0;
}

.flash-info,
.alert-info {
    background: rgba(90, 140, 200, 0.08);
    border: 1px solid rgba(90, 140, 200, 0.28);
    color: #90b8e0;
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 12.5px;
    margin: 8px 0;
}

/* ================================================================
   LEADERBOARDS / RANKS
   ================================================================ */
.rank-num {
    font-weight: 700;
    color: var(--text-dim);
}

.rank-1 .rank-num { color: #d4af40; }
.rank-2 .rank-num { color: #a0a0a0; }
.rank-3 .rank-num { color: #b07840; }

/* ================================================================
   HALL OF FAME — full leaderboard redesign
   ================================================================ */

/* ── Page wrapper ─────────────────────────────────────────────── */
.lb-page { display: flex; flex-direction: column; gap: 12px; }

/* ── Page header ──────────────────────────────────────────────── */
.lb-header { padding: 0; overflow: hidden; border-color: #1e1a14; }

.lb-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px 18px;
}

.lb-header-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lb-page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f0e0c0;
    margin: 0;
    line-height: 1;
}

.lb-page-sub {
    font-size: 11px;
    color: #5a5040;
    margin: 0;
    letter-spacing: 0.03em;
}

.lb-header-stats {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.lb-hstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 20px;
    border-left: 1px solid #1a1612;
}

.lb-hstat > span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4a4030;
    font-weight: 600;
}

.lb-hstat > strong {
    font-size: 22px;
    font-weight: 700;
    color: #c0963c;
    line-height: 1;
}

/* ── Privacy panel ────────────────────────────────────────────── */
.lb-privacy-panel { padding: 16px 20px; border-color: #1a1810; }

.lb-privacy-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.lb-privacy-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.lb-privacy-head > div > strong {
    font-size: 12px;
    font-weight: 700;
    color: #d8c8a0;
    display: block;
    margin-bottom: 3px;
}

.lb-privacy-head > div > p {
    font-size: 11px;
    color: #5a5040;
    margin: 0;
    line-height: 1.4;
}

.lb-privacy-toggles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.lb-privacy-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #2a2018;
    background: #0a0806;
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
    user-select: none;
    position: relative;
}

.lb-privacy-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.lb-privacy-toggle.is-on {
    border-color: #3a6a3e;
    background: rgba(40, 80, 45, 0.15);
}

.lb-privacy-toggle.is-off {
    border-color: #3a2018;
    background: rgba(60, 20, 20, 0.15);
    opacity: 0.7;
}

.lb-toggle-ico   { font-size: 14px; }
.lb-toggle-label { font-size: 11px; font-weight: 700; color: #c8b888; }
.lb-toggle-state {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: 2px;
}

.lb-privacy-toggle.is-on  .lb-toggle-state { color: #6bba73; }
.lb-privacy-toggle.is-off .lb-toggle-state { color: #9a5050; }

.lb-save-btn {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 20px;
    background: rgba(40, 60, 45, 0.4);
    border: 1px solid #3a6040;
    color: #7aaa80;
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
}

.lb-save-btn:hover {
    background: rgba(60, 100, 65, 0.4);
    border-color: #5a9060;
    color: #9aca9a;
}

/* ── Boards grid ──────────────────────────────────────────────── */
.lb-boards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* ── Individual board panel ───────────────────────────────────── */
.lb-board {
    padding: 0;
    overflow: hidden;
    border-color: #1e1a14;
    display: flex;
    flex-direction: column;
}

.lb-board-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #090806;
    border-bottom: 1px solid #1a1612;
}

.lb-board-icon { font-size: 15px; }

.lb-board-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c0a060;
}

/* ── Rows list ────────────────────────────────────────────────── */
.lb-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.lb-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #0e0c08;
    gap: 8px;
    transition: background 120ms;
}

.lb-row:last-child  { border-bottom: none; }
.lb-row:hover       { background: rgba(255,255,255,0.02); }

/* Self highlight */
.lb-row.is-self {
    background: rgba(192, 150, 60, 0.05);
    border-bottom-color: #1e1a0e;
}

/* Gold/silver/bronze row tint */
.lb-row.lb-gold   { background: rgba(200, 160, 50, 0.06); }
.lb-row.lb-silver { background: rgba(160, 160, 160, 0.04); }
.lb-row.lb-bronze { background: rgba(160, 110, 50, 0.04); }

.lb-pos { display: flex; align-items: center; justify-content: center; }

/* Medal badges */
.lb-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

.lb-medal-1 { background: rgba(212,175,55,0.2);  border: 1px solid #b09030; color: #e8c060; }
.lb-medal-2 { background: rgba(160,160,160,0.15); border: 1px solid #888888; color: #d0d0d0; }
.lb-medal-3 { background: rgba(176,120,64,0.2);   border: 1px solid #906040; color: #c88850; }

.lb-rank-num {
    font-size: 11px;
    font-weight: 700;
    color: #383028;
}

.lb-player {
    font-size: 12px;
    font-weight: 600;
    color: #c8b888;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-row.is-self .lb-player { color: #e8d0a0; }

.lb-you-tag {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(192, 150, 60, 0.2);
    border: 1px solid rgba(192, 150, 60, 0.4);
    color: #c0963c;
    padding: 1px 5px;
    flex-shrink: 0;
}

.lb-value {
    font-size: 11px;
    font-weight: 700;
    color: #7a6840;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.lb-row.lb-gold   .lb-value { color: #c8a040; }
.lb-row.lb-silver .lb-value { color: #909090; }
.lb-row.lb-bronze .lb-value { color: #a07040; }

.lb-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 11px;
    color: #3a3028;
    font-style: italic;
}

.lb-row.lb-anon .lb-player { color: #3a3028; font-style: italic; }
.lb-row.lb-anon .lb-value  { color: #2a2020; }

/* ── Crew board ───────────────────────────────────────────────── */
.lb-crew-board { padding: 0; overflow: hidden; border-color: #1e1a14; }

.lb-crew-table-wrap { overflow-x: auto; }

.lb-crew-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.lb-crew-table th {
    padding: 9px 14px;
    background: #090806;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4a4030;
    text-align: left;
    border-bottom: 1px solid #1a1612;
    white-space: nowrap;
}

.lb-th-pos { width: 50px; text-align: center; }

.lb-crew-row td {
    padding: 10px 14px;
    border-bottom: 1px solid #0e0c08;
    color: #8a7860;
    vertical-align: middle;
}

.lb-crew-row:last-child td { border-bottom: none; }
.lb-crew-row:hover td      { background: rgba(255,255,255,0.015); }
.lb-crew-row.lb-gold   td  { background: rgba(200,160,50,0.05); }
.lb-crew-row.lb-silver td  { background: rgba(160,160,160,0.03); }
.lb-crew-row.lb-bronze td  { background: rgba(160,110,50,0.03); }

.lb-crew-pos { text-align: center; }

.lb-crew-name {
    font-weight: 700;
    color: #c8b888;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lb-crew-name:hover { color: #e8d8a8; text-decoration: underline; }

.lb-crew-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #1a1612;
    border: 1px solid #2a2018;
    color: #8a7040;
    padding: 2px 6px;
}

.lb-crew-leader  { color: #7a6850; }
.lb-crew-members { color: #7a6850; font-variant-numeric: tabular-nums; }
.lb-crew-members span { color: #3a3028; }
.lb-crew-respect { font-weight: 700; color: #c0a050; font-variant-numeric: tabular-nums; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 960px) {
    .lb-boards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .lb-boards-grid      { grid-template-columns: 1fr; }
    .lb-header-inner     { flex-direction: column; }
    .lb-privacy-toggles  { flex-direction: column; }
}

/* ================================================================
   SCROLLBARS
   ================================================================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #0e0e0e;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

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

/* ================================================================
   PAGE HEADINGS
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 8px;
    line-height: 1.2;
}

/* Page-level section title (use .page-title class) */
.page-title {
    font-family: var(--font-title);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-main);
}

/* ================================================================
   IDENTITY / TOPBAR RESOURCE CHIPS
   ================================================================ */
.resource-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1a1a1a;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 600;
    font-family: var(--font-ui);
    white-space: nowrap;
}

.chip-energy { border-color: rgba(217,123,40,0.35); color: var(--energy-color); }
.chip-nerve  { border-color: rgba(200,64,64,0.35);  color: var(--nerve-color); }
.chip-cash   { border-color: rgba(78,166,90,0.35);  color: var(--ok); }
.chip-health { border-color: rgba(78,166,90,0.28);  color: var(--health-color); }

/* ================================================================
   CASINO / CARD GAMES — consistent panel style
   ================================================================ */
.casino-panel,
.game-panel {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 3px;
}

/* ================================================================
   DASHBOARD — Tab shell
   ================================================================ */
.dashboard-tab-shell {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
}

.dashboard-tab-bar {
    display: flex;
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.dashboard-tab-bar::-webkit-scrollbar { display: none; }

/* ================================================================
   MISC UTILITY
   ================================================================ */
.text-ok      { color: var(--ok) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warn    { color: var(--warn) !important; }
.text-dim     { color: var(--text-dim) !important; }
.text-muted   { color: var(--text-muted) !important; }

.sep {
    border: none;
    border-top: 1px solid var(--line);
    margin: 0;
}

/* Rank progress bar */
.rank-progress-bar {
    height: 6px;
    background: #282828;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.rank-progress-fill {
    height: 100%;
    background: var(--respect-color);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================ */
@media (max-width: 900px) {
    .activity-card.crime-row {
        grid-template-columns: 36px 1fr;
        grid-template-areas:
            "img  main"
            "img  reqs"
            "stats stats"
            "action action";
        padding: 10px 12px;
    }

    .row-action {
        grid-area: action;
        grid-row: auto;
        justify-content: flex-start;
        padding-top: 6px;
    }

    .activity-card.crime-row .row-stats {
        grid-area: stats;
        border-top: 1px solid var(--line);
        padding-top: 6px;
        margin-top: 4px;
    }

    .availability-tag {
        position: static;
        margin-top: 4px;
        display: inline-flex;
    }
}


/* ================================================================
   LANDING PAGE — THE GANGSTER'S ULTIMATUM
   Guest-facing marketing / sign-up page
   ================================================================ */

/* Override app-shell padding so the hero runs edge-to-edge */
.app-shell:has(.landing-page) {
    padding: 0;
}

.landing-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #0e0e0e;
}

/* ================================================================
   HERO
   ================================================================ */
.landing-hero {
    position: relative;
    padding: 80px 40px 64px;
    text-align: center;
    overflow: hidden;
    background: #0e0e0e;
    border-bottom: 1px solid #1e1e1e;
}

/* Dot grid background */
.hero-bg-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #252525 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.5;
    pointer-events: none;
}

/* Green tint glow from top */
.hero-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 35% at 50% 0%, rgba(78,166,90,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 25% at 15% 60%, rgba(30,30,60,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}

.hero-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 18px;
}

.hero-title {
    font-family: var(--font-title);
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #e8e8e8;
    margin: 0 0 10px;
}

.hero-title-accent {
    display: block;
    color: var(--ok);
}

.hero-tagline {
    font-size: clamp(13px, 2vw, 15px);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 auto 32px;
    max-width: 520px;
}

.hero-br {
    display: none;
}

@media (min-width: 700px) {
    .hero-br { display: inline; }
}

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    font-size: 13px;
    font-weight: 700;
    padding: 11px 28px;
    background: var(--ok);
    border: 1px solid var(--ok);
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: background 0.12s, border-color 0.12s;
    display: inline-block;
    font-family: var(--font-ui);
}

.btn-hero-primary:hover {
    background: #3d8a49;
    border-color: #3d8a49;
    color: #fff;
}

.btn-hero-ghost {
    font-size: 13px;
    font-weight: 600;
    padding: 10px 24px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text-muted);
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: border-color 0.12s, color 0.12s;
    display: inline-block;
    font-family: var(--font-ui);
}

.btn-hero-ghost:hover {
    border-color: var(--accent-hi);
    color: var(--text-main);
}

/* Rank ladder — decorative pill track on the side */
.hero-rank-ladder {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    z-index: 1;
}

.rank-pip {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: #171717;
    border: 1px solid #252525;
    padding: 3px 8px;
    border-radius: 2px;
    white-space: nowrap;
}

.rank-pip-hi {
    color: var(--text-muted);
    border-color: #333;
}

.rank-pip-top {
    color: var(--ok);
    border-color: rgba(78, 166, 90, 0.3);
    background: rgba(78, 166, 90, 0.07);
}

@media (max-width: 860px) {
    .hero-rank-ladder { display: none; }
    .landing-hero { padding: 60px 20px 48px; }
}

/* ================================================================
   LIVE STATS BAR
   ================================================================ */
.landing-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #131313;
    border-bottom: 1px solid var(--line);
    padding: 12px 24px;
    flex-wrap: wrap;
}

.lstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 28px;
    gap: 2px;
}

.lstat strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
    line-height: 1;
}

.lstat span {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin-top: 2px;
}

.lstat-cash strong {
    color: var(--ok);
}

.lstat-live-dot {
    font-size: 11px !important;
    color: var(--ok) !important;
    letter-spacing: 0.08em !important;
}

.lstat-sep {
    width: 1px;
    height: 32px;
    background: var(--line);
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .lstat-sep { display: none; }
    .lstat { padding: 6px 16px; }
}

/* ================================================================
   FEATURES CAROUSEL
   ================================================================ */
.landing-features-wrap {
    background: #111;
    border-bottom: 1px solid var(--line);
}

.landing-features-head {
    padding: 28px 24px 8px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.landing-features-kicker {
    margin: 0 0 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a7868;
}

.landing-features-title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f0e4d4;
}

.landing-features-lead {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

.feature-carousel {
    padding: 16px 24px 28px;
    max-width: 860px;
    margin: 0 auto;
}

.feature-carousel-shell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-carousel-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #141414;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.feature-carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.feature-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    min-height: 300px;
    border: none;
    opacity: 0.45;
    transform: scale(0.985);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.feature-carousel-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.feature-carousel-arrow {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    color: #d8d0c4;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.feature-carousel-arrow:hover {
    background: #252525;
    border-color: #5a5048;
    color: #f2ead8;
    transform: scale(1.04);
}

.feature-carousel-arrow:active {
    transform: scale(0.96);
}

.feature-carousel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 0 54px;
}

.feature-carousel-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.feature-carousel-dot.is-active {
    background: var(--ok);
    transform: scale(1.25);
}

.feature-carousel-dot:hover {
    background: #666;
}

.feature-carousel-count {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    white-space: nowrap;
}

.feature-card {
    padding: 28px 24px;
    position: relative;
}

.feature-card:hover {
    background: #161616;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ok);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.feature-carousel-slide.is-active::before,
.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-num {
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: 700;
    color: #222;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: 0.04em;
}

.feature-card h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.feature-card > p {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 14px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.feature-list li {
    font-size: 10.5px;
    color: var(--text-dim);
    padding-left: 14px;
    position: relative;
    line-height: 1.4;
}

.feature-list li::before {
    content: "\203A";
    position: absolute;
    left: 0;
    color: var(--ok);
    font-size: 12px;
    line-height: 1.3;
}

@media (max-width: 1000px) {
    .feature-carousel-footer {
        padding: 0 48px;
    }
}

@media (max-width: 600px) {
    .landing-features-head {
        padding: 22px 16px 6px;
        text-align: left;
    }
    .feature-carousel {
        padding: 12px 16px 22px;
    }
    .feature-carousel-shell {
        gap: 8px;
    }
    .feature-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    .feature-carousel-slide {
        min-height: 320px;
        padding: 22px 18px;
    }
    .feature-carousel-footer {
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-carousel-track,
    .feature-carousel-slide {
        transition: none;
    }
}

/* ================================================================
   AUTH SECTION
   ================================================================ */
.landing-auth {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 0;
    background: #0f0f0f;
    border-bottom: 1px solid var(--line);
    align-items: start;
}

/* Left pitch column */
.auth-pitch-col {
    padding: 48px 40px;
    border-right: 1px solid var(--line);
}

.auth-pitch-title {
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-main);
    margin: 0 0 10px;
}

.auth-pitch-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 28px;
    max-width: 440px;
}

.auth-pitch-points {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.pitch-point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.pitch-check {
    color: var(--ok);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    flex-shrink: 0;
}

.auth-pitch-ranks {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rank-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: #1a1a1a;
    border: 1px solid var(--line-strong);
    color: var(--text-dim);
    border-radius: 2px;
}

.rank-badge-top {
    background: rgba(78, 166, 90, 0.08);
    border-color: rgba(78, 166, 90, 0.3);
    color: var(--ok);
}

.rank-arrow {
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1;
}

/* Right auth card */
.auth-card {
    background: #141414;
    border-left: 1px solid var(--line);
    height: 100%;
}

.auth-card-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
}

.auth-card-tab {
    flex: 1;
    text-align: center;
    padding: 13px 16px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.1s, border-color 0.1s;
    background: #111;
}

.auth-card-tab:hover {
    color: var(--text-muted);
}

.auth-card-tab.active {
    color: var(--ok);
    border-bottom-color: var(--ok);
    background: #141414;
}

.auth-card-body {
    padding: 28px 28px 32px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-field label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.auth-field input,
.auth-field textarea {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid var(--line-strong);
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 3px;
    outline: none;
    transition: border-color 0.12s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.auth-field input:focus,
.auth-field textarea:focus {
    border-color: var(--ok);
}

.btn-auth-submit {
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 20px;
    letter-spacing: 0.07em;
    background: var(--ok);
    border: 1px solid var(--ok);
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    font-family: var(--font-ui);
    margin-top: 4px;
    display: block;
    text-align: center;
    text-decoration: none;
}

.btn-auth-submit:hover {
    background: #3d8a49;
    border-color: #3d8a49;
}

.auth-switch {
    margin: 14px 0 0;
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
}

.auth-switch a {
    color: var(--ok);
}

/* Alert overrides inside auth form */
.auth-card-body .alert {
    padding: 9px 12px;
    font-size: 11.5px;
    border-radius: 3px;
    margin-bottom: 4px;
}

.alert-error,
.alert-danger {
    background: rgba(200, 64, 64, 0.08);
    border: 1px solid rgba(200, 64, 64, 0.28);
    color: #e09090;
}

.alert-success {
    background: rgba(78, 166, 90, 0.08);
    border: 1px solid rgba(78, 166, 90, 0.28);
    color: #8fd898;
}

.alert-info {
    background: rgba(90, 140, 200, 0.08);
    border: 1px solid rgba(90, 140, 200, 0.28);
    color: #90b8e0;
}

/* Ban appeal box */
.ban-appeal-box {
    margin-top: 20px;
    padding: 14px;
    background: rgba(200, 64, 64, 0.05);
    border: 1px solid rgba(200, 64, 64, 0.2);
    border-radius: 3px;
}

.ban-appeal-box h4 {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--danger);
    margin: 0 0 10px;
}

.ban-appeal-box .meta {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 5px;
    padding: 0;
    border: none;
}

@media (max-width: 860px) {
    .landing-auth {
        grid-template-columns: 1fr;
    }
    .auth-pitch-col {
        padding: 32px 20px;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .auth-card {
        border-left: none;
    }
    .auth-card-body {
        padding: 20px 20px 28px;
    }
}

/* ================================================================
   LANDING FOOTER STRIP
   ================================================================ */
.landing-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 24px 18px;
    background: #0e0e0e;
    font-size: 10px;
    color: var(--text-dim);
}

.landing-footer-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.landing-footer-legal {
    text-align: center;
    max-width: 640px;
    line-height: 1.55;
}

.landing-footer-legal p {
    margin: 0;
}

.landing-footer-legal p + p {
    margin-top: 4px;
}

.landing-footer-legal strong {
    color: #b8b0a4;
    font-weight: 600;
}

.landing-footer a {
    color: var(--ok);
}

.footer-sep {
    color: #333;
}


/* ================================================================
   SITE-WIDE POLISH v2
   Overrides old warm-gold remnants with the dark gaming theme.
   Covers: buttons, forms, tables, alerts, panels, dashboard,
           links, meters, nav, badges, status tags.
   ================================================================ */

/* ----------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------- */
.btn {
    background: #252525;
    border: 1px solid #3a3a3a;
    color: #d0d0d0;
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--font-ui);
    padding: 7px 14px;
    border-radius: 3px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.btn:hover {
    background: #303030;
    border-color: #505050;
    color: #f0f0f0;
    filter: none;
    text-decoration: none;
}

/* Primary (green) */
.btn.btn-primary,
button.btn-primary,
a.btn-primary {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

.btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: #3d8a49;
    border-color: #3d8a49;
    color: #fff;
}

/* Ghost / outlined */
.btn-ghost,
.btn.btn-ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--text-muted);
}

.btn-ghost:hover,
.btn.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent-hi);
    color: var(--text-main);
    filter: none;
}

/* Danger */
.btn-danger,
.btn.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-danger:hover,
.btn.btn-danger:hover {
    background: #a83535;
    border-color: #a83535;
    filter: none;
}

/* Small */
.btn-sm,
.btn.btn-sm {
    font-size: 10px;
    padding: 4px 10px;
    letter-spacing: 0.04em;
}

/* Disabled */
.btn:disabled,
button:disabled,
input[type="submit"]:disabled {
    background: #1c1c1c;
    border-color: var(--line);
    color: var(--text-dim);
    cursor: not-allowed;
    filter: none;
    pointer-events: none;
}

/* Row-action buttons (inside activity cards) */
.row-action .btn,
.row-action button {
    min-width: 90px;
    text-align: center;
}

.row-action .btn:not(:disabled):hover {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

/* ----------------------------------------------------------------
   LINKS
   ---------------------------------------------------------------- */
.panel a {
    color: var(--ok);
    text-decoration: none;
}

.panel a:visited {
    color: var(--ok);
}

.panel a:hover {
    color: #6fcf7e;
    text-decoration: underline;
}

.panel a.btn,
.panel a.btn:hover {
    text-decoration: none;
}

.link-muted,
.link-muted:visited {
    color: var(--text-muted);
    text-decoration: none;
}

.link-muted:hover {
    color: var(--text-main);
    text-decoration: underline;
}

/* ----------------------------------------------------------------
   FORMS � inputs, selects, textareas, labels
   ---------------------------------------------------------------- */
input,
textarea,
select {
    background: var(--bg-input);
    border: 1px solid var(--line-strong);
    color: var(--text-main);
    padding: 8px 10px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    border-radius: 3px;
    outline: none;
    transition: border-color 0.12s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--ok);
    box-shadow: 0 0 0 2px rgba(78, 166, 90, 0.12);
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555555'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.5;
}

label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 4px;
}

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inline-form label {
    margin-bottom: 0;
}

input[type="submit"],
button[type="submit"] {
    background: var(--ok);
    border: 1px solid var(--ok);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 7px 20px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    border-radius: 3px;
    font-family: var(--font-ui);
    text-transform: uppercase;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background: #3d8a49;
    border-color: #3d8a49;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    -webkit-appearance: auto;
    appearance: auto;
    accent-color: var(--ok);
}

input[type="number"],
input[type="range"] {
    width: auto;
}

/* ----------------------------------------------------------------
   TABLES
   ---------------------------------------------------------------- */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 8px 12px;
    text-align: left;
    font-size: 11.5px;
    border: none;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    line-height: 1.4;
}

.table th {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: var(--bg-header);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}

.table thead {
    background: var(--bg-header);
}

.table tbody tr:hover {
    background: var(--bg-row-hover);
}

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

/* ----------------------------------------------------------------
   ACTION TOOLBAR
   ---------------------------------------------------------------- */
.action-toolbar {
    background: var(--bg-header);
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-toggle {
    color: var(--text-muted);
    font-size: 11px;
}

.filter-toggle input[type="checkbox"] {
    accent-color: var(--ok);
}

/* ----------------------------------------------------------------
   FLASH ALERTS
   ---------------------------------------------------------------- */
.alert {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 3px;
    margin: 10px 0;
    min-height: 0;
    border: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    text-align: left;
    line-height: 1.5;
    justify-content: flex-start;
}

.alert-success {
    background: rgba(78, 166, 90, 0.07);
    border-color: rgba(78, 166, 90, 0.3);
    color: #8fd898;
}

.alert-error,
.alert-danger {
    background: rgba(200, 64, 64, 0.07);
    border-color: rgba(200, 64, 64, 0.3);
    color: #e09090;
}

.alert-info {
    background: rgba(90, 140, 200, 0.07);
    border-color: rgba(90, 140, 200, 0.3);
    color: #90b8e0;
}

.alert-warn,
.alert-warning {
    background: rgba(200, 144, 48, 0.07);
    border-color: rgba(200, 144, 48, 0.3);
    color: #d8a84a;
}

/* ----------------------------------------------------------------
   METERS � override old gold gradient
   ---------------------------------------------------------------- */
.meter {
    width: 100%;
    height: 6px;
    background: #282828;
    border: none;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    margin-top: 0;
}

.meter > span {
    display: block;
    height: 100%;
    background: var(--ok);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.meter.odds > span {
    background: var(--warn);
}

/* ----------------------------------------------------------------
   STATUS / AVAILABILITY TAGS
   ---------------------------------------------------------------- */
.availability-tag,
.status-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    border: 1px solid var(--line-strong);
    background: #1e1e1e;
    color: var(--text-dim);
}

.availability-tag.is-ready,
.status-tag.is-active {
    background: rgba(78, 166, 90, 0.1);
    border-color: rgba(78, 166, 90, 0.3);
    color: var(--ok);
}

.availability-tag.is-unavailable,
.status-tag.is-jailed {
    background: rgba(200, 64, 64, 0.08);
    border-color: rgba(200, 64, 64, 0.25);
    color: #d07070;
}

.availability-tag.is-cooling,
.status-tag.is-hospital {
    background: rgba(200, 144, 48, 0.08);
    border-color: rgba(200, 144, 48, 0.25);
    color: var(--warn);
}

/* ----------------------------------------------------------------
   PAGE TITLES
   ---------------------------------------------------------------- */
.page-title,
h1.page-title {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-main);
    margin: 0 0 14px;
}

/* ----------------------------------------------------------------
   PANEL INNER ELEMENTS
   ---------------------------------------------------------------- */
.panel > h2,
.panel > h3,
.panel > h4 {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 14px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
    border-radius: 2px 2px 0 0;
    margin: 0;
}

/* Crew sub-panels and nested panels */
.crew-subpanel {
    background: var(--bg-panel-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    margin-bottom: 10px;
    overflow: hidden;
}

.crew-subpanel > h3 {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 8px 12px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
    margin: 0;
}

/* ----------------------------------------------------------------
   DASHBOARD
   ---------------------------------------------------------------- */
.dashboard-hero {
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0;
}

.dashboard-hero-head {
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
}

.dashboard-identity .dashboard-kicker {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 3px;
}

.dashboard-identity strong {
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 2px;
}

.dashboard-identity > span,
.dashboard-identity span:not(.dashboard-kicker) {
    font-size: 11px;
    color: var(--text-muted);
}

/* Stat row inside hero */
.dashboard-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--line);
}

.dashboard-hero-stats .stat-card {
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--line);
    padding: 14px 16px;
    background: var(--bg-panel);
}

.dashboard-hero-stats .stat-card:last-child {
    border-right: none;
}

.dashboard-hero-stats .stat-card > span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 6px;
}

.dashboard-hero-stats .stat-card > strong {
    font-size: 21px;
    font-weight: 700;
    color: var(--ok);
    letter-spacing: -0.02em;
    display: block;
}

/* Resource meters row */
.dashboard-command-resources {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.dashboard-command-resource {
    padding: 10px 14px;
    border-right: 1px solid var(--line);
}

.dashboard-command-resource:last-child {
    border-right: none;
}

.dashboard-resource-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.dashboard-resource-head span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.dashboard-resource-head strong {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Meter fill colors */
.dashboard-meter-energy > span { background: var(--energy-color); }
.dashboard-meter-nerve > span  { background: var(--nerve-color); }
.dashboard-meter-health-high > span { background: var(--health-color); }
.dashboard-meter-health-mid  > span { background: var(--warn); }
.dashboard-meter-health-low  > span { background: var(--danger); }

/* Rank progress bar */
.dashboard-rank-progress {
    margin-top: 6px;
}

.dashboard-rank-progress-meter {
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background: #282828;
    margin-bottom: 4px;
}

.dashboard-rank-progress-meter > span {
    display: block;
    height: 100%;
    background: var(--respect-color);
    border-radius: 2px;
    transition: width 0.35s ease;
}

.dashboard-rank-progress small {
    font-size: 9.5px;
    color: var(--text-dim);
    display: block;
    line-height: 1.4;
}

/* Dashboard section groups */
.dashboard-group {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.dashboard-group > h3,
.dashboard-group > h2 {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 9px 14px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
    margin: 0;
    font-family: var(--font-ui);
}

.dashboard-note {
    font-size: 11px;
    color: var(--text-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    line-height: 1.5;
    margin: 0;
}

/* Economy KPI layout */
.economy-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--line);
}

.economy-kpi-card {
    background: var(--bg-panel);
    border: none;
    border-right: 1px solid var(--line);
    border-radius: 0;
    padding: 12px 14px;
}

.economy-kpi-card:last-child {
    border-right: none;
}

/* ----------------------------------------------------------------
   STAT CARDS (generic, 272 uses)
   ---------------------------------------------------------------- */
.stat-card {
    background: var(--bg-panel-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 12px 14px;
    box-shadow: none;
}

.stat-card > span,
.stat-card .stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 5px;
}

.stat-card > strong,
.stat-card .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
    display: block;
    line-height: 1.1;
}

.stat-card .stat-sub {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Stats container (wraps multiple stat-cards) */
.stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
}

/* ----------------------------------------------------------------
   MISC SHARED COMPONENTS
   ---------------------------------------------------------------- */

/* meta text rows */
.meta {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

p.meta,
.panel .meta {
    padding: 6px 14px;
    border-bottom: 1px solid var(--line);
    margin: 0;
}

/* Status dot */
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 5px rgba(78, 166, 90, 0.6);
}

/* Online list box */
.online-list-box {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    padding: 9px 12px;
    border-radius: 3px;
    margin-bottom: 10px;
}

/* chip buttons (casino) */
.chip-btn {
    background: #222;
    border: 1px solid var(--line-strong);
    color: var(--text-muted);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    font-family: var(--font-ui);
}

.chip-btn:hover,
.chip-btn.is-active {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

/* Two-col layout */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 720px) {
    .two-col {
        grid-template-columns: 1fr;
    }
    .dashboard-hero-stats,
    .dashboard-command-resources {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-command-resources .dashboard-command-resource:nth-child(2) {
        border-right: none;
    }
}

@media (max-width: 480px) {
    .dashboard-hero-stats,
    .dashboard-command-resources {
        grid-template-columns: 1fr;
    }
    .dashboard-hero-stats .stat-card,
    .dashboard-command-resource {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
}


/* ================================================================
   DASHBOARD v2 � Compact dark layout
   Max body text 11px. Display values up to 15px.
   ================================================================ */

/* ----------------------------------------------------------------
   STATUS BANNERS
   ---------------------------------------------------------------- */
.db-status-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
    margin-bottom: 8px;
    background: rgba(200, 64, 64, 0.07);
    border: 1px solid rgba(200, 64, 64, 0.25);
    color: #d07070;
}

.db-status-banner.db-banner-hospital {
    background: rgba(200, 144, 48, 0.07);
    border-color: rgba(200, 144, 48, 0.25);
    color: var(--warn);
}

.db-status-banner.db-banner-muted {
    background: rgba(90, 110, 160, 0.07);
    border-color: rgba(90, 110, 160, 0.25);
    color: #8898c0;
}

.db-status-banner .btn-sm {
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   HERO STRIP
   ---------------------------------------------------------------- */
.db-hero {
    display: grid;
    grid-template-columns: auto 1fr 1fr 260px;
    gap: 0;
    margin-bottom: 0;
    border-radius: 3px;
    overflow: hidden;
}

.db-hero > div {
    padding: 12px 16px;
    border-right: 1px solid var(--line);
}

.db-hero > div:last-child {
    border-right: none;
}

/* Identity */
.db-hero-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 160px;
    background: var(--bg-header);
}

.db-kicker {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 4px;
}

.db-name {
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 2px;
    line-height: 1.1;
}

.db-rank-label {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
}

.db-pos {
    color: var(--text-dim);
    font-size: 9px;
}

/* Money / Respect cells */
.db-hero-money,
.db-hero-respect {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.db-hero-money > span,
.db-hero-respect > span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 3px;
}

.db-hero-money > strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--ok);
    letter-spacing: -0.01em;
    display: block;
}

.db-hero-respect > strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--respect-color);
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 5px;
}

/* Rank progress bar */
.db-rank-progress {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.db-rank-bar {
    height: 3px;
    background: #282828;
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}

.db-rank-bar > span {
    display: block;
    height: 100%;
    background: var(--respect-color);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.db-rank-progress small {
    font-size: 9px;
    color: var(--text-dim);
    line-height: 1.3;
}

/* Resource meters column */
.db-hero-meters {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    background: var(--bg-header);
}

.db-meter-row {
    display: grid;
    grid-template-columns: 26px 1fr 42px;
    align-items: center;
    gap: 7px;
}

.db-meter-row > span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: right;
}

.db-meter-bar {
    height: 5px;
    border-radius: 2px;
}

.db-meter-row > strong {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

/* ----------------------------------------------------------------
   MAIN 2-COLUMN GRID
   ---------------------------------------------------------------- */
.db-main-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 10px;
    margin-bottom: 10px;
    align-items: start;
}

/* ----------------------------------------------------------------
   ECONOMY PANEL
   ---------------------------------------------------------------- */
.db-economy-panel {
    overflow: hidden;
    padding: 0;
}

.db-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--line);
}

.db-kpi {
    padding: 10px 14px;
    border-right: 1px solid var(--line);
}

.db-kpi:last-child {
    border-right: none;
}

.db-kpi > span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 4px;
}

.db-kpi > strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
    display: block;
    line-height: 1.1;
    margin-bottom: 2px;
}

.db-kpi > small {
    font-size: 9px;
    color: var(--text-dim);
    display: block;
}

.db-trend {
    font-size: 9px !important;
    font-weight: 600;
}

.db-trend.is-up   { color: var(--ok) !important; }
.db-trend.is-down { color: var(--danger) !important; }
.db-trend.is-flat { color: var(--text-dim) !important; }

/* Economy flow lanes */
.db-lanes {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.db-lane {
    padding: 7px 14px;
    border-bottom: 1px solid var(--line);
}

.db-lane:last-child {
    border-bottom: none;
}

.db-lane-head {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 4px;
}

.db-lane-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    width: 40%;
    flex: none;
}

.db-lane-share {
    font-size: 9px;
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 0.04em;
    width: 20%;
    text-align: center;
}

.db-lane-val {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ok);
    width: 20%;
    text-align: center;
}

.db-lane-trend {
    font-size: 9px;
    font-weight: 600;
    width: 20%;
    text-align: center;
}

.db-lane-trend.is-up   { color: var(--ok); }
.db-lane-trend.is-down { color: var(--danger); }
.db-lane-trend.is-flat { color: var(--text-dim); }

.db-lane-bar {
    height: 3px;
    background: #242424;
    border-radius: 2px;
    overflow: hidden;
}

.db-lane-bar > span {
    display: block;
    height: 100%;
    background: rgba(78, 166, 90, 0.5);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Economy pulse tag colours */
.panel-tag.is-hot    { background: rgba(200,64,64,0.1); border-color: rgba(200,64,64,0.3); color: #d07070; }
.panel-tag.is-warm   { background: rgba(200,144,48,0.1); border-color: rgba(200,144,48,0.3); color: var(--warn); }
.panel-tag.is-cool   { background: rgba(78,166,90,0.1); border-color: rgba(78,166,90,0.3); color: var(--ok); }
.panel-tag.is-vacant { background: rgba(100,100,120,0.1); border-color: rgba(100,100,120,0.3); color: var(--text-dim); }

/* ----------------------------------------------------------------
   ASIDE / SIDEBAR COLUMN
   ---------------------------------------------------------------- */
.db-aside-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Quick links grid */
.db-ql-panel {
    overflow: hidden;
}

.db-ql-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.db-ql {
    display: block;
    padding: 7px 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background 0.1s, color 0.1s;
    letter-spacing: 0.02em;
}

.db-ql:nth-child(2n) {
    border-right: none;
}

.db-ql:nth-last-child(-n+2) {
    border-bottom: none;
}

.db-ql:hover {
    background: var(--bg-row-hover);
    color: var(--ok);
    text-decoration: none;
}

/* State Don intel */
.db-don-panel {
    overflow: hidden;
    padding: 0;
}

.db-intel-list {
    display: flex;
    flex-direction: column;
}

.db-intel-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 10.5px;
}

.db-intel-row:last-child {
    border-bottom: none;
}

.db-intel-row > span {
    font-size: 9.5px;
    color: var(--text-dim);
    flex: 1;
}

.db-intel-row > strong {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    text-align: right;
}

.db-vacant {
    font-style: normal;
    color: var(--text-dim);
}

.db-hot  { color: var(--danger) !important; }
.db-warn { color: var(--warn) !important; }

.db-don-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    background: var(--bg-header);
}

.db-levy-form {
    display: flex;
    align-items: center;
}

.db-levy-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-levy-row input[type="number"] {
    width: 72px;
    padding: 5px 7px;
    font-size: 11px;
}

/* ----------------------------------------------------------------
   OPERATION LEDGER
   ---------------------------------------------------------------- */
.db-ledger {
    overflow: hidden;
    padding: 0;
}

.db-ledger-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px;
}

.db-stat-group {
    border: 1px solid var(--line);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.db-stat-group:last-child {
    border-right: 1px solid var(--line);
}

/* No border adjustments needed with gap layout */
.db-ledger-grid .db-stat-group:nth-child(4n) {
    border-right: 1px solid var(--line);
}

.db-stat-group-head {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 7px 12px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
}

.db-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    border-bottom: 1px solid var(--line);
    gap: 8px;
}

.db-stat-row:last-child {
    border-bottom: none;
}

.db-stat-row > span {
    font-size: 10px;
    color: var(--text-dim);
    flex: 1;
}

.db-stat-row > strong {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    text-align: right;
    white-space: nowrap;
}

.db-stat-row.is-money > strong {
    color: var(--ok);
}

.db-stat-group--compact .db-stat-group-head {
    padding-left: 8px;
    padding-right: 8px;
}

.db-stat-group--compact .db-stat-row {
    padding-left: 8px;
    padding-right: 8px;
}

/* Casino compact: name + net only, hover expands details */
.db-casino-table {
    flex: 1;
}

.db-ct-row {
    border-bottom: 1px solid var(--line);
    cursor: default;
}

.db-ct-row:last-child {
    border-bottom: none;
}

.db-ct-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    gap: 8px;
}

.db-ct-game {
    font-size: 10px;
    color: var(--text-muted);
}

.db-ct-row-main > strong {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

.db-ct-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.15s ease;
    background: var(--bg-header);
    border-top: 0px solid var(--line);
}

.db-ct-row:hover .db-ct-details {
    max-height: 80px;
    border-top-width: 1px;
}

.db-ct-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 16px;
    gap: 8px;
}

.db-ct-detail-row span {
    font-size: 9px;
    color: var(--text-dim);
}

.db-ct-detail-row strong {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

.db-ct-detail-row .is-money {
    color: var(--ok);
}

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 1100px) {
    .db-ledger-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .db-ledger-grid .db-stat-group:nth-child(4n) {
        border-right: 1px solid var(--line);
    }
    .db-ledger-grid .db-stat-group:nth-child(3n) {
        border-right: none;
    }
}

@media (max-width: 900px) {
    .db-hero {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .db-hero-identity { grid-column: 1 / 3; border-bottom: 1px solid var(--line); border-right: none; }
    .db-hero-meters   { grid-column: 1 / 3; border-right: none; }
    .db-main-grid     { grid-template-columns: 1fr; }
    .db-aside-col     { flex-direction: row; flex-wrap: wrap; }
    .db-aside-col .panel { flex: 1 1 200px; }
    .db-kpi-row       { grid-template-columns: repeat(2, 1fr); }
    .db-ledger-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .db-hero { grid-template-columns: 1fr; }
    .db-hero > div { border-right: none; border-bottom: 1px solid var(--line); }
    .db-hero-identity { grid-column: auto; }
    .db-hero-meters   { grid-column: auto; }
    .db-kpi-row       { grid-template-columns: 1fr 1fr; }
    .db-ledger-grid   { grid-template-columns: 1fr 1fr; }
    .db-ql-grid       { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   COMMAND PROFILE (dashboard v3) + CITY HALL
   ================================================================ */

/* ----------------------------------------------------------------
   HERO PANEL � 3 zones
   ---------------------------------------------------------------- */
.cp-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-hero {
    display: grid;
    grid-template-columns: 270px 1fr 300px;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.cp-hero > div {
    padding: 18px 20px;
    border-right: 1px solid var(--line);
}

.cp-hero > div:last-child {
    border-right: none;
}

/* Zone 1: Identity */
.cp-identity {
    background: var(--bg-header);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Suppress the global .panel a:hover underline inside hero/loadout */
.cp-hero a:hover,
.cp-loadout a:hover {
    text-decoration: none;
}

.cp-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
}

.cp-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.03em;
    line-height: 1.1;
    display: block;
}

.cp-rank-line {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
}

.cp-pos {
    color: var(--text-dim);
    font-size: 10px;
}

/* Identity — redesigned sub-components */
.cp-id-kicker {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 12px;
}

.cp-id-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cp-id-avatar {
    width: 46px;
    height: 46px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    letter-spacing: 0.02em;
    overflow: hidden;
}

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

.cp-id-name-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.cp-id-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ok);
    background: rgba(78, 166, 90, 0.1);
    border: 1px solid rgba(78, 166, 90, 0.22);
    padding: 2px 8px;
    border-radius: 3px;
    width: fit-content;
    white-space: nowrap;
}

.cp-id-rank-badge em {
    font-style: normal;
    color: var(--text-dim);
    font-size: 9px;
}

.cp-id-respect {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    margin-top: auto;
}

.cp-id-resp-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cp-id-resp-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.cp-id-resp-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.cp-id-next {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 9px;
    color: var(--text-dim);
}

.cp-respect-block {
    margin-top: 6px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.cp-respect-num {
    font-size: 16px;
    font-weight: 700;
    color: var(--ok);
    letter-spacing: -0.01em;
}

.cp-respect-tag {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cp-progress-wrap {
    margin-top: 8px;
}

.cp-progress-bar {
    height: 3px;
    background: #252525;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.cp-progress-bar > span {
    display: block;
    height: 100%;
    background: var(--ok);
    border-radius: 2px;
    transition: width 0.6s ease;
}

.cp-progress-text {
    font-size: 9.5px;
    color: var(--text-dim);
    display: block;
    line-height: 1.4;
}

/* Zone 2: Cash */
.cp-cash-block {
    background: var(--bg-header);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
}

.cp-cash-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--ok);
    letter-spacing: -0.02em;
    display: block;
    line-height: 1;
}

.cp-cash-bank {
    font-size: 10px;
    color: var(--text-dim);
    display: block;
    margin-top: 4px;
}

.cp-cash-link {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.15s;
    display: block;
}

.cp-cash-link:hover {
    color: var(--ok);
    text-decoration: none;
}

/* Cash nav rows (Bank / City Hall) */
.cp-cash-links {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.cp-cash-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    text-decoration: none;
    color: var(--text-dim);
    transition: color 0.15s;
}

.cp-cash-link-row span:last-child {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
}

.cp-cash-link-row:hover { color: var(--ok); text-decoration: none; }

/* 2-column row (no bar — for RANK, TREAS etc) */
.cp-rank-row { grid-template-columns: 28px 1fr; }

.cp-rank-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--ok);
    text-align: right;
}

.cp-rank-text .cp-pos { color: var(--text-dim); font-size: 10px; }

/* Zone 3: Resources */
.cp-resources {
    background: var(--bg-header);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
}

.cp-res-row {
    display: grid;
    grid-template-columns: 28px 1fr 52px;
    align-items: center;
    gap: 8px;
}

.cp-res-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: right;
}

.cp-res-track {
    height: 6px;
    border-radius: 3px;
}

.cp-res-val {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

.cp-res-sep {
    color: var(--text-dim);
    margin: 0 1px;
}

/* Tick row */
.cp-tick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
    margin-top: 2px;
}

.cp-tick-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.cp-tick-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--warn);
    font-variant-numeric: tabular-nums;
    min-width: 30px;
}

.cp-tick-regen {
    font-size: 9px;
    color: var(--text-dim);
    margin-left: auto;
}

/* ----------------------------------------------------------------
   QUICK ACTIONS STRIP
   ---------------------------------------------------------------- */
.cp-actions-strip {
    display: flex;
    flex-wrap: wrap;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
}

.cp-action {
    display: block;
    padding: 7px 13px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-right: 1px solid var(--line);
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.cp-action:hover {
    background: var(--bg-row-hover);
    color: var(--ok);
    text-decoration: none;
}

/* ----------------------------------------------------------------
   LOADOUT BAR
   ---------------------------------------------------------------- */
.cp-loadout {
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}

.cp-loadout a,
.cp-loadout a:hover {
    text-decoration: none;
}

.cp-lo-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 18px;
    border-right: 1px solid var(--line);
}

.cp-lo-item:last-child {
    border-right: none;
}

.cp-lo-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.cp-lo-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.cp-lo-val.cp-lo-none {
    color: var(--text-dim);
    font-weight: 400;
}

.cp-lo-val.cp-lo-crew-link:hover {
    text-decoration: none;
}

.cp-lo-crew-tag {
    color: var(--text-muted);
    font-size: 11px;
    margin-right: 2px;
}

.cp-lo-sub {
    font-size: 10px;
    color: var(--text-dim);
}

.cp-lo-sub-link {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s;
}

.cp-lo-sub-link:hover {
    color: var(--ok);
}

.cp-lo-ammo {
    color: var(--warn);
}

.cp-lo-integrity {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.cp-lo-integrity.is-low  { color: var(--danger); }
.cp-lo-integrity.is-mid  { color: var(--warn); }

/* ----------------------------------------------------------------
   CITY HALL PAGE
   ---------------------------------------------------------------- */
.city-header-panel {
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
}

.city-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}

.city-page-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.04em;
    margin: 4px 0 4px;
    line-height: 1.1;
}

.city-page-sub {
    font-size: 10px;
    color: var(--text-dim);
    margin: 0;
}

.city-kpi-bar {
    margin-bottom: 10px;
    border-radius: 3px;
}

.city-main-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 10px;
    align-items: start;
}

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 960px) {
    .cp-hero {
        grid-template-columns: 1fr 1fr;
    }
    .cp-identity {
        grid-column: 1 / 3;
        border-bottom: 1px solid var(--line);
        border-right: none;
    }
    .cp-resources {
        border-right: none;
    }
    .city-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .cp-hero {
        grid-template-columns: 1fr;
    }
    .cp-hero > div {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .cp-hero > div:last-child {
        border-bottom: none;
    }
    .cp-identity {
        grid-column: auto;
    }
    .cp-cash-val {
        font-size: 20px;
    }
}

/* ================================================================
   CAR THEFT PAGE � ct-* classes
   ================================================================ */

/* Page header */
.ct-page-header {
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
}

.ct-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.ct-page-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.04em;
    margin: 4px 0 2px;
    line-height: 1.1;
}

.ct-page-sub {
    font-size: 10px;
    color: var(--text-dim);
    margin: 0;
}

/* Stat bar */
.ct-stat-bar {
    display: flex;
    gap: 0;
}

.ct-stat {
    flex: 1;
    padding: 8px 16px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-stat:last-child {
    border-right: none;
}

.ct-stat > span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.ct-stat > strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

/* Operations panel */
.ct-ops-panel {
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
}

.ct-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

/* Activity card */
.ct-card {
    display: grid;
    grid-template-columns: 1fr 140px 160px auto;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 10px 14px;
    transition: background 0.1s;
}

.ct-card:last-child {
    border-bottom: 1px solid var(--line);
}

.ct-card:hover {
    background: var(--bg-row-hover);
}

.ct-ready {
    border-left: 2px solid var(--ok);
}

.ct-blocked {
    border-left: 2px solid var(--danger);
    opacity: 0.75;
}

.ct-locked {
    border-left: 2px solid var(--danger);
    opacity: 0.6;
}

/* Identity */
.ct-card-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 16px;
}

.ct-card-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    display: block;
}

.ct-card-route {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
}

.ct-card-flavor {
    font-size: 9.5px;
    color: var(--text-dim);
    display: block;
    font-style: italic;
}

/* Odds */
.ct-card-odds {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
    border-left: 1px solid var(--line);
}

.ct-odds-val {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: block;
}

.ct-odds-val.high { color: var(--ok); }
.ct-odds-val.mid  { color: var(--warn); }
.ct-odds-val.low  { color: var(--danger); }

.ct-odds-bar {
    height: 4px;
    background: #252525;
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}

.ct-odds-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
}

.ct-odds-bar > span.high { background: var(--ok); }
.ct-odds-bar > span.mid  { background: var(--warn); }
.ct-odds-bar > span.low  { background: var(--danger); }

.ct-mastery {
    font-size: 9.5px;
    color: var(--text-dim);
}

/* Info (costs + value) */
.ct-card-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 16px;
    border-left: 1px solid var(--line);
}

.ct-costs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.ct-cost-pill {
    font-size: 9.5px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 2px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-strong);
    color: var(--text-muted);
}

.ct-cost-pill.warn {
    background: rgba(200,64,64,0.08);
    border-color: rgba(200,64,64,0.3);
    color: var(--danger);
}

.ct-value-range {
    font-size: 10px;
    font-weight: 600;
    color: var(--ok);
}

/* Action */
.ct-card-action {
    padding-left: 14px;
    border-left: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-lock-tag {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Reg code in table */
.ct-reg {
    font-size: 10px;
    font-family: monospace;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* Locked section */
.ct-locked-section {
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 860px) {
    .ct-card {
        grid-template-columns: 1fr 110px;
        grid-template-rows: auto auto;
        row-gap: 8px;
    }
    .ct-card-odds { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 8px; }
    .ct-card-info  { display: none; }
    .ct-card-action { border-left: none; padding-left: 0; }
    .ct-stat-bar { flex-wrap: wrap; }
    .ct-stat { min-width: 50%; border-bottom: 1px solid var(--line); }
}

/* ================================================================
   CAR THEFT PAGE � ct-* classes
   ================================================================ */

/* Page header */
.ct-page-header {
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
}

.ct-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.ct-page-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.04em;
    margin: 4px 0 2px;
    line-height: 1.1;
}

.ct-page-sub {
    font-size: 10px;
    color: var(--text-dim);
    margin: 0;
}

/* Stat bar */
.ct-stat-bar {
    display: flex;
    gap: 0;
}

.ct-stat {
    flex: 1;
    padding: 8px 16px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-stat:last-child {
    border-right: none;
}

.ct-stat > span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.ct-stat > strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

/* Operations panel */
.ct-ops-panel {
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
}

.ct-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

/* Activity card */
.ct-card {
    display: grid;
    grid-template-columns: 1fr 140px 160px auto;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 10px 14px;
    transition: background 0.1s;
}

.ct-card:last-child {
    border-bottom: 1px solid var(--line);
}

.ct-card:hover {
    background: var(--bg-row-hover);
}

.ct-ready {
    border-left: 2px solid var(--ok);
}

.ct-blocked {
    border-left: 2px solid var(--danger);
    opacity: 0.75;
}

.ct-locked {
    border-left: 2px solid var(--danger);
    opacity: 0.6;
}

/* Identity */
.ct-card-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 16px;
}

.ct-card-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    display: block;
}

.ct-card-route {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
}

.ct-card-flavor {
    font-size: 9.5px;
    color: var(--text-dim);
    display: block;
    font-style: italic;
}

/* Odds */
.ct-card-odds {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
    border-left: 1px solid var(--line);
}

.ct-odds-val {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: block;
}

.ct-odds-val.high { color: var(--ok); }
.ct-odds-val.mid  { color: var(--warn); }
.ct-odds-val.low  { color: var(--danger); }

.ct-odds-bar {
    height: 4px;
    background: #252525;
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}

.ct-odds-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
}

.ct-odds-bar > span.high { background: var(--ok); }
.ct-odds-bar > span.mid  { background: var(--warn); }
.ct-odds-bar > span.low  { background: var(--danger); }

.ct-mastery {
    font-size: 9.5px;
    color: var(--text-dim);
}

/* Info (costs + value) */
.ct-card-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 16px;
    border-left: 1px solid var(--line);
}

.ct-costs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.ct-cost-pill {
    font-size: 9.5px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 2px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-strong);
    color: var(--text-muted);
}

.ct-cost-pill.warn {
    background: rgba(200,64,64,0.08);
    border-color: rgba(200,64,64,0.3);
    color: var(--danger);
}

.ct-value-range {
    font-size: 10px;
    font-weight: 600;
    color: var(--ok);
}

/* Action */
.ct-card-action {
    padding-left: 14px;
    border-left: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-lock-tag {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Reg code in table */
.ct-reg {
    font-size: 10px;
    font-family: monospace;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* Locked section */
.ct-locked-section {
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 860px) {
    .ct-card {
        grid-template-columns: 1fr 110px;
        grid-template-rows: auto auto;
        row-gap: 8px;
    }
    .ct-card-odds { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 8px; }
    .ct-card-info  { display: none; }
    .ct-card-action { border-left: none; padding-left: 0; }
    .ct-stat-bar { flex-wrap: wrap; }
    .ct-stat { min-width: 50%; border-bottom: 1px solid var(--line); }
}

/* ================================================================
   CAR THEFT — cinematic upgrade (scoped to .page-car-theft)
   ================================================================ */
.page-car-theft {
    --ct-gold: #c9a24a;
    --ct-gold-soft: rgba(201, 162, 74, 0.12);
}

/* ---- Header ---- */
.page-car-theft .ct-page-header {
    position: relative;
    border: 1px solid #2b2b2b;
    border-radius: 12px;
    background:
        radial-gradient(130% 180% at 100% -40%, rgba(201, 162, 74, 0.12) 0%, rgba(201, 162, 74, 0) 55%),
        linear-gradient(180deg, #1a1a1c 0%, #101011 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    margin-bottom: 14px;
}
.page-car-theft .ct-header-inner { padding: 16px 20px; }
.page-car-theft .ct-header-inner .cp-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ct-gold);
}
.page-car-theft .ct-page-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #f4ecd8;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    margin: 5px 0 3px;
}
.page-car-theft .ct-page-sub { font-size: 10.5px; color: #9a9a9a; }
.page-car-theft .ct-header-inner .btn {
    border-color: rgba(201, 162, 74, 0.35);
    color: #e6d3a1;
    background: rgba(201, 162, 74, 0.08);
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.page-car-theft .ct-header-inner .btn:hover {
    background: rgba(201, 162, 74, 0.18);
    border-color: var(--ct-gold);
    transform: translateX(2px);
}

/* ---- Stat bar ---- */
.page-car-theft .ct-stat-bar {
    background: rgba(0, 0, 0, 0.25);
}
.page-car-theft .ct-stat {
    padding: 11px 18px;
    border-right: 1px solid #232323;
    position: relative;
    transition: background 150ms ease;
}
.page-car-theft .ct-stat:hover { background: rgba(255, 255, 255, 0.02); }
.page-car-theft .ct-stat > span {
    font-size: 8.5px;
    color: #7f7768;
    letter-spacing: 0.16em;
}
.page-car-theft .ct-stat > strong {
    font-size: 16px;
    color: #f0f0f0;
    font-variant-numeric: tabular-nums;
}

/* ---- Section header strip ---- */
.page-car-theft .panel-header-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #262626;
    background: linear-gradient(180deg, #1c1c1e 0%, #161617 100%);
}
.page-car-theft .panel-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e8ddc4;
}
.page-car-theft .panel-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    border-radius: 2px;
    background: var(--ct-gold);
}
.page-car-theft .panel-meta { font-size: 9.5px; color: #7c7c7c; letter-spacing: 0.05em; }

.page-car-theft .ct-ops-panel,
.page-car-theft .ct-recent-panel {
    border: 1px solid #262626;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
}

/* ---- Operation cards ---- */
.page-car-theft .ct-card-list { padding: 10px; gap: 9px; }
.page-car-theft .ct-card {
    border: 1px solid #262626;
    border-left: 3px solid #333;
    border-radius: 8px;
    padding: 12px 16px;
    min-height: 84px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 160px auto;
    align-items: center;
    background: linear-gradient(165deg, #17171a 0%, #101012 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
    position: relative;
    overflow: hidden;
}
.page-car-theft .ct-card-identity {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
    padding-right: 16px;
}
.page-car-theft .ct-card-odds {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 2;
    border-left: none;
    padding: 0 4px;
}
.page-car-theft .ct-card-info {
    grid-column: 3;
    grid-row: 1;
    position: relative;
    z-index: 2;
    border-left: none;
    padding: 0 4px;
}
.page-car-theft .ct-card-action {
    grid-column: 4;
    grid-row: 1;
    position: relative;
    z-index: 2;
    border-left: none;
    padding-left: 0;
}
.page-car-theft .ct-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* Ready operations glow green + get a subtle animated pulse on the accent */
.page-car-theft .ct-ready {
    border-left-color: var(--ok);
}
.page-car-theft .ct-ready:hover {
    border-color: #2f4a37;
    border-left-color: var(--ok);
    background: linear-gradient(165deg, #14201a 0%, #101012 60%);
}
.page-car-theft .ct-ready::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2px;
    background: var(--ok);
    box-shadow: 0 0 12px rgba(78, 166, 90, 0.7);
    opacity: 0;
    animation: ctReadyPulse 2.4s ease-in-out infinite;
}
@keyframes ctReadyPulse { 0%,100% { opacity: 0; } 50% { opacity: 0.85; } }

.page-car-theft .ct-blocked { border-left-color: var(--warn); opacity: 0.82; }
.page-car-theft .ct-locked  { border-left-color: #5a3535; opacity: 0.62; }

.page-car-theft .ct-card--featured {
    grid-template-columns: 44% minmax(0, 1fr) 106px 118px auto;
    column-gap: 10px;
    background: linear-gradient(165deg, #17171a 0%, #101012 100%);
}
.page-car-theft .ct-card--featured .ct-card-scene {
    position: absolute;
    left: -16px;
    top: 0;
    bottom: 0;
    width: calc(44% + 16px);
    margin: -12px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 6px 0 0 6px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.82;
    -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}
.page-car-theft .ct-card--featured .ct-card-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(16, 16, 18, 0.08) 0%,
        rgba(16, 16, 18, 0.18) 55%,
        rgba(16, 16, 18, 0.5) 100%
    );
    pointer-events: none;
}
.page-car-theft .ct-card--featured .ct-card-identity {
    grid-column: 2;
    padding-left: 0;
    padding-right: 8px;
    z-index: 2;
}
.page-car-theft .ct-card--featured .ct-card-odds {
    grid-column: 3;
}
.page-car-theft .ct-card--featured .ct-card-info {
    grid-column: 4;
}
.page-car-theft .ct-card--featured .ct-card-action {
    grid-column: 5;
}
.page-car-theft .ct-card-scene--street-curb-lift {
    background-image: url('../img/car-theft/street-curb-lift.png');
    background-position: 42% center;
}
.page-car-theft .ct-card-scene--dealer-lot-break-in {
    background-image: url('../img/car-theft/dealer-lot-break-in.png');
    background-position: 38% center;
}
.page-car-theft .ct-card-scene--valet-key-switch {
    background-image: url('../img/car-theft/valet-key-switch.png');
    background-position: 44% center;
}
.page-car-theft .ct-card--featured .ct-card-odds,
.page-car-theft .ct-card--featured .ct-card-info,
.page-car-theft .ct-card--featured .ct-card-action {
    padding: 0 4px;
    border-left: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.page-car-theft .ct-card--featured .ct-card-action {
    padding-left: 0;
}

@media (max-width: 860px) {
    .page-car-theft .ct-card {
        grid-template-columns: 1fr 110px;
        grid-template-rows: auto auto;
        row-gap: 8px;
    }
    .page-car-theft .ct-card--featured {
        grid-template-columns: 1fr 110px;
    }
    .page-car-theft .ct-card-identity { grid-column: 1 / -1; grid-row: 1; }
    .page-car-theft .ct-card-odds { grid-column: 1; grid-row: 2; border-top: 1px solid #262626; padding-top: 8px; }
    .page-car-theft .ct-card-info { display: none; }
    .page-car-theft .ct-card-action { grid-column: 2; grid-row: 2; }
    .page-car-theft .ct-card-scene { display: none; }
    .page-car-theft .ct-card--featured .ct-card-identity,
    .page-car-theft .ct-card--featured .ct-card-odds,
    .page-car-theft .ct-card--featured .ct-card-action {
        grid-column: unset;
    }
    .page-car-theft .ct-card--featured .ct-card-identity { grid-column: 1 / -1; grid-row: 1; }
    .page-car-theft .ct-card--featured .ct-card-odds { grid-column: 1; grid-row: 2; }
    .page-car-theft .ct-card--featured .ct-card-action { grid-column: 2; grid-row: 2; }
}

/* Card identity */
.page-car-theft .ct-card-name {
    font-family: var(--font-display);
    font-size: 13px;
    color: #f2ecda;
    letter-spacing: 0.01em;
}
.page-car-theft .ct-card-route { font-size: 10px; color: #9a9a9a; }
.page-car-theft .ct-card-flavor { font-size: 9.5px; color: #6f6f6f; }

/* Odds — bigger number + animated gradient bar */
.page-car-theft .ct-odds-val { font-size: 17px; }
.page-car-theft .ct-odds-val.high { text-shadow: 0 0 12px rgba(78, 166, 90, 0.4); }
.page-car-theft .ct-odds-bar {
    height: 6px;
    background: #202022;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.page-car-theft .ct-odds-bar > span {
    position: relative;
    transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
    background-size: 200% 100%;
}
.page-car-theft .ct-odds-bar > span.high { background: linear-gradient(90deg, #3c8a4f, #5fd07a); }
.page-car-theft .ct-odds-bar > span.mid  { background: linear-gradient(90deg, #b07d24, #e0b046); }
.page-car-theft .ct-odds-bar > span.low  { background: linear-gradient(90deg, #a83636, #d16060); }
.page-car-theft .ct-mastery { font-size: 9.5px; color: #7c7c7c; }

/* Cost pills + value */
.page-car-theft .ct-cost-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 999px;
    padding: 2px 9px;
    color: #b7b7b7;
}
.page-car-theft .ct-cost-pill.warn {
    background: rgba(200, 64, 64, 0.1);
    border-color: rgba(200, 64, 64, 0.35);
    color: #e08585;
}
.page-car-theft .ct-value-range { color: #7fc98a; font-weight: 700; }

/* Steal button — prominent CTA */
.page-car-theft .ct-card-action .btn {
    min-width: 84px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid rgba(78, 166, 90, 0.45);
    color: #d6f0da;
    background: linear-gradient(180deg, rgba(78, 166, 90, 0.22) 0%, rgba(78, 166, 90, 0.08) 100%);
    transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease, border-color 130ms ease;
}
.page-car-theft .ct-card-action .btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(78, 166, 90, 0.34) 0%, rgba(78, 166, 90, 0.14) 100%);
    border-color: var(--ok);
    box-shadow: 0 3px 12px rgba(78, 166, 90, 0.28);
    transform: translateY(-1px);
}
.page-car-theft .ct-card-action .btn:disabled {
    border-color: #3a3a3a;
    color: #6f6f6f;
    background: rgba(255, 255, 255, 0.02);
    opacity: 1;
}
.page-car-theft .ct-lock-tag {
    padding: 3px 10px;
    border: 1px dashed #4a3a3a;
    border-radius: 999px;
    color: #b08a8a;
}

/* Steal-in-progress scan animation */
.page-car-theft .ct-card.ct-attempting {
    border-color: var(--ct-gold);
    box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.35) inset, 0 8px 24px rgba(0, 0, 0, 0.5);
}
.page-car-theft .ct-card.ct-attempting::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.22), transparent);
    animation: ctScan 0.9s linear infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes ctScan {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
    .page-car-theft .ct-ready::after,
    .page-car-theft .ct-card.ct-attempting::before { animation: none; }
    .page-car-theft .ct-odds-bar > span { transition: none; }
}

/* ---- Plan-the-job button ---- */
.page-car-theft .ct-plan-btn {
    min-width: 92px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid rgba(201, 162, 74, 0.5);
    color: #f0dca6;
    background: linear-gradient(180deg, rgba(201, 162, 74, 0.2) 0%, rgba(201, 162, 74, 0.06) 100%);
    transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease, border-color 130ms ease;
}
.page-car-theft .ct-plan-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(201, 162, 74, 0.32) 0%, rgba(201, 162, 74, 0.12) 100%);
    border-color: #c9a24a;
    box-shadow: 0 3px 12px rgba(201, 162, 74, 0.3);
    transform: translateY(-1px);
}

/* ---- Status strip: garage heat + live garage + perks ---- */
.page-car-theft .ct-status-bar {
    display: grid;
    background: rgba(0, 0, 0, 0.25);
}
.page-car-theft .ct-status-bar--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-car-theft .ct-status-bar--triple {
    grid-template-columns: 33fr 34fr 33fr;
}
.page-car-theft .ct-status-cell {
    display: grid;
    grid-template-rows: 18px 6px 13px;
    gap: 6px;
    padding: 11px 18px;
    border-right: 1px solid #232323;
    box-sizing: border-box;
    min-width: 0;
}
.page-car-theft .ct-status-bar--duo .ct-status-cell:last-child,
.page-car-theft .ct-status-bar--triple .ct-status-cell:last-child {
    border-right: none;
}
.page-car-theft .ct-status-cell--perk {
    background: radial-gradient(120% 140% at 100% 0%, rgba(201, 162, 74, 0.12), rgba(201, 162, 74, 0) 60%);
}
.page-car-theft .ct-status-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    height: 18px;
    min-width: 0;
}
.page-car-theft .ct-status-label {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7f7768;
    white-space: nowrap;
}
.page-car-theft .ct-status-value {
    font-size: 15px;
    font-weight: 700;
    color: #f0f0f0;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    flex-shrink: 0;
}
.page-car-theft .ct-status-value.is-gold { color: #f0dca6; }
.page-car-theft .ct-status-value.high { color: #d16060; }
.page-car-theft .ct-status-value.mid  { color: #e0b046; }
.page-car-theft .ct-status-value.low  { color: #5fd07a; }
.page-car-theft .ct-status-mid {
    height: 6px;
    min-height: 6px;
    max-height: 6px;
    overflow: hidden;
}
.page-car-theft .ct-status-foot {
    height: 13px;
    min-height: 13px;
    max-height: 13px;
    font-size: 9px;
    color: #7c7c7c;
    line-height: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-car-theft .ct-heat-track {
    border-radius: 3px;
    background: #202022;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.page-car-theft .ct-perk-track {
    border-radius: 3px;
    background: #202022;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.page-car-theft .ct-perk-track > span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(201, 162, 74, 0.45), rgba(201, 162, 74, 0.95));
}
.page-car-theft .ct-heat-track > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-car-theft .ct-heat-track > span.high { background: linear-gradient(90deg, #a83636, #d16060); }
.page-car-theft .ct-heat-track > span.mid  { background: linear-gradient(90deg, #b07d24, #e0b046); }
.page-car-theft .ct-heat-track > span.low  { background: linear-gradient(90deg, #3c8a4f, #5fd07a); }
.page-car-theft .ct-recent-dots {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}
.page-car-theft .ct-recent-dot {
    width: 14px;
    height: 6px;
    border-radius: 2px;
    background: #3a3a3a;
    flex-shrink: 0;
}
.page-car-theft .ct-recent-dot.high { background: #d16060; }
.page-car-theft .ct-recent-dot.mid  { background: #e0b046; }
.page-car-theft .ct-recent-dot.low  { background: #5fd07a; }
.page-car-theft .ct-recent-empty {
    font-size: 9px;
    color: #6f6f6f;
    line-height: 6px;
}

@media (max-width: 640px) {
    .page-car-theft .ct-status-bar--duo,
    .page-car-theft .ct-status-bar--triple {
        grid-template-columns: 1fr;
    }
    .page-car-theft .ct-status-cell {
        border-right: none;
        border-bottom: 1px solid #232323;
    }
    .page-car-theft .ct-status-cell:last-child {
        border-bottom: none;
    }
    .page-car-theft .ct-status-foot {
        white-space: normal;
        max-height: none;
        height: auto;
        line-height: 1.4;
    }
}

.page-car-theft .ct-odds-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7f7768;
    display: block;
    margin-bottom: 1px;
}

/* ================================================================
   CAR THEFT — "Plan the Job" modal + lockpick mini-game
   ================================================================ */
body.ct-modal-open { overflow: hidden; }

.ct-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.ct-modal[hidden] { display: none; }
.ct-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 8, 0.72);
    backdrop-filter: blur(3px);
}
.ct-modal-panel {
    position: relative;
    width: 100%;
    max-width: 470px;
    max-height: 92vh;
    overflow-y: auto;
    border: 1px solid #33302a;
    border-radius: 14px;
    background:
        radial-gradient(140% 120% at 100% -20%, rgba(201, 162, 74, 0.14) 0%, rgba(201, 162, 74, 0) 50%),
        linear-gradient(180deg, #1a1a1c 0%, #101012 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    animation: ctModalIn 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ctModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ct-modal-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 28px; height: 28px;
    border: 1px solid #333;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    color: #b7b7b7;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease;
}
.ct-modal-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.ct-modal-head {
    padding: 18px 20px 12px;
    border-bottom: 1px solid #262626;
}
.ct-modal-head .cp-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: #c9a24a;
}
.ct-modal-head h3 {
    font-family: var(--font-display);
    font-size: 19px; color: #f4ecd8; margin: 4px 0 3px; letter-spacing: 0.01em;
}
.ct-modal-sub { font-size: 10.5px; color: #9a9a9a; margin: 0; }
.ct-modal-sub strong { color: #d9b76a; }

.ct-modal-body { padding: 16px 20px 6px; }
.ct-block-title {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #8a8a8a; margin: 0 0 8px;
}

/* Method options */
.ct-method-block { margin-bottom: 18px; }
.ct-method-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ct-method {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 10px 10px 9px;
    border: 1px solid #2c2c2c;
    border-radius: 9px;
    background: #141416;
    color: #cfcfcf;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.ct-method:hover { transform: translateY(-2px); border-color: #4a4335; }
.ct-method strong { font-size: 11.5px; color: #ececec; letter-spacing: 0.01em; }
.ct-method-desc { font-size: 9px; color: #8a8a8a; }
.ct-method-mods { font-size: 9px; color: #7c7468; font-style: normal; letter-spacing: 0.01em; }
.ct-method.is-selected {
    border-color: #c9a24a;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(201, 162, 74, 0.14), rgba(201, 162, 74, 0) 60%),
        #17150f;
    box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.25) inset, 0 6px 16px rgba(0, 0, 0, 0.4);
}
.ct-method.is-selected strong { color: #f4e6c4; }
.ct-method.is-selected .ct-method-mods { color: #c9a24a; }

/* Lockpick mini-game */
.ct-lock-block { margin-bottom: 18px; }
.ct-lock-score { font-weight: 700; letter-spacing: 0; text-transform: none; color: #8a8a8a; }
.ct-lock-score.good { color: #5fd07a; }
.ct-lock-score.ok   { color: #e0b046; }
.ct-lock-score.bad  { color: #d16060; }
.ct-lock-track {
    position: relative;
    height: 40px;
    border-radius: 8px;
    background:
        repeating-linear-gradient(90deg, #161618 0 9px, #131315 9px 10px);
    border: 1px solid #2a2a2a;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.ct-lock-zone {
    position: absolute;
    top: 0; bottom: 0;
    left: 34%; width: 32%;
    background: linear-gradient(180deg, rgba(201, 162, 74, 0.35), rgba(201, 162, 74, 0.14));
    border-left: 1px solid rgba(201, 162, 74, 0.5);
    border-right: 1px solid rgba(201, 162, 74, 0.5);
    transition: left 140ms ease, width 140ms ease;
}
.ct-lock-zone::after {
    content: "";
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 1px;
    background: rgba(201, 162, 74, 0.65);
    transform: translateX(-0.5px);
}
.ct-lock-marker {
    position: absolute;
    top: -3px; bottom: -3px;
    left: 0;
    width: 4px;
    margin-left: -2px;
    border-radius: 3px;
    background: #f0f0f0;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.ct-lock-marker.is-hit  { background: #5fd07a; box-shadow: 0 0 12px rgba(95, 208, 122, 0.8); }
.ct-lock-marker.is-miss { background: #d16060; box-shadow: 0 0 12px rgba(209, 96, 96, 0.8); }
.ct-lock-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
}
.ct-lock-btn { min-width: 78px; }
.ct-lock-btn.is-live {
    border-color: #c9a24a;
    color: #f4e6c4;
    background: linear-gradient(180deg, rgba(201, 162, 74, 0.28), rgba(201, 162, 74, 0.1));
}
.ct-lock-hint { font-size: 9.5px; color: #7c7c7c; line-height: 1.4; }

/* Projection panel */
.ct-proj {
    border: 1px solid #262626;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    padding: 12px 14px;
    margin-bottom: 6px;
}
.ct-proj-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 16px;
    margin-bottom: 10px;
}
.ct-proj-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
}
.ct-proj-row > span { color: #8a8a8a; }
.ct-proj-row > strong { color: #e2e2e2; font-variant-numeric: tabular-nums; }
.ct-proj-row > strong.warn { color: #e08585; }
.ct-proj-odds {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #242424;
}
.ct-proj-odds > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #8a8a8a; }
.ct-proj-odds > strong { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-proj-odds > strong.high { color: #5fd07a; }
.ct-proj-odds > strong.mid  { color: #e0b046; }
.ct-proj-odds > strong.low  { color: #d16060; }
.ct-mod-breakdown {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #2a2a2a;
}
.ct-mod-breakdown > div {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #9a9a9a;
}
.ct-mod-breakdown > div strong {
    color: #d9b76a;
    font-variant-numeric: tabular-nums;
}
.ct-mod-breakdown > div strong.neg { color: #d16060; }
.ct-proj-warn { margin: 8px 0 0; font-size: 10px; color: #e08585; }

/* Footer / confirm */
.ct-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 18px;
}
.ct-modal-foot .ct-go {
    min-width: 130px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid rgba(78, 166, 90, 0.5);
    color: #d6f0da;
    background: linear-gradient(180deg, rgba(78, 166, 90, 0.28), rgba(78, 166, 90, 0.1));
}
.ct-modal-foot .ct-go:hover:not(:disabled) {
    border-color: var(--ok);
    box-shadow: 0 3px 14px rgba(78, 166, 90, 0.3);
    transform: translateY(-1px);
}
.ct-modal-foot .ct-go:disabled { opacity: 0.5; }

@media (max-width: 520px) {
    .ct-method-options { grid-template-columns: 1fr; }
    .ct-proj-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-modal-panel { animation: none; }
}

/* ================================================================
   GARAGE PAGE — gr-* classes
   ================================================================ */

.gr-page-header {
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
}

.gr-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.gr-page-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.04em;
    margin: 4px 0 2px;
    line-height: 1.1;
}

.gr-page-sub {
    font-size: 10px;
    color: var(--text-dim);
    margin: 0;
}

/* Stat bar */
.gr-stat-bar {
    display: flex;
    gap: 0;
}

.gr-stat {
    flex: 1;
    padding: 8px 16px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gr-stat:last-child { border-right: none; }

.gr-stat > span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.gr-stat > strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

/* Action strip */
.gr-actions-panel {
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
}

.gr-actions-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    flex-wrap: wrap;
}

.gr-sort-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gr-sort-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.gr-sort-select {
    font-size: 10px;
    background: var(--bg-input);
    border: 1px solid var(--line-strong);
    color: var(--text-main);
    padding: 3px 6px;
    border-radius: 2px;
    cursor: pointer;
}

.gr-action-divider {
    width: 1px;
    height: 18px;
    background: var(--line-strong);
    margin: 0 2px;
}

/* Fleet panel */
.gr-fleet-panel {
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
}

/* Vehicle card */
.gr-card {
    display: grid;
    grid-template-columns: 28px 1fr 160px 120px auto;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--line);
    padding: 6px 14px;
    transition: background 0.1s;
}

.gr-card:last-child { border-bottom: none; }
.gr-card:hover { background: var(--bg-row-hover); }

/* Border tiers */
.gr-clean { border-left: 2px solid var(--ok); }
.gr-warm  { border-left: 2px solid var(--warn); }
.gr-hot   { border-left: 2px solid var(--danger); }

/* Checkbox */
.gr-card-check {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Identity */
.gr-card-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 14px;
}

.gr-car-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    display: block;
}

.gr-car-reg {
    font-size: 10px;
    font-family: monospace;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    display: block;
}

.gr-car-year {
    font-size: 9.5px;
    color: var(--text-dim);
    display: block;
}

/* Condition (damage + heat) */
.gr-card-condition {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 14px;
    border-left: 1px solid var(--line);
}

.gr-cond-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gr-cond-label {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    width: 26px;
    flex-shrink: 0;
}

.gr-cond-val {
    font-size: 10px;
    color: var(--text-muted);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.gr-bar-wrap {
    flex: 1;
    height: 4px;
    background: #252525;
    border-radius: 2px;
    overflow: hidden;
}

.gr-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

.gr-bar-dmg { background: var(--danger); }

/* Value */
.gr-card-value {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 14px;
    border-left: 1px solid var(--line);
}

.gr-val-base {
    font-size: 10px;
    color: var(--text-dim);
}

.gr-val-est {
    font-size: 11px;
    font-weight: 700;
}

.gr-val-est.up   { color: var(--ok); }
.gr-val-est.down { color: var(--danger); }

/* Smuggle class */
.gr-card-smuggle {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 14px;
    border-left: 1px solid var(--line);
}

.gr-best-tag {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ok);
}

.gr-sm-level {
    font-size: 9.5px;
    color: var(--text-dim);
}

/* Actions */
.gr-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
    flex-wrap: nowrap;
    white-space: nowrap;
}

.gr-inline-action {
    display: inline;
}

/* Compact per-row action buttons */
.gr-act-btn {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: transparent;
    color: #777;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    white-space: nowrap;
    line-height: 1.3;
}
.gr-act-btn:hover {
    color: #c8b898;
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05);
}
.gr-act-fence {
    border-color: rgba(201,74,74,0.35);
    color: #b87070;
}
.gr-act-fence:hover {
    border-color: rgba(201,74,74,0.6);
    color: #e08080;
    background: rgba(201,74,74,0.08);
}
.gr-act-repair {
    border-color: rgba(72,167,101,0.35);
    color: #6a9a7a;
}
.gr-act-repair:hover {
    border-color: rgba(72,167,101,0.55);
    color: #7fe09b;
    background: rgba(72,167,101,0.08);
}

/* Select-all label in panel header */
.gr-select-all-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #666;
    cursor: pointer;
    margin-right: 10px;
    user-select: none;
}
.gr-select-all-label:hover { color: #aaa; }
.gr-select-all-label input { margin: 0; cursor: pointer; }

/* Responsive */
@media (max-width: 900px) {
    .gr-card {
        grid-template-columns: 28px 1fr 130px;
        grid-template-rows: auto auto;
        row-gap: 8px;
    }
    .gr-card-value   { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 6px; }
    .gr-card-smuggle { display: none; }
    .gr-card-actions { border-left: none; padding-left: 0; }
    .gr-stat-bar     { flex-wrap: wrap; }
    .gr-stat         { min-width: 50%; border-bottom: 1px solid var(--line); }
}

/* ================================================================
   CRIMES PAGE — cr-* classes
   ================================================================ */

/* Page header */
.cr-page-header {
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
}

.cr-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.cr-page-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.04em;
    margin: 4px 0 2px;
    line-height: 1.1;
}

.cr-page-sub {
    font-size: 10px;
    color: var(--text-dim);
    margin: 0;
}

/* Stat bar */
.cr-stat-bar {
    display: flex;
    gap: 0;
}

.cr-stat {
    flex: 1;
    padding: 8px 16px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cr-stat:last-child { border-right: none; }

.cr-stat > span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.cr-stat > strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

/* Ops panel */
.cr-ops-panel {
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
}

/* Filter label */
.cr-filter-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
}

.cr-filter-label input[type="checkbox"] {
    accent-color: var(--ok);
    cursor: pointer;
}

/* Crime card */
.cr-card {
    display: grid;
    grid-template-columns: 1fr 150px 100px 140px 90px auto;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px 14px;
    transition: background 0.1s;
}

.cr-card:last-child { border-bottom: none; }
.cr-card:hover { background: var(--bg-row-hover); }

/* Border states */
.cr-ready   { border-left: 2px solid var(--ok); }
.cr-blocked { border-left: 2px solid var(--danger); opacity: 0.75; }
.cr-locked  { border-left: 2px solid var(--danger); opacity: 0.6; }

/* Identity */
.cr-card-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 12px;
}

/* ─── DRUG EMPIRE ──────────────────────────────────────────────────────────── */

.de-layout {
    display: grid;
    gap: 18px;
    max-width: 1100px;
}

/* Card base */
.de-card {
    background: var(--card-bg, #1a1a1a);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 6px;
    padding: 20px 22px;
}

.de-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.de-icon {
    font-size: 1.1rem;
}

.de-badge {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 4px;
}
.de-badge-level  { background: rgba(180, 120, 40, 0.25); color: #d4a040; border: 1px solid rgba(180,120,40,0.4); }
.de-badge-count  { background: rgba(60, 160, 80, 0.2);  color: #6cc97a; border: 1px solid rgba(60,160,80,0.35); }
.de-badge-refresh { background: rgba(60, 120, 200, 0.2); color: #7ab0e8; border: 1px solid rgba(60,120,200,0.35); font-size: 0.7rem; }

.de-flavor {
    color: var(--muted, #888);
    font-size: 0.85rem;
    margin: 0 0 12px;
    font-style: italic;
}

.de-hint {
    color: var(--muted, #888);
    font-size: 0.82rem;
    margin: 10px 0 0;
}

.de-hint-max { color: var(--ok, #5aaa6a); }

/* Factory stats row */
.de-factory-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.de-stat {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 4px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.de-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted, #888);
}

.de-stat-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text, #ddd);
}

.de-none { color: var(--muted, #888); font-weight: 400; }
.de-stat-line { font-size: 0.78rem; color: var(--muted, #888); display: block; }

/* Pending units state */
.de-pending { transition: color 0.2s; }
.de-pending-full { color: #d4a040; }

/* Build/collect/upgrade boxes */
.de-build-box,
.de-collect-box,
.de-upgrade-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 5px;
    padding: 12px 14px;
    margin-top: 20px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.de-build-info,
.de-collect-info,
.de-upgrade-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.de-cost { color: #e07050; }

.de-inline-form {
    display: flex;
    align-items: center;
}

.de-btn-build,
.de-btn-upgrade {
    white-space: nowrap;
}

.de-btn-sell { margin-top: 12px; }

/* Drug grid */
.de-drug-select-section { margin-top: 18px; }

.de-sub-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted, #888);
    margin: 0 0 10px;
}

.de-drug-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.de-drug-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 5px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s;
}

.de-drug-active {
    border-color: #4a8c5c;
    background: rgba(60, 130, 80, 0.08);
}

.de-drug-locked {
    opacity: 0.45;
    pointer-events: none;
}

.de-drug-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.88rem;
}

.de-drug-flavor {
    font-size: 0.75rem;
    color: var(--muted, #888);
    font-style: italic;
    margin: 0;
    line-height: 1.4;
}

.de-drug-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--muted, #888);
}

.de-drug-form { margin-top: auto; }

/* Tags */
.de-tag {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.de-tag-active { background: rgba(60,160,80,0.25); color: #6cc97a; }
.de-tag-locked { background: rgba(180,60,60,0.2);  color: #cc7070; }
.de-tag-warn   { background: rgba(200,160,30,0.25); color: #d4a040; margin-left: 6px; }

/* Stash */
.de-stash-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.de-stash-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 4px;
    font-size: 0.88rem;
}

.de-stash-name { font-weight: 500; }
.de-stash-qty  { color: #6cc97a; font-size: 0.82rem; }

/* Market table */
.de-market-table-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.de-market-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    min-width: 560px;
}

.de-market-table th,
.de-market-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border, #2a2a2a);
    text-align: left;
}

.de-market-table thead th {
    background: rgba(255,255,255,0.04);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted, #888);
}

.de-buyer-col { text-align: center; }

.de-buyer-nerve {
    display: block;
    font-size: 0.68rem;
    color: var(--muted, #888);
    font-weight: 400;
    margin-top: 2px;
}

.de-market-drug-cell { min-width: 130px; }

.de-drug-name { font-weight: 500; }

.de-stash-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.68rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(60,160,80,0.2);
    color: #6cc97a;
    vertical-align: middle;
}

.de-market-price-cell { text-align: center; font-variant-numeric: tabular-nums; }

.de-price-hot { color: #6cc97a; font-weight: 600; }
.de-price-cold { color: #cc7070; }

.de-price-arrow { font-size: 0.68rem; margin-left: 2px; }
.de-arrow-down  { color: #cc7070; }

.de-market-row-stocked td { background: rgba(60, 130, 80, 0.04); }

/* Buyer info grid */
.de-buyer-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.de-buyer-info {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 4px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
}

.de-buyer-flavor {
    font-size: 0.73rem;
    color: var(--muted, #888);
    font-style: italic;
}

.de-buyer-meta {
    display: flex;
    gap: 10px;
    font-size: 0.74rem;
    color: var(--muted, #888);
    margin-top: 2px;
}

/* Sell form */
.de-sell-form { max-width: 680px; }

.de-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.de-form-group label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted, #888);
}

.de-select,
.de-input {
    background: var(--input-bg, #111);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 4px;
    color: var(--text, #ddd);
    padding: 7px 10px;
    font-size: 0.88rem;
    width: 100%;
    box-sizing: border-box;
}

.de-select:focus,
.de-input:focus {
    outline: none;
    border-color: rgba(100, 160, 220, 0.5);
}

/* Buyer cards grid */
.de-buyer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.de-buyer-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    background: #0e0e0e;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.de-buyer-card:hover {
    border-color: rgba(100, 160, 220, 0.4);
    background: #131313;
}

.de-buyer-card.de-buyer-selected {
    border-color: rgba(100, 200, 120, 0.7);
    background: rgba(60, 120, 70, 0.12);
}

.de-buyer-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ccc;
}

.de-buyer-flavor {
    font-size: 0.74rem;
    color: #666;
    line-height: 1.4;
    flex: 1;
}

.de-buyer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.73rem;
}

.de-buyer-price { color: #7db87d; }
.de-buyer-nerve { color: #8ab4d8; }
.de-buyer-risk-low  { color: #7db87d; }
.de-buyer-risk-mid  { color: #aaa; }
.de-buyer-risk-high { color: #c97070; }

/* Sell controls row */
.de-sell-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 10px;
}

@media (max-width: 540px) {
    .de-sell-controls { grid-template-columns: 1fr; }
    .de-buyer-grid { grid-template-columns: 1fr 1fr; }
}

.de-sell-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

@media (max-width: 540px) {
    .de-sell-grid { grid-template-columns: 1fr; }
}

/* Quantity row with "All" button */
.de-qty-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.de-qty-input { flex: 1; min-width: 70px; }

.de-btn-all {
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 0.78rem;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #aaa;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.de-btn-all:hover { border-color: #555; color: #ddd; }

/* Sell preview box */
.de-sell-preview {
    background: #0e0e0e;
    border: 1px solid #222;
    border-radius: 5px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 0.85rem;
}

.de-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    color: var(--muted, #888);
}

.de-preview-row strong { color: #6cc97a; font-size: 0.92rem; }

.de-preview-warn {
    color: #c97070 !important;
    font-size: 0.80rem;
    margin-top: 4px;
}

/* Sell actions */
.de-sell-actions { margin-top: 4px; }

.de-btn-sell:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Info card */
.de-info-card {
    border-left: 3px solid rgba(180, 120, 40, 0.6);
}

.de-page-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.de-page-desc {
    font-size: 0.85rem;
    color: var(--muted, #888);
    margin: 0 0 14px;
    line-height: 1.55;
}

.de-info-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.de-info-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.de-info-stat span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted, #888);
}

.de-info-stat strong {
    font-size: 0.9rem;
}

/* Stars */
.de-stars { white-space: nowrap; }
.de-star { font-size: 0.9rem; line-height: 1; }
.de-star-on  { color: #f0c030; }
.de-star-off { color: #3a3a3a; }

/* Drug rate line */
.de-drug-rate {
    font-size: 0.72rem;
    color: var(--muted, #888);
    margin-top: 2px;
}

/* Cooking hint */
.de-hint-cooking {
    color: var(--muted, #888);
    font-size: 0.85rem;
    padding: 8px 10px;
    background: rgba(60, 120, 200, 0.07);
    border: 1px solid rgba(60, 120, 200, 0.2);
    border-radius: 4px;
    margin: 8px 0 0;
}

.de-hint-cooking strong { color: #7ab0e8; }

/* Cooking box with progress bar */
.de-cooking-box {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: rgba(60, 120, 200, 0.07);
    border: 1px solid rgba(60, 120, 200, 0.2);
    border-radius: 6px;
}

.de-cooking-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 4px;
}

.de-cooking-label {
    font-size: 0.82rem;
    color: var(--muted, #888);
}

.de-cooking-timer {
    font-size: 0.9rem;
    font-weight: 700;
    color: #7ab0e8;
    font-variant-numeric: tabular-nums;
}

.de-progress-track {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.de-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a90d9, #7ab0e8);
    border-radius: 3px;
    transition: width 0.9s linear;
}

.de-progress-fill.de-progress-upgrade {
    background: linear-gradient(90deg, #b8861a, #e8b84b);
}

.de-batch-note {
    display: block;
    font-size: 0.75rem;
    color: #7ab0e8;
    margin: 1px 0 2px;
} ─────────────────────────────────────────────────────── */

.cr-card-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

.cr-card-flavor {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Odds */
.cr-card-odds {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 12px;
    border-left: 1px solid var(--line);
}

.cr-odds-val {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.cr-odds-val.high { color: var(--ok); }
.cr-odds-val.mid  { color: var(--warn); }
.cr-odds-val.low  { color: var(--danger); }

.cr-mastery {
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 1px;
}

/* Costs */
.cr-card-costs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0 12px;
    border-left: 1px solid var(--line);
}

/* Stat bar (energy / nerve) */
.cr-stat-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.cr-stat-icon {
    font-size: 9px;
    width: 10px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-dim);
}

.cr-stat-bar.energy .cr-stat-icon { color: #c8a030; }
.cr-stat-bar.nerve  .cr-stat-icon { color: #7060c0; }

.cr-stat-track {
    flex: 1;
    height: 3px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
}

.cr-stat-fill {
    height: 100%;
    background: var(--ok);
    border-radius: 2px;
}

.cr-stat-bar.insufficient .cr-stat-fill { background: var(--danger); }

.cr-stat-cost {
    font-size: 9px;
    color: var(--text-muted);
    min-width: 12px;
    text-align: right;
    flex-shrink: 0;
}

.cr-stat-bar.insufficient .cr-stat-cost { color: var(--warn); }

/* Reward */
.cr-card-reward {
    padding: 0 12px;
    border-left: 1px solid var(--line);
    text-align: center;
}

.cr-reward-val {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}

/* Loot */
.cr-card-loot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px;
    border-left: 1px solid var(--line);
}

.cr-loot-none {
    font-size: 9.5px;
    color: var(--text-dim);
}

.cr-loot-btn {
    background: none;
    border: 1px solid var(--line);
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cr-loot-btn:hover { border-color: var(--accent); color: var(--accent); }

.cr-loot-tooltip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    min-width: 230px;
    max-width: 320px;
    border: 1px solid #5a4731;
    background: #13100d;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    padding: 6px 8px;
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 40;
    border-radius: 2px;
}

.cr-card-loot:hover .cr-loot-tooltip,
.cr-card-loot:focus-within .cr-loot-tooltip {
    display: flex;
}

.cr-loot-line {
    color: #dcc8a8;
    font-size: 10px;
    line-height: 1.3;
}

/* Action / lock */
.cr-card-action {
    padding-left: 12px;
    border-left: 1px solid var(--line);
}

.cr-lock-tag {
    font-size: 9px;
    color: var(--danger);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
    .cr-card {
        grid-template-columns: 1fr 120px;
        gap: 6px;
    }

    .cr-card-odds,
    .cr-card-costs,
    .cr-card-reward,
    .cr-card-loot,
    .cr-card-action {
        border-left: none;
        padding: 0;
    }

    .cr-card-costs,
    .cr-card-reward,
    .cr-card-loot { display: none; }
}

/* ================================================================
   CRIMES — cinematic upgrade (scoped to .page-crimes)
   ================================================================ */
.page-crimes {
    --cr-gold: #c9a24a;
}

.page-crimes .cr-page-header {
    position: relative;
    border: 1px solid #2b2b2b;
    border-radius: 12px;
    background:
        radial-gradient(130% 180% at 100% -40%, rgba(201, 162, 74, 0.1) 0%, rgba(201, 162, 74, 0) 55%),
        linear-gradient(180deg, #1a1a1c 0%, #101011 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    margin-bottom: 14px;
    overflow: hidden;
}

.page-crimes .cr-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #262626;
}

.page-crimes .cr-header-inner .cp-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cr-gold);
}

.page-crimes .cr-page-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    color: #f4ecd8;
    margin: 5px 0 3px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.page-crimes .cr-page-sub {
    font-size: 10.5px;
    color: #9a9a9a;
    line-height: 1.45;
    max-width: 52ch;
}

.page-crimes .cr-perk-inline { color: #f0c040; }

.page-crimes .cr-net-mod.pos { color: #7fc98a; }
.page-crimes .cr-net-mod.neg { color: #d16060; }

.page-crimes .cr-commit-all-btn {
    border-color: rgba(78, 166, 90, 0.45);
    color: #d6f0da;
    background: linear-gradient(180deg, rgba(78, 166, 90, 0.22) 0%, rgba(78, 166, 90, 0.08) 100%);
    white-space: nowrap;
}

.page-crimes .cr-commit-all-btn:hover:not(:disabled) {
    border-color: var(--ok);
    background: linear-gradient(180deg, rgba(78, 166, 90, 0.34) 0%, rgba(78, 166, 90, 0.14) 100%);
}

.page-crimes .cr-status-bar {
    display: grid;
    background: rgba(0, 0, 0, 0.25);
}

.page-crimes .cr-status-bar--triple {
    grid-template-columns: 33fr 34fr 33fr;
}

.page-crimes .cr-status-cell {
    display: grid;
    grid-template-rows: 18px 6px 13px;
    gap: 6px;
    padding: 11px 18px;
    border-right: 1px solid #232323;
    box-sizing: border-box;
    min-width: 0;
}

.page-crimes .cr-status-bar--triple .cr-status-cell:last-child {
    border-right: none;
}

.page-crimes .cr-status-cell--shift.dp-graveyard {
    background: radial-gradient(120% 140% at 0% 0%, rgba(90, 110, 160, 0.14), rgba(90, 110, 160, 0) 62%);
}

.page-crimes .cr-status-cell--shift.dp-morning {
    background: radial-gradient(120% 140% at 0% 0%, rgba(200, 120, 60, 0.12), rgba(200, 120, 60, 0) 62%);
}

.page-crimes .cr-status-cell--shift.dp-night {
    background: radial-gradient(120% 140% at 0% 0%, rgba(70, 90, 140, 0.12), rgba(70, 90, 140, 0) 62%);
}

.page-crimes .cr-status-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    height: 18px;
    min-width: 0;
}

.page-crimes .cr-status-label {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7f7768;
    white-space: nowrap;
}

.page-crimes .cr-status-value {
    font-size: 14px;
    font-weight: 700;
    color: #f0f0f0;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62%;
    text-align: right;
}

.page-crimes .cr-status-value.high { color: #d16060; }
.page-crimes .cr-status-value.mid  { color: #e0b046; }
.page-crimes .cr-status-value.low  { color: #5fd07a; }

.page-crimes .cr-status-mid {
    height: 6px;
    min-height: 6px;
    max-height: 6px;
    overflow: hidden;
}

.page-crimes .cr-status-foot {
    height: 13px;
    min-height: 13px;
    max-height: 13px;
    font-size: 9px;
    color: #7c7c7c;
    line-height: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-crimes .cr-shift-track,
.page-crimes .cr-heat-track {
    border-radius: 3px;
    background: #202022;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.page-crimes .cr-shift-track > span,
.page-crimes .cr-heat-track > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-crimes .cr-shift-track > span.favorable {
    background: linear-gradient(90deg, #3c8a4f, #5fd07a);
}

.page-crimes .cr-shift-track > span.hostile {
    background: linear-gradient(90deg, #a83636, #d16060);
}

.page-crimes .cr-heat-track > span.high { background: linear-gradient(90deg, #a83636, #d16060); }
.page-crimes .cr-heat-track > span.mid  { background: linear-gradient(90deg, #b07d24, #e0b046); }
.page-crimes .cr-heat-track > span.low  { background: linear-gradient(90deg, #3c8a4f, #5fd07a); }

.page-crimes .cr-recent-dots {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}

.page-crimes .cr-recent-dot {
    width: 14px;
    height: 6px;
    border-radius: 2px;
    background: #3a3a3a;
    flex-shrink: 0;
}

.page-crimes .cr-recent-dot.high { background: #d16060; }
.page-crimes .cr-recent-dot.low  { background: #5fd07a; }

.page-crimes .cr-recent-empty {
    font-size: 9px;
    color: #6f6f6f;
    line-height: 6px;
}

@media (max-width: 760px) {
    .page-crimes .cr-header-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .page-crimes .cr-status-bar--triple {
        grid-template-columns: 1fr;
    }

    .page-crimes .cr-status-cell {
        border-right: none;
        border-bottom: 1px solid #232323;
    }

    .page-crimes .cr-status-cell:last-child {
        border-bottom: none;
    }
}

.page-crimes .cr-ops-panel {
    border: 1px solid #262626;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
}

.page-crimes .panel-header-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #262626;
    background: linear-gradient(180deg, #1c1c1e 0%, #161617 100%);
}

.page-crimes .panel-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e8ddc4;
}

.page-crimes .panel-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    border-radius: 2px;
    background: var(--cr-gold);
}

.page-crimes .cr-card-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
}

.page-crimes .cr-card {
    border: 1px solid #262626;
    border-left: 3px solid #333;
    border-radius: 8px;
    padding: 12px 16px;
    min-height: 84px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1.1fr) auto;
    align-items: center;
    gap: 0 12px;
    background: linear-gradient(165deg, #17171a 0%, #101012 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #262626;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.page-crimes .cr-card:last-child { border-bottom: 1px solid #262626; }

.page-crimes .cr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    background: linear-gradient(165deg, #17171a 0%, #101012 100%);
}

.page-crimes .cr-ready { border-left-color: var(--ok); }
.page-crimes .cr-ready:hover {
    border-color: #2f4a37;
    border-left-color: var(--ok);
    background: linear-gradient(165deg, #14201a 0%, #101012 60%);
}
.page-crimes .cr-blocked { border-left-color: var(--warn); opacity: 0.82; }
.page-crimes .cr-locked { border-left-color: #5a3535; opacity: 0.62; }

.page-crimes .cr-card--featured {
    grid-template-columns: minmax(168px, 32%) minmax(200px, 1.35fr) 92px minmax(168px, 1fr) auto;
    column-gap: 14px;
    padding: 0 16px 0 0;
    min-height: 108px;
    align-items: stretch;
}

.page-crimes .cr-card--featured .cr-card-scene {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    margin: 0;
    min-height: 108px;
    align-self: stretch;
    background-color: #0c0c0e;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px 0 0 5px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
}

.page-crimes .cr-card--featured .cr-card-scene--has-img {
    opacity: 0.95;
}

.page-crimes .cr-card--featured .cr-card-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(16, 16, 18, 0.04) 0%,
        rgba(16, 16, 18, 0.22) 62%,
        rgba(16, 16, 18, 0.62) 100%
    );
    pointer-events: none;
}

.page-crimes .cr-card--featured .cr-card-identity {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 14px 0;
    z-index: 2;
}

.page-crimes .cr-card--featured .cr-card-odds {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 0;
    z-index: 2;
}

.page-crimes .cr-card--featured .cr-card-details {
    grid-column: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding: 14px 0;
    z-index: 2;
}

.page-crimes .cr-card--featured .cr-card-action {
    grid-column: 5;
    display: flex;
    align-items: center;
    padding: 14px 0 14px 4px;
    z-index: 2;
}

.page-crimes .cr-card-identity,
.page-crimes .cr-card-odds,
.page-crimes .cr-card-details,
.page-crimes .cr-card-action {
    border-left: none;
    padding-left: 0;
    padding-right: 0;
}

.page-crimes .cr-card-name {
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.25;
    color: #f2ecda;
    text-wrap: balance;
}

.page-crimes .cr-card-flavor {
    font-size: 10px;
    line-height: 1.45;
    color: #8a8a8a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-crimes .cr-lock-hint {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    color: #b08a8a;
}

.page-crimes .cr-odds-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7f7768;
}

.page-crimes .cr-odds-val { font-size: 17px; }

.page-crimes .cr-odds-val.high { text-shadow: 0 0 12px rgba(78, 166, 90, 0.35); }

.page-crimes .cr-card-odds .odds-bar {
    height: 6px;
    background: #202022;
    border-radius: 3px;
}

.page-crimes .cr-card-details .cr-card-costs {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    border-left: none;
}

.page-crimes .cr-card-payout {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-crimes .cr-card-payout .cr-reward-val {
    font-size: 11px;
    font-weight: 700;
    color: #7fc98a;
    white-space: nowrap;
}

.page-crimes .cr-card-payout .cr-loot-none {
    font-size: 10px;
    color: #555;
}

.page-crimes .cr-loot-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.page-crimes .cr-loot-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #333;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-crimes .cr-loot-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-crimes .cr-loot-icon-ph {
    font-size: 10px;
    font-weight: 800;
    color: #8a7040;
}

.page-crimes .cr-loot-none {
    font-size: 11px;
    color: #555;
}

.page-crimes .cr-plan-btn {
    min-width: 84px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid rgba(78, 166, 90, 0.45);
    color: #d6f0da;
    background: linear-gradient(180deg, rgba(78, 166, 90, 0.22) 0%, rgba(78, 166, 90, 0.08) 100%);
}

.page-crimes .cr-plan-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(78, 166, 90, 0.34) 0%, rgba(78, 166, 90, 0.14) 100%);
    border-color: var(--ok);
}

@media (max-width: 900px) {
    .page-crimes .cr-card--featured {
        grid-template-columns: 1fr 100px;
        grid-template-rows: auto auto;
        row-gap: 8px;
        padding: 12px 16px;
        min-height: 0;
    }
    .page-crimes .cr-card--featured .cr-card-scene { display: none; }
    .page-crimes .cr-card--featured .cr-card-identity {
        grid-column: 1 / -1;
        grid-row: 1;
        padding: 0;
    }
    .page-crimes .cr-card--featured .cr-card-odds {
        grid-column: 1;
        grid-row: 2;
        padding: 0;
        border-top: 1px solid #262626;
        padding-top: 8px;
    }
    .page-crimes .cr-card--featured .cr-card-action {
        grid-column: 2;
        grid-row: 2;
        padding: 8px 0 0;
    }
    .page-crimes .cr-card--featured .cr-card-details { display: none; }
}

/* ─── Major Heists (mh-*) ─────────────────────────────────────────────────── */

.mh-page-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 0;
}

.mh-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.mh-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px;
}

.mh-subtitle {
    font-size: 10.5px;
    color: var(--text-muted);
    margin: 0;
    max-width: 520px;
}

.mh-header-stats {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
}

.mh-hstat {
    font-size: 9.5px;
    color: var(--text-muted);
    text-align: center;
}

.mh-hstat strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 2px;
}

.mh-main-nav {
    display: flex;
    gap: 8px;
}

.mh-nav-btn {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 5px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    text-decoration: none;
    background: none;
    transition: color 0.15s, border-color 0.15s;
}

.mh-nav-btn:hover { color: var(--text-main); border-color: #555; }

.mh-nav-btn.is-active {
    color: var(--text-main);
    border-color: var(--text-muted);
    background: rgba(255,255,255,0.03);
}

/* Ops shell */
.mh-ops-shell { margin-bottom: 0; }

.mh-shell-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
}

.mh-filter-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.mh-type-tabs { display: flex; gap: 4px; }

.mh-tab-btn {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: none;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.mh-tab-btn span {
    font-weight: 400;
    color: var(--text-dim);
    font-size: 9.5px;
}

.mh-tab-btn:hover { color: var(--text-main); }
.mh-tab-btn.is-active { color: var(--text-main); border-color: #555; }
.mh-tab-btn.is-ready span { color: var(--ok); }

.mh-tab-panel { padding: 16px; }

.mh-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Card */
.mh-card {
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,0.01);
    transition: border-color 0.15s;
}

.mh-card.ready { border-color: var(--ok); }
.mh-card.unavailable { border-color: var(--line); opacity: 0.85; }

/* Card head */
.mh-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,0.02);
}

.mh-card-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mh-card-badge {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.mh-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.mh-card-flavor {
    font-size: 10px;
    color: var(--text-muted);
}

.mh-card-state {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.mh-card-state.ready {
    color: var(--ok);
    border: 1px solid var(--ok);
    background: rgba(78,166,90,0.08);
}

.mh-card-state.blocked {
    color: var(--danger);
    border: 1px solid var(--danger);
    background: rgba(200,64,64,0.08);
}

/* Card body */
.mh-card-body {
    display: grid;
    grid-template-columns: 210px 1fr;
}

/* Stats column */
.mh-card-stats {
    padding: 12px 14px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Stat bars */
.mh-stat-bar {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mh-stat-icon {
    font-size: 9px;
    width: 10px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-dim);
}

.mh-stat-bar.energy .mh-stat-icon { color: #c8a030; }
.mh-stat-bar.nerve  .mh-stat-icon { color: #7060c0; }

.mh-stat-track {
    flex: 1;
    height: 3px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
}

.mh-stat-fill {
    height: 100%;
    background: var(--ok);
    border-radius: 2px;
}

.mh-stat-bar.insufficient .mh-stat-fill { background: var(--danger); }

.mh-stat-cost {
    font-size: 9px;
    color: var(--text-muted);
    min-width: 14px;
    text-align: right;
    flex-shrink: 0;
}

.mh-stat-bar.insufficient .mh-stat-cost { color: var(--warn); }

/* Odds */
.mh-odds-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.mh-odds-label {
    font-size: 9.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mh-odds-val { font-size: 13px; font-weight: 700; }
.mh-odds-val.high { color: var(--ok); }
.mh-odds-val.mid  { color: var(--warn); }
.mh-odds-val.low  { color: var(--danger); }

/* Payout block */
.mh-payout-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.mh-payout-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
}

.mh-plabel {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.mh-payout-row span:last-child,
.mh-payout-row strong {
    font-size: 10.5px;
    color: var(--text-main);
    font-weight: 600;
}

/* Meta grid */
.mh-meta-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.mh-mkey {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mh-mval {
    font-size: 9.5px;
    color: var(--text-muted);
}

/* Setup column */
.mh-card-setup {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Intel list */
.mh-intel-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mh-intel-item {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(0,0,0,0.2);
}

.mh-intel-item.is-ready  { border-color: rgba(78,166,90,0.4); }
.mh-intel-item.is-maxed  { border-color: rgba(78,166,90,0.7); }
.mh-intel-item.is-missing { border-color: rgba(200,64,64,0.4); }

.mh-intel-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.mh-intel-name {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
}

.mh-intel-role {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 1px 5px;
    border-radius: 2px;
    border: 1px solid var(--line);
    color: var(--text-dim);
}

.mh-intel-role.intel { color: #7060c0; border-color: rgba(112,96,192,0.4); }
.mh-intel-role.tool  { color: #c8a030; border-color: rgba(200,160,48,0.4); }

.mh-item-badge {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--text-dim);
    flex-shrink: 0;
}

.mh-intel-item.is-ready  .mh-item-badge,
.mh-intel-item.is-maxed  .mh-item-badge { color: var(--ok); }
.mh-intel-item.is-missing .mh-item-badge { color: var(--danger); }

.mh-intel-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mh-intel-tally {
    font-size: 9px;
    color: var(--text-dim);
    flex: 1;
}

.mh-intel-qty-label {
    font-size: 9.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.mh-intel-qty-input {
    width: 48px;
    padding: 3px 6px;
    font-size: 11px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--text-main);
    text-align: center;
}

.mh-intel-none {
    font-size: 10px;
    color: var(--text-dim);
    margin: 0;
}

/* Min state + live note */
.mh-min-state {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid var(--line);
    color: var(--text-dim);
}

.mh-min-state.is-ready  { color: var(--ok); border-color: rgba(78,166,90,0.5); background: rgba(78,166,90,0.06); }
.mh-min-state.is-missing { color: var(--danger); border-color: rgba(200,64,64,0.5); background: rgba(200,64,64,0.06); }

.mh-live-note {
    font-size: 9.5px;
    color: var(--text-dim);
    margin: 0;
}

/* Launch form */
.mh-launch-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
}

.mh-car-label {
    font-size: 9.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mh-car-select {
    padding: 5px 8px;
    font-size: 10.5px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--text-main);
    width: 100%;
}

.mh-car-select.mh-car-missing { border-color: var(--danger); color: var(--danger); }

.mh-launch-btn { align-self: flex-start; }

/* Card footer */
.mh-card-foot {
    padding: 6px 14px;
    font-size: 9.5px;
    border-top: 1px solid var(--line);
}

.mh-card-foot.mh-cooldown {
    color: var(--warn);
    background: rgba(200,144,48,0.05);
}

.mh-card-foot.mh-blocked {
    color: var(--danger);
    background: rgba(200,64,64,0.05);
}

/* Locked section */
.mh-locked-section { margin-bottom: 0; }

.mh-locked-cards { padding: 12px 16px; }

.mh-locked-card { opacity: 0.6; }

.mh-locked-meta {
    display: flex;
    gap: 20px;
    padding: 10px 14px;
    font-size: 10.5px;
    color: var(--text-muted);
}

.mh-locked-meta em {
    font-style: normal;
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}

/* Empty states */
.mh-empty-panel { margin-bottom: 0; }
.mh-empty { font-size: 11px; color: var(--text-muted); padding: 16px; }

/* Inventory */
.mh-inv-panel { margin-bottom: 0; }

.mh-inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 12px 16px;
}

.mh-inv-card {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mh-inv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mh-inv-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
}

.mh-inv-badge {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--text-dim);
    white-space: nowrap;
}

.mh-inv-badge.intel { color: #7060c0; border-color: rgba(112,96,192,0.4); }
.mh-inv-badge.tool  { color: #c8a030; border-color: rgba(200,160,48,0.4); }

.mh-inv-qty {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.mh-inv-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 9.5px;
    color: var(--text-muted);
}

.mh-inv-flavor {
    font-size: 9.5px;
    color: var(--text-dim);
    margin: 0;
}

.mh-inv-sell-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.mh-inv-sell-form {
    margin: 0;
}

.mh-inv-sell-label {
    font-size: 9.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.mh-inv-qty-input {
    width: 52px;
    padding: 3px 6px;
    font-size: 11px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--text-main);
    text-align: center;
}

@media (max-width: 900px) {
    .mh-card-body { grid-template-columns: 1fr; }
    .mh-card-stats { border-right: none; border-bottom: 1px solid var(--line); }
    .mh-header-main { flex-direction: column; }
    .mh-type-tabs { flex-wrap: wrap; }
}

/* ─── Numbers Racket (nr-*) ───────────────────────────────────────────────── */

.nr-page-header {
    padding: 16px 20px 12px;
    margin-bottom: 0;
}
.nr-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}
.nr-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px;
}
.nr-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    max-width: 560px;
}
.nr-header-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.nr-hstat {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.nr-hstat strong {
    color: var(--text-main);
    font-weight: 600;
}
.nr-daypart-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--line);
    padding-top: 8px;
}
.nr-daypart-label { color: var(--text-dim); }
.nr-daypart-name  { color: var(--text-main); font-weight: 600; }
.nr-daypart-pct   { font-weight: 600; }
.nr-daypart-pct.pos { color: var(--ok); }
.nr-daypart-pct.neg { color: var(--danger); }
.nr-daypart-note  { color: var(--text-dim); }
.nr-boost-pill {
    background: rgba(78,166,90,0.12);
    color: var(--ok);
    border: 1px solid rgba(78,166,90,0.3);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
}

/* ── Available / locked panels */
.nr-ops-panel   { margin-bottom: 0; } 
.nr-locked-section { margin-bottom: 0; opacity: 0.65; }

.nr-filter-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.nr-filter-label input { accent-color: var(--ok); }

/* ── Card grid */
.nr-card {
    display: grid;
    grid-template-columns: 1fr 150px 100px 140px auto;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px 16px;
    transition: background 0.15s;
}
.nr-card:last-child { border-bottom: none; }
.nr-card.nr-ready   { border-left: 2px solid var(--ok); padding-left: 14px; }
.nr-card.nr-unavailable { opacity: 0.8; }
.nr-locked-card     { pointer-events: none; }

/* ── Identity column */
.nr-card-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 12px;
}
.nr-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.nr-card-flavor {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}
.nr-mastery {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}
.nr-lock-tag {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
    font-style: italic;
}

/* ── Odds column */
.nr-card-odds {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 8px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
.nr-odds-val {
    font-size: 13px;
    font-weight: 700;
}
.nr-odds-val.high { color: var(--ok); }
.nr-odds-val.mid  { color: var(--warn); }
.nr-odds-val.low  { color: var(--danger); }
.nr-odds-cap {
    font-size: 9px;
    color: var(--text-dim);
}

/* ── Costs column */
.nr-card-costs {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 10px;
    border-right: 1px solid var(--line);
}
.nr-stat-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nr-stat-icon {
    font-size: 11px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.nr-stat-bar.energy .nr-stat-icon { color: #c8a030; }
.nr-stat-bar.nerve  .nr-stat-icon { color: #7060c0; }
.nr-stat-track {
    flex: 1;
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
}
.nr-stat-fill {
    height: 100%;
    background: var(--ok);
    border-radius: 2px;
    transition: width 0.3s;
}
.nr-stat-bar.insufficient .nr-stat-fill { background: var(--danger); }
.nr-stat-cost {
    font-size: 10px;
    color: var(--text-muted);
    width: 18px;
    text-align: right;
    flex-shrink: 0;
}
.nr-stat-bar.insufficient .nr-stat-cost { color: var(--warn); }
.nr-jail-risk {
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 1px;
}

/* ── Payout column */
.nr-card-payout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 10px;
    border-right: 1px solid var(--line);
    text-align: center;
}
.nr-payout-val {
    font-size: 11px;
    color: var(--text-main);
    font-weight: 600;
    white-space: nowrap;
}
.nr-respect-req {
    font-size: 9px;
    color: var(--text-dim);
}

/* ── Action column */
.nr-card-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding-left: 12px;
}
.nr-cooldown {
    font-size: 10px;
    color: var(--warn);
    white-space: nowrap;
}
.nr-blocker {
    font-size: 10px;
    color: var(--danger);
    white-space: nowrap;
}

@media (max-width: 860px) {
    .nr-card {
        grid-template-columns: 1fr 120px 90px 110px auto;
    }
}
@media (max-width: 640px) {
    .nr-card {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 8px;
        padding: 10px 12px;
    }
    .nr-card-identity { grid-column: 1 / -1; }
    .nr-card-costs    { border: none; padding: 0; }
    .nr-card-odds     { border: none; align-items: flex-start; padding: 0; }
    .nr-card-payout   { border: none; align-items: flex-start; text-align: left; padding: 0; }
    .nr-card-action   { align-items: flex-start; padding: 0; }
    .nr-header-main   { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════
   OC – Organised Crime  (group-crimes.php)
   ═══════════════════════════════════════════════════════ */

/* ── page header ── */
.oc-page-header {
    padding: 0;
    overflow: hidden;
}

.oc-hero {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.oc-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
}

.oc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(8, 8, 10, 0.15) 0%,
        rgba(8, 8, 10, 0.35) 45%,
        rgba(8, 8, 10, 0.72) 100%
    );
    pointer-events: none;
}

.oc-hero-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    padding: 22px 20px 18px;
    min-height: 280px;
}

.oc-hero-copy {
    max-width: 560px;
}

.oc-hero-kicker {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a89070;
    margin-bottom: 4px;
}

.oc-hero .oc-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: #f2ead8;
    margin: 0 0 6px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.oc-hero .oc-subtitle {
    font-size: 12px;
    color: #b8b0a4;
    margin: 0;
    line-height: 1.55;
    max-width: 520px;
}

.oc-hero-kpis {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.oc-hero-kpis .oc-kpi {
    min-width: 96px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    align-items: flex-start;
}

.oc-hero-kpis .oc-kpi em {
    color: #8a7868;
}

.oc-hero-kpis .oc-kpi strong {
    font-size: 14px;
    color: #f0e4d4;
}

.oc-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line);
}
.oc-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px;
    letter-spacing: 0.3px;
}
.oc-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    max-width: 520px;
    line-height: 1.5;
}
.oc-header-kpis {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.oc-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 80px;
}
.oc-kpi em {
    font-style: normal;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
}
.oc-kpi strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}

/* ── daypart strip ── */
.oc-daypart-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 20px;
    background: var(--bg-header);
    flex-wrap: wrap;
}
.oc-daypart-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
}
.oc-daypart-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    margin-right: 4px;
}
.oc-watch-stat {
    font-size: 11px;
    color: var(--text-muted);
}
.oc-watch-stat strong {
    color: var(--text-main);
    font-weight: 600;
}
.oc-risk-up strong   { color: var(--danger); }
.oc-risk-ok strong   { color: var(--ok); }
.oc-cooldown-inline {
    margin-left: auto;
    font-size: 11px;
    color: var(--warn);
}
.oc-cooldown-inline strong { font-weight: 700; }

/* ── payout recap ── */
.oc-payout-recap { padding: 0; overflow: hidden; }
.oc-recap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
}
.oc-recap-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border-right: 1px solid var(--line);
}
.oc-recap-cell:last-child { border-right: none; }
.oc-recap-cell span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
}
.oc-recap-cell strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--ok);
}

/* ── assigned panel ── */
.oc-assigned-body {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.oc-assigned-info {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}
.oc-assigned-info strong { color: var(--text-main); }

/* ── invites panel ── */
.oc-invite-list {
    padding: 12px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.oc-invite-card {
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-header);
}
.oc-invite-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.oc-invite-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.oc-invite-role {
    font-size: 13px;
    color: var(--text-main);
    font-weight: 600;
}
.oc-invite-from {
    font-size: 11px;
    color: var(--text-muted);
}
.oc-invite-from strong { color: var(--text-main); }
.oc-invite-card-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    flex-wrap: wrap;
}
.oc-accept-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}
.oc-accept-form select {
    font-size: 11px;
    padding: 5px 10px;
    background: var(--bg-main);
    border: 1px solid var(--line);
    color: var(--text-main);
    border-radius: 3px;
    flex: 1;
    min-width: 160px;
    max-width: 280px;
}
.oc-decline-form { margin-left: auto; }

/* ── create panel ── */
.oc-create-form { padding: 0 20px 20px; }
.oc-create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 16px;
}
.oc-create-col { display: flex; flex-direction: column; gap: 10px; }
.oc-col-head {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
    padding: 12px 0 4px;
    border-bottom: 1px solid var(--line);
}
.oc-col-note {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 6px;
}
.oc-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.oc-field-row label {
    font-size: 11px;
    color: var(--text-muted);
    width: 110px;
    flex-shrink: 0;
}
.oc-field-row input {
    flex: 1;
    font-size: 12px;
    padding: 5px 8px;
    background: var(--bg-header);
    border: 1px solid var(--line);
    color: var(--text-main);
    border-radius: 3px;
}
.oc-field-row input[type="number"] { max-width: 80px; }
.oc-create-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.oc-create-note {
    font-size: 10px;
    color: var(--text-dim);
}
.oc-col-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.oc-col-head-row .oc-col-head {
    flex: 1;
    margin: 0;
}
.oc-split-total-row {
    font-size: 11px;
    color: var(--text-muted);
    padding-top: 4px;
}
.oc-split-total {
    font-weight: 700;
}
.oc-split-total.is-valid  { color: #4caf50; }
.oc-split-total.is-invalid { color: #e05c5c; }

/* ── vault activity section (inside header panel) ── */
.oc-vault-activity-section {
    border-top: 1px solid var(--line);
    padding: 16px 20px 18px;
}
.oc-vault-activity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.oc-vault-activity-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-main);
}
.oc-vault-activity-meta {
    font-size: 10px;
    color: var(--text-dim);
}
.oc-vault-kpis {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 18px;
}
.oc-vault-kpi {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 8px;
    border-right: 1px solid var(--line);
    background: var(--bg-header);
}
.oc-vault-kpi:last-child { border-right: none; }
.oc-vault-kpi em {
    font-size: 9px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-dim);
}
.oc-vault-kpi strong {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
}
.oc-vault-kpi-ok  { color: var(--ok)     !important; }
.oc-vault-kpi-bad { color: var(--danger) !important; }
.oc-vault-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 90px;
    margin-bottom: 6px;
}
.oc-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    height: 100%;
}
.oc-chart-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--line);
}
.oc-chart-bar {
    width: 100%;
    background: #c8a84b;
    border-radius: 2px 2px 0 0;
    transition: height 0.4s ease;
    min-height: 3px;
}
.oc-chart-bar.is-low { background: #7a5a2a; }
.oc-chart-col.is-today .oc-chart-bar {
    background: #e8c870;
    box-shadow: 0 0 8px rgba(232, 200, 112, 0.35);
}
.oc-chart-day {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.oc-chart-col.is-today .oc-chart-day {
    color: var(--text-main);
    font-weight: 700;
}
.oc-chart-count {
    font-size: 9px;
    color: var(--text-dim);
}
.oc-chart-legend {
    font-size: 9px;
    color: var(--text-dim);
    margin: 4px 0 0;
}

/* ── operation panel ── */
.oc-split-bar {
    display: flex;
    border-bottom: 1px solid var(--line);
}
.oc-split-seg {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 12px;
    border-right: 1px solid var(--line);
    background: var(--bg-header);
}
.oc-split-seg:last-child { border-right: none; }
.oc-split-role {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-dim);
}
.oc-split-pct {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

/* role accent colours on split segments */
.oc-split-seg.oc-role-leader  .oc-split-pct { color: var(--warn); }
.oc-split-seg.oc-role-driver  .oc-split-pct { color: #5090d0; }
.oc-split-seg.oc-role-weapons .oc-split-pct { color: var(--danger); }
.oc-split-seg.oc-role-explosive .oc-split-pct { color: #c87830; }

/* ── crew grid ── */
.oc-crew-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.oc-crew-grid .oc-seat:nth-child(odd)  { border-right: 1px solid var(--line); }
.oc-crew-grid .oc-seat:nth-child(1),
.oc-crew-grid .oc-seat:nth-child(2)    { border-bottom: 1px solid var(--line); }

/* ── seat card ── */
.oc-seat {
    display: flex;
    flex-direction: column;
    min-height: 140px;
    transition: background 0.15s;
}
.oc-seat.is-ready   { border-left: 3px solid var(--ok); }
.oc-seat.is-pending { border-left: 3px solid var(--warn); }
.oc-seat.is-open    { border-left: 3px solid var(--line); }
.oc-seat:nth-child(even).is-ready   { border-left: none; border-right: none; border-left: 3px solid var(--ok); }

/* ── seat head ── */
.oc-seat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-header);
}
.oc-seat-role-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid;
}
.oc-role-leader   { color: var(--warn);    border-color: rgba(200,144,48,0.35); }
.oc-role-driver   { color: #5090d0;        border-color: rgba(80,144,208,0.35); }
.oc-role-weapons  { color: var(--danger);  border-color: rgba(200,64,64,0.35);  }
.oc-role-explosive{ color: #c87830;        border-color: rgba(200,120,48,0.35); }

.oc-seat-role-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
}
.oc-seat-status {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 2px 6px;
    border-radius: 3px;
}
.oc-status-is-ready   { background: rgba(78,166,90,0.15);  color: var(--ok);   }
.oc-status-is-pending { background: rgba(200,144,48,0.15); color: var(--warn); }
.oc-status-is-open    { background: var(--bg-header);       color: var(--text-dim); border: 1px solid var(--line); }

/* ── seat body ── */
.oc-seat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 6px;
}
.oc-seat-user {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.oc-seat-empty {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
}
.oc-seat-bot-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--text-dim);
    background: var(--bg-header);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 1px 5px;
    display: inline-block;
}
.oc-seat-username {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}
.oc-seat-loadout {
    font-size: 10px;
    color: var(--text-muted);
}
.oc-seat-cut {
    font-size: 10px;
    color: var(--text-dim);
    font-weight: 600;
    margin-top: auto;
}

/* ── seat actions ── */
.oc-seat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--line);
    background: var(--bg-header);
}
.oc-action-form { display: inline-flex; }
.oc-inline-form {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.oc-inline-form input[type="text"],
.oc-inline-form select {
    font-size: 11px;
    padding: 4px 8px;
    background: #0d0d0d;
    border: 1px solid var(--line);
    color: var(--text-main);
    border-radius: 3px;
    width: 110px;
}
.oc-inline-form select { width: auto; max-width: 160px; }

/* ── op footer ── */
.oc-op-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--bg-header);
    flex-wrap: wrap;
}
.oc-commit-form { display: inline-flex; }
.oc-commit-note {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}
.oc-disband-form { margin-left: auto; }
.oc-op-note {
    padding: 10px 20px;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    margin: 0;
}

/* ── responsive ── */
@media (max-width: 640px) {
    .oc-hero,
    .oc-hero-overlay {
        min-height: 240px;
    }
    .oc-hero-overlay {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }
    .oc-hero-kpis {
        width: 100%;
        justify-content: flex-start;
    }
    .oc-header-main { flex-direction: column; }
    .oc-header-kpis { justify-content: flex-start; gap: 14px; }
    .oc-kpi         { align-items: flex-start; }
    .oc-recap-grid  { grid-template-columns: 1fr 1fr; }
    .oc-recap-cell:nth-child(2) { border-right: none; }
    .oc-create-grid { grid-template-columns: 1fr; }
    .oc-crew-grid   { grid-template-columns: 1fr; }
    .oc-crew-grid .oc-seat:nth-child(odd)  { border-right: none; }
    .oc-crew-grid .oc-seat:nth-child(2)    { border-bottom: 1px solid var(--line); }
    .oc-crew-grid .oc-seat                 { border-bottom: 1px solid var(--line); }
    .oc-split-bar   { flex-wrap: wrap; }
    .oc-split-seg   { flex: 0 0 50%; }
    .oc-split-seg:nth-child(2) { border-right: none; }
    .oc-disband-form { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════
   SM – Smuggling  (smuggling.php)
   ═══════════════════════════════════════════════════════ */

/* ── page wrapper ── */
.smuggling-page { display: flex; flex-direction: column; gap: 0; }
.smuggling-page > * + * { margin-top: 16px; }

/* ── page header ── */
.sm-page-header { padding: 0; overflow: hidden; }
.sm-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line);
}
.sm-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px;
    letter-spacing: 0.3px;
}
.sm-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    max-width: 560px;
    line-height: 1.6;
}
.sm-header-kpis {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.sm-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 80px;
}
.sm-kpi em {
    font-style: normal;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
}
.sm-kpi strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}
.sm-boost-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 20px;
    background: var(--bg-header);
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.sm-boost-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
}
.sm-boost-pill {
    font-size: 10px;
    font-weight: 700;
    color: var(--ok);
    background: rgba(78,166,90,0.12);
    border: 1px solid rgba(78,166,90,0.25);
    border-radius: 3px;
    padding: 2px 8px;
}

/* ── run panel ── */
.sm-run-panel { padding: 0; overflow: hidden; }
.sm-empty-note {
    padding: 20px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.sm-preset-label {
    font-size: 10px;
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    white-space: nowrap;
}
.sm-preset-select { display: none; } /* hidden, used by JS only */

/* ── preset pill buttons ── */
.sm-preset-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.sm-preset-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    letter-spacing: 0.2px;
}
.sm-preset-pill:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
}
.sm-preset-pill.is-active {
    background: rgba(78,166,90,0.18);
    border-color: var(--ok);
    color: var(--ok);
}

/* ── presets bar inside form ── */
.sm-presets-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--line);
}
.sm-presets-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-dim);
    font-weight: 600;
    white-space: nowrap;
}

/* ── manual route map (shown in manual mode only) ── */
.sm-manual-route-map {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.sm-run-form[data-sm-mode="manual"] .sm-route-native-select { display: none; }
.sm-run-form[data-sm-mode="manual"] .sm-manual-route-map   { display: grid; }
.sm-rpick-card {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s, background 0.15s;
}
.sm-rpick-card:hover:not(.is-locked) {
    background: rgba(255,255,255,0.04);
    border-left-color: var(--text-muted);
}
.sm-rpick-card.is-selected {
    border-left-color: var(--ok);
    background: rgba(78,166,90,0.08);
}
.sm-rpick-card.is-best  { border-left-color: var(--ok); }
.sm-rpick-card.is-worst { border-left-color: var(--danger); }
.sm-rpick-card.is-locked { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.sm-rpick-path {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.sm-rpick-from, .sm-rpick-to {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}
.sm-rpick-arrow {
    font-size: 12px;
    color: var(--text-dim);
    flex-shrink: 0;
}
.sm-rpick-meta {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}
.sm-rpick-risk {
    font-size: 10px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 3px;
}
.sm-rpick-risk.is-low  { color: var(--ok);     background: rgba(78,166,90,0.12); }
.sm-rpick-risk.is-high { color: var(--danger);  background: rgba(200,64,64,0.12); }
.sm-rpick-edge { font-size: 10px; color: var(--text-dim); margin-left: auto; }
.sm-rpick-edge.is-best-edge { color: var(--ok); font-weight: 700; }
.sm-rpick-locked-tag {
    font-size: 9px;
    background: rgba(200,144,48,0.2);
    color: var(--warn);
    border-radius: 3px;
    padding: 1px 5px;
}
.sm-rpick-prices {
    display: flex;
    gap: 8px;
    font-size: 10px;
    border-top: 1px solid var(--line);
    padding-top: 6px;
    font-variant-numeric: tabular-nums;
}
.sm-rpick-buy    { color: var(--ok); }
.sm-rpick-sell   { color: var(--warn); }
.sm-rpick-margin { color: var(--text-muted); margin-left: auto; }

/* ── run grid: selects | config ── */
.sm-run-form { padding: 20px; padding-top: 0; }
.sm-run-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    margin-top: 20px;
    align-items: start;
}
.sm-run-selects {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sm-select-block { display: flex; flex-direction: column; gap: 8px; }
.sm-select-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.sm-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: var(--ok);
    flex-shrink: 0;
}
.sm-select-hint {
    font-size: 9px;
    color: var(--ok);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: auto;
}
.sm-select {
    width: 100%;
    font-size: 12px;
    padding: 10px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    color: var(--text-main);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s;
    line-height: 1.4;
}
.sm-select:focus { outline: none; border-color: var(--ok); }
.sm-select option:disabled { color: var(--text-dim); }

/* ── run config column ── */
.sm-run-config {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* quantity block */
.sm-qty-block { display: flex; flex-direction: column; gap: 8px; }
.sm-qty-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sm-qty-input {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 10px;
    background: var(--bg-header);
    border: 1px solid var(--line);
    color: var(--text-main);
    border-radius: 4px;
    text-align: center;
}
.sm-qty-range {
    width: 100%;
    accent-color: var(--ok);
    cursor: pointer;
}

/* projection box */
.sm-projection-box {
    background: var(--bg-header);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sm-proj-header {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
}
.sm-proj-net-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 14px 14px;
    gap: 4px;
}
.sm-proj-net {
    font-size: 38px;
    font-weight: 800;
    color: var(--text-dim);
    line-height: 1;
    transition: color 0.25s;
    letter-spacing: -0.5px;
}
.sm-proj-net.is-up   { color: var(--ok); }
.sm-proj-net.is-down { color: var(--danger); }
.sm-proj-net-label {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.sm-proj-success-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    gap: 4px;
    border-left: 1px solid var(--line);
    background: rgba(0,0,0,0.15);
    transition: background 0.25s;
}
.sm-proj-success-block.is-safe   { background: rgba(78,166,90,0.12); }
.sm-proj-success-block.is-risky  { background: rgba(200,144,48,0.12); }
.sm-proj-success-block.is-danger { background: rgba(200,64,64,0.12); }
.sm-proj-success-val {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-muted);
    transition: color 0.25s;
}
.sm-proj-success-block.is-safe   .sm-proj-success-val { color: var(--ok); }
.sm-proj-success-block.is-risky  .sm-proj-success-val { color: var(--warn); }
.sm-proj-success-block.is-danger .sm-proj-success-val { color: var(--danger); }
.sm-proj-success-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}
.sm-proj-breakdown {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    gap: 0;
}
.sm-proj-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 11px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sm-proj-row:last-child { border-bottom: none; }
.sm-proj-row em  { color: var(--text-muted); font-style: normal; }
.sm-proj-row span { font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; }
.sm-proj-gross em   { color: var(--ok); }
.sm-proj-gross span { color: var(--ok); }
.sm-proj-cost em    { color: var(--text-dim); }
.sm-proj-cost span  { color: var(--danger); }
.sm-proj-picks {
    font-size: 10px;
    color: var(--text-dim);
    margin: 0;
    padding: 8px 14px;
    line-height: 1.5;
    border-top: 1px solid var(--line);
}

/* submit */
.sm-submit-row { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.sm-submit-btn {
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    padding: 13px 16px;
    letter-spacing: 0.5px;
    border-radius: 4px;
    background: var(--ok);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sm-submit-btn:hover   { opacity: 0.87; }
.sm-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sm-submit-note {
    font-size: 10px;
    color: var(--text-dim);
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

/* ── tabs shell ── */
.sm-tabs-shell { display: flex; flex-direction: column; gap: 0; }
.sm-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg-header);
    padding: 0 12px;
}
.sm-tab-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    transition: color 0.15s, border-color 0.15s;
}
.sm-tab-btn.is-active {
    color: var(--text-main);
    border-bottom-color: var(--ok);
}
.sm-tab-btn:hover { color: var(--text-main); }
.sm-tab-panel { padding: 0; overflow: hidden; border-top: none; }

/* ── market table ── */
.sm-table-wrap { overflow-x: auto; }
.sm-market-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.sm-market-table th {
    padding: 10px 12px;
    background: var(--bg-header);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    vertical-align: bottom;
}
.sm-th-item  { min-width: 160px; }
.sm-th-heat  { width: 50px; text-align: center; }
.sm-th-dest  { display: block; margin-bottom: 3px; }
.sm-route-badge {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 1px 5px;
    border-radius: 2px;
    margin-top: 2px;
}
.sm-route-badge.is-best  { background: rgba(78,166,90,0.2);  color: var(--ok);    }
.sm-route-badge.is-worst { background: rgba(200,64,64,0.15); color: var(--danger); }
.sm-market-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.sm-market-table tr:last-child td { border-bottom: none; }
.sm-market-table tr:hover td { background: rgba(255,255,255,0.02); }
.sm-row-locked { opacity: 0.5; }

.sm-td-item { vertical-align: middle; }
.sm-item-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}
.sm-item-meta {
    display: block;
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 1px;
}
.sm-locked-tag {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    color: var(--danger);
    letter-spacing: 0.4px;
    background: rgba(200,64,64,0.12);
    border: 1px solid rgba(200,64,64,0.2);
    border-radius: 2px;
    padding: 1px 4px;
    margin-top: 2px;
}

.sm-td-heat { text-align: center; }
.sm-heat-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}
.sm-heat-1 { background: rgba(78,166,90,0.2);  color: var(--ok);    }
.sm-heat-2 { background: rgba(100,140,60,0.2);  color: #7aba50;      }
.sm-heat-3 { background: rgba(200,144,48,0.2);  color: var(--warn);  }
.sm-heat-4 { background: rgba(180,80,30,0.2);   color: #c86030;      }
.sm-heat-5 { background: rgba(200,64,64,0.2);   color: var(--danger); }

.sm-quote-cell {
    min-width: 110px;
    vertical-align: middle;
}
.sm-quote-cell.is-best-buy  { background: rgba(78,166,90,0.04);  }
.sm-quote-cell.is-best-sell { background: rgba(200,144,48,0.04); }
.sm-quote-flags {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.sm-trade-tag {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 1px 5px;
    border-radius: 2px;
}
.sm-trade-tag.is-buy  { background: rgba(78,166,90,0.2);  color: var(--ok);    border: 1px solid rgba(78,166,90,0.3); }
.sm-trade-tag.is-sell { background: rgba(200,144,48,0.2); color: var(--warn);  border: 1px solid rgba(200,144,48,0.3); }
.sm-buy-row, .sm-sell-row, .sm-margin-row {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.6;
}
.sm-buy-row em, .sm-sell-row em, .sm-margin-row em {
    font-style: normal;
    font-size: 9px;
    color: var(--text-dim);
    width: 10px;
    flex-shrink: 0;
}
.sm-buy-row strong, .sm-sell-row strong {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
.sm-buy-row.is-best strong  { color: var(--ok);   }
.sm-sell-row.is-best strong { color: var(--warn); }
.sm-margin-row { font-size: 10px; }
.sm-margin-row.is-up   { color: var(--ok);    }
.sm-margin-row.is-flat { color: var(--text-dim); }

/* ── route board ── */
.sm-route-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.sm-route-card {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--line);
    transition: background 0.12s;
}
.sm-route-card:nth-child(odd)  { border-right: 1px solid var(--line); }
.sm-route-card:last-child,
.sm-route-card:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.sm-route-card.is-best-edge  { border-left-color: var(--ok); }
.sm-route-card.is-worst-edge { border-left-color: var(--danger); }
.sm-route-card.is-locked     { opacity: 0.6; }
.sm-route-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.sm-route-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}
.sm-route-dest {
    font-size: 11px;
    color: var(--text-muted);
}
.sm-route-badges { display: flex; gap: 5px; margin-left: auto; }
.sm-edge-badge {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 2px;
}
.sm-edge-badge.is-best   { background: rgba(78,166,90,0.2);  color: var(--ok);    }
.sm-edge-badge.is-worst  { background: rgba(200,64,64,0.15); color: var(--danger); }
.sm-edge-badge.is-locked { background: rgba(200,144,48,0.15);color: var(--warn); }
.sm-route-flavor {
    font-size: 11px;
    color: var(--text-dim);
    margin: 0 0 10px;
    font-style: italic;
    line-height: 1.5;
}
.sm-route-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.sm-route-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sm-route-stat em {
    font-style: normal;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-dim);
}
.sm-route-stat strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}
.sm-route-stat strong.val-ok     { color: var(--ok);    }
.sm-route-stat strong.val-danger { color: var(--danger); }

/* ── fleet (cars) grid ── */
.sm-car-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
}
.sm-car-card {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background 0.12s;
}
.sm-car-card:nth-child(3n+1):not(:nth-last-child(-n+3)),
.sm-car-card:nth-child(3n+2):not(:nth-last-child(-n+3)),
.sm-car-card:nth-child(3n):not(:last-child) { border-right: 1px solid var(--line); }
.sm-car-grid .sm-car-card:nth-child(-n+3)   { } /* top row, no special style */
.sm-car-card { border-right: 1px solid var(--line); }
.sm-car-card:nth-child(3n) { border-right: none; }
.sm-car-card.is-best { border-left-color: var(--ok); }
.sm-car-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.sm-car-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}
.sm-car-reg {
    display: block;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.sm-car-best-tag {
    font-size: 9px;
    font-weight: 700;
    color: var(--ok);
    background: rgba(78,166,90,0.12);
    border: 1px solid rgba(78,166,90,0.25);
    border-radius: 3px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sm-car-class {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sm-class-chip {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--bg-header);
    border: 1px solid var(--line);
    color: var(--text-muted);
}
.sm-class-note {
    font-size: 10px;
    color: var(--text-dim);
    font-style: italic;
}
.sm-car-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.sm-car-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 50px;
}
.sm-car-stat em {
    font-style: normal;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-dim);
}
.sm-car-stat strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}
.sm-car-stat.is-hot  strong { color: var(--danger); }
.sm-car-stat.is-warm strong { color: var(--warn);   }
.sm-car-stat.is-cool strong { color: var(--ok);     }
.sm-car-stat.is-bad  strong { color: var(--danger); }
.sm-car-stat.is-worn strong { color: var(--warn);   }
.sm-car-card.is-smuggling-best { background: rgba(78,166,90,0.04); }

/* ── responsive ── */
@media (max-width: 860px) {
    .sm-run-grid         { grid-template-columns: 1fr; }
    .sm-run-config       { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .sm-qty-block        { flex: 1 1 200px; }
    .sm-projection-box   { flex: 1 1 200px; }
    .sm-submit-row       { flex: 0 0 100%; }
    .sm-car-grid         { grid-template-columns: 1fr 1fr; }
    .sm-car-card:nth-child(3n)    { border-right: 1px solid var(--line); }
    .sm-car-card:nth-child(even)  { border-right: none; }
}
@media (max-width: 640px) {
    .sm-header-main      { flex-direction: column; }
    .sm-header-kpis      { justify-content: flex-start; gap: 14px; }
    .sm-kpi              { align-items: flex-start; }
    .sm-run-config       { flex-direction: column; }
    .sm-route-grid       { grid-template-columns: 1fr; }
    .sm-route-card       { border-right: none !important; }
    .sm-route-card:last-child { border-bottom: none; }
    .sm-car-grid         { grid-template-columns: 1fr; }
    .sm-car-card         { border-right: none !important; }
}



/* ═══════════════════════════════════════════════════════════════════
/* -- Header Favours chip --------------------------------------- */
.favours-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(120deg, #1e1500 0%, #120e00 100%);
    border-color: #7a5e28 !important;
    padding: 5px 10px 5px 8px;
    color: #c9a44e;
    text-decoration: none;
    font-size: .75rem;
    white-space: nowrap;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.favours-chip .label {
    flex: 0 0 auto;
    color: #9a7840;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.favours-val {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: #e8c060;
    font-size: 12px;
    font-weight: 700;
}
.favours-chip:hover {
    border-color: #c9a44e !important;
    background: linear-gradient(120deg, #271c00 0%, #161200 100%);
    box-shadow: 0 0 8px rgba(180, 130, 40, 0.2);
    text-decoration: none;
}
.favours-chip:hover .favours-val { color: #f0d070; }

/* -- Chat roster delete ---------------------------------------- */
.chat-roster-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: #666;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    padding: 0;
    flex-shrink: 0;
}
.chat-roster-delete:hover {
    color: #e05050;
    border-color: #e05050;
    background: rgba(224,80,80,.12);
}

/* ================================================================
   NOTIFICATIONS PAGE
   ================================================================ */

.notif-page {
    width: 100%;
}
.notif-page > .panel {
    margin-bottom: 14px;
    border-radius: 8px;
    overflow: hidden;
}

/* --- Header panel --- */
.notif-header {
    padding: 0;
    border: 1px solid var(--line);
    background: linear-gradient(160deg, #161616 0%, #111 100%);
}
.notif-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    flex-wrap: wrap;
}
.notif-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .03em;
    margin: 0 0 4px;
}
.notif-unread-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 20px;
    background: rgba(224, 80, 80, .15);
    border: 1px solid rgba(224, 80, 80, .35);
    color: #e05050;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
}
.notif-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.notif-action-btn {
    font-size: .84rem;
    padding: 6px 15px;
    background: transparent;
    border: 1px solid #3a3a3a;
    color: #bbb;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.notif-action-btn:hover:not(:disabled) {
    border-color: #6a6a6a;
    color: #eee;
    background: rgba(255,255,255,.04);
}
.notif-action-btn:disabled { opacity: .35; cursor: not-allowed; }
.notif-clear-btn {
    font-size: .84rem;
    padding: 6px 15px;
    background: transparent;
    border: 1px solid rgba(200, 60, 60, .35);
    color: #c84040;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.notif-clear-btn:hover:not(:disabled) {
    border-color: #c84040;
    background: rgba(200, 60, 60, .1);
    color: #e05050;
}
.notif-clear-btn:disabled { opacity: .3; cursor: not-allowed; }

/* --- Tab navigation --- */
.notif-tab-nav {
    display: flex;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.22);
}

.notif-page .notif-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 148px;
    padding: 10px 18px;
    font-size: .92rem;
    font-weight: 600;
    color: #9a9a9a;
    text-decoration: none;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    background: #101010;
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}

.notif-page .notif-tab:hover {
    color: #e8e8e8;
    text-decoration: none;
    border-color: #444;
    background: #161616;
}

.notif-page .notif-tab.is-active {
    color: #f2ead8;
    border-color: rgba(201, 162, 74, 0.5);
    background: rgba(201, 162, 74, 0.1);
    box-shadow: inset 0 -2px 0 #c9a24a;
}

.notif-tab--settings::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .85;
}

/* --- Empty state --- */
.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
    gap: 12px;
    color: #555;
    font-size: .9rem;
    border: 1px solid var(--line);
    background: #111;
    border-radius: 8px;
}
.notif-empty span { font-size: 2.5rem; opacity: .5; }
.notif-empty p { margin: 0; }

/* --- Category filter bar --- */
.notif-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    background: #111;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.notif-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: .86rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid #2e2e2e;
    color: #9a9a9a;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.notif-filter-btn:hover {
    border-color: #555;
    color: #ccc;
    background: rgba(255,255,255,.04);
}
.notif-filter-btn.is-active {
    border-color: var(--cat-color, #888);
    color: var(--cat-color, #eee);
    background: color-mix(in srgb, var(--cat-color, #888) 12%, transparent);
    font-weight: 600;
}
.notif-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
}
.notif-filter-btn.is-active .notif-filter-count {
    background: color-mix(in srgb, var(--cat-color, #888) 25%, transparent);
}

/* --- Bulk action bar --- */
.notif-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    background: #0e0e0e;
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}
.notif-select-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: #9a9a9a;
    cursor: pointer;
    user-select: none;
}
.notif-select-all-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    min-width: 0;
    accent-color: #c0a060;
    cursor: pointer;
}
.notif-select-all-label:hover { color: #ccc; }

/* --- Notification list --- */
.notif-list-form > .notif-list {
    border: 1px solid var(--line);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    background: #111;
    transition: background .15s;
    position: relative;
}
.notif-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover {
    background: #161616;
}
.notif-item.is-unread {
    background: rgba(255,255,255,.025);
}
.notif-item.is-unread::before {
    background: #e05050;
}
.notif-item.is-unread:hover {
    background: rgba(255,255,255,.045);
}

/* Checkbox */
.notif-item-check {
    flex-shrink: 0;
    margin-top: 3px;
}
.notif-item-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    min-width: 0;
    accent-color: #c0a060;
    cursor: pointer;
}

/* Category icon circle */
.notif-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    opacity: .9;
    margin-top: 1px;
}

/* Body */
.notif-item-body {
    flex: 1;
    min-width: 0;
}
.notif-item-title {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    color: #d4d4d4;
    margin-bottom: 4px;
    line-height: 1.35;
}
.notif-item.is-unread .notif-item-title {
    color: #fff;
    font-weight: 700;
}
.notif-item-text {
    font-size: .88rem;
    color: #8a8a8a;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-item:hover .notif-item-text,
.notif-item.is-unread .notif-item-text {
    white-space: normal;
}

/* Meta (time + unread dot) */
.notif-item-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-top: 2px;
}
.notif-item-time {
    font-size: .78rem;
    color: #666;
    white-space: nowrap;
}
.notif-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e05050;
    box-shadow: 0 0 6px rgba(224, 80, 80, .5);
    flex-shrink: 0;
}

/* --- Settings panel --- */
.notif-settings-panel {
    border: 1px solid var(--line);
    background: #111;
    border-radius: 8px;
    overflow: hidden;
}
.notif-settings-intro {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(160deg, #161616 0%, #111 100%);
}
.notif-settings-intro strong {
    display: block;
    font-size: 1rem;
    color: #e8e8e8;
    margin-bottom: 6px;
}
.notif-settings-intro p {
    margin: 0;
    font-size: .88rem;
    color: #777;
    line-height: 1.55;
}
.notif-prefs-list {
    display: flex;
    flex-direction: column;
}
.notif-pref-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    cursor: pointer;
    transition: background .15s;
}
.notif-pref-row:last-child { border-bottom: none; }
.notif-pref-row:hover { background: rgba(255,255,255,.03); }
.notif-pref-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    opacity: .85;
}
.notif-pref-info {
    flex: 1;
    min-width: 0;
}
.notif-pref-info strong {
    display: block;
    font-size: .92rem;
    color: #d8d8d8;
    margin-bottom: 3px;
}
.notif-pref-info small {
    font-size: .82rem;
    color: #777;
    line-height: 1.4;
}
.notif-toggle-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
}
.notif-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.notif-toggle-track {
    display: flex;
    align-items: center;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    padding: 2px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    position: relative;
}
.notif-toggle-input:checked + .notif-toggle-track {
    background: #2a6e3a;
    border-color: #3a9e50;
}
.notif-toggle-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #555;
    transition: transform .2s, background .2s;
    flex-shrink: 0;
}
.notif-toggle-input:checked + .notif-toggle-track .notif-toggle-thumb {
    transform: translateX(18px);
    background: #5adf7a;
}
.notif-prefs-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: #0e0e0e;
    display: flex;
    justify-content: flex-end;
}

/* --- Legacy / compat --- */
.notif-actions { display: flex; gap: 10px; padding: 12px 16px; }
.notif-actions .btn { font-size: .82rem; }

/* -- Premium / Favours pages ----------------------------------- */
.prem-page { width: 100%; }

/* ── Hero banner (store page) ───────────────────────────────── */
.prem-hero {
    position: relative;
    background: linear-gradient(150deg, #0f0c00 0%, #181100 45%, #0a0800 100%);
    border: 1px solid #3a2a08;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
}
.prem-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, #8a6020 20%, #f0c848 50%, #8a6020 80%, transparent 95%);
}
.prem-hero-top {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px 18px;
}
.prem-hero-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f0c848;
    letter-spacing: -.01em;
    line-height: 1.1;
}
.prem-hero-sub {
    margin-top: 5px;
    font-size: .78rem;
    color: #6a5020;
    line-height: 1.5;
}
.prem-hero-bal {
    margin-left: auto;
    flex-shrink: 0;
    text-align: right;
}
.prem-hero-bal-num {
    font-size: 2rem;
    font-weight: 900;
    color: #f0c848;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 0 30px rgba(240,185,40,.28);
}
.prem-hero-bal-lbl {
    font-size: .67rem;
    color: #6a5020;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 4px;
}
/* underline tab nav inside hero */
.prem-tabs {
    display: flex;
    border-top: 1px solid #2a1e08;
    padding: 0 14px;
    gap: 0;
}
.prem-tab {
    padding: 11px 16px;
    font-size: .82rem;
    font-weight: 600;
    color: #6a5020;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    position: relative;
    top: 1px;
}
.prem-tab:hover { color: #c9a030; text-decoration: none; }
.prem-tab.is-active { color: #f0c848; border-bottom-color: #f0c848; }

/* ── Coming-soon / info banner ──────────────────────────────── */
.prem-coming-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(100,70,5,.1);
    border: 1px solid #3a2a08;
    border-radius: 8px;
    margin-bottom: 18px;
}
.prem-coming-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1; }
.prem-coming-title { font-size: .84rem; font-weight: 700; color: #c9a030; line-height: 1.2; }
.prem-coming-text  { font-size: .74rem; color: #6a5020; margin-top: 2px; line-height: 1.4; }

/* ── Store body wrapper ─────────────────────────────────────── */
.prem-store {
    background: #0f0f0f;
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    padding: 20px 20px 8px;
    margin-bottom: 10px;
}
.prem-store-heading {
    font-size: .68rem;
    font-weight: 700;
    color: #505050;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 14px;
    padding-bottom: 11px;
    border-bottom: 1px solid #1a1a1a;
}

/* ── Premium pages shared shell ─────────────────────────────── */
.ps-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}
.ps-header {
    background: #111;
    border: 1px solid #222;
    border-radius: 4px;
    overflow: hidden;
}
.ps-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    gap: 16px;
}
.ps-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #e8e8e8;
    line-height: 1.2;
}
.ps-subtitle {
    font-size: .75rem;
    color: #666;
    margin-top: 3px;
}
.ps-balance {
    text-align: right;
    flex-shrink: 0;
}
.ps-balance-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: #f0c040;
    line-height: 1.1;
}
.ps-balance-lbl {
    font-size: .7rem;
    color: #888;
    margin-top: 2px;
}
.coin-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: radial-gradient(circle at 38% 32%, #fffde0 0%, #f0c040 45%, #c07010 100%);
    border-radius: 50%;
    border: 1px solid #8a5800;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 2px rgba(255,255,200,0.4), 0 1px 2px rgba(0,0,0,0.5);
}
.ps-nav {
    display: flex;
    border-top: 1px solid #1e1e1e;
    background: #0d0d0d;
}
.ps-nav-link {
    padding: 10px 18px;
    font-size: .78rem;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-right: 1px solid #1e1e1e;
    transition: color .15s, background .15s;
}
.ps-nav-link:hover { color: #f0c040; background: #141200; }
.ps-nav-link.is-active { color: #f0c040; background: #181400; }

/* ── Purchase Gold store ────────────────────────────────────── */
.pg-store { padding: 0; overflow: hidden; }
.mkt-listings-panel { padding: 0; overflow: hidden; }
.gs-panel { padding: 0; overflow: hidden; }

/* ── Gold Shop cards ─────────────────────────────────────────── */
.gs-grid {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #111;
}
.gs-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #1c1c1c;
    background: #0f0f0f;
}
.gs-card:last-child { border-bottom: none; }
.gs-card-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}
.gs-card-name {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #e8e8e8;
    margin-bottom: 3px;
}
.gs-card-desc {
    font-size: .75rem;
    color: #666;
    line-height: 1.4;
}
.gs-card-body { flex: 1; min-width: 0; }
.gs-card-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.gs-card-cost {
    font-size: .78rem;
    font-weight: 700;
    color: #f0c040;
    white-space: nowrap;
}
.gs-card-form { display: flex; align-items: center; gap: 6px; }
.gs-qty-row { display: flex; gap: 6px; align-items: center; }
.gs-qty-input {
    width: 60px;
    background: #181818;
    border: 1px solid #2e2e2e;
    color: #e0e0e0;
    padding: 6px 8px;
    font-size: .8rem;
    border-radius: 3px;
}
.gs-btn {
    background: #1a1200;
    border: 1px solid #5a4520;
    color: #f0c040;
    font-size: .72rem;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.gs-btn:hover { background: #261900; border-color: #f0c040; }
.gs-btn-gold {
    background: linear-gradient(135deg, #e4c040 0%, #f0a000 100%);
    color: #1a1000;
    border-color: #b07800;
    font-weight: 700;
}
.gs-btn-gold:hover { background: linear-gradient(135deg, #f0d050 0%, #f8b800 100%); border-color: #d09000; }
.gs-panel-desc { font-size: 0.82rem; color: #8a7a60; margin: 0; padding: 10px 20px 6px; }
.gs-state-badge   { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:6px 14px; border-radius:3px; white-space:nowrap; border:1px solid; }
.gs-state-locked  { color:#555; border-color:#2a2a2a; background:#111; }
.gs-state-skill   { color:#c08030; border-color:#5a3a00; background:#1a1000; }
.gs-owned-badge { font-size:.72rem; font-weight:700; color:#4caf50; text-transform:uppercase; letter-spacing:.06em; padding:6px 14px; border:1px solid #2a4a2a; border-radius:3px; background:#0a1e0a; white-space:nowrap; }

/* ── Gold Shop table layout (Available Items) ────────────────────── */
.gs-table { background: #111; }
.gs-cat-header {
    padding: 7px 20px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #6a5a30;
    background: #0a0a0a;
    border-top: 1px solid #1e1e1e;
    border-bottom: 1px solid #1e1e1e;
}
.gs-cat-header:first-child { border-top: none; }
.gs-row {
    display: grid;
    grid-template-columns: 40px 1fr 90px 86px 108px;
    align-items: center;
    padding: 11px 20px;
    background: #0f0f0f;
    border-bottom: 1px solid #181818;
    transition: background .12s;
}
.gs-row:hover { background: #131313; }
.gs-row-icon  { font-size: 1.35rem; text-align: center; }
.gs-row-info  { padding: 0 16px; min-width: 0; }
.gs-row-name  {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #e0e0e0;
    margin-bottom: 2px;
}
.gs-row-desc  { font-size: .71rem; color: #545454; line-height: 1.35; }
.gs-row-meta  { color: #7a5a20; font-style: italic; }
.gs-row-cost  {
    font-size: 14px;
    font-weight: 700;
    color: #f0c040;
    text-align: right;
    padding-right: 10px;
    white-space: nowrap;
    line-height: 1;
}
.gs-cost-g    { font-size: 11px; font-weight: 600; opacity: .7; margin-left: 1px; }
.gs-row-qty   { display: flex; justify-content: center; align-items: center; }
.gs-row-action { display: flex; justify-content: flex-end; align-items: center; }
@media (max-width: 640px) {
    .gs-row { grid-template-columns: 32px 1fr 60px 70px 88px; }
    .gs-row-info { padding: 0 10px; }
}
.pg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 16px;
    background: #111;
}
@media (max-width: 900px) { .pg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .pg-grid { grid-template-columns: repeat(2, 1fr); } }
.pg-card {
    position: relative;
    border: 2px solid #2e2e2e;
    border-radius: 6px;
    overflow: hidden;
    background: #0f0f0f;
    cursor: pointer;
    transition: border-color .18s, transform .15s;
    user-select: none;
}
.pg-card:hover { border-color: #f0c040; transform: translateY(-2px); }
.pg-card--popular { border-color: #6a4e10; }
.pg-card--popular:hover { border-color: #f0c040; }
.pg-card--promo:hover { border-color: #f0c040; }
.pg-promo-stripe {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 5px 6px;
    background: linear-gradient(
        90deg,
        rgba(240, 192, 64, 0) 0%,
        rgba(240, 192, 64, 0.72) 12%,
        rgba(240, 192, 64, 0.78) 50%,
        rgba(240, 192, 64, 0.72) 88%,
        rgba(240, 192, 64, 0) 100%
    );
    color: #1a0f00;
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 236, 170, 0.45);
    border-top: 1px solid rgba(255, 228, 140, 0.35);
    border-bottom: 1px solid rgba(0, 0, 0, 0.28);
    pointer-events: none;
}
.pg-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #0a0a0a;
    border-bottom: 1px solid #1c1c1c;
}
.pg-art-img {
    display: block;
    width: 75%;
    height: 75%;
    object-fit: contain;
    object-position: center;
}
.pg-art--inset .pg-art-img {
    width: 68%;
    height: 68%;
}
.pg-card-footer {
    padding: 7px 8px 9px;
    text-align: center;
    background: #111;
    border-top: 1px solid #242424;
}
.pg-amount {
    font-size: .78rem;
    font-weight: 700;
    color: #d8d8d8;
    line-height: 1.3;
}
.pg-bonus { font-size: .62rem; color: #58b858; line-height: 1.4; }
.pg-price { font-size: .88rem; font-weight: 800; color: #f0c040; margin-top: 1px; }
.pg-price-orig { font-size: .72rem; color: #555555; text-decoration: line-through; margin-top: 2px; }

.pg-promo-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a1200;
    border: 1px solid #6a4e10;
    padding: 11px 18px;
    margin-bottom: 12px;
    border-radius: 2px;
}
.pg-promo-icon { font-size: 16px; flex-shrink: 0; }
.pg-promo-label { font-size: 13px; font-weight: 700; color: #f0c040; flex: 1; }
.pg-promo-expires { font-size: 11px; color: #8a7040; white-space: nowrap; }
.pg-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 20px;
    gap: 8px;
    background: #0d0d0d;
    border-top: 1px solid #1e1e1e;
}
.pg-card-name {
    width: 100%;
    padding: 7px 8px 6px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #666;
    background: #0d0d0d;
    border-bottom: 1px solid #1c1c1c;
    text-align: center;
}
.pg-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #2e2e2e;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .1em;
    border-bottom: 1px solid #1c1c1c;
}
.pg-buy-btn {
    min-width: 140px;
    padding: 9px 28px;
    font-size: .84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 20px;
    background: #2a2a2a !important;
    border: 1px solid #3a3a3a !important;
    color: #555 !important;
    cursor: not-allowed;
}

/* ── Marketplace table layout ────────────────────────────────── */
.mkt-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 14px;
    align-items: stretch;
}
@media (max-width: 750px) { .mkt-layout { grid-template-columns: 1fr; } }
.mkt-main-col { display: flex; flex-direction: column; gap: 14px; }
.mkt-side-col  { display: flex; flex-direction: column; gap: 14px; }

/* Single-column stacked layout */
.mkt-stack { display: flex; flex-direction: column; gap: 4px; }

/* Inline create form */
.mkt-inline-form {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 14px 18px 16px;
    flex-wrap: wrap;
}
.mkt-inline-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 160px;
}
.mkt-inline-btn {
    flex-shrink: 0;
    align-self: flex-end;
    width: auto !important;
    padding: 9px 28px !important;
    white-space: nowrap;
}

/* Avg price as a slim bar */
.mkt-avg-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px !important;
    text-align: left !important;
}
.mkt-avg-bar .mkt-avg-label { margin-bottom: 0; }
.mkt-avg-bar .mkt-avg-price { font-size: 1.1rem; }
.mkt-avg-bar .mkt-avg-sub   { margin-top: 0; margin-left: auto; }

/* ── Marketplace table ───────────────────────────────────────── */
.mkt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    table-layout: fixed;
}
.mkt-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: .68rem;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 1px solid #1e1e1e;
    background: #0d0d0d;
}
/* Active listings: 3 cols */
.mkt-table:not(.txn-table) th:nth-child(1) { width: 32%; }
.mkt-table:not(.txn-table) th:nth-child(2) { width: 38%; }
.mkt-table:not(.txn-table) th:nth-child(3) { width: 30%; }
/* Transactions: 4 cols */
.txn-table th:nth-child(1) { width: 18%; }
.txn-table th:nth-child(2) { width: 16%; }
.txn-table th:nth-child(3) { width: 16%; }
.txn-table th:nth-child(4) { width: auto; }
.mkt-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #181818;
    vertical-align: middle;
}
.mkt-table tr:last-child td { border-bottom: none; }
.mkt-table tr:hover td { background: #121212; }
.mkt-row-mine td { background: #0e0e08; }
.mkt-row-mine:hover td { background: #141408; }

/* amount column */
.mkt-amount-badge {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f0c040;
}
.mkt-amount-unit {
    font-size: .78rem;
    color: #666;
    margin-left: 4px;
}
.mkt-own-tag {
    display: inline-block;
    margin-left: 6px;
    background: #1e1a00;
    border: 1px solid #4a3800;
    color: #a08020;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
}

/* price column */
.mkt-price-each  { font-size: 1rem; font-weight: 700; color: #e0e0e0; }
.mkt-price-label { font-size: .74rem; color: #555; margin-left: 2px; }
.mkt-price-total { font-size: .74rem; color: #555; margin-top: 3px; }

/* action column */
.mkt-accept-cell  { white-space: nowrap; }
.mkt-accept-form  { display: flex; align-items: center; gap: 7px; }
.mkt-qty-input {
    flex: 1;
    min-width: 0;
    background: #111;
    border: 1px solid #2a2a2a;
    color: #e0e0e0;
    border-radius: 4px;
    padding: 5px 7px;
    font-size: .88rem;
    text-align: center;
}
.mkt-buy-btn {
    background: #1a4a1a !important;
    border: 1px solid #2a6a2a !important;
    color: #5de05d !important;
    font-weight: 700;
    padding: 5px 14px !important;
    border-radius: 4px;
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s;
}
.mkt-buy-btn:hover { background: #224e22 !important; }
.mkt-cancel-btn {
    background: transparent !important;
    border: 1px solid #3a2020 !important;
    color: #884444 !important;
    font-size: .75rem;
    padding: 4px 10px !important;
}
.mkt-cancel-btn:hover { border-color: #aa3333 !important; color: #cc5555 !important; }
.mkt-status-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mkt-status-open     { background: #1a3a1a; color: #5a9a5a; }
.mkt-status-filled   { background: #1a1a3a; color: #5a5aaa; }
.mkt-status-cancelled{ background: #2a1a1a; color: #884444; }

/* empty state */
.mkt-empty-state {
    padding: 40px 20px;
    text-align: center;
}
.mkt-empty-icon { font-size: 2rem; margin-bottom: 10px; opacity: .4; }
.mkt-empty-msg  { font-size: .88rem; font-weight: 600; color: #555; }
.mkt-empty-sub  { font-size: .75rem; color: #3a3a3a; margin-top: 4px; }

/* ── Create listing panel ────────────────────────────────────── */
.mkt-create-panel { overflow: hidden; }
.mkt-create-header {
    padding: 14px 18px 12px;
    border-bottom: 1px solid #1e1e1e;
    background: #0d0d0d;
}
.mkt-create-title {
    font-size: .72rem;
    font-weight: 800;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.mkt-create-balance {
    font-size: .75rem;
    color: #555;
    margin-top: 4px;
}
.mkt-create-balance strong { color: #f0c040; }
.mkt-form-body { padding: 18px 18px 20px; }
.mkt-create-form { display: flex; flex-direction: column; gap: 16px; }
.mkt-field { display: flex; flex-direction: column; gap: 6px; }
.mkt-label {
    font-size: .68rem;
    font-weight: 700;
    color: #777;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.mkt-input-row { display: flex; align-items: center; gap: 8px; }
.mkt-input {
    flex: 1;
    min-width: 0;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    color: #fff;
    padding: 9px 12px;
    font-size: .9rem;
}
.mkt-input:focus { outline: none; border-color: #f0c040; background: #0d0c00; }
.mkt-prefix { font-size: .82rem; color: #555; flex-shrink: 0; }
.mkt-unit   { font-size: .75rem; color: #555; flex-shrink: 0; white-space: nowrap; }
.mkt-list-btn {
    margin-top: 4px;
    width: 100%;
    padding: 11px;
    background: #1e5c1e;
    border: 1px solid #2a7a2a;
    border-radius: 4px;
    color: #6ee06e;
    font-size: .85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background .15s;
}
.mkt-list-btn:hover { background: #246024; }
.mkt-form-divider {
    height: 1px;
    background: #1a1a1a;
    margin: 16px 0 14px;
}
.mkt-form-note {
    font-size: .7rem;
    color: #444;
    line-height: 1.7;
    text-align: center;
    margin: 0;
}

/* avg sale price widget */
.mkt-avg-panel {
    padding: 16px;
    text-align: center;
}
.mkt-avg-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #555;
    margin-bottom: 6px;
}
.mkt-avg-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f0c040;
    line-height: 1.2;
}
.mkt-avg-unit {
    font-size: .75rem;
    font-weight: 400;
    color: #888;
}
.mkt-avg-sub {
    font-size: .65rem;
    color: #555;
    margin-top: 4px;
}
.mkt-avg-none {
    font-size: .8rem;
    color: #444;
    font-style: italic;
}

.mkt-avg-inline {
    margin-left: auto;
    font-size: .78rem;
    color: #f0c040;
}
.mkt-avg-inline strong { color: #f0c040; font-weight: 700; }
.mkt-avg-inline-sub { color: #a07820; font-size: .72rem; }

.mkt-sell-toggle {
    margin-left: 14px;
    background: #1a4a1a;
    border: 1px solid #2a6a2a;
    color: #5de05d;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.mkt-sell-toggle:hover { background: #224e22; }

.mkt-sell-divider {
    border: none;
    border-top: 1px solid #1e1e1e;
    margin: 0;
}

/* ── Transactions page ───────────────────────────────────────── */
.txn-table .txn-date    { color: #666; font-size: .78rem; white-space: nowrap; }
.txn-table .txn-credit  { color: #5abf5a; font-weight: 700; }
.txn-table .txn-debit   { color: #bf5a5a; font-weight: 700; }
.txn-table .txn-balance { color: #f0c040; font-weight: 600; }
.txn-table .txn-note    { color: #999; font-size: .8rem; }

/* ── Shared balance chip (perks + escrow pages) ─────────────── */
.prem-balance-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #1a1200 0%, #0e0c00 100%);
    border: 1px solid #5a4520;
    border-radius: 8px;
    margin-bottom: 24px;
}
.prem-balance-icon { font-size: 2.2rem; }
.prem-balance-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #e8c060;
    font-variant-numeric: tabular-nums;
}
.prem-balance-label { font-size: .8rem; color: #8a7040; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
/* shared subnav (perks + escrow pages) */
.prem-subnav { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 4px 16px; }
.prem-subnav-link {
    padding: 7px 16px;
    border-radius: 6px;
    border: 1px solid var(--line);
    color: #aaa;
    text-decoration: none;
    font-size: .85rem;
    transition: color .15s, border-color .15s, background .15s;
}
.prem-subnav-link:hover { color: #fff; border-color: #555; background: #1a1a1a; text-decoration: none; }
.prem-subnav-link.is-active { color: #e8c060; border-color: #7a5e28; background: #1a1200; }
/* legacy notice block */
.prem-disabled-notice {
    padding: 16px 20px;
    background: rgba(255,200,60,.05);
    border: 1px solid #5a4520;
    border-radius: 6px;
    color: #b89040;
    font-size: .88rem;
    margin-bottom: 20px;
}
/* ── Package grid + cards ───────────────────────────────────── */
.ps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media (max-width: 1100px) { .ps-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  { .ps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .ps-grid { grid-template-columns: repeat(2, 1fr); } }
/* ── Package card ─────────────────────────────────────────── */
.ps-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #111;
    border: 1px solid #242424;
    border-radius: 10px;
    padding: 24px 16px 18px;
    overflow: hidden;
    transition: border-color .2s, transform .18s, box-shadow .2s;
}
.ps-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #221500;
}
.ps-card:hover {
    border-color: #3a2a0c;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0,0,0,.5);
}
.ps-card--popular {
    border-color: #6a5010;
    background: #0d0b00;
}
.ps-card--popular::before {
    background: linear-gradient(90deg, #4a3208 0%, #f0c040 50%, #4a3208 100%);
}
.ps-card--popular:hover {
    border-color: #a07828;
    box-shadow: 0 6px 24px rgba(160,130,30,.22);
    transform: translateY(-3px);
}
.ps-card--popular::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 38%, rgba(255,210,60,.025) 50%, transparent 62%);
    animation: ps-shimmer 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ps-shimmer {
    0%, 100% { opacity: 0; transform: translateX(-60%); }
    50%       { opacity: 1; transform: translateX(60%); }
}
.ps-card-tag {
    position: absolute;
    top: 10px; right: 10px;
    background: #f0c040;
    color: #0e0a00;
    font-size: .55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 3px;
    line-height: 1.8;
}
.ps-card-amount {
    font-size: 2.6rem;
    font-weight: 900;
    color: #f0c040;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    margin-top: 4px;
}
.ps-card-unit {
    font-size: .6rem;
    color: #3a3a3a;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 5px;
    margin-bottom: 14px;
}
.ps-card-bonus {
    font-size: .68rem;
    font-weight: 700;
    color: #52aa52;
    padding: 3px 10px;
    background: rgba(50,140,50,.1);
    border: 1px solid rgba(50,140,50,.2);
    border-radius: 4px;
    margin-bottom: 14px;
}
.ps-card-price {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #1c1c1c;
    width: 100%;
    font-size: 1.45rem;
    font-weight: 800;
    color: #e8e8e8;
    line-height: 1;
    margin-bottom: 12px;
}
.ps-card--popular .ps-card-price { color: #f0c040; border-top-color: #181200; }
.ps-card-btn {
    width: 100%;
    padding: 9px 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 6px;
    background: #161616 !important;
    border: 1px solid #242424 !important;
    color: #363636 !important;
    cursor: not-allowed;
}
.prem-ledger { width: 100%; border-collapse: collapse; font-size: .85rem; }
.prem-ledger th { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); color: #888; font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.prem-ledger td { padding: 10px 12px; border-bottom: 1px solid #1e1e1e; color: var(--text-main); }
.prem-ledger tr:last-child td { border-bottom: none; }
.prem-ledger .credit { color: #60c060; }
.prem-ledger .debit  { color: #e05050; }
.prem-perks { display: flex; flex-direction: column; gap: 24px; }
.prem-perk-category { }
.prem-perk-category-title { font-size: .8rem; color: #888; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.prem-perk-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #1a1a1a;
}
.prem-perk-row:last-child { border-bottom: none; }
.prem-perk-icon { font-size: 1.6rem; flex-shrink: 0; width: 36px; text-align: center; }
.prem-perk-info { flex: 1; min-width: 0; }
.prem-perk-name { font-weight: 600; font-size: .92rem; color: var(--text-main); }
.prem-perk-desc { font-size: .8rem; color: #888; margin-top: 2px; }
.prem-perk-cost { font-size: .85rem; color: #e8c060; white-space: nowrap; flex-shrink: 0; }
/* -- Marketplace (escrow) -------------------------------------- */
.esc-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 700px) { .esc-layout { grid-template-columns: 1fr; } }
/* create form panel */
.esc-create-body { padding: 16px 20px 20px; }
.esc-create-hint { font-size: .82rem; color: #888; margin: 0 0 18px; line-height: 1.5; }
.esc-form { display: flex; flex-direction: column; gap: 14px; }
.esc-field { display: flex; flex-direction: column; gap: 5px; }
.esc-label { font-size: .78rem; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: .04em; }
.esc-label-opt { font-weight: 400; color: #666; text-transform: none; letter-spacing: 0; }
.esc-field-hint { font-size: .72rem; color: #666; }
.esc-input-wrap { display: flex; align-items: center; }
.esc-input-prefix,
.esc-input-suffix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 36px;
    background: #1a1a1a;
    border: 1px solid var(--line);
    color: #888;
    font-size: .82rem;
    flex-shrink: 0;
}
.esc-input-prefix { border-right: none; border-radius: 4px 0 0 4px; }
.esc-input-suffix { border-left: none; border-radius: 0 4px 4px 0; }
.esc-input {
    flex: 1;
    height: 36px;
    padding: 0 10px;
    background: #0e0e0e;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text-main);
    font-size: .88rem;
    outline: none;
    transition: border-color .15s;
    width: 100%;
}
.esc-input-wrap .esc-input { border-radius: 0; }
.esc-input:focus { border-color: #555; }
.esc-submit-btn { margin-top: 4px; width: 100%; }
/* listings */
.esc-empty { padding: 20px; color: #666; font-size: .82rem; }
.esc-listings { display: flex; flex-direction: column; }
.esc-listing {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #1c1c1c;
    transition: background .12s;
}
.esc-listing:last-child { border-bottom: none; }
.esc-listing:hover { background: #0f0f0f; }
.esc-listing.is-mine { background: rgba(255,200,60,.02); }
.esc-listing-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.esc-listing-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: #e8c060;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.esc-listing-amount small { font-size: .65rem; font-weight: 600; color: #9a7840; margin-left: 2px; vertical-align: middle; }
.esc-listing-meta { font-size: .8rem; color: #888; min-width: 0; }
.esc-listing-meta a { color: #ccc; text-decoration: none; }
.esc-listing-meta a:hover { color: #fff; text-decoration: underline; }
.esc-listing-notes { color: #666; font-size: .75rem; }
.esc-listing-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.esc-listing-price { font-size: 1rem; font-weight: 700; color: #70c070; white-space: nowrap; }
.esc-mine-label { font-size: .7rem; color: #666; }
.panel-count { margin-left: 8px; font-size: .72rem; background: #222; border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; color: #888; }

/* ================================================================
   CASINO LOBBY  cs-*
   ================================================================ */

.cs-page { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* --- Lobby header -------------------------------------------- */
.cs-lobby {
    background: linear-gradient(135deg, #0e0a00 0%, #0a0800 60%, #080808 100%);
    border: 1px solid #2a2000;
    border-radius: 8px;
    padding: 28px 28px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cs-lobby-brand { flex: 1; min-width: 200px; }
.cs-suit-row { font-size: 1.4rem; letter-spacing: 0.5rem; color: #7a5e28; display: block; margin-bottom: 8px; }
.cs-lobby-title { font-family: var(--font-title); font-size: 1.9rem; font-weight: 700; color: #e8c060; margin: 0 0 6px; line-height: 1.1; }
.cs-lobby-sub { color: #888; font-size: .88rem; margin: 0; }

.cs-lobby-tiles { display: flex; gap: 12px; flex-wrap: wrap; }
.cs-lobby-tile {
    background: rgba(255,255,255,.03);
    border: 1px solid #222;
    border-radius: 6px;
    padding: 10px 16px;
    min-width: 120px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cs-lobby-tile span { font-size: .72rem; color: #666; text-transform: uppercase; letter-spacing: .05em; }
.cs-lobby-tile strong { font-size: 1.2rem; font-weight: 700; color: #fff; }
.cs-lobby-tile small { font-size: .68rem; color: #555; }

/* --- Limits bar --------------------------------------------- */
.cs-limits-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-limit-pill {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 14px;
    min-width: 100px;
}
.cs-limit-pill em { font-style: normal; font-size: .7rem; color: #666; text-transform: uppercase; letter-spacing: .05em; }
.cs-limit-pill strong { font-size: .95rem; font-weight: 700; color: #fff; }
.cs-limit-pill.is-closed strong { color: #555; }
.cs-limit-unlimited { color: #4ea65a !important; font-weight: 800 !important; }

/* --- Casino cards ------------------------------------------- */
.cs-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.cs-card {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, transform .12s;
}
.cs-card:hover { border-color: #333; transform: translateY(-2px); }
.cs-card.is-unowned { opacity: .65; }
.cs-card.is-unowned:hover { opacity: 1; }

.cs-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.02);
    min-height: 66px;
}
.cs-card.is-open .cs-card-head {
    background: linear-gradient(135deg, rgba(232,192,96,.06) 0%, rgba(255,255,255,.01) 100%);
    border-bottom-color: rgba(232,192,96,.12);
}
.cs-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(232,192,96,.1);
    border: 1px solid rgba(232,192,96,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #e8c060;
    flex-shrink: 0;
}
.cs-card.is-unowned .cs-card-icon {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
    color: #555;
}
.cs-card-title { font-size: 1.05rem; font-weight: 700; color: #e0d4b8; letter-spacing: .02em; flex: 1; }

.cs-card-badge {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 2px 8px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
}
.cs-card-badge.is-active { background: rgba(72,167,101,.18); color: #48a765; }
.cs-card-badge.is-idle   { background: rgba(255,255,255,.06); color: #888; }
.cs-card-badge.is-closed { background: rgba(255,255,255,.04); color: #555; }

.cs-card-desc {
    font-size: .82rem;
    color: #777;
    padding: 10px 16px;
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

.cs-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
}
.cs-card-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border-right: 1px solid var(--line);
}
.cs-card-stat:nth-child(2n) { border-right: none; }
.cs-card-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.cs-card-stat span { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: #505050; }
.cs-card-stat strong { font-size: .88rem; font-weight: 700; color: #c8bfae; }
.cs-stat-green { color: #48a765 !important; }

.cs-card-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
}
.cs-card-footer .cs-enter-btn,
.cs-card-footer form,
.cs-card-footer .cs-buy-btn { width: 100%; text-align: center; box-sizing: border-box; }
.cs-card-footer .cs-enter-btn {
    background: #2a7a3b;
    color: #fff;
    border-color: #2a7a3b;
}
.cs-card-footer .cs-enter-btn:hover { background: #34994a; border-color: #34994a; }
.cs-card-footer .cs-buy-btn {
    background: #8b2020;
    color: #fff;
    border: 1px solid #8b2020;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: .85rem;
    width: 100%;
    box-sizing: border-box;
}
.cs-card-footer .cs-buy-btn:hover:not(:disabled) { background: #a82828; border-color: #a82828; }
.cs-card-footer .cs-buy-btn:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 700px) {
    .cs-card-grid { grid-template-columns: 1fr 1fr; }
    .cs-lobby { flex-direction: column; }
    .cs-lobby-tiles { justify-content: stretch; }
    .cs-lobby-tile { flex: 1; }
}
@media (max-width: 480px) {
    .cs-card-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   RACE TRACK  rt-*
   ================================================================ */

.rt-page { max-width: 900px; margin: 0 auto; }
.rt-panel { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }

/* Track wrapper */
.rt-track-wrap { position: relative; border-top: 1px solid var(--line); overflow: hidden; }

.rt-track-header {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(0,0,0,.28);
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #505050;
    gap: 0;
}
.rt-th-lane  { width: 32px; text-align: center; flex-shrink: 0; }
.rt-th-name  { width: 134px; flex-shrink: 0; padding-left: 4px; }
.rt-th-role  { width: 94px; flex-shrink: 0; }
.rt-th-odds  { width: 56px; text-align: center; flex-shrink: 0; }
.rt-th-track { flex: 1; padding-left: 8px; }

/* Individual lane */
.rt-lane {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.04);
    cursor: pointer;
    transition: background .12s;
    min-height: 52px;
    gap: 0;
    user-select: none;
}
.rt-lane:last-child  { border-bottom: none; }
.rt-lane:nth-child(even) { background: rgba(255,255,255,.013); }
.rt-lane:hover { background: rgba(232,192,96,.055) !important; }
.rt-lane.is-selected {
    background: rgba(232,192,96,.09) !important;
    border-left: 3px solid #e8c060;
}
.rt-lane.is-winner {
    background: rgba(72,167,101,.09) !important;
    border-left: 3px solid #48a765;
}
.rt-lane.is-selected.is-winner {
    background: rgba(72,167,101,.14) !important;
    border-left: 3px solid #48a765;
}
@keyframes rt-lane-flash {
    0%,100% { background: rgba(72,167,101,.09); }
    50%      { background: rgba(72,167,101,.25); }
}
.rt-lane.is-flash { animation: rt-lane-flash 0.3s ease-in-out 2; }

.rt-lane-num {
    width: 32px;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    color: #505050;
    flex-shrink: 0;
}
.rt-lane.is-selected .rt-lane-num { color: #e8c060; }
.rt-lane.is-winner   .rt-lane-num { color: #48a765; }

.rt-lane-name {
    width: 134px;
    font-size: .82rem;
    font-weight: 600;
    color: #c8bfae;
    flex-shrink: 0;
    padding: 0 6px;
}
.rt-lane.is-selected .rt-lane-name { color: #e8c060; }
.rt-lane.is-winner   .rt-lane-name { color: #48a765; }

.rt-lane-role {
    width: 94px;
    font-size: .63rem;
    color: #545454;
    text-transform: uppercase;
    letter-spacing: .06em;
    flex-shrink: 0;
}

.rt-lane-odds {
    width: 56px;
    font-size: .8rem;
    font-weight: 800;
    color: #48a765;
    text-align: center;
    flex-shrink: 0;
}
.rt-lane.is-winner .rt-lane-odds { color: #5dd47b; }

/* Track strip inside each lane */
.rt-lane-track {
    flex: 1;
    position: relative;
    height: 52px;
    background: linear-gradient(90deg, #1b1308 0%, #241b0b 100%);
    border-left: 1px solid rgba(255,255,255,.05);
    overflow: hidden;
}

/* Subtle dirt stripe texture */
.rt-lane-dirt {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 42px,
        rgba(255,255,255,.016) 42px,
        rgba(255,255,255,.016) 43px
    );
    pointer-events: none;
}

/* The horse emoji */
.rt-horse {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.45rem;
    line-height: 1;
    z-index: 2;
    filter: drop-shadow(0 0 3px rgba(0,0,0,.9));
    /* left transitions are set by JS after race */
    will-change: left;
}
.rt-lane.is-winner .rt-horse {
    filter: drop-shadow(0 0 6px rgba(72,167,101,.9)) drop-shadow(0 0 14px rgba(72,167,101,.45));
}

/* Galloping bounce */
@keyframes rt-gallop {
    0%, 100% { margin-top: 0;   }
    30%       { margin-top: -3px; }
    70%       { margin-top: 2px;  }
}
.rt-horse.is-racing {
    animation: rt-gallop 0.22s ease-in-out infinite;
}

/* Finish flag + checkered line */
.rt-finish-flag {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    z-index: 3;
    opacity: .55;
    pointer-events: none;
}
.rt-finish-line {
    position: absolute;
    right: 2px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: repeating-linear-gradient(
        to bottom,
        #e8c060 0px, #e8c060 5px,
        #222 5px, #222 10px
    );
    opacity: .55;
    z-index: 3;
    pointer-events: none;
}

/* Bet panel */
.rt-bet-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    background: rgba(0,0,0,.1);
}
.rt-select-hint {
    flex: 1;
    font-size: .78rem;
    color: #666;
    min-width: 130px;
}
.rt-select-hint strong { color: #c8bfae; }
.rt-bet-input {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: #e0d4b8;
    font-size: .88rem;
    padding: 8px 12px;
    width: 130px;
    outline: none;
}
.rt-bet-input:focus { border-color: rgba(232,192,96,.35); background: rgba(255,255,255,.08); }

.rt-run-btn {
    background: linear-gradient(135deg, #e8c060, #c8983a);
    color: #1a1200;
    font-weight: 800;
    font-size: .82rem;
    padding: 9px 22px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
}
.rt-run-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.rt-run-btn:disabled { opacity: .32; cursor: not-allowed; transform: none; }

/* New Race row */
.rt-clear-row {
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
}
.rt-new-race-btn { font-size: .8rem; padding: 7px 18px; }

/* Skip animation toggle */
.rt-skip-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: #555;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    align-self: center;
}
.rt-skip-row input[type="checkbox"] { accent-color: #e8c060; cursor: pointer; }
.rt-skip-row:hover { color: #888; }

/* Responsive */
@media (max-width: 600px) {
    .rt-th-role, .rt-lane-role { display: none; }
    .rt-th-name, .rt-lane-name { width: 100px; }
    .rt-th-odds, .rt-lane-odds { width: 46px; }
}

/* ================================================================
   BLACKJACK / ROULETTE / VIDEO POKER SHARED  bj-*
   ================================================================ */

.bj-page { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; height: calc(100vh - 120px); max-height: 720px; }

/* --- Top strip ---------------------------------------------- */
.bj-top-strip {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.bj-room-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bj-back-link { font-size: .8rem; color: #666; text-decoration: none; transition: color .15s; }
.bj-back-link:hover { color: #aaa; }
.bj-room-title { font-family: var(--font-title); font-size: 1.15rem; font-weight: 700; color: #e8c060; }

.bj-top-strip-player {
    padding: 8px 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.bj-table-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px;
}
.bj-table-title-row .bj-room-title {
    font-size: 1.22rem;
    letter-spacing: .03em;
}
.bj-table-info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
}
.bj-table-box-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bj-table-box-group-left { flex: 0 0 auto; }
.bj-table-box-group-right { flex: 1 1 auto; justify-content: flex-end; }

.bj-table-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    min-width: 116px;
    min-height: 52px;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid #1e1e1e;
    background: #0d0d0d;
    text-decoration: none;
}
.bj-table-box span {
    font-size: .64rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height: 1.1;
}
.bj-table-box strong {
    font-size: .98rem;
    font-weight: 700;
    color: #ccc;
    line-height: 1.2;
}
.bj-table-box-owner strong { color: #e8c060; }
.bj-table-box-owner:hover { border-color: rgba(232,192,96,.4); }

.bj-owner-badge {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #c9a44e;
    border: 1px solid rgba(201,164,78,.3);
    border-radius: 20px;
    padding: 2px 8px;
    background: rgba(201,164,78,.05);
}
.bj-meta-chip {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 7px;
    padding: 6px 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-decoration: none;
    transition: border-color .15s;
}
.bj-meta-chip-label { font-size: .57rem; text-transform: uppercase; letter-spacing: .11em; color: #666; }
.bj-meta-chip-val { color: #fff; font-weight: 700; font-size: .84rem; line-height: 1.2; }
.bj-meta-owner { cursor: pointer; }
.bj-meta-owner .bj-meta-chip-val { color: #e8c060; }
.bj-meta-owner:hover { border-color: rgba(232,192,96,.4); }
.bj-meta-maxbet { color: #fff !important; font-weight: 700; }
.bj-meta-dimmed { color: #888; font-weight: 400; }

.bj-stat-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.bj-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #0d0d0d;
    border: 1px solid #1e1e1e;
    border-radius: 6px;
    padding: 7px 14px;
    min-width: 72px;
    text-align: center;
}
.bj-stat span { font-size: .68rem; color: #555; text-transform: uppercase; letter-spacing: .06em; }
.bj-stat strong, .bj-stat > * { font-size: 1.05rem; font-weight: 700; color: #ccc; }
.bj-pos { color: #48a765 !important; }
.bj-neg { color: #c04040 !important; }

/* --- Owner tabs --------------------------------------------- */
.bj-owner-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    background: var(--bg-panel);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    padding: 0 16px;
}
.bj-owner-tab {
    padding: 10px 16px;
    font-size: .82rem;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.bj-owner-tab:hover { color: #aaa; }
.bj-owner-tab.is-active { color: #e8c060; border-bottom-color: #e8c060; }

/* --- Owner stats grid --------------------------------------- */
.bj-owner-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    margin-bottom: 16px;
}
.bj-owner-panel { background: var(--bg-panel); padding: 18px 20px; }
.bj-owner-panel-wide { grid-column: span 2; }
.bj-owner-panel-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #666; margin-bottom: 14px; }
.bj-owner-empty { color: #555; font-size: .82rem; }

/* Bar chart */
.bj-bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bj-bar-row { display: flex; align-items: center; gap: 10px; }
.bj-bar-label { font-size: .75rem; font-weight: 600; color: #888; width: 32px; text-align: right; flex-shrink: 0; }
.bj-bar-track { flex: 1; height: 22px; background: #0a0a0a; border-radius: 4px; overflow: hidden; position: relative; border: 1px solid #1a1a1a; }
.bj-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; min-width: 2px; }
.bj-bar-fill.is-pos { background: linear-gradient(90deg, #1e5c35, #3a9e5c); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.bj-bar-fill.is-neg { background: linear-gradient(90deg, #5c1e1e, #b83a3a); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.bj-bar-value { font-size: .8rem; font-weight: 700; width: 80px; text-align: right; flex-shrink: 0; letter-spacing: .02em; }

/* Perf tiles */
.bj-perf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bj-perf-tile { background: #0d0d0d; border: 1px solid #1e1e1e; border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.bj-perf-tile span { font-size: .68rem; color: #555; text-transform: uppercase; letter-spacing: .06em; }
.bj-perf-tile strong { font-size: 1rem; font-weight: 700; color: #ccc; }

/* Wins list */
.bj-wins-list { display: flex; flex-direction: column; gap: 6px; }
.bj-wins-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #1a1a1a; }
.bj-wins-row:last-child { border-bottom: none; }
.bj-wins-rank { font-size: .72rem; font-weight: 700; color: #555; width: 24px; text-align: center; flex-shrink: 0; }
.bj-wins-name { flex: 1; font-size: .85rem; color: #ccc; }
.bj-wins-amount { font-size: .9rem; font-weight: 700; }

/* --- Felt / game area --------------------------------------- */
.bj-felt {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(40,110,60,.22) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, #0d2618 0%, #061308 55%, #030903 100%);
    border: 1px solid #1a3020;
    border-top: none;
    padding: 12px 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    box-shadow: inset 0 0 100px rgba(0,0,0,.5), inset 0 0 0 10px rgba(0,0,0,.15);
    max-height: 400px;
}
.bj-felt::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(192,160,96,.1);
    border-radius: 40% / 18%;
    pointer-events: none;
}
.bj-zone { display: flex; flex-direction: column; gap: 8px; }
.bj-zone-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .32em;
    color: rgba(232,200,128,.55);
    white-space: nowrap;
}
.bj-zone-label::before, .bj-zone-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192,160,96,.22), transparent);
}
.bj-dealer-zone { }
.bj-player-zone { }
.bj-cards { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 100px; }
.bj-total-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(232,200,128,.15);
    border: 1px solid rgba(232,200,128,.45);
    font-size: .78rem;
    font-weight: 800;
    color: #f0d894;
    letter-spacing: .04em;
}
.bj-total-badge.is-bust { background: rgba(192,64,64,.3); border-color: #c04040; color: #ff8a8a; }

/* Result band — keep for legacy; result badge replaces it in player view */
.bj-result-band {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-title);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: .1em;
    pointer-events: none;
}
.bj-result-band.is-win  { background: rgba(0,0,0,.7); color: #48c86e; }
.bj-result-band.is-lose { background: rgba(0,0,0,.7); color: #c04040; }
.bj-result-band.is-push { background: rgba(0,0,0,.7); color: #c9a44e; }
.bj-result-net { font-size: 1.1rem; font-family: inherit; font-weight: 400; }
.bj-result-net.is-pos { color: #48c86e; }
.bj-result-net.is-neg { color: #c04040; }

/* Floating result badge */
.bj-result-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 30px;
    border-radius: 14px;
    text-align: center;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: bjBadgeIn .2s ease both;
}
@keyframes bjBadgeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.bj-result-badge.is-win  { background: rgba(4,22,10,.88); border: 1px solid rgba(72,200,110,.5); box-shadow: 0 0 40px rgba(72,200,110,.18); }
.bj-result-badge.is-lose { background: rgba(22,4,4,.88);  border: 1px solid rgba(200,60,60,.5);  box-shadow: 0 0 40px rgba(200,60,60,.18);  }
.bj-result-badge.is-push { background: rgba(18,14,4,.88); border: 1px solid rgba(201,164,78,.5); box-shadow: 0 0 40px rgba(201,164,78,.14); }
.bj-result-badge-label {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.bj-result-badge.is-win  .bj-result-badge-label { color: #5de88a; }
.bj-result-badge.is-lose .bj-result-badge-label { color: #ff6868; }
.bj-result-badge.is-push .bj-result-badge-label { color: #e8c060; }

.bj-idle-hint { text-align: center; color: rgba(232,200,128,.3); font-size: .8rem; font-style: italic; letter-spacing: .06em; padding: 4px 0; pointer-events: none; }

/* Hand stack */
.bj-hand-stack { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.bj-player-hand { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.bj-player-hand.is-active .bj-hand-meta .bj-total-badge { border-color: rgba(232,192,96,.7); background: rgba(232,192,96,.14); }
.bj-player-hand.is-bust { opacity: .55; }
.bj-hand-meta { display: flex; align-items: center; gap: 8px; padding: 2px 0; border: none; background: none; }
.bj-hand-label { font-size: .7rem; color: #777; }
.bj-hand-bet { font-size: .78rem; color: rgba(232,192,96,.65); font-weight: 600; margin-left: 2px; }

/* Action bar */
.bj-action-bar {
    background: linear-gradient(180deg, #131313, #0c0c0c);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.bj-bet-form { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.bj-bet-input-row { display: flex; gap: 6px; align-items: center; }
.bj-bet-input {
    width: 90px;
    height: 32px;
    padding: 0 8px;
    background: #0e0e0e;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text-main);
    font-size: .85rem;
}
.bj-deal-btn { min-width: 60px; }
.bj-game-actions { display: flex; gap: 5px; flex-wrap: nowrap; flex: 1; justify-content: flex-end; }
.bj-act-btn { min-width: 52px; padding: 6px 8px; font-size: .78rem; white-space: nowrap; }
.bj-rules-strip { font-size: .72rem; color: #555; padding: 4px 0 2px; text-align: center; }
.bj-new-shoe { font-size: .78rem; color: #c9a44e; text-align: center; padding: 6px; background: rgba(201,164,78,.06); border-radius: 4px; }

/* Countdown */
.bj-countdown-stat { border-color: rgba(192,64,64,.25) !important; }
.bj-countdown { color: #ff8080 !important; }
.bj-countdown.is-urgent { color: #ffb040 !important; animation: bjCountdownPulse 1s ease-in-out infinite; }
.bj-countdown.is-critical { color: #ff4040 !important; animation: bjCountdownPulse .4s ease-in-out infinite; }
@keyframes bjCountdownPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* Timer progress bar on felt */
.bj-timer-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: #0a0a0a;
    z-index: 5;
    border-radius: 0;
    overflow: hidden;
}
.bj-timer-bar-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #3a9e5c, #7acc8e);
    transition: width 1s linear, background-color .5s;
    transform-origin: left;
}
.bj-timer-bar-fill.is-urgent { background: linear-gradient(90deg, #b87820, #e8a040); }
.bj-timer-bar-fill.is-critical { background: linear-gradient(90deg, #8c1e1e, #e03030); }

/* Closed/unowned state */
.bj-closed-card {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 40px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.bj-closed-icon { font-size: 2.5rem; opacity: .3; }
.bj-closed-heading { font-family: var(--font-title); font-size: 1.4rem; color: #888; }
.bj-closed-sub { color: #555; font-size: .85rem; max-width: 340px; line-height: 1.6; }
.bj-closed-price-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bj-closed-price-tile { background: #0e0e0e; border: 1px solid #222; border-radius: 6px; padding: 10px 20px; }
.bj-closed-price-tile span { font-size: .7rem; color: #666; display: block; margin-bottom: 2px; }
.bj-closed-price-tile strong { font-size: 1rem; font-weight: 700; color: #ccc; }
.bj-closed-buy-form { display: flex; gap: 8px; align-items: center; }
.bj-closed-buy-btn { }
.bj-closed-badge { font-size: .72rem; color: #666; }

@media (max-width: 680px) {
    .bj-owner-stats-grid { grid-template-columns: 1fr; }
    .bj-owner-panel-wide { grid-column: span 1; }
    .bj-top-strip { flex-direction: column; align-items: flex-start; }
    .bj-top-strip-player { padding: 10px 10px 12px; }
    .bj-table-title-row { width: 100%; justify-content: space-between; }
    .bj-table-info-row { width: 100%; flex-direction: column; align-items: stretch; }
    .bj-table-box-group { width: 100%; }
    .bj-table-box-group-right { justify-content: flex-start; }
    .bj-table-box {
        flex: 1 1 140px;
        min-width: 0;
    }
    .bj-perf-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   ROULETTE-SPECIFIC  rl-*
   ================================================================ */

.rl-page { }

.rl-panel {
    max-width: 1120px;
    margin: 0 auto;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.rl-panel .bj-top-strip {
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.rl-panel .roulette-display {
    margin-top: 0;
    padding: 10px 12px 0;
}

.rl-panel .roulette-controls {
    margin-top: 0;
    padding: 0 12px;
}

.rl-panel .rl-action-bar {
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    margin-top: 6px;
}

.rl-panel .rl-clear-row {
    padding: 8px 12px 10px;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 0;
}

.rl-action-bar {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.rl-clear-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.rl-result-band {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #0d0d0d;
    border: 1px solid var(--line);
    border-top: none;
}
.rl-result-icon { font-size: 1.6rem; }
.rl-result-payout { font-size: 1.1rem; font-weight: 700; color: #48a765; }

/* Roulette result badge overlays the wheel display */
.roulette-display { position: relative; }

/* Roulette chip amount input row */
.rl-chip-amount-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(8, 7, 8, 0.34);
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 12px;
}
.rl-chip-amount-label {
    font-size: .75rem;
    color: var(--muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.rl-chip-amount-row .roulette-chip-custom {
    width: 160px;
    padding: 6px 12px;
    background: #111;
    border: 1px solid rgba(232, 203, 161, 0.3);
    border-radius: 6px;
    color: var(--text);
    font-size: .95rem;
    text-align: center;
}

/* .rl-result-wrap removed — badge now overlays .roulette-display */

/* ================================================================
   VIDEO POKER-SPECIFIC  vp-*
   ================================================================ */

.vp-page { max-width: 860px; margin: 0 auto; }

.vp-felt {
    background: radial-gradient(ellipse at 50% 30%, #0a1f10 0%, #050d08 60%, #030903 100%);
    border: 1px solid #1a3020;
    border-top: none;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-height: 220px;
    position: relative;
}
.vp-felt-timer,
.bj-felt-timer {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(192,64,64,.35);
    border-radius: 999px;
    background: rgba(10,10,10,.8);
}
.vp-felt-timer span,
.bj-felt-timer span {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9a9a9a;
}
.vp-felt-timer .bj-countdown,
.bj-felt-timer .bj-countdown {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
}
.vp-hand { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; position: relative; }
.vp-card-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.vp-hold-chip {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: #e8c060;
    color: #000;
    border-radius: 20px;
    padding: 2px 8px;
    opacity: 0;
    transition: opacity .15s;
}
.vp-hold-input:checked ~ .vp-hold-chip,
.vp-card-wrap:has(.vp-hold-input:checked) .vp-hold-chip { opacity: 1; }
.vp-hold-input { position: absolute; opacity: 0; pointer-events: none; }
.vp-hold-count { font-size: .78rem; color: #888; }
.vp-idle-hint { color: rgba(255,255,255,.2); font-size: .88rem; text-align: center; }

.vp-action-bar {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
.vp-action-bar .bj-bet-form { grid-column: 2; justify-self: center; }
.vp-draw-btn { min-width: 100px; }
.vp-secondary-actions { display: flex; gap: 8px; grid-column: 3; justify-self: end; }
.vp-clear-form { display: inline; }

@media (max-width: 760px) {
    .vp-action-bar {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .vp-action-bar .bj-bet-form {
        grid-column: 1;
        justify-self: center;
    }
    .vp-secondary-actions {
        grid-column: 1;
        justify-self: center;
    }
}

.vp-result-band {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    color: #e8c060;
    padding: 10px;
}

.vp-payouts-tab {
    border: 1px solid #1a2a1a;
    border-radius: 6px;
    background: rgba(0,0,0,.28);
    overflow: hidden;
}
.vp-payouts-tab-summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #c9a44e;
    background: rgba(0,0,0,.32);
    border-bottom: 1px solid #111;
}
.vp-payouts-tab-summary::-webkit-details-marker { display: none; }
.vp-payouts-tab-summary::after {
    content: 'Open';
    float: right;
    color: #777;
    font-size: .66rem;
}
.vp-payouts-tab[open] .vp-payouts-tab-summary::after { content: 'Close'; }

.vp-paytable {
    background: rgba(0,0,0,.4);
    border-top: none;
    overflow: hidden;
}
.vp-pt-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-bottom: 1px solid #111;
    font-size: .78rem;
}
.vp-pt-row:last-child { border-bottom: none; }
.vp-pt-row.is-active { background: rgba(232,192,96,.08); }
.vp-pt-name { color: #ccc; }
.vp-pt-mult { font-weight: 700; color: #e8c060; }
.vp-pt-visual {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
}
.vp-pt-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 5px;
    border-radius: 4px;
    background: #f5f5f5;
    border: 1px solid #d8d8d8;
    color: #111;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
}
.vp-pt-card.is-red { color: #b22020; }

@media (max-width: 760px) {
    .vp-felt-timer,
    .bj-felt-timer {
        top: 8px;
        right: 8px;
        padding: 4px 8px;
    }
    .vp-pt-row {
        grid-template-columns: 1fr auto;
    }
    .vp-pt-visual {
        grid-column: 1 / -1;
        justify-self: start;
        flex-wrap: wrap;
    }
}

/* ================================================================
   CAR MARKET  cm-*
   ================================================================ */

.cm-page-header {
    background: linear-gradient(160deg, #111114 0%, #090909 100%);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px 24px 0;
    margin-bottom: 16px;
    overflow: hidden;
}
.cm-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.cm-page-title { font-size: 1.55rem; font-weight: 700; margin: 0 0 3px; color: #fff; }
.cm-page-sub { color: #555; font-size: .82rem; margin: 0; }
.cm-result-count { font-size: .78rem; color: #555; }

/* Tabs */
.cm-tab-nav {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    margin: 0 -24px;
    padding: 0 24px;
}
.cm-tab {
    padding: 10px 18px;
    font-size: .82rem;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    letter-spacing: .02em;
}
.cm-tab:hover { color: #bbb; text-decoration: none; }
.cm-tab.is-active { color: #e8c060; border-bottom-color: #c0963c; }

/* Filter bar */
.cm-filter-bar {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.cm-filter-form { display: contents; }
.cm-filter-group { display: flex; flex-direction: column; gap: 4px; }
.cm-filter-group label { font-size: .67rem; color: #555; text-transform: uppercase; letter-spacing: .07em; }
.cm-filter-select {
    height: 28px;
    padding: 0 26px 0 10px;
    background: #0c0c0c;
    border: 1px solid #2c2c2c;
    border-radius: 4px;
    color: var(--text-main);
    font-size: 11px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color .15s;
}
.cm-filter-select:focus { outline: none; border-color: #6a5030; }
.cm-sort-links { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cm-sort-label { font-size: .67rem; color: #555; text-transform: uppercase; letter-spacing: .07em; }
.cm-sort-link {
    display: inline-flex;
    align-items: center;
    height: 28px;
    font-size: 11px;
    color: #666;
    text-decoration: none;
    padding: 0 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
}
.cm-sort-link:hover { color: #bbb; border-color: #333; }
.cm-sort-link.is-active { color: #e8c060; border-color: rgba(192,150,60,.35); background: rgba(192,150,60,.07); font-weight: 600; }
.cm-clear-filter {
    display: inline-flex;
    align-items: center;
    height: 28px;
    font-size: 11px;
    color: #555;
    text-decoration: none;
    border: 1px solid #222;
    border-radius: 4px;
    padding: 0 10px;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.cm-clear-filter:hover { color: #c07070; border-color: rgba(180,60,60,.4); }

/* ── Listing cards ── */
.cm-listings-panel { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cm-card {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 7px 16px 7px 20px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    background: #111;
    transition: background .15s;
    position: relative;
}
.cm-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: transparent;
    transition: background .15s;
}
.cm-card:last-child { border-bottom: none; }
.cm-card:hover { background: #161616; }
.cm-card:hover::before { background: #5a4020; }
.cm-card-mine::before { background: rgba(192,150,60,.3) !important; }
.cm-card-identity { display: flex; align-items: center; min-width: 0; }
.cm-car-name { font-size: 11px; font-weight: 600; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-seller { font-size: 10px; color: #555; }
.cm-card-stats { display: flex; flex-wrap: nowrap; gap: 4px; }
.cm-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #666;
    background: #0c0c0c;
    border: 1px solid #1e1e1e;
    border-radius: 3px;
    padding: 2px 6px;
    white-space: nowrap;
}
.cm-stat strong { color: #999; font-weight: 600; }
.heat-high { color: #d05050 !important; }
.heat-mid  { color: #c99040 !important; }
.heat-low  { color: #70a870 !important; }
.cm-stat-premium { color: #c9a44e; border-color: rgba(201,164,78,.2); background: rgba(201,164,78,.04); }
.cm-card-price { text-align: right; white-space: nowrap; }
.cm-card-price strong { font-size: 11px; font-weight: 700; color: #58c078; }
.cm-card-price small { font-size: 10px; color: #555; }
.cm-card-action { display: flex; align-items: center; }
.cm-buy-btn { white-space: nowrap; font-size: 10px; padding: 3px 10px; }
.cm-mine-label { font-size: 10px; color: #c9a44e; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ── My listings ── */
.cm-my-listings-panel { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.cm-my-listing-list { display: flex; flex-direction: column; }
.cm-my-listing-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    background: #111;
    transition: background .15s;
}
.cm-my-listing-row:last-child { border-bottom: none; }
.cm-my-listing-row:hover { background: #161616; }
.cm-my-listing-name { font-size: .88rem; font-weight: 600; color: #ccc; }
.cm-my-dmg { font-size: .7rem; color: #777; margin-top: 2px; }
.cm-my-listing-price { font-size: .93rem; font-weight: 700; color: #58c078; text-align: right; }
.cm-my-listing-expires { font-size: .7rem; color: #555; text-align: right; white-space: nowrap; }

/* ================================================================
   GUIDE PRICES  — cm-guide-*
   ================================================================ */

.cm-guide-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.cm-guide-make-group {
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.cm-guide-make-group:last-child { border-bottom: none; }

/* Make banner */
.cm-guide-make-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    background: linear-gradient(90deg, #111116, #0d0d0d);
    border-bottom: 1px solid rgba(255,255,255,.05);
    border-left: 3px solid #7a5c28;
}
.cm-guide-make-header::before {
    content: '▸';
    font-size: .7rem;
    color: #8a6a38;
}
.cm-guide-make-name {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #a07840;
}
.cm-guide-make-count {
    margin-left: auto;
    font-size: .65rem;
    color: #444;
    letter-spacing: .04em;
}

/* Individual model row */
.cm-guide-row {
    display: grid;
    grid-template-columns: 46px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 20px 10px 24px;
    border-bottom: 1px solid rgba(255,255,255,.025);
    background: #111;
    transition: background .14s;
}
.cm-guide-row:last-child { border-bottom: none; }
.cm-guide-row:hover { background: #161616; }

/* Year pill */
.cm-guide-year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    color: #666;
    background: #0e0e0e;
    border: 1px solid #252525;
    border-radius: 3px;
    padding: 2px 5px;
    letter-spacing: .02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Model name */
.cm-guide-name {
    font-size: .87rem;
    font-weight: 500;
    color: #d0d0d0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cm-guide-row:hover .cm-guide-name { color: #fff; }

/* Respect badge */
.cm-guide-respect {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 600;
    color: #b08030;
    background: rgba(192,150,48,.07);
    border: 1px solid rgba(192,150,48,.2);
    border-radius: 3px;
    padding: 2px 8px;
    white-space: nowrap;
    letter-spacing: .02em;
}

/* Price range */
.cm-guide-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    font-weight: 600;
    color: #58c078;
    background: rgba(70,180,100,.06);
    border: 1px solid rgba(70,180,100,.14);
    border-radius: 4px;
    padding: 4px 10px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    text-align: right;
    min-width: 170px;
    justify-content: flex-end;
}

@media (max-width: 680px) {
    .cm-card { grid-template-columns: 1fr auto auto; }
    .cm-card-action { display: none; }
    .cm-card-price { text-align: right; }
    .cm-filter-bar { flex-direction: column; align-items: stretch; }
    .cm-guide-row { grid-template-columns: 40px 1fr auto; gap: 8px; padding: 9px 14px; }
    .cm-guide-respect { display: none; }
    .cm-guide-range { min-width: 0; font-size: .75rem; padding: 3px 7px; }
}

/* ================================================================
   FONT UTILITIES
   ================================================================ */

.font-title { font-family: var(--font-title); }

/* ================================================================
   PREMIUM MARKETPLACE  mkt-*
   ================================================================ */

.prem-body { display: flex; flex-direction: column; gap: 16px; }
.prem-form-body { padding: 16px 20px 20px; }
.prem-form-hint { font-size: .82rem; color: #888; margin: 0 0 18px; line-height: 1.6; }

.prem-sell-form { }
.prem-sell-fields { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; align-items: end; }
.prem-sell-field { display: flex; flex-direction: column; gap: 5px; }
.prem-sell-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #666; }
.prem-sell-label-opt { font-weight: 400; color: #444; text-transform: none; letter-spacing: 0; }
.prem-sell-input-wrap { display: flex; align-items: center; background: #0e0e0e; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.prem-sell-input { flex: 1; height: 36px; padding: 0 10px; background: transparent; border: none; color: var(--text-main); font-size: .9rem; outline: none; }
.prem-sell-affix { padding: 0 8px; font-size: .8rem; color: #555; border-left: 1px solid var(--line); height: 36px; display: flex; align-items: center; }
.prem-sell-prefix { border-left: none; border-right: 1px solid var(--line); }
.prem-sell-hint { font-size: .7rem; color: #555; }
.prem-sell-total { font-size: 1.15rem; font-weight: 700; color: #e8c060; line-height: 36px; }

.mkt-listings { display: flex; flex-direction: column; }
.mkt-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid #1c1c1c;
}
.mkt-row:last-child { border-bottom: none; }
.mkt-row:hover { background: #0f0f0f; }
.mkt-row.is-mine { background: rgba(255,200,60,.02); }
.mkt-row-seller { font-size: .82rem; color: #888; }
.mkt-row-seller a { color: #ccc; text-decoration: none; }
.mkt-row-seller a:hover { color: #fff; }
.mkt-notes { font-size: .75rem; color: #666; }
.mkt-row-stock { text-align: right; white-space: nowrap; }
.mkt-amount { font-size: 1.2rem; font-weight: 700; color: #e8c060; }
.mkt-f { font-size: .7rem; color: #9a7840; margin-left: 2px; }
.mkt-stock-label { font-size: .7rem; color: #666; display: block; }
.mkt-row-price { text-align: right; white-space: nowrap; }
.mkt-ppf { font-size: .95rem; font-weight: 700; color: #ccc; }
.mkt-per { font-size: .72rem; color: #666; font-weight: 400; }
.mkt-total-val { font-size: .72rem; color: #666; display: block; }
.mkt-row-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 140px; }
.mkt-buy-inputs { display: flex; align-items: center; gap: 6px; }
.mkt-qty-input { flex: 1; min-width: 0; height: 32px; padding: 0 8px; background: #111; border: 1px solid #2a2a2a; border-radius: 4px; color: #e0e0e0; font-size: .88rem; text-align: center; }
.mkt-buy-cost { font-size: .82rem; color: #70c070; white-space: nowrap; min-width: 80px; text-align: right; }
.mkt-mine-label { font-size: .7rem; color: #666; }
.panel-count { margin-left: 8px; font-size: .72rem; background: #222; border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; color: #888; }
.prem-empty { padding: 20px; color: #666; font-size: .82rem; }

@media (max-width: 680px) {
    .prem-sell-fields { grid-template-columns: 1fr 1fr; }
    .mkt-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
    .mkt-row-price { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════
   JAIL PAGE  (public/jail.php)
   ═══════════════════════════════════════════════════════════════ */

/* Keyframes */
@keyframes jail-glow-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(180, 50, 30, 0.25), inset 0 0 0 1px rgba(180, 50, 30, 0.3); }
    50%       { box-shadow: 0 0 40px rgba(200, 60, 40, 0.55), inset 0 0 0 1px rgba(210, 70, 50, 0.6); }
}
@keyframes jail-urgent-pulse {
    0%, 100% { color: #ff7060; text-shadow: 0 0 8px rgba(255, 80, 60, 0.7); }
    50%       { color: #ff2020; text-shadow: 0 0 20px rgba(255, 40, 20, 1); }
}
@keyframes jail-bar-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
@keyframes jail-ready-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 192, 80, 0); }
    50%       { box-shadow: 0 0 0 5px rgba(232, 192, 80, 0.22); }
}
@keyframes jail-self-bust-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-4px); }
    40%       { transform: translateX(4px); }
    60%       { transform: translateX(-3px); }
    80%       { transform: translateX(3px); }
}
@keyframes jail-inmate-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes jail-bust-confirm-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 192, 80, 0); }
    50%       { box-shadow: 0 0 10px 3px rgba(232, 192, 80, 0.35); }
}

/* Page wrapper */
.jail-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Status Bar ─────────────────────────────────────────────── */
.jail-status-bar {
    position: relative;
    background: linear-gradient(135deg, #0e0b08 0%, #1a1108 50%, #0e0b08 100%);
    border: 1px solid #3a2a18;
    border-radius: 6px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
}

/* Prison bar shadow overlay */
.jail-status-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 17px,
        rgba(0, 0, 0, 0.45) 17px,
        rgba(0, 0, 0, 0.45) 19px
    );
    z-index: 0;
}

/* Bottom edge highlight */
.jail-status-bar::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 150, 60, 0.15), transparent);
    pointer-events: none;
}

.jail-page.is-jailed .jail-status-bar {
    border-color: rgba(160, 45, 30, 0.55);
    animation: jail-glow-pulse 2.8s ease-in-out infinite;
}

.jail-page.is-free .jail-status-bar {
    border-color: rgba(50, 110, 55, 0.4);
    box-shadow: 0 0 22px rgba(40, 100, 45, 0.1);
}

.jail-status-left {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.jail-page-h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.45rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d4bc80;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 30px rgba(140, 100, 30, 0.2);
}

.jail-page-subtitle {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4a3820;
    margin-top: 1px;
}

.jail-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 3px;
    margin-top: 4px;
}

.jail-status-badge.is-jailed {
    background: rgba(160, 40, 30, 0.2);
    border: 1px solid rgba(200, 60, 40, 0.5);
    color: #ff7060;
}

.jail-status-badge.is-free {
    background: rgba(40, 100, 45, 0.18);
    border: 1px solid rgba(60, 150, 65, 0.4);
    color: #70d070;
}

/* ── Stat Tiles ─────────────────────────────────────────────── */
.jail-stat-tiles {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
}

.jail-tile {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #221a0e;
    border-radius: 5px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 88px;
    transition: border-color 200ms, background 200ms;
}

.jail-page.is-jailed .jail-tile:first-child {
    border-color: rgba(100, 30, 20, 0.45);
}

.jail-tile span {
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4a4030;
}

.jail-tile strong {
    font-size: 1.05rem;
    color: #c8a050;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

.jail-tile-free  { color: #70d070 !important; }
.jail-tile-used  { color: #3a3a3a !important; }
.jail-tile-ready { color: #e8c060 !important; animation: jail-ready-pulse 1.8s ease-in-out infinite; border-radius: 3px; }
.jail-tile-na    { color: #333 !important; }

strong.is-urgent {
    animation: jail-urgent-pulse 0.75s ease-in-out infinite !important;
}

/* ── Action Grid ────────────────────────────────────────────── */
.jail-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.jail-action-card {
    border-radius: 6px;
    transition: border-color 250ms, box-shadow 250ms;
    position: relative;
}

/* Gold left accent stripe on actionable cards */
.jail-action-card.is-actionable::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #c0963c, #7a5c28);
    border-radius: 6px 0 0 6px;
}

.jail-action-card.is-actionable {
    border-color: rgba(192, 150, 60, 0.35);
    box-shadow: 0 0 16px rgba(192, 150, 60, 0.06);
}

.jail-action-card.is-actionable:hover {
    border-color: rgba(232, 192, 80, 0.55);
    box-shadow: 0 0 28px rgba(232, 192, 80, 0.12);
}

.jail-action-card.is-spent {
    border-color: #1e1e1e;
    opacity: 0.55;
}

.jail-action-card.is-inactive {
    border-color: #1e1e1e;
}

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

.jail-action-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c8a050;
}

.jail-one-use-badge {
    font-size: 9px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: rgba(140, 70, 20, 0.2);
    border: 1px solid rgba(140, 70, 20, 0.4);
    color: #a06030;
    padding: 2px 8px;
    border-radius: 3px;
}

.jail-skill-eff {
    font-size: 11px;
    color: #777;
}

.jail-sentence-display {
    font-size: 11px;
    color: #777;
    margin: 8px 0 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #1e1a14;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jail-sentence-display strong {
    color: #e88060;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

/* Self-bust button */
.jail-bust-form {
    margin-top: 8px;
}

.jail-self-bust-btn {
    width: 100%;
    padding: 10px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 200ms;
}

.jail-action-card.is-actionable .jail-self-bust-btn:not(:disabled) {
    background: linear-gradient(135deg, rgba(150, 45, 30, 0.3), rgba(110, 25, 18, 0.5));
    border-color: rgba(200, 60, 40, 0.5);
    color: #ff9080;
}

.jail-action-card.is-actionable .jail-self-bust-btn:not(:disabled):hover {
    background: linear-gradient(135deg, rgba(190, 55, 38, 0.5), rgba(150, 35, 25, 0.7));
    border-color: rgba(230, 80, 60, 0.75);
    color: #ffb0a0;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(200, 50, 30, 0.3);
}

.jail-action-card.is-actionable .jail-self-bust-btn:not(:disabled):active {
    transform: translateY(0);
    box-shadow: none;
}

.jail-self-bust-btn.is-shaking {
    animation: jail-self-bust-shake 0.35s ease;
}

/* ── Skill Bar ──────────────────────────────────────────────── */
.jail-skill-bar-wrap {
    height: 9px;
    background: #0a0a0a;
    border: 1px solid #1e1e1e;
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 0 5px;
    position: relative;
}

.jail-skill-bar {
    height: 100%;
    background: linear-gradient(90deg, #4a3010 0%, #c0963c 65%, #e8c060 100%);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    transition: width 800ms cubic-bezier(0.25, 1, 0.5, 1);
}

.jail-skill-bar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: jail-bar-shimmer 2.8s ease infinite;
}

.jail-skill-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #444;
    margin-bottom: 9px;
    letter-spacing: 0.04em;
}

.jail-skill-current { color: #c8a050 !important; }

.jail-boost-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #666;
    padding: 5px 0;
    border-top: 1px solid #181818;
    margin: 4px 0;
}

.jail-boost-row strong { color: #70d070; }

.jail-skill-meta {
    font-size: 10px;
    color: #4a4a4a;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #181818;
    line-height: 1.6;
}

.jail-skill-meta strong { color: #777; }

/* ── Roster Panel ───────────────────────────────────────────── */
.jail-roster-panel {
    border-color: #2a2010;
}

.jail-roster-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1c1c1c;
    margin-bottom: 10px;
}

.jail-roster-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c8a050;
}

.jail-roster-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
}

.jail-bust-blocked { color: #5a3030; font-style: italic; }
.jail-bust-hint { color: #555; }
.jail-bust-hint strong { color: #c8a050; }

.jail-roster-count {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #252525;
    color: #555;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 3px;
}

/* ── Inmate Cards ───────────────────────────────────────────── */
.jail-roster-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.jail-inmate-card {
    display: grid;
    grid-template-columns: 1fr 110px 120px;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 16px;
    border: 1px solid #181818;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: background 160ms, border-color 160ms;
    animation: jail-inmate-in 250ms ease both;
}

/* Stagger animation for each card */
.jail-inmate-card:nth-child(1)  { animation-delay:  30ms; }
.jail-inmate-card:nth-child(2)  { animation-delay:  60ms; }
.jail-inmate-card:nth-child(3)  { animation-delay:  90ms; }
.jail-inmate-card:nth-child(4)  { animation-delay: 120ms; }
.jail-inmate-card:nth-child(5)  { animation-delay: 150ms; }
.jail-inmate-card:nth-child(6)  { animation-delay: 180ms; }
.jail-inmate-card:nth-child(7)  { animation-delay: 210ms; }
.jail-inmate-card:nth-child(8)  { animation-delay: 240ms; }
.jail-inmate-card:nth-child(9)  { animation-delay: 270ms; }
.jail-inmate-card:nth-child(10) { animation-delay: 300ms; }

/* Left accent stripe */
.jail-inmate-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #2a1e10;
    transition: background 160ms;
}

.jail-inmate-card.is-self {
    border-color: rgba(150, 35, 25, 0.3);
    background: rgba(70, 15, 8, 0.18);
}

.jail-inmate-card.is-self::before { background: #8c2820; }

.jail-inmate-card:not(.is-self):hover {
    background: rgba(192, 150, 60, 0.04);
    border-color: rgba(192, 150, 60, 0.18);
}

.jail-inmate-card:not(.is-self):hover::before { background: #c0963c; }

.jail-inmate-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jail-inmate-name {
    font-size: 12px;
    color: #bfbfbf;
    font-weight: 600;
}

.jail-inmate-rank {
    font-size: 9px;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.jail-inmate-timer {
    text-align: center;
    font-family: var(--font-display);
    font-size: 13px;
    color: #d07050;
    letter-spacing: 0.04em;
}

.jail-inmate-action {
    display: flex;
    justify-content: flex-end;
}

.jail-inmate-self-note {
    font-size: 10px;
    color: #444;
    font-style: italic;
}

.jail-bust-btn {
    font-size: 10px;
    padding: 4px 16px;
    letter-spacing: 0.06em;
    transition: all 200ms;
}

.jail-bust-btn:not(:disabled):hover {
    background: rgba(192, 150, 60, 0.12);
    border-color: rgba(232, 192, 80, 0.45);
    color: #e8c060;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(192, 150, 60, 0.18);
}

.jail-bust-btn:not(:disabled):active {
    transform: translateY(0);
    box-shadow: none;
}

/* Confirm state */
.jail-bust-btn.is-confirming {
    background: rgba(192, 150, 60, 0.15) !important;
    border-color: rgba(232, 192, 80, 0.6) !important;
    color: #e8c060 !important;
    animation: jail-bust-confirm-glow 0.6s ease-in-out infinite;
}

.jail-empty {
    text-align: center;
    padding: 36px 0;
    color: #383838;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.06em;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .jail-action-grid { grid-template-columns: 1fr; }
    .jail-status-bar  { flex-direction: column; align-items: flex-start; }
    .jail-stat-tiles  { flex-wrap: wrap; }
    .jail-inmate-card { grid-template-columns: 1fr auto auto; }
}

/* ── Jail cinematic hero (page-jail) ───────────────────────── */
.page-jail .content {
    margin-top: 0;
    gap: 6px;
}

.page-jail .jail-page {
    gap: 10px;
}

.page-jail {
    --jj-gold: #c9a24a;
    --jj-red: #c04030;
}

.page-jail .jj-page-header {
    position: relative;
    border: 1px solid #2b2b2b;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
    background: linear-gradient(180deg, #141416 0%, #0a0a0c 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.page-jail .jj-hero-scene {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 62% center;
    opacity: 0.42;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, #000 38%, #000 72%, transparent 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, #000 38%, #000 72%, transparent 100%);
}

.page-jail .jj-hero-siren {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    background: linear-gradient(90deg, rgba(180, 40, 40, 0.12), rgba(40, 60, 180, 0.1));
    mix-blend-mode: screen;
}

.page-jail.is-jailed .jj-hero-siren {
    opacity: 1;
    animation: jj-siren-flash 2.4s ease-in-out infinite;
}

@keyframes jj-siren-flash {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.55; }
}

.page-jail .jj-hero-bars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 22px,
        rgba(0, 0, 0, 0.28) 22px,
        rgba(0, 0, 0, 0.28) 24px
    );
    opacity: 0.35;
}

.page-jail .jj-page-header.is-breaking {
    animation: jail-glow-pulse 0.42s ease-in-out 2;
}

.page-jail .jj-hero-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.page-jail .jj-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.page-jail .jj-hero-copy .cp-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--jj-gold);
}

.page-jail .jj-page-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: #f4ecd8;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.page-jail .jj-page-sub {
    margin: 0;
    font-size: 10.5px;
    color: #9a9a9a;
    max-width: 42ch;
    line-height: 1.45;
}

.page-jail .jj-sentence-clock {
    flex-shrink: 0;
    min-width: 168px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(160, 50, 40, 0.45);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
}

.page-jail .jj-sentence-clock--free {
    border-color: rgba(60, 120, 70, 0.4);
}

.page-jail .jj-sentence-label {
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7f7768;
}

.page-jail .jj-sentence-time {
    font-family: var(--font-display);
    font-size: 28px;
    color: #ff8068;
    line-height: 1;
    letter-spacing: 0.04em;
}

.page-jail .jj-sentence-time--free {
    font-size: 22px;
    color: #7fc98a;
}

.page-jail .jj-sentence-track {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: #202022;
    overflow: hidden;
}

.page-jail .jj-sentence-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #a83636, #ff8068);
    transition: width 1s linear;
}

.page-jail .jj-sentence-hint {
    font-size: 9px;
    color: #6f6f6f;
}

.page-jail .jj-status-bar {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: rgba(0, 0, 0, 0.42);
}

.page-jail .jj-status-cell {
    padding: 11px 18px;
    border-right: 1px solid #232323;
    display: grid;
    grid-template-rows: 18px 6px 13px;
    gap: 6px;
}

.page-jail .jj-status-cell:last-child { border-right: none; }

.page-jail .jj-status-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.page-jail .jj-status-label {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7f7768;
}

.page-jail .jj-status-value {
    font-size: 15px;
    font-weight: 700;
    color: #f0f0f0;
}

.page-jail .jj-status-value.is-ready { color: #e8c060; }
.page-jail .jj-status-value.is-spent { color: #555; }

.page-jail .jj-status-mid {
    height: 6px;
    border-radius: 3px;
    background: #202022;
    overflow: hidden;
}

.page-jail .jj-status-mid > span {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.page-jail .jj-skill-track > span {
    background: linear-gradient(90deg, #8a6528, #e0b046);
}

.page-jail .jj-self-track > span.is-ready {
    background: linear-gradient(90deg, #3c8a4f, #5fd07a);
}

.page-jail .jj-self-track > span.is-spent {
    background: linear-gradient(90deg, #555, #777);
}

.page-jail .jj-inmate-track > span {
    background: linear-gradient(90deg, #4a3030, #c04030);
}

.page-jail .jj-status-foot {
    font-size: 9px;
    color: #7c7c7c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-jail .jj-action-card {
    border-radius: 10px;
    overflow: hidden;
}

.page-jail .jj-odds-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 12px;
    padding: 8px 10px;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 10px;
    color: #8a8a8a;
}

.page-jail .jj-odds-strip strong {
    color: #e8c060;
    font-size: 14px;
}

.page-jail .jj-roster-panel {
    border-radius: 10px;
    overflow: hidden;
}

.page-jail .jj-roster-empty {
    padding: 28px 20px;
    text-align: center;
}

.page-jail .jj-inmate-card {
    position: relative;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) 110px auto;
    gap: 10px;
}

.page-jail .jj-inmate-bars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 14px,
        rgba(0, 0, 0, 0.22) 14px,
        rgba(0, 0, 0, 0.22) 15px
    );
    opacity: 0;
    transition: opacity 180ms ease;
}

.page-jail .jj-inmate-card:hover .jj-inmate-bars,
.page-jail .jj-inmate-card.is-self .jj-inmate-bars,
.page-jail .jj-inmate-card.is-confirming .jj-inmate-bars {
    opacity: 1;
}

.page-jail .jj-inmate-card.is-confirming {
    border-color: rgba(201, 162, 74, 0.55);
    box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.25) inset;
}

.page-jail .jj-inmate-timer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

.page-jail .jail-inmate-action {
    position: relative;
    z-index: 2;
}

.page-jail .jj-timer-label {
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5a5040;
}

.page-jail .jj-inmate-time-track {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: #1e1e20;
    overflow: hidden;
}

.page-jail .jj-inmate-time-track > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8a6528, #e0b046);
    border-radius: 2px;
}

.page-jail .jj-inmate-card.is-self .jj-inmate-time-track > span {
    background: linear-gradient(90deg, #a83636, #ff7060);
}

@media (max-width: 760px) {
    .page-jail .jj-hero-top {
        flex-direction: column;
    }

    .page-jail .jj-sentence-clock {
        width: 100%;
        min-width: 0;
    }

    .page-jail .jj-status-bar {
        grid-template-columns: 1fr;
    }

    .page-jail .jj-status-cell {
        border-right: none;
        border-bottom: 1px solid #232323;
    }

    .page-jail .jj-status-cell:last-child {
        border-bottom: none;
    }
}

/* ── Self bust card + CTA ───────────────────────────────────── */
.page-jail .jj-self-bust-card.is-actionable {
    background: linear-gradient(165deg, rgba(48, 18, 14, 0.55) 0%, rgba(16, 12, 12, 0.95) 55%);
}

.page-jail .jj-self-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0 14px;
}

.page-jail .jj-self-stat {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #2a2220;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-jail .jj-self-stat span {
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6f6558;
}

.page-jail .jj-self-stat strong {
    font-family: var(--font-display);
    font-size: 18px;
    color: #ff9078;
    letter-spacing: 0.04em;
}

.page-jail .jj-self-stat.is-muted strong { color: #444; }

.page-jail .jj-self-bust-btn {
    width: 100%;
    min-height: 52px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 8px;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.page-jail .jj-btn-kicker {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.75;
}

.page-jail .jj-btn-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-jail .jj-self-bust-card.is-actionable .jj-self-bust-btn:not(:disabled) {
    background: linear-gradient(180deg, rgba(190, 55, 38, 0.42) 0%, rgba(110, 22, 16, 0.72) 100%);
    border: 1px solid rgba(230, 90, 70, 0.55);
    color: #ffd4cc;
    box-shadow: 0 4px 18px rgba(160, 40, 30, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.page-jail .jj-self-bust-card.is-actionable .jj-self-bust-btn:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: #ff8068;
    box-shadow: 0 8px 26px rgba(200, 50, 30, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.page-jail .jj-self-bust-card.is-spent .jj-self-bust-btn,
.page-jail .jj-self-bust-card.is-inactive .jj-self-bust-btn {
    background: rgba(255, 255, 255, 0.02);
    border-color: #333;
    color: #666;
}

/* ── Bust skill card ────────────────────────────────────────── */
.page-jail .jj-skill-card {
    background: linear-gradient(165deg, rgba(28, 22, 12, 0.65) 0%, rgba(12, 12, 14, 0.98) 60%);
}

.page-jail .jj-skill-tier-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 74, 0.35);
    color: #e8d4a0;
    background: rgba(201, 162, 74, 0.1);
}

.page-jail .jj-skill-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 14px 0 12px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #2a2418;
    background: rgba(0, 0, 0, 0.32);
}

.page-jail .jj-skill-gauge {
    --skill-ring: 0;
    position: relative;
    width: 78px;
    height: 78px;
    flex-shrink: 0;
}

.page-jail .jj-skill-gauge-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(#e0b046 0 calc(var(--skill-ring) * 1%), #242428 calc(var(--skill-ring) * 1%) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.page-jail .jj-skill-gauge-ring::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #101012;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}

.page-jail .jj-skill-gauge-core {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    gap: 1px;
}

.page-jail .jj-skill-gauge-core strong {
    font-family: var(--font-display);
    font-size: 17px;
    color: #f0dca6;
    line-height: 1;
}

.page-jail .jj-skill-gauge-core span {
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6f6558;
}

.page-jail .jj-skill-readout {
    flex: 1;
    min-width: 0;
}

.page-jail .jj-skill-effective-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.page-jail .jj-skill-effective-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7f7768;
}

.page-jail .jj-skill-effective {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: #e8d4a0;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.page-jail .jj-skill-effective span {
    font-size: 16px;
    color: #a88848;
    margin-left: 1px;
}

.page-jail .jj-skill-cap-note {
    font-size: 9.5px;
    color: #6f6f6f;
    margin-bottom: 10px;
}

.page-jail .jj-skill-track-wrap { width: 100%; }

.page-jail .jj-skill-track {
    height: 7px;
    border-radius: 4px;
    background: #1a1a1e;
    border: 1px solid #2a2a30;
    overflow: hidden;
}

.page-jail .jj-skill-track > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6a4a18, #e0b046);
    box-shadow: 0 0 10px rgba(224, 176, 70, 0.25);
    transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page-jail .jj-skill-markers {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 8px;
    font-style: normal;
    color: #555;
    letter-spacing: 0.04em;
}

.page-jail .jj-skill-perk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid rgba(78, 166, 90, 0.25);
    background: rgba(78, 166, 90, 0.08);
    font-size: 10px;
    color: #9ab89f;
}

.page-jail .jj-skill-perk strong { color: #7fc98a; }

.page-jail .jj-skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-jail .jj-skill-chip {
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid #2a2a2a;
    background: rgba(255, 255, 255, 0.02);
    color: #7a7a7a;
}

.page-jail .jj-skill-chip.is-ok {
    border-color: rgba(78, 166, 90, 0.28);
    color: #8fc898;
}

.page-jail .jj-skill-chip.is-risk {
    border-color: rgba(200, 80, 60, 0.28);
    color: #d89088;
}

/* ── Roster + bust out ──────────────────────────────────────── */
.page-jail .jj-roster-grid {
    gap: 10px;
}

.page-jail .jj-inmate-card {
    grid-template-columns: minmax(0, 1fr) 118px minmax(118px, auto);
    align-items: center;
    padding: 12px 14px;
    border-radius: 8px;
    background: linear-gradient(165deg, #151518 0%, #101012 100%);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.page-jail .jj-inmate-card.is-self {
    border-color: rgba(180, 60, 45, 0.55);
    background: linear-gradient(165deg, rgba(36, 14, 12, 0.75) 0%, #101012 65%);
    box-shadow: 0 0 0 1px rgba(180, 60, 45, 0.15) inset;
}

.page-jail .jj-inmate-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.page-jail .jj-inmate-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #e8d4a0;
    background: linear-gradient(165deg, #2a2418, #141210);
    border: 1px solid #3a3020;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.page-jail .jj-inmate-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-jail .jj-inmate-avatar--has-img {
    padding: 0;
    background: #101012;
}

.page-jail .jj-inmate-card.is-self .jj-inmate-avatar {
    border-color: rgba(200, 80, 60, 0.45);
    color: #ffb0a0;
}

.page-jail .jj-inmate-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.page-jail .jj-you-badge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(200, 80, 60, 0.45);
    color: #ff9078;
    background: rgba(160, 40, 30, 0.18);
    flex-shrink: 0;
}

.page-jail .jj-bust-out-btn {
    min-width: 108px;
    min-height: 46px;
    padding: 6px 12px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border-radius: 7px;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.page-jail .jj-bust-out-btn:not(:disabled) {
    background: linear-gradient(180deg, rgba(78, 166, 90, 0.28) 0%, rgba(78, 166, 90, 0.1) 100%);
    border: 1px solid rgba(78, 166, 90, 0.45);
    color: #d6f0da;
    box-shadow: 0 3px 14px rgba(78, 166, 90, 0.18);
}

.page-jail .jj-bust-out-btn:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: var(--ok);
    box-shadow: 0 6px 20px rgba(78, 166, 90, 0.32);
}

.page-jail .jj-bust-out-btn.is-confirming {
    background: linear-gradient(180deg, rgba(201, 162, 74, 0.35) 0%, rgba(201, 162, 74, 0.12) 100%) !important;
    border-color: var(--jj-gold) !important;
    color: #f0e2c0 !important;
    animation: jail-bust-confirm-glow 0.6s ease-in-out infinite;
}

.page-jail .jj-bust-out-btn:disabled {
    background: rgba(255, 255, 255, 0.02);
    border-color: #333;
    color: #555;
    opacity: 1;
}

.page-jail .jj-self-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    min-height: 46px;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    color: #ffb0a0;
    border: 1px solid rgba(200, 80, 60, 0.45);
    background: linear-gradient(180deg, rgba(160, 45, 35, 0.28) 0%, rgba(100, 25, 18, 0.2) 100%);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.page-jail .jj-self-link-btn:hover {
    transform: translateY(-1px);
    border-color: #ff8068;
    color: #ffd4cc;
    box-shadow: 0 4px 16px rgba(180, 50, 35, 0.28);
}

.page-jail .jj-self-link-btn:focus {
    outline: none;
    border-color: #ff8068;
    box-shadow: 0 0 0 2px rgba(255, 128, 104, 0.25);
}

.page-jail .jj-self-link-btn:active {
    transform: translateY(0);
    color: #ffb0a0;
    background: linear-gradient(180deg, rgba(160, 45, 35, 0.38) 0%, rgba(100, 25, 18, 0.28) 100%);
}

.page-jail .jj-self-link-btn.is-disabled {
    color: #666;
    border-color: #333;
    background: rgba(255, 255, 255, 0.02);
    cursor: default;
}

.page-jail .jj-self-bust-card.is-highlight {
    border-color: rgba(255, 128, 104, 0.65);
    box-shadow: 0 0 0 1px rgba(255, 128, 104, 0.25) inset, 0 0 28px rgba(180, 50, 35, 0.22);
    animation: jail-ready-pulse 1.2s ease-in-out 2;
}

/* ── Bust record strip ──────────────────────────────────────── */
.page-jail .jj-bust-record {
    border-radius: 10px;
    padding: 14px 18px;
    border: 1px solid #2a2418;
    background: linear-gradient(165deg, rgba(22, 18, 12, 0.9) 0%, rgba(12, 12, 14, 0.98) 100%);
}

.page-jail .jj-bust-record-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #232323;
}

.page-jail .jj-bust-record-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8d4a0;
}

.page-jail .jj-bust-record-sub {
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
}

.page-jail .jj-bust-record-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.page-jail .jj-bust-stat {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #262626;
    background: rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-jail .jj-bust-stat span {
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6f6558;
}

.page-jail .jj-bust-stat strong {
    font-family: var(--font-display);
    font-size: 20px;
    color: #f0f0f0;
    line-height: 1;
}

@media (max-width: 700px) {
    .page-jail .jj-inmate-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .page-jail .jj-inmate-timer {
        align-items: flex-start;
    }

    .page-jail .jj-skill-panel {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .page-jail .jj-skill-gauge {
        margin: 0 auto;
    }

    .page-jail .jj-bust-record-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Jail action result banner ─────────────────────────────── */
.page-jail .jj-result-banner-slot {
    margin-bottom: 0;
}

.page-jail .jj-result-banner-slot:empty {
    display: none;
}

.page-jail .jj-result-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #2e2a24;
    background: rgba(14, 14, 16, 0.92);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    animation: jj-result-slide-in 320ms ease-out;
}

.page-jail .jj-result-banner.is-visible,
.page-jail .jj-result-banner-slot .jj-result-banner {
    display: flex;
}

.page-jail .jj-result-banner--success {
    border-color: rgba(78, 166, 90, 0.38);
    background: linear-gradient(90deg, rgba(78, 166, 90, 0.1) 0%, rgba(14, 14, 16, 0.92) 42%);
}

.page-jail .jj-result-banner--fail {
    border-color: rgba(201, 162, 74, 0.38);
    background: linear-gradient(90deg, rgba(201, 162, 74, 0.1) 0%, rgba(14, 14, 16, 0.92) 42%);
}

.page-jail .jj-result-banner--error {
    border-color: rgba(200, 80, 60, 0.38);
    background: linear-gradient(90deg, rgba(200, 80, 60, 0.1) 0%, rgba(14, 14, 16, 0.92) 42%);
}

.page-jail .jj-result-banner-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
}

.page-jail .jj-result-banner-kicker {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a7062;
    flex-shrink: 0;
}

.page-jail .jj-result-banner--success .jj-result-banner-kicker { color: #7ec989; }
.page-jail .jj-result-banner--fail .jj-result-banner-kicker { color: #d4b56a; }
.page-jail .jj-result-banner--error .jj-result-banner-kicker { color: #e8927f; }

.page-jail .jj-result-banner-message {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: #d8d8d8;
}

.page-jail .jj-result-banner-meta {
    font-size: 10px;
    color: #6f6860;
    letter-spacing: 0.02em;
}

.page-jail .jj-result-banner-meta::before {
    content: "·";
    margin-right: 6px;
    color: #4a4540;
}

.page-jail .jj-result-banner-dismiss {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #666;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}

.page-jail .jj-result-banner-dismiss:hover {
    color: #ccc;
    background: rgba(255, 255, 255, 0.05);
}

.page-jail .jj-inmate-card.is-released {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 700ms ease, transform 700ms ease;
    pointer-events: none;
}

@keyframes jj-result-slide-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Sidebar jail alert ───────────────────────────────────── */
.sidebar .nav-jail-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    padding: 8px 10px 8px 13px;
    border-radius: 2px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.025);
    color: #c8beb2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.sidebar .nav-jail-alert-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #5a5248;
    pointer-events: none;
}

.sidebar .nav-jail-alert::before,
.sidebar .nav-jail-alert::after {
    display: none !important;
}

.sidebar .nav-jail-alert-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    color: #8a8074;
}

.sidebar .nav-jail-alert-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sidebar .nav-jail-alert-kicker {
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d8cdbf;
    line-height: 1.25;
}

.sidebar .nav-jail-alert-line {
    font-size: 10px;
    font-weight: 500;
    color: #8f8578;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.sidebar .nav-jail-alert-hint {
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0.04em;
    color: #666;
    line-height: 1.25;
}

.sidebar .nav-jail-alert-count {
    flex-shrink: 0;
    min-width: 26px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ece4d8;
    text-align: right;
}

/* Empty — block clear */
.sidebar .nav-jail-alert--empty {
    color: #7a7a7a;
}

.sidebar .nav-jail-alert--empty .nav-jail-alert-stripe {
    background: #3a3a3a;
}

.sidebar .nav-jail-alert--empty .nav-jail-alert-kicker {
    color: #9a9a9a;
}

.sidebar .nav-jail-alert--empty .nav-jail-alert-line {
    color: #666;
}

.sidebar .nav-jail-alert--empty .nav-jail-alert-count {
    color: #777;
}

.sidebar .nav-jail-alert--empty .nav-jail-alert-icon {
    color: #555;
    background: rgba(255, 255, 255, 0.02);
}

/* Hot — inmates waiting */
.sidebar .nav-jail-alert--hot {
    border-color: rgba(180, 70, 55, 0.45);
    background: linear-gradient(90deg, rgba(120, 35, 25, 0.14) 0%, rgba(255, 255, 255, 0.02) 55%);
    color: #e8c8c0;
    animation: nav-jail-hot-glow 2.6s ease-in-out infinite;
}

.sidebar .nav-jail-alert--hot .nav-jail-alert-stripe {
    background: #c8503c;
    box-shadow: 0 0 10px rgba(200, 80, 60, 0.55);
}

.sidebar .nav-jail-alert--hot .nav-jail-alert-kicker {
    color: #ffd4cc;
}

.sidebar .nav-jail-alert--hot .nav-jail-alert-line {
    color: #d8a8a0;
}

.sidebar .nav-jail-alert--hot .nav-jail-alert-hint--hot {
    color: #e89080;
    font-weight: 600;
}

.sidebar .nav-jail-alert--hot .nav-jail-alert-count {
    color: #ffe8e4;
    text-shadow: 0 0 12px rgba(200, 80, 60, 0.35);
}

.sidebar .nav-jail-alert--hot .nav-jail-alert-icon {
    color: #ff9a88;
    background: rgba(200, 80, 60, 0.12);
    border: 1px solid rgba(200, 80, 60, 0.2);
}

/* Self — you're jailed */
.sidebar .nav-jail-alert--self {
    border-color: rgba(201, 162, 74, 0.4);
    background: linear-gradient(90deg, rgba(90, 65, 20, 0.16) 0%, rgba(255, 255, 255, 0.02) 55%);
    color: #e8d8b8;
}

.sidebar .nav-jail-alert--self .nav-jail-alert-stripe {
    background: var(--nav-gold, #c9a24a);
    box-shadow: 0 0 10px rgba(201, 162, 74, 0.45);
}

.sidebar .nav-jail-alert--self .nav-jail-alert-kicker {
    color: #f0e0b8;
}

.sidebar .nav-jail-alert--self .nav-jail-alert-line {
    color: #c8b888;
}

.sidebar .nav-jail-alert--self .nav-jail-alert-hint {
    color: #a89058;
}

.sidebar .nav-jail-alert--self .nav-jail-alert-count {
    color: #f5e6c0;
}

.sidebar .nav-jail-alert--self .nav-jail-alert-icon {
    color: #e8c878;
    background: rgba(201, 162, 74, 0.1);
    border: 1px solid rgba(201, 162, 74, 0.22);
}

/* Hover + active */
.sidebar .nav-jail-alert:hover {
    border-color: rgba(201, 162, 74, 0.45);
    background: rgba(201, 162, 74, 0.06);
    transform: translateX(2px);
}

.sidebar .nav-jail-alert--hot:hover {
    border-color: rgba(255, 128, 104, 0.6);
    background: linear-gradient(90deg, rgba(140, 40, 28, 0.2) 0%, rgba(255, 255, 255, 0.03) 55%);
}

.sidebar .nav-jail-alert.is-active {
    border-color: rgba(201, 162, 74, 0.55);
    background: rgba(201, 162, 74, 0.08);
    padding-left: 15px;
}

@keyframes nav-jail-hot-glow {
    0%, 100% {
        box-shadow: inset 0 0 0 0 rgba(200, 80, 60, 0);
    }
    50% {
        box-shadow: inset 0 0 18px 0 rgba(200, 80, 60, 0.08);
    }
}

/* ═══════════════════════════════════════════════════════════════
   STOCK EXCHANGE
   ═══════════════════════════════════════════════════════════════ */

@keyframes stk-blink-up   { 0%,100%{background:transparent} 40%{background:rgba(107,186,115,0.18)} }
@keyframes stk-blink-down { 0%,100%{background:transparent} 40%{background:rgba(208,106,106,0.18)} }
@keyframes stk-marquee    { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Colours ──────────────────────────────────────────────────── */
.stk-up   { color: #6bba73; }
.stk-down { color: #d06a6a; }
.stk-flat { color: #6a6a6a; }

/* ── Page header ─────────────────────────────────────────────── */
.sm-page-header {
    padding: 0;
    overflow: hidden;
    border-color: #1e1a14;
}

.sm-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #1a1612;
}

.sm-header-identity {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.sm-page-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f0e0c0;
    margin: 0;
    line-height: 1;
}

.sm-page-sub {
    font-size: 11px;
    color: #5a5040;
    margin: 0;
    letter-spacing: 0.04em;
}

.sm-header-kpis {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sm-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding: 10px 16px;
    border-left: 1px solid #1a1612;
    min-width: 100px;
}

.sm-kpi > span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5a5040;
    font-weight: 600;
}

.sm-kpi > strong {
    font-size: 15px;
    font-weight: 700;
    color: #d8c8a0;
    font-variant-numeric: tabular-nums;
}

.sm-kpi.is-up  > strong { color: #6bba73; }
.sm-kpi.is-down > strong { color: #d06a6a; }

/* ── Ticker tape marquee (overrides .stock-marquee base) ──────── */
.sm-marquee {
    border-top: none;
    border-bottom: 1px solid #1a1612;
    background: #080705;
    margin: 0;
    height: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.sm-marquee::before,
.sm-marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}

.sm-marquee::before { left: 0;  background: linear-gradient(90deg, #080705, transparent); }
.sm-marquee::after  { right: 0; background: linear-gradient(-90deg, #080705, transparent); }

/* ── Tab navigation ──────────────────────────────────────────── */
.sm-tab-nav {
    display: flex;
    gap: 0;
    padding: 0 22px;
    border-top: 1px solid #1a1612;
    background: #080705;
}

.sm-tab {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4a4030;
    padding: 10px 16px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 150ms, border-color 150ms;
    position: relative;
    top: 1px;
}

.sm-tab:hover    { color: #9a8060; }
.sm-tab.is-active {
    color: #e8c060;
    border-bottom-color: #c0963c;
}

/* ── Overview bar (market tab) ───────────────────────────────── */
.sm-overview-bar {
    display: flex;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: #1e1a14;
}

.sm-overview-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-right: 1px solid #1a1612;
    background: #0a0806;
}

.sm-overview-stat:last-child { border-right: none; }

.sm-overview-stat > span {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4a4030;
}

.sm-overview-stat > strong {
    font-size: 20px;
    font-weight: 700;
    color: #c8b888;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.sm-overview-stat > strong.is-up   { color: #6bba73; }
.sm-overview-stat > strong.is-down { color: #d06a6a; }

/* ── Market panel (card grid) ────────────────────────────────── */
.sm-market-panel {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border-color: #1e1a14;
}

/* ── Individual stock card ───────────────────────────────────── */
/*
  Grid layout (direct children):
    row 1 cols 1-3 : [symbol] [identity] [price]
    row 2+         : stats / trade form / graph btn / graph panel  (span all cols)
*/
.sm-card {
    background: #0b0907;
    border: 1px solid #1c1810;
    border-left: 3px solid #2a2018;
    display: grid;
    grid-template-columns: 60px 1fr auto;
    overflow: hidden;
    transition: border-color 160ms, box-shadow 160ms;
    position: relative;
}

.sm-card:hover {
    border-color: #302618;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    z-index: 1;
}

.sm-card.is-up   { border-left-color: #2e5e32; }
.sm-card.is-down { border-left-color: #5e2828; }
.sm-card.is-flat { border-left-color: #282828; }
.sm-card.is-up:hover   { border-left-color: #4e9a54; box-shadow: 0 4px 20px rgba(50,110,55,0.12); }
.sm-card.is-down:hover { border-left-color: #8a4040; box-shadow: 0 4px 20px rgba(110,40,40,0.12); }

/* ── Row 1: Symbol (col 1) ── */
.sm-card-symbol {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7a6840;
    background: #090806;
    border-right: 1px solid #1c1810;
    border-bottom: 1px solid #1c1810;
    padding: 14px 6px;
    writing-mode: horizontal-tb;
}

.sm-card-symbol.is-up   { color: #5a9e60; background: #07090a; }
.sm-card-symbol.is-down { color: #9e5050; background: #0a0808; }

/* ── Row 1: Identity (col 2) ── */
.sm-card-identity {
    grid-column: 2;
    grid-row: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    border-bottom: 1px solid #1c1810;
}

.sm-company {
    font-size: 13px;
    font-weight: 700;
    color: #e0d0a8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.2;
}

.sm-sector {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3e3428;
    display: block;
}

/* ── Row 1: Price (col 3) ── */
.sm-card-price {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 12px 16px;
    gap: 4px;
    border-left: 1px solid #1c1810;
    border-bottom: 1px solid #1c1810;
    min-width: 90px;
}

.sm-price {
    font-size: 16px;
    font-weight: 700;
    color: #f0e8d0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
}

.sm-change {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sm-change.is-up   { color: #6bba73; }
.sm-change.is-down { color: #d06a6a; }
.sm-change.is-flat { color: #4a4a4a; }

/* ── Row 2: Stats (spans all cols) ── */
.sm-card-stats {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #0e0c09;
    border-bottom: 1px solid #1c1810;
}

.sm-stat {
    background: #0b0907;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.sm-stat em {
    font-style: normal;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #302820;
}

.sm-stat strong {
    font-size: 11px;
    font-weight: 600;
    color: #8a7850;
    font-variant-numeric: tabular-nums;
}

.sm-owned.has-shares em     { color: #5a4a28; }
.sm-owned.has-shares strong { color: #c8a048; }

/* Trade form (row 3, spans all cols) */
.sm-trade-form {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 10px 12px;
    border-bottom: 1px solid #1c1810;
    background: #090806;
}

.sm-trade-inner {
    display: flex;
    gap: 6px;
    align-items: center;
}

.sm-shares-input {
    flex: 1;
    min-width: 0;
    background: #080705;
    border: 1px solid #2a2018;
    color: #d8c8a0;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: border-color 150ms;
}

.sm-shares-input:focus {
    outline: none;
    border-color: #6a5020;
}

.sm-buy-btn {
    background: rgba(60, 100, 65, 0.3);
    border: 1px solid #3a6a3e;
    color: #7aba80;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 150ms, border-color 150ms, color 150ms;
    white-space: nowrap;
}

.sm-buy-btn:hover {
    background: rgba(78, 166, 90, 0.25);
    border-color: #5aaa60;
    color: #9ade9a;
}

/* Graph toggle (row 4, spans all cols) */
.sm-graph-btn {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    background: #080705;
    border: none;
    border-top: 1px solid #1c1810;
    color: #3a3020;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 12px;
    cursor: pointer;
    text-align: center;
    transition: background 150ms, color 150ms;
}

.sm-graph-btn:hover   { background: #0d0b08; color: #7a6840; }
.sm-graph-btn[aria-expanded="true"] { color: #c0963c; background: #0d0b08; }

/* Graph panel (row 5, spans all cols) */
.sm-graph-panel {
    grid-column: 1 / -1;
    grid-row: 5;
    border-top: 1px solid #1c1810;
    padding: 10px;
    background: #080705;
}

/* ── Portfolio tab ────────────────────────────────────────────── */
.sm-portfolio-panel { padding: 0; overflow: hidden; border-color: #1e1a14; }

.sm-empty {
    padding: 32px 22px;
    font-size: 12px;
    color: #4a4030;
    font-style: italic;
    text-align: center;
    letter-spacing: 0.03em;
}

.sm-empty a { color: #c0963c; text-decoration: none; }
.sm-empty a:hover { text-decoration: underline; }

.sm-portfolio-grid { display: flex; flex-direction: column; gap: 0; }

.sm-holding-row {
    display: grid;
    grid-template-columns: 60px 1fr 90px 110px auto;
    gap: 0;
    align-items: center;
    border-bottom: 1px solid #141210;
    transition: background 120ms;
}

.sm-holding-row:last-child  { border-bottom: none; }
.sm-holding-row:hover       { background: rgba(255,255,255,0.015); }

.sm-holding-symbol {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #c8b888;
    background: #0d0b08;
    padding: 14px 10px;
    text-align: center;
    border-right: 1px solid #141210;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-holding-symbol.is-up   { color: #6bba73; }
.sm-holding-symbol.is-down { color: #d06a6a; }

.sm-holding-info {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    border-right: 1px solid #141210;
}

.sm-holding-info strong {
    font-size: 12px;
    font-weight: 700;
    color: #d8c8a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-holding-info span {
    font-size: 10px;
    color: #4a4030;
}

.sm-holding-price {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    border-right: 1px solid #141210;
}

.sm-holding-price strong {
    font-size: 13px;
    font-weight: 700;
    color: #d8c8a0;
    font-variant-numeric: tabular-nums;
}

.sm-holding-price span {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.sm-holding-price span.is-up   { color: #6bba73; }
.sm-holding-price span.is-down { color: #d06a6a; }

.sm-holding-value {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    border-right: 1px solid #141210;
}

.sm-holding-value strong {
    font-size: 13px;
    font-weight: 700;
    color: #d8c8a0;
    font-variant-numeric: tabular-nums;
}

.sm-holding-value span {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.sm-holding-value span.is-up   { color: #6bba73; }
.sm-holding-value span.is-down { color: #d06a6a; }

.sm-holding-sell {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 160px;
}

.sm-holding-sell-partial,
.sm-holding-sell-all {
    display: flex;
    gap: 5px;
    align-items: center;
}

.sm-sell-btn {
    background: rgba(100, 40, 40, 0.3);
    border: 1px solid #6a3030;
    color: #c07070;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 5px 10px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 150ms, border-color 150ms;
    white-space: nowrap;
}

.sm-sell-btn:hover {
    background: rgba(140, 60, 60, 0.35);
    border-color: #9a4040;
    color: #e08080;
}

.sm-sell-all-btn {
    background: rgba(100, 40, 40, 0.2);
    border: 1px solid #4a2020;
    color: #906060;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 150ms, border-color 150ms;
    white-space: nowrap;
    width: 100%;
}

.sm-sell-all-btn:hover {
    background: rgba(120, 50, 50, 0.3);
    border-color: #7a3030;
    color: #c07070;
}

/* ── History tab ──────────────────────────────────────────────── */
.sm-history-panel { padding: 0; overflow: hidden; border-color: #1e1a14; }

.sm-history-table-wrap { overflow-x: auto; }

.sm-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.sm-history-table thead tr {
    background: #0a0806;
    border-bottom: 1px solid #1e1a14;
}

.sm-history-table th {
    padding: 9px 12px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4a4030;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #1e1a14;
}

.sm-history-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #0e0c0a;
    color: #8a7860;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.sm-history-table tbody tr:last-child td { border-bottom: none; }
.sm-history-table tbody tr:hover td     { background: rgba(255,255,255,0.015); }

.sm-history-table td strong {
    color: #c8b888;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sm-history-table td.is-up   { color: #6bba73; font-weight: 700; }
.sm-history-table td.is-down { color: #d06a6a; font-weight: 700; }

.sm-order-type {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    display: inline-block;
    text-transform: uppercase;
}

.sm-order-type.is-buy  {
    background: rgba(60, 120, 65, 0.25);
    border: 1px solid #3a6a3e;
    color: #6bba73;
}

.sm-order-type.is-sell {
    background: rgba(120, 50, 50, 0.25);
    border: 1px solid #6a3030;
    color: #d06a6a;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sm-market-panel { grid-template-columns: 1fr; }
    .sm-holding-row  { grid-template-columns: 55px 1fr 90px; }
    .sm-holding-price { display: none; }
    .sm-holding-sell  { grid-column: 1 / -1; border-top: 1px solid #141210; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .sm-header-top    { flex-direction: column; }
    .sm-header-kpis   { flex-direction: row; gap: 0; width: 100%; }
    .sm-kpi           { flex: 1; align-items: center; border-left: none; border-top: 1px solid #1a1612; padding: 8px 10px; }
    .sm-overview-bar  { flex-wrap: wrap; }
    .sm-overview-stat { flex-basis: 50%; border-bottom: 1px solid #1a1612; }
    .sm-card-stats    { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   Admin Control Panel — Layout & Components
   ═══════════════════════════════════════════════════════════════ */

.admin-shell {
    display: flex;
    min-height: calc(100vh - 120px);
    background: #080808;
}

.admin-nav {
    width: 210px;
    min-width: 210px;
    background: #131313;
    border-right: 1px solid #303030;
    padding: 20px 0 32px;
    display: flex;
    flex-direction: column;
}

.admin-nav-brand {
    padding: 0 14px 14px;
    border-bottom: 1px solid #303030;
    margin-bottom: 12px;
}

.admin-nav-brand-role {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #555555;
    margin-bottom: 3px;
}

.admin-nav-brand-role.is-admin     { color: #c94a4a; }
.admin-nav-brand-role.is-moderator { color: #2a7a3a; }

.admin-nav-brand-name {
    font-size: 13px;
    font-weight: 700;
    color: #e2e2e2;
}

.admin-nav-section {
    padding: 0 8px;
    margin-bottom: 18px;
}

.admin-nav-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #555555;
    padding: 0 6px 5px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    color: #8a8a8a;
    text-decoration: none;
    border-left: 2px solid transparent;
    font-weight: 500;
    transition: background 100ms, color 100ms;
}

.admin-nav-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #d0d0d0;
}

.admin-nav-link.is-active {
    background: rgba(201, 74, 74, 0.07);
    color: #ffffff;
    border-left-color: #c94a4a;
    font-weight: 600;
}

.admin-nav-link .anl-icon {
    width: 16px;
    text-align: center;
    font-style: normal;
    opacity: 0.7;
}

.admin-content {
    flex: 1;
    min-width: 0;
    padding: 24px 28px;
    display: grid;
    gap: 20px;
    align-content: start;
}

.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #303030;
}

.admin-page-title {
    margin: 0;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #ffffff;
    line-height: 1.1;
}

.admin-page-sub {
    margin: 5px 0 0;
    color: #555555;
    font-size: 0.8rem;
}

.admin-stat-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-stat-card {
    background: #111111;
    border: 1px solid #303030;
    padding: 14px 18px;
    min-width: 130px;
    flex: 1 1 130px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 78px;
}

.admin-stat-card .asc-label {
    display: block;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #555555;
    white-space: nowrap;
}

.admin-stat-card .asc-value {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-stat-card .asc-value.is-live   { color: #48a765; }
.admin-stat-card .asc-value.is-paused { color: #c94a4a; }

.admin-card {
    background: #111111;
    border: 1px solid #303030;
    overflow: hidden;
}

.admin-card-header {
    padding: 10px 14px;
    background: #151515;
    border-bottom: 1px solid #303030;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-card-title {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b8b8b8;
}

.admin-card-body {
    padding: 16px;
}

.admin-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.admin-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #303030;
    margin-bottom: 14px;
}
.admin-tab {
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: #555555;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin-tab:hover { color: #d0d0d0; }
.admin-tab.is-active { color: #ffffff; border-bottom-color: #c94a4a; }
.admin-tab-badge {
    background: #c94a4a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    line-height: 1.4;
}

/* ── Help Desk (player) ──────────────────── */
.hd-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #222222;
    margin-bottom: 18px;
}
.hd-tab {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #555555;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s;
}
.hd-tab:hover { color: #cccccc; }
.hd-tab.is-active { color: #ffffff; border-bottom-color: #c94a4a; }

.hd-form { display: grid; gap: 14px; max-width: 680px; }
.hd-form-row { display: grid; gap: 5px; }
.hd-form-row label { font-size: 12px; font-weight: 600; color: #888888; text-transform: uppercase; letter-spacing: .05em; }
.hd-form-row input, .hd-form-row select, .hd-form-row textarea {
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    color: #d8d8d8;
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 2px;
    width: 100%;
    box-sizing: border-box;
}
.hd-form-row textarea { resize: vertical; font-family: inherit; }
.hd-form-row input:focus, .hd-form-row select:focus, .hd-form-row textarea:focus {
    outline: none;
    border-color: #c94a4a;
}
.hd-hint { font-size: 11.5px; color: #555555; }

.hd-ticket-card {
    background: #111111;
    border: 1px solid #222222;
    border-radius: 2px;
    margin-bottom: 10px;
}
.hd-ticket-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #1e1e1e;
    flex-wrap: wrap;
    gap: 6px;
}
.hd-ticket-body { padding: 12px 14px; }

.hd-ticket-cat {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.hd-cat-help { background: #1a2a1a; color: #48a765; border: 1px solid #48a76533; }
.hd-cat-bug  { background: #2a1a1a; color: #c94a4a; border: 1px solid #c94a4a33; }
.hd-cat-idea { background: #1a1a2a; color: #4a8cc9; border: 1px solid #4a8cc933; }

.hd-msg-block { display: grid; gap: 5px; }
.hd-msg-label { font-size: 10.5px; font-weight: 700; color: #555555; text-transform: uppercase; letter-spacing: .06em; }
.hd-msg-text {
    background: #0d0d0d;
    border: 1px solid #1e1e1e;
    padding: 10px 13px;
    font-size: 13px;
    color: #c8c8c8;
    line-height: 1.6;
    border-radius: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}
.hd-staff-reply .hd-msg-text { border-color: #48a76533; background: #0a1a0e; }

/* ── Conversation thread ─────────────────────────────── */
.hd-thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.hd-bubble {
    border-radius: 3px;
    border: 1px solid #1e1e1e;
    overflow: hidden;
}
.hd-bubble--player {
    background: #0d0d0d;
    border-left: 3px solid #404040;
}
.hd-bubble--staff {
    background: #091520;
    border-left: 3px solid #4a8cc9;
    margin-left: 20px;
}
.hd-bubble-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(0,0,0,.3);
    border-bottom: 1px solid #1e1e1e;
}
.hd-bubble-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}
.hd-bubble--player .hd-bubble-avatar { background: #252525; color: #777; }
.hd-bubble--staff  .hd-bubble-avatar { background: #4a8cc920; color: #4a8cc9; }
.hd-bubble-name {
    font-size: 12px;
    font-weight: 700;
    color: #cccccc;
}
.hd-bubble--staff .hd-bubble-name { color: #6aaee0; }
.hd-bubble-role {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 1px 5px;
    border-radius: 2px;
    background: #4a8cc918;
    color: #4a8cc9;
    border: 1px solid #4a8cc930;
}
.hd-bubble-time {
    margin-left: auto;
    font-size: 10px;
    color: #383838;
}
.hd-bubble-body {
    padding: 10px 13px;
    font-size: 13px;
    color: #c8c8c8;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* TOS */
.hd-tos { font-size: 13.5px; color: #c0c0c0; line-height: 1.7; }
.hd-tos h3 { color: #e0e0e0; font-size: 14px; margin: 22px 0 6px; }
.hd-tos p  { margin: 0 0 10px; }
.hd-tos ul { margin: 0 0 10px; padding-left: 20px; }
.hd-tos ul li { margin-bottom: 5px; }
.hd-tos-updated { font-size: 11.5px; color: #555555; margin: 0 0 18px; font-style: italic; }
.hd-tos-accept-note {
    margin-top: 24px;
    padding: 12px 16px;
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    font-size: 12.5px;
    color: #888888;
    border-radius: 2px;
}

/* ── Ticket progress timeline ──────────────── */
.hd-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.hd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 72px;
    position: relative;
}
.hd-step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #444444;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
}
.hd-step.done .hd-step-dot  { background: #48a765; border-color: #48a765; color: #fff; }
.hd-step.curr .hd-step-dot  { background: #c94a4a; border-color: #c94a4a; color: #fff; box-shadow: 0 0 0 3px #c94a4a22; }
.hd-step.esc  .hd-step-dot  { background: #e07840; border-color: #e07840; color: #fff; box-shadow: 0 0 0 3px #e0784022; }
.hd-step-label {
    font-size: 10px;
    color: #444444;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
}
.hd-step.done .hd-step-label { color: #48a765; }
.hd-step.curr .hd-step-label { color: #d8d8d8; font-weight: 600; }
.hd-step.esc  .hd-step-label { color: #e07840; font-weight: 600; }
.hd-step-line {
    flex: 1;
    height: 2px;
    background: #1e1e1e;
    min-width: 20px;
    margin-bottom: 14px;
    flex-shrink: 1;
}
.hd-step-line.done { background: #48a765; }
.hd-step-line.esc  { background: #e07840; }

/* ── Help Desk hero banner ─────────────────── */
.hd-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #111111;
    border: 1px solid #222222;
    border-radius: 3px;
    padding: 18px 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.hd-hero-icon {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
}
.hd-hero-body {
    flex: 1;
    min-width: 180px;
}
.hd-hero-title {
    font-size: 17px;
    font-weight: 700;
    color: #e8e8e8;
    margin: 0 0 3px;
}
.hd-hero-sub {
    font-size: 12.5px;
    color: #606060;
    margin: 0;
    line-height: 1.5;
}
.hd-hero-stats {
    display: flex;
    gap: 18px;
    flex-shrink: 0;
}
.hd-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.hd-hero-stat strong {
    font-size: 22px;
    font-weight: 700;
    color: #c8c8c8;
    line-height: 1;
}
.hd-hero-stat span {
    font-size: 10px;
    color: #444444;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* ── Help Desk tab bar (new) ───────────────── */
.hd-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #1e1e1e;
    margin-bottom: 18px;
}
.hd-tab-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #505050;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s;
    border-radius: 2px 2px 0 0;
}
.hd-tab-item:hover { color: #b0b0b0; background: #141414; }
.hd-tab-item.is-active { color: #e8e8e8; border-bottom-color: #c94a4a; background: #141414; }
.hd-tab-icon { font-size: 14px; line-height: 1; }
.hd-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #2a2a2a;
    color: #888888;
    font-size: 10px;
    font-weight: 700;
}
.hd-tab-count.is-open {
    background: #c94a4a22;
    color: #c94a4a;
    border: 1px solid #c94a4a44;
}

/* ── Category picker cards ─────────────────── */
.hd-cat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
@media (max-width: 600px) { .hd-cat-cards { grid-template-columns: 1fr; } }
.hd-cat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px 16px;
    background: #111111;
    border: 1px solid #222222;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.hd-cat-card:hover { border-color: #3a3a3a; background: #141414; }
.hd-cat-card.is-selected { border-color: #c94a4a; background: #1a0f0f; }
.hd-cat-card-icon { font-size: 20px; line-height: 1; margin-bottom: 2px; }
.hd-cat-card-title { font-size: 13px; font-weight: 700; color: #d8d8d8; }
.hd-cat-card-desc  { font-size: 11.5px; color: #555555; line-height: 1.4; }

/* ── Ticket card (updated) ─────────────────── */
.hd-ticket-card {
    border-left: 3px solid #222222;
    transition: border-color .15s;
}
.hd-ticket-card.has-reply { border-left-color: #48a765; }
.hd-ticket-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hd-ticket-num {
    font-size: 11px;
    color: #444444;
    font-weight: 600;
    flex-shrink: 0;
}
.hd-ticket-subject {
    font-size: 13.5px;
    color: #d8d8d8;
}
.hd-ticket-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-left: auto;
    flex-shrink: 0;
}
.hd-badge-esc {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 2px;
    background: #e0784022;
    color: #e07840;
    border: 1px solid #e0784044;
    text-transform: uppercase;
}
.hd-badge-new {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 2px;
    background: #48a76522;
    color: #48a765;
    border: 1px solid #48a76544;
    text-transform: uppercase;
    animation: hd-pulse 2s infinite;
}
@keyframes hd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

/* ── Empty state ───────────────────────────── */
.hd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    text-align: center;
    background: #111111;
    border: 1px solid #1e1e1e;
    border-radius: 3px;
    margin-bottom: 10px;
}
.hd-empty-icon { font-size: 40px; line-height: 1; margin-bottom: 12px; opacity: .4; }
.hd-empty-title { font-size: 15px; font-weight: 700; color: #555555; margin: 0 0 5px; }
.hd-empty-sub   { font-size: 12.5px; color: #404040; margin: 0; }

/* ── Awaiting response indicator ───────────── */
.hd-awaiting {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #505050;
    font-style: italic;
    margin-top: 10px;
}
.hd-awaiting-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #505050;
    flex-shrink: 0;
    animation: hd-pulse 1.8s infinite;
}

/* ── Player reply (collapsible) ────────────── */
.hd-reply-wrap summary { list-style: none; cursor: pointer; }
.hd-reply-wrap summary::-webkit-details-marker { display: none; }
.hd-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #4a8cc9;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.hd-reply-toggle:hover { color: #7ab4e8; }

/* ── Star rating ───────────────────────────── */
.hd-rate-wrap {
    margin-top: 16px;
    padding: 14px 16px;
    background: #0d0f0d;
    border: 1px solid #1a2e1a;
    border-radius: 3px;
}
.hd-rate-title {
    font-size: 13px;
    font-weight: 700;
    color: #c8c8c8;
    margin-bottom: 12px;
}
.hd-rate-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}
.hd-rate-label {
    font-size: 11.5px;
    color: #888888;
    min-width: 120px;
    flex-shrink: 0;
}
.hd-stars {
    display: flex;
    gap: 3px;
}
.hd-star {
    background: none;
    border: none;
    padding: 0;
    font-size: 22px;
    color: #333333;
    cursor: pointer;
    transition: color .1s, transform .1s;
    line-height: 1;
}
.hd-star:hover,
.hd-star.is-hovered { color: #f0c030; transform: scale(1.15); }
.hd-star.is-filled  { color: #f0c030; }

/* ── Already-rated display ─────────────────── */
.hd-rated-badge {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    padding: 10px 14px;
    background: #0d0d0d;
    border: 1px solid #1e1e1e;
    border-radius: 2px;
    font-size: 12.5px;
    color: #888888;
}
.hd-rated-comment {
    font-style: italic;
    color: #606060;
    font-size: 11.5px;
}

/* ── Analytics page ────────────────────────── */
.an-stat-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.an-stat-card {
    background: #111111;
    border: 1px solid #222222;
    border-radius: 3px;
    padding: 12px 10px;
    text-align: center;
    min-width: 0;
}
.an-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: #d8d8d8;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.an-stat-label {
    font-size: 9px;
    color: #555555;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
}
.an-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 760px) { .an-grid-2 { grid-template-columns: 1fr; } }
.an-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.an-table th {
    padding: 6px 10px;
    text-align: left;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #555555;
    border-bottom: 1px solid #1e1e1e;
    white-space: nowrap;
}
.an-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #161616;
    color: #aaaaaa;
    font-size: 12px;
    vertical-align: middle;
}
.an-table tbody tr:hover td { background: #131313; }
.an-table tbody tr:last-child td { border-bottom: none; }

.admin-form {
    display: grid;
    gap: 12px;
}

.admin-form-row {
    display: grid;
    gap: 5px;
}

.admin-form-row label,
.admin-form label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #707070;
}

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="datetime-local"],
.admin-form select,
.admin-form textarea {
    background: #0d0d0d;
    border: 1px solid #303030;
    color: #d6d6d6;
    padding: 8px 10px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
}

.admin-form input:focus,
.admin-form select:focus {
    outline: none;
    border-color: #707070;
}

.admin-form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #8a8a8a;
    cursor: pointer;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.admin-table th {
    text-align: left;
    padding: 9px 12px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #555555;
    border-bottom: 1px solid #303030;
    background: #151515;
    white-space: nowrap;
}

.admin-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #1e1e1e;
    color: #9a9a9a;
    vertical-align: middle;
}

.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.admin-table .at-username { color: #e2e2e2; font-weight: 600; }
.admin-table .at-link { color: #d6d6d6; text-decoration: none; }
.admin-table .at-link:hover { color: #ffffff; text-decoration: underline; }

.admin-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 7px;
    border-radius: 2px;
    border: 1px solid;
    white-space: nowrap;
}

.admin-badge.ab-success { color: #48a765; border-color: #2a5a3a; background: #0d1a12; }
.admin-badge.ab-failure { color: #c94a4a; border-color: #6a2a2a; background: #1a0d0d; }
.admin-badge.ab-info    { color: #4a8ac9; border-color: #2a4a6a; background: #0d1520; }
.admin-badge.ab-warn    { color: #c9943a; border-color: #6a4a1a; background: #1a1208; }
.admin-badge.ab-perm    { color: #c94a4a; border-color: #6a2a2a; background: #1a0d0d; }
.admin-badge.ab-temp    { color: #4a8ac9; border-color: #2a4a6a; background: #0d1520; }
.admin-badge.ab-admin   { color: #c94a4a; border-color: #6a2a2a; background: #1a0d0d; }
.admin-badge.ab-mod     { color: #48a765; border-color: #2a5a3a; background: #0d1a12; }
.admin-badge.ab-player  { color: #8a8a8a; border-color: #3a3a3a; background: #111111; }
.admin-badge.ab-live    { color: #48a765; border-color: #2a5a3a; background: #0d1a12; }
.admin-badge.ab-paused  { color: #c94a4a; border-color: #6a2a2a; background: #1a0d0d; }

@media (max-width: 860px) {
    .admin-nav     { display: none; }
    .admin-content { padding: 16px; }
}

/* ================================================================
   SIDEBAR MENU — refined redesign (overrides older nav generations)
   ================================================================ */
:root {
    --nav-gold:      #c9a24a;
    --nav-gold-soft: rgba(201, 162, 74, 0.12);
    --nav-text:      #9b9b9b;
    --nav-text-hi:   #f2f2f2;
}

.sidebar {
    background: linear-gradient(180deg, #161616 0%, #101010 100%);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

/* ---- Brand block ---- */
.sidebar .brand-block {
    padding: 16px 16px 13px;
    margin: 0;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(201, 162, 74, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}

.sidebar .brand-block .title {
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
    color: #f4f4f4;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.sidebar .brand-block .title::first-letter {
    color: var(--nav-gold);
}

.sidebar .brand-block .subtitle {
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7c7c7c;
    margin: 5px 0 0;
}

/* ---- Nav container ---- */
.sidebar .nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 8px 14px;
    margin: 0;
}

/* ---- Section labels ---- */
.sidebar .nav .nav-label {
    font-family: var(--font-display);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6f6353;
    padding: 14px 10px 5px;
    margin: 0;
    border: 0;
    position: relative;
}

.sidebar .nav .nav-label:first-child {
    padding-top: 4px;
}

/* ---- Nav links (full reset of older boxy styles) ---- */
.sidebar .nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    position: relative;
    min-height: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--nav-text);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    text-align: left;
    text-decoration: none;
    transition: color 130ms ease, background-color 130ms ease, padding-left 130ms ease;
}

/* left accent bar */
.sidebar .nav a::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 16px;
    border-radius: 3px;
    background: var(--nav-gold);
    transition: transform 130ms ease;
}

.sidebar .nav a:hover {
    color: var(--nav-text-hi);
    background: rgba(255, 255, 255, 0.045);
    border: 0;
    transform: none;
    padding-left: 15px;
}

.sidebar .nav a:hover::before {
    transform: translateY(-50%) scaleY(1);
    opacity: 0.6;
}

.sidebar .nav a.is-active,
.sidebar .nav a.active,
.sidebar .nav a[aria-current="page"] {
    color: #f6ead2;
    background: var(--nav-gold-soft);
    border: 0;
    box-shadow: none;
    font-weight: 600;
}

.sidebar .nav a.is-active::before,
.sidebar .nav a.active::before,
.sidebar .nav a[aria-current="page"]::before {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
    box-shadow: 0 0 8px rgba(201, 162, 74, 0.55);
}

.sidebar .nav a:focus-visible {
    outline: 1px solid var(--nav-gold);
    outline-offset: 1px;
}

/* Logout gets a subtle danger tint on hover */
.sidebar .nav a[href$="logout.php"]:hover {
    color: #e88b8b;
}
.sidebar .nav a[href$="logout.php"]:hover::before {
    background: var(--danger);
}

/* Jail widget — keep distinct from standard nav links */
.sidebar .nav .nav-jail-alert {
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 8px 10px 8px 13px;
    font-size: inherit;
    font-weight: inherit;
    gap: 9px;
    box-shadow: none;
}

.sidebar .nav .nav-jail-alert::before {
    display: none !important;
}

.sidebar .nav .nav-jail-alert:hover {
    padding-left: 13px;
    transform: translateX(2px);
}

.sidebar .nav .nav-jail-alert.is-active {
    color: inherit;
    background: rgba(201, 162, 74, 0.08);
    border-color: rgba(201, 162, 74, 0.55);
    font-weight: inherit;
    box-shadow: none;
}

/* ---- Casino submenu disclosure, kept consistent ---- */
.sidebar details > summary {
    border-radius: 7px;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--nav-text);
}
.sidebar details > summary:hover {
    color: var(--nav-text-hi);
    background: rgba(255, 255, 255, 0.045);
}

/* ---- Slimmer sidebar scrollbar ---- */
.sidebar { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #444; }

/* ================================================================
   SIDEBAR NAV — extra polish layer (gilded noir)
   ================================================================ */

/* Brand block: subtle gold hairline + faint texture */
.sidebar .brand-block {
    position: relative;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(201, 162, 74, 0.10) 0%, rgba(201, 162, 74, 0) 55%),
        linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
}
.sidebar .brand-block::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(201, 162, 74, 0.55) 0%, rgba(201, 162, 74, 0) 70%);
}

/* Section labels: label text + trailing hairline for a "chapter" feel */
.sidebar .nav .nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a7a54;
}
.sidebar .nav .nav-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(201, 162, 74, 0.28) 0%, rgba(201, 162, 74, 0) 90%);
}

/* Links: keep icon accent bar, add a soft sheen sweep on hover */
.sidebar .nav a {
    overflow: hidden;
    transition:
        color 140ms ease,
        background-color 140ms ease,
        padding-left 140ms ease,
        box-shadow 140ms ease;
}
.sidebar .nav a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
    transform: translateX(-120%);
    transition: transform 480ms ease;
    pointer-events: none;
}
.sidebar .nav a:hover::after {
    transform: translateX(120%);
}
.sidebar .nav a:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Active link: richer gradient plate + inset gold edge + glow bar */
.sidebar .nav a.is-active,
.sidebar .nav a.active,
.sidebar .nav a[aria-current="page"] {
    background:
        linear-gradient(90deg, rgba(201, 162, 74, 0.22) 0%, rgba(201, 162, 74, 0.04) 60%, rgba(201, 162, 74, 0) 100%);
    color: #f9edd3;
    box-shadow:
        inset 0 0 0 1px rgba(201, 162, 74, 0.18),
        inset 3px 0 0 var(--nav-gold);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.sidebar .nav a.is-active::before,
.sidebar .nav a.active::before,
.sidebar .nav a[aria-current="page"]::before {
    height: 20px;
    box-shadow: 0 0 10px rgba(201, 162, 74, 0.75);
}

/* ================================================================
   TOPBAR — striking noir "command bar" (overrides older layers)
   ================================================================ */
.main-area .topbar {
    position: relative;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid #2b2b2b !important;
    border-radius: 10px;
    background:
        radial-gradient(120% 150% at 0% -20%, rgba(201, 162, 74, 0.10) 0%, rgba(201, 162, 74, 0) 45%),
        linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* gold accent line across the top */
.main-area .topbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0%, #c9a24a 18%, #f0d488 50%, #c9a24a 82%, transparent 100%);
    opacity: 0.85;
}

/* soft deco glow in the top-right, contained within the bar */
.main-area .topbar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: radial-gradient(120px 120px at 100% 0%, rgba(201, 162, 74, 0.10) 0%, transparent 70%);
    pointer-events: none;
}

/* keep interactive content above the decorative layers */
.main-area .topbar > * { position: relative; z-index: 1; }

/* ---- Avatar: gold-framed portrait ---- */
.topbar .identity-avatar-box {
    width: 82px;
    min-width: 82px;
    height: 82px;
    border-radius: 10px;
    border: 1px solid #c9a24a !important;
    background: #141414 !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.55);
}
.topbar .identity-avatar-image { border-radius: 9px; }

/* ---- Name plate ---- */
.topbar .identity-primary {
    align-items: center;
    border: 1px solid #383026 !important;
    border-radius: 8px;
    background: linear-gradient(120deg, rgba(201, 162, 74, 0.10) 0%, rgba(18, 18, 18, 0.75) 100%) !important;
    padding: 6px 12px !important;
}
.topbar .identity-name {
    font-family: var(--font-display);
    font-size: 20px !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #f7ecd6 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.topbar .identity-role {
    color: #1a1407 !important;
    background: linear-gradient(120deg, #e3c072 0%, #c39a3f 100%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}
.topbar .identity-crew-affiliation { border-radius: 999px; }

/* ---- Resource chips: rounded + colour-tinted ---- */
.topbar .identity-chip { border-radius: 8px !important; }
.topbar .resource-chip,
.topbar .hp-chip { border-radius: 8px !important; }

.topbar .energy-chip {
    border-color: #5a4a1e !important;
    background: linear-gradient(120deg, rgba(150, 112, 30, 0.20) 0%, rgba(18, 18, 18, 0.92) 100%) !important;
}
.topbar .nerve-chip {
    border-color: #23506a !important;
    background: linear-gradient(120deg, rgba(30, 90, 130, 0.20) 0%, rgba(18, 18, 18, 0.92) 100%) !important;
}
.topbar .hp-chip {
    border-color: #2f5a3c !important;
    background: linear-gradient(120deg, rgba(40, 95, 58, 0.18) 0%, rgba(18, 18, 18, 0.92) 100%) !important;
}

/* glowing resource bars */
.topbar .hp-bar-wrap { height: 7px; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); }
.topbar .energy-chip .hp-bar-fill {
    background: linear-gradient(90deg, #f0b429 0%, #ffe08a 100%) !important;
    box-shadow: 0 0 8px rgba(255, 202, 58, 0.55);
}
.topbar .nerve-chip .hp-bar-fill {
    background: linear-gradient(90deg, #4aa3d8 0%, #9fe0ff 100%) !important;
    box-shadow: 0 0 8px rgba(95, 179, 230, 0.55);
}
.topbar .hp-chip .hp-bar-fill { box-shadow: 0 0 8px rgba(72, 167, 101, 0.5); }

/* ---- Gold (Favours) chip: restore + intensify ---- */
.topbar .favours-chip {
    border-radius: 8px !important;
    border-color: #8a6a2c !important;
    background: linear-gradient(120deg, #2a1e06 0%, #14100a 100%) !important;
    box-shadow: inset 0 0 12px rgba(201, 162, 74, 0.08);
}
.topbar .favours-chip:hover {
    border-color: #d8b768 !important;
    box-shadow: 0 0 10px rgba(201, 162, 74, 0.3);
}

/* ---- Cash chip: money-green accent ---- */
.topbar .cash-chip-header {
    border-radius: 8px !important;
    border-color: #33553f !important;
    background: linear-gradient(120deg, rgba(46, 96, 60, 0.22) 0%, rgba(16, 18, 16, 0.92) 100%) !important;
}
.topbar .cash-chip-header .label { color: #8fd0a5 !important; }
.topbar .cash-chip-header .cash-value { color: #86e2a6 !important; }

/* ---- Quick shortcuts ---- */
.topbar .header-shortcut { border-radius: 7px; }
.topbar .header-shortcut.is-available:hover {
    border-color: var(--nav-gold) !important;
    box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
}

/* ---- Action cluster ---- */
.topbar .topbar-actions { align-items: center; gap: 8px; }
.topbar .topbar-actions .notification-link,
.topbar .topbar-actions .sound-toggle,
.topbar .topbar-actions .staff-cp-toggle { border-radius: 8px; }
.topbar .topbar-actions .notification-link:hover,
.topbar .topbar-actions .sound-toggle:hover {
    border-color: var(--nav-gold) !important;
    box-shadow: 0 0 8px rgba(201, 162, 74, 0.3);
}

/* Character button as the primary gold CTA */
.topbar .character-drawer-toggle {
    border-radius: 8px;
    border: 1px solid #d8b768 !important;
    background: linear-gradient(145deg, #c9a24a 0%, #a8842f 100%) !important;
    color: #17120a !important;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    padding: 0 14px;
    box-shadow: 0 2px 10px rgba(201, 162, 74, 0.25);
}
.topbar .character-drawer-toggle:hover {
    background: linear-gradient(145deg, #dcb75f 0%, #bd9438 100%) !important;
    box-shadow: 0 3px 14px rgba(201, 162, 74, 0.4);
}

/* ---- Concept D command centre (live topbar) ---- */
.main-area .topbar.topbar--command {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.topbar--command .topbar-command {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.topbar--command .hm-d-top {
    padding: 10px 12px 8px;
    align-items: stretch;
    gap: 12px;
}

.topbar--command .hm-d-dossier {
    align-items: flex-start;
}

.topbar--command .hm-d-dossier-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    align-self: stretch;
}

.topbar--command .hm-d-dossier-col .hm-d-perks {
    margin-top: auto;
}

.topbar--command .hm-d-vitals,
.topbar--command .hm-d-actions-col {
    align-self: start;
}

.topbar--command .hm-d-vitals.hm-d-vitals--row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid #262626 !important;
    border-radius: 8px;
    background: #141414 !important;
    box-shadow: none !important;
    min-width: 0;
}

.topbar--command .hm-d-vital-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    position: relative;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.topbar--command .hm-d-vital-col .hm-vital-tag {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #777;
    line-height: 1.2;
}

.topbar--command .hm-d-vital-col .hm-vital-bar {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}

.topbar--command .hm-d-vital-col .hm-vital-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.topbar--command .hm-d-vital-col .hm-vital-bar--energy > i {
    background: linear-gradient(90deg, #f0b429, #ffe08a);
    box-shadow: 0 0 8px rgba(255, 202, 58, 0.45);
}

.topbar--command .hm-d-vital-col .hm-vital-bar--nerve > i {
    background: linear-gradient(90deg, #4aa3d8, #9fe0ff);
    box-shadow: 0 0 8px rgba(95, 179, 230, 0.45);
}

.topbar--command .hm-d-vital-col .hm-vital-bar--hp > i {
    background: linear-gradient(90deg, #3d9a5c, #7ed4a0);
    box-shadow: 0 0 8px rgba(72, 167, 101, 0.45);
}

.topbar--command .hm-d-vital-col em {
    font-style: normal;
    font-size: 9px;
    color: #aaa;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.topbar--command .hm-d-vital-col em small {
    color: #666;
}

.topbar--command .hm-d-vital-col [data-resource-value] {
    font-variant-numeric: tabular-nums;
}

.topbar--command .hm-d-vital-col.is-regen-pop {
    animation: resourceRegenPulse 520ms ease;
}

.topbar--command .hm-d-vital-col.is-regen-pop [data-resource-value] {
    animation: resourceRegenValuePulse 520ms ease;
}

.topbar--command .hm-d-vital-col--warn .hm-vital-bar--hp > i {
    background: linear-gradient(90deg, #c98a2e, #f0b040);
    box-shadow: 0 0 8px rgba(240, 176, 64, 0.45);
}

.topbar--command .hm-d-vital-col--crit .hm-vital-bar--hp > i {
    background: linear-gradient(90deg, #b83838, #e06060);
    box-shadow: 0 0 8px rgba(224, 96, 96, 0.45);
}

.topbar--command .hm-d-vital-col--full .hm-vital-bar--hp > i {
    background: linear-gradient(90deg, #3d9a5c, #7ed4a0);
    box-shadow: 0 0 8px rgba(107, 218, 138, 0.5);
}

.topbar--command .hm-d-identity {
    gap: 1px;
}

.topbar--command .hm-name {
    font-size: 16px;
    margin-bottom: 1px;
}

.topbar--command a.hm-crew-line {
    text-decoration: none;
    color: var(--crew-color, #7a7268);
}

.topbar--command a.hm-crew-line:hover {
    color: #d4c4b0;
}

.topbar--command .topbar-actions {
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.topbar--command .hm-d-actions-col .hm-d-wallet {
    width: 100%;
    gap: 6px;
}

.topbar--command .hm-d-actions-col .hm-wallet-item {
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.topbar--command .cash-value {
    position: relative;
    display: inline-block;
}

.topbar--command .hm-wallet-item strong {
    font-size: 10px;
}

.topbar--command a.hm-wallet-item--gold {
    text-decoration: none;
}

.topbar--command a.hm-wallet-item--gold:hover {
    border-color: rgba(201, 162, 74, 0.55);
}

.topbar--command a.hm-op {
    text-decoration: none;
    color: inherit;
}

.topbar--command a.hm-op.is-on:hover {
    border-color: #6d6d6d;
    color: #ddd;
}

/* ---- Guest topbar variant ---- */
.main-area .topbar.guest-topbar { align-items: center; }
.topbar.guest-topbar .title {
    font-family: var(--font-display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.topbar.guest-topbar .title::first-letter { color: var(--nav-gold); }

/* ================================================================
   FORUM — compact classic board (denser rows, smaller fonts)
   ================================================================ */
.forum-page { font-size: 11px; }
.forum-page > h2 { font-size: 15px; margin: 0 0 2px; }
.forum-page > .meta { font-size: 9.5px; margin: 0 0 4px; }

.forum-grid {
    margin-top: 8px;
    gap: 8px;
    grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
}
.forum-left,
.forum-right { gap: 8px; }

/* Cards become tight framed blocks with a header bar */
.forum-card {
    padding: 0;
    border: 1px solid #313131;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(160deg, #191919 0%, #101010 100%);
}
.forum-card > h3 {
    margin: 0;
    padding: 7px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #cdbf9e;
    background: linear-gradient(180deg, #202020 0%, #161616 100%);
    border-bottom: 1px solid #303030;
}

/* Create Topic disclosure */
.forum-create-toggle > summary {
    padding: 7px 10px;
    font-size: 10.5px;
    letter-spacing: 0.1em;
}
.forum-page .forum-form { padding: 8px 10px 10px; gap: 6px; }
.forum-create-toggle .forum-form { margin-top: 0; }
.forum-page .forum-emoji-row .btn { min-width: 30px; padding: 3px 5px; font-size: 12px; }

/* ---- Topic list: tight table-style rows ---- */
.forum-topic-list { gap: 0; max-height: 72vh; padding: 0; }
.forum-topic-item {
    display: block;
    border: 0 !important;
    border-bottom: 1px solid #242424 !important;
    border-radius: 0;
    background: transparent !important;
    padding: 0;
    box-shadow: none !important;
    transition: background-color 90ms ease;
}
.forum-topic-item:nth-child(even) { background: rgba(255, 255, 255, 0.014) !important; }
.forum-topic-item:hover { background: rgba(201, 162, 74, 0.07) !important; }
.forum-topic-item.is-active {
    background: rgba(150, 58, 48, 0.20) !important;
    box-shadow: inset 2px 0 0 #b5563f !important;
}
.forum-topic-row { min-height: 0; padding: 4px 10px; gap: 6px; }
.forum-topic-icons { width: auto; min-width: 0; gap: 3px; }
.forum-dot { width: 6px; height: 6px; }
.forum-topic-title {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    color: #cccccc;
}
.forum-topic-item:hover .forum-topic-title { color: #f0f0f0; }
.forum-topic-item.is-active .forum-topic-title { color: #ffffff; }
.forum-topic-stats { gap: 0; margin-left: auto; }
.forum-topic-list .forum-vote-totals { display: none; }
.forum-reply-count {
    font-size: 11px;
    color: #8c8c8c;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: right;
}

/* ---- Thread panel ---- */
.forum-thread { padding: 0; }
.forum-thread-head {
    padding: 8px 10px;
    background: linear-gradient(180deg, #202020 0%, #161616 100%);
    border-bottom: 1px solid #303030;
}
.forum-thread-head h3 {
    font-size: 15px;
    margin: 0 0 3px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01em;
    line-height: 1.25;
}
.forum-thread-head .meta {
    font-size: 10px;
    color: #9a9a9a;
}
.forum-thread-head .meta .forum-user-link {
    font-weight: 700;
    color: #ffffff;
}
.forum-thread-head .meta .forum-user-link:hover {
    color: #f2d488;
}
.forum-thread-head .forum-thread-tags { align-items: flex-start; }
.forum-thread-body {
    margin: 8px 10px;
    padding: 8px 9px;
    font-size: 11.5px;
    line-height: 1.5;
    border-radius: 4px;
}
.forum-topic-actions,
.forum-mod-tools { padding: 0 10px 8px; margin-top: 4px; gap: 5px; }
.forum-edit-topic,
.forum-author-tools { margin: 0 10px 8px; }

/* ---- Replies ---- */
.forum-replies { padding: 0; }
.forum-reply-form { padding: 8px 10px 10px; }
.forum-post-list { padding: 8px 10px 10px; gap: 7px; margin-top: 0; }
.forum-post {
    padding: 0;
    border: 1px solid #303030;
    border-radius: 5px;
    overflow: hidden;
    background: #161616;
}
.forum-post header {
    margin: 0;
    padding: 5px 9px;
    align-items: center;
    background: linear-gradient(180deg, #232323 0%, #191919 100%);
    border-bottom: 1px solid #2c2c2c;
}
.forum-post header strong { font-size: 11px; color: #e6dabd; letter-spacing: 0.02em; }
.forum-post header .meta { font-size: 9px; color: #868686; }
.forum-post p { padding: 8px 9px; margin: 0; font-size: 11.5px; line-height: 1.5; }
.forum-post-actions { padding: 0 9px 7px; margin-top: 0; gap: 5px; }
.forum-post-actions .meta { font-size: 10px; }
.forum-post.forum-post-admin header { background: linear-gradient(180deg, #2b1a1a 0%, #201313 100%); }
.forum-post.forum-post-moderator header { background: linear-gradient(180deg, #17281d 0%, #111e15 100%); }

/* ---- Compact buttons / votes across the forum ---- */
.forum-page .btn { font-size: 10.5px; min-height: 24px; padding: 3px 9px; border-radius: 5px; }
.forum-page .vote-btn { min-width: 24px; padding: 2px 7px; font-size: 12px; }
.forum-page .forum-pagination { margin-top: 8px; }
.forum-page .forum-pagination .btn { min-height: 22px; }

/* ---- Rendered post content (safe BBCode output) ---- */
.forum-thread-body,
.forum-post-body {
    white-space: normal;
    color: #e4e4e4;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.forum-thread-body a,
.forum-post-body a { color: #d9b76a; text-decoration: underline; }
.forum-thread-body a:hover,
.forum-post-body a:hover { color: #f0d488; }
.forum-img {
    max-width: 100%;
    max-height: 340px;
    height: auto;
    width: auto;
    display: block;
    margin: 6px 0;
    border: 1px solid #333;
    border-radius: 4px;
}
.forum-thread-body blockquote,
.forum-post-body blockquote {
    margin: 6px 0;
    padding: 5px 10px;
    border-left: 3px solid #c9a24a;
    background: rgba(255, 255, 255, 0.03);
    color: #d0d0d0;
    font-style: italic;
}
.forum-thread-body pre,
.forum-post-body pre {
    margin: 6px 0;
    padding: 8px 10px;
    background: #0e0e0e;
    border: 1px solid #333;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 11px;
}
.forum-thread-body code,
.forum-post-body code { font-family: Consolas, "Courier New", monospace; }

/* ---- Formatting toolbar + hint ---- */
.forum-format-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.forum-format-row .btn {
    min-width: 26px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
}
.forum-format-hint {
    font-size: 9px;
    color: #7a7a7a;
    margin: 3px 0 0;
    word-break: break-word;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .forum-grid { grid-template-columns: 1fr; }
    .forum-topic-list { max-height: 44vh; }
}

/* =====================================================================
   Forum reply boxes, quote bubbles & vote controls (image-matched)
   ===================================================================== */

/* Post header: username on the left, #id on the right */
.forum-post header,
.forum-thread-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.forum-post-num {
    font-size: 10px;
    font-weight: 700;
    color: #b99a4e;
    letter-spacing: 0.04em;
}
.forum-user-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.forum-user-link:hover {
    color: #f2d488;
    text-decoration: underline;
}
.forum-post header strong .forum-user-link { color: #e6dabd; }

/* Footer row: vote controls left, timestamp right */
.forum-post-actions {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 9px 8px !important;
    border-top: 1px solid #242424;
}
.forum-post-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.forum-post-time {
    color: #7f7f7f;
    font-size: 10px;
    white-space: nowrap;
    margin-left: auto;
}

/* Thumb vote counts */
.forum-vote-n {
    font-size: 11px;
    font-weight: 700;
    min-width: 12px;
    text-align: center;
    color: #cfcfcf;
}
.forum-vote-n.up { color: #7fc98a; }
.forum-vote-n.down { color: #d98080; }
.forum-page .vote-btn.vote-up,
.forum-page .vote-btn.vote-down {
    font-size: 13px;
    line-height: 1;
    padding: 2px 6px;
    background: transparent;
    border-color: #333;
    filter: grayscale(0.25);
}
.forum-page .vote-btn.vote-up:hover { border-color: #4f8a58; filter: none; }
.forum-page .vote-btn.vote-down:hover { border-color: #8a4f4f; filter: none; }

/* Quote button */
.forum-quote-btn {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #d9b76a !important;
    border-color: #4a3d1f !important;
}
.forum-quote-btn:hover {
    color: #f2d488 !important;
    border-color: #c9a24a !important;
    background: rgba(201, 162, 74, 0.08) !important;
}

/* ---- Quote bubbles (from [quote]/[quote=Name]) ---- */
.forum-thread-body .fq,
.forum-post-body .fq {
    margin: 8px 0 14px;
    padding: 0;
}
.forum-thread-body .fq-body,
.forum-post-body .fq-body {
    position: relative;
    background: #e7e6df;
    color: #1c1c1c;
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.55;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* Nested quotes sit inside the parent bubble with their own spacing */
.forum-thread-body .fq-body .fq,
.forum-post-body .fq-body .fq {
    margin: 6px 0 10px;
}
.forum-thread-body .fq-body .fq-body,
.forum-post-body .fq-body .fq-body {
    background: #d7d6cd;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.forum-thread-body .fq-body .fq-body::after,
.forum-post-body .fq-body .fq-body::after {
    border-top-color: #d7d6cd;
}
.forum-thread-body .fq-body::after,
.forum-post-body .fq-body::after {
    content: "";
    position: absolute;
    right: 26px;
    bottom: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 0 solid transparent;
    border-top: 10px solid #e7e6df;
}
.forum-thread-body .fq-body a,
.forum-post-body .fq-body a { color: #8a6d1f; }
.forum-thread-body .fq-body p,
.forum-post-body .fq-body p { margin: 0 0 8px; }
.forum-thread-body .fq-body p:last-child,
.forum-post-body .fq-body p:last-child { margin-bottom: 0; }
.forum-thread-body .fq-by,
.forum-post-body .fq-by {
    display: inline-block;
    float: right;
    margin-top: 6px;
    padding: 4px 14px;
    background: linear-gradient(180deg, #262626 0%, #1b1b1b 100%);
    border: 1px solid #3a3a3a;
    border-radius: 7px;
    color: #d9b76a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.forum-thread-body .fq::after,
.forum-post-body .fq::after { content: ""; display: block; clear: both; }

/* ---- Nicer compose / reply boxes ---- */
.forum-page .forum-form textarea,
.forum-page .forum-reply-form textarea,
.forum-page .forum-form input[type="text"] {
    background: #121212;
    border: 1px solid #333;
    border-radius: 7px;
    color: #ececec;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.forum-page .forum-form textarea:focus,
.forum-page .forum-reply-form textarea:focus,
.forum-page .forum-form input[type="text"]:focus {
    outline: none;
    border-color: #c9a24a;
    box-shadow: 0 0 0 2px rgba(201, 162, 74, 0.18);
    background: #161616;
}
.forum-page .forum-reply-form {
    background: #141414;
    border: 1px solid #2c2c2c;
    border-radius: 8px;
    padding: 10px 12px 12px !important;
}

/* ---- Breathing room: replies don't span full width, quotes narrower ---- */
.forum-post-body {
    width: 95%;
    margin: 0 auto;
    padding: 10px 0;
    box-sizing: border-box;
}
.forum-thread-body .fq,
.forum-post-body .fq {
    width: 90%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* Nested quotes stay full width inside their parent bubble */
.forum-thread-body .fq-body .fq,
.forum-post-body .fq-body .fq {
    width: 100%;
    max-width: 100%;
}

/* ================================================================
   UI IDEAS — topbar mockups (page-ideas)
   ================================================================ */
.page-ideas .content {
    gap: 14px;
}

.ideas-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ideas-intro h1 {
    margin: 4px 0 6px;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f0e8d8;
}

.ideas-intro--subsection {
    margin-top: 4px;
}

.ideas-intro--subsection h2 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #ece2d0;
}

.ideas-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #2a2a2a;
}

.ideas-section-nav a {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid #3a3028;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a89070;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.25);
    transition: border-color 120ms, color 120ms, background 120ms;
}

.ideas-section-nav a:hover {
    border-color: rgba(201, 162, 74, 0.55);
    color: #e8c878;
    background: rgba(201, 162, 74, 0.08);
}

.ideas-section-anchor {
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-margin-top: 18px;
}

.ideas-kicker {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nav-gold, #c9a24a);
}

.ideas-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #2a2a2a;
    font-size: 11px;
    color: #888;
}

.ideas-legend strong {
    color: var(--nav-gold, #c9a24a);
    margin-right: 4px;
}

.ideas-legend-preferred {
    color: #c8b888;
}

.ideas-compare-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #555;
    padding: 0 4px;
}

.ideas-block--preferred {
    border-color: rgba(201, 162, 74, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 162, 74, 0.08) inset;
}

.ideas-variant-badge--preferred {
    border-color: rgba(201, 162, 74, 0.65);
    background: rgba(201, 162, 74, 0.2);
    color: #f0d488;
}

.ideas-preferred-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 74, 0.4);
    background: rgba(201, 162, 74, 0.12);
    font-style: normal;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e8c878;
    vertical-align: middle;
}

.ideas-slot-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px 16px;
    padding: 10px 12px;
    border: 1px dashed #333;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.ideas-slot-preview-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
    white-space: nowrap;
}

.ideas-block {
    border: 1px solid #2b2b2b;
    border-radius: 10px;
    background: linear-gradient(160deg, #141414 0%, #0a0a0a 100%);
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.ideas-block-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #252525;
    background: rgba(201, 162, 74, 0.04);
}

.ideas-block-head h2 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ece2d0;
}

.ideas-block-head p {
    margin: 0;
    font-size: 11px;
    color: #777;
    line-height: 1.45;
}

.ideas-variant-badge {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(201, 162, 74, 0.45);
    background: rgba(201, 162, 74, 0.12);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #e8c878;
}

.ideas-block .hud-mock {
    margin: 14px 16px 16px;
}

.ideas-note {
    text-align: center;
}

/* --- UI redesign progress tracker --- */
.ideas-progress-page .ideas-block .ideas-progress-list {
    margin: 0 16px 16px;
}

.ideas-progress-summary {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 12px;
    align-items: end;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #2a2a2a;
}

.ideas-progress-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 72px;
}

.ideas-progress-stat span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #666;
}

.ideas-progress-stat strong {
    font-size: 22px;
    line-height: 1;
    color: #f0e8d8;
}

.ideas-progress-stat--wide {
    min-width: 0;
}

.ideas-progress-stat--wide em {
    font-size: 10px;
    font-style: normal;
    color: #8a7868;
    margin-top: 4px;
}

.ideas-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    overflow: hidden;
}

.ideas-progress-bar > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7a6030, #c9a24a);
}

.ideas-progress-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #252525;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.ideas-progress-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid #222;
}

.ideas-progress-item:last-child {
    border-bottom: 0;
}

.ideas-progress-item--done {
    background: rgba(201, 162, 74, 0.04);
}

.ideas-progress-item--pending:hover {
    background: rgba(255, 255, 255, 0.02);
}

.ideas-progress-mark {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.ideas-progress-item--done .ideas-progress-mark {
    border: 1px solid rgba(122, 186, 122, 0.45);
    background: rgba(20, 50, 25, 0.45);
    color: #7aba7a;
    font-size: 14px;
}

.ideas-progress-item--done .ideas-progress-mark::before {
    content: "✓";
}

.ideas-progress-item--pending .ideas-progress-mark {
    border: 1px solid #333;
    background: #101010;
    color: #666;
}

.ideas-progress-copy {
    flex: 1;
    min-width: 0;
}

.ideas-progress-copy strong {
    display: block;
    font-size: 13px;
    color: #ece2d0;
    margin-bottom: 2px;
}

.ideas-progress-copy span {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: #777;
}

.ideas-progress-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.ideas-progress-link {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a89070;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 8px;
    border: 1px solid #333;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    transition: border-color 120ms, color 120ms, background 120ms;
}

.ideas-progress-link:hover {
    border-color: rgba(201, 162, 74, 0.5);
    color: #e8c878;
    background: rgba(201, 162, 74, 0.08);
    text-decoration: none;
}

@media (max-width: 720px) {
    .ideas-progress-summary {
        grid-template-columns: 1fr 1fr;
    }

    .ideas-progress-stat--wide {
        grid-column: 1 / -1;
    }

    .ideas-progress-item {
        flex-wrap: wrap;
    }

    .ideas-progress-links {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 40px;
    }
}

/* ---- Shared mock primitives ---- */
.hud-mock {
    position: relative;
    border: 1px solid #2b2b2b;
    border-radius: 10px;
    background:
        radial-gradient(120% 150% at 0% -20%, rgba(201, 162, 74, 0.08) 0%, transparent 45%),
        linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.hud-mock::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #c9a24a 20%, #f0d488 50%, #c9a24a 80%, transparent);
    opacity: 0.75;
    pointer-events: none;
}

.hm-avatar {
    width: 64px;
    height: 64px;
    border-radius: 9px;
    border: 1px solid #c9a24a;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.hm-avatar--sm { width: 44px; height: 44px; border-radius: 7px; }
.hm-avatar--tall { width: 72px; height: 88px; border-radius: 10px; }
.hm-avatar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #141414;
    color: #666;
    font-family: var(--font-display);
    font-size: 18px;
}

.hm-name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f7ecd6;
}

.hm-rank {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1a1407;
    background: linear-gradient(120deg, #e3c072, #c39a3f);
    padding: 3px 8px;
    border-radius: 999px;
}

.hm-crew {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--crew, #8f6b3d) 70%, #111 30%);
    background: color-mix(in srgb, var(--crew, #8f6b3d) 18%, #111 82%);
    color: #f6f0e8;
}

.hm-vital-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}

.hm-vital-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.hm-vital-bar--energy > i { background: linear-gradient(90deg, #f0b429, #ffe08a); box-shadow: 0 0 8px rgba(255, 202, 58, 0.45); }
.hm-vital-bar--nerve > i { background: linear-gradient(90deg, #4aa3d8, #9fe0ff); box-shadow: 0 0 8px rgba(95, 179, 230, 0.45); }
.hm-vital-bar--hp > i { background: linear-gradient(90deg, #3d9a5c, #7ed4a0); box-shadow: 0 0 8px rgba(72, 167, 101, 0.45); }

.hm-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 7px;
    border: 1px solid #d8b768;
    background: linear-gradient(145deg, #c9a24a, #a8842f);
    color: #17120a;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hm-cta--sm { min-height: 26px; padding: 0 10px; font-size: 8px; }

.hm-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid #3a3a3a;
    background: #161616;
    font-size: 14px;
}

.hm-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hm-ledger {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.hm-ledger-cell {
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hm-ledger-cell span {
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
}

.hm-ledger-cell strong {
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.1;
}

.hm-ledger-cell--gold {
    border-color: #6a5020;
    background: linear-gradient(120deg, rgba(201, 162, 74, 0.14), rgba(18, 14, 10, 0.9));
}
.hm-ledger-cell--gold strong { color: #e8c878; }

.hm-ledger-cell--cash {
    border-color: #2f5a3c;
    background: linear-gradient(120deg, rgba(46, 96, 60, 0.18), rgba(16, 18, 16, 0.9));
}
.hm-ledger-cell--cash strong { color: #86e2a6; font-size: 12px; }

/* ---- A: Three-zone ---- */
.hud-mock--a {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1.4fr) minmax(200px, 1fr);
    gap: 12px;
    padding: 16px 14px 14px;
    align-items: stretch;
}

.hm-a-dossier {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 10px;
    border-right: 1px solid #2a2a2a;
}

.hm-dossier-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.hm-a-vitals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px;
}

.hm-vitals-title {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a7060;
}

.hm-vital {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 8px;
    align-items: center;
}

.hm-vital-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #aaa;
}

.hm-vital-val {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: #ddd;
    white-space: nowrap;
}

.hm-a-ledger {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 10px;
    border-left: 1px solid #2a2a2a;
}

.hm-a-ledger .hm-actions {
    justify-content: flex-end;
}

/* ---- B: Portrait dossier ---- */
.hud-mock--b {
    display: grid;
    grid-template-columns: minmax(200px, 0.95fr) minmax(0, 1.05fr);
    gap: 14px;
    padding: 14px;
}

.hm-b-portrait {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.hm-b-file {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.hm-file-line {
    font-size: 10px;
    color: #9a9088;
}

.hm-file-tag {
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6a6258;
}

.hm-b-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}

.hm-sc {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #333;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
}

.hm-sc.is-on {
    border-color: rgba(201, 162, 74, 0.5);
    background: rgba(201, 162, 74, 0.1);
    color: #e8c878;
}

.hm-sc.is-off {
    opacity: 0.35;
    color: #666;
}

.hm-b-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.hm-b-vitals-slim {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #2e2e2e;
    background: rgba(0, 0, 0, 0.25);
}

.hm-slim-stat {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 9px;
    color: #888;
}

.hm-slim-stat > span:first-child {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #aaa;
}

.hm-slim-stat em {
    font-style: normal;
    font-size: 9px;
    color: #ccc;
    font-variant-numeric: tabular-nums;
}

.hm-slim-bar { min-width: 0; }

.hm-b-wallet {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hm-wallet-gold,
.hm-wallet-cash {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hm-wallet-gold small,
.hm-wallet-cash small {
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777;
}

.hm-wallet-gold strong { color: #e8c878; font-size: 14px; }
.hm-wallet-cash strong { color: #86e2a6; font-size: 13px; }

.hm-b-wallet .hm-cta { margin-left: auto; }

/* ---- C: Context strip ---- */
.hud-mock--c {
    display: flex;
    flex-direction: column;
}

.hm-c-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 14px 10px;
}

.hm-c-id {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}

.hm-c-id .hm-name { font-size: 15px; display: block; }
.hm-c-id .hm-rank { margin-top: 3px; }

.hm-c-chips,
.hm-c-money {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.hm-chip {
    padding: 5px 9px;
    border-radius: 7px;
    border: 1px solid #333;
    background: #161616;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: #ddd;
}

.hm-chip--en { border-color: #5a4a1e; color: #f0d080; }
.hm-chip--nv { border-color: #23506a; color: #9fd4f0; }
.hm-chip--hp { border-color: #2f5a3c; color: #8fd4a8; }
.hm-chip--gold { border-color: #6a5020; color: #e8c878; }
.hm-chip--cash { border-color: #33553f; color: #86e2a6; }

.hm-c-main .hm-actions { margin-left: auto; }

.hm-c-ticker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-top: 1px solid #252525;
    background: rgba(0, 0, 0, 0.28);
    font-size: 9px;
    letter-spacing: 0.04em;
    color: #777;
}

.hm-tick--day { color: #9ab8e0; }
.hm-tick--jail { color: #d89080; }

.hm-tick-sep {
    color: #3a3a3a;
    user-select: none;
}

/* ---- D: Full command centre ---- */
.hud-mock--d {
    display: flex;
    flex-direction: column;
}

.hm-d-top {
    display: grid;
    grid-template-columns: minmax(170px, auto) minmax(0, 1fr) minmax(210px, auto);
    gap: 12px;
    padding: 14px;
    align-items: start;
}

.hm-d-dossier {
    display: flex;
    gap: 10px;
    align-items: center;
}

.hm-d-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.hm-perk-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 74, 0.35);
    background: rgba(201, 162, 74, 0.08);
    font-size: 9px;
    color: #c8b888;
}

.hm-perk-pill strong { color: #e8c878; }

.hm-d-vitals {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #2e2e2e;
    background: rgba(0, 0, 0, 0.22);
}

.hm-d-vital {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    align-items: center;
}

.hm-d-vital > span {
    grid-row: 1 / 3;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
}

.hm-d-vital em {
    grid-column: 2;
    font-style: normal;
    font-size: 9px;
    color: #bbb;
    font-variant-numeric: tabular-nums;
}

.hm-d-vital em small { color: #666; }

.hm-d-vital .hm-vital-bar { grid-column: 2; }

.hm-d-ledger {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hm-d-ledger .hm-ledger { grid-template-columns: 1fr; }
.hm-d-ledger .hm-actions { justify-content: flex-end; }

.hm-d-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 14px 12px;
    border-top: 1px solid #252525;
    background: rgba(0, 0, 0, 0.2);
}

.hm-d-ops {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.hm-op {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 6px;
    border-radius: 6px;
    border: 1px solid #333;
    font-size: 10px;
    color: #aaa;
}

.hm-op em {
    font-style: normal;
    font-family: var(--font-display);
    font-size: 8px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #888;
}

.hm-op.is-on {
    border-color: rgba(201, 162, 74, 0.45);
    background: rgba(201, 162, 74, 0.08);
    color: #e0d4c0;
}

.hm-op.is-on em {
    background: rgba(201, 162, 74, 0.2);
    color: #e8c878;
}

.hm-op.is-off { opacity: 0.4; }

.hm-d-ticker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.02em;
    color: #666;
}

.hm-d-ticker-day { color: #8aa8d0; }
.hm-d-ticker-jail { color: #c08070; }
.hm-d-ticker-sep {
    color: #404040;
    user-select: none;
}
.hm-d-ticker-status.is-free { color: #7a9a7a; }
.hm-d-ticker-status.is-jailed { color: #c97a6a; }
.hm-d-ticker-status.is-hospital { color: #c9a06a; }

/* ---- D v2 refinements (preferred direction) ---- */
.hm-d-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hm-affiliation {
    font-size: 11px;
    font-weight: 400;
    color: #9a9088;
    letter-spacing: 0.01em;
    line-height: 1.35;
}

.hm-subtitle {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5f5a52;
    line-height: 1.3;
}

.hud-mock--d-v2 .hm-d-dossier .hm-name {
    display: block;
    margin-bottom: 1px;
}

.hm-d-perks {
    max-width: 100%;
}

.hud-mock--d-v2 .hm-d-perk,
.topbar--command .hm-d-perk {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    max-width: 100%;
    padding: 5px 8px 5px 6px;
    border-radius: 6px;
    border: 1px solid rgba(201, 162, 74, 0.24);
    border-left: 2px solid #c9a24a;
    background: linear-gradient(135deg, rgba(34, 28, 20, 0.96) 0%, rgba(16, 13, 10, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hm-d-perk-mark {
    width: 6px;
    height: 6px;
    margin-top: 4px;
    border-radius: 50%;
    background: #d4b45a;
    box-shadow: 0 0 7px rgba(201, 162, 74, 0.7);
    flex-shrink: 0;
}

.hm-d-perk-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hm-d-perk-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.hm-d-perk-row em {
    font-style: normal;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9a8d74;
    line-height: 1.2;
}

.hm-d-perk-row strong {
    font-size: 11px;
    font-weight: 700;
    color: #f0d888;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.hm-d-perk-time {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6d8a6d;
    line-height: 1.2;
}

.hm-d-perk-more {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #d4b45a;
    background: rgba(201, 162, 74, 0.12);
    border: 1px solid rgba(201, 162, 74, 0.28);
    border-radius: 999px;
    padding: 1px 5px;
    line-height: 1.25;
}

.hm-d-rank-progress {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    max-width: 100%;
    padding: 5px 8px 5px 6px;
    border-radius: 6px;
    border: 1px solid rgba(138, 148, 168, 0.22);
    border-left: 2px solid #8aa0c0;
    background: linear-gradient(135deg, rgba(24, 26, 32, 0.96) 0%, rgba(14, 15, 18, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hm-d-rank-progress-mark {
    width: 6px;
    height: 6px;
    margin-top: 4px;
    border-radius: 50%;
    background: #9ab4d8;
    box-shadow: 0 0 7px rgba(138, 168, 208, 0.55);
    flex-shrink: 0;
}

.hm-d-rank-progress-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.hm-d-rank-progress-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.hm-d-rank-progress-row em {
    font-style: normal;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7d8798;
    line-height: 1.2;
}

.hm-d-rank-progress-row strong {
    font-size: 11px;
    font-weight: 700;
    color: #d4deee;
    line-height: 1.2;
    white-space: nowrap;
}

.hm-d-rank-progress-bar {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.45);
}

.hm-d-rank-progress-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8aa0c0, #c9d8ee);
    box-shadow: 0 0 6px rgba(138, 168, 208, 0.35);
}

.hm-d-rank-progress-meta {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6d7685;
    line-height: 1.2;
}

.hm-d-wallet {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hm-wallet-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid #2e2e2e;
    background: rgba(0, 0, 0, 0.22);
}

.hm-wallet-item strong {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hm-wallet-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.hm-wallet-item--gold {
    border-color: rgba(168, 132, 47, 0.35);
    background: linear-gradient(120deg, rgba(201, 162, 74, 0.1), rgba(12, 10, 8, 0.85));
}

.hm-wallet-item--gold strong {
    color: #e8c878;
}

.hm-wallet-item--cash {
    border-color: rgba(61, 122, 82, 0.35);
    background: linear-gradient(120deg, rgba(74, 154, 104, 0.12), rgba(12, 14, 12, 0.85));
}

.hm-wallet-item--cash strong {
    color: #86e2a6;
    font-size: 13px;
}

.hud-mock--d-v2 .hm-d-ledger .hm-d-wallet {
    margin-bottom: 0;
}

.hm-rank-line {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #a8a098;
    line-height: 1.35;
}

.hm-crew-line {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #7a7268;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

.hm-d-vitals--row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 10px 14px;
    background: #141414;
    border-color: #262626;
    align-self: start;
    min-width: 0;
}

.hm-d-vital-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hm-d-vital-col em {
    font-style: normal;
    font-size: 9px;
    color: #aaa;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-d-vital-col em small { color: #666; }

.hm-vital-tag {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #777;
}

.hud-mock--d-v2 .hm-d-top {
    padding: 10px 12px 8px;
    align-items: stretch;
    gap: 12px;
}

.hm-d-dossier-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    align-self: stretch;
}

.hud-mock--d-v2 .hm-d-dossier {
    align-items: flex-start;
}

.hud-mock--d-v2 .hm-d-dossier-col .hm-d-perks {
    margin-top: auto;
}

.hud-mock--d-v2 .hm-d-vitals,
.hud-mock--d-v2 .hm-d-actions-col {
    align-self: start;
}

.hud-mock--d-v2 .hm-d-identity {
    gap: 1px;
}

.hud-mock--d-v2 .hm-name {
    font-size: 16px;
    margin-bottom: 1px;
}

.hm-d-actions-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 210px;
}

.hud-mock--d-v2 .hm-d-actions-col .hm-d-wallet {
    width: 100%;
    gap: 6px;
}

.hud-mock--d-v2 .hm-d-actions-col .hm-wallet-item {
    width: 100%;
    box-sizing: border-box;
}

.hud-mock .hm-d-actions.topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    pointer-events: none;
}

.hud-mock .hm-d-actions .staff-cp-toggle,
.hud-mock .hm-d-actions .notification-link,
.hud-mock .hm-d-actions .sound-toggle,
.hud-mock .hm-d-actions .character-drawer-toggle {
    cursor: default;
}

@media (max-width: 900px) {
    .hud-mock--a,
    .hud-mock--d .hm-d-top,
    .topbar--command .hm-d-top {
        grid-template-columns: 1fr;
    }

    .hud-mock--d-v2 .hm-d-dossier-col,
    .topbar--command .hm-d-dossier-col {
        align-self: auto;
    }

    .hud-mock--d-v2 .hm-d-dossier-col .hm-d-perks,
    .topbar--command .hm-d-dossier-col .hm-d-perks {
        margin-top: 0;
    }

    .hm-d-vitals--row {
        grid-template-columns: 1fr;
    }

    .hud-mock--d-v2 .hm-d-actions-col,
    .topbar--command .hm-d-actions-col {
        min-width: 0;
    }

    .hud-mock .hm-d-actions.topbar-actions,
    .topbar--command .topbar-actions {
        justify-content: flex-start;
    }

    .hm-a-dossier,
    .hm-a-ledger {
        border: 0;
        padding: 0;
    }

    .hm-b-portrait { flex-direction: column; }
    .hm-c-main .hm-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ================================================================
   UI IDEAS — bullet factory mockups (page-ideas-bf)
   ================================================================ */
.page-ideas-bf .content {
    gap: 14px;
}

.bf-ideas-page .ideas-block .bfi-mock {
    margin: 14px 16px 16px;
}

.bfi-mock {
    position: relative;
    border: 1px solid #2a2220;
    border-radius: 10px;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(182, 58, 58, 0.07) 0%, transparent 50%),
        linear-gradient(165deg, #161210 0%, #0a0908 100%);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.bfi-mock::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #8a4a3a 25%, #c07050 50%, #8a4a3a 75%, transparent);
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

/* Art placeholder slots */
.bfi-art-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed rgba(201, 162, 74, 0.35);
    border-radius: 8px;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.02) 0,
            rgba(255, 255, 255, 0.02) 8px,
            transparent 8px,
            transparent 16px
        ),
        rgba(0, 0, 0, 0.28);
    text-align: center;
    overflow: hidden;
}

.bfi-art-slot::after {
    content: attr(data-art-label);
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(201, 162, 74, 0.45);
    pointer-events: none;
}

.bfi-art-slot-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(201, 162, 74, 0.75);
}

.bfi-art-slot-hint {
    max-width: 220px;
    font-size: 10px;
    line-height: 1.4;
    color: #666;
}

.bfi-art-slot--hero {
    min-height: 340px;
    border-radius: 0;
    border-width: 0 2px 0 0;
    border-style: dashed;
}

.bfi-art-slot--banner {
    position: absolute;
    inset: 0;
    border: none;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.72) 100%),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 10px,
            transparent 10px,
            transparent 20px
        ),
        #120e0c;
}

.bfi-art-slot--icon {
    width: 100px;
    height: 100px;
    border-radius: 12px;
}

.bfi-art-slot--icon .bfi-art-slot-tag {
    font-size: 8px;
    letter-spacing: 0.08em;
    line-height: 1.2;
    max-width: 52px;
}

.bfi-art-slot--car {
    height: 54px;
    margin-bottom: 6px;
    border-radius: 6px;
}

.bfi-art-slot--car::after {
    display: none;
}

.bfi-art-slot--strip {
    min-height: 88px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.bfi-art-slot--panel {
    min-height: 180px;
}

/* Shared mock primitives */
.bfi-kicker {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a6050;
}

.bfi-head h3,
.bfi-b-hero-copy h3,
.bfi-c-head h3 {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f0e4d4;
}

.bfi-owner-chip {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a6a58;
    padding: 5px 9px;
    border: 1px solid #3a3028;
    background: rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.bfi-owner-chip strong {
    color: #d8c4a8;
}

.bfi-vitals {
    display: grid;
    gap: 1px;
    background: #2a2018;
    border: 1px solid #2e241c;
}

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

.bfi-vital {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: #100c0a;
}

.bfi-vital span {
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5a4838;
}

.bfi-vital strong {
    font-size: 17px;
    font-weight: 700;
    color: #e8d8c4;
    letter-spacing: -0.01em;
}

.bfi-vital small {
    font-size: 10px;
    color: #4a3c30;
}

.bfi-vital--accent strong {
    color: #e8c878;
}

.bfi-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 11px;
    border: 1px solid #2a2a2a;
}

.bfi-status.is-open {
    border-color: #2a4028;
    background: rgba(20, 45, 20, 0.35);
    color: #7aba7a;
}

.bfi-status.is-blocked {
    border-color: #4a2820;
    background: rgba(50, 20, 15, 0.4);
    color: #c08878;
}

.bfi-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

.bfi-buy-panel,
.bfi-station-body,
.bfi-console-pane {
    border: 1px solid #2e241c;
    background: rgba(0, 0, 0, 0.22);
}

.bfi-panel-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a89070;
    margin-bottom: 10px;
}

.bfi-slider-mock {
    display: grid;
    gap: 6px;
}

.bfi-slider-track {
    height: 6px;
    border-radius: 999px;
    background: #1a1410;
    border: 1px solid #2e241c;
    overflow: hidden;
}

.bfi-slider-track > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7a3028, #c05040);
}

.bfi-slider-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #5a4838;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bfi-slider-meta strong {
    color: #d8c8b0;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: none;
}

.bfi-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid #2a2018;
    border-bottom: 1px solid #2a2018;
    margin: 8px 0 10px;
    font-size: 11px;
    color: #6a5848;
}

.bfi-total-row strong {
    font-size: 18px;
    color: #e8c878;
}

.bfi-total-row--compact {
    margin: 8px 0;
    padding: 6px 0;
}

.bfi-total-row--compact strong {
    font-size: 16px;
}

.bfi-btn {
    width: 100%;
}

.bfi-btn-ghost {
    font-size: 10px;
    padding: 4px 10px;
}

.bfi-wallet-note {
    display: block;
    margin-top: 8px;
    font-size: 10px;
    color: #5a5040;
    text-align: center;
}

/* Concept A */
.bfi-a-layout {
    display: grid;
    grid-template-columns: minmax(200px, 38%) 1fr;
    min-height: 360px;
}

.bfi-a-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.bfi-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.bfi-buy-panel {
    padding: 12px;
    margin-top: auto;
}

.bfi-smelt-dock {
    padding: 14px;
    border-top: 1px solid #2a2018;
    background: rgba(0, 0, 0, 0.2);
}

.bfi-smelt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.bfi-smelt-head h4 {
    margin: 2px 0 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c8b8a0;
}

.bfi-car-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.bfi-car-tile {
    padding: 8px;
    border: 1px solid #2e241c;
    background: #100c0a;
    text-align: left;
}

.bfi-car-tile.is-selected {
    border-color: #8a4a3a;
    box-shadow: 0 0 0 1px rgba(182, 58, 58, 0.25) inset;
}

.bfi-car-tile strong {
    display: block;
    font-size: 11px;
    color: #d8c8b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bfi-car-tile span {
    display: block;
    font-size: 10px;
    color: #6a5848;
}

.bfi-car-tile em {
    display: block;
    font-size: 10px;
    font-style: normal;
    color: #a08060;
    margin-top: 2px;
}

/* Concept B */
.bfi-b-hero {
    position: relative;
    min-height: 320px;
    overflow: hidden;
}

.bfi-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    display: block;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
}

.bfi-b-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(8, 6, 5, 0) 0%,
        rgba(8, 6, 5, 0.06) 38%,
        rgba(8, 6, 5, 0.28) 72%,
        rgba(8, 6, 5, 0.62) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.bfi-b-hero-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding: 20px 16px 18px;
    min-height: 320px;
}

.bfi-b-hero-copy p {
    margin: 4px 0 0;
    font-size: 11px;
    color: #a89888;
}

.bfi-owner-name {
    color: #fff;
    font-weight: 700;
}

.bfi-b-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(88px, 1fr));
    gap: 6px;
}

.bfi-b-hero-stats--duo {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
}

.bfi-station-icon-img {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    border: 1px solid #3a3028;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #0e0a08;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.bfi-asset-guide {
    margin: 8px 0 0;
    padding-left: 18px;
    text-align: left;
    font-size: 11px;
    color: #777;
    line-height: 1.5;
}

.bfi-asset-guide code {
    color: #a89070;
}

.bfi-b-hero-stats div {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}

.bfi-b-hero-stats span {
    display: block;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a7868;
}

.bfi-b-hero-stats strong {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: #f0e0cc;
}

.bfi-b-stations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    align-items: stretch;
    background: #2a2018;
    border-top: 1px solid #2a2018;
}

.bfi-station {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 16px;
    background: #100c0a;
}

.bfi-station-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a2018;
}

.bfi-station-art {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bfi-station-head-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
    min-width: 0;
    min-height: 100px;
    padding-top: 4px;
}

.bfi-station h4 {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d0c0a8;
    white-space: nowrap;
}

.bfi-station-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.bfi-station-lead {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #7a6a58;
}

.bfi-station-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 148px;
    padding: 10px;
    border: 1px solid #2a2018;
    background: rgba(0, 0, 0, 0.22);
}

.bfi-station-foot {
    margin-top: auto;
    padding-top: 12px;
}

.bfi-station-foot .bfi-btn {
    width: 100%;
}

.bfi-station p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #7a6a58;
}

.bfi-station-note {
    margin: 0;
    padding: 7px 9px;
    border: 1px solid #4a2820;
    background: rgba(50, 20, 15, 0.35);
    font-size: 10px;
    line-height: 1.4;
    color: #c08878;
}

.bfi-station-note.is-blocked {
    border-color: #4a2820;
}

.bfi-station-state {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #3a3028;
    color: #8a7868;
}

.bfi-station-state.is-live {
    border-color: #2a5030;
    color: #7aba7a;
    background: rgba(20, 50, 25, 0.35);
}

.bfi-station-state.is-hold {
    border-color: #503028;
    color: #c08878;
    background: rgba(50, 20, 15, 0.35);
}

.bfi-qty-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
    padding: 10px 0;
}

.bfi-qty-stepper button {
    width: 32px;
    height: 32px;
    border: 1px solid #3a3028;
    border-radius: 6px;
    background: #1a1410;
    color: #a89070;
    font-size: 16px;
    line-height: 1;
    cursor: default;
}

.bfi-qty-stepper strong {
    min-width: 72px;
    text-align: center;
    font-size: 22px;
    color: #f0e4d4;
}

.bfi-total-row--compact {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #2e241c;
    background: #0e0a08;
}

.bfi-smelt-pick {
    display: grid;
    gap: 6px;
    margin: 0;
    flex: 1;
    align-content: start;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}

.bfi-smelt-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #2e241c;
    border-radius: 6px;
    background: #0e0a08;
    text-align: left;
    cursor: default;
}

.bfi-smelt-option.is-selected {
    border-color: #8a4a3a;
    background: rgba(80, 30, 20, 0.35);
    box-shadow: 0 0 0 1px rgba(182, 58, 58, 0.12) inset;
}

.bfi-smelt-option strong {
    font-size: 11px;
    color: #d8c8b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bfi-smelt-option span {
    font-size: 10px;
    color: #a08060;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Concept C */
.bfi-c-top {
    border-bottom: 1px solid #2a2018;
}

.bfi-c-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 14px;
}

.bfi-telemetry {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: #2a2018;
    border-bottom: 1px solid #2a2018;
}

.bfi-tele-item {
    padding: 10px 12px;
    background: #0c0a08;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bfi-tele-item span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #5a4838;
}

.bfi-tele-item strong {
    font-size: 13px;
    color: #d8c8b0;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.04em;
}

.bfi-tele-item--status.is-open strong {
    color: #7aba7a;
}

.bfi-tele-item--status.is-blocked strong {
    color: #c08878;
}

.bfi-console {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.bfi-tabs {
    display: flex;
    gap: 4px;
}

.bfi-tab {
    padding: 6px 14px;
    border: 1px solid #2e241c;
    background: #100c0a;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a6a58;
    cursor: default;
}

.bfi-tab.is-active {
    border-color: #8a4a3a;
    color: #e8c878;
    background: rgba(80, 30, 20, 0.3);
}

.bfi-console-pane {
    padding: 12px;
}

.bfi-console-grid {
    display: grid;
    grid-template-columns: 1fr minmax(140px, 38%);
    gap: 12px;
}

.bfi-readout-block label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6a5848;
    margin-bottom: 4px;
}

.bfi-big-readout {
    font-size: 32px;
    font-weight: 700;
    color: #f0e4d4;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 10px;
}

.bfi-slider-mock--terminal {
    margin-bottom: 10px;
}

.bfi-readout-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    color: #6a5848;
}

.bfi-readout-line strong {
    font-size: 16px;
    color: #e8c878;
}

.bfi-console-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #2a2018;
}

.bfi-console-foot .bfi-btn {
    width: auto;
    min-width: 160px;
}

.bfi-console-preview {
    padding: 10px 12px;
    border: 1px dashed #333;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
}

.bfi-console-preview-label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 8px;
}

.bfi-car-list-mini {
    display: grid;
    gap: 4px;
}

.bfi-car-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #2a2018;
    background: #0e0a08;
    font-size: 11px;
}

.bfi-car-row.is-selected {
    border-color: #6a4030;
    background: rgba(60, 25, 18, 0.4);
}

.bfi-car-row-mark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4a3830;
}

.bfi-car-row.is-selected .bfi-car-row-mark {
    background: #c05040;
    box-shadow: 0 0 6px rgba(192, 80, 64, 0.5);
}

.bfi-car-row strong {
    color: #d0c0a8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bfi-car-row span {
    color: #6a5848;
    font-size: 10px;
}

.bfi-car-row em {
    font-style: normal;
    color: #a08060;
    font-size: 10px;
}

@media (max-width: 860px) {
    .bfi-a-layout {
        grid-template-columns: 1fr;
    }

    .bfi-art-slot--hero {
        min-height: 160px;
        border-width: 0 0 2px 0;
    }

    .bfi-b-stations,
    .bfi-console-grid {
        grid-template-columns: 1fr;
    }

    .bfi-station-panel {
        min-height: 0;
    }

    .bfi-station-head-copy {
        flex-wrap: wrap;
    }

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

    .bfi-b-hero,
    .bfi-b-hero-overlay {
        min-height: 260px;
    }

    .bfi-b-hero-overlay {
        flex-direction: column;
        align-items: flex-start;
    }

    .bfi-b-hero-stats {
        width: 100%;
    }

    .bfi-console-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .bfi-console-foot .bfi-btn {
        width: 100%;
    }
}

/* ================================================================
   BULLET FACTORY — live depot layout (bf-page--depot)
   ================================================================ */
.bf-page--depot {
    display: block;
    gap: 0;
}

.bf-page--depot .bfi-mock {
    margin: 0;
}

.bf-page--depot .bfi-mock::before {
    display: none;
}

.bfi-owner-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 10px;
    border: 1px solid rgba(201, 162, 74, 0.35);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    color: #c8b888;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 120ms, background 120ms, color 120ms;
}

.bfi-owner-open:hover {
    border-color: rgba(201, 162, 74, 0.6);
    background: rgba(201, 162, 74, 0.1);
    color: #f0e4d4;
}

.bfi-owner-open-role {
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 74, 0.25);
    background: rgba(201, 162, 74, 0.08);
    color: #e8c878;
    font-style: normal;
}

.bfi-hero-stat-sub {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    color: #8a7868;
    font-weight: 400;
}

.bfi-b-hero-stats div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bfi-slider-section--buy {
    margin-top: 0;
    width: 100%;
}

.bfi-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5a4838;
}

.bfi-qty-console {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    min-height: 0;
    padding: 6px 2px 2px;
}

.bfi-qty-console-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6a5848;
    text-align: center;
}

.bfi-qty-stepper--buy {
    margin-top: 0;
    padding: 0;
    gap: 8px;
}

.bfi-qty-stepper--buy .bfi-qty-step {
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border: 1px solid #3a3028;
    border-radius: 8px;
    background: #1a1410;
    color: #a89070;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color 100ms, background 100ms, color 100ms;
}

.bfi-qty-stepper--buy .bfi-qty-step:hover:not(:disabled) {
    border-color: #6a4030;
    background: rgba(80, 30, 20, 0.35);
    color: #e8c878;
}

.bfi-qty-stepper--buy .bfi-qty-step:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.bfi-qty-readout {
    flex: 1;
    min-width: 88px;
    text-align: center;
    padding: 4px 8px;
    border: 1px solid #2e241c;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
}

.bfi-qty-readout strong {
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: #f0e4d4;
    letter-spacing: -0.02em;
}

.bfi-qty-readout em {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a6a58;
}

.bfi-qty-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

.bfi-qty-preset {
    padding: 5px 11px;
    border: 1px solid #2e241c;
    border-radius: 999px;
    background: #0e0a08;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #a89070;
    cursor: pointer;
    transition: border-color 100ms, background 100ms, color 100ms;
}

.bfi-qty-preset:hover:not(:disabled) {
    border-color: #6a4030;
    color: #e8c878;
}

.bfi-qty-preset.is-active {
    border-color: #8a4a3a;
    background: rgba(80, 30, 20, 0.4);
    color: #f0e4d4;
}

.bfi-qty-preset--max {
    border-color: #3a3028;
    color: #c8a878;
}

.bfi-qty-unit-rate {
    margin: 0;
    text-align: center;
    font-size: 10px;
    color: #6a5848;
}

.bfi-buy-form .bfi-total-row--compact {
    margin-top: 2px;
}

.bfi-station-panel:has(.bfi-buy-form) {
    min-height: 200px;
}

.bfi-slider-section {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.bfi-slider-section input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: #b63a3a;
    cursor: pointer;
}

.bfi-buy-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.bfi-smelt-all-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.bfi-smelt-all-btn {
    font-size: 10px;
    padding: 3px 8px;
}

.bfi-station.is-locked .bfi-buy-form {
    opacity: 0.45;
    pointer-events: none;
}

.bfi-station.is-locked .bfi-slider-section input[type="range"] {
    cursor: not-allowed;
}

body.bf-modal-open {
    overflow: hidden;
}

.bf-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.bf-modal[hidden] {
    display: none;
}

.bf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 8, 0.78);
    backdrop-filter: blur(3px);
}

.bf-modal-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    border: 1px solid #3a3028;
    border-radius: 12px;
    background:
        radial-gradient(140% 120% at 100% -20%, rgba(182, 58, 58, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #161210 0%, #0c0a08 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}

.bf-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 1px solid #3a3028;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    color: #b7b7b7;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.bf-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.bf-modal-head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid #2a2018;
}

.bf-modal-head h3 {
    margin: 2px 0 4px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #f0e4d4;
}

.bf-modal-head .meta {
    margin: 0;
}

.bf-modal-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 18px 0;
}

.bf-modal-tab {
    padding: 6px 14px;
    border: 1px solid #2e241c;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #100c0a;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a6a58;
    cursor: pointer;
}

.bf-modal-tab.is-active {
    border-color: #5a4030;
    color: #e8c878;
    background: #16100e;
}

.bf-modal-body {
    padding: 0 18px 18px;
}

.bf-modal-pane {
    display: none;
    padding-top: 12px;
}

.bf-modal-pane.is-active {
    display: block;
}

.bf-modal-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.bf-modal-metrics--quad {
    grid-template-columns: repeat(2, 1fr);
}

.bf-modal-metrics div {
    padding: 8px 10px;
    border: 1px solid #2a2018;
    background: rgba(0, 0, 0, 0.25);
}

.bf-modal-metrics span {
    display: block;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a5848;
}

.bf-modal-metrics strong {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: #e8d8c4;
}

.bf-modal-metrics em {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-style: normal;
    color: #7a6a58;
}

.bf-page--depot .bf-control-section {
    padding: 12px 0;
    border-top: 1px solid #2a2018;
}

.bf-page--depot .bf-control-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.bf-page--depot .bf-stats-panel {
    border: 1px solid #2a2018;
    background: rgba(0, 0, 0, 0.22);
    padding: 12px;
}

.bf-page--depot .bf-stats-panel h4 {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c8b8a0;
}

@media (max-width: 860px) {
    .bf-modal-metrics {
        grid-template-columns: 1fr;
    }
}