/* ============================================================
   CARD OVERRIDE — Codex-style popup for List Builder
   Purple/violet primary, orange for damage/INV/points only
   ============================================================ */

/* ---- OVERLAY ---- */
.co-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
    justify-content: center;
    align-items: flex-start;
}
.co-overlay.visible {
    display: flex;
}

/* ---- CARD CONTAINER ---- */
.co-card {
    max-width: 1100px !important;
    width: 95vw !important;
    background: #120b1e !important;
    border: 1px solid rgba(168,85,247,0.25) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    color: #c4b5d0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    margin: auto;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 80px rgba(168,85,247,0.08);
}

/* ---- HEADER ---- */
.co-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 2px solid rgba(168,85,247,0.4);
}
.co-faction-icon {
    width: 48px; height: 48px;
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.4);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.co-faction-icon svg {
    width: 28px; height: 28px; fill: #a855f7;
}
.co-header-left { flex: 1; min-width: 0; }
.co-unit-name {
    font-size: 1.5rem; font-weight: 800; color: #fff;
    text-transform: uppercase; letter-spacing: 0.03em;
    margin: 0;
}
.co-header-right {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.co-pts {
    font-size: 0.85rem; font-weight: 700; color: #fff;
    background: #f97316; padding: 6px 16px;
    border-radius: 6px;
    white-space: nowrap; text-transform: uppercase;
    letter-spacing: 0.05em;
}
.co-flavor {
    font-size: 0.65rem; color: rgba(168,85,247,0.6);
    text-transform: uppercase; letter-spacing: 0.12em;
    font-weight: 600;
}
.co-close {
    background: none; border: none; color: #888; font-size: 1.6rem;
    cursor: pointer; padding: 4px 8px; line-height: 1;
    transition: color 0.15s;
}
.co-close:hover { color: #fff; }
.co-copy-btn {
    background: none; border: none; color: #666; font-size: 1.1rem;
    cursor: pointer; padding: 4px; transition: color 0.15s;
}
.co-copy-btn:hover { color: #a855f7; }

/* ---- STAT BAR ---- */
.co-stat-bar {
    display: flex; gap: 8px;
    padding: 16px 24px;
    flex-wrap: wrap;
}
.co-stat-item {
    background: rgba(168,85,247,0.06);
    border: 1px solid rgba(168,85,247,0.2);
    border-radius: 10px;
    padding: 10px 0 8px;
    text-align: center;
    min-width: 80px; flex: 1;
    position: relative;
}
.co-stat-icon {
    display: block; margin: 0 auto 4px;
    width: 22px; height: 22px;
    color: #888;
}
.co-stat-icon svg {
    width: 22px; height: 22px;
    stroke: #888; fill: none; stroke-width: 1.5;
}
.co-stat-val {
    font-size: 1.4rem; font-weight: 800; color: #fff;
    line-height: 1.1;
}
.co-stat-label {
    font-size: 0.6rem; color: #888; text-transform: uppercase;
    letter-spacing: 0.08em; margin-top: 4px; display: block;
}

/* INV stat — purple/orange highlight */
.co-stat-item.inv {
    background: rgba(168,85,247,0.12);
    border-color: rgba(168,85,247,0.5);
}
.co-stat-item.inv .co-stat-val { color: #a855f7; }
.co-stat-item.inv .co-stat-icon svg { stroke: #a855f7; }
.co-stat-item.inv .co-stat-label { color: #a855f7; }

/* INV badge — shield overlay on Save stat, top-right */
.co-invuln-badge {
    position: absolute;
    top: -6px; right: -6px;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
}
.co-invuln-badge svg {
    width: 30px; height: 30px;
    fill: #1a0f2e; stroke: #a855f7; stroke-width: 1.5;
    position: absolute;
}
.co-invuln-badge-val {
    position: relative; z-index: 1;
    font-size: 0.75rem; font-weight: 800; color: #a855f7;
}

/* ---- TWO-COLUMN GRID ---- */
.co-grid {
    display: grid; grid-template-columns: 1fr 300px;
    gap: 0;
    min-height: 200px;
}
.co-col-left {
    padding: 20px 24px;
}
.co-col-right {
    padding: 20px 24px;
    border-left: 1px solid rgba(168,85,247,0.15);
    background: rgba(168,85,247,0.03);
}

/* Column headers */
.co-col-header {
    font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: #a855f7; margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
}
.co-col-header-right {
    font-size: 0.95rem; font-weight: 700;
    color: #a855f7; margin-bottom: 14px;
    font-style: italic;
}
/* Collapsible faction rules in inline roster cards */
.co-fr-toggle { cursor: pointer; user-select: none; }
.co-fr-toggle:hover { color: #c084fc; }
.co-fr-chevron { font-size: 0.65rem; margin-left: 6px; display: inline-block; transition: transform 0.2s; }
.co-fr-toggle.co-fr-open .co-fr-chevron { transform: rotate(90deg); }
.co-fr-body { display: none; }
.co-fr-body.co-fr-show { display: block; }
.co-config-row {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: auto;
}
.co-config-label {
    font-size: 0.68rem; color: #888; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.co-models-input {
    font-size: 0.85rem; width: 44px; text-align: center;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(168,85,247,0.3);
    border-radius: 6px; color: #fff; padding: 4px 6px;
    font-family: inherit; font-weight: 700;
}
.co-models-input:focus { border-color: #a855f7; outline: none; }
.co-modifiers-select {
    font-size: 0.72rem;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(168,85,247,0.3);
    border-radius: 6px; color: #c4b5d0; padding: 4px 8px;
    font-family: inherit; cursor: pointer;
}
.co-modifiers-select:focus { border-color: #a855f7; outline: none; }
.co-modifiers-select option { background: #1a0f2e; }

/* ---- WEAPONS TABLE ---- */
.co-weapons-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
.co-weapons-table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
    min-width: 600px;
}
.co-inline-card .co-weapons-table {
    min-width: 0;
}
.co-weapons-table th {
    color: #666;
    padding: 6px 5px; text-align: center; font-size: 0.65rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap; border-bottom: 1px solid rgba(168,85,247,0.1);
}
.co-weapons-table th:first-child { text-align: left; }
.co-weapons-table td {
    padding: 8px 5px; color: #c4b5d0; text-align: center;
    white-space: nowrap; vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.co-weapons-table td:first-child { text-align: left; white-space: normal; }
.co-weapons-table .co-weapon-name { font-weight: 700; color: #fff; }

/* Weapon ability tags — green/teal */
.co-weapon-tag {
    display: inline-block; font-size: 0.6rem; padding: 2px 6px;
    background: rgba(34,197,94,0.15); color: #22c55e;
    border-radius: 4px; margin-left: 4px; margin-top: 2px;
    font-weight: 700; text-transform: uppercase;
    vertical-align: middle;
}

/* Damage column headers — purple accent */
.co-kills-label {
    text-align: center; font-size: 0.55rem; font-weight: 700;
    letter-spacing: 0.12em; color: #b87333;
    border-bottom: 1px solid rgba(184,115,51,0.25);
    padding: 3px 0 2px;
}
.co-weapons-table th.co-dmg-hdr {
    color: #f97316; font-size: 0.58rem;
    min-width: 50px; padding: 4px 4px;
    line-height: 1.3;
}
.co-dmg-hdr-sub {
    display: block; font-size: 0.5rem; color: #888;
    font-weight: 400; letter-spacing: 0;
}

/* Damage cells — brown/copper heat-map */
.co-weapons-table td.co-dmg-cell {
    font-size: 0.85rem; font-weight: 700; color: #fff;
    min-width: 45px;
}
.co-dmg-heat-0 { color: #555 !important; font-weight: 400 !important; }
.co-dmg-heat-1 { background: rgba(180,100,40,0.25); color: #e8c4a0 !important; }
.co-dmg-heat-2 { background: rgba(180,100,40,0.4); color: #f0d0a0 !important; }
.co-dmg-heat-3 { background: rgba(200,110,40,0.55); color: #fff !important; }
.co-dmg-heat-4 { background: rgba(220,120,30,0.7); color: #fff !important; }

/* Disabled weapon rows (e.g. ranged weapons when not in range) */
.co-weapon-row-disabled td {
    opacity: 0.3;
}
.co-weapon-row-disabled td:first-child {
    text-decoration: line-through;
    text-decoration-color: rgba(239,68,68,0.5);
}

/* ---- FACTION RULES SIDEBAR ---- */
.co-faction-rule {
    margin-bottom: 16px;
    padding-left: 0;
}
.co-faction-rule-name {
    font-size: 0.85rem; font-weight: 700; color: #a855f7;
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em;
}
.co-faction-rule-desc {
    font-size: 0.78rem; color: #998caa; line-height: 1.6;
}

/* ---- ABILITY CARDS ---- */
.co-abilities {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; padding: 20px 24px;
    border-top: 1px solid rgba(168,85,247,0.1);
}
.co-ability-card {
    background: rgba(168,85,247,0.04);
    border: 1px solid rgba(168,85,247,0.12);
    border-left: 3px solid #a855f7;
    border-radius: 8px;
    padding: 14px 16px;
}
.co-ability-name {
    font-size: 0.82rem; font-weight: 700; color: #a855f7;
    text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px;
}
.co-ability-type {
    display: inline-block; font-size: 0.58rem; font-weight: 600;
    padding: 1px 6px; border-radius: 8px; margin-left: 6px;
    vertical-align: middle; text-transform: uppercase;
}
.co-ability-type.core { background: rgba(52,152,219,0.2); color: #3498db; }
.co-ability-type.wargear { background: rgba(155,89,182,0.2); color: #9b59b6; }
.co-ability-type.faction { background: rgba(168,85,247,0.2); color: #a855f7; }
.co-ability-desc {
    font-size: 0.78rem; color: #998caa; line-height: 1.6;
}

/* ---- KEYWORDS + LOADOUT FOOTER ---- */
.co-footer {
    padding: 14px 24px 20px;
    border-top: 1px solid rgba(168,85,247,0.08);
}
.co-keywords {
    font-size: 0.78rem; color: #888; line-height: 1.5;
    margin-bottom: 2px;
}
.co-keywords span {
    margin-right: 12px;
}
.co-flavor-footer {
    font-size: 0.62rem; color: rgba(168,85,247,0.4);
    text-transform: uppercase; letter-spacing: 0.12em;
    font-weight: 600; margin-top: 4px;
}

/* ---- RULES PILLS ---- */
.co-rules-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 12px;
}
.co-rule-pill {
    font-size: 0.62rem; font-weight: 700; padding: 3px 8px;
    background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.25);
    border-radius: 10px; color: #a855f7;
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---- MOBILE ---- */
@media (max-width: 768px) {
    .co-grid { grid-template-columns: 1fr; }
    .co-col-right { border-left: none; border-top: 1px solid rgba(168,85,247,0.15); }
    .co-abilities { grid-template-columns: 1fr; }
    .co-card { width: 100vw !important; border-radius: 0 !important; overflow: hidden; }
    .co-card .co-weapons-wrap { overflow-x: auto; max-width: 100%; }
    .co-card .co-weapons-table { min-width: 500px; }
    .co-stat-item { min-width: 0; flex: 1; }
    .co-stat-val { font-size: 1.1rem; }
    .co-unit-name { font-size: 1.2rem; overflow-wrap: break-word; }
    .co-config-row { flex-wrap: wrap; }
    .co-header-right { flex-shrink: 1; flex-wrap: wrap; gap: 8px; }
    .co-header { flex-wrap: wrap; gap: 10px; }
    .co-header-flavor { display: none; }
}

@media (max-width: 480px) {
    .co-stat-bar { gap: 4px; padding: 12px 8px; }
    .co-stat-item { min-width: 0; flex: 1; padding: 6px 0 4px; }
    .co-stat-icon { width: 16px; height: 16px; margin-bottom: 2px; }
    .co-stat-icon svg { width: 16px; height: 16px; }
    .co-stat-val { font-size: 1rem; }
    .co-stat-label { font-size: 0.45rem !important; letter-spacing: 0 !important; }
    .co-invuln-badge { width: 24px; height: 24px; top: -4px; right: -4px; }
    .co-invuln-badge svg { width: 24px; height: 24px; }
    .co-invuln-badge-val { font-size: 0.6rem; }
    .co-weapons-table { min-width: 0 !important; }
    .co-weapons-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .co-header { padding: 14px 16px 12px; }
    .co-col-left, .co-col-right { padding: 14px 16px; }
    .co-abilities { padding: 14px 16px; }
    .co-footer { padding: 12px 16px 16px; }
    .co-col-header { flex-wrap: wrap; }
    .co-config-row { width: 100%; justify-content: flex-start; }
    .co-close { padding: 10px 12px; }
    .co-copy-btn { padding: 10px; }
    .co-hover-popup { max-width: calc(100vw - 16px) !important; width: auto !important; }
}

/* ---- Inline card containment ---- */
.co-inline-card {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}


/* ============================================================
   UNIFIED PURPLE THEME — List Builder page overrides
   Cascades purple through library, roster, analytics, nav
   Orange preserved ONLY for points/damage displays
   ============================================================ */

/* ---- ROOT VARIABLE OVERRIDES ---- */
:root {
    --bg: #120b1e !important;
    --surface: rgba(168,85,247,0.04) !important;
    --surface-hover: rgba(168,85,247,0.08) !important;
    --border: rgba(168,85,247,0.1) !important;
    --border-hover: rgba(168,85,247,0.25) !important;
    --accent: #a855f7 !important;
    --accent-hover: #c084fc !important;
    --accent-glow: rgba(168,85,247,0.15) !important;
    --accent-border: rgba(168,85,247,0.4) !important;
}

/* ---- BODY BACKGROUND ---- */
body {
    background: linear-gradient(135deg, #120b1e 0%, #0d0a18 100%) !important;
    padding-top: 0 !important;
}

/* ---- TOP NAV ---- */
.top-nav {
    background: rgba(0,0,0,0.6) !important;
    border-bottom-color: rgba(168,85,247,0.15) !important;
}
.top-nav .active { color: #a855f7 !important; }

/* ---- APP HEADER ---- */
.app-header {
    border-bottom-color: rgba(168,85,247,0.15) !important;
}

/* ---- CUSTOM FACTION PICKER ---- */
.fp-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: #1a0f2e; border: 1px solid rgba(168,85,247,0.3);
    border-radius: 8px; color: #e0e0e0; padding: 6px 12px;
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; min-width: 180px;
    white-space: nowrap;
}
.fp-trigger:hover, .fp-trigger.fp-active {
    border-color: #a855f7; background: rgba(168,85,247,0.08);
}
.fp-trigger-text { flex: 1; text-align: left; }
.fp-trigger-arrow { color: #a855f7; font-size: 0.7rem; margin-left: 4px; }

.fp-panel {
    display: none; position: fixed; z-index: 9500;
    background: #120b1e; border: 1px solid rgba(168,85,247,0.35);
    border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.8), 0 0 24px rgba(168,85,247,0.1);
    max-height: 70vh; overflow-y: auto; padding: 0;
    max-width: calc(100vw - 16px);
}
.fp-panel.fp-open { display: block; }

.fp-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px 8px; border-bottom: 1px solid rgba(168,85,247,0.12);
    position: sticky; top: 0; background: #120b1e; z-index: 1;
}
.fp-panel-title { font-size: 0.72rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.08em; }
.fp-legend-btn {
    font-size: 0.65rem; font-weight: 600; color: #a855f7; background: rgba(168,85,247,0.1);
    border: 1px solid rgba(168,85,247,0.25); border-radius: 10px;
    padding: 2px 10px; cursor: pointer; font-family: inherit;
    transition: all 0.15s;
}
.fp-legend-btn:hover { background: rgba(168,85,247,0.2); }

/* Legend popup */
.fp-legend {
    display: none; padding: 10px 16px; background: rgba(168,85,247,0.06);
    border-bottom: 1px solid rgba(168,85,247,0.12);
}
.fp-legend.fp-legend-open { display: block; }
.fp-legend-title { font-size: 0.68rem; font-weight: 700; color: #a855f7; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.fp-legend-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 6px; }
.fp-legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: #aaa; }
.fp-legend-row { font-size: 0.68rem; color: #777; }

/* Group sections */
.fp-group { padding: 6px 0; margin: 0; border-top: 2px solid rgba(168,85,247,0.25); }
.fp-group[data-allegiance="imperium"] { background: rgba(59,130,246,0.15); border-left: 3px solid #60a5fa; }
.fp-group[data-allegiance="chaos"] { background: rgba(239,68,68,0.15); border-left: 3px solid #f87171; }
.fp-group[data-allegiance="xenos"] { background: rgba(34,197,94,0.15); border-left: 3px solid #4ade80; }
.fp-group-header {
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; padding: 8px 16px 4px;
    display: flex; align-items: center; gap: 6px;
}
.fp-group[data-allegiance="imperium"] .fp-group-header { color: #60a5fa; }
.fp-group[data-allegiance="chaos"] .fp-group-header { color: #f87171; }
.fp-group[data-allegiance="xenos"] .fp-group-header { color: #4ade80; }
.fp-group-icon { font-size: 0.8rem; }

/* Faction rows */
.fp-faction-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 16px 7px 24px; cursor: pointer;
    transition: background 0.1s;
}
.fp-faction-row:hover { background: rgba(168,85,247,0.1); }
.fp-faction-name { font-size: 0.82rem; color: #e0e0e0; font-weight: 500; }
.fp-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Tier badge */
.fp-tier-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: 0.65rem; font-weight: 900; letter-spacing: 0;
    flex-shrink: 0;
}

/* Win rate */
.fp-wr { font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Trend arrows */
.fp-trend { font-size: 0.8rem; font-weight: 900; }
.fp-trend-up { color: #2ecc71; }
.fp-trend-down { color: #e74c3c; }

/* Mobile */
@media (max-width: 600px) {
    .fp-trigger { min-width: 140px; font-size: 0.78rem; padding: 5px 8px; }
    .fp-panel { max-height: 80vh; border-radius: 12px 12px 0 0; }
    .fp-faction-row { padding: 12px 12px 12px 20px; }
    .fp-faction-name { font-size: 0.78rem; }
}

/* ---- POINTS DISPLAYS — keep orange ---- */
.pts-display { color: #f97316 !important; }
.pts-display.over { color: var(--red) !important; }
.ucard-pts { color: #f97316 !important; }
.rpts { color: #f97316 !important; }
.co-pts { background: #f97316 !important; }

/* ---- LIBRARY CARDS (.ucard) ---- */
.ucard {
    background: rgba(168,85,247,0.04) !important;
    border-color: rgba(168,85,247,0.1) !important;
}
.ucard:hover {
    background: rgba(168,85,247,0.08) !important;
    border-color: rgba(168,85,247,0.3) !important;
}

/* ---- ROSTER ENTRIES (.rentry) ---- */
.rentry {
    background: rgba(168,85,247,0.04) !important;
    border-color: rgba(168,85,247,0.1) !important;
}
.rentry:hover {
    background: rgba(168,85,247,0.08) !important;
    border-color: rgba(168,85,247,0.25) !important;
}
.rentry.drag-over {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 1px #a855f7 !important;
}

/* Roster stat pills — purple labels */
.rstat {
    background: rgba(168,85,247,0.08) !important;
    border-color: rgba(168,85,247,0.15) !important;
}
.rstat .rl { color: #c084fc !important; }
.rstat .rv { color: #f0f0f0 !important; }

/* Roster ability pills — keep purple (already purple, just reinforce) */
.rab-pill {
    background: rgba(168,85,247,0.1) !important;
    border-color: rgba(168,85,247,0.25) !important;
    color: #c084fc !important;
}

/* ---- ROSTER EXPANDED / INLINE CODEX ---- */
.rentry .co-inline-card {
    grid-column: 1 / -1;
    margin-top: 8px;
    border-top: 1px solid rgba(168,85,247,0.15);
    padding-top: 12px;
}

/* ---- LIBRARY SEARCH & FILTERS ---- */
.lib-select,
.lib-search,
.filter-select {
    border-color: rgba(168,85,247,0.2) !important;
}
.lib-select:focus,
.lib-search:focus,
.filter-select:focus {
    border-color: rgba(168,85,247,0.5) !important;
}

/* ---- ANALYTICS PANEL — auto-converts via --accent ---- */
.an-fill {
    background: #a855f7 !important;
}
.an-heading {
    color: #a855f7 !important;
}
.analytics-toggle {
    color: #a855f7 !important;
}

/* ---- BOTTOM TRAY ---- */
.tray-tab.active {
    background: rgba(168,85,247,0.15) !important;
    border-color: rgba(168,85,247,0.4) !important;
    color: #a855f7 !important;
}

/* ---- PHASE BAR BUTTONS ---- */
.phase-btn.active {
    background: rgba(168,85,247,0.15) !important;
    border-color: rgba(168,85,247,0.4) !important;
    color: #a855f7 !important;
}

/* ---- SAVED TABS ---- */
.saved-tab.active {
    border-color: #a855f7 !important;
    color: #a855f7 !important;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar-thumb {
    background: rgba(168,85,247,0.2) !important;
}

/* ---- STRATAGEM CP BADGE — keep orange ---- */
.cp-badge {
    background: #f97316 !important;
}

/* ---- ENHANCEMENT COST — keep orange ---- */
.enh-cost {
    background: rgba(249,115,22,0.2) !important;
    color: #f97316 !important;
    border-color: rgba(249,115,22,0.4) !important;
}

/* ---- MOBILE BOTTOM TABS ---- */
.mob-tab.active {
    color: #a855f7 !important;
    border-top-color: #a855f7 !important;
}

/* ---- DAMAGE CALC BARS in roster ---- */
.rdmg-bar {
    background: linear-gradient(90deg, #a855f7, #c084fc) !important;
}

/* ---- VALIDITY BADGE ---- */
.validity.valid {
    color: var(--green) !important;
}

/* ---- WEAPON ABILITY TAGS in bundle CSS — override orange to green ---- */
.weapon-ability-tag {
    background: rgba(34,197,94,0.15) !important;
    color: #22c55e !important;
}

/* ---- WEAPON TABLE in roster (bundle) — damage heatmap to brown/copper ---- */
.dmg-heat-1 { background: rgba(180,100,40,0.15) !important; color: #e8c4a0 !important; }
.dmg-heat-2 { background: rgba(180,100,40,0.25) !important; color: #f0d0a0 !important; }
.dmg-heat-3 { background: rgba(200,110,40,0.4) !important; color: #fff !important; }
.dmg-heat-4 { background: rgba(220,120,30,0.55) !important; color: #fff !important; }

/* ---- DETACHMENT POPUP ---- */
.det-popup {
    background: #120b1e !important;
    border-color: rgba(168,85,247,0.3) !important;
}

/* ============================================================
   AUTH MODAL + PROFILE BUTTON
   ============================================================ */

/* ---- AUTH OVERLAY ---- */
.auth-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.auth-overlay.visible {
    display: flex;
}

/* ---- AUTH BOX ---- */
.auth-box {
    background: #120b1e;
    border: 1px solid rgba(168,85,247,0.35);
    border-radius: 16px;
    box-shadow: 0 12px 60px rgba(0,0,0,0.7), 0 0 40px rgba(168,85,247,0.1);
    width: 100%;
    max-width: 400px;
    padding: 32px 28px 28px;
    position: relative;
    animation: authFadeIn 0.2s ease-out;
}
@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none; border: none;
    color: #666; font-size: 1.6rem;
    cursor: pointer; padding: 4px 8px;
    line-height: 1; transition: color 0.15s;
}
.auth-close:hover { color: #fff; }

/* ---- AUTH TABS ---- */
.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(168,85,247,0.15);
}
.auth-tab {
    flex: 1;
    background: none; border: none;
    color: #888;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 0 12px;
    cursor: pointer;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}
.auth-tab:hover { color: #c084fc; }
.auth-tab.active {
    color: #a855f7;
    border-bottom-color: #a855f7;
}

/* ---- AUTH ERROR ---- */
.auth-error {
    color: #ef4444;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    min-height: 1.2em;
    margin-bottom: 8px;
}

/* ---- AUTH FORM ---- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}
.auth-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.auth-input:focus {
    border-color: #a855f7;
    background: rgba(168,85,247,0.06);
}
.auth-submit {
    margin-top: 16px;
    padding: 12px;
    background: #a855f7;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.auth-submit:hover {
    background: #c084fc;
}
.auth-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- PROFILE BUTTON IN HEADER ---- */
.auth-btn-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 0 12px;
    flex-shrink: 0;
}
.auth-signin-btn {
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.4);
    color: #a855f7;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.auth-signin-btn:hover {
    background: rgba(168,85,247,0.25);
    border-color: #a855f7;
    color: #c084fc;
}
.auth-username {
    color: #c084fc;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auth-signout-btn {
    background: none;
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}
.auth-signout-btn:hover {
    background: rgba(239,68,68,0.1);
    border-color: #ef4444;
}

/* ---- MY LISTS BUTTON IN HEADER ---- */
.auth-mylists-btn {
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.4);
    color: #a855f7;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}
.auth-mylists-btn:hover {
    background: rgba(168,85,247,0.25);
    border-color: #a855f7;
    color: #c084fc;
}

/* ============================================================
   MY LISTS PANEL
   ============================================================ */

.ml-box {
    background: #120b1e;
    border: 1px solid rgba(168,85,247,0.35);
    border-radius: 16px;
    box-shadow: 0 12px 60px rgba(0,0,0,0.7), 0 0 40px rgba(168,85,247,0.1);
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: authFadeIn 0.2s ease-out;
}
.ml-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
    border-bottom: 2px solid rgba(168,85,247,0.15);
    flex-shrink: 0;
}
.ml-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #a855f7;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ml-actions {
    padding: 12px 24px;
    border-bottom: 1px solid rgba(168,85,247,0.08);
    flex-shrink: 0;
}
.ml-new-btn {
    background: #a855f7;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ml-new-btn:hover { background: #c084fc; }

.ml-content {
    overflow-y: auto;
    padding: 8px 16px 16px;
    flex: 1;
    min-height: 0;
}
.ml-loading {
    text-align: center;
    color: #888;
    padding: 40px 0;
    font-size: 0.9rem;
}
.ml-empty {
    text-align: center;
    color: #888;
    padding: 40px 20px;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ---- LIST CARD ---- */
.ml-card {
    display: flex;
    align-items: stretch;
    background: rgba(168,85,247,0.04);
    border: 1px solid rgba(168,85,247,0.12);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.15s;
    overflow: hidden;
}
.ml-card:hover {
    border-color: rgba(168,85,247,0.35);
    background: rgba(168,85,247,0.08);
}
.ml-card-main {
    flex: 1;
    padding: 14px 16px;
    cursor: pointer;
    min-width: 0;
}
.ml-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ml-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}
.ml-faction {
    font-size: 0.75rem;
    font-weight: 700;
    color: #a855f7;
    background: rgba(168,85,247,0.12);
    padding: 2px 8px;
    border-radius: 6px;
}
.ml-det {
    font-size: 0.7rem;
    color: #888;
    font-weight: 500;
}
.ml-pts {
    font-size: 0.72rem;
    font-weight: 700;
    color: #f97316;
}
.ml-units {
    font-size: 0.7rem;
    color: #666;
}
.ml-card-date {
    font-size: 0.68rem;
    color: #555;
}

/* ---- LIST CARD ACTION BUTTONS ---- */
.ml-card-actions {
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(168,85,247,0.08);
    flex-shrink: 0;
}
.ml-btn {
    flex: 1;
    width: 44px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ml-btn-ren {
    color: #888;
    border-bottom: 1px solid rgba(168,85,247,0.08);
}
.ml-btn-ren:hover {
    background: rgba(168,85,247,0.1);
    color: #a855f7;
}
.ml-btn-dup {
    color: #888;
    border-bottom: 1px solid rgba(168,85,247,0.08);
}
.ml-btn-dup:hover {
    background: rgba(168,85,247,0.1);
    color: #a855f7;
}
.ml-btn-del {
    color: #555;
}
.ml-btn-del:hover {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

/* ---- MY LISTS MOBILE ---- */
@media (max-width: 480px) {
    .ml-box { max-width: 100%; border-radius: 12px; max-height: 90vh; }
    .ml-header { padding: 16px 16px 10px; }
    .ml-title { font-size: 1rem; }
    .ml-actions { padding: 10px 16px; }
    .ml-content { padding: 6px 12px 12px; }
    .ml-card-name { font-size: 0.88rem; }
    .ml-card-meta { gap: 6px; }
}

/* ---- AUTH MOBILE ---- */
@media (max-width: 480px) {
    .auth-box {
        padding: 24px 20px 20px;
        border-radius: 12px;
        max-width: 100%;
    }
    .auth-btn-wrap { flex-shrink: 1; gap: 6px; padding: 0 6px; }
    .auth-username { max-width: 70px; font-size: 0.72rem; }
    .auth-signin-btn { padding: 5px 10px; font-size: 0.75rem; }
    .auth-signout-btn { font-size: 0.65rem; padding: 3px 8px; }
    .auth-mylists-btn { font-size: 0.68rem; padding: 4px 8px; }
}
@media (max-width: 360px) {
    .auth-username { display: none; }
    .auth-btn-wrap { gap: 4px; padding: 0 4px; }
    .auth-box { padding: 20px 16px 16px; }
    .ml-box { margin: 0 4px; }
    .ml-header { padding: 14px 14px 8px; }
    .ml-content { padding: 4px 8px 10px; }
}

/* ---- FLOATING ANALYTICS BUTTON (MOBILE) ---- */
.fab-analytics {
    display: none;
    position: fixed;
    bottom: 72px;
    right: 14px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #a855f7;
    border: 2px solid rgba(168,85,247,0.6);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 900;
    box-shadow: 0 4px 16px rgba(168,85,247,0.4), 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.2s;
    line-height: 1;
    padding: 0;
}
.fab-analytics:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(168,85,247,0.5);
}
.fab-analytics.fab-active {
    background: #7c3aed;
    border-color: #a855f7;
}
@media (max-width: 768px) {
    .fab-analytics { display: flex; align-items: center; justify-content: center; }
}

/* Analytics panel as overlay when opened via FAB */
.fab-panel-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 950 !important;
    background: #0d0a14 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    padding-top: 48px !important;
}

.fab-analytics-close {
    position: fixed;
    top: 10px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.4);
    color: #a855f7;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 960;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.fab-analytics-close:hover {
    background: rgba(168,85,247,0.25);
    color: #c084fc;
}

/* ---- MOBILE FILTER REORGANIZATION ---- */
.mf-toggle {
    display: block;
    width: 100%;
    background: rgba(168,85,247,0.08);
    border: 1px solid rgba(168,85,247,0.2);
    border-radius: 8px;
    color: #888;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 8px 0 4px;
    transition: all 0.15s;
    text-align: left;
}
.mf-toggle:hover, .mf-toggle.mf-open {
    border-color: rgba(168,85,247,0.4);
    color: #a855f7;
    background: rgba(168,85,247,0.12);
}
.mf-chevron {
    float: right;
    font-size: 0.7rem;
}
.mf-extra {
    padding: 8px 0;
}
.mf-extra .filter-select {
    margin-bottom: 8px;
}
.mf-extra .filter-chips {
    margin-bottom: 8px;
}
.mf-extra .slider-row {
    margin-bottom: 4px;
}

/* ============================================================
   SUBSCRIPTION UI — Tier Badges, Upgrade Modal, Usage Counter
   ============================================================ */

/* ---- TIER BADGE ---- */
.tier-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    vertical-align: middle;
    white-space: nowrap;
}
.tier-pro {
    background: rgba(168,85,247,0.2);
    color: #c084fc;
    border: 1px solid rgba(168,85,247,0.4);
}
.tier-elite {
    background: rgba(234,179,8,0.15);
    color: #eab308;
    border: 1px solid rgba(234,179,8,0.4);
}

/* ---- AI USAGE COUNTER ---- */
.ai-usage-counter {
    display: inline-block;
    font-size: 0.68rem;
    color: #888;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}
.ai-usage-counter.at-limit {
    color: #ef4444;
}

/* ---- UPGRADE MODAL ---- */
.upgrade-box {
    background: #120b1e;
    border: 1px solid rgba(168,85,247,0.35);
    border-radius: 16px;
    box-shadow: 0 12px 60px rgba(0,0,0,0.7), 0 0 40px rgba(168,85,247,0.1);
    width: 100%;
    max-width: 560px;
    padding: 32px 28px 28px;
    position: relative;
    animation: authFadeIn 0.2s ease-out;
}
.upgrade-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    text-align: center;
    margin: 0 0 8px;
}
.upgrade-msg {
    font-size: 0.88rem;
    color: #888;
    text-align: center;
    margin-bottom: 24px;
}

/* ---- PLAN CARDS ---- */
.upgrade-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.upgrade-plan {
    background: rgba(168,85,247,0.04);
    border: 1px solid rgba(168,85,247,0.2);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
}
.upgrade-plan-elite {
    border-color: rgba(234,179,8,0.3);
    background: rgba(234,179,8,0.04);
}
.upgrade-plan-name {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a855f7;
    margin-bottom: 4px;
}
.upgrade-plan-elite .upgrade-plan-name {
    color: #eab308;
}
.upgrade-plan-price {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 12px;
}
.upgrade-plan-price span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
}
.upgrade-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.upgrade-plan-features li {
    font-size: 0.78rem;
    color: #aaa;
    padding: 4px 0;
    border-bottom: 1px solid rgba(168,85,247,0.06);
}
.upgrade-plan-features li:last-child {
    border-bottom: none;
}
.upgrade-plan-btn {
    width: 100%;
    padding: 10px;
    background: #a855f7;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.upgrade-plan-btn:hover { background: #c084fc; }
.upgrade-plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.upgrade-plan-btn-elite {
    background: #ca8a04;
}
.upgrade-plan-btn-elite:hover { background: #eab308; }
.upgrade-plan-current {
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 0;
}
.upgrade-note {
    font-size: 0.7rem;
    color: #555;
    text-align: center;
    margin: 0;
}

/* ---- SUBSCRIPTION TOAST ---- */
.sub-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34,197,94,0.9);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 10px;
    z-index: 20000;
    animation: toastSlide 0.3s ease-out, toastFade 0.5s ease-in 3.5s forwards;
    box-shadow: 0 4px 20px rgba(34,197,94,0.3);
}
@keyframes toastSlide {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastFade {
    to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ---- UPGRADE MOBILE ---- */
@media (max-width: 480px) {
    .upgrade-box { padding: 24px 16px 20px; max-width: 100%; }
    .upgrade-plans { grid-template-columns: 1fr; gap: 12px; }
    .upgrade-plan-price { font-size: 1.6rem; }
    .tier-badge { font-size: 0.55rem; padding: 2px 6px; }
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

/* ---- Profile Button in Header ---- */
.auth-profile-btn {
    background: none;
    border: 1px solid rgba(168,85,247,0.25);
    color: #c084fc;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auth-profile-btn:hover {
    background: rgba(168,85,247,0.1);
    border-color: rgba(168,85,247,0.5);
    color: #e0b0ff;
}

/* ---- Profile Box ---- */
.prof-box {
    background: #120b1e;
    border: 1px solid rgba(168,85,247,0.35);
    border-radius: 16px;
    box-shadow: 0 12px 60px rgba(0,0,0,0.7), 0 0 40px rgba(168,85,247,0.1);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: authFadeIn 0.2s ease-out;
}
.prof-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
    border-bottom: 2px solid rgba(168,85,247,0.15);
    flex-shrink: 0;
}
.prof-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #a855f7;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.prof-content {
    overflow-y: auto;
    padding: 0 24px 20px;
    flex: 1;
    min-height: 0;
}

/* ---- Profile Sections ---- */
.prof-section {
    padding: 16px 0;
    border-bottom: 1px solid rgba(168,85,247,0.08);
}
.prof-section:last-child { border-bottom: none; }
.prof-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    margin-bottom: 12px;
}

/* ---- Profile Fields ---- */
.prof-field {
    margin-bottom: 10px;
}
.prof-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
    display: block;
}
.prof-value {
    font-size: 0.88rem;
    color: #e0e0e0;
    font-weight: 500;
    padding: 6px 0;
}
.prof-editable {
    display: flex;
    gap: 8px;
    align-items: center;
}
.prof-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(168,85,247,0.2);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.prof-input:focus {
    border-color: #a855f7;
    background: rgba(168,85,247,0.06);
}
.prof-save-btn {
    padding: 8px 14px;
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.35);
    color: #a855f7;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.prof-save-btn:hover {
    background: rgba(168,85,247,0.25);
    border-color: #a855f7;
}

/* ---- Subscription Display ---- */
.prof-tier-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.prof-tier-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 900;
    padding: 5px 16px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.prof-tier-badge.tier-pro {
    background: rgba(168,85,247,0.2);
    color: #c084fc;
    border: 1px solid rgba(168,85,247,0.4);
}
.prof-tier-badge.tier-elite {
    background: rgba(234,179,8,0.15);
    color: #eab308;
    border: 1px solid rgba(234,179,8,0.4);
}
.prof-tier-badge.tier-free-badge {
    background: rgba(255,255,255,0.05);
    color: #888;
    border: 1px solid rgba(255,255,255,0.1);
}
.prof-tier-detail {
    font-size: 0.82rem;
    color: #aaa;
}

/* ---- Upgrade Row (free users) ---- */
.prof-upgrade-row {
    margin-top: 8px;
}
.prof-upgrade-text {
    font-size: 0.8rem;
    color: #888;
    margin: 0 0 10px;
}
.prof-upgrade-btns {
    display: flex;
    gap: 10px;
}
.prof-upgrade-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.prof-upgrade-pro {
    background: #a855f7;
    color: #fff;
}
.prof-upgrade-pro:hover { background: #c084fc; }
.prof-upgrade-elite {
    background: #ca8a04;
    color: #fff;
}
.prof-upgrade-elite:hover { background: #eab308; }

/* ---- Manage/Cancel Row (paid users) ---- */
.prof-manage-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.prof-manage-btn {
    width: 100%;
    padding: 10px;
    background: rgba(168,85,247,0.12);
    border: 1px solid rgba(168,85,247,0.3);
    color: #c084fc;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.prof-manage-btn:hover {
    background: rgba(168,85,247,0.2);
    border-color: #a855f7;
}
.prof-manage-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- CANCEL BUTTON — Big, loud, unmissable ---- */
.prof-cancel-btn {
    width: 100%;
    padding: 14px;
    background: rgba(239,68,68,0.12);
    border: 2px solid #ef4444;
    color: #ef4444;
    font-size: 0.95rem;
    font-weight: 900;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.prof-cancel-btn:hover {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 20px rgba(239,68,68,0.3), 0 4px 12px rgba(239,68,68,0.2);
}
.prof-cancel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Change Password Button ---- */
.prof-pw-btn {
    width: 100%;
    padding: 10px;
    background: rgba(168,85,247,0.12);
    border: 1px solid rgba(168,85,247,0.3);
    color: #c084fc;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.prof-pw-btn:hover {
    background: rgba(168,85,247,0.2);
    border-color: #a855f7;
}

/* ---- Profile Messages ---- */
.prof-msg {
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    min-height: 1.2em;
    margin-top: 6px;
}
.prof-msg-err { color: #ef4444; }
.prof-msg-ok { color: #22c55e; }

/* ---- Sign Out in Profile ---- */
.prof-signout-section {
    border-bottom: none;
    padding-top: 8px;
}
.prof-signout-btn {
    width: 100%;
    padding: 12px;
    background: none;
    border: 1px solid rgba(239,68,68,0.25);
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.prof-signout-btn:hover {
    background: rgba(239,68,68,0.1);
    border-color: #ef4444;
}

/* ---- Profile Mobile ---- */
@media (max-width: 480px) {
    .prof-box { max-width: 100%; border-radius: 12px; }
    .prof-header { padding: 16px 16px 10px; }
    .prof-content { padding: 0 16px 16px; }
    .prof-title { font-size: 1rem; }
    .prof-editable { flex-direction: column; gap: 6px; }
    .prof-save-btn { width: 100%; }
    .prof-upgrade-btns { flex-direction: column; }
    .auth-profile-btn { max-width: 80px; font-size: 0.75rem; padding: 4px 8px; }
}
@media (max-width: 360px) {
    .prof-box { margin: 0 4px; }
    .prof-header { padding: 14px 14px 8px; }
    .prof-content { padding: 0 12px 12px; }
}

/* ---- MOBILE PANEL VISIBILITY (no-flicker) ---- */
@media (max-width: 767px) {
    /* Force library panel hidden when not active — .lib overrides .panel in bundle */
    .lib.panel:not(.active),
    .roster.panel:not(.active) {
        display: none !important;
    }
    /* Hide content wrapper (roster + analytics) by default on mobile */
    .content {
        display: none !important;
    }
    /* Show content when roster or analytics tab is active */
    body.mob-show-content .content {
        display: block !important;
    }
    /* Library empty state: black bg when no faction */
    body.mob-no-faction #panelLib {
        background: #000;
    }
    body.mob-no-faction #panelLib .lib-title,
    body.mob-no-faction #panelLib .lib-search,
    body.mob-no-faction #panelLib .filter-row,
    body.mob-no-faction #panelLib .filter-chips-label,
    body.mob-no-faction #panelLib .filter-chips,
    body.mob-no-faction #panelLib .slider-row,
    body.mob-no-faction #panelLib .lib-count,
    body.mob-no-faction #panelLib #unitList,
    body.mob-no-faction #panelLib #selDetachment,
    body.mob-no-faction #panelLib #detLink {
        display: none !important;
    }
    /* Roster empty state */
    .roster-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 50vh;
        text-align: center;
        padding: 40px 20px;
        color: #555;
    }
    .roster-empty-state .empty-icon {
        font-size: 2.5rem;
        margin-bottom: 12px;
        opacity: 0.5;
    }
    .roster-empty-state .empty-title {
        font-size: 1rem;
        font-weight: 700;
        color: #888;
        margin-bottom: 6px;
    }
    .roster-empty-state .empty-sub {
        font-size: 0.8rem;
        color: #555;
    }
}

/* ---- KEEP NAV VISIBLE OVER DATASHEET POPUP ---- */
@media (max-width: 767px) {
    .mob-tabs {
        z-index: 10001 !important;
    }
    .det-popup-overlay.visible {
        bottom: 50px !important;
        align-items: flex-end !important;
    }
    .det-popup-overlay.visible .det-popup {
        max-height: calc(80vh - 50px) !important;
        border-radius: 12px 12px 0 0 !important;
    }
}

/* ============================================================
   MOBILE WEAPON CARDS — replaces table on small screens
   ============================================================ */

/* Hide mobile cards on desktop, hide table on mobile */
.co-mob-combat { display: none; }

@media (max-width: 767px) {
    .co-mob-combat { display: block; }
    .co-weapons-wrap { display: none !important; }
    .co-loadout-bar { display: none !important; }
    .co-buff-row { display: none !important; }
    .co-config-row { display: none !important; }
    .co-col-header { font-size: 0.85rem; padding-bottom: 4px; }
}

/* Target tabs */
.co-mob-targets {
    display: flex;
    gap: 0;
    margin: 8px 0 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}
.co-mob-target {
    flex: 1;
    padding: 8px 4px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    background: rgba(255,255,255,0.03);
    border: none;
    cursor: pointer;
    line-height: 1.3;
    transition: all 0.15s;
}
.co-mob-target span {
    display: block;
    font-size: 0.6rem;
    font-weight: 400;
    color: #555;
    margin-top: 1px;
}
.co-mob-target.active {
    background: #2ecc71;
    color: #000;
}
.co-mob-target.active span {
    color: rgba(0,0,0,0.6);
}

/* Buffs toggle */
.co-mob-buffs-toggle {
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #aaa;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.co-mob-arrow {
    font-size: 0.6rem;
    transition: transform 0.2s;
}
.co-mob-buffs-toggle.open .co-mob-arrow {
    transform: rotate(180deg);
}
.co-mob-buffs {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 4px;
}
.co-mob-buffs.open {
    display: flex;
}
.co-mob-buff {
    font-size: 0.68rem !important;
    padding: 4px 8px !important;
}

/* Performance label */
.co-mob-perf-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 0 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}
.co-mob-target-name {
    color: #2ecc71;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Weapon cards */
.co-mob-weapon-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    transition: opacity 0.15s;
}
.co-mob-weapon-card.disabled {
    opacity: 0.3;
}
.co-mob-wc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.co-mob-wc-info {
    flex: 1;
    min-width: 0;
}
.co-mob-wc-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.co-mob-wc-name svg {
    flex-shrink: 0;
    opacity: 0.5;
}
.co-mob-wc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}
.co-mob-wc-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2ecc71;
    background: rgba(46,204,113,0.12);
    border: 1px solid rgba(46,204,113,0.25);
    padding: 2px 6px;
    border-radius: 4px;
}
.co-mob-wc-notags {
    font-size: 0.65rem;
    color: #555;
    font-style: italic;
}

/* Kill badge */
.co-mob-wc-kills {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(243,156,18,0.1);
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 60px;
    flex-shrink: 0;
}
.co-mob-kills-label {
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #f39c12;
    text-align: center;
    line-height: 1.2;
}
.co-mob-kills-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f39c12;
    line-height: 1;
    margin-top: 2px;
}
.co-mob-kills-val.heat-high { color: #2ecc71; }
.co-mob-kills-val.heat-med { color: #f39c12; }
.co-mob-kills-val.heat-low { color: #e74c3c; }

/* Stat line */
.co-mob-wc-stats {
    display: flex;
    gap: 12px;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem;
    color: #aaa;
}
.co-mob-wc-stats b {
    color: #666;
    font-weight: 600;
    margin-right: 2px;
}

/* Range stat highlight */
.co-mob-wc-stat-range {
    color: #8ac;
}
.co-mob-wc-stat-range b {
    color: #8ac;
    font-size: 0.85rem;
}

/* Badges wrapper (counter + kills) */
.co-mob-wc-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Model count badge */
.co-mob-wc-count {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    overflow: hidden;
}
.co-mob-cnt-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}
.co-mob-cnt-btn:active {
    background: rgba(168, 85, 247, 0.4);
}
.co-mob-cnt-val {
    min-width: 24px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #c084fc;
    padding: 0 2px;
}