:root {
    --primary-color: #1a1a1a;
    --secondary-color: #2d2d2d;
    --accent-color: #ffd700;
    --text-color: #ffffff;
    --border-color: #404040;
}

.faction-activity-page {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.faction-activity-hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.2rem;
    padding: 1.4rem 1.5rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(9, 18, 36, 0.96), rgba(15, 28, 58, 0.92));
    border: 1px solid rgba(160, 207, 255, 0.14);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
}

.faction-activity-hero h1 {
    margin: 0.3rem 0 0.7rem;
    color: #fff;
    font-size: 2.2rem;
    font-family: "Space Grotesk", sans-serif;
}

.faction-activity-hero p,
.faction-activity-hero-note p {
    margin: 0;
    color: rgba(236, 245, 255, 0.8);
    line-height: 1.6;
}

.faction-activity-hero-note {
    padding: 1.1rem 1.15rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(160, 207, 255, 0.14);
    align-self: stretch;
}

.faction-activity-hero-note strong {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--accent-color);
}

.faction-activity-toolbar {
    display: grid;
    grid-template-columns: 1.1fr 0.8fr auto;
    gap: 1rem;
    align-items: end;
    padding: 1.1rem 1.2rem;
    border-radius: 18px;
    background: rgba(8, 18, 38, 0.86);
    border: 1px solid rgba(160, 207, 255, 0.14);
}

.faction-activity-toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.faction-activity-toolbar-group label,
.faction-activity-drilldown-picker label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(236, 245, 255, 0.68);
    font-weight: 700;
}

.faction-activity-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.faction-activity-statusline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    color: rgba(236, 245, 255, 0.76);
    padding: 0 0.3rem;
}

.faction-activity-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.faction-activity-summary-card,
.faction-activity-panel,
.faction-activity-metric-card {
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(9, 18, 36, 0.96), rgba(15, 28, 58, 0.9));
    border: 1px solid rgba(160, 207, 255, 0.14);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

.faction-activity-summary-card {
    padding: 1rem 1.1rem;
}

.faction-activity-summary-label,
.faction-activity-panel-kicker {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(236, 245, 255, 0.68);
    margin-bottom: 0.55rem;
    font-weight: 700;
}

.faction-activity-summary-card strong,
.faction-activity-metric-card strong {
    display: block;
    font-size: 1.45rem;
    color: #fff;
    margin-bottom: 0.4rem;
    font-family: "Space Grotesk", sans-serif;
}

.faction-activity-summary-card p {
    margin: 0;
    color: rgba(236, 245, 255, 0.72);
    line-height: 1.45;
}

.faction-activity-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 1rem;
}

.faction-activity-panel {
    padding: 1rem 1.1rem 1.1rem;
}

.faction-activity-panel--wide {
    grid-column: span 2;
}

.faction-activity-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.faction-activity-panel-head h2 {
    margin: 0;
    font-size: 1.15rem;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
}

.faction-activity-panel-meta {
    color: rgba(236, 245, 255, 0.62);
    font-size: 0.88rem;
    text-align: right;
}

.faction-activity-chart-wrap {
    position: relative;
    min-height: 260px;
}

.faction-activity-chart-wrap--compare {
    min-height: 320px;
}

.faction-activity-compare-panel {
    padding-bottom: 1.2rem;
}

.faction-activity-compare-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.faction-activity-compare-card {
    border-radius: 18px;
    border: 1px solid rgba(160, 207, 255, 0.14);
    background: linear-gradient(145deg, rgba(9, 18, 36, 0.96), rgba(15, 28, 58, 0.9));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
    padding: 1rem 1.05rem;
}

.faction-activity-compare-card--primary {
    border-color: rgba(159, 240, 106, 0.28);
}

.faction-activity-compare-card--secondary {
    border-color: rgba(255, 155, 85, 0.28);
}

.faction-activity-compare-name {
    color: #f7fbff;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.85rem;
}

.faction-activity-compare-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.faction-activity-compare-metrics span {
    display: block;
    color: rgba(236, 245, 255, 0.62);
    font-size: 0.84rem;
    margin-bottom: 0.25rem;
}

.faction-activity-compare-metrics strong {
    color: #f7fbff;
    font-size: 1.35rem;
    line-height: 1;
}

.faction-activity-mini-table,
.faction-activity-table {
    width: 100%;
    border-collapse: collapse;
}

.faction-activity-mini-table th,
.faction-activity-table th {
    color: var(--accent-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 0.7rem 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.faction-activity-mini-table td,
.faction-activity-table td {
    padding: 0.8rem 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(247, 251, 255, 0.9);
    vertical-align: top;
}

.faction-activity-mini-table td:last-child,
.faction-activity-mini-table th:last-child,
.faction-activity-table td:nth-child(n+6),
.faction-activity-table th:nth-child(n+6) {
    text-align: right;
}

.faction-activity-table td a,
.faction-activity-mini-table td a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
}

.faction-activity-table td a:hover,
.faction-activity-mini-table td a:hover {
    text-decoration: underline;
}

.faction-activity-empty {
    text-align: center !important;
    color: rgba(236, 245, 255, 0.58) !important;
}

.faction-activity-drilldown-picker {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 240px;
}

.faction-activity-drilldown-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.faction-activity-metric-card {
    padding: 0.95rem 1rem;
}

.faction-activity-metric-card span {
    display: block;
    margin-bottom: 0.45rem;
    color: rgba(236, 245, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .faction-activity-grid {
        grid-template-columns: 1fr 1fr;
    }

    .faction-activity-panel--wide {
        grid-column: span 2;
    }

    .faction-activity-summary-grid,
    .faction-activity-drilldown-grid,
    .faction-activity-compare-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 880px) {
    .faction-activity-hero,
    .faction-activity-toolbar,
    .faction-activity-grid {
        grid-template-columns: 1fr;
    }

    .faction-activity-panel--wide {
        grid-column: span 1;
    }

    .faction-activity-toolbar-actions {
        justify-content: flex-start;
    }

    .faction-activity-panel-head {
        flex-direction: column;
    }

    .faction-activity-compare-cards,
    .faction-activity-compare-metrics {
        grid-template-columns: 1fr;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--primary-color);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: var(--secondary-color);
    padding: 1rem 2rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

header h1 {
    margin: 0;
    color: var(--accent-color);
    font-size: 1.8rem;
    text-align: left;
}

.dashboard-layout {
    display: flex;
    flex: 1;
}

.dashboard-layout nav {
    width: 220px;
    flex-shrink: 0;
    background-color: var(--secondary-color);
    padding: 12px 0;
    height: calc(100vh - 82px);
    position: sticky;
    top: 0;
    border-right: 1px solid var(--border-color);
    overflow-x: visible;
    overflow-y: auto;
}

.dashboard-layout main {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
}

.dashboard-layout main.war-report-main-scroll-mode {
    overflow-y: visible;
}

.dashboard-layout nav ul {
    list-style: none;
    padding: 0 12px;
    margin: 0;
    width: 100%;
}

.dashboard-layout nav li {
    width: 100%;
    padding: 0;
}

.dashboard-layout nav a {
    color: var(--text-color);
    text-decoration: none;
    display: block;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background-color 0.2s;
    font-weight: bold;
    font-size: 0.9rem;
}

.dashboard-layout nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--accent-color);
}

.dashboard-layout nav .api-key-item {
    padding: 0 0 12px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #444);
}

.dashboard-layout nav .api-key-label-wrap label,
.dashboard-layout nav .api-key-item input {
    font-size: 0.85rem;
}

.dashboard-layout nav a.nav-link {
    border-left: 3px solid transparent;
    margin-left: 0;
    transition: background-color 0.2s, color 0.2s, border-left-color 0.2s;
}

.dashboard-layout nav a.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--accent-color);
    border-left-color: var(--accent-color);
}

.dashboard-layout nav a.nav-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.dashboard-layout nav a.nav-link-active {
    background-color: rgba(255, 215, 0, 0.12);
    color: var(--accent-color);
    border-left-color: var(--accent-color);
}

.war-dashboard-table {
    table-layout: fixed;
    width: 100%;
    min-width: 700px;
    font-size: 13px;
}

.war-dashboard-table th,
.war-dashboard-table td {
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.war-dashboard-th-sort {
    cursor: pointer;
    user-select: none;
}

.war-dashboard-th-sort:hover {
    color: var(--accent-color);
}

.war-dashboard-th-sort-active {
    color: var(--accent-color);
    text-shadow: 0 0 12px rgba(124, 246, 211, 0.18);
}

.war-dashboard-sort {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 800;
}

.war-dashboard-location-priority-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.war-dashboard-location-priority-label {
    color: var(--text-muted, #888);
    font-size: 0.82rem;
}

.war-dashboard-location-priority-btn {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(236, 245, 255, 0.84);
    font-size: 0.82rem;
    font-weight: 700;
}

.war-dashboard-location-priority-btn:hover {
    border-color: rgba(124, 246, 211, 0.34);
    color: #fff;
}

.war-dashboard-location-priority-btn--active {
    background: rgba(124, 246, 211, 0.18);
    border-color: rgba(124, 246, 211, 0.52);
    color: #bff8e6;
}

.war-dashboard-location-cell {
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.war-dashboard-location-cell--urgent {
    background: rgba(255, 123, 114, 0.14);
    box-shadow: inset 3px 0 0 rgba(255, 123, 114, 0.75);
}

.war-dashboard-location-cell--soon {
    background: rgba(255, 201, 96, 0.12);
    box-shadow: inset 3px 0 0 rgba(255, 201, 96, 0.72);
}

.war-dashboard-location-cell--long {
    background: rgba(139, 124, 255, 0.12);
    box-shadow: inset 3px 0 0 rgba(139, 124, 255, 0.58);
}

#war-dashboard-enemy-table td:last-child {
    padding: 2px 4px;
}

.war-dashboard-note-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 2px 4px;
    font-size: 12px;
    background: var(--bg-secondary, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    color: var(--text-primary, #eee);
    border-radius: 3px;
}

.war-dashboard-note-input::placeholder {
    color: var(--text-muted, #888);
}

/* Recommended filter: clear label and dynamic FF range */
.war-dashboard-recommended-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
}
.war-dashboard-recommended-checkbox {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.war-dashboard-recommended-btn {
    padding: 6px 14px;
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--accent-color, #FFD700);
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.war-dashboard-recommended-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
}
.war-dashboard-recommended-btn.war-dashboard-recommended-btn-on {
    background: var(--accent-color, #FFD700);
    border-color: var(--accent-color, #FFD700);
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.war-dashboard-recommended-btn.war-dashboard-recommended-btn-on:hover {
    background: #ffdf33;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}
.war-dashboard-recommended-desc {
    color: var(--text-muted, #888);
    font-size: 0.85rem;
}
.war-dashboard-recommended-desc #war-dashboard-recommended-ff-range {
    color: var(--accent-color, #FFD700);
    font-weight: 600;
}

/* FF thresholds: single line, compact (Blue < [input] Green < [input] …) */
#war-dashboard-ff-picker-body {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 10px;
}
#war-dashboard-ff-picker-body .war-dashboard-ff-input {
    width: 56px;
    min-width: 56px;
    padding: 4px 8px;
    box-sizing: border-box;
    text-align: center;
    flex-shrink: 0;
}

/* Chains row: dual = Our | Enemy grid; solo = only our chain, centred */
.war-dashboard-chains-row {
    gap: 16px;
    align-items: stretch;
    margin-top: 12px;
    margin-bottom: 16px;
    overflow: visible;
}

.war-dashboard-live-war-score {
    margin: 12px 0 16px;
}

.war-dashboard-live-war-bleeders {
    margin: -4px 0 12px;
}

.war-dashboard-live-war-bleeders-toggle {
    border-radius: 0;
}

.war-dashboard-live-war-bleeders-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.war-dashboard-live-war-bleeders-table th,
.war-dashboard-live-war-bleeders-table td {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.war-dashboard-live-war-bleeders-table th {
    color: #aef6df;
    font-size: 0.83rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.war-dashboard-live-war-bleeders-table td {
    color: #dfe6f3;
}

.war-dashboard-live-war-bleeders-table td:last-child,
.war-dashboard-live-war-bleeders-table th:last-child,
.war-dashboard-live-war-bleeders-table td:nth-last-child(2),
.war-dashboard-live-war-bleeders-table th:nth-last-child(2),
.war-dashboard-live-war-bleeders-table td:nth-last-child(3),
.war-dashboard-live-war-bleeders-table th:nth-last-child(3) {
    text-align: right;
}

.war-dashboard-live-war-bleeders-rank {
    color: #91a2c4;
    width: 34px;
    white-space: nowrap;
}

.war-dashboard-live-war-bleeders-out {
    color: #ffb8b8;
}

.war-dashboard-live-war-bleeders-net--positive {
    color: #9ef5d8;
}

.war-dashboard-live-war-bleeders-net--negative {
    color: #ffb8b8;
}

.war-dashboard-live-war-bleeders-empty {
    color: #9aa4bc;
    margin: 0;
}

.war-dashboard-live-war-score-card {
    border: 1px solid rgba(124, 246, 211, 0.18);
    border-radius: 10px;
    background:
        radial-gradient(circle at top right, rgba(116, 121, 255, 0.16), transparent 42%),
        linear-gradient(145deg, rgba(17, 21, 38, 0.96), rgba(22, 28, 48, 0.92));
    box-shadow: 0 18px 48px rgba(4, 8, 24, 0.25);
    padding: 16px 18px;
}

.war-dashboard-live-war-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.war-dashboard-live-war-score-kicker {
    color: var(--accent-color, #ffd700);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.war-dashboard-live-war-score-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(124, 246, 211, 0.12);
    color: #aef6df;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.war-dashboard-live-war-score-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.war-dashboard-live-war-score-side {
    min-width: 0;
}

.war-dashboard-live-war-score-side--our {
    text-align: left;
}

.war-dashboard-live-war-score-side--enemy {
    text-align: right;
}

.war-dashboard-live-war-score-name {
    color: #dfe6f3;
    font-weight: 700;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.war-dashboard-live-war-score-value {
    margin-top: 4px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 0 18px rgba(124, 246, 211, 0.1);
}

.war-dashboard-live-war-score-mid {
    text-align: center;
    min-width: 120px;
}

.war-dashboard-live-war-score-label {
    color: #91a2c4;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.war-dashboard-live-war-score-lead {
    margin-top: 8px;
    font-size: 1rem;
    font-weight: 800;
    color: #d9e2f5;
}

.war-dashboard-live-war-score-lead--ahead {
    color: #9ef5d8;
}

.war-dashboard-live-war-score-lead--behind {
    color: #ffb8b8;
}

.war-dashboard-live-war-score-lead--level {
    color: #d9e2f5;
}

.war-dashboard-live-war-score-updated {
    margin-top: 6px;
    color: #8793ad;
    font-size: 0.76rem;
}

@media (max-width: 700px) {
    .war-dashboard-live-war-score-body {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .war-dashboard-live-war-score-side--our,
    .war-dashboard-live-war-score-side--enemy,
    .war-dashboard-live-war-score-mid {
        text-align: center;
    }
}

.war-dashboard-chains-row.war-dashboard-chains-row--dual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
    .war-dashboard-chains-row.war-dashboard-chains-row--dual {
        grid-template-columns: 1fr;
    }
}

.war-dashboard-chains-row.war-dashboard-chains-row--solo {
    display: flex;
    justify-content: center;
}

/* Our column: chain box + chain watch buttons (no separate full-width strip) */
.war-dashboard-chain-column--our {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.war-dashboard-chains-row--solo .war-dashboard-chain-column--our {
    flex: 0 1 420px;
    width: 100%;
    max-width: min(100%, 440px);
}

.war-dashboard-chains-row--dual .war-dashboard-chain-column--our {
    min-width: 0;
}

.war-dashboard-chains-row--dual .war-dashboard-chain-box {
    min-width: 0;
}

.war-dashboard-chains-row--solo .war-dashboard-chain-column--our > .war-dashboard-chain-box {
    width: 100%;
}

/* Chain boxes: big, visible; flowing animation when active */
.war-dashboard-chain-box {
    margin-bottom: 0;
    padding: 20px 24px;
    min-height: 100px;
    background: var(--bg-secondary, #1e1e1e);
    border: 2px solid var(--border-color, #444);
    border-radius: 8px;
    text-align: center;
    position: relative;
}

.war-dashboard-chain-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.war-dashboard-chain-current {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.1;
    color: var(--text-primary, #eee);
    margin-bottom: 6px;
}

.war-dashboard-chain-timer {
    font-size: 1.1rem;
    color: var(--text-muted, #aaa);
    margin-bottom: 8px;
}

.war-dashboard-chain-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--text-muted, #888);
}

.war-dashboard-chain-watch-line {
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text-muted, #aaa);
}

.war-dashboard-chain-watch-name {
    color: var(--accent-color, #ffd700);
    font-weight: 700;
}

.war-dashboard-chain-box-off .war-dashboard-chain-watch-line {
    margin-top: 6px;
}

.war-dashboard-chain-watch-line--empty .war-dashboard-chain-watch-empty {
    opacity: 0.75;
}

.war-dashboard-chain-max {
    color: var(--accent-color);
    font-weight: 600;
}

/* Flowing animation when chain is active (timeout > 0): rotating border + glow */
.war-dashboard-chain-box-active {
    border: none;
    overflow: hidden;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
    background: transparent;
}

.war-dashboard-chain-box-active::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 10px;
    background: conic-gradient(from 0deg, var(--accent-color, #FFD700), #ff9f43, var(--accent-color, #FFD700), #ff9f43, var(--accent-color, #FFD700));
    animation: war-dashboard-chain-rotate 4s linear infinite;
    z-index: 0;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.war-dashboard-chain-box-active::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 6px;
    background: var(--bg-secondary, #1e1e1e);
    z-index: 0;
}

.war-dashboard-chain-box-active .war-dashboard-chain-title,
.war-dashboard-chain-box-active .war-dashboard-chain-current,
.war-dashboard-chain-box-active .war-dashboard-chain-timer,
.war-dashboard-chain-box-active .war-dashboard-chain-meta,
.war-dashboard-chain-box-active .war-dashboard-chain-watch-line {
    position: relative;
    z-index: 1;
}

.war-dashboard-chain-box-off {
    opacity: 0.75;
}
.war-dashboard-chain-box-off .war-dashboard-chain-off-message {
    color: var(--text-muted, #888);
    font-size: 0.95rem;
    margin-top: 8px;
}

/* Auto-refresh header: on/off slider (independent of chain track positioning) */
.war-dashboard-refresh-slider-wrap {
    position: static;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.war-dashboard-refresh-slider-wrap .war-dashboard-chain-track-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

/* Chain box: track toggle in corner */
.war-dashboard-chain-track-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    z-index: 2;
}
.war-dashboard-chain-track-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
.war-dashboard-chain-track-slider {
    width: 28px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    transition: background 0.2s;
}
.war-dashboard-chain-track-slider::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    margin: 1px 0 0 1px;
    background: var(--accent-color, #FFD700);
    border-radius: 50%;
    transition: transform 0.2s;
}
.war-dashboard-chain-track-input:checked + .war-dashboard-chain-track-slider {
    background: rgba(255, 215, 0, 0.35);
}
.war-dashboard-chain-track-input:checked + .war-dashboard-chain-track-slider::before {
    transform: translateX(14px);
}
.war-dashboard-chain-track-input:focus-visible + .war-dashboard-chain-track-slider {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

@keyframes war-dashboard-chain-rotate {
    from { transform: translateZ(0) rotate(0deg); }
    to { transform: translateZ(0) rotate(360deg); }
}

/* War Dashboard settings cog and modal */
.war-dashboard-settings-cog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--secondary-color, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-radius: 6px;
    color: var(--accent-color, #FFD700);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.war-dashboard-settings-cog:hover {
    background: rgba(255, 215, 0, 0.15);
    color: var(--accent-color);
}

.war-dashboard-settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.war-dashboard-settings-modal {
    background: var(--secondary-color, #1e1e1e);
    border: 1px solid var(--border-color, #444);
    border-radius: 8px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.war-dashboard-settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, #444);
}
.war-dashboard-settings-modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--accent-color, #FFD700);
}
.war-dashboard-settings-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: #b0b0b0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.war-dashboard-settings-close:hover {
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.08);
}
.war-dashboard-settings-modal-body {
    padding: 16px;
}
.war-dashboard-settings-ff-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.war-dashboard-settings-ff-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.war-dashboard-settings-ff-label {
    min-width: 72px;
    color: var(--accent-color, #FFD700);
}
.war-dashboard-settings-ff-row .war-dashboard-ff-input {
    width: 80px;
}
.war-dashboard-settings-ff-hint {
    color: #888;
    font-size: 12px;
}
.war-dashboard-settings-interval-input {
    width: 80px;
}
.war-dashboard-settings-divider {
    border: none;
    border-top: 1px solid var(--border-color, #444);
    margin: 16px 0;
}

/* Chain watch (War Dashboard): plain row under Our Chain — no extra framed box */
.war-dashboard-chain-watch-bar {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* Chain watch modal: scroll content inside dialog (not past viewport) */
.war-dashboard-chain-watch-overlay {
    align-items: flex-start;
    padding-top: 24px;
    padding-bottom: 24px;
    overflow-y: auto;
}
.war-dashboard-chain-watch-modal.war-dashboard-settings-modal {
    max-height: min(92vh, 900px);
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: auto;
}
.war-dashboard-chain-watch-modal .war-dashboard-settings-modal-header {
    flex-shrink: 0;
}
.war-dashboard-chain-watch-modal-body.war-dashboard-settings-modal-body {
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* VIP editor: collapsible — single card; header + body share one border */
.war-dashboard-cw-vip-wrap {
    margin-bottom: 14px;
    border: 1px solid var(--border-color, #444);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.war-dashboard-cw-vip-toggle {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--accent-color, #FFD700);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.war-dashboard-cw-vip-toggle[aria-expanded="true"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.war-dashboard-cw-vip-toggle:hover {
    background: rgba(255, 215, 0, 0.07);
}
.war-dashboard-cw-vip-toggle:focus-visible {
    outline: 2px solid var(--accent-color, #FFD700);
    outline-offset: -2px;
}
.war-dashboard-cw-vip-body {
    margin-top: 0;
    padding: 14px 16px 16px;
}
.war-dashboard-cw-vip-body.war-dashboard-cw-vip-body--collapsed {
    display: none !important;
}
.war-dashboard-cw-vip-body .war-dashboard-cw-setup {
    margin-bottom: 0;
}
.war-dashboard-cw-vip-rewards-row {
    margin-bottom: 14px;
}
.war-dashboard-cw-viewer-rewards-row {
    margin: 0 0 12px 0;
}
.war-dashboard-cw-completed-toolbar {
    margin-bottom: 10px;
}
.war-dashboard-cw-vip-chevron {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    transition: transform 0.2s ease;
    opacity: 0.85;
}
.war-dashboard-cw-vip-toggle[aria-expanded="false"] .war-dashboard-cw-vip-chevron {
    transform: rotate(-90deg);
}

/* Read-only summary for all viewers */
.war-dashboard-cw-summary {
    margin: 0 0 16px 0;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.22);
}
.war-dashboard-cw-summary-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-color, #FFD700);
    margin: 0 0 12px 0;
}
.war-dashboard-cw-summary-dl {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 8px 18px;
    font-size: 13px;
    line-height: 1.45;
    align-items: baseline;
}
.war-dashboard-cw-summary-dl dt {
    margin: 0;
    color: #9a9a9a;
    font-weight: 600;
}
.war-dashboard-cw-summary-dl dd {
    margin: 0;
    color: #e4e4e4;
}
.war-dashboard-cw-sum-missing {
    color: #888;
    font-style: italic;
}
@media (max-width: 480px) {
    .war-dashboard-cw-summary-dl {
        grid-template-columns: 1fr;
    }
    .war-dashboard-cw-summary-dl dt {
        margin-top: 6px;
    }
    .war-dashboard-cw-summary-dl dt:first-child {
        margin-top: 0;
    }
}

.war-dashboard-cw-setup {
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.war-dashboard-cw-setup-head {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-color, #FFD700);
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #444);
}
.war-dashboard-cw-setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px 16px;
    align-items: end;
    margin-bottom: 14px;
}
.war-dashboard-cw-field label {
    display: block;
    margin-bottom: 5px;
    color: #9a9a9a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.war-dashboard-cw-field input,
.war-dashboard-cw-field select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #444);
    background: var(--bg-secondary, #1a1a1a);
    color: #eee;
    font-size: 13px;
}
.war-dashboard-cw-backup-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 0 4px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}
.war-dashboard-cw-backup-row > span {
    color: #c8c8c8;
    font-size: 13px;
}
.war-dashboard-cw-backup-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.war-dashboard-cw-backup-actions .btn {
    font-size: 12px;
    padding: 6px 12px;
}
.war-dashboard-cw-backup-hint {
    width: 100%;
    margin: 0;
    font-size: 11px;
    color: #888;
    line-height: 1.4;
}
.war-dashboard-cw-save-row {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.war-dashboard-cw-save-row .btn {
    align-self: flex-start;
    min-width: 160px;
}

.war-dashboard-chain-watch-slot-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.war-dashboard-chain-watch-names {
    font-size: 12px;
    line-height: 1.45;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.war-dashboard-cw-watcher-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}
.war-dashboard-cw-watcher-name {
    flex: 1 1 auto;
    min-width: 0;
}
.war-dashboard-cw-slot-cell .war-dashboard-cw-att {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.35;
    color: #b0b0b0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.war-dashboard-cw-att-min {
    font-variant-numeric: tabular-nums;
    color: #9e9e9e;
}
.war-dashboard-cw-att-icon {
    font-weight: 700;
}
.war-dashboard-cw-att--ok {
    color: #81c784;
}
.war-dashboard-cw-att--fail {
    color: #e57373;
}
.war-dashboard-cw-att--pending {
    color: #ffb74d;
}
.war-dashboard-cw-att--nodata {
    color: #90a4ae;
}
.war-dashboard-cw-att-muted {
    color: #757575;
}
.war-dashboard-chain-watch-att {
    font-size: 0.82em;
    font-variant-numeric: tabular-nums;
    color: #9e9e9e;
    white-space: nowrap;
}
.war-dashboard-cw-leave-icon {
    flex-shrink: 0;
    margin: 0;
    padding: 0 4px;
    min-width: 22px;
    height: 22px;
    line-height: 1;
    font-size: 16px;
    font-weight: 700;
    color: #b0b0b0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}
.war-dashboard-cw-leave-icon:hover {
    color: #f44336;
    background: rgba(244, 67, 54, 0.15);
}
.war-dashboard-cw-leave-icon:focus-visible {
    outline: 2px solid var(--accent-color, #FFD700);
    outline-offset: 1px;
}
.war-dashboard-chain-watch-modal .table-scroll-wrapper {
    max-height: none;
    overflow-x: auto;
}
.war-dashboard-chain-watch-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}
.war-dashboard-chain-watch-table th,
.war-dashboard-chain-watch-table td {
    border: 1px solid var(--border-color, #444);
    padding: 6px 8px;
    vertical-align: top;
}
.war-dashboard-chain-watch-table th {
    color: var(--accent-color, #FFD700);
    text-align: left;
    position: sticky;
    top: 0;
    background: var(--secondary-color, #1e1e1e);
    z-index: 1;
}
.war-dashboard-chain-watch-table--cols {
    min-width: 100%;
}
.war-dashboard-cw-th-slot-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}
.war-dashboard-cw-th-slot-label {
    font-weight: 600;
}
/* + / − column controls: same box + font so they match visually */
.war-dashboard-cw-remove-col,
.war-dashboard-cw-add-col {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid var(--border-color, #444);
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-family: inherit;
}
.war-dashboard-cw-remove-col {
    color: #e57373;
}
.war-dashboard-cw-remove-col:hover {
    background: rgba(244, 67, 54, 0.15);
}
.war-dashboard-cw-th-cw {
    min-width: 72px;
    text-align: center;
}
.war-dashboard-cw-table-block {
    width: 100%;
}
.war-dashboard-cw-table-top-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.war-dashboard-cw-add-col-toolbar {
    margin-left: auto;
    flex-shrink: 0;
}
.war-dashboard-cw-add-col {
    color: var(--accent-color, #ffd700);
}
.war-dashboard-cw-add-col:hover {
    background: rgba(255, 215, 0, 0.12);
}
.war-dashboard-cw-add-day-row td {
    padding: 12px 10px;
    vertical-align: middle;
    background: rgba(255, 215, 0, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.war-dashboard-cw-add-day-hint {
    margin-left: 10px;
    font-size: 12px;
    color: #9e9e9e;
    line-height: 1.4;
}
.war-dashboard-cw-slot-cell {
    min-width: 80px;
}
.war-dashboard-cw-slot-cell--empty {
    vertical-align: middle;
    text-align: center;
}
.war-dashboard-cw-slot-cell .war-dashboard-cw-join {
    width: 100%;
    max-width: 120px;
    padding: 6px 10px;
    font-size: 12px;
}
.war-dashboard-chain-watch-slot--broke {
    background: rgba(244, 67, 54, 0.15);
    box-shadow: inset 3px 0 0 #f44336;
}
.war-dashboard-chain-watch-slot--current {
    background: rgba(76, 175, 80, 0.08);
}
.war-dashboard-cw-field--full {
    grid-column: 1 / -1;
}
.war-dashboard-cw-hour-cell {
    vertical-align: top;
}
.war-dashboard-cw-day-heading {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color, #FFD700);
    letter-spacing: 0.02em;
    margin: 0 0 6px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.war-dashboard-cw-day-time {
    font-size: 12px;
    color: #d0d0d0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.war-dashboard-chain-watch-watchers-cell {
    min-width: 180px;
}
.war-dashboard-chain-watch-actions .btn {
    font-size: 12px;
    padding: 5px 12px;
}
.war-dashboard-chain-watch-col-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #333;
    color: #ccc;
    margin-right: 4px;
}

/* Faction activity tracker */
#war-dashboard-activity-tracker .war-dashboard-activity-track-wrap {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.war-dashboard-activity-chart-wrap {
    position: relative;
    min-height: 200px;
}

.war-dashboard-activity-faction-block {
    margin-bottom: 8px;
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    padding: 0 8px 8px 8px;
}
.war-dashboard-activity-faction-header-row {
    flex-wrap: nowrap;
}
.war-dashboard-activity-faction-header:hover {
    color: var(--accent-color);
}
.war-dashboard-activity-faction-name {
    font-weight: normal;
    color: #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.war-dashboard-activity-faction-remove:hover {
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}
.war-dashboard-activity-faction-remove:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Activity hour modal: fit in modal without horizontal scroll, sensible column widths */
.war-dashboard-activity-hour-modal-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}
.war-dashboard-activity-hour-modal-table th:first-child,
.war-dashboard-activity-hour-modal-table td:first-child {
    width: 52%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.war-dashboard-activity-hour-modal-table .war-dashboard-activity-hour-col-stats,
.war-dashboard-activity-hour-modal-table td:nth-child(2) {
    width: 30%;
    white-space: nowrap;
}
.war-dashboard-activity-hour-modal-table .war-dashboard-activity-hour-col-active,
.war-dashboard-activity-hour-modal-table td:nth-child(3) {
    width: 18%;
    white-space: nowrap;
}
.war-dashboard-activity-hour-sortable {
    cursor: pointer;
    user-select: none;
}
.war-dashboard-activity-hour-sortable:hover {
    color: var(--accent-color);
}

/* Activity tracker table (tracked faction dropdown): sortable columns */
.war-dashboard-activity-tracker-sortable {
    cursor: pointer;
    user-select: none;
}
.war-dashboard-activity-tracker-sortable:hover {
    color: var(--accent-color);
}

/* Vault Checker */
.vault-checker-table-wrap {
    overflow-x: auto;
    margin-bottom: 8px;
}

.vault-checker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.vault-checker-table th,
.vault-checker-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #444);
}

.vault-checker-table th {
    color: var(--accent-color);
    font-weight: 600;
}

.vault-checker-table a {
    color: var(--accent-color);
}

/* Recruitment Tool */
.recruitment-intro {
    margin-bottom: 20px;
    color: var(--text-primary, #eee);
}
.recruitment-intro a {
    color: var(--accent-color);
}
.recruitment-hint {
    font-size: 0.85rem;
    color: #888;
    margin-left: 4px;
}
.recruitment-section {
    margin-bottom: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color, #444);
}
.recruitment-section:last-of-type {
    border-bottom: none;
}
.recruitment-step1-controls,
.recruitment-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}
.recruitment-filter-group {
    display: flex;
    align-items: center;
    gap: 6px 10px;
}
.recruitment-filter-label {
    color: var(--text-muted, #888);
    margin-right: 4px;
}
.recruitment-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.recruitment-results-filters .recruitment-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.recruitment-results-filters .recruitment-filter-row:last-child {
    margin-bottom: 0;
}
.recruitment-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
/* Filter section checkboxes: original native style with accent colour and size */
.recruitment-filter-check input[type="checkbox"],
.recruitment-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
    cursor: pointer;
    flex-shrink: 0;
}
/* Table "contacted" checkbox only: custom style so tick is visible (dark tick on gold, not white on grey) */
.recruitment-table input.recruitment-contacted-cb {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid var(--border-color, #555);
    border-radius: 3px;
    background: var(--secondary-color, #2d2d2d);
    vertical-align: middle;
}
.recruitment-table input.recruitment-contacted-cb:checked {
    background: var(--accent-color);
    border-color: var(--accent-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='%231a1a1a' d='M4 8L1 5l1.5-1.5L4 5l5.5-5.5L11 1.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 10px;
}
.recruitment-progress {
    padding: 12px;
    background: rgba(255, 215, 0, 0.08);
    border-left: 4px solid var(--accent-color);
    border-radius: 4px;
    margin: 12px 0;
}
.recruitment-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.recruitment-table th,
.recruitment-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #444);
}
.recruitment-table th {
    color: var(--accent-color);
    font-weight: 600;
}
.recruitment-table a {
    color: var(--accent-color);
}
.recruitment-table th.recruitment-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.recruitment-table th.recruitment-sort:hover {
    text-decoration: underline;
}
.recruitment-table th.recruitment-sort-asc::after {
    content: ' \2191';
    font-size: 0.85em;
    opacity: 0.8;
}
.recruitment-table th.recruitment-sort-desc::after {
    content: ' \2193';
    font-size: 0.85em;
    opacity: 0.8;
}

.vault-checker-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #444);
}

.vault-checker-tab {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted, #888);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}

.vault-checker-tab:hover {
    color: var(--accent-color);
}

.vault-checker-tab-active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.vault-checker-panel {
    margin-top: 8px;
}

.vault-checker-flagged-row {
    background-color: rgba(255, 68, 68, 0.08);
}

/* By Player: item chips and key */
.vault-checker-key {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary, #1e1e1e);
    border-radius: 6px;
    font-size: 12px;
}

.vault-checker-key .vault-key-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.vault-checker-key .vault-key-group strong {
    color: var(--text-muted, #888);
    margin-right: 4px;
}

.vault-item-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    border-left: 3px solid;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #eee);
}

.vault-item-code {
    display: inline-block;
    margin-right: 4px;
    color: var(--accent-color, #FFD700);
    font-style: italic;
}

.vault-cell-chips .vault-item-chip {
    margin: 2px 4px 2px 0;
}

/* On-brand: accent (gold) at different opacities + neutral. No garish colours. */
.vault-wtype-primary { border-left-color: var(--accent-color, #FFD700); }
.vault-wtype-secondary { border-left-color: rgba(255, 215, 0, 0.65); }
.vault-wtype-melee { border-left-color: rgba(255, 215, 0, 0.4); }
.vault-wtype-other { border-left-color: rgba(255, 255, 255, 0.2); }

.vault-slot-body { border-left-color: rgba(255, 215, 0, 1); }
.vault-slot-gloves { border-left-color: rgba(255, 215, 0, 0.82); }
.vault-slot-helmet { border-left-color: rgba(255, 215, 0, 0.64); }
.vault-slot-boots { border-left-color: rgba(255, 215, 0, 0.48); }
.vault-slot-legs { border-left-color: rgba(255, 215, 0, 0.32); }

/* Below 60s: red animation, bolder */
.war-dashboard-chain-box-urgent.war-dashboard-chain-box-active {
    box-shadow: 0 0 24px rgba(220, 53, 69, 0.5);
}

.war-dashboard-chain-box-urgent.war-dashboard-chain-box-active::before {
    background: conic-gradient(from 0deg, #dc3545, #e4606d, #dc3545, #e4606d, #dc3545);
    inset: -5px;
    animation-duration: 4s;
}

.war-dashboard-chain-box-urgent.war-dashboard-chain-box-active::after {
    inset: 3px;
}

.war-dashboard-chain-box-urgent .war-dashboard-chain-timer {
    font-weight: 700;
    color: #f44;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--accent-color);
}

.input-section {
    background-color: var(--secondary-color);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.api-key-section, .date-range-section, .payout-settings-section, .cache-sales-section {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: var(--accent-color);
}

input[type="text"], input[type="number"], select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    background-color: var(--primary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 4px;
}

button {
    background-color: var(--accent-color);
    color: var(--primary-color);
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.3s;
}

button:hover {
    opacity: 0.9;
}

.date-range-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.results-section {
    background-color: var(--secondary-color);
    padding: 20px;
    border-radius: 8px;
}

.summary-box {
    background-color: var(--primary-color);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.members-list {
    background-color: var(--primary-color);
    padding: 15px;
    border-radius: 4px;
}

#membersTable {
    width: 100%;
    border-collapse: collapse;
    display: table !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#membersTable th, #membersTable td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

#membersTable th {
    background-color: var(--secondary-color);
    color: var(--accent-color);
    cursor: pointer;
    user-select: none;
    text-align: center;
    position: relative;
    padding-right: 25px;
}

#membersTable th:hover {
    background-color: var(--border-color);
}

.sort-indicator {
    margin-left: 0.4em;
    color: var(--accent-color);
    font-weight: bold;
}

.column-controls {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--secondary-color);
    border-radius: 4px;
}

.column-controls h3 {
    margin-bottom: 10px;
    color: var(--accent-color);
}

.column-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.column-toggles input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--accent-color);
    cursor: pointer;
}

.column-toggles input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.column-toggles label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--text-color);
}

.column-toggles label:hover {
    color: var(--accent-color);
}

.totals-row {
    background-color: var(--secondary-color);
    font-weight: bold;
}

.totals-row th {
    background-color: var(--secondary-color);
    text-align: right;
    font-weight: bold;
}

/* Loading bar styles */
.loading-bar {
    margin-top: 20px;
    background-color: var(--primary-color);
    border-radius: 4px;
    padding: 20px;
    text-align: center;
}

.loading-text {
    display: block;
    color: #fff;
    font-size: 1em;
    margin-left: 2px;
}

.loading-dots {
    display: inline-block;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Link styles */
#membersTable a {
    color: #FFD700; /* A brighter yellow for links */
}

#membersTable a:visited {
    color: #FFD700;
}

#membersTable a:hover {
    color: var(--accent-color);
}

/* Payout table styles - identical to main report table */
#payoutTable {
    width: 100%;
    border-collapse: collapse;
}

#payoutTable th, #payoutTable td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

/* Hit-based payout: centre numeric columns (match respect payout table); keep member name left */
#payoutTable tbody td:not(:first-child),
#payoutTable tfoot td:not(:first-child) {
    text-align: center;
}

#payoutTable th {
    background-color: var(--secondary-color);
    color: var(--accent-color);
    cursor: pointer;
    user-select: none;
    text-align: center;
    position: relative;
    padding-right: 25px;
}

#payoutTable th:hover {
    background-color: var(--border-color);
}

#payoutTable a {
    color: var(--text-color);
    text-decoration: underline;
}

#payoutTable a:visited {
    color: var(--text-color);
}

#payoutTable a:hover {
    color: var(--accent-color);
}

#respectPayoutTable a,
#respectPayoutTable a:visited,
#membersTable a.player-link,
#membersTable a.player-link:visited,
#payoutTable a.player-link,
#payoutTable a.player-link:visited,
#respectPayoutTable a.player-link,
#respectPayoutTable a.player-link:visited {
    color: #FFD700 !important;
}

/* Flatpickr customization */
.flatpickr-calendar {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--border-color) !important;
}

.flatpickr-day {
    color: var(--text-color) !important;
}

.flatpickr-current-month {
    color: var(--text-color) !important;
}

.flatpickr-months .flatpickr-month {
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
}

.flatpickr-weekday {
    color: var(--text-color) !important;
}

.flatpickr-day.selected {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
}

.flatpickr-day:hover {
    background: var(--border-color);
    color: var(--text-color);
}

/* Month dropdown: force light background + dark text so options are readable when open */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months option,
.flatpickr-current-month .flatpickr-monthDropdown-month {
    background: #fff !important;
    color: #1a1a1a !important;
}

/* Header and Navigation Styles */
nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

nav h1 {
    margin: 0;
    margin-bottom: 15px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s;
}

nav a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--accent-color);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

nav a:hover {
    color: var(--accent-color);
}

nav a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.welcome-message {
    text-align: center;
    font-size: 1.1rem;
    margin: -10px 0 40px 0;
    color: var(--text-color);
}

.tool-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 32px;
}

.tool-card {
    background: var(--secondary-color);
    border-radius: 12px;
    padding: 28px 24px 24px 24px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s, transform 0.2s;
    text-decoration: none;
}

.tool-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.16);
    transform: translateY(-2px) scale(1.02);
    text-decoration: none;
}

.tool-card h2 {
    color: var(--accent-color);
    font-size: 1.35rem;
    margin-bottom: 12px;
    font-weight: bold;
}

.tool-card p {
    color: #eee;
    font-size: 1rem;
    margin-bottom: 0;
    flex: 1 1 auto;
}

.fetch-container {
    display: flex;
    align-items: center;
    margin-top: 15px;
    gap: 15px;
    flex-wrap: wrap;
}

.rate-limit-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rate-limit-control label {
    margin: 0;
    font-size: 14px;
    color: var(--text-color);
}

.rate-limit-control select {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--primary-color);
    color: var(--text-color);
    font-size: 14px;
    min-width: 120px;
}

.rate-limit-control select:focus {
    outline: none;
    border-color: var(--accent-color);
}

.loading-spinner-inline {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top-color: var(--accent-color);
    animation: spin 1s ease-in-out infinite;
    margin-left: 15px;
}

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

.api-key-item {
    padding: 12px 20px;
    margin-bottom: 10px;
    color: var(--accent-color);
}

.api-key-label-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.api-key-item label {
    margin-bottom: 0;
    font-weight: bold;
    color: #ecf0f1;
}

.api-key-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: pointer;
    color: var(--accent-color);
    border-radius: 50%;
    flex-shrink: 0;
}

.api-key-help:hover,
.api-key-help:focus {
    color: #ffeb3b;
    outline: none;
}

.api-key-help-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.api-key-help-tooltip {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    bottom: auto;
    padding: 10px 12px;
    width: 280px;
    max-width: min(280px, calc(100vw - 24px));
    background-color: #2a2a2a;
    border: 1px solid #404040;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: normal;
    color: #ccc;
    line-height: 1.45;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}

.api-key-help:hover .api-key-help-tooltip,
.api-key-help.is-visible .api-key-help-tooltip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.api-key-item input {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #34495e;
    background-color: var(--primary-color);
    color: white;
}

.api-key-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.api-key-input-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 14px;
}

.api-key-visibility-btn {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    min-height: auto;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(160, 207, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #dff6ff;
    box-shadow: none;
    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.api-key-visibility-btn:hover {
    transform: none;
    background: rgba(124, 246, 211, 0.16);
    box-shadow: none;
}

.api-key-item input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.welcome-box-wrapper {
    position: relative;
    margin-bottom: 12px;
}

.welcome-message {
    margin-bottom: 0;
    padding: 8px 12px;
    padding-bottom: 40px; /* room for access info (left) + refresh (right) */
    background-color: rgba(255, 215, 0, 0.1);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.welcome-refresh-btn {
    position: absolute;
    bottom: 6px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--secondary-color);
    color: var(--accent-color);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.welcome-refresh-btn:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.15);
}

.welcome-refresh-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.vip-info-btn {
    position: absolute;
    bottom: 6px;
    left: 8px;
    max-width: calc(100% - 44px);
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--secondary-color);
    color: var(--accent-color);
    font-size: 0.72rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-align: left;
}

.vip-info-btn:hover {
    background: rgba(255, 215, 0, 0.12);
    border-color: var(--accent-color);
}

/* Draw attention when user has no VIP tier yet (level 0) */
@keyframes welcome-vip-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.2);
        border-left-color: var(--accent-color);
    }
    50% {
        box-shadow: 0 0 14px 2px rgba(255, 215, 0, 0.22);
        border-left-color: #ffe566;
    }
}

.welcome-message.welcome-vip-pulse {
    animation: welcome-vip-pulse-glow 2.2s ease-in-out infinite;
}

.app-modal-body.vip-info-modal-body {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-color, #e0e0e0);
}

.app-modal-body.vip-info-modal-body h3 {
    margin: 1rem 0 0.4rem 0;
    font-size: 0.95rem;
    color: var(--accent-color, #ffd700);
    font-weight: 700;
}

.app-modal-body.vip-info-modal-body h3:first-child {
    margin-top: 0;
}

.app-modal-body.vip-info-modal-body h4 {
    margin: 0.85rem 0 0.25rem 0;
    font-size: 0.88rem;
    color: #e8c84a;
    font-weight: 700;
}

.app-modal-body.vip-info-modal-body h4:first-of-type {
    margin-top: 0.35rem;
}

.app-modal-body.vip-info-modal-body ul {
    margin: 0.35rem 0 0.5rem 1.1rem;
    padding: 0;
    color: #b8b8b8;
}

.app-modal-body.vip-info-modal-body p {
    margin: 0.4rem 0;
    color: #c8c8c8;
}

.app-modal-body.vip-info-modal-body a {
    color: var(--accent-color);
    text-decoration: underline;
}

.app-modal-body.vip-info-modal-body .vip-info-special-offer {
    margin: 1rem 0 0 0;
    padding: 10px 12px;
    background: rgba(255, 215, 0, 0.08);
    border-left: 3px solid var(--accent-color, #ffd700);
    border-radius: 4px;
    font-size: 0.92rem;
    color: #e8e0c8;
}

/* VIP program modal: scroll area + footer (width set after .app-modal — base .app-modal max-width: 420px would otherwise win) */
.app-modal-vip-program .app-modal-vip-program__header {
    flex-shrink: 0;
    background: var(--secondary-color, #1e1e1e);
}
.app-modal-vip-program .vip-info-modal-body--scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}
.app-modal-vip-program .app-modal-vip-program__footer {
    flex-shrink: 0;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-color, #444);
    background: var(--secondary-color, #1e1e1e);
}
.app-modal-vip-program .app-modal-vip-program__footer .app-modal-actions {
    margin-top: 0;
}

/* Page footer styles */
.page-footer {
    background-color: var(--secondary-color);
    border-top: 2px solid var(--border-color);
    padding: 15px 20px;
    text-align: center;
    color: #b0b0b0;
    font-size: 0.9em;
}

.page-footer p {
    margin: 5px 0;
    line-height: 1.6;
}

.page-footer a {
    color: var(--accent-color);
    text-decoration: none;
}

.page-footer a:hover {
    text-decoration: underline;
}

.page-footer .disclaimer {
    color: #888;
    font-size: 0.85em;
    margin-top: 5px;
}

.page-footer .contact-link {
    margin-top: 10px;
    font-size: 0.9em;
}

.page-footer .contact-link a {
    font-weight: 500;
}

/* Tab styles */
.war-tabs {
    background-color: var(--secondary-color);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
}

.tab-buttons {
    display: flex;
    background-color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.tab-button {
    background-color: transparent;
    color: var(--text-color);
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.tab-button:hover {
    background-color: rgba(255, 215, 0, 0.1);
    color: var(--accent-color);
}

.tab-button.active {
    background-color: var(--accent-color);
    color: var(--primary-color);
    border-bottom-color: var(--accent-color);
    border-bottom-width: 4px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    opacity: 1;
    transform: translateY(-1px);
}

.tab-content {
    padding: 20px;
}

.tab-pane {
    display: none;
}

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

.war-info {
    background-color: var(--primary-color);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 4px solid var(--accent-color);
}

.war-info h4 {
    color: var(--accent-color);
    margin: 0 0 10px 0;
}

.war-info p {
    margin: 5px 0;
    color: var(--text-color);
}

.war-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.war-table th, .war-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.war-table th {
    background-color: var(--primary-color);
    color: var(--accent-color);
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 25px;
}

.war-table tr:hover {
    background-color: rgba(255, 215, 0, 0.05);
}

.war-table a {
    color: var(--accent-color);
    text-decoration: none;
}

.war-table a:hover {
    text-decoration: underline;
}

/* Responsive tab design */
@media (max-width: 768px) {
    .tab-buttons {
        flex-direction: column;
    }
    
    .tab-button {
        text-align: left;
        border-bottom: 1px solid var(--border-color);
        border-right: none;
    }
    
    .tab-button.active {
        border-bottom-color: var(--accent-color);
        border-right-color: transparent;
    }
}

.date-range-label {
    display: block;
    text-align: center;
    font-size: 0.9em;
    color: #ccc;
    margin-top: 2px;
    font-weight: normal;
}

/* Former member styling */
.former-member {
    color: #888 !important;
    opacity: 0.7;
}

.former-member:hover {
    color: #aaa !important;
    opacity: 0.9;
}

.payout-settings-section h3, .cache-sales-section h3 {
    color: var(--accent-color);
    margin-bottom: 15px;
    font-size: 1.1em;
}

.cache-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cache-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
}

.cache-row label {
    margin-bottom: 0;
    font-size: 0.9em;
}

.cache-row input {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .cache-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .cache-row label {
        font-size: 0.8em;
    }
}

#warSelectorContainer {
    margin-bottom: 120px;
}

.payout-inputs input[type='checkbox'] {
    accent-color: #ffd700;
    width: 18px;
    height: 18px;
    cursor: pointer;
    vertical-align: middle;
}

@keyframes payLinkFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.pay-link-flash {
  animation: payLinkFlash 1s infinite;
}

@media (max-width: 700px) {
  .tool-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* VIP-locked tools (e.g. Recruitment requires VIP 3) */
a.vip-locked,
a.tool-card.vip-locked {
  opacity: 0.55;
  filter: grayscale(0.4);
  cursor: not-allowed;
}
.dashboard-layout nav a.vip-locked {
  opacity: 1;
  filter: none;
  color: #888;
}
a.vip-locked:hover,
.dashboard-layout nav a.vip-locked:hover {
  background-color: transparent;
  color: inherit;
  border-left-color: transparent;
}
.dashboard-layout nav a.vip-locked:hover {
  color: #888;
}

/* Padlock + neutral locked label on locked nav link */
.dashboard-layout nav a.vip-locked::after {
  content: " \1F512 Locked";
  color: var(--accent-color);
  font-weight: bold;
  font-size: 0.85em;
  margin-left: 4px;
}

/* Wrapper for locked tool card so badge can sit on top at full opacity */
.tool-card-vip-wrap {
  position: relative;
  min-height: 180px;
}

/* Padlock overlay on locked tool card (yellow branding) */
.tool-card-vip-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-color);
  font-weight: bold;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  pointer-events: none;
}

/* Disabled tool card styles */
.tool-card.disabled {
  opacity: 0.55;
  filter: grayscale(0.5);
  cursor: not-allowed;
  pointer-events: none;
}

.ched-warning {
  color: #ff5252;
  font-size: 0.95em;
  font-weight: bold;
  margin-top: 12px;
  letter-spacing: 0.5px;
}

.player-link {
  color: #ffd700 !important;
  font-weight: bold;
  text-decoration: underline;
}

.player-link:visited {
  color: #ffd700 !important;
}

/* Consumption Tracker Cost Styling */
.cost-row {
  background-color: rgba(255, 107, 107, 0.1);
}

.grand-total-row {
  background-color: rgba(255, 71, 87, 0.15);
  border-top: 2px solid #ff4757;
}

.grand-total-row td:last-child {
  text-align: center;
  font-size: 1.1em;
}

/* Column header styling for market values */
th small {
  font-size: 0.8em;
  opacity: 0.8;
  font-weight: normal;
}

/* Summary section styling */
.summary-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: var(--secondary-color);
  border-radius: 4px;
  border-left: 4px solid var(--accent-color);
}

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

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-label {
  font-weight: bold;
  color: var(--accent-color);
  font-size: 1.1em;
}

.summary-value {
  color: var(--text-color);
  font-size: 1.1em;
  font-weight: bold;
}

/* Left-justify values in the 2nd and 4th columns */
.summary-grid .summary-item:nth-child(2) .summary-value,
.summary-grid .summary-item:nth-child(4) .summary-value {
  text-align: left;
}

@media (max-width: 768px) {
  .summary-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .summary-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

/* Grouped Interface Styles */
.group-summary {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

.group-summary h4 {
  margin: 0 0 10px 0;
  color: var(--accent-color);
  font-size: 1.1em;
}

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

.group-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--primary-color);
  border-radius: 4px;
  border-left: 3px solid var(--accent-color);
}

.group-summary-label {
  font-weight: bold;
  color: var(--text-color);
}

.group-summary-value {
  color: var(--accent-color);
  font-weight: bold;
}

.grouped-container {
  margin-top: 20px;
}

.group-section {
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.group-header {
  background-color: var(--secondary-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.group-header:hover {
  background-color: var(--primary-color);
}

.group-header-content {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  gap: 12px;
}

.group-toggle {
    font-size: 1.2em;
    color: var(--accent-color);
    transition: transform 0.2s ease;
    user-select: none;
}

.group-title {
  margin: 0;
  color: var(--text-color);
  font-size: 1.2em;
  flex-grow: 1;
}

.group-total {
  color: var(--accent-color);
  font-weight: bold;
  font-size: 1.1em;
}

.group-content {
  background-color: var(--primary-color);
  padding: 15px;
}

.item-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: var(--secondary-color);
  border-radius: 4px;
  border-left: 3px solid var(--accent-color);
}

.item-section:last-child {
  margin-bottom: 0;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}

.item-info {
  flex-grow: 1;
}

.item-name {
  margin: 0 0 8px 0;
  color: var(--text-color);
  font-size: 1.1em;
}

.item-stats {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.item-stats span {
  color: var(--text-color);
  font-size: 0.9em;
}

.item-total {
  color: var(--accent-color);
  font-weight: bold;
}

.item-value {
  color: #ff6b6b;
  font-weight: bold;
}

.item-price {
  color: #74b9ff;
  font-weight: bold;
}

.item-players {
  flex-shrink: 0;
}

.players-toggle {
    background-color: var(--accent-color);
    color: var(--primary-color);
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: opacity 0.3s;
}

.players-toggle:hover {
    opacity: 0.9;
}

.players-list {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.player-item:last-child {
  border-bottom: none;
}

.player-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: bold;
  flex-grow: 1;
}

.player-link:hover {
  text-decoration: underline;
}

.player-quantity {
  color: var(--text-color);
  font-weight: bold;
  margin: 0 15px;
}

.player-cost {
  color: #ff6b6b;
  font-weight: bold;
  min-width: 80px;
  text-align: right;
}

.export-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.export-btn {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s ease;
}

.export-btn:hover {
  background-color: #e17055;
}

@media (max-width: 768px) {
  .group-summary-grid {
    grid-template-columns: 1fr;
  }
  
  .item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .item-stats {
    flex-direction: column;
    gap: 5px;
  }
  
  .player-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .export-buttons {
    flex-direction: column;
  }
}

/* Progress Bar Styles */
.progress-container {
    margin-top: 20px;
    padding: 15px;
    background-color: var(--secondary-color);
    border-radius: 8px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--text-color);
}

.progress-bar {
    width: 100%;
    height: 20px;
    background-color: var(--background-color);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--accent-color);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #ffd700);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 10px;
}

.progress-details {
    margin-top: 8px;
    font-size: 0.9em;
    color: var(--text-color);
    opacity: 0.8;
}

/* Termed War Calculator Styles */
.score-display-section {
    margin-top: 20px;
    padding: 20px;
    background-color: var(--secondary-color);
    border-radius: 8px;
}

.score-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.score-card {
    background-color: var(--primary-color);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 2px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.score-card.winning-score {
    border-color: #4ecdc4;
}

.score-card.losing-score {
    border-color: #ff6b6b;
}

.score-card h3 {
    margin: 0 0 15px 0;
    color: var(--accent-color);
    font-size: 1.2em;
}

.score-input {
    width: 100%;
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    background-color: var(--secondary-color);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    padding: 10px;
    margin-top: 10px;
}

.score-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.score-card.winning-score .score-input {
    border-color: #4ecdc4;
    color: #4ecdc4;
}

.score-card.winning-score .score-input:focus {
    border-color: #4ecdc4;
    box-shadow: 0 0 10px rgba(78, 205, 196, 0.3);
}

.score-card.losing-score .score-input {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.score-card.losing-score .score-input:focus {
    border-color: #ff6b6b;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}

.score-info-section {
    margin-top: 20px;
    padding: 20px;
    background-color: var(--primary-color);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.lead-info h4 {
    margin: 0 0 10px 0;
    color: var(--accent-color);
    font-size: 1.2em;
    text-align: center;
}

.lead-info h4 span {
    color: #4ecdc4;
    font-weight: bold;
}

.lead-info p {
    margin: 0;
    color: var(--text-color);
    text-align: center;
    font-size: 0.9em;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .score-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .score-input {
        font-size: 2em;
    }
}

/* War Control Styles */
.input-section h3 {
    margin: 0 0 20px 0;
    color: var(--accent-color);
    font-size: 1.2em;
    text-align: center;
}

.war-timing-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 20px;
}

.war-start-group, .war-finish-group {
    padding: 20px;
    background-color: var(--primary-color);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.war-start-group h4, .war-finish-group h4 {
    margin: 0 0 15px 0;
    color: var(--accent-color);
    font-size: 1.1em;
    text-align: center;
}

.time-control-row {
    display: flex;
    gap: 15px;
    align-items: end;
}

.time-control-row .control-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.lead-requirement-section {
    margin-top: 16px;
    padding: 12px 14px;
    background-color: var(--primary-color);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.lead-requirement-section h4 {
    margin: 0 0 15px 0;
    color: var(--accent-color);
    font-size: 1.1em;
    text-align: center;
}

.lead-requirement-section .control-group {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin: 0 auto;
}

.lead-requirement-section .control-group label {
    margin-bottom: 4px;
}

/* Only the main starting-lead field — not the small % box */
.lead-requirement-section .control-group input[type="number"] {
    padding: 8px 10px;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 4px;
    font-size: 1em;
    text-align: center;
}

.lead-requirement-section .control-group input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Gentle pulse until the user edits this field (class removed in JS) */
.lead-requirement-section .control-group input[type="number"].termed-war-starting-lead-attention {
    animation: termed-war-starting-lead-pulse 2.4s ease-in-out infinite;
}

@keyframes termed-war-starting-lead-pulse {
    0%,
    100% {
        border-color: var(--border-color);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
    50% {
        border-color: rgba(255, 215, 0, 0.5);
        box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.2), 0 0 12px rgba(255, 215, 0, 0.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lead-requirement-section .control-group input[type="number"].termed-war-starting-lead-attention {
        animation: none;
        border-color: rgba(255, 215, 0, 0.45);
    }
}

.lead-requirement-section .help-tip {
    margin-top: 6px;
    margin-bottom: 0;
    padding: 6px 10px;
    font-size: 0.85em;
    line-height: 1.35;
}

.loser-score-from-lead-option {
    margin-top: 8px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.loser-score-from-lead-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--text-color);
    font-size: 0.85em;
    line-height: 1.3;
    cursor: pointer;
    font-weight: normal;
}

.loser-score-from-lead-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
    accent-color: var(--accent-color);
}

.termed-war-pct-input {
    width: 3rem;
    min-width: 3rem;
    max-width: 4rem;
    padding: 4px 6px;
    text-align: center;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 4px;
    font-size: 0.95em;
    flex-shrink: 0;
}

.control-group {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.control-group label {
    margin-bottom: 5px;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.9em;
}

.control-group select {
    padding: 8px;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 4px;
    font-size: 0.9em;
}

.control-group select:focus {
    outline: none;
    border-color: var(--accent-color);
}

@media (max-width: 768px) {
    .war-timing-controls {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .time-control-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .control-group {
        min-width: auto;
    }
    
    .lead-requirement-section .control-group {
        max-width: none;
    }
}

/* Tab Navigation Styles */
.tab-navigation {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.tab-button {
    padding: 12px 24px;
    background-color: var(--secondary-color);
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-color);
    font-size: 1.1em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    text-align: center;
    opacity: 0.7;
}

.tab-button:hover {
    background-color: var(--primary-color);
    color: var(--accent-color);
    opacity: 1;
    transform: translateY(-1px);
}

.tab-button.active {
    background-color: var(--accent-color);
    color: var(--primary-color);
    border-bottom-color: var(--accent-color);
    border-bottom-width: 4px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    opacity: 1;
    transform: translateY(-1px);
}

.tab-content {
    display: block;
}

@media (max-width: 768px) {
    .tab-navigation {
        flex-direction: column;
    }
    
    .tab-button {
        border-bottom: 1px solid var(--border-color);
        border-right: none;
    }
    
    .tab-button.active {
        border-bottom-color: var(--accent-color);
    }
}

/* Help Tip Styles */
.help-tip {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: rgba(255, 215, 0, 0.1);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--text-color);
    line-height: 1.4;
}

.help-tip strong {
    color: var(--accent-color);
}

.tab-link {
    color: var(--accent-color);
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.tab-link:hover {
    color: #fff;
    text-decoration: none;
    background-color: var(--accent-color);
    padding: 2px 4px;
    border-radius: 3px;
}

/* Cache Swapping Styles */
.war-id-section {
    margin-bottom: 20px;
    padding: 20px;
    background-color: var(--primary-color);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.swap-results-section {
    min-height: 350px;
    transition: all 0.3s ease;
}

.swap-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-style: italic;
}

.swap-placeholder p {
    margin: 0;
    font-size: 1.1em;
}

.war-id-section .control-group label {
    font-weight: bold;
    color: var(--accent-color);
}

.war-id-table {
    border: none;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.war-id-table td {
    border: none;
    padding: 0 10px 0 0;
    vertical-align: middle;
}

.war-id-table td:first-child {
    padding-left: 0;
}

.war-id-section .button-group {
    margin-top: 10px;
}

.war-id-section input[type="number"] {
    padding: 10px;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 4px;
    font-size: 1em;
    min-width: 150px;
}

.war-id-section input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-color);
}

.fetch-button {
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: var(--primary-color);
    border: none;
    border-radius: 4px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.fetch-button:hover {
    background-color: #e0a800;
}

.fetch-button:disabled {
    background-color: #666;
    cursor: not-allowed;
}

.war-data-section {
    margin-bottom: 20px;
    padding: 20px;
    background-color: var(--primary-color);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.war-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.faction-info {
    padding: 15px;
    background-color: var(--secondary-color);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.faction-info h4 {
    margin: 0 0 15px 0;
    color: var(--accent-color);
    text-align: center;
}

.cache-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.cache-item .cache-name {
    flex: 1;
}

.cache-item .cache-quantity {
    flex: 0 0 auto;
    margin: 0 15px;
}

.cache-item .cache-value {
    flex: 0 0 auto;
    text-align: right;
    min-width: 150px;
}

.cache-item:last-child {
    border-bottom: none;
}

.cache-name {
    color: var(--text-color);
    font-weight: bold;
}

.cache-quantity {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.1em;
    min-width: 40px;
    text-align: center;
}

.cache-value {
    color: #4ecdc4;
    font-size: 0.9em;
}

.distribution-section {
    margin-bottom: 20px;
    padding: 20px;
    background-color: var(--primary-color);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.distribution-section h4 {
    margin: 0 0 20px 0;
    color: var(--accent-color);
    text-align: center;
}

.percentage-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.percentage-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.percentage-group label {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.1em;
}

.percentage-group input[type="range"] {
    width: 100%;
    height: 6px;
    background: var(--secondary-color);
    outline: none;
    border-radius: 3px;
    -webkit-appearance: none;
}

.percentage-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    cursor: pointer;
    border-radius: 50%;
}

.percentage-group input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    cursor: pointer;
    border-radius: 50%;
    border: none;
}

.percentage-group span {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.2em;
    min-width: 50px;
    text-align: center;
}

.percentage-group .total-value {
    color: #4ecdc4;
    font-weight: bold;
    font-size: 1em;
    margin-top: 5px;
    text-align: center;
}

.swap-results-section {
    padding: 20px;
    background-color: var(--primary-color);
    border-radius: 8px;
    border-left: 4px solid #4ecdc4;
}

.swap-results-section h4 {
    margin: 0 0 15px 0;
    color: #4ecdc4;
    text-align: center;
}

.swap-detail {
    padding: 10px;
    margin-bottom: 10px;
    background-color: var(--secondary-color);
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
}

.swap-detail:last-child {
    margin-bottom: 0;
}

.swap-summary {
    padding: 15px;
    margin-top: 15px;
    background-color: var(--secondary-color);
    border-radius: 6px;
    border: 2px solid var(--accent-color);
    text-align: center;
}

.swap-summary h5 {
    margin: 0 0 10px 0;
    color: var(--accent-color);
}

@media (max-width: 768px) {
    .war-info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .percentage-controls {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    
    .war-id-section input[type="number"] {
        min-width: auto;
    }
}

/* Admin Dashboard Styles */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background-color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.stat-card h3 {
    color: var(--accent-color);
    margin: 0 0 10px 0;
    font-size: 1em;
    font-weight: bold;
}

.stat-number {
    color: var(--text-color);
    font-size: 2em;
    font-weight: bold;
}

.dashboard-section {
    margin-bottom: 40px;
}

.dashboard-section h2 {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--primary-color);
    border-radius: 8px;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-table th {
    background-color: var(--secondary-color);
    color: var(--accent-color);
    font-weight: bold;
}

.admin-table tr:hover {
    background-color: var(--secondary-color);
}

.admin-vip-history-btn {
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--secondary-color);
    color: var(--accent-color);
    font-size: 0.85rem;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}
.admin-vip-history-btn:hover {
    background: rgba(255, 215, 0, 0.15);
}

.admin-next-deduction-cell {
    white-space: nowrap;
}
.admin-next-deduction-countdown {
    font-size: 0.85em;
    color: var(--accent-color);
}

.user-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: bold;
}

.admin-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.admin-tab-btn {
    padding: 8px 14px;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.admin-tab-btn:hover {
    background-color: var(--border-color);
}

.admin-tab-btn.active {
    color: var(--accent-color);
    font-weight: bold;
    border-color: var(--accent-color);
}

/* Shared on-brand modal (used by Admin VIP edit and elsewhere) */
.app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10050; /* above admin / mobile nav so VIP add-player modal is visible */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.app-modal {
    background: var(--secondary-color, #1e1e1e);
    border: 1px solid var(--border-color, #444);
    border-radius: 8px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* VIP info dialog: must follow .app-modal so max-width beats 420px (element has both classes) */
.app-modal.app-modal-vip-program {
    max-width: min(100%, 640px);
    max-height: min(90vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (min-width: 900px) {
    .app-modal.app-modal-vip-program {
        max-width: min(calc(100vw - 48px), 960px);
    }
}
.app-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, #444);
}
.app-modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--accent-color, #FFD700);
}
.app-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: #b0b0b0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.app-modal-close:hover {
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.08);
}
.app-modal-body {
    padding: 16px;
}
.app-modal-body .app-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.app-modal-body .app-modal-row:last-of-type {
    margin-bottom: 16px;
}
.app-modal-body .app-modal-label {
    width: 160px;
    min-width: 160px;
    color: var(--accent-color, #FFD700);
    font-size: 0.95rem;
}
.app-modal-body .app-modal-input {
    width: 100px;
    min-width: 100px;
    box-sizing: border-box;
    padding: 8px 10px;
    background: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    font-size: 1rem;
}
.app-modal-body .app-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}
.app-modal-body .app-modal-actions .fetch-button {
    padding: 8px 16px;
}

.user-link:hover {
    color: #ffd700;
    text-decoration: underline;
}

.time-period-btn {
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.time-period-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.time-period-btn.active {
    background-color: var(--accent-color);
    color: #1a1a1a;
    border-color: var(--accent-color);
}

.time-period-btn.active:hover {
    background-color: #ffed4e;
}

.graph-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.graph-checkbox-label:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.graph-visibility-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
}

@media (max-width: 768px) {
    /* Stats cards - single column */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-number {
        font-size: 1.5em;
    }
    
    /* Dashboard sections */
    .dashboard-section {
        margin-bottom: 30px;
    }
    
    .dashboard-section h2 {
        font-size: 1.2rem;
        padding-bottom: 8px;
    }
    
    /* Buttons - stack and full width */
    .dashboard-section .fetch-button {
        width: 100%;
        margin-bottom: 10px;
        padding: 12px 16px;
        font-size: 0.95rem;
        min-height: 44px;
    }
    
    .dashboard-section > div[style*="margin-bottom"] button {
        margin-right: 0 !important;
        margin-bottom: 10px;
    }
    
    /* Toggle button at top */
    #toggleAdminFilter {
        width: 100%;
        padding: 12px 16px;
        font-size: 0.95rem;
        min-height: 44px;
    }
    
    /* Table wrapper for horizontal scrolling */
    .dashboard-section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .admin-table {
        font-size: 0.8em;
        min-width: 600px; /* Force horizontal scroll for wide tables */
    }
    
    .admin-table th,
    .admin-table td {
        padding: 8px 6px;
        white-space: nowrap;
    }
    
    /* Make user links more tappable */
    .user-link {
        padding: 4px 2px;
        display: inline-block;
    }
}

@media (max-width: 480px) {
    .stat-card {
        padding: 12px;
    }
    
    .stat-number {
        font-size: 1.3em;
    }
    
    .dashboard-section h2 {
        font-size: 1.1rem;
    }
    
    .admin-table {
        font-size: 0.75em;
        min-width: 550px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 6px 4px;
    }
}

/* ==================== MOBILE RESPONSIVE STYLES ==================== */

/* Mobile Navigation Toggle Button */
.mobile-nav-toggle {
    display: none !important; /* Hidden by default on desktop, shown on mobile */
    position: fixed;
    top: 0.85rem;
    left: 20px;
    z-index: 1001;
    background-color: var(--accent-color);
    color: var(--primary-color);
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    line-height: 1;
    height: 36px;
    align-items: center;
    justify-content: center;
}

/* Mobile Styles - Tablets and smaller */
@media (max-width: 768px) {
    /* Show hamburger menu button */
    .mobile-nav-toggle {
        display: flex !important; /* Use flex to center the icon */
    }
    
    /* Adjust header for mobile */
    header {
        padding: 1rem 1rem 1rem 70px;
    }
    
    header h1 {
        font-size: 1.3rem;
    }
    
    /* Navigation sidebar - hidden by default on mobile */
    .dashboard-layout nav {
        position: fixed;
        left: -280px;
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
        overflow-y: auto;
        padding-top: 70px;
        border-right: 2px solid var(--border-color);
    }
    
    /* Show navigation when active */
    .dashboard-layout nav.mobile-active {
        left: 0;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    }
    
    /* Main content takes full width on mobile */
    .dashboard-layout main {
        width: 100%;
        padding: 15px;
    }
    
    /* Container adjustments */
    .container {
        padding: 15px;
    }
    
    /* Home page welcome text */
    h1 {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    
    .welcome-message {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }
    
    /* Tool cards - single column on mobile */
    .tool-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 20px;
    }
    
    .tool-card {
        padding: 20px;
        min-height: 140px;
    }
    
    .tool-card h2 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    
    .tool-card p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Footer adjustments */
    .page-footer {
        padding: 15px;
        font-size: 0.85rem;
    }
    
    /* Input sections */
    .input-section {
        padding: 15px;
    }
    
    /* Buttons - make them touch-friendly */
    button {
        padding: 12px 20px;
        font-size: 1rem;
        min-height: 44px; /* iOS recommended touch target size */
    }
    
    /* Form inputs - touch-friendly */
    input[type="text"], 
    input[type="number"], 
    select {
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
    }
    
    /* API Key in nav */
    .dashboard-layout nav .api-key-item {
        padding: 0 10px 15px 10px;
    }
    
    .dashboard-layout nav .api-key-item input {
        width: 100%;
    }
}

/* Small phones */
@media (max-width: 480px) {
    header h1 {
        font-size: 1.1rem;
    }
    
    .mobile-nav-toggle {
        padding: 6px 10px;
        font-size: 1rem;
        top: 0.75rem;
        left: 15px;
        height: 32px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    .tool-card h2 {
        font-size: 1.2rem;
    }
    
    .tool-card p {
        font-size: 0.85rem;
    }
    
    .dashboard-layout main {
        padding: 10px;
    }
    
    .container {
        padding: 10px;
    }
}

/* ==================== CONSUMPTION TRACKER ==================== */

.consumption-datetime-stack {
    margin-bottom: 16px;
}

.consumption-datetime-stack > .consumption-date-only-section {
    margin-bottom: 0;
}

.consumption-exact-times-row {
    margin-top: 14px;
    margin-bottom: 0;
}

.consumption-exact-times-row .consumption-war-preset-check {
    margin-bottom: 0;
}

.consumption-exact-times-detail {
    margin-top: 12px;
}

.consumption-exact-times-detail[hidden] {
    display: none !important;
}

.consumption-hms-section {
    margin-top: 0;
    margin-bottom: 0;
}

.consumption-range-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.consumption-range-col .date-input {
    margin-bottom: 0;
}

.consumption-range-col .date-input input[type="text"] {
    margin-bottom: 0;
}

.consumption-tct-block {
    margin-bottom: 0;
}

.consumption-tct-block > label {
    margin-bottom: 6px;
}

.consumption-tct-hms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.consumption-tct-hms select {
    width: auto !important;
    min-width: 3.5rem;
    max-width: 5.5rem;
    margin-bottom: 0;
    flex: 0 0 auto;
}

.consumption-tct-hms .consumption-tct-hms-sep {
    color: var(--text-color);
    opacity: 0.45;
    font-weight: bold;
    user-select: none;
    line-height: 1;
}

.consumption-tct-hint {
    margin-top: 0;
    margin-bottom: 16px;
    color: #ccc;
    font-size: 0.9em;
    line-height: 1.5;
    max-width: 52rem;
}

.consumption-war-preset-panel {
    margin-bottom: 16px;
    padding: 15px;
    background-color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.consumption-war-preset-panel[hidden] {
    display: none !important;
}

.consumption-war-preset-intro {
    font-size: 0.9em;
    color: #ccc;
    margin-bottom: 12px;
    line-height: 1.5;
}

.consumption-war-preset-intro strong {
    color: var(--accent-color);
}

.consumption-war-preset-panel .consumption-war-preset-check label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--text-color);
    font-weight: normal;
    cursor: pointer;
}

.consumption-war-preset-panel .consumption-war-preset-check input {
    margin-top: 4px;
    flex-shrink: 0;
    accent-color: var(--accent-color);
}

.consumption-war-preset-vip-locked {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.88em;
    color: #888;
    cursor: help;
    user-select: none;
}

.consumption-war-preset-vip-locked-icon {
    font-size: 1.1rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.consumption-war-preset-vip-locked-text strong {
    color: #666;
}

.consumption-war-preset-vip-badge {
    color: var(--accent-color);
    font-weight: 700;
}

.consumption-war-preset-preview-precision {
    margin-top: 10px;
    font-size: 0.85em;
    color: #888;
    line-height: 1.45;
}

.consumption-war-preset-preview {
    margin: 0 0 14px 0;
    padding: 12px 14px;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.88em;
    line-height: 1.5;
}

.consumption-war-preset-preview[hidden] {
    display: none !important;
}

.consumption-war-preset-preview-title {
    color: var(--accent-color);
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.95em;
}

.consumption-war-preset-preview-times {
    color: var(--text-color);
    margin-bottom: 8px;
    word-break: break-word;
}

.consumption-war-preset-preview-k {
    color: #aaa;
    font-weight: normal;
    margin-right: 2px;
}

.consumption-war-preset-preview-arrow {
    color: var(--accent-color);
    margin: 0 6px;
}

.consumption-war-preset-preview-meta {
    color: #aaa;
    font-size: 0.92em;
}

.consumption-war-preset-preview-chainnote {
    color: #999;
}

.consumption-war-preset-preview-chains-head {
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 0.88em;
    color: var(--accent-color);
    font-weight: bold;
}

.consumption-war-preset-preview-chains {
    margin: 0;
    padding-left: 1.15rem;
    color: #bbb;
    font-size: 0.88em;
    line-height: 1.55;
}

.consumption-war-preset-preview-chains li {
    margin-bottom: 6px;
}

.consumption-war-preset-preview-chain-war {
    color: #ccc;
}

.consumption-war-preset-preview-chain-include {
    color: var(--accent-color);
    font-weight: 600;
}

.consumption-war-preset-preview-chain-none {
    color: #888;
}

.consumption-war-preset-preview-chain-through {
    color: #888;
    font-size: 0.96em;
}

.consumption-war-preset-preview-loading {
    color: #aaa;
}

.consumption-war-preset-preview-error {
    color: #ff8a80;
}

.consumption-war-preset-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

button.consumption-war-preset-btn {
    background-color: var(--primary-color);
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

button.consumption-war-preset-btn:hover:not(:disabled) {
    background-color: rgba(255, 215, 0, 0.12);
    opacity: 1;
}

button.consumption-war-preset-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#consumptionWarRangeStatus {
    font-size: 0.85em;
    color: #aaa;
}

/* ==================== CONSUMPTION TRACKER MOBILE STYLES ==================== */

@media (max-width: 768px) {
    /* Date range section - stack vertically on mobile */
    .date-range-section {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    /* Make date inputs more touch-friendly */
    .date-input input {
        padding: 14px;
        font-size: 16px;
        min-height: 48px;
        cursor: pointer;
    }
    
    .date-input label {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .consumption-tct-hms select {
        min-height: 44px;
        font-size: 16px;
    }
    
    /* Fetch container adjustments */
    .fetch-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .rate-limit-control {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .rate-limit-control label {
        margin-bottom: 0;
    }
    
    .rate-limit-control select {
        width: 100%;
    }
    
    /* Progress container */
    .progress-container {
        padding: 15px;
    }
    
    .progress-info {
        font-size: 0.9rem;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .progress-details {
        font-size: 0.85rem;
    }
    
    /* Results section */
    .results-section {
        padding: 15px;
    }
    
    /* Controls - export button */
    .controls {
        margin-bottom: 15px;
    }
    
    .controls button {
        width: 100%;
    }
    
    /* Members list */
    .members-list h2 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    
    /* Tables - make them scrollable horizontally */
    #membersTable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Table styling adjustments */
    #membersTable table {
        min-width: 600px; /* Ensure table doesn't get too cramped */
        font-size: 0.85rem;
    }
    
    #membersTable th,
    #membersTable td {
        padding: 8px 6px;
        white-space: nowrap;
    }
    
    /* Summary boxes */
    .summary-box {
        padding: 15px;
    }
    
    .summary-box h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    /* Smaller font sizes for tiny screens */
    .date-range-section label {
        font-size: 0.9rem;
    }
    
    #membersTable table {
        font-size: 0.75rem;
    }
    
    #membersTable th,
    #membersTable td {
        padding: 6px 4px;
    }
    
    .members-list h2 {
        font-size: 1.2rem;
    }
}

/* ==================== BATTLE STATS MOBILE STYLES ==================== */

@media (max-width: 768px) {
    /* Battle Stats - input section */
    #battle-stats-tool-container .input-section {
        padding: 15px;
    }
    
    #battle-stats-tool-container .api-key-section {
        margin-bottom: 15px;
    }
    
    #battle-stats-tool-container input[type="text"] {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        min-height: 44px;
    }
    
    #battle-stats-tool-container button {
        width: 100%;
        padding: 12px 20px;
        font-size: 1rem;
        min-height: 44px;
    }
    
    /* Battle Stats - results section */
    #battle-stats-results .members-list {
        overflow: visible;
    }
    
    /* Button group stacking */
    #battle-stats-results .members-list > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    #battle-stats-results button {
        width: 100%;
        margin-left: 0 !important;
    }
    
    /* Table wrapper handles scrolling */
    #membersTable {
        min-width: 600px;
        font-size: 0.75rem;
    }
    
    /* Compact table headers */
    #membersTable th {
        padding: 8px 6px;
        font-size: 0.75rem;
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.1;
        vertical-align: middle;
        min-width: 60px;
    }
    
    #membersTable th:first-child {
        min-width: 120px !important;
    }
    
    /* Compact table cells */
    #membersTable td {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
    
    /* Performance stats text */
    #battle-stats-results h2 {
        font-size: 1.3rem !important;
    }
    
    #battle-stats-results > div:first-child {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    #membersTable table {
        font-size: 0.7rem;
    }
    
    #membersTable th,
    #membersTable td {
        padding: 6px 4px;
        font-size: 0.7rem;
    }
    
    #battle-stats-results h2 {
        font-size: 1.1rem !important;
    }
}

/* ==================== ORGANISED CRIME STATS MOBILE STYLES ==================== */

@media (max-width: 768px) {
    /* Members list container - no overflow */
    .members-list {
        overflow: visible;
    }
    
    /* Section headers with filters - stack on mobile */
    .members-list > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
        overflow: visible;
    }
    
    .members-list > div[style*="display: flex"] > div[style*="display: flex"] {
        width: 100%;
        flex-direction: row !important;
        justify-content: space-between;
    }
    
    .members-list h2 {
        font-size: 1.3rem !important;
    }
    
    /* Filter dropdowns */
    .members-list select {
        padding: 10px 12px !important;
        font-size: 0.95em !important;
        min-height: 44px;
    }
    
    .members-list label {
        font-size: 0.95em !important;
    }
    
    /* Table wrappers created by JS handle scrolling */
    .table-scroll-wrapper {
        /* Scroll wrapper styling already inline in JS */
    }
    
    /* Tables get min-width for proper scrolling */
    #difficultyTable,
    #playerTable {
        min-width: 500px !important;
        font-size: 0.75rem;
    }
    
    /* Wrapped column headers to save space */
    #difficultyTable th,
    #playerTable th {
        padding: 6px 4px;
        white-space: normal;
        word-wrap: break-word;
        min-width: 55px;
        max-width: 70px;
        font-size: 0.7rem;
        line-height: 1.1;
        vertical-align: middle;
    }
    
    /* First column (names) can be wider */
    #difficultyTable th:first-child,
    #playerTable th:first-child {
        min-width: 70px;
        max-width: 100px;
    }
    
    /* Table data cells - compact on mobile */
    #difficultyTable td,
    #playerTable td {
        padding: 6px 4px;
        text-align: center;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    /* First column (names) left-aligned */
    #difficultyTable td:first-child,
    #playerTable td:first-child {
        text-align: left;
        font-weight: 500;
    }
    
    /* First column should align left */
    #difficultyStatsTable th:first-child,
    #playerStatsTable th:first-child,
    #difficultyStatsTable td:first-child,
    #playerStatsTable td:first-child {
        text-align: left;
    }
    
    #difficultyStatsTable td:first-child,
    #playerStatsTable td:first-child {
        font-weight: bold;
    }
    
    /* Details button in player table */
    .details-btn {
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
        min-height: 36px;
    }
    
    /* Difficulty breakdown (expanded details) */
    .difficulty-breakdown {
        font-size: 0.8rem;
        padding: 10px;
    }
    
    .difficulty-breakdown table {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .members-list h2 {
        font-size: 1.1rem !important;
    }
    
    #difficultyStatsTable table,
    #playerStatsTable table {
        font-size: 0.75rem;
    }
    
    /* Tighter wrapped headers on small screens */
    #difficultyStatsTable th:not(:first-child),
    #playerStatsTable th:not(:first-child) {
        min-width: 55px;
        max-width: 70px;
        padding: 6px 4px;
        font-size: 0.7rem;
    }
    
    #difficultyStatsTable td,
    #playerStatsTable td {
        padding: 6px 4px;
    }
    
    .difficulty-breakdown {
        font-size: 0.75rem;
        padding: 8px;
    }
    
    .difficulty-breakdown table {
        font-size: 0.7rem;
    }
}

/* ==================== WAR CHAIN REPORTER MOBILE STYLES ==================== */

@media (max-width: 768px) {
    /* Input section adjustments */
    .input-section {
        padding: 15px;
    }
    
    .input-section p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Controls grid - stack on mobile */
    .input-section .controls[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Date range section - stack dates vertically */
    .date-range-section {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .date-range-section > div {
        width: 100%;
    }
    
    /* Make date inputs more touch-friendly */
    .date-range-section input[type="date"] {
        padding: 12px;
        font-size: 16px;
        min-height: 44px;
    }
    
    /* Input fields */
    .input-section input[type="text"],
    .input-section input[type="number"] {
        font-size: 16px;
        padding: 12px;
        min-height: 44px;
    }
    
    /* Labels */
    .input-section label {
        font-size: 0.95rem;
        margin-bottom: 6px;
    }
    
    /* Buttons */
    .input-section button,
    .results-section button {
        padding: 14px 20px;
        font-size: 1rem;
        min-height: 48px;
        margin-top: 20px;
    }
    
    /* Fetch button specifically needs extra spacing */
    #fetchWarReports {
        margin-top: 25px;
    }
    
    /* Results section */
    .results-section {
        padding: 15px 10px;
    }
    
    .results-section .controls {
        margin-bottom: 15px;
    }
    
    /* Report title */
    #reportTitle {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }
    
    /* Table container - no overflow (wrapper handles scrolling) */
    #reportsTable {
        /* Scrolling handled by .table-scroll-wrapper inside */
    }
    
    /* Table styling */
    #reportsTable table {
        font-size: 0.75rem;
        /* min-width set inline by JavaScript */
    }
    
    /* Table headers */
    #reportsTable th {
        padding: 8px 6px;
        font-size: 0.75rem;
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.1;
        vertical-align: middle;
    }
    
    /* First column (member names) wider */
    #reportsTable th:first-child {
        min-width: 140px;
    }
    
    /* Table cells */
    #reportsTable td {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
    
    /* First column cells */
    #reportsTable td:first-child {
        font-weight: 500;
    }
}

@media (max-width: 480px) {
    /* Extra compact on very small screens */
    .input-section {
        padding: 10px;
    }
    
    .input-section h1 {
        font-size: 1.5rem;
    }
    
    #reportTitle {
        font-size: 1.2rem;
    }
    
    #reportsTable table {
        font-size: 0.7rem;
        /* min-width set inline by JavaScript */
    }
    
    #reportsTable th,
    #reportsTable td {
        padding: 6px 4px;
        font-size: 0.7rem;
    }
    
    #reportsTable th:first-child {
        min-width: 120px;
    }
}

/* ==================== TERMED WAR CALCULATOR MOBILE STYLES ==================== */

@media (max-width: 768px) {
    /* Tab navigation - stack vertically */
    .tab-navigation {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .tab-navigation .tab-button {
        width: 100%;
        padding: 12px;
        font-size: 0.95rem;
    }
    
    /* War timing controls - stack vertically */
    .war-timing-controls {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .war-start-group,
    .war-finish-group {
        width: 100% !important;
    }
    
    /* Time control rows */
    .time-control-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .control-group {
        width: 100% !important;
    }
    
    .control-group label {
        font-size: 0.95rem;
        margin-bottom: 5px;
    }
    
    .control-group select,
    .control-group input {
        width: 100% !important;
        padding: 12px;
        font-size: 16px; /* Prevent iOS zoom */
        min-height: 44px;
    }
    
    /* Help tips */
    .help-tip {
        font-size: 0.85rem;
        padding: 10px;
        line-height: 1.4;
    }
    
    /* Lead requirement section */
    .lead-requirement-section {
        padding: 12px;
    }
    
    .lead-requirement-section .control-group input {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        min-height: 44px;
    }
    
    /* Score display section */
    .score-display-section p {
        font-size: 0.9rem;
    }
    
    .score-container {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .score-card {
        width: 100% !important;
    }
    
    .score-card label {
        font-size: 0.95rem;
    }
    
    .score-input {
        width: 100% !important;
        padding: 12px;
        font-size: 16px;
        min-height: 44px;
    }
    
    .lead-requirement-display {
        font-size: 1rem;
        padding: 15px;
    }
    
    /* War ID section */
    .war-id-section .war-id-table {
        width: 100%;
    }
    
    .war-id-section .war-id-table input {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        min-height: 44px;
    }
    
    .fetch-button,
    .button-group button {
        width: 100%;
        padding: 14px 20px;
        font-size: 1rem;
        min-height: 48px;
    }
    
    /* Faction info grid - stack vertically */
    .war-info-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .faction-info h3 {
        font-size: 1.1rem;
    }
    
    /* Cache items */
    .cache-items {
        font-size: 0.9rem;
    }
    
    /* Percentage controls */
    .percentage-controls {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .percentage-group {
        width: 100% !important;
    }
    
    .percentage-group label {
        font-size: 0.95rem;
    }
    
    .percentage-group input[type="range"] {
        width: 100%;
        min-height: 44px;
    }
    
    .total-value {
        font-size: 1rem;
    }
    
    /* Swap results */
    .swap-results-section h3 {
        font-size: 1.1rem;
    }
    
    #swapDetails {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .tab-navigation .tab-button {
        font-size: 0.9rem;
        padding: 10px;
    }
    
    .control-group select,
    .control-group input,
    .score-input {
        font-size: 14px;
        padding: 10px;
    }
    
    .help-tip {
        font-size: 0.8rem;
        padding: 8px;
    }
    
    .lead-requirement-display {
        font-size: 0.95rem;
        padding: 12px;
    }
}

/* ==================== WAR REPORT 2.0 MOBILE STYLES ==================== */

@media (max-width: 768px) {
    /* Container padding */
    .container {
        padding: 15px 10px;
    }
    
    /* Description text */
    .description {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Input section */
    .input-section {
        padding: 15px;
    }
    
    /* War list cards */
    #warList {
        gap: 10px !important;
    }
    
    /* War cards - reflow to single column on mobile */
    #warList > div {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
        border: 1px solid #404040 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        margin-bottom: 12px !important;
    }
    
    /* War card checkbox section */
    #warList > div > div:nth-child(2) {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start !important;
    }
    
    /* War card checkbox label */
    #warList > div > div:nth-child(2) label {
        font-size: 0.9rem;
    }
    
    /* War card checkbox input */
    #warList > div > div:nth-child(2) input[type="checkbox"] {
        min-width: 20px;
        min-height: 20px;
    }
    
    /* War card button */
    #warList > div > button,
    #warList > div > div:nth-child(3) button {
        width: 100% !important;
        white-space: normal !important;
        min-height: 48px;
        padding: 12px !important;
    }
    
    /* Tab buttons - stack on mobile */
    .tab-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .tab-button {
        width: 100%;
        padding: 12px;
        font-size: 0.9rem;
        text-align: center;
    }
    
    /* Payout inputs - stack columns */
    .payout-inputs > div > div {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .payout-inputs > div > div > div {
        flex: 1 1 100% !important;
    }
    
    /* Input fields */
    .payout-inputs input[type="text"],
    .payout-inputs input[type="number"] {
        font-size: 16px !important;
        padding: 10px 8px !important;
        min-height: 44px;
    }
    
    /* Other costs grid - make 1 column */
    .payout-inputs div[style*="grid-template-columns: auto 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .payout-inputs div[style*="grid-template-columns: auto 1fr"] label {
        font-size: 0.95rem;
    }
    
    /* Advanced options grid - stack */
    .payout-inputs div[style*="grid-template-columns: 1.5fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .payout-inputs div[style*="grid-template-columns: 1.5fr 1fr"] > span {
        justify-self: start !important;
        margin-left: 24px;
    }
    
    /* Hit threshold controls - stack */
    .payout-inputs div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Labels and checkboxes */
    .payout-inputs label {
        font-size: 0.95rem;
        line-height: 1.4;
    }
    
    .payout-inputs input[type="checkbox"] {
        min-width: 18px;
        min-height: 18px;
    }
    
    /* Table container */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Table header - stack button below title */
    .table-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }
    
    .table-header h3 {
        font-size: 1.3rem;
    }
    
    .table-header button {
        width: 100%;
        min-height: 48px;
    }
    
    /* Members table */
    #membersTable table,
    #payoutTable table,
    #respectPayoutTable table {
        min-width: 700px;
        font-size: 0.75rem;
    }
    
    #membersTable th,
    #payoutTable th,
    #respectPayoutTable th {
        padding: 8px 6px;
        font-size: 0.75rem;
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.1;
    }
    
    #membersTable td,
    #payoutTable td,
    #respectPayoutTable td {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
    
    /* First column wider */
    #membersTable th:first-child,
    #payoutTable th:first-child,
    #respectPayoutTable th:first-child {
        min-width: 140px;
    }
    
    /* Summary box */
    .summary-box {
        padding: 15px;
        font-size: 0.9rem;
    }
    
    /* Loading spinner */
    .loading-spinner p {
        font-size: 0.9rem;
    }
    
    /* Progress container */
    .progress-container {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    /* Extra compact */
    .container {
        padding: 10px 5px;
    }
    
    .container h1 {
        font-size: 1.5rem;
    }
    
    .input-section,
    .payout-inputs {
        padding: 10px !important;
    }
    
    .tab-button {
        padding: 10px;
        font-size: 0.85rem;
    }
    
    #membersTable table,
    #payoutTable table,
    #respectPayoutTable table {
        min-width: 600px;
        font-size: 0.7rem;
    }
    
    #membersTable th,
    #membersTable td,
    #payoutTable th,
    #payoutTable td,
    #respectPayoutTable th,
    #respectPayoutTable td {
        padding: 6px 4px;
        font-size: 0.7rem;
    }
    
    #membersTable th:first-child,
    #payoutTable th:first-child,
    #respectPayoutTable th:first-child {
        min-width: 120px;
    }
}

/* War Payout Calculator: white/light calendar & clock icons on dark date/time inputs (Chrome, Edge, Safari) */
.war-report-tct-date::-webkit-calendar-picker-indicator,
.war-report-tct-time::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.25);
    cursor: pointer;
    opacity: 0.95;
}

/* Firefox date picker icon */
.war-report-tct-date::-moz-calendar-picker-indicator {
    filter: invert(1) brightness(1.25);
    cursor: pointer;
    opacity: 0.95;
}

.war-report-custom-end-vip-locked {
    cursor: help;
}

/* War Report 2.0: gold vertical rules at grouped column boundaries (Respect / Support / Other / totals) */
#respectPayoutTable th.war-report-col-group-lead,
#respectPayoutTable td.war-report-col-group-lead,
#payoutTable th.war-report-col-group-lead,
#payoutTable td.war-report-col-group-lead,
#membersTable th.war-report-col-group-lead,
#membersTable td.war-report-col-group-lead {
    border-left: 2px solid rgba(255, 215, 0, 0.48);
}

#respectPayoutTable td.war-report-col-group-lead,
#payoutTable td.war-report-col-group-lead,
#membersTable td.war-report-col-group-lead {
    border-left-color: rgba(255, 215, 0, 0.36);
}

/* War Report payout tables: brand (gold) checkboxes for column breakdown toggles */
#respectPayoutTable .war-report-breakdown-cb,
#payoutTable .war-report-breakdown-cb {
    accent-color: #ffd700;
    width: 1.05em;
    height: 1.05em;
    cursor: pointer;
    vertical-align: middle;
}

/* War Report 2.0: keep table headings visible while scrolling long reports */
#membersTable,
#payoutTable,
#respectPayoutTable {
    --war-report-sticky-header-top: 0px;
    --war-report-header-row-height: 52px;
}

.war-report-hscroll,
.war-report-hscroll-main {
    overflow-y: visible !important;
}

#membersTable thead th,
#payoutTable thead th,
#respectPayoutTable thead th {
    position: sticky;
    top: var(--war-report-sticky-header-top);
    z-index: 12;
    background: #1c213b;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

#membersTable thead tr:nth-child(2) th,
#payoutTable thead tr:nth-child(2) th,
#respectPayoutTable thead tr:nth-child(2) th {
    top: calc(var(--war-report-sticky-header-top) + var(--war-report-header-row-height));
    z-index: 13;
}

#membersTable thead th[rowspan],
#payoutTable thead th[rowspan],
#respectPayoutTable thead th[rowspan] {
    z-index: 14;
}

/* Faction Battle Stats — comparison graph Activity | Stats (brand gold, not default link blue) */
button.comparison-graph-mode-btn {
    padding: 8px 14px;
    border-radius: 5px;
    cursor: pointer;
    font: inherit;
}
button.comparison-graph-mode-btn.comparison-graph-mode-btn--active {
    background-color: var(--accent-color, #ffd700);
    color: #333;
    border: none;
    font-weight: bold;
}
button.comparison-graph-mode-btn.comparison-graph-mode-btn--inactive {
    background-color: transparent;
    color: #bbb;
    border: 1px solid rgba(255, 215, 0, 0.35);
    font-weight: normal;
}
button.comparison-graph-mode-btn:focus-visible {
    outline: 2px solid var(--accent-color, #ffd700);
    outline-offset: 2px;
}

/* ==================== GENESIS THEME OVERRIDES ==================== */

:root {
    --primary-color: #08111f;
    --secondary-color: rgba(10, 20, 39, 0.82);
    --accent-color: #7cf6d3;
    --text-color: #f7fbff;
    --border-color: rgba(160, 207, 255, 0.18);
    --accent-secondary: #ff7b72;
    --accent-tertiary: #8b7cff;
    --accent-glow: rgba(124, 246, 211, 0.34);
    --panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(255, 123, 114, 0.2), transparent 30%),
        radial-gradient(circle at top right, rgba(139, 124, 255, 0.22), transparent 28%),
        radial-gradient(circle at 20% 80%, rgba(124, 246, 211, 0.18), transparent 26%),
        linear-gradient(140deg, #050b16 0%, #071224 38%, #0a1730 70%, #0d1d39 100%);
    color: var(--text-color);
    position: relative;
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: auto;
    width: 38rem;
    height: 38rem;
    border-radius: 999px;
    filter: blur(100px);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

body::before {
    top: -10rem;
    right: -8rem;
    background: #8b7cff;
}

body::after {
    bottom: -14rem;
    left: -10rem;
    background: #ff7b72;
}

header,
.dashboard-layout,
.page-footer {
    position: relative;
    z-index: 1;
}

header {
    padding: 1.35rem 1.8rem 0;
    background: transparent;
    border-bottom: none;
}

.brand-shell {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1480px;
    margin: 0 auto;
    padding: 1.15rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(5, 11, 22, 0.68);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(18px);
}

.brand-mark {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 20px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #06111f;
    background: linear-gradient(145deg, var(--accent-color), #7eb8ff 55%, #ffaf87);
    box-shadow: 0 18px 40px rgba(124, 246, 211, 0.28);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.brand-eyebrow {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(247, 251, 255, 0.68);
}

header h1 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    text-align: left;
    color: #ffffff;
}

.brand-subtitle {
    margin: 0;
    max-width: 50rem;
    color: rgba(232, 242, 255, 0.76);
    font-size: 0.98rem;
}

.dashboard-layout {
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem 1.8rem 1.8rem;
    max-width: 1480px;
    width: 100%;
    margin: 0 auto;
}

.dashboard-layout nav {
    width: 280px;
    padding: 1rem 0;
    height: calc(100vh - 190px);
    top: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        rgba(6, 12, 27, 0.82);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(18px);
}

.dashboard-layout nav ul {
    padding: 0 0.9rem;
}

.dashboard-layout nav a {
    padding: 0.82rem 1rem;
    border-radius: 16px;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

.dashboard-layout nav a.nav-link {
    border-left: none;
    border: 1px solid transparent;
}

.dashboard-layout nav a.nav-link:hover,
.dashboard-layout nav a.nav-link-active {
    color: #ffffff;
    border-color: rgba(124, 246, 211, 0.18);
    background:
        linear-gradient(135deg, rgba(124, 246, 211, 0.18), rgba(139, 124, 255, 0.16), rgba(255, 123, 114, 0.14));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 24px rgba(0, 0, 0, 0.18);
}

.dashboard-layout nav .api-key-item {
    margin: 0 0.9rem 0.8rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.api-key-item {
    color: var(--text-color);
}

.api-key-item label {
    color: #d9ecff;
}

.welcome-box-wrapper {
    margin-bottom: 0.9rem;
}

.welcome-message {
    background: linear-gradient(135deg, rgba(124, 246, 211, 0.16), rgba(126, 184, 255, 0.14));
    border: 1px solid rgba(124, 246, 211, 0.18);
    border-left: none;
    border-radius: 18px;
    color: #eef8ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.api-key-item input,
input[type="text"],
input[type="number"],
select,
textarea {
    border-radius: 14px;
    border: 1px solid rgba(160, 207, 255, 0.2);
    background: rgba(7, 14, 28, 0.8);
    color: #f5fbff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.api-key-item input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(124, 246, 211, 0.5);
    box-shadow: 0 0 0 4px rgba(124, 246, 211, 0.12);
}

.dashboard-layout main {
    padding: 0;
    min-width: 0;
}

.container {
    max-width: none;
    padding: 0;
}

.genesis-home {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.genesis-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.95fr);
    gap: 1.4rem;
    align-items: stretch;
}

.genesis-hero-copy,
.genesis-hero-panel,
.input-section,
.results-section,
.war-tabs,
.summary-section,
.table-header,
.members-list,
.summary-box {
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        rgba(5, 12, 24, 0.76);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(18px);
}

.genesis-hero-copy {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.25rem);
}

.genesis-hero-copy::before {
    content: "";
    position: absolute;
    inset: auto auto -5rem -3rem;
    width: 16rem;
    height: 16rem;
    background: radial-gradient(circle, rgba(124, 246, 211, 0.35), transparent 70%);
    pointer-events: none;
}

.genesis-kicker {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(124, 246, 211, 0.2);
    background: rgba(124, 246, 211, 0.12);
    color: #b7fff0;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 800;
}

.genesis-hero h1 {
    margin: 0 0 1rem;
    text-align: left;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2.25rem, 6vw, 4.6rem);
    line-height: 0.96;
    color: #ffffff;
}

.genesis-hero-text {
    max-width: 42rem;
    margin: 0 0 1.6rem;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 1.04rem;
    color: rgba(233, 244, 255, 0.82);
}

.genesis-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.genesis-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.9rem 1.25rem;
    border-radius: 16px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.genesis-cta:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.genesis-cta-primary {
    color: #06111f;
    background: linear-gradient(135deg, var(--accent-color), #7eb8ff);
    box-shadow: 0 18px 40px rgba(124, 246, 211, 0.2);
}

.genesis-cta-secondary {
    color: #f7fbff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

.genesis-hero-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.genesis-panel-card {
    padding: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(139, 124, 255, 0.18), rgba(255, 123, 114, 0.15));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.genesis-panel-card strong,
.genesis-mini-stat strong {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.15rem;
    color: #fff;
}

.genesis-panel-card p {
    margin: 0.65rem 0 0;
    color: rgba(233, 244, 255, 0.74);
}

.genesis-panel-label,
.genesis-mini-stat span {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.56);
}

.genesis-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.genesis-mini-stat {
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
}

.tool-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 1.2rem;
    margin-top: 0;
}

.tool-card {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
        rgba(6, 14, 28, 0.8);
    box-shadow: var(--panel-shadow);
}

.tool-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), #7eb8ff, var(--accent-secondary));
    opacity: 0.9;
}

.tool-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
}

.tool-card h2 {
    font-family: "Space Grotesk", sans-serif;
    color: #fff;
    margin-bottom: 0.8rem;
}

.tool-card p {
    color: rgba(236, 245, 255, 0.78);
    font-size: 0.96rem;
    line-height: 1.55;
}

.member-readiness-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.member-readiness-hero,
.member-readiness-summary-card,
.member-readiness-toolbar,
.member-readiness-panel,
.member-readiness-hero-note {
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        rgba(5, 12, 24, 0.76);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(18px);
}

.member-readiness-hero {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
    gap: 1rem;
    padding: 1.4rem;
}

.member-readiness-hero-copy h1 {
    margin-bottom: 0.55rem;
}

.member-readiness-hero-copy p,
.member-readiness-hero-note p {
    color: rgba(236, 245, 255, 0.78);
}

.member-readiness-hero-note {
    padding: 1.2rem 1.3rem;
    background:
        linear-gradient(145deg, rgba(124, 246, 211, 0.13), rgba(139, 124, 255, 0.16)),
        rgba(5, 12, 24, 0.8);
}

.member-readiness-hero-note strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
}

.member-readiness-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.member-readiness-summary-card {
    padding: 1.2rem 1.25rem;
}

.member-readiness-summary-card--filter {
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.member-readiness-summary-card--filter:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 246, 211, 0.34);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.member-readiness-summary-card--filter:focus-visible {
    outline: 2px solid rgba(124, 246, 211, 0.72);
    outline-offset: 3px;
}

.member-readiness-summary-card--active {
    background:
        linear-gradient(145deg, rgba(124, 246, 211, 0.16), rgba(139, 124, 255, 0.18)),
        rgba(5, 12, 24, 0.82);
    border-color: rgba(124, 246, 211, 0.44);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(124, 246, 211, 0.12) inset;
}

.member-readiness-summary-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(226, 236, 248, 0.58);
}

.member-readiness-summary-card strong {
    display: block;
    margin-bottom: 0.4rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.85rem;
    color: #fff;
}

.member-readiness-summary-card p {
    color: rgba(233, 244, 255, 0.74);
    font-size: 0.92rem;
}

.member-readiness-toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0.95rem;
    padding: 1.2rem;
    align-items: end;
}

.member-readiness-toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.member-readiness-toolbar-group label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(226, 236, 248, 0.62);
}

.member-readiness-toolbar-group input,
.member-readiness-toolbar-group select {
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 14, 29, 0.88);
    color: #fff;
    padding: 0 0.95rem;
    font: inherit;
}

.member-readiness-toolbar-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.member-readiness-panel {
    padding: 1.2rem;
}

.member-readiness-statusline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    color: rgba(236, 245, 255, 0.8);
}

.member-readiness-status--error {
    color: #ff9f93;
}

.member-readiness-status--ok {
    color: #9af1d0;
}

.member-readiness-table-wrap {
    overflow-x: auto;
}

.member-readiness-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
}

.member-readiness-table th,
.member-readiness-table td {
    padding: 0.9rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    vertical-align: top;
}

.member-readiness-row {
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.member-readiness-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.member-readiness-row--blocked {
    background:
        linear-gradient(90deg, rgba(255, 123, 114, 0.08), rgba(255, 123, 114, 0.02));
}

.member-readiness-row--partial {
    background:
        linear-gradient(90deg, rgba(255, 201, 96, 0.07), rgba(255, 201, 96, 0.02));
}

.member-readiness-row--ready {
    background:
        linear-gradient(90deg, rgba(124, 246, 211, 0.06), rgba(124, 246, 211, 0.015));
}

.member-readiness-table th {
    color: var(--accent-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    user-select: none;
}

.member-readiness-table th.member-readiness-sort-asc::after {
    content: " ↑";
}

.member-readiness-table th.member-readiness-sort-desc::after {
    content: " ↓";
}

.member-readiness-table td a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.member-readiness-table td a:hover {
    color: var(--accent-secondary);
}

.member-readiness-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.member-readiness-pill--ready,
.member-readiness-pill--okay {
    color: #041e16;
    background: rgba(124, 246, 211, 0.92);
    border-color: rgba(124, 246, 211, 0.92);
}

.member-readiness-pill--partial {
    color: #1d1300;
    background: rgba(255, 201, 96, 0.92);
    border-color: rgba(255, 201, 96, 0.92);
}

.member-readiness-pill--blocked,
.member-readiness-pill--hospital,
.member-readiness-pill--jail,
.member-readiness-pill--travel {
    color: #fff3f3;
    background: rgba(255, 123, 114, 0.22);
    border-color: rgba(255, 123, 114, 0.48);
}

.member-readiness-pill--other {
    color: rgba(236, 245, 255, 0.92);
    background: rgba(139, 124, 255, 0.22);
    border-color: rgba(139, 124, 255, 0.42);
}

.member-readiness-reason {
    margin-top: 0.35rem;
    color: rgba(226, 236, 248, 0.58);
    font-size: 0.78rem;
}

.member-readiness-check {
    font-weight: 700;
    font-size: 0.82rem;
}

.member-readiness-check--yes {
    color: #9af1d0;
}

.member-readiness-check--no {
    color: #ffb4ae;
}

.member-readiness-notes-cell {
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.member-readiness-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.member-readiness-tag-btn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(236, 245, 255, 0.82);
    padding: 0.22rem 0.62rem;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.member-readiness-tag-btn:hover {
    border-color: rgba(124, 246, 211, 0.38);
    color: #fff;
}

.member-readiness-tag-btn--active {
    background: rgba(124, 246, 211, 0.18);
    border-color: rgba(124, 246, 211, 0.52);
    color: #bff8e6;
}

.member-readiness-note-input {
    width: 100%;
    min-height: 58px;
    resize: vertical;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 14, 29, 0.88);
    color: #fff;
    padding: 0.72rem 0.82rem;
    font: inherit;
    line-height: 1.45;
}

.member-readiness-note-input::placeholder {
    color: rgba(226, 236, 248, 0.36);
}

.member-readiness-note-input:focus {
    outline: none;
    border-color: rgba(124, 246, 211, 0.42);
    box-shadow: 0 0 0 1px rgba(124, 246, 211, 0.12);
}

.member-readiness-empty {
    color: rgba(226, 236, 248, 0.58);
    text-align: center;
    padding: 2rem 1rem;
}

@media (max-width: 1180px) {
    .member-readiness-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-readiness-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-readiness-toolbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Space Grotesk", sans-serif;
}

h1 {
    text-align: left;
}

.input-section,
.results-section,
.summary-section,
.members-list,
.summary-box,
.war-tabs {
    padding: 1.35rem;
}

label {
    color: #cde8ff;
    font-weight: 700;
}

button {
    border-radius: 16px;
    padding: 0.88rem 1.25rem;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #08111f;
    background: linear-gradient(135deg, var(--accent-color), #7eb8ff);
    box-shadow: 0 14px 30px rgba(124, 246, 211, 0.18);
}

button:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(124, 246, 211, 0.24);
}

th,
td {
    border-color: rgba(255, 255, 255, 0.08);
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

.page-footer {
    margin: 0 1.8rem 1.8rem;
    padding: 1.15rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(5, 12, 24, 0.72);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(18px);
}

.page-footer p,
.page-footer .disclaimer {
    color: rgba(226, 239, 255, 0.66);
}

.page-footer a {
    color: #9cebd8;
}

.mobile-nav-toggle {
    background: linear-gradient(135deg, var(--accent-color), #7eb8ff);
    color: #08111f;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(124, 246, 211, 0.2);
}

@media (max-width: 1100px) {
    .genesis-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    header {
        padding: 0.95rem 1rem 0;
    }

    .brand-shell {
        align-items: flex-start;
        padding: 1rem;
        border-radius: 22px;
    }

    .brand-mark {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 1.45rem;
    }

    header h1 {
        font-size: 1.8rem;
    }

    .brand-subtitle {
        font-size: 0.88rem;
    }

    .dashboard-layout {
        display: block;
        padding: 1rem;
    }

    .dashboard-layout nav {
        width: min(320px, calc(100vw - 1.4rem));
        height: calc(100vh - 1.4rem);
        top: 0.7rem;
        left: 0.7rem;
        border-radius: 24px;
    }

    .dashboard-layout main {
        padding-top: 0.4rem;
    }

    .genesis-hero-copy,
    .genesis-hero-panel,
    .input-section,
    .results-section,
    .members-list,
    .summary-box,
    .war-tabs {
        border-radius: 22px;
        padding: 1.05rem;
    }

    .genesis-hero h1 {
        font-size: 2.3rem;
    }

    .genesis-hero-actions {
        flex-direction: column;
    }

    .genesis-cta {
        width: 100%;
    }

    .genesis-panel-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tool-cards-grid {
        gap: 1rem;
    }

    .tool-card {
        min-height: 180px;
    }

    .page-footer {
        margin: 0 1rem 1rem;
        border-radius: 20px;
    }
}

@media (max-width: 520px) {
    .brand-shell {
        gap: 0.8rem;
    }

    .brand-eyebrow {
        font-size: 0.65rem;
        letter-spacing: 0.16em;
    }

    .genesis-hero h1 {
        font-size: 2rem;
    }

    .genesis-panel-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== MOBILE POLISH OVERRIDES ==================== */

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .mobile-nav-toggle {
        top: 0.95rem;
        left: 0.95rem;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 14px;
        font-size: 1.25rem;
    }

    header {
        padding: 0.8rem 0.85rem 0;
    }

    .brand-shell {
        gap: 0.9rem;
        padding: 1rem 1rem 1.1rem 4.2rem;
    }

    .brand-copy {
        width: 100%;
    }

    .brand-subtitle {
        max-width: none;
        line-height: 1.45;
    }

    .dashboard-layout {
        padding: 0.9rem 0.85rem 1rem;
    }

    .dashboard-layout nav {
        left: calc(-1 * min(86vw, 340px) - 1rem);
        top: 0.75rem;
        width: min(86vw, 340px);
        max-width: 340px;
        height: calc(100dvh - 1.5rem);
        padding-top: 4.6rem;
        padding-bottom: 1rem;
    }

    .dashboard-layout nav.mobile-active {
        left: 0.75rem;
        box-shadow:
            0 0 0 100vmax rgba(4, 8, 18, 0.58),
            0 24px 70px rgba(0, 0, 0, 0.38);
    }

    .dashboard-layout main {
        padding-top: 0;
        min-width: 0;
    }

    .container,
    .input-section,
    .results-section,
    .summary-section,
    .members-list,
    .summary-box,
    .war-tabs {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .genesis-hero,
    .genesis-panel-grid,
    .tool-cards-grid {
        grid-template-columns: 1fr;
    }

    .genesis-hero-copy {
        padding: 1.4rem 1.15rem;
    }

    .genesis-hero h1 {
        font-size: 2rem;
        line-height: 1.02;
    }

    .genesis-hero-text,
    .tool-card p {
        font-size: 0.94rem;
    }

    .tool-card {
        min-height: 0;
    }

    .api-key-item input,
    .api-key-visibility-btn,
    input[type="text"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px;
    }

    .table-scroll-wrapper {
        margin: 0 -0.15rem;
        padding-bottom: 0.45rem;
        -webkit-overflow-scrolling: touch;
    }

    .page-footer {
        margin: 0 0.85rem 0.85rem;
        padding: 1rem 1.1rem;
    }
}

@media (max-width: 520px) {
    .mobile-nav-toggle {
        top: 0.85rem;
        left: 0.85rem;
    }

    .brand-shell {
        padding: 0.95rem 0.9rem 1rem 3.95rem;
    }

    .genesis-hero h1 {
        font-size: 1.85rem;
    }

    .dashboard-layout nav {
        width: calc(100vw - 1.2rem);
        left: calc(-100vw - 1rem);
    }

    .dashboard-layout nav.mobile-active {
        left: 0.6rem;
    }
}

/* Desktop-style mobile follow-up: keep layout, improve touch ergonomics only */
@media (pointer: coarse) {
    .dashboard-layout nav {
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
    }

    .dashboard-layout nav ul {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .dashboard-layout nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }

    .dashboard-layout nav .api-key-item {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .api-key-item input,
    .api-key-visibility-btn,
    button,
    .fetch-button,
    .genesis-cta {
        min-height: 44px;
    }

    .api-key-input-wrap input {
        padding-right: 14px;
    }

    .table-scroll-wrapper,
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding-bottom: 0.4rem;
        scrollbar-width: thin;
    }
}

/* ==================== FACTION UPGRADES ==================== */

.faction-upgrades-page {
    display: grid;
    gap: 1.15rem;
}

.faction-upgrades-hero,
.faction-upgrades-toolbar,
.faction-upgrades-statusline,
.faction-upgrades-summary-card,
.faction-upgrades-section,
.faction-upgrades-card,
.faction-upgrades-branch-block,
.faction-upgrades-sim-card {
    border: 1px solid rgba(160, 255, 229, 0.12);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(22, 27, 45, 0.97) 0%, rgba(12, 18, 36, 0.97) 100%),
        radial-gradient(circle at top right, rgba(126, 247, 212, 0.12), transparent 52%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 18px 42px rgba(0, 0, 0, 0.16);
}

.faction-upgrades-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.35rem 1.45rem;
}

.faction-upgrades-hero h1 {
    margin: 0.25rem 0 0.45rem;
    color: #f7fbff;
    font-size: 2.1rem;
    letter-spacing: -0.03em;
}

.faction-upgrades-hero p {
    margin: 0;
    color: rgba(235, 244, 255, 0.78);
    max-width: 68ch;
    line-height: 1.55;
}

.faction-upgrades-hero-actions {
    display: inline-flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.faction-upgrades-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 1.2rem;
    padding: 1rem 1.15rem;
}

.faction-upgrades-toolbar-group {
    display: grid;
    gap: 0.45rem;
}

.faction-upgrades-toolbar-group label,
.faction-upgrades-summary-label,
.faction-upgrades-section-kicker,
.faction-upgrades-card-meta,
.faction-upgrades-section-note {
    color: rgba(170, 255, 230, 0.8);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.faction-upgrades-toolbar-actions,
.faction-upgrades-state-toggle {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.faction-upgrades-state-btn {
    min-width: 110px;
}

.faction-upgrades-state-btn-active {
    box-shadow:
        0 0 0 1px rgba(160, 255, 229, 0.4),
        0 10px 24px rgba(116, 219, 255, 0.2);
}

.faction-upgrades-statusline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.15rem;
    color: rgba(235, 244, 255, 0.82);
}

.faction-upgrades-summary-grid,
.faction-upgrades-card-grid,
.faction-upgrades-sim-grid {
    display: grid;
    gap: 1rem;
}

.faction-upgrades-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.faction-upgrades-summary-card {
    padding: 1rem 1.1rem;
    min-height: 140px;
}

.faction-upgrades-summary-card strong {
    display: block;
    margin-top: 0.45rem;
    font-size: 1.85rem;
    line-height: 1.05;
    color: #f7fbff;
}

.faction-upgrades-summary-card p {
    margin: 0.6rem 0 0;
    color: rgba(235, 244, 255, 0.74);
    line-height: 1.5;
}

.faction-upgrades-section {
    padding: 1.1rem 1.2rem 1.25rem;
}

.faction-upgrades-section-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.faction-upgrades-section-head h2 {
    margin: 0.25rem 0 0;
    color: #f7fbff;
    font-size: 1.25rem;
}

.faction-upgrades-card-grid,
.faction-upgrades-sim-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.faction-upgrades-card,
.faction-upgrades-sim-card {
    padding: 1rem 1.05rem;
}

.faction-upgrades-card-head,
.faction-upgrades-branch-head {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: flex-start;
    margin-bottom: 0.7rem;
}

.faction-upgrades-card-head h3,
.faction-upgrades-branch-head h3 {
    margin: 0;
    font-size: 1.08rem;
    color: #f7fbff;
}

.faction-upgrades-card-head span,
.faction-upgrades-branch-head span {
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(116, 219, 255, 0.14);
    color: #aef6e0;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.faction-upgrades-card-meta,
.faction-upgrades-branch-head p {
    margin: 0;
}

.faction-upgrades-branch-list {
    display: grid;
    gap: 1rem;
}

.faction-upgrades-branch-block {
    padding: 1rem 1.05rem;
}

.faction-upgrades-upgrade-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.faction-upgrades-upgrade-list li {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(160, 255, 229, 0.08);
}

.faction-upgrades-upgrade-list strong {
    color: #f4f8ff;
    font-weight: 700;
}

.faction-upgrades-upgrade-list span {
    color: #93efdb;
    font-weight: 600;
}

.faction-upgrades-upgrade-list small,
.faction-upgrades-sim-next small {
    color: rgba(235, 244, 255, 0.62);
    line-height: 1.45;
}

.faction-upgrades-plan-box {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px dashed rgba(160, 255, 229, 0.22);
    background: rgba(9, 14, 30, 0.44);
}

.faction-upgrades-plan-summary {
    margin-bottom: 0.85rem;
    color: #93efdb;
    font-weight: 700;
}

.faction-upgrades-sim-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.faction-upgrades-sim-stats span {
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(235, 244, 255, 0.78);
    font-size: 0.82rem;
}

.faction-upgrades-sim-stats strong {
    color: #f7fbff;
}

.faction-upgrades-sim-next {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.95rem;
}

.faction-upgrades-sim-next strong {
    color: #f7fbff;
}

.faction-upgrades-sim-next p {
    margin: 0;
    color: #93efdb;
    font-weight: 600;
}

.faction-upgrades-sim-actions {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.faction-upgrades-sim-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.faction-upgrades-empty {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px dashed rgba(160, 255, 229, 0.16);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(235, 244, 255, 0.62);
}

@media (max-width: 1080px) {
    .faction-upgrades-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .faction-upgrades-hero,
    .faction-upgrades-toolbar,
    .faction-upgrades-summary-grid,
    .faction-upgrades-card-grid,
    .faction-upgrades-sim-grid {
        grid-template-columns: 1fr;
    }

    .faction-upgrades-hero {
        padding: 1.15rem 1.1rem;
    }

    .faction-upgrades-hero-actions,
    .faction-upgrades-toolbar-actions,
    .faction-upgrades-state-toggle,
    .faction-upgrades-sim-actions {
        width: 100%;
    }

    .faction-upgrades-hero-actions .tab-button,
    .faction-upgrades-toolbar-actions .fetch-button,
    .faction-upgrades-state-toggle .fetch-button,
    .faction-upgrades-sim-actions .fetch-button {
        flex: 1 1 180px;
    }

    .faction-upgrades-statusline,
    .faction-upgrades-section-head,
    .faction-upgrades-card-head,
    .faction-upgrades-branch-head {
        align-items: flex-start;
    }
}

.foreign-stocks-page {
    display: grid;
    gap: 1.15rem;
}

.foreign-stocks-hero,
.foreign-stocks-toolbar,
.foreign-stocks-summary-card,
.foreign-stocks-panel,
.foreign-stocks-country-card,
.foreign-stocks-top-card {
    border-radius: 24px;
    border: 1px solid rgba(160, 255, 229, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
        radial-gradient(circle at top right, rgba(116, 219, 255, 0.12), transparent 38%),
        rgba(11, 17, 36, 0.94);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 16px 34px rgba(5, 8, 20, 0.26);
}

.foreign-stocks-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    gap: 1rem;
    padding: 1.2rem 1.25rem;
}

.foreign-stocks-hero-copy h1 {
    margin: 0.2rem 0 0.4rem;
    color: #f7fbff;
    font-size: clamp(1.95rem, 3.6vw, 2.7rem);
}

.foreign-stocks-hero-copy p,
.foreign-stocks-hero-note p,
.foreign-stocks-chart-note {
    margin: 0;
    color: rgba(235, 244, 255, 0.76);
    line-height: 1.6;
}

.foreign-stocks-hero-note {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid rgba(160, 255, 229, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.foreign-stocks-hero-note strong {
    display: block;
    margin-bottom: 0.4rem;
    color: #aef6e0;
    font-size: 1rem;
}

.foreign-stocks-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(250px, 1fr) auto;
    gap: 1rem;
    padding: 1.05rem 1.15rem;
    align-items: end;
}

.foreign-stocks-toolbar-group {
    display: grid;
    gap: 0.45rem;
}

.foreign-stocks-toolbar-group label {
    color: #aef6e0;
    font-size: 0.92rem;
    font-weight: 700;
}

.foreign-stocks-toolbar-group--wide select {
    width: 100%;
}

.foreign-stocks-timeframe-toggle,
.foreign-stocks-toolbar-actions,
.foreign-stocks-metric-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.foreign-stocks-timeframe-btn-active,
.foreign-stocks-metric-btn-active {
    box-shadow:
        0 0 0 1px rgba(160, 255, 229, 0.4),
        0 10px 24px rgba(116, 219, 255, 0.2);
}

.foreign-stocks-statusline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.15rem;
    color: rgba(235, 244, 255, 0.82);
}

.foreign-stocks-summary-grid,
.foreign-stocks-country-grid,
.foreign-stocks-top-grid {
    display: grid;
    gap: 1rem;
}

.foreign-stocks-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.foreign-stocks-summary-card,
.foreign-stocks-panel {
    padding: 1rem 1.1rem;
}

.foreign-stocks-summary-label,
.foreign-stocks-panel-kicker {
    display: inline-block;
    color: #93efdb;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.foreign-stocks-summary-card strong {
    display: block;
    margin-top: 0.45rem;
    font-size: 1.85rem;
    line-height: 1.05;
    color: #f7fbff;
}

.foreign-stocks-summary-card p {
    margin: 0.6rem 0 0;
    color: rgba(235, 244, 255, 0.74);
    line-height: 1.5;
}

.foreign-stocks-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0.95rem;
}

.foreign-stocks-panel-head h2 {
    margin: 0.2rem 0 0;
    color: #f7fbff;
    font-size: 1.2rem;
}

.foreign-stocks-panel-meta {
    color: rgba(235, 244, 255, 0.64);
    font-size: 0.88rem;
}

.foreign-stocks-top-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.foreign-stocks-top-card {
    padding: 1rem 1.05rem;
}

.foreign-stocks-top-rank {
    color: #93efdb;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.foreign-stocks-top-country {
    margin-top: 0.35rem;
    color: #f7fbff;
    font-size: 1.05rem;
    font-weight: 700;
}

.foreign-stocks-top-line {
    margin-top: 0.7rem;
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: baseline;
    color: rgba(235, 244, 255, 0.74);
}

.foreign-stocks-top-line strong {
    color: #f7fbff;
}

.foreign-stocks-top-line--profit strong {
    color: #8ef8a2;
}

.foreign-stocks-country-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.foreign-stocks-country-card {
    text-align: left;
    padding: 1rem 1.05rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.foreign-stocks-country-card:hover,
.foreign-stocks-country-card-selected {
    transform: translateY(-1px);
    border-color: rgba(116, 219, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 34px rgba(5, 8, 20, 0.3);
}

.foreign-stocks-country-head {
    display: flex;
    justify-content: space-between;
    gap: 0.9rem;
    align-items: flex-start;
}

.foreign-stocks-country-code {
    display: inline-block;
    margin-bottom: 0.25rem;
    color: #93efdb;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.foreign-stocks-country-head h3 {
    margin: 0;
    color: #f7fbff;
    font-size: 1.08rem;
}

.foreign-stocks-country-status {
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.foreign-stocks-country-status-strong {
    background: rgba(123, 245, 146, 0.14);
    color: #98ffad;
}

.foreign-stocks-country-status-medium {
    background: rgba(116, 219, 255, 0.14);
    color: #9fe7ff;
}

.foreign-stocks-country-status-low {
    background: rgba(255, 204, 122, 0.16);
    color: #ffdb99;
}

.foreign-stocks-country-status-empty {
    background: rgba(255, 125, 125, 0.16);
    color: #ffadad;
}

.foreign-stocks-country-quantity {
    display: block;
    margin-top: 0.85rem;
    color: #f7fbff;
    font-size: 1.95rem;
    line-height: 1;
}

.foreign-stocks-country-buy,
.foreign-stocks-country-profit,
.foreign-stocks-country-meta {
    margin: 0.45rem 0 0;
}

.foreign-stocks-country-buy {
    color: #8ddcff;
    font-weight: 700;
}

.foreign-stocks-country-profit {
    color: #98ffad;
    font-weight: 700;
}

.foreign-stocks-country-meta {
    color: rgba(235, 244, 255, 0.58);
    font-size: 0.88rem;
}

.foreign-stocks-chart-wrap {
    position: relative;
    min-height: 360px;
}

.foreign-stocks-chart-note {
    margin-top: 0.85rem;
}

.foreign-stocks-empty {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px dashed rgba(160, 255, 229, 0.16);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(235, 244, 255, 0.62);
}

@media (max-width: 1180px) {
    .foreign-stocks-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .foreign-stocks-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .foreign-stocks-hero,
    .foreign-stocks-toolbar,
    .foreign-stocks-summary-grid {
        grid-template-columns: 1fr;
    }

    .foreign-stocks-hero,
    .foreign-stocks-toolbar,
    .foreign-stocks-summary-card,
    .foreign-stocks-panel {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .foreign-stocks-toolbar-actions .fetch-button,
    .foreign-stocks-timeframe-toggle .fetch-button,
    .foreign-stocks-metric-toggle .fetch-button {
        flex: 1 1 140px;
    }

    .foreign-stocks-statusline,
    .foreign-stocks-panel-head {
        align-items: flex-start;
    }

    .foreign-stocks-chart-wrap {
        min-height: 300px;
    }
}