/* Neon red for jail and hospital presence icons */
.presence-icon[href="jail.php"] i,
.presence-icon[href="hospital.php"] i {
    color: #ff1744;
    text-shadow: 0 0 6px #ff1744, 0 0 12px #ff1744, 0 0 18px #ff1744;
}
/* Cosmic neon scrollbar for dashboard panels */
.home-panel.stats-panel,
.home-panel.properties-panel,
.home-panel.resource-panel,
.home-panel.spacecraft-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--neon) rgba(12,18,32,0.85);
}

.home-panel.stats-panel::-webkit-scrollbar,
.home-panel.properties-panel::-webkit-scrollbar,
.home-panel.resource-panel::-webkit-scrollbar,
.home-panel.spacecraft-panel::-webkit-scrollbar {
    width: 10px;
    background: rgba(12,18,32,0.85);
    border-radius: 8px;
}

.home-panel.stats-panel::-webkit-scrollbar-thumb,
.home-panel.properties-panel::-webkit-scrollbar-thumb,
.home-panel.resource-panel::-webkit-scrollbar-thumb,
.home-panel.spacecraft-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--neon), #8a4fff 80%);
    border-radius: 8px;
    box-shadow: 0 0 8px var(--neon), 0 0 2px #8a4fff;
    border: 2px solid rgba(12,18,32,0.85);
}

.home-panel.stats-panel::-webkit-scrollbar-thumb:hover,
.home-panel.properties-panel::-webkit-scrollbar-thumb:hover,
.home-panel.resource-panel::-webkit-scrollbar-thumb:hover,
.home-panel.spacecraft-panel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #00f0ff 60%, #ffcc33 100%);
    box-shadow: 0 0 12px var(--gold), 0 0 4px #00f0ff;
}

.home-panel.stats-panel::-webkit-scrollbar-corner,
.home-panel.properties-panel::-webkit-scrollbar-corner,
.home-panel.resource-panel::-webkit-scrollbar-corner,
.home-panel.spacecraft-panel::-webkit-scrollbar-corner {
    background: rgba(12,18,32,0.85);
}
/* Dashboard panel scroll control */
.home-panel.stats-panel,
.home-panel.properties-panel,
.home-panel.resource-panel,
.home-panel.spacecraft-panel {
        max-height: 420px;
        overflow-y: auto;
}

@media (max-width: 900px) {
    .home-panel.stats-panel,
    .home-panel.properties-panel,
    .home-panel.resource-panel,
    .home-panel.spacecraft-panel {
        max-height: 320px;
    }
}
/* Clean, consolidated stylesheet for the Game project
   - Restores consistent layout across pages
   - Includes styles for crimes, properties, racing, hospital, profile, leaderboard, etc.
*/

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@300;400;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css');

.nav-icons-only .nav span {
    display: none;
}

.nav-icons-only .nav a {
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
}

.nav-icons-only .nav a i {
    font-size: 1.5rem;
}

/* --- Reset & Base --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

:root{
    --bg-0: #0b0f1a; /* page background */
    --bg-1: #081226;
    --card: rgba(255,255,255,0.03);
    --muted: #cbd5e0;
    --neon: #00f0ff; /* primary neon */
    --gold: #ffcc33; /* accent */
    --purple: #8a4fff;
    --glass: rgba(255,255,255,0.04);
    --bottom-bar-height: 68px;
    --residence-accent-bg: rgba(138,79,255,0.16);
    --residence-accent-border: rgba(138,79,255,0.35);
    --residence-accent-border-soft: rgba(138,79,255,0.32);
    --residence-accent-foreground: #ede9fe;
    --residence-accent-ink: rgba(203,213,225,0.92);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial;
    background-color: var(--bg-0);
    color: var(--muted);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-height: 100vh;
}

.expeditions-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(0, 240, 255, 0.18), transparent 45%),
                radial-gradient(circle at 82% 30%, rgba(138, 79, 255, 0.22), transparent 46%),
                linear-gradient(135deg, var(--bg-0) 0%, var(--bg-1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    z-index: -1;
    pointer-events: none;
    transform: translateZ(0);
}

/* --- Shared panels & utility styles --- */
.content-shell {
    width: min(1100px, 92vw);
    margin: 0 auto;
    padding: 32px 0 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.panel {
    background: rgba(12, 18, 34, 0.82);
    border: 1px solid rgba(0, 240, 255, 0.12);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), inset 0 0 18px rgba(0, 240, 255, 0.05);
    backdrop-filter: blur(18px);
}

.muted {
    color: rgba(203, 213, 225, 0.72);
}

.exp-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(8, 20, 40, 0.68);
    border: 1px solid rgba(0, 240, 255, 0.16);
    color: rgba(226, 232, 240, 0.86);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.exp-quick-link:hover,
.exp-quick-link:focus {
    border-color: rgba(255, 204, 51, 0.45);
    box-shadow: 0 0 18px rgba(255, 204, 51, 0.2);
    transform: translateY(-1px);
    color: #fff;
}

.exp-quick-link:focus {
    outline: none;
}

.exp-quick-link-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 240, 255, 0.14);
    color: var(--gold);
    font-size: 1rem;
}

.exp-quick-link-label {
    white-space: nowrap;
}

.exp-metric-strip {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px;
}

.exp-metric {
    background: rgba(8, 20, 40, 0.72);
    border: 1px solid rgba(0, 240, 255, 0.16);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.06);
}

.exp-metric .label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: rgba(203, 213, 225, 0.7);
}

.exp-metric .value {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--gold);
}

.exp-metric .caption {
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.75);
}

.exp-metric-highlight {
    background: rgba(138, 79, 255, 0.28);
    border-color: rgba(138, 79, 255, 0.45);
}

.exp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.exp-section-header h2 {
    font-size: 1.2rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exp-section-header .muted {
    font-size: 0.85rem;
}

.exp-active-runs {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.exp-run-card {
    background: rgba(8, 16, 28, 0.78);
    border: 1px solid rgba(0, 240, 255, 0.16);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.04);
}

.exp-run-card--compact {
    gap: 12px;
}

.exp-run-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.exp-run-card h3 {
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 6px;
}

.exp-run-card p {
    font-size: 0.85rem;
    line-height: 1.5;
}

.exp-run-card dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.exp-run-card dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(203, 213, 225, 0.65);
}

.exp-run-card dd {
    font-weight: 600;
    color: #f8fafc;
    margin: 4px 0 0;
}

.exp-step-card {
    background: rgba(6, 14, 26, 0.85);
    border: 1px solid rgba(0, 240, 255, 0.18);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.04);
}

.exp-step-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.exp-step-header h4 {
    font-size: 1rem;
    color: #e2e8f0;
}

.exp-step-description {
    font-size: 0.85rem;
    line-height: 1.5;
}

.exp-step-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exp-step-cooldown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed rgba(255, 204, 51, 0.38);
    border-radius: 10px;
    background: rgba(255, 204, 51, 0.06);
    color: rgba(255, 255, 255, 0.9);
}
.exp-step-cooldown i { color: var(--gold); }
.exp-step-cooldown [data-countdown-label] { color: var(--gold); }

.exp-step-gate {
    margin-bottom: 10px;
}

.exp-step-choice {
    width: 100%;
}

.exp-step-choice-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(8, 20, 40, 0.74));
    color: #f8fafc;
    cursor: pointer;
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
    text-align: left;
}

.exp-step-choice-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(12%);
}

.exp-step-choice-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 204, 51, 0.32);
    box-shadow: 0 14px 32px rgba(0, 240, 255, 0.16);
}

.exp-step-choice-btn:focus-visible {
    outline: 2px solid rgba(0, 240, 255, 0.6);
    outline-offset: 3px;
}

.exp-step-choice-btn .choice-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.exp-step-choice-btn .choice-header strong {
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

.exp-step-choice-btn .choice-header .chance {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(148, 236, 255, 0.95);
}

.exp-step-choice-btn .muted {
    font-size: 0.76rem;
    line-height: 1.4;
}

.choice-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 0.75rem;
    color: rgba(203, 213, 225, 0.8);
    padding: 0;
    margin: 0;
}

.choice-meta li span {
    color: rgba(148, 222, 255, 0.85);
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}

.exp-run-actions {
    display: flex;
    justify-content: flex-end;
}

.exp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0, 240, 255, 0.16);
    border: 1px solid rgba(0, 240, 255, 0.32);
    color: #9ffcff;
    white-space: nowrap;
}

.exp-badge-scout { background: rgba(0, 240, 255, 0.18); border-color: rgba(0, 240, 255, 0.35); color: #9ffcff; }
.exp-badge-strike { background: rgba(255, 204, 51, 0.18); border-color: rgba(255, 204, 51, 0.4); color: var(--gold); }
.exp-badge-onslaught { background: rgba(255, 76, 76, 0.18); border-color: rgba(255, 76, 76, 0.38); color: #ffaaaa; }
.exp-badge-mythic { background: rgba(138, 79, 255, 0.22); border-color: rgba(138, 79, 255, 0.45); color: #e7d8ff; }
.exp-badge-neutral { background: rgba(203, 213, 225, 0.2); border-color: rgba(203, 213, 225, 0.28); color: rgba(240, 248, 255, 0.82); }

/* Small inline timer badge for step countdowns */
.exp-badge-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-size: 0.68rem;
    margin-left: 6px;
}
.exp-badge-timer i { color: var(--gold); }

.exp-recent-clears {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.exp-reward-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.exp-reward-list li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(8, 16, 32, 0.78);
    border: 1px solid rgba(0, 240, 255, 0.14);
    box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.04);
}

.expeditions-body .exp-terminal-screen .panel {
    background: rgba(6, 16, 32, 0.72);
    border: 1px solid rgba(0, 240, 255, 0.22);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: inset 0 0 16px rgba(0, 240, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.expeditions-body .exp-terminal-screen .panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(0, 240, 255, 0.05) 0, rgba(0, 240, 255, 0.05) 1px, transparent 1px, transparent 22px);
    opacity: 0.16;
    pointer-events: none;
}

.expeditions-body .exp-terminal-screen .panel[data-terminal-label]::before {
    content: attr(data-terminal-label);
    position: absolute;
    top: 12px;
    right: 18px;
    font-family: 'Orbitron', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: rgba(0, 240, 255, 0.75);
    text-transform: uppercase;
    pointer-events: none;
}

.expeditions-body .exp-terminal-screen .panel > * {
    position: relative;
    z-index: 1;
}

.expeditions-body .exp-terminal-screen .exp-hero {
    background: rgba(4, 14, 26, 0.86);
    border: 1px solid rgba(0, 240, 255, 0.28);
    box-shadow: inset 0 0 24px rgba(0, 240, 255, 0.08);
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.32);
}

.expeditions-body .exp-hero-header h1 {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
}

.expeditions-body .exp-hero-header p {
    font-family: 'Source Code Pro', 'Courier New', monospace;
    letter-spacing: 0.02em;
    color: rgba(197, 236, 255, 0.82);
}

.expeditions-body .exp-metric-strip {
    background: rgba(2, 12, 26, 0.75);
    border: 1px solid rgba(0, 240, 255, 0.18);
    border-radius: 12px;
    padding: 16px;
    box-shadow: inset 0 0 16px rgba(0, 240, 255, 0.04);
}

.expeditions-body .exp-metric {
    border: 1px solid rgba(0, 240, 255, 0.24);
    background: rgba(0, 12, 22, 0.82);
    font-family: 'Source Code Pro', 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(202, 244, 255, 0.86);
}

.expeditions-body .exp-metric .value {
    font-size: 1.35rem;
    color: #73f5ff;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.55);
}

.expeditions-body .exp-metric .caption {
    font-size: 0.72rem;
    color: rgba(173, 220, 255, 0.72);
}

.expeditions-body .exp-section-header h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    letter-spacing: 0.12em;
    color: #f4fbff;
}

.expeditions-body .exp-section-header .muted {
    font-family: 'Source Code Pro', 'Courier New', monospace;
    font-size: 0.78rem;
    color: rgba(158, 220, 255, 0.75);
}

.expeditions-body .exp-run-card,
.expeditions-body .exp-card,
.expeditions-body .exp-leaderboard,
.expeditions-body .exp-step-card,
.expeditions-body .exp-reward-list li,
.expeditions-body .exp-events li {
    background: rgba(1, 10, 22, 0.82);
    border: 1px solid rgba(0, 240, 255, 0.18);
    border-radius: 12px;
    box-shadow: inset 0 0 18px rgba(0, 240, 255, 0.05);
    font-family: 'Source Code Pro', 'Courier New', monospace;
    color: rgba(203, 241, 255, 0.9);
}

.expeditions-body .exp-run-card-header h3,
.expeditions-body .exp-card h3,
.expeditions-body .exp-leaderboard h3 {
    font-family: 'Orbitron', monospace;
    letter-spacing: 0.08em;
    color: #f5fbff;
}

.expeditions-body .exp-badge {
    font-family: 'Source Code Pro', monospace;
    letter-spacing: 0.08em;
    border-radius: 999px;
    padding: 4px 10px;
}

.expeditions-body .exp-step-choice-btn {
    border-style: dashed;
    background: rgba(0, 15, 28, 0.84);
}

.expeditions-body .exp-step-choice-btn .choice-header strong {
    font-family: 'Orbitron', monospace;
    letter-spacing: 0.08em;
}

.expeditions-body .exp-start-form .btn,
.expeditions-body .exp-step-choice-btn,
.expeditions-body .exp-run-actions .btn {
    font-family: 'Source Code Pro', 'Courier New', monospace;
}

.expeditions-body .exp-select,
.expeditions-body .exp-start-form label {
    font-family: 'Source Code Pro', 'Courier New', monospace;
    letter-spacing: 0.05em;
}

/* --- Expedition terminal chrome --- */
.expeditions-body .exp-terminal {
    width: min(1120px, 95vw);
    margin: 32px auto 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: 'Source Code Pro', 'Courier New', monospace;
    color: #aee8ff;
    position: relative;
    flex: 1;
}

.expeditions-body .exp-terminal-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border: 1px solid rgba(0, 240, 255, 0.32);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.16), rgba(10, 30, 56, 0.82));
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.55);
}

.expeditions-body .exp-terminal-chrome-left,
.expeditions-body .exp-terminal-chrome-right {
    display: flex;
    align-items: center;
    gap: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: rgba(219, 244, 255, 0.82);
}

.expeditions-body .exp-terminal-chrome-status {
    color: rgba(255, 204, 102, 0.88);
}

.expeditions-body .exp-terminal-led {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #23f89a;
    box-shadow: 0 0 14px rgba(35, 248, 154, 0.8);
    position: relative;
}

.expeditions-body .exp-terminal-led::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.32);
    opacity: 0.6;
}

.expeditions-body .exp-terminal-led--green {
    animation: terminalLedPulse 2.6s ease-in-out infinite;
}

@keyframes terminalLedPulse {
    0%, 60%, 100% { box-shadow: 0 0 12px rgba(35, 248, 154, 0.7); }
    20%, 30% { box-shadow: 0 0 22px rgba(35, 248, 154, 0.95); }
}

.expeditions-body .exp-terminal-clock {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    background: rgba(4, 16, 26, 0.65);
    border: 1px solid rgba(0, 240, 255, 0.3);
    padding: 4px 10px;
    border-radius: 8px;
    color: #f8fbff;
    letter-spacing: 0.06em;
}

.expeditions-body .exp-terminal-ticker {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border: 1px solid rgba(0, 240, 255, 0.24);
    border-top: none;
    border-bottom: none;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.12), rgba(6, 20, 36, 0.88));
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    overflow: hidden;
}

.expeditions-body .ticker-label {
    text-transform: uppercase;
    color: rgba(255, 204, 51, 0.86);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.expeditions-body .ticker-message {
    white-space: nowrap;
    min-width: 100%;
    transition: opacity 0.45s ease;
}

.expeditions-body .ticker-message.is-hidden {
    opacity: 0;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.expeditions-body .exp-terminal-screen {
    border: 1px solid rgba(0, 240, 255, 0.32);
    border-top: none;
    border-radius: 0 0 18px 18px;
    background: radial-gradient(circle at top, rgba(0, 240, 255, 0.08), rgba(3, 9, 22, 0.92));
    box-shadow: inset 0 0 24px rgba(0, 240, 255, 0.05), 0 28px 62px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    padding: clamp(18px, 4vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    position: relative;
}

.expeditions-body .exp-terminal-screen.is-launch-locked {
    overflow: hidden;
}

.expeditions-body .exp-terminal-content[aria-hidden="true"] {
    filter: blur(2px);
    opacity: 0.28;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.expeditions-body .exp-lockout-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(3, 12, 28, 0.96), rgba(0, 6, 16, 0.94));
    border: 1px solid rgba(0, 240, 255, 0.3);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(28px, 6vw, 52px);
    padding-top: clamp(82px, 12vh, 140px);
    z-index: 12;
    box-shadow: 0 36px 78px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
}

.expeditions-body .exp-lockout-card {
    width: min(560px, 100%);
    display: grid;
    gap: 18px;
    text-align: center;
    color: rgba(226, 241, 255, 0.94);
}

.expeditions-body .exp-lockout-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 204, 51, 0.12);
    border: 1px solid rgba(255, 204, 51, 0.38);
    color: rgba(255, 204, 51, 0.9);
    font-size: 2.1rem;
    box-shadow: 0 16px 36px rgba(255, 204, 51, 0.25);
}

.expeditions-body .exp-lockout-title {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f9fbff;
}

.expeditions-body .exp-lockout-message {
    margin: 0;
    font-size: 0.96rem;
    color: rgba(196, 232, 255, 0.88);
    line-height: 1.6;
}

.expeditions-body .exp-lockout-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px 18px;
    margin: 0;
    padding: 12px 0 0;
    list-style: none;
}

.expeditions-body .exp-lockout-status div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(3, 20, 36, 0.52);
    border: 1px solid rgba(0, 240, 255, 0.22);
    box-shadow: inset 0 0 18px rgba(0, 240, 255, 0.08);
}

.expeditions-body .exp-lockout-status dt {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 222, 255, 0.8);
}

.expeditions-body .exp-lockout-status dd {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 600;
    color: rgba(244, 255, 255, 0.96);
}

.expeditions-body .exp-lockout-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 4px;
}

.expeditions-body .exp-lockout-action {
    margin: 0;
}

.expeditions-body .exp-lockout-actions .btn {
    min-width: 180px;
    box-shadow: 0 18px 42px rgba(0, 240, 255, 0.18);
}

.expeditions-body .exp-lockout-note {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(158, 242, 255, 0.7);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .expeditions-body .exp-lockout-status div {
        padding: 10px;
    }

    .expeditions-body .exp-lockout-actions .btn {
        min-width: 0;
        flex: 1 1 100%;
    }
}

.expeditions-body .exp-terminal-footer {
    margin: 24px auto 48px;
    width: min(1120px, 95vw);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Source Code Pro', 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(158, 242, 255, 0.86);
}

.expeditions-body .exp-terminal-prompt {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.expeditions-body .exp-terminal-cursor {
    display: inline-block;
    width: 10px;
    height: 1.1em;
    background: rgba(0, 240, 255, 0.92);
    animation: terminalCursor 1.1s steps(1) infinite;
    margin-left: 4px;
}

@keyframes terminalCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.expeditions-body .term-pulse {
    animation: expTerminalPulse 1.6s ease-out;
}

@keyframes expTerminalPulse {
    0% {
        box-shadow: 0 0 0 rgba(0, 240, 255, 0);
    }
    15% {
        box-shadow: 0 0 24px rgba(0, 240, 255, 0.45);
    }
    100% {
        box-shadow: 0 0 0 rgba(0, 240, 255, 0);
    }
}


.exp-reward-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
    color: #f8fafc;
}

.exp-reward-main strong {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

.exp-reward-value {
    font-weight: 600;
    color: #ffe89c;
}

.exp-reward-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: rgba(203, 213, 225, 0.72);
}

.exp-events {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.exp-events li {
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(8, 16, 32, 0.76);
    border: 1px solid rgba(0, 240, 255, 0.14);
    box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.04);
}

.exp-event-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.exp-event-heading h3 {
    font-size: 1rem;
    color: #fff;
}

.exp-event-window {
    margin-top: 10px;
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.76);
}

.exp-event-window i {
    margin-right: 6px;
    color: var(--neon);
}

.expeditions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.exp-card {
    background: rgba(8, 16, 32, 0.78);
    border: 1px solid rgba(0, 240, 255, 0.14);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.exp-start-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.exp-difficulty-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.exp-select {
    width: 100%;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(0, 240, 255, 0.22);
    border-radius: 12px;
    padding: 10px 14px;
    color: #f8fafc;
    font-weight: 600;
}

.exp-select:focus {
    outline: 2px solid rgba(0, 240, 255, 0.45);
    outline-offset: 3px;
}

.exp-leaderboards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.exp-leaderboard {
    background: rgba(8, 18, 36, 0.72);
    border: 1px solid rgba(0, 240, 255, 0.14);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.table-wrapper {
    border: 1px solid rgba(0, 240, 255, 0.14);
    border-radius: 12px;
    overflow: auto;
    background: rgba(4, 10, 20, 0.82);
}

.exp-table {
    width: 100%;
    border-collapse: collapse;
    color: #f8fafc;
}

.exp-table th,
.exp-table td {
    padding: 10px 12px;
    font-size: 0.85rem;
}

.exp-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: rgba(203, 213, 225, 0.7);
    border-bottom: 1px solid rgba(0, 240, 255, 0.14);
}

.exp-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

.exp-table tbody tr:hover {
    background: rgba(0, 240, 255, 0.08);
}

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

@media (max-width: 720px) {
    .content-shell {
        padding: 28px 0 56px;
        gap: 20px;
    }
    .panel {
        padding: 20px;
    }
    .exp-metric-strip {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .exp-run-card dl {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

.topbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px 18px;
    background: linear-gradient(180deg, rgba(8, 18, 32, 0.88), rgba(6, 10, 22, 0.96));
    border-bottom: 1px solid rgba(0, 240, 255, 0.16);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    overflow: visible;
}

.topbar .topbar-main {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    padding: 18px 22px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(13, 24, 44, 0.92), rgba(15, 12, 34, 0.88));
    border: 1px solid rgba(0, 240, 255, 0.18);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), inset 0 0 24px rgba(0, 240, 255, 0.06);
    backdrop-filter: blur(12px);
    overflow: visible;
}

.topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Orbitron', sans-serif;
}

.topbar .brand .brand-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 204, 51, 0.2));
    border: 1px solid rgba(0, 240, 255, 0.25);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.18);
}

.topbar .brand .brand-icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.topbar .brand h1{
    margin:0;
    font-family: 'Orbitron', sans-serif;
    font-size:1.2rem;
    font-weight:700;
    letter-spacing:1px;
    background: linear-gradient(135deg, var(--neon) 0%, var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 18px rgba(0,240,255,0.3);
}
.topbar .nav {
    display:flex;
    gap:6px;
    align-items:center;
    flex:1 1 0%;
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,240,255,0.45) transparent;
    mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.6) 24px, #000 10%, #000 90%, rgba(0,0,0,0.6) calc(100% - 24px), transparent 100%);
}
.topbar .nav::-webkit-scrollbar { height:4px; }
.topbar .nav::-webkit-scrollbar-track { background: transparent; }
.topbar .nav::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.4); border-radius:999px; }
.topbar .nav a{
    color:var(--muted);
    text-decoration:none;
    padding:7px 11px;
    border-radius:10px;
    font-weight:600;
    font-size:0.88rem;
    border:1px solid transparent;
    transition: all 0.3s ease;
    display:flex;
    align-items:center;
    gap:8px;
}
.topbar .nav a i{ font-size:1rem; color:var(--neon); }
.topbar .nav a:hover{
    color:var(--gold);
    background: rgba(255,204,51,0.14);
    border-color: rgba(255,204,51,0.28);
    box-shadow: 0 0 18px rgba(255,204,51,0.25);
}
.topbar .nav a:hover i{ color: var(--gold); }
.topbar .topbar-stats-toggle{
    display:block;
}
.topbar .stats-toggle{
    position:relative;
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid rgba(0,240,255,0.18);
    background: rgba(12, 20, 36, 0.8);
    color:var(--neon);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.topbar .stats-toggle:hover{
    background: rgba(0,240,255,0.15);
    border-color: rgba(0,240,255,0.35);
    box-shadow: 0 0 18px rgba(0,240,255,0.25);
    color: var(--gold);
}
.topbar .topbar-metrics{
    display:flex;
    align-items:center;
    gap:12px;
    flex:0 1 auto;
    padding:6px 0;
    flex-wrap:nowrap;
    justify-content:flex-end;
    min-width:220px;
}
.topbar .topbar-metric{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:14px;
    background:rgba(12, 32, 56, 0.72);
    border:1px solid rgba(0, 240, 255, 0.18);
    box-shadow:0 8px 18px rgba(0,0,0,0.35), inset 0 0 12px rgba(0,240,255,0.08);
}
.topbar .topbar-metric-icon{
    width:32px;
    height:32px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgba(0,240,255,0.25), rgba(0,105,255,0.2));
    color:var(--neon);
    box-shadow:0 0 12px rgba(0,240,255,0.18);
}
.topbar .topbar-metric-body{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}
.topbar .topbar-metric-label{
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--muted);
}
.topbar .topbar-metric-value{
    font-size:0.95rem;
    font-weight:700;
    color:var(--gold);
}
.topbar .topbar-metrics .topbar-metric-value{white-space:nowrap;}
.topbar .user { display:flex; gap:12px; align-items:center; position:relative; }
.topbar-presence-icons{ display:flex; gap:8px; align-items:center; margin-right:6px; }
.topbar-presence-icons .presence-icon{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px 8px; border-radius:10px; background:rgba(255,255,255,0.02); border:1px solid rgba(0,240,255,0.06); min-width:44px; height:44px; color:var(--muted); font-size:0.75rem; }
.topbar-presence-icons .presence-icon i{ font-size:1.05rem; color:var(--neon); }
.topbar-presence-icons .presence-icon:hover{ background: rgba(0,240,255,0.06); color:var(--gold); border-color: rgba(255,204,51,0.18); }
.topbar-presence-icons .presence-countdown{ font-weight:700; color:var(--gold); font-size:0.72rem; line-height:1; }
.topbar-presence-icons .presence-label{ font-size:0.62rem; color:var(--muted); }
.topbar-messages{
    position:relative;
}
.topbar-messages .message-toggle{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(0,240,255,0.16);
    color:var(--muted);
    transition:all 0.25s ease;
    text-decoration:none;
}
.topbar-messages .message-toggle:hover{
    color:var(--neon);
    border-color:rgba(0,240,255,0.35);
    box-shadow:0 0 16px rgba(0,240,255,0.22);
}
.topbar-messages .message-toggle:focus-visible{
    outline:2px solid var(--neon);
    outline-offset:4px;
}
.topbar-messages .message-count{
    position:absolute;
    top:-6px;
    right:-6px;
    background:linear-gradient(135deg, rgba(0,240,255,0.95), rgba(0,160,255,0.95));
    color:#021021;
    font-weight:700;
    font-size:0.7rem;
    min-width:22px;
    height:22px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
    box-shadow:0 0 12px rgba(0,240,255,0.3);
}
.topbar-events{
    position:relative;
}
.topbar-events .event-toggle{
    position:relative;
    border:none;
    background:rgba(255,255,255,0.06);
    color:var(--muted);
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.25s ease;
    border:1px solid rgba(255,204,51,0.14);
}
.topbar-events .event-toggle:hover{
    color:var(--gold);
    border-color:rgba(255,204,51,0.35);
    box-shadow:0 0 16px rgba(255,204,51,0.25);
}
.topbar-events .event-toggle:focus-visible{
    outline:2px solid var(--neon);
    outline-offset:4px;
}
.topbar-events .event-count{
    position:absolute;
    top:-6px;
    right:-6px;
    background:linear-gradient(135deg, rgba(255,76,76,0.95), rgba(255,126,76,0.95));
    color:#fff;
    font-weight:700;
    font-size:0.7rem;
    min-width:22px;
    height:22px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
    box-shadow:0 0 12px rgba(255,76,76,0.3);
}

@media (max-width: 960px) {
    .topbar .topbar-main{
        display:grid;
        grid-template-columns:auto minmax(0,1fr) auto;
        grid-template-areas:
            "brand metrics user"
            "nav nav nav";
        align-items:center;
        gap:14px 18px;
    }
    .topbar .brand{ grid-area:brand; }
    .topbar .nav{
        grid-area:nav;
        width:100%;
        mask-image:none;
        justify-content:center;
        padding-bottom:4px;
    }
    .topbar .topbar-metrics{
        grid-area:metrics;
        width:100%;
        justify-content:center;
        flex-wrap:nowrap;
        gap:4px;
        padding:4px 0;
    }
    .topbar .topbar-metric{
        flex:0 1 auto;
        min-width:60px;
        padding:6px 8px;
        border-radius:8px;
    }
    .topbar .topbar-metric-icon{
        width:20px;
        height:20px;
    }
    .topbar .topbar-metric-icon i{
        font-size:0.9rem;
    }
    .topbar .topbar-metric-body{
        gap:2px;
    }
    .topbar .topbar-metric-label{
        font-size:0.65rem;
        letter-spacing:0.02em;
    }
    .topbar .topbar-metric-value{
        font-size:0.75rem;
        font-weight:600;
    }
    .topbar .user{
        grid-area:user;
        justify-content:flex-end;
        flex-wrap:nowrap;
        gap:12px;
    }
    .topbar .user .name{
        flex:0 1 200px;
        min-width:0;
        text-align:right;
    }
}

.events-dropdown{
    position:absolute;
    right:0;
    top:56px;
    width:320px;
    background:linear-gradient(180deg, rgba(18,11,32,0.96), rgba(6,12,20,0.96));
    border:2px solid rgba(0,240,255,0.18);
    border-radius:16px;
    box-shadow:0 18px 42px rgba(0,0,0,0.55), 0 0 28px rgba(0,240,255,0.12);
    padding:14px;
    display:none;
    flex-direction:column;
    gap:12px;
    z-index:2600;
    backdrop-filter:blur(16px);
}
.events-body a.event-item,
.events-body a.event-item .event-message {
    text-decoration: none !important;
    color: inherit !important;
}
.events-body a.event-item{ display:block; }
.events-body a.event-item:focus,
.events-body a.event-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,240,255,0.08), 0 0 10px rgba(0,240,255,0.06) !important;
    border-radius: 10px;
}
.events-dropdown.open{ display:flex; }
.events-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:0.85rem;
    color:var(--muted);
}
.events-header-controls{
    display:flex;
    align-items:center;
    gap:8px;
}
.events-mark-all{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    font-size:0.75rem;
    font-weight:600;
    border-radius:999px;
    border:1px solid rgba(0,240,255,0.4);
    background:rgba(0,240,255,0.15);
    color:var(--muted);
    cursor:pointer;
    transition:all 0.2s ease;
}
.events-mark-all .label{ text-transform:uppercase; letter-spacing:0.6px; }
.events-mark-all:hover:not(.disabled):not(:disabled){
    color:#f8fafc;
    background:rgba(0,240,255,0.25);
    box-shadow:0 0 12px rgba(0,240,255,0.25);
}
.events-mark-all.disabled,
.events-mark-all:disabled{
    opacity:0.45;
    cursor:default;
    box-shadow:none;
}
.events-mark-all.loading{
    position:relative;
}
.events-mark-all.loading::after{
    content:"";
    width:12px;
    height:12px;
    border-radius:50%;
    border:2px solid rgba(248,250,252,0.7);
    border-top-color:transparent;
    animation:events-spin 0.8s linear infinite;
}
.events-mark-all.loading .label,
.events-mark-all.loading i{
    opacity:0.3;
}
@keyframes events-spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}
.events-body{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:320px;
    overflow-y:auto;
    padding-right:4px;
}

/* existing sr-only definition earlier */
.event-item{
    background:rgba(255,255,255,0.05);
    border-radius:12px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,0.06);
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:0.85rem;
}

/* Daily Goals: compact icon and dropdown */
.topbar-goals{ position:relative; }
.topbar-goals .goals-toggle{
    position:relative;
    border:none;
    background:rgba(255,255,255,0.06);
    color:var(--muted);
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.25s ease;
    border:1px solid rgba(255,204,51,0.14);
}
.topbar-goals .goals-toggle:hover{
    color:var(--gold);
    border-color:rgba(255,204,51,0.35);
    box-shadow:0 0 16px rgba(255,204,51,0.25);
}
.topbar-goals .goals-toggle:focus-visible{
    outline:2px solid var(--neon);
    outline-offset:4px;
}
.topbar-goals .goals-done-dot{
    position:absolute;
    top:-4px; right:-4px;
    width:14px; height:14px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(43,197,111,0.95), rgba(64,220,164,0.95));
    box-shadow:0 0 10px rgba(64,220,164,0.5);
    border:1px solid rgba(64,220,164,0.6);
}
.topbar-goals .goals-toggle-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}
.topbar-goals .goals-progress-ring{
    position:absolute;
    inset:6px; /* keep padding so ring sits inside button nicely */
    width:auto;
    height:auto;
    pointer-events:none;
    z-index:1;
}
.topbar-goals .goals-progress-ring circle{
    fill:none;
    stroke-width:4;
    transform-origin:50% 50%;
}
.topbar-goals .goals-progress-track{
    stroke:rgba(255,255,255,0.12);
}
.topbar-goals .goals-progress-indicator{
    /* Stroke color provided inline via SVG gradient; keep effects here */
    stroke-dasharray:113.1;
    stroke-linecap:round;
    transform:rotate(-90deg);
    transition:stroke-dashoffset 0.45s ease;
    filter: drop-shadow(0 0 10px rgba(138,79,255,0.45)) drop-shadow(0 0 16px rgba(0,240,255,0.35));
}
/* Hide legacy inner icon; ring-only visual now */
.topbar-goals .goals-toggle-icon{ display:none !important; }
.goals-dropdown{
    position:absolute;
    right:0;
    top:56px;
    width:320px;
    background:linear-gradient(180deg, rgba(18,11,32,0.96), rgba(6,12,20,0.96));
    border:2px solid rgba(0,240,255,0.18);
    border-radius:16px;
    box-shadow:0 18px 42px rgba(0,0,0,0.55), 0 0 28px rgba(0,240,255,0.12);
    padding:12px;
    display:none;
    flex-direction:column;
    gap:10px;
    z-index:2600;
    backdrop-filter:blur(16px);
}
.goals-dropdown.open{ display:flex; }
.goals-header{ display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:0.85rem; }
.goals-header-right{ display:flex; align-items:center; gap:10px; }
.goals-streak{ color:#ffd280; font-weight:700; }
.goals-history{ color:#9bbcff; text-decoration:none; font-weight:600; }
.goals-history:hover{ text-decoration:underline; }
.goals-body{ display:flex; flex-direction:column; gap:8px; }
.goal-row{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 6px; align-items:center; gap:6px 10px; background:rgba(17,23,34,0.55); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:8px 10px; }
.goal-row.is-complete{ border-color:rgba(64,220,164,0.35); box-shadow:inset 0 0 0 1px rgba(64,220,164,0.18); }
.goal-row-label{ color:#eaf2ff; font-weight:600; }
.goal-row-count{ color:#cfe3ff; font-weight:700; }
.goal-row-bar{ grid-column:1 / -1; position:relative; height:6px; background:rgba(255,255,255,0.06); border-radius:999px; overflow:hidden; }
.goal-row-bar > span{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg, rgba(0,240,255,0.75), rgba(0,180,255,0.9)); box-shadow:0 0 10px rgba(0,240,255,0.35); border-radius:999px; }
.goals-footer{ display:flex; justify-content:flex-end; }
.goals-done-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(46,204,113,.18); color:#2ecc71; font-weight:700; }

@media (max-width: 640px){
    .events-dropdown,
    .goals-dropdown{
        position:fixed;
        top:70px;
        left:50%;
        right:auto;
        transform:translateX(-50%);
        width:min(320px, calc(100vw - 28px));
        margin:0;
    }
}

.event-item.unread{
    border-color:rgba(255,204,51,0.35);
    box-shadow:0 0 14px rgba(255,204,51,0.20);
}
.event-item.read{
    opacity:0.8;
}
.event-item.empty{
    text-align:center;
    color:rgba(203,213,225,0.6);
    border-style:dashed;
}
.event-message{ color:#f8fafc; font-weight:600; }
.event-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:rgba(203,213,225,0.55);
}
.event-meta .event-type{
    background:rgba(0,240,255,0.12);
    border-radius:999px;
    padding:2px 8px;
    border:1px solid rgba(0,240,255,0.18);
}
.event-meta .event-time{
    font-style:italic;
}
.attack-page{
    display:flex;
    flex-direction:column;
    gap:32px;
}

/* --- Mirage Lounge (Bar) --- */
.bar-page{
    display:flex;
    flex-direction:column;
    gap:32px;
    padding-bottom:80px;
}

.bar-hero{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    padding:32px;
    border-radius:28px;
    background:linear-gradient(135deg, rgba(11,22,43,0.92), rgba(16,6,38,0.88));
    border:1px solid rgba(0,240,255,0.22);
    box-shadow:0 24px 60px rgba(0,0,0,0.55);
    position:relative;
    overflow:hidden;
}

.bar-hero::after{
    content:"";
    position:absolute;
    inset:-40% auto auto -20%;
    width:420px;
    height:420px;
    background:radial-gradient(circle, rgba(0,240,255,0.18), transparent 65%);
    pointer-events:none;
}

.bar-hero-copy{
    position:relative;
    z-index:1;
    flex:1 1 320px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.bar-hero h1{
    font-family:'Orbitron', sans-serif;
    font-size:2.4rem;
    letter-spacing:1.5px;
    color:#f8fafc;
}

.bar-hero p{
    font-size:1.05rem;
    color:rgba(226,232,240,0.88);
    max-width:520px;
}

.bar-hero-stats{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:8px;
    padding:0;
}

.bar-hero-stats li{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:14px;
    padding:12px 18px;
    min-width:140px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.bar-hero-stats li span{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:rgba(203,213,225,0.7);
}

.bar-hero-stats li strong{
    font-size:1.15rem;
    color:#f8fafc;
}

.bar-hero-atmosphere{
    flex:1 1 260px;
    min-height:220px;
    border-radius:22px;
    background:radial-gradient(circle at 70% 30%, rgba(138,79,255,0.26), transparent 60%),
               radial-gradient(circle at 30% 70%, rgba(0,240,255,0.22), transparent 60%),
               linear-gradient(135deg, rgba(17,9,38,0.65), rgba(6,14,28,0.85));
    border:1px solid rgba(138,79,255,0.28);
    box-shadow:inset 0 0 32px rgba(0,0,0,0.4);
}

.bar-alert{
    padding:14px 18px;
    border-radius:18px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid transparent;
    background:rgba(255,255,255,0.05);
    box-shadow:0 12px 28px rgba(0,0,0,0.28);
}

.bar-alert-success{
    border-color:rgba(46,204,113,0.45);
    background:rgba(46,204,113,0.16);
    color:rgba(229,255,242,0.95);
}

.bar-alert-error{
    border-color:rgba(255,99,132,0.45);
    background:rgba(255,99,132,0.14);
    color:rgba(255,235,238,0.95);
}

.bar-recap{
    padding:24px;
    border-radius:22px;
    background:linear-gradient(135deg, rgba(17,16,32,0.9), rgba(26,18,44,0.9));
    border:1px solid rgba(0,240,255,0.18);
    box-shadow:0 18px 40px rgba(0,0,0,0.4);
}

.bar-recap h2{
    font-family:'Orbitron', sans-serif;
    font-size:1.4rem;
    margin-bottom:16px;
    color:#f8fafc;
}

.bar-recap-grid{
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
}

.bar-recap-item{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px;
    border-radius:14px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
}

.bar-recap-item .label{
    text-transform:uppercase;
    font-size:0.7rem;
    letter-spacing:0.6px;
    color:rgba(203,213,225,0.65);
}

.bar-recap-item .value{
    font-size:1.05rem;
    font-weight:700;
    color:#f8fafc;
}

.bar-section{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.bar-section-header h2{
    font-family:'Orbitron', sans-serif;
    font-size:1.6rem;
    color:#f8fafc;
}

.bar-section-header p{
    color:rgba(203,213,225,0.78);
}

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

.bar-card{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:22px;
    border-radius:20px;
    background:linear-gradient(160deg, rgba(19,16,32,0.9), rgba(9,18,32,0.85));
    border:1px solid rgba(138,79,255,0.22);
    box-shadow:0 16px 36px rgba(0,0,0,0.4);
    transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bar-card:hover{
    transform:translateY(-6px);
    border-color:rgba(0,240,255,0.35);
    box-shadow:0 24px 42px rgba(0,0,0,0.5);
}

.bar-card-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,240,255,0.14);
    border:1px solid rgba(0,240,255,0.28);
    color:var(--neon);
    font-size:1.5rem;
}

.bar-card-body{
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:1;
}

.bar-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.bar-card-header h3{
    font-size:1.25rem;
    color:#f8fafc;
}

.bar-card-tagline{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:rgba(255,204,51,0.85);
    background:rgba(255,204,51,0.15);
    border:1px solid rgba(255,204,51,0.32);
    border-radius:999px;
    padding:4px 10px;
}

.bar-card-description{
    color:rgba(226,232,240,0.8);
    font-size:0.92rem;
    line-height:1.45;
}

.bar-card-meta{
    list-style:none;
    display:grid;
    gap:10px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    padding:0;
}

.bar-card-meta li{
    display:flex;
    flex-direction:column;
    gap:4px;
    background:rgba(255,255,255,0.05);
    border-radius:12px;
    padding:10px;
}

.bar-card-meta li span{
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:rgba(203,213,225,0.65);
}

.bar-card-meta li strong{
    color:#f8fafc;
}

.bar-card-footer{
    margin-top:auto;
}

.bar-card-button{
    width:100%;
    padding:12px 16px;
    border-radius:14px;
    border:1px solid rgba(0,240,255,0.32);
    background:linear-gradient(135deg, rgba(0,240,255,0.22), rgba(138,79,255,0.32));
    color:#f8fafc;
    font-weight:700;
    letter-spacing:0.4px;
    cursor:pointer;
    transition:all 0.2s ease;
}

.bar-card-button:hover:not(:disabled){
    border-color:rgba(0,240,255,0.6);
    box-shadow:0 0 20px rgba(0,240,255,0.35);
}

.bar-card-button:disabled{
    cursor:not-allowed;
    opacity:0.65;
    border-color:rgba(148,163,184,0.3);
    background:rgba(148,163,184,0.18);
}

.bar-backroom{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    gap:28px;
}

.bar-backroom-warning{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:24px 26px;
    border-radius:22px;
    background:linear-gradient(135deg, rgba(17,12,32,0.92), rgba(32,10,44,0.9));
    border:1px solid rgba(255,204,51,0.3);
    box-shadow:0 22px 44px rgba(0,0,0,0.45);
}

.bar-backroom-warning-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,204,51,0.18);
    border:1px solid rgba(255,204,51,0.35);
    color:rgba(255,204,51,0.95);
    font-size:2rem;
}

.bar-backroom-warning-copy{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.bar-backroom-warning-copy h2{
    font-family:'Orbitron', sans-serif;
    font-size:1.5rem;
    color:#f8fafc;
}

.bar-backroom-warning-lede{
    color:rgba(255,230,204,0.92);
    font-weight:600;
    font-size:1rem;
}

.bar-backroom-warning-notes{
    color:rgba(226,232,240,0.78);
    font-size:0.95rem;
    max-width:680px;
}

.bar-backroom-warning-notes code{
    background:rgba(255,255,255,0.1);
    padding:2px 6px;
    border-radius:6px;
    font-size:0.85rem;
    color:var(--neon);
}

.bar-backroom-warning-balance{
    margin:6px 0 0;
    color:rgba(226,232,240,0.85);
    font-size:0.95rem;
}

.bar-backroom-warning-balance strong{
    color:#f8fafc;
}

.bar-backroom-door{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    border-radius:14px;
    font-weight:700;
    letter-spacing:0.4px;
    text-decoration:none;
    background:linear-gradient(135deg, rgba(255,204,51,0.28), rgba(255,126,76,0.22));
    border:1px solid rgba(255,204,51,0.35);
    color:#f8fafc;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    margin-top:6px;
}

.bar-backroom-door:hover{
    transform:translateY(-3px);
    box-shadow:0 0 24px rgba(255,204,51,0.28);
}

.bar-backroom-grid{
    display:grid;
    gap:20px;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.bar-backroom-tile{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:20px;
    border-radius:20px;
    background:linear-gradient(150deg, rgba(19,16,32,0.92), rgba(9,18,32,0.85));
    border:1px solid rgba(138,79,255,0.24);
    box-shadow:0 16px 36px rgba(0,0,0,0.4);
    transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bar-backroom-tile.is-ready{
    border-color:rgba(0,240,255,0.38);
}

.bar-backroom-tile:hover{
    transform:translateY(-4px);
    border-color:rgba(0,240,255,0.45);
    box-shadow:0 24px 42px rgba(0,0,0,0.46);
}

.bar-backroom-tile-header{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.bar-backroom-tile-header h3{
    font-size:1.15rem;
    color:#f8fafc;
}

.bar-backroom-tile-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,240,255,0.16);
    border:1px solid rgba(0,240,255,0.26);
    color:var(--neon);
    font-size:1.6rem;
}

.bar-backroom-tile-type{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:rgba(203,213,225,0.7);
    margin-top:4px;
}

.bar-backroom-tile-preview{
    position:relative;
    min-height:140px;
    border-radius:16px;
    background:rgba(255,255,255,0.05);
    border:1px dashed rgba(148,163,184,0.4);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.bar-backroom-tile-preview img,
.bar-backroom-tile-preview video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.bar-backroom-placeholder{
    text-align:center;
    color:rgba(203,213,225,0.78);
    font-size:0.9rem;
    padding:0 16px;
}

.bar-backroom-tile.is-locked .bar-backroom-tile-preview{
    position:relative;
}

.bar-backroom-tile.is-locked .bar-backroom-tile-preview::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(8,12,20,0.55), rgba(12,18,36,0.75));
    backdrop-filter:blur(2px);
    border-radius:inherit;
    transition:opacity 0.25s ease;
}

.bar-backroom-tile.is-locked .bar-backroom-tile-preview img,
.bar-backroom-tile.is-locked .bar-backroom-tile-preview video{
    filter:grayscale(0.35) blur(1px);
    transform:scale(1.02);
}

.bar-backroom-locked-banner{
    position:absolute;
    inset:auto 10px 10px;
    padding:8px 14px;
    border-radius:12px;
    background:linear-gradient(135deg, rgba(255,204,51,0.28), rgba(255,126,76,0.26));
    border:1px solid rgba(255,204,51,0.35);
    color:#111827;
    font-weight:700;
    letter-spacing:0.4px;
    text-transform:uppercase;
    font-size:0.75rem;
    display:inline-flex;
    align-items:center;
    gap:6px;
    z-index:1;
}

.bar-backroom-unlock-form{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.bar-backroom-unlock-form .bar-backroom-tile-button{
    background:linear-gradient(135deg, rgba(255,204,51,0.24), rgba(255,126,76,0.22));
    border:1px solid rgba(255,204,51,0.35);
    color:#111827;
}

.bar-backroom-unlock-form .bar-backroom-tile-button:hover{
    border-color:rgba(255,204,51,0.5);
    box-shadow:0 0 18px rgba(255,204,51,0.2);
}

.bar-backroom-tile-footer{
    margin-top:auto;
}

.bar-backroom-tile-button{
    width:100%;
    padding:11px 16px;
    border-radius:14px;
    border:1px solid rgba(0,240,255,0.32);
    background:linear-gradient(135deg, rgba(0,240,255,0.18), rgba(138,79,255,0.28));
    color:#f8fafc;
    font-weight:700;
    letter-spacing:0.4px;
    text-align:center;
    cursor:pointer;
    transition:all 0.2s ease;
    text-decoration:none;
}

.bar-backroom-tile-button:hover:not(:disabled){
    border-color:rgba(0,240,255,0.55);
    box-shadow:0 0 18px rgba(0,240,255,0.32);
}

.bar-backroom-tile-button:disabled{
    cursor:not-allowed;
    opacity:0.6;
    border-color:rgba(148,163,184,0.3);
    background:rgba(148,163,184,0.18);
}

.bar-backroom-tile.is-empty .bar-backroom-tile-icon{
    background:rgba(148,163,184,0.18);
    color:rgba(203,213,225,0.85);
    border-color:rgba(148,163,184,0.32);
}

.bar-backroom-tile.is-empty .bar-backroom-tile-button{
    background:rgba(148,163,184,0.18);
}

.bar-backroom-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
    z-index:3000;
}

.bar-backroom-modal:target{
    display:flex;
}

.bar-backroom-modal-backdrop{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center, rgba(10,14,26,0.9), rgba(6,8,16,0.96));
    backdrop-filter:blur(18px);
}

.bar-backroom-modal-dialog{
    position:relative;
    z-index:1;
    width:min(840px, 100%);
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:26px;
    border-radius:28px;
    background:linear-gradient(135deg, rgba(12,18,32,0.94), rgba(8,14,26,0.96));
    border:1px solid rgba(0,240,255,0.22);
    box-shadow:0 36px 72px rgba(0,0,0,0.6), 0 0 40px rgba(0,240,255,0.18);
}

.bar-backroom-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:44px;
    height:44px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(255,204,51,0.26);
    color:rgba(255,204,51,0.92);
    text-decoration:none;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.bar-backroom-modal-close:hover{
    transform:translateY(-2px);
    box-shadow:0 0 20px rgba(255,204,51,0.26);
}

.bar-backroom-modal-header{
    display:flex;
    gap:16px;
    align-items:center;
}

.bar-backroom-modal-header h3{
    font-size:1.4rem;
    color:#f8fafc;
}

.bar-backroom-modal-header p{
    color:rgba(203,213,225,0.76);
    font-size:0.95rem;
    margin:4px 0 0;
}

.bar-backroom-modal-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,240,255,0.22);
    border:1px solid rgba(0,240,255,0.32);
    color:var(--neon);
    font-size:1.8rem;
}

.bar-backroom-modal-media{
    border-radius:22px;
    overflow:hidden;
    position:relative;
    aspect-ratio:16 / 9;
    background:rgba(4,6,12,0.85);
    border:1px solid rgba(0,240,255,0.18);
    box-shadow:inset 0 0 28px rgba(0,240,255,0.12);
}

.bar-backroom-modal-media video,
.bar-backroom-modal-media img,
.bar-backroom-modal-media iframe{
    width:100%;
    height:100%;
    object-fit:cover;
}

.bar-backroom-modal-media iframe{
    border:0;
    background:#000;
}

.bar-backroom-modal-footer{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.bar-backroom-modal-footer p{
    color:rgba(203,213,225,0.78);
    font-size:0.95rem;
}

.bar-backroom-modal-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.bar-backroom-modal-primary,
.bar-backroom-modal-secondary{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    border-radius:16px;
    font-weight:700;
    letter-spacing:0.4px;
    text-decoration:none;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.bar-backroom-modal-primary{
    background:linear-gradient(135deg, rgba(255,204,51,0.3), rgba(255,126,76,0.26));
    border:1px solid rgba(255,204,51,0.35);
    color:#0f172a;
}

.bar-backroom-modal-secondary{
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(0,240,255,0.24);
    color:rgba(226,232,240,0.92);
}

.bar-backroom-modal-primary:hover,
.bar-backroom-modal-secondary:hover{
    transform:translateY(-2px);
    box-shadow:0 0 18px rgba(0,240,255,0.22);
}

.bar-backroom-modal-primary i{
    color:inherit;
}

.bar-backroom-tile-button-secondary{
    margin-top:8px;
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(0,240,255,0.28);
}

.bar-backroom-tile-button-secondary:hover{
    border-color:rgba(0,240,255,0.5);
    box-shadow:0 0 18px rgba(0,240,255,0.22);
}

@media (max-width: 992px){
    .bar-backroom-modal-dialog{
        padding:22px;
    }

    .bar-backroom-modal-media{ aspect-ratio: 4 / 3; }
}

@media (max-width: 720px){
    .bar-backroom-modal{
        padding:30px 16px;
    }

    .bar-backroom-modal-dialog{
        gap:16px;
    }

    .bar-backroom-modal-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .bar-backroom-modal-primary,
    .bar-backroom-modal-secondary{
        justify-content:center;
    }
}

@media (prefers-reduced-motion: reduce){
    .bar-backroom-modal,
    .bar-backroom-modal-dialog,
    .bar-backroom-modal-primary,
    .bar-backroom-modal-secondary,
    .bar-backroom-modal-close{
        transition:none;
    }
}

@media (max-width: 992px){
    .bar-backroom-grid{
        grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px){
    .bar-hero{
        padding:24px;
    }

    .bar-card{
        padding:18px;
    }

    .bar-card-meta{
        grid-template-columns:repeat(1, minmax(0, 1fr));
    }

    .bar-backroom{
        gap:22px;
    }

    .bar-backroom-warning{
        flex-direction:column;
        align-items:flex-start;
    }

    .bar-backroom-warning-icon{
        width:52px;
        height:52px;
        font-size:1.6rem;
    }

    .bar-backroom-door{
        width:100%;
        text-align:center;
    }

    .bar-backroom-grid{
        grid-template-columns:repeat(1, minmax(0, 1fr));
    }
}

@media (max-width: 576px){
    .bar-backroom-tile{
        padding:18px;
    }

    .bar-backroom-tile-preview{
        min-height:120px;
    }
}

.attack-control-panel{
    display:grid;
    gap:24px;
    padding:26px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(10,14,28,0.85), rgba(20,18,42,0.88));
    border:1px solid rgba(0,240,255,0.18);
    box-shadow:0 24px 48px rgba(0,0,0,0.45);
}

.attack-loadout{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.attack-loadout-header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.attack-loadout-header h2{
    font-family:'Orbitron', sans-serif;
    font-size:1.6rem;
    color:#f8fafc;
}

.loadout-summary-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:999px;
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.4px;
    background:rgba(0,240,255,0.15);
    border:1px solid rgba(0,240,255,0.3);
    color:#e0f2fe;
    text-transform:uppercase;
}

.attack-loadout-options{
    display:grid;
    gap:18px;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.attack-loadout-select{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.attack-loadout-label{
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:rgba(226,232,240,0.75);
}

/* --- Home Dashboard --- */
.hidden{ display:none !important; }

.home-dashboard{
    display:flex;
    flex-direction:column;
    gap:32px;
    padding-bottom:80px;
}

.home-hero{
    display:flex;
    flex-direction:column;
    gap:28px;
    padding:32px;
    background:linear-gradient(135deg, rgba(12,18,36,0.86), rgba(20,14,46,0.88));
    border:1px solid rgba(0,240,255,0.18);
    border-radius:28px;
    box-shadow:0 22px 48px rgba(2,8,24,0.55), 0 0 28px rgba(0,240,255,0.12);
    position:relative;
    overflow:hidden;
}

.home-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 85% 15%, rgba(0,240,255,0.16), transparent 45%),
               radial-gradient(circle at 15% 80%, rgba(138,79,255,0.12), transparent 55%);
    pointer-events:none;
    z-index:0;
}

.hero-overview{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:24px;
    position:relative;
    z-index:1;
}

.hero-avatar{
    width:120px;
    height:120px;
    border-radius:28px;
    padding:4px;
    background:linear-gradient(135deg, rgba(0,240,255,0.65), rgba(255,204,51,0.55));
    box-shadow:0 0 24px rgba(0,240,255,0.25);
}

.hero-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:22px;
}

.hero-copy{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.hero-kicker{
    font-size:0.85rem;
    letter-spacing:1px;
    text-transform:uppercase;
    color:rgba(203,213,225,0.75);
}

.hero-copy h1{
    font-family:'Orbitron', sans-serif;
    font-size:2.1rem;
    color:#f8fafc;
    text-shadow:0 0 18px rgba(0,240,255,0.25);
}

.hero-subtitle{
    font-size:1rem;
    color:rgba(226,232,240,0.7);
}

.hero-progress{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    width:min(100%, 320px);
}

.hero-progress-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.6px;
    text-transform:uppercase;
    color:rgba(203,213,225,0.8);
}

.hero-progress-label i{ color:var(--gold); }

.hero-progress-track{
    width:100%;
    height:10px;
    border-radius:999px;
    background:rgba(8,18,30,0.65);
    overflow:hidden;
}

.hero-progress-fill{
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, rgba(0,240,255,0.85), rgba(138,79,255,0.85));
    transition:width 0.4s ease;
}

.hero-progress-meta{
    font-size:0.78rem;
    color:rgba(203,213,225,0.7);
    letter-spacing:0.4px;
}

.hero-kpis{
    position:relative;
    z-index:1;
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.hero-kpi{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:16px 18px;
    border-radius:18px;
    background:rgba(8,12,24,0.72);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 12px 26px rgba(0,0,0,0.35);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-kpi:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,0.45);
}

.hero-kpi .label{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:rgba(203,213,225,0.7);
}

.hero-kpi .value{
    font-size:1.35rem;
    font-weight:700;
    color:#f8fafc;
}

.hero-kpi .hint{
    font-size:0.78rem;
    color:rgba(203,213,225,0.65);
}

.hero-alert{
    position:relative;
    z-index:2;
    padding:16px 20px;
    border-radius:18px;
    border:1px solid rgba(72,199,142,0.4);
    background:linear-gradient(135deg, rgba(36,64,48,0.85), rgba(24,86,64,0.85));
    color:#d1fae5;
    font-weight:600;
    box-shadow:0 16px 32px rgba(14,64,36,0.4);
}

.home-grid{
    display:grid;
    gap:28px;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}

.home-panel{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:26px;
    background:linear-gradient(135deg, rgba(10,14,28,0.82), rgba(6,14,28,0.9));
    border-radius:26px;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 20px 38px rgba(0,0,0,0.45);
    position:relative;
    overflow:hidden;
}

.home-panel::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at 12% 12%, rgba(0,240,255,0.08), transparent 40%),
               radial-gradient(circle at 82% 88%, rgba(138,79,255,0.08), transparent 42%);
    z-index:0;
}

.home-panel > *{
    position:relative;
    z-index:1;
}

.home-panel.wide{ grid-column:1 / -1; }

.panel-heading{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.panel-heading h2{
    font-family:'Orbitron', sans-serif;
    font-size:1.35rem;
    color:#f8fafc;
    letter-spacing:0.8px;
}

.panel-heading p{
    font-size:0.9rem;
    color:rgba(203,213,225,0.7);
}

.broadcast-panel .panel-heading h2{
    display:flex;
    align-items:center;
    gap:12px;
}

.broadcast-panel .panel-heading h2::before{
    content:"";
    width:12px;
    height:12px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(0,240,255,0.9), rgba(138,79,255,0.9));
    box-shadow:0 0 14px rgba(0,240,255,0.5);
}

.broadcast-ticker{
    position:relative;
    border-radius:22px;
    border:1px solid rgba(0,240,255,0.14);
    background:rgba(6,12,24,0.82);
    box-shadow:inset 0 0 28px rgba(0,240,255,0.05);
    padding:14px 12px;
    overflow:hidden;
}

.broadcast-ticker::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:22px;
    border:1px solid rgba(138,79,255,0.08);
    pointer-events:none;
}

.ticker-track{
    display:flex;
    gap:16px;
    padding:4px 6px 2px;
    scroll-snap-type:x mandatory;
    flex-wrap:nowrap;
    width:max-content;
    min-width:100%;
    overflow:hidden;
    will-change:transform;
}

.broadcast-ticker:not([data-animated="true"]) .ticker-track{
    overflow-x:auto;
}

.broadcast-ticker[data-animated="true"] .ticker-track{
    animation:ticker-scroll var(--ticker-animation-duration, 30s) linear infinite;
}

.broadcast-ticker[data-animated="true"]:hover .ticker-track,
.broadcast-ticker[data-animated="true"] .ticker-track:hover,
.broadcast-ticker[data-animated="true"] .ticker-track:focus{
    animation-play-state:paused;
}

.broadcast-ticker[data-animated="true"] .ticker-track,
.broadcast-ticker[data-animated="true"] .ticker-item{
    scroll-snap-align:none;
}

@keyframes ticker-scroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(var(--ticker-animation-distance, -50%));}
}

.ticker-track::-webkit-scrollbar{
    height:6px;
}

.ticker-track::-webkit-scrollbar-thumb{
    background:rgba(0,240,255,0.22);
    border-radius:999px;
}

.ticker-item{
    flex:0 0 320px;
    min-height:86px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 16px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(12,18,32,0.85);
    box-shadow:0 14px 32px rgba(0,0,0,0.42);
    scroll-snap-align:start;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.ticker-item:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,0.5);
}

.ticker-icon{
    width:46px;
    height:46px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgba(0,240,255,0.22), rgba(138,79,255,0.22));
    color:#f8fafc;
    box-shadow:0 0 16px rgba(0,240,255,0.18);
    font-size:1.35rem;
}

.ticker-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.ticker-headline{
    font-weight:600;
    font-size:0.95rem;
    color:#f8fafc;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ticker-summary{
    font-size:0.8rem;
    color:rgba(203,213,225,0.7);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ticker-meta{
    margin-left:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(203,213,225,0.68);
}

.ticker-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(0,240,255,0.12);
    border:1px solid rgba(0,240,255,0.28);
    color:rgba(224,242,255,0.88);
    font-weight:600;
}

.ticker-time{
    font-size:0.72rem;
    color:rgba(148,163,184,0.75);
}

.ticker-item.tone-sponsor{
    border-color:rgba(255,204,51,0.35);
    background:linear-gradient(135deg, rgba(64,52,18,0.85), rgba(20,20,32,0.82));
}

.ticker-item.tone-sponsor .ticker-tag{
    background:rgba(255,204,51,0.16);
    border-color:rgba(255,204,51,0.38);
    color:rgba(255,244,214,0.9);
}

.ticker-item.tone-race{
    border-color:rgba(0,240,255,0.32);
    background:linear-gradient(135deg, rgba(12,44,64,0.88), rgba(10,20,34,0.85));
}

.ticker-item.tone-race .ticker-tag{
    background:rgba(0,240,255,0.18);
    border-color:rgba(0,240,255,0.4);
}

.ticker-item.tone-crime{
    border-color:rgba(255,99,132,0.3);
    background:linear-gradient(135deg, rgba(64,16,28,0.88), rgba(28,8,18,0.85));
}

.ticker-item.tone-crime .ticker-tag{
    background:rgba(255,99,132,0.18);
    border-color:rgba(255,99,132,0.4);
    color:rgba(252,231,243,0.9);
}

.ticker-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    padding:20px;
    border-radius:18px;
    border:1px dashed rgba(0,240,255,0.35);
    color:rgba(203,213,225,0.75);
    font-size:0.9rem;
}

.ticker-empty i{
    color:var(--neon);
    font-size:1.4rem;
}

.ticker-track:focus-visible,
.ticker-item:focus-visible{
    outline:2px solid var(--neon);
    outline-offset:4px;
}

@media (max-width: 768px){
    .home-panel.broadcast-panel{gap:16px; padding:22px; border-radius:22px;}
    .broadcast-ticker{padding:12px 10px; border-radius:18px;}
    .broadcast-ticker::after{border-radius:18px;}
    .ticker-track{
        gap:10px;
        padding:2px 4px;
        min-width:100%;
        width:auto;
        overflow-x:auto;
        overflow-y:visible;
        scroll-snap-type:x mandatory;
    }
    .ticker-track::-webkit-scrollbar{height:4px;}
    .broadcast-ticker[data-animated="true"] .ticker-track{animation:ticker-scroll var(--ticker-animation-duration, 26s) linear infinite;}
    .ticker-item{
        flex:0 0 min(320px, calc(100vw - 64px));
        max-width:calc(100vw - 64px);
        min-height:96px;
        align-items:flex-start;
        gap:10px;
        padding:12px 14px;
    }
    .ticker-icon{
        width:42px;
        height:42px;
        font-size:1.15rem;
        border-radius:14px;
    }
    .ticker-copy{gap:3px;}
    .ticker-headline{
        font-size:0.88rem;
        white-space:normal;
    }
    .ticker-summary{
        font-size:0.74rem;
        white-space:normal;
    }
    .ticker-meta{
        margin-left:0;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        width:100%;
        gap:6px;
    }
    .ticker-tag{padding:3px 9px; font-size:0.7rem;}
    .ticker-time{font-size:0.68rem;}
}

@media (max-width: 480px){
    .home-panel.broadcast-panel{padding:18px; border-radius:20px;}
    .broadcast-ticker{padding:10px 9px; border-radius:16px;}
    .broadcast-ticker::after{border-radius:16px;}
    .ticker-track{gap:8px; padding:2px;}
    .ticker-item{
        flex:0 0 min(300px, calc(100vw - 52px));
        max-width:calc(100vw - 52px);
        min-height:94px;
        padding:11px 12px;
        border-radius:16px;
    }
    .ticker-icon{width:38px; height:38px; font-size:1rem; border-radius:12px;}
    .ticker-headline{font-size:0.86rem;}
    .ticker-summary{font-size:0.72rem;}
    .ticker-tag{font-size:0.64rem; padding:3px 7px;}
    .ticker-time{font-size:0.64rem;}
}

.stat-card-grid{
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}

.stat-card{
    display:flex;
    gap:16px;
    align-items:center;
    padding:16px 18px;
    border-radius:20px;
    background:rgba(8,12,24,0.78);
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:0 12px 28px rgba(0,0,0,0.45);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,0.5); }

.stat-card-icon{
    width:46px;
    height:46px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.05);
    font-size:1.4rem;
    color:var(--neon);
}

.stat-card-body{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.stat-card-label{
    font-size:0.75rem;
    letter-spacing:0.8px;
    text-transform:uppercase;
    color:rgba(203,213,225,0.68);
}

.stat-card-value{
    font-size:1.3rem;
    font-weight:700;
    color:#f8fafc;
}

.resource-bars{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.resource-row{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.06);
}

.resource-meta{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}

.resource-meta i{ color:var(--neon); font-size:1.1rem; }

.resource-count{
    margin-left:auto;
    font-size:0.85rem;
    color:rgba(203,213,225,0.7);
}

.resource-overflow{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-left:8px;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(0,240,255,0.18);
    border:1px solid rgba(0,240,255,0.25);
    font-size:0.7rem;
    font-weight:600;
    color:#f8fafc;
}

.resource-track{
    width:100%;
    height:10px;
    background:rgba(8,18,30,0.65);
    border-radius:999px;
    overflow:hidden;
}

.resource-fill{
    height:100%;
    border-radius:inherit;
    transition:width 0.4s ease;
}

.link-section{ display:flex; flex-direction:column; gap:14px; }

.link-section h3{
    font-size:0.95rem;
    letter-spacing:0.8px;
    text-transform:uppercase;
    color:rgba(203,213,225,0.75);
}

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

.link-card{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 18px;
    background:rgba(8,12,24,0.78);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:18px;
    color:inherit;
    text-decoration:none;
    box-shadow:0 16px 32px rgba(0,0,0,0.4);
    position:relative;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.link-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 42px rgba(0,0,0,0.5);
    border-color:rgba(0,240,255,0.35);
}

.link-icon{
    width:44px;
    height:44px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.06);
    color:var(--neon);
    font-size:1.4rem;
}

.link-body{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
}

.link-label{
    font-size:1rem;
    color:#f8fafc;
    font-weight:600;
}

.link-description{
    font-size:0.85rem;
    color:rgba(203,213,225,0.7);
}

.link-chevron{
    font-size:1.5rem;
    color:rgba(255,255,255,0.35);
}

.asset-summary{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.asset-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.1);
    font-size:0.85rem;
    font-weight:600;
    color:rgba(226,232,240,0.85);
}
.asset-pill.residence{
    background:var(--residence-accent-bg);
    border-color:var(--residence-accent-border);
    color:var(--residence-accent-foreground);
}

.asset-pill.cta{
    border-color:rgba(0,240,255,0.35);
    background:rgba(0,240,255,0.15);
    color:#e0f2fe;
    cursor:pointer;
    transition:all 0.2s ease;
    text-decoration:none;
}

.asset-pill.cta:hover{
    background:rgba(0,240,255,0.25);
    box-shadow:0 0 18px rgba(0,240,255,0.28);
}

.asset-grid{
    display:grid;
    gap:18px;
    grid-template-columns:repeat(auto-fit, minmax(240px, 320px));
    justify-content:center;
}

.asset-card{
    display:flex;
    flex-direction:column;
    background:rgba(8,12,24,0.82);
    border-radius:22px;
    border:1px solid rgba(255,255,255,0.08);
    overflow:hidden;
    box-shadow:0 18px 36px rgba(0,0,0,0.45);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration:none;
    color:inherit;
}

.asset-card:hover{ transform:translateY(-4px); box-shadow:0 26px 48px rgba(0,0,0,0.55); }

.asset-card-media{
    aspect-ratio:16 / 9;
    max-height:220px;
    background:rgba(4,8,16,0.8);
}

.asset-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.asset-card-body{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px;
}

.asset-card-header{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.asset-type{
    align-self:flex-start;
    padding:2px 10px;
    border-radius:999px;
    font-size:0.7rem;
    letter-spacing:0.7px;
    text-transform:uppercase;
    background:rgba(0,240,255,0.1);
    border:1px solid rgba(0,240,255,0.18);
    color:rgba(224,242,254,0.85);
}

.asset-card-body h4{
    font-size:1.1rem;
    color:#f8fafc;
}

.asset-card-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    font-size:0.85rem;
    color:rgba(203,213,225,0.75);
}

.asset-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:2px 10px;
    border-radius:999px;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.6px;
}

.asset-status.ready{
    background:rgba(72,199,142,0.18);
    border:1px solid rgba(72,199,142,0.32);
    color:#bbf7d0;
}

.asset-status.pending{
    background:rgba(255,204,51,0.12);
    border:1px solid rgba(255,204,51,0.25);
    color:#fde68a;
}

.asset-card-footer{
    font-size:0.78rem;
    color:rgba(203,213,225,0.6);
}

.asset-card.asset-ready{
    border-color:rgba(72,199,142,0.28);
    box-shadow:0 22px 44px rgba(34,94,64,0.45);
}
.asset-card.asset-residence{
    border-color:var(--residence-accent-border);
    box-shadow:0 24px 48px rgba(88,28,250,0.32);
}
.asset-card.asset-residence .asset-status.ready{ background:var(--residence-accent-bg); border-color:var(--residence-accent-border-soft); color:var(--residence-accent-foreground); }

.empty-state{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:22px;
    border-radius:20px;
    border:1px dashed rgba(255,255,255,0.18);
    background:rgba(8,12,24,0.65);
    color:rgba(203,213,225,0.75);
}

.empty-state.small{ padding:16px; align-items:center; text-align:center; }

.home-action-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(0,240,255,0.35);
    background:rgba(0,240,255,0.12);
    color:#e0f2fe;
    font-size:0.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.8px;
    cursor:pointer;
    transition:all 0.2s ease;
    text-decoration:none;
}

.home-action-btn:hover{
    background:rgba(0,240,255,0.22);
    box-shadow:0 0 20px rgba(0,240,255,0.28);
    color:#f8fafc;
}

.spacecraft-card{
    display:flex;
    flex-direction:column;
    gap:18px;
    background:rgba(8,12,24,0.82);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 42px rgba(0,0,0,0.45);
}

.spacecraft-media{
    width:100%;
    aspect-ratio:16 / 9;
    background:radial-gradient(circle at center, rgba(0,240,255,0.15), transparent 65%);
    display:flex;
    align-items:center;
    justify-content:center;
}

.spacecraft-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.spacecraft-body{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:18px;
}

.spacecraft-body h3{
    font-size:1.2rem;
    color:#f8fafc;
}

.spacecraft-model{
    font-size:0.85rem;
    color:rgba(203,213,225,0.65);
}

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

.spacecraft-stat{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:10px 12px;
    border-radius:16px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.05);
}

.spacecraft-stat.compact{
    gap:4px;
    align-items:flex-start;
}

.spacecraft-stat .label{
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:rgba(203,213,225,0.68);
}

.spacecraft-stat .value{
    font-size:1.05rem;
    font-weight:600;
    color:#f8fafc;
}

.meter{
    width:100%;
    height:8px;
    border-radius:999px;
    background:rgba(8,18,30,0.7);
    overflow:hidden;
}

.meter-fill{
    height:100%;
    border-radius:inherit;
    transition:width 0.4s ease;
}

.meter-value{
    font-size:0.78rem;
    color:rgba(203,213,225,0.65);
}

.spacecraft-attachments{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:0.85rem;
    color:rgba(203,213,225,0.7);
}

.spacecraft-attachments ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.spacecraft-attachments li{
    padding:4px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
}

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

.log-column{
    display:flex;
    flex-direction:column;
    gap:16px;
    background:rgba(8,12,24,0.78);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:20px;
    padding:18px;
    box-shadow:0 18px 36px rgba(0,0,0,0.45);
}

.log-column-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.log-column-header h3{
    font-size:1rem;
    color:#f8fafc;
    font-weight:600;
}

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

.log-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:26px;
    height:26px;
    padding:0 8px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(255,76,76,0.92), rgba(255,126,76,0.92));
    color:#fff;
    font-size:0.75rem;
    font-weight:700;
    box-shadow:0 0 16px rgba(255,76,76,0.35);
}

.log-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:320px;
    overflow-y:auto;
    padding-right:6px;
}

.log-item{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.06);
    transition:border-color 0.25s ease, box-shadow 0.25s ease;
}

.log-item-unread{
    border-color:rgba(0,240,255,0.45);
    box-shadow:0 0 18px rgba(0,240,255,0.28);
}

.log-item-success{ border-color:rgba(72,199,142,0.35); background:rgba(72,199,142,0.12); }
.log-item-danger{ border-color:rgba(255,99,99,0.35); background:rgba(255,99,99,0.12); }
.log-item-combat{ position:relative; }

.log-title{
    font-size:0.95rem;
    font-weight:600;
    color:#f8fafc;
}

.log-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    font-size:0.78rem;
    color:rgba(203,213,225,0.7);
}

.log-tag{
    padding:2px 8px;
    border-radius:999px;
    background:rgba(0,240,255,0.12);
    border:1px solid rgba(0,240,255,0.2);
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:rgba(224,242,254,0.85);
}

.log-balance{
    font-weight:600;
    color:#fde68a;
}

.log-time{ margin-left:auto; font-style:italic; color:rgba(148,163,184,0.75); }

.tone-primary{ background:linear-gradient(135deg, rgba(0,240,255,0.24), rgba(0,168,255,0.32)); }
.tone-neutral{ background:linear-gradient(135deg, rgba(148,163,184,0.18), rgba(100,116,139,0.28)); }
.tone-cosmic{ background:linear-gradient(135deg, rgba(138,79,255,0.22), rgba(88,28,250,0.3)); }
.tone-warning{ background:linear-gradient(135deg, rgba(255,184,77,0.24), rgba(255,140,66,0.32)); }
.tone-gold{ background:linear-gradient(135deg, rgba(255,204,51,0.24), rgba(255,151,51,0.32)); }
.tone-danger{ background:linear-gradient(135deg, rgba(255,76,76,0.28), rgba(255,46,99,0.32)); }
.tone-success{ background:linear-gradient(135deg, rgba(72,199,142,0.28), rgba(16,185,129,0.32)); }
.tone-secondary{ background:linear-gradient(135deg, rgba(56,189,248,0.28), rgba(14,165,233,0.32)); }

.home-panel.stats-panel .stat-card-icon{ color:#0ea5e9; }
.home-panel.stats-panel .tone-warning .stat-card-icon{ color:#f97316; }
.home-panel.stats-panel .tone-gold .stat-card-icon{ color:#fbbf24; }
.home-panel.stats-panel .tone-cosmic .stat-card-icon{ color:#a855f7; }
.home-panel.stats-panel .tone-neutral .stat-card-icon{ color:#94a3b8; }

.resource-fill.tone-danger{ box-shadow:0 0 14px rgba(255,76,76,0.32); }
.resource-fill.tone-primary{ box-shadow:0 0 14px rgba(0,240,255,0.28); }
.resource-fill.tone-warning{ box-shadow:0 0 14px rgba(255,184,77,0.3); }
.resource-fill.tone-gold{ box-shadow:0 0 14px rgba(255,204,51,0.3); }

.meter-fill.tone-success{ box-shadow:0 0 12px rgba(72,199,142,0.3); }
.meter-fill.tone-cosmic{ box-shadow:0 0 12px rgba(138,79,255,0.3); }

@media (max-width: 900px){
    .home-hero{ padding:26px; }
    .hero-kpis{ grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
    .home-panel{ padding:22px; }
}

@media (max-width: 640px){
    .hero-overview{ flex-direction:column; align-items:flex-start; }
    .hero-avatar{ width:100px; height:100px; }
    .hero-copy h1{ font-size:1.7rem; }
    .home-grid{ grid-template-columns:1fr; }
    .log-columns{ grid-template-columns:1fr; }
    .asset-grid{ grid-template-columns:1fr; }
}

.attack-loadout-input{
    width:100%;
    padding:10px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(8,12,24,0.75);
    color:#f8fafc;
    font-weight:600;
    transition:border 0.2s ease, box-shadow 0.2s ease;
}

.attack-loadout-input:focus{
    outline:none;
    border-color:rgba(0,240,255,0.5);
    box-shadow:0 0 0 3px rgba(0,240,255,0.18);
}

.attack-loadout-helpers{
    display:grid;
    gap:10px;
}

.attack-loadout-copy{
    font-size:0.92rem;
    line-height:1.5;
    color:rgba(226,232,240,0.78);
}

.attack-filters{
    display:grid;
    gap:18px;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    align-items:center;
}

.attack-filter-label{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:rgba(226,232,240,0.7);
    margin-bottom:6px;
    font-weight:700;
}

.attack-search-input{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(7,12,24,0.7);
}

.attack-search-input i{
    color:rgba(0,240,255,0.6);
    font-size:1rem;
}

.attack-search-input input{
    flex:1 1 auto;
    background:transparent;
    border:none;
    color:#f8fafc;
    font-size:0.95rem;
}

.attack-search-input input::placeholder{
    color:rgba(148,163,184,0.75);
}

.attack-search-input input:focus{
    outline:none;
}

.attack-filter-toggles{
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
}

.attack-filter-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(8,12,24,0.6);
    font-size:0.82rem;
    cursor:pointer;
    transition:border 0.2s ease, box-shadow 0.2s ease;
}

.attack-filter-toggle input{
    width:16px;
    height:16px;
}

.attack-filter-toggle:hover{
    border-color:rgba(0,240,255,0.35);
    box-shadow:0 0 12px rgba(0,240,255,0.18);
}

.attack-targets{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.attack-targets-header h2{
    font-family:'Orbitron', sans-serif;
    font-size:1.5rem;
    color:#f8fafc;
}

.attack-spacecraft-note{
    padding:16px 18px;
    border-radius:18px;
    background:rgba(0,240,255,0.08);
    border:1px solid rgba(0,240,255,0.16);
    color:rgba(226,232,240,0.88);
    display:flex;
    flex-direction:column;
    gap:10px;
}

.attack-spacecraft-note strong{
    text-transform:uppercase;
    letter-spacing:1.2px;
    font-size:0.78rem;
    color:#f8fafc;
}

.attack-spacecraft-note ul{
    display:grid;
    gap:6px;
    padding-left:18px;
    font-size:0.9rem;
}

.attack-target-grid{
    display:grid;
    gap:20px;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.attack-card{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:20px 22px;
    border-radius:22px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 18px 36px rgba(0,0,0,0.35);
    transition:transform 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}

.attack-card:hover{
    transform:translateY(-4px);
    border-color:rgba(0,240,255,0.2);
    box-shadow:0 24px 48px rgba(0,0,0,0.4), 0 0 24px rgba(0,240,255,0.12);
}

.attack-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.attack-card-title h3{
    font-size:1.25rem;
    color:#f8fafc;
    margin-bottom:4px;
}

.attack-card-level{
    font-size:0.85rem;
    letter-spacing:0.4px;
    color:rgba(226,232,240,0.65);
}

.attack-card-health{
    min-width:120px;
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-end;
}

.attack-card-health .health-value{
    font-family:'Orbitron', sans-serif;
    font-size:1.1rem;
    color:#f8fafc;
}

.health-bar{
    width:100%;
    height:6px;
    border-radius:8px;
    background:rgba(255,255,255,0.08);
    overflow:hidden;
}

.health-bar span{
    display:block;
    height:100%;
    background:linear-gradient(90deg, rgba(0,240,255,0.8), rgba(138,79,255,0.8));
}

.attack-card-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.attack-card-badge{
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.8px;
    padding:4px 10px;
    border-radius:999px;
    font-weight:700;
    border:1px solid transparent;
}

.attack-card-badge-hospital{
    background:rgba(255,76,76,0.18);
    border-color:rgba(255,76,76,0.35);
    color:#fecaca;
}

.attack-card-badge-weak{
    background:rgba(255,204,51,0.14);
    border-color:rgba(255,204,51,0.35);
    color:#fef08a;
}

.attack-card-badge-cosmo{
    background:rgba(0,240,255,0.16);
    border-color:rgba(0,240,255,0.35);
    color:#a5f3fc;
}

.attack-card-badge-docked{
    background:rgba(148,163,184,0.16);
    border-color:rgba(148,163,184,0.28);
    color:rgba(226,232,240,0.75);
}

.attack-card-meta{
    display:grid;
    gap:14px;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
}

.attack-card-meta .meta-label{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:1.1px;
    color:rgba(203,213,225,0.65);
}

.attack-card-meta .meta-value{
    font-size:1rem;
    font-weight:600;
    color:#f8fafc;
}

.attack-card-meta small{
    display:block;
    font-size:0.75rem;
    color:rgba(203,213,225,0.6);
    margin-top:4px;
}

.attack-card-alert{
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,76,76,0.1);
    border-left:3px solid rgba(255,76,76,0.45);
    color:#fecaca;
    font-size:0.9rem;
}

.attack-card-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:auto;
}

.attack-card-actions .btn{
    width:100%;
    justify-content:center;
    padding:12px 16px;
    font-weight:700;
    letter-spacing:0.5px;
}

.attack-card-actions .btn[disabled]{
    opacity:0.45;
    cursor:not-allowed;
}

.attack-card-reason{
    font-size:0.78rem;
    color:rgba(226,232,240,0.7);
    line-height:1.4;
}

.attack-empty-state{
    padding:34px 24px;
    text-align:center;
    border-radius:22px;
    border:1px dashed rgba(148,163,184,0.4);
    background:rgba(8,12,24,0.55);
    color:rgba(203,213,225,0.75);
}

.attack-empty-state h3{
    font-size:1.2rem;
    color:#f8fafc;
    margin-bottom:6px;
}

.attack-history{
    display:flex;
    flex-direction:column;
    gap:16px;
}

@media (max-width: 768px){
    .attack-control-panel{
        padding:20px;
    }

    .attack-card{
        padding:18px;
    }

    .attack-card-health{
        min-width:0;
        width:100%;
        align-items:flex-start;
    }

    .attack-card-header{
        flex-direction:column;
        gap:10px;
    }

    .attack-card-health{
        align-items:flex-start;
    }

    .health-bar{
        width:100%;
    }
}
.gym-page{
    display:flex;
    flex-direction:column;
    gap:32px;
}
.gym-hero{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    padding:32px;
    border-radius:28px;
    background:linear-gradient(135deg, rgba(12,20,36,0.85), rgba(24,16,48,0.9));
    border:1px solid rgba(0,240,255,0.16);
    box-shadow:0 28px 60px rgba(0,0,0,0.55), 0 0 36px rgba(0,240,255,0.12);
    overflow:hidden;
}
.gym-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 10% 10%, rgba(0,240,255,0.22), transparent 55%),
               radial-gradient(circle at 85% 25%, rgba(255,204,51,0.18), transparent 60%);
    opacity:0.8;
    pointer-events:none;
}
.gym-hero-content{
    flex:1 1 320px;
    display:flex;
    flex-direction:column;
    gap:18px;
    position:relative;
    z-index:1;
}
.gym-eyebrow{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:0.75rem;
    font-weight:700;
    color:var(--gold);
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.gym-eyebrow::before{
    content:"";
    width:26px;
    height:2px;
    background:linear-gradient(90deg, var(--neon), transparent);
}
.gym-hero-content h1{
    font-family:'Orbitron', sans-serif;
    font-size:2.4rem;
    color:#f8fafc;
    text-shadow:0 6px 24px rgba(0,0,0,0.6);
}
.gym-hero-content p{
    max-width:520px;
    line-height:1.6;
    color:rgba(226,232,240,0.85);
}
.gym-energy-block{
    margin-top:8px;
    padding:18px;
    border-radius:18px;
    background:rgba(8,12,24,0.65);
    border:1px solid rgba(0,240,255,0.18);
    box-shadow:inset 0 0 24px rgba(0,0,0,0.45);
    display:flex;
    flex-direction:column;
    gap:12px;
}
.gym-energy-heading{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--muted);
}
.gym-energy-heading i{
    font-size:1.6rem;
    color:var(--neon);
    text-shadow:0 0 18px rgba(0,240,255,0.5);
}
.gym-energy-labels .label{
    display:block;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:1px;
    color:rgba(226,232,240,0.7);
}
.gym-energy-labels .value{
    font-size:1rem;
    font-weight:700;
    color:#f8fafc;
}
.gym-energy-meter{
    position:relative;
    height:14px;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.06);
}
.gym-energy-fill{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,240,255,0.8), rgba(142,84,233,0.85));
    box-shadow:0 0 18px rgba(0,240,255,0.45);
}
.gym-energy-hint,
.gym-energy-warning{
    font-size:0.85rem;
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(226,232,240,0.78);
}
.gym-energy-warning{
    color:#ffb347;
}
.gym-energy-warning i{
    color:#ff6b6b;
}
.gym-tier-summary{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.gym-tier-chip{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(0,240,255,0.16);
    border:1px solid rgba(0,240,255,0.25);
    color:#f8fafc;
    font-size:0.75rem;
    letter-spacing:0.8px;
    text-transform:uppercase;
}
.gym-tier-summary p{
    font-size:0.85rem;
    color:rgba(226,232,240,0.75);
}
.gym-tier-progress{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.8rem;
    color:rgba(226,232,240,0.7);
}
.gym-tier-progress .value{
    font-weight:700;
    color:#f8fafc;
}
.gym-hero-visual{
    flex:0 1 260px;
    position:relative;
    border-radius:24px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:0 12px 28px rgba(0,0,0,0.35);
    z-index:1;
}
.gym-hero-orb{
    position:absolute;
    width:200px;
    height:200px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,240,255,0.38) 0%, transparent 70%);
    filter:blur(0.5px);
}
.gym-hero-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0.75;
}
.gym-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:16px;
}
.gym-hero-actions .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:999px;
    box-shadow:0 18px 36px rgba(0,0,0,0.35);
}
.gym-hero-actions .btn i{ font-size:1.1rem; }
.gym-hero-actions .btn.btn-secondary{
    background:rgba(15,25,45,0.65);
    border:1px solid rgba(255,255,255,0.12);
    color:#e2e8f0;
}
.gym-boost-banners{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:14px;
}
.gym-boost-banner{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:12px;
    background:rgba(0,240,255,0.12);
    border:1px solid rgba(0,240,255,0.2);
    color:rgba(226,232,240,0.85);
    font-size:0.85rem;
    box-shadow:0 12px 28px rgba(0,0,0,0.28);
}
.gym-boost-banner i{
    color:var(--neon);
    text-shadow:0 0 12px rgba(0,240,255,0.4);
}

.gym-quicktrain{
    padding:32px;
    border-radius:26px;
    background:linear-gradient(135deg, rgba(12,24,42,0.85), rgba(20,12,46,0.78));
    border:1px solid rgba(0,240,255,0.12);
    box-shadow:0 28px 55px rgba(0,0,0,0.48);
    display:flex;
    flex-direction:column;
    gap:22px;
}
.gym-quicktrain-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}
.btn-link{
    background:transparent;
    border:1px solid rgba(0,240,255,0.18);
    color:rgba(156,224,255,0.92);
}
.btn-link:hover{
    background:rgba(0,240,255,0.12);
    color:#f8fafc;
}
.gym-section-actions{
    display:flex;
    align-items:center;
    gap:12px;
}
.gym-quicktrain-advanced{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid rgba(0,240,255,0.18);
    background:rgba(0,240,255,0.08);
    color:rgba(156,224,255,0.92);
    text-decoration:none;
    transition:background 0.2s ease, box-shadow 0.2s ease;
}
.gym-quicktrain-advanced:hover{
    background:rgba(0,240,255,0.18);
    box-shadow:0 16px 30px rgba(0,240,255,0.25);
}
.gym-quicktrain-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}
.gym-quicktrain-stat-picker{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
    gap:16px;
}
.gym-quicktrain-stat{ position:relative; }
.gym-quicktrain-stat input[type="radio"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.gym-quicktrain-stat label{
    display:flex;
    gap:12px;
    padding:16px 18px;
    border-radius:20px;
    border:1px solid rgba(148,163,184,0.18);
    background:linear-gradient(135deg, rgba(10,20,34,0.9), rgba(12,32,48,0.72));
    color:#dcecf6;
    cursor:pointer;
    transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.gym-quicktrain-stat label .icon{
    width:46px;
    height:46px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(0,240,255,0.16);
    color:var(--neon);
    box-shadow:0 0 20px rgba(0,240,255,0.22);
}
.gym-quicktrain-stat label .body{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.gym-quicktrain-stat label .title{
    font-weight:600;
    font-size:1rem;
    color:#f8fafc;
}
.gym-quicktrain-stat label .metric{ font-size:0.85rem; color:rgba(226,232,240,0.78); }
.gym-quicktrain-stat label .muted{ font-size:0.75rem; color:rgba(148,163,184,0.74); }
.gym-quicktrain-stat input[type="radio"]:checked + label{
    border-color:rgba(0,240,255,0.45);
    box-shadow:0 22px 38px rgba(0,240,255,0.18);
    transform:translateY(-2px);
}

.gym-quicktrain-controls{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    gap:24px;
}
.gym-quicktrain-intensity{ display:flex; flex-direction:column; gap:10px; }
.gym-quicktrain-intensity label{ font-weight:600; color:#f8fafc; }
.gym-quicktrain-intensity-inputs{ display:flex; gap:16px; align-items:center; }
.gym-quicktrain-intensity-inputs input[type="range"]{ flex:1; accent-color:var(--neon); }
.gym-quicktrain-intensity-inputs input[type="number"]{
    width:90px;
    padding:10px;
    border-radius:10px;
    border:1px solid rgba(148,163,184,0.24);
    background:rgba(15,25,45,0.82);
    color:#f8fafc;
}
.gym-quicktrain-intensity .hint{ font-size:0.78rem; color:rgba(148,163,184,0.78); }
.gym-quicktrain-toggles{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.quicktrain-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(15,25,45,0.75);
    border:1px solid rgba(148,163,184,0.18);
    color:rgba(226,232,240,0.85);
}
.quicktrain-toggle input{ accent-color:var(--neon); }
.quicktrain-toggle.disabled{ opacity:0.7; font-size:0.85rem; }

.gym-quicktrain-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
    gap:16px;
    padding:18px;
    border-radius:18px;
    background:rgba(12,24,40,0.85);
    border:1px solid rgba(0,240,255,0.12);
}
.gym-quicktrain-summary .label{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:rgba(148,163,184,0.75);
}
.gym-quicktrain-summary .value{
    display:block;
    margin-top:4px;
    font-size:1.1rem;
    font-weight:600;
    color:#f8fafc;
}

.btn-quicktrain{
    align-self:flex-start;
    border-radius:999px;
    padding:12px 24px;
    box-shadow:0 20px 34px rgba(0,0,0,0.45);
}
.btn-quicktrain i{ font-size:1.1rem; }
.gym-quicktrain-warning{
    font-size:0.85rem;
    color:#ffb347;
    display:flex;
    align-items:center;
    gap:6px;
}

.gym-training-advanced{ position:relative; }
.gym-training-details{
    border-radius:24px;
    border:1px solid rgba(0,240,255,0.12);
    background:linear-gradient(135deg, rgba(12,20,36,0.75), rgba(18,12,40,0.72));
    overflow:hidden;
}
.gym-training-details summary{
    list-style:none;
    cursor:pointer;
    padding:0;
}
.gym-training-details summary::-webkit-details-marker{ display:none; }
.gym-training-details summary .gym-section-header{
    padding:26px 32px;
}
.gym-training-details[open] summary .gym-section-header{
    border-bottom:1px solid rgba(0,240,255,0.12);
}
.gym-training-details-body{
    padding:26px 32px 32px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

@media (max-width: 900px){
    .gym-quicktrain{
        padding:24px;
        gap:18px;
    }
    .gym-quicktrain-controls{
        grid-template-columns:1fr;
    }
    .gym-quicktrain-intensity-inputs{ flex-wrap:wrap; }
    .gym-quicktrain-intensity-inputs input[type="number"]{ width:100px; }
    .btn-quicktrain{ width:100%; text-align:center; justify-content:center; }
}
.gym-flash{
    margin-top:-12px;
}
.gym-tier-section{
    padding-top:0;
}
.gym-tier-strip{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
}
.gym-tier-strip::-webkit-scrollbar{
    height:6px;
}
.gym-tier-strip::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.18);
    border-radius:999px;
}
.gym-tier-card{
    flex:0 0 240px;
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(8,12,24,0.72);
    box-shadow:0 18px 40px rgba(0,0,0,0.45);
    text-decoration:none;
    color:inherit;
    display:flex;
    flex-direction:column;
    gap:10px;
    position:relative;
    scroll-snap-align:start;
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.gym-tier-card.active{
    border-color:rgba(0,240,255,0.5);
    box-shadow:0 24px 48px rgba(0,0,0,0.55), 0 0 28px rgba(0,240,255,0.28);
    transform:translateY(-4px);
}
.gym-tier-card.locked{
    opacity:0.7;
    border-style:dashed;
    cursor:not-allowed;
}
.gym-tier-card.locked .gym-tier-status{
    color:rgba(255,204,51,0.75);
}
.gym-tier-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:rgba(226,232,240,0.6);
}
.gym-tier-badge{
    padding:2px 8px;
    border-radius:999px;
    background:rgba(255,204,51,0.18);
    color:var(--gold);
    font-weight:600;
}
.gym-tier-card-name{
    font-size:1.1rem;
    font-weight:700;
    color:#f8fafc;
}
.gym-tier-card-tagline{
    font-size:0.85rem;
    color:rgba(226,232,240,0.75);
    line-height:1.5;
}
.gym-tier-card-progress{
    position:relative;
    height:8px;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.06);
}
.gym-tier-card-progress .fill{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,240,255,0.9), rgba(142,84,233,0.85));
}
.gym-tier-status{
    font-size:0.75rem;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:rgba(226,232,240,0.8);
}
.gym-intensity-control{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:12px;
}
.gym-intensity-control label{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:rgba(226,232,240,0.65);
}
.gym-intensity-control select,
.gym-intensity-control input[type="number"]{
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:8px 10px;
    color:#f8fafc;
    font-size:0.9rem;
}
.gym-intensity-control select:disabled,
.gym-intensity-control input[type="number"]:disabled{
    opacity:0.5;
    cursor:not-allowed;
}
.gym-intensity-control input[type="number"]::-webkit-outer-spin-button,
.gym-intensity-control input[type="number"]::-webkit-inner-spin-button{
    appearance:none;
    margin:0;
}
.gym-intensity-control small{
    font-size:0.7rem;
    color:rgba(226,232,240,0.6);
}
.gym-energy-alert{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.8rem;
    color:rgba(255,204,51,0.9);
    background:rgba(255,204,51,0.14);
    border-radius:12px;
    padding:8px 12px;
    border:1px solid rgba(255,204,51,0.28);
}
.gym-next-tier-callout{
    margin-top:4px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.8rem;
    color:rgba(226,232,240,0.8);
}
.gym-next-tier-callout i{
    color:var(--neon);
}
.gym-section{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:0 4px;
}
.gym-section-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
}
.gym-section-header h2{
    font-family:'Orbitron', sans-serif;
    color:#f8fafc;
    font-size:1.6rem;
}
.gym-section-header p{
    color:rgba(226,232,240,0.75);
    margin-top:6px;
    max-width:520px;
    line-height:1.6;
}
.gym-section-pill{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:1px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(0,240,255,0.35);
    background:rgba(0,240,255,0.12);
    color:rgba(226,232,240,0.85);
}
.gym-section-pill i{
    color:var(--neon);
}
.gym-stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:18px;
}
.gym-stat-card{
    position:relative;
    padding:22px;
    border-radius:20px;
    background:rgba(8,12,24,0.65);
    border:1px solid rgba(255,255,255,0.07);
    box-shadow:0 18px 40px rgba(0,0,0,0.45);
    overflow:hidden;
}
.gym-stat-card::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:radial-gradient(circle at 20% 20%, var(--gym-accent, rgba(0,240,255,0.3)) 0%, transparent 70%);
    opacity:0.6;
    pointer-events:none;
}
.gym-stat-card > *{
    position:relative;
    z-index:1;
}
.gym-stat-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    background:rgba(0,0,0,0.35);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border:1px solid rgba(255,255,255,0.08);
}
.gym-stat-icon i{
    font-size:1.6rem;
    color:var(--gold);
    text-shadow:0 0 14px rgba(255,204,51,0.4);
}
.gym-stat-body h3{
    font-size:1.1rem;
    color:#f8fafc;
    margin-bottom:6px;
}
.gym-stat-value{
    font-size:1.8rem;
    font-weight:700;
    color:#f8fafc;
    text-shadow:0 8px 18px rgba(0,0,0,0.55);
}
.gym-stat-body p{
    margin-top:8px;
    font-size:0.9rem;
    color:rgba(226,232,240,0.7);
    line-height:1.5;
}
.gym-stat-progress{
    margin-top:16px;
    display:flex;
    align-items:center;
    gap:16px;
}
.gym-progress-ring{
    width:70px;
    height:70px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.gym-progress-ring svg{
    width:70px;
    height:70px;
    transform:rotate(-90deg);
}
.gym-progress-ring path{
    fill:none;
    stroke-width:4;
    stroke-linecap:round;
}
.gym-progress-ring path.bg{
    stroke:rgba(248,250,252,0.12);
}
.gym-progress-ring path.progress{
    stroke:var(--gym-accent, rgba(0,240,255,0.8));
    transition:stroke-dasharray 0.4s ease;
}
.gym-progress-ring span{
    position:absolute;
    font-size:0.8rem;
    font-weight:600;
    color:#f8fafc;
}
.gym-progress-meta{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:0.75rem;
    color:rgba(203,213,225,0.75);
}
.gym-progress-meta .blueprint{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.6px;
}
.gym-progress-meta .blueprint.locked{
    color:rgba(255,204,51,0.8);
}
.gym-progress-meta .blueprint.unlocked{
    color:rgba(46,204,113,0.85);
}
.gym-training-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:20px;
}
.gym-intensity-banner{
    padding:12px 16px;
    border-radius:14px;
    background:rgba(0,240,255,0.12);
    border:1px solid rgba(0,240,255,0.25);
    color:rgba(226,232,240,0.85);
    font-size:0.85rem;
    margin:6px 0 12px;
}
.gym-intensity-banner strong{
    color:#f8fafc;
}
.gym-training-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:22px;
    border-radius:22px;
    background:linear-gradient(160deg, rgba(8,12,24,0.92), rgba(20,18,40,0.88));
    border:1px solid rgba(0,240,255,0.14);
    box-shadow:0 18px 40px rgba(0,0,0,0.55), 0 0 28px rgba(0,240,255,0.08);
    overflow:hidden;
}
.gym-training-header{
    display:flex;
    align-items:flex-start;
    gap:16px;
}
.gym-training-header h3{
    font-size:1.3rem;
    color:#f8fafc;
    margin-bottom:6px;
}
.gym-training-header p{
    margin:0;
    font-size:0.85rem;
    color:rgba(226,232,240,0.78);
    line-height:1.5;
}
.gym-training-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,240,255,0.16);
    border:1px solid rgba(0,240,255,0.25);
    box-shadow:0 0 18px rgba(0,240,255,0.25);
    color:rgba(248,250,252,0.92);
    flex-shrink:0;
}
.gym-training-icon i{
    font-size:1.5rem;
    text-shadow:0 0 16px var(--gym-accent, rgba(0,240,255,0.75));
}
.gym-training-body{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    justify-content:space-between;
}
.gym-training-metric{
    min-width:140px;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:inset 0 0 24px rgba(0,0,0,0.35);
}
.gym-training-metric .label{
    display:block;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:rgba(203,213,225,0.7);
}
.gym-training-metric .value{
    font-size:1.4rem;
    font-weight:700;
    color:#f8fafc;
}
.gym-training-perks{
    list-style:none;
    margin:0;
    padding:0;
    flex:1 1 200px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.gym-training-perks li{
    position:relative;
    padding-left:22px;
    font-size:0.85rem;
    color:rgba(226,232,240,0.82);
}
.gym-training-perks li::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--gym-accent, rgba(0,240,255,0.8));
    box-shadow:0 0 10px rgba(0,240,255,0.5);
}
.gym-training-action{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.gym-training-card .btn{
    align-self:flex-start;
    padding:10px 18px;
    font-weight:600;
    letter-spacing:0.4px;
}
.gym-chit-pool{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:10px;
}
.gym-chit-pool .chit-option{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.78rem;
    color:rgba(226,232,240,0.8);
}
.gym-chit-pool .chit-option input{
    accent-color:var(--neon);
}
.gym-chit-pool .chit-option span i{
    color:var(--neon);
}
.gym-chit-pool .chit-empty{
    font-size:0.72rem;
    color:rgba(148,163,184,0.7);
}
.gym-history{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.gym-history-item{
    display:flex;
    gap:16px;
    padding:16px 18px;
    border-radius:18px;
    background:rgba(8,12,24,0.82);
    border:1px solid rgba(0,240,255,0.12);
    box-shadow:0 12px 32px rgba(0,0,0,0.45);
}
.gym-history-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    background:rgba(0,240,255,0.16);
    border:1px solid rgba(0,240,255,0.25);
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(248,250,252,0.92);
    box-shadow:0 0 16px rgba(0,240,255,0.25);
}
.gym-history-icon i{
    font-size:1.35rem;
    text-shadow:0 0 14px var(--gym-accent, rgba(0,240,255,0.8));
}
.gym-history-content{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.gym-history-title{
    font-weight:700;
    color:#f8fafc;
    font-size:1rem;
}
.gym-history-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.8rem;
    color:rgba(203,213,225,0.75);
}
.gym-history-meta .gain{
    color:rgba(46,204,113,0.9);
    font-weight:600;
}
.gym-history-meta .energy{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:rgba(0,240,255,0.85);
}
.gym-history-meta .time{
    color:rgba(148,163,184,0.8);
    font-style:italic;
}
.gym-history-meta .energy i{ color:inherit; }
.gym-history-item:hover{
    border-color:rgba(0,240,255,0.28);
    box-shadow:0 18px 40px rgba(0,0,0,0.55), 0 0 26px rgba(0,240,255,0.16);
}
.gym-crew-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:18px;
}
.gym-crew-card{
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(0,240,255,0.14);
    background:linear-gradient(150deg, rgba(12,18,32,0.9), rgba(24,20,44,0.85));
    display:flex;
    flex-direction:column;
    gap:14px;
    box-shadow:0 20px 45px rgba(0,0,0,0.5);
}
.gym-crew-card.locked{
    opacity:0.82;
    border-style:dashed;
}
.gym-crew-card header{
    display:flex;
    gap:12px;
    align-items:flex-start;
}
.gym-crew-card header i{
    font-size:1.6rem;
    color:var(--neon);
}
.gym-crew-card header h3{
    margin:0 0 4px;
    font-size:1.1rem;
    color:#f8fafc;
}
.gym-crew-card header p{
    margin:0;
    font-size:0.8rem;
    color:rgba(226,232,240,0.7);
}
.gym-crew-card dl{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin:0;
}
.gym-crew-card dl div{
    min-width:120px;
}
.gym-crew-card dt{
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.7px;
    color:rgba(148,163,184,0.8);
}
.gym-crew-card dd{
    margin:4px 0 0;
    font-size:0.85rem;
    color:rgba(226,232,240,0.9);
}
.gym-mission-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:18px;
}
.gym-mission-card{
    border-radius:20px;
    padding:20px;
    background:rgba(13,20,36,0.9);
    border:1px solid rgba(0,240,255,0.18);
    box-shadow:0 18px 42px rgba(0,0,0,0.5);
    display:flex;
    flex-direction:column;
    gap:12px;
}
.gym-mission-card.cooldown{
    opacity:0.75;
    border-style:dashed;
}
.gym-mission-card header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}
.gym-mission-card header h3{
    margin:0;
    color:#f8fafc;
    font-size:1.1rem;
}
.gym-mission-card .stat-tags{
    display:flex;
    gap:6px;
}
.gym-mission-card .tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:999px;
    font-size:0.75rem;
    font-weight:700;
    background:rgba(0,240,255,0.18);
    color:#f8fafc;
}
.gym-mission-card .tag.secondary{
    background:rgba(142,84,233,0.18);
}
.gym-mission-card p{
    margin:0;
    font-size:0.85rem;
    color:rgba(226,232,240,0.75);
}
.mission-meta{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:0.8rem;
    color:rgba(226,232,240,0.75);
}
.mission-meta li i{
    color:var(--neon);
    margin-right:6px;
}
.gym-mission-card footer{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:auto;
}
.gym-mission-card .attempts{
    font-size:0.72rem;
    color:rgba(148,163,184,0.8);
}
.gym-mission-card .cooldown-label{
    font-size:0.75rem;
    color:rgba(255,204,51,0.8);
}
.gym-mission-card .mission-action .btn{
    width:100%;
}
.gym-contract-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:18px;
}
.gym-contract-card{
    padding:18px;
    border-radius:18px;
    background:linear-gradient(160deg, rgba(16,18,36,0.92), rgba(26,20,50,0.88));
    border:1px solid rgba(0,240,255,0.16);
    display:flex;
    flex-direction:column;
    gap:12px;
    box-shadow:0 18px 40px rgba(0,0,0,0.48);
}
.gym-contract-card.status-completed{
    border-color:rgba(46,204,113,0.5);
}
.gym-contract-card .contract-header{
    display:flex;
    gap:12px;
    align-items:flex-start;
}
.gym-contract-card .contract-header i{
    font-size:1.4rem;
    color:var(--gold);
}
.gym-contract-card .contract-header h3{
    margin:0;
    font-size:1rem;
    color:#f8fafc;
}
.gym-contract-card .contract-header p{
    margin:4px 0 0;
    font-size:0.8rem;
    color:rgba(226,232,240,0.72);
}
.contract-progress{
    position:relative;
    height:18px;
    border-radius:12px;
    background:rgba(248,250,252,0.06);
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
    font-size:0.7rem;
    color:rgba(226,232,240,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
}
.contract-progress .fill{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,240,255,0.25), rgba(142,84,233,0.25));
}
.contract-progress span{
    position:relative;
    z-index:1;
}
.gym-contract-card .contract-footer{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    font-size:0.75rem;
    color:rgba(226,232,240,0.75);
}
.gym-seasonal-card{
    padding:20px;
    border-radius:20px;
    background:linear-gradient(160deg, rgba(20,20,44,0.9), rgba(16,28,52,0.92));
    border:1px solid rgba(142,84,233,0.28);
    box-shadow:0 20px 45px rgba(0,0,0,0.52);
    display:flex;
    flex-direction:column;
    gap:14px;
}
.gym-seasonal-card .seasonal-meta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    font-size:0.8rem;
    color:rgba(226,232,240,0.75);
}
.gym-seasonal-card .seasonal-progress{
    position:relative;
    height:16px;
    border-radius:12px;
    background:rgba(248,250,252,0.06);
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
}
.gym-seasonal-card .seasonal-progress .fill{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,240,255,0.25), rgba(255,204,51,0.22));
}
.gym-seasonal-card .seasonal-rewards{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.78rem;
    color:rgba(226,232,240,0.78);
}
.gym-alliance-history{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
}
.gym-alliance-history article{
    padding:16px;
    border-radius:16px;
    background:rgba(12,18,36,0.88);
    border:1px solid rgba(0,240,255,0.14);
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:0.8rem;
    color:rgba(226,232,240,0.78);
}
.gym-alliance-history article h3{
    margin:0;
    color:#f8fafc;
    font-size:0.95rem;
}
.gym-alliance-history .claimed{
    color:rgba(46,204,113,0.85);
    font-weight:600;
}
.gym-leaderboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:18px;
}
.gym-leaderboard-grid h3{
    font-size:1rem;
    color:#f8fafc;
    margin-bottom:8px;
}
.gym-leaderboard-grid ol{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:0.8rem;
    color:rgba(226,232,240,0.8);
}
.gym-leaderboard-grid li{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    background:rgba(0,0,0,0.24);
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.08);
}
.gym-leaderboard-grid li.empty{
    justify-content:center;
    color:rgba(148,163,184,0.65);
}
.gym-toast[data-toast-type="contract"]{
    border-color:rgba(46,204,113,0.45);
    background:linear-gradient(135deg, rgba(46,204,113,0.2), rgba(0,240,255,0.18));
}
.gym-toast[data-toast-type="success"]{
    border-color:rgba(46,204,113,0.45);
    background:linear-gradient(135deg, rgba(46,204,113,0.22), rgba(0,240,255,0.14));
}
.gym-toast[data-toast-type="error"]{
    border-color:rgba(255,107,107,0.48);
    background:linear-gradient(135deg, rgba(255,107,107,0.24), rgba(15,15,45,0.55));
}
.gym-toast[data-toast-type="blueprint"]{
    border-color:rgba(79,209,197,0.45);
    background:linear-gradient(135deg, rgba(79,209,197,0.24), rgba(0,240,255,0.18));
}
.gym-toast[data-toast-type="crew"]{
    border-color:rgba(142,84,233,0.45);
    background:linear-gradient(135deg, rgba(142,84,233,0.22), rgba(0,240,255,0.18));
}
.gym-toast[data-toast-type="seasonal"]{
    border-color:rgba(255,204,51,0.45);
    background:linear-gradient(135deg, rgba(255,204,51,0.22), rgba(0,240,255,0.18));
}
.gym-toast[data-toast-type="promotion"]{
    border-color:rgba(255,204,51,0.55);
    background:linear-gradient(135deg, rgba(255,204,51,0.24), rgba(0,240,255,0.18));
    box-shadow:0 0 22px rgba(255,204,51,0.35);
}
.gym-toast[data-toast-type="reward"]{
    border-color:rgba(138,79,255,0.5);
    background:linear-gradient(135deg, rgba(138,79,255,0.26), rgba(0,240,255,0.18));
    box-shadow:0 0 22px rgba(138,79,255,0.3);
}
@media (max-width: 768px){
    .gym-training-card{
        padding:18px;
    }
    .gym-stat-progress{
        align-items:flex-start;
    }
    .gym-training-body{
        flex-direction:column;
    }
    .gym-history-item{
        flex-direction:column;
    }
    .gym-history-icon{
        width:42px;
        height:42px;
    }
    .gym-crew-grid,
    .gym-mission-grid,
    .gym-contract-grid,
    .gym-alliance-history,
    .gym-leaderboard-grid{
        grid-template-columns:1fr;
    }
}
.gym-toast-stack {
    position: fixed;
    top: 160px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 2100;
    pointer-events: none;
}

.gym-toast,
.success-message.js-toast,
.error-message.js-toast {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: auto;
}

.gym-toast.visible,
.success-message.js-toast.visible,
.error-message.js-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.gym-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.22), rgba(142, 84, 233, 0.22));
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.45);
    color: #f8fafc;
    max-width: 320px;
}

.gym-toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 204, 51, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    box-shadow: 0 0 18px rgba(255, 204, 51, 0.3);
}

.gym-toast-body strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.gym-toast-body p {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.85);
    line-height: 1.4;
}

.gym-toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: rgba(226, 232, 240, 0.6);
    cursor: pointer;
    padding: 2px;
    border-radius: 2px;
    transition: color 0.2s ease;
}

.gym-toast-close:hover {
    color: rgba(226, 232, 240, 0.9);
}

.success-message.js-toast,
.error-message.js-toast {
    margin-top: 0;
    border-radius: 16px;
    padding: 14px 18px;
}

.success-message.js-toast {
    background: rgba(46, 204, 113, 0.18);
    border: 1px solid rgba(46, 204, 113, 0.35);
}

.error-message.js-toast {
    background: rgba(255, 107, 107, 0.18);
    border: 1px solid rgba(255, 107, 107, 0.28);
}
@media (max-width: 900px){
    .gym-hero{
        padding:24px;
    }
    .gym-hero-content h1{
        font-size:2rem;
    }
}
@media (max-width: 640px){
    .gym-hero{
        padding:20px;
    }
    .gym-hero-visual{
        flex-basis:100%;
        min-height:220px;
    }
    .gym-training-grid{
        grid-template-columns:1fr;
    }
    .gym-stat-grid{
        grid-template-columns:1fr;
    }
    .gym-section-header{
        flex-direction:column;
        align-items:flex-start;
    }
    .gym-section-pill{
        align-self:stretch;
        justify-content:center;
    }
}
.topbar .avatar-button{
    padding:0;
    border:none;
    background:transparent;
    display:flex;
    align-items:center;
    cursor:pointer;
    border-radius:50%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.topbar .avatar-button:focus-visible{
    outline:2px solid var(--neon);
    outline-offset:4px;
}
.topbar .avatar-button:hover{
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 16px rgba(0,240,255,0.25);
}
.topbar .avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(255,204,51,0.4);
    box-shadow: 0 0 16px rgba(255,204,51,0.24);
}
.topbar .avatar img{ width:100%; height:100%; object-fit:cover }
.topbar .user .name{
    font-weight:700;
    color:var(--gold);
    font-size:1rem;
    text-shadow: 0 0 12px rgba(255,204,51,0.3);
}

.user-menu{
    position:absolute;
    right:0;
    top:60px;
    width:280px;
    background: linear-gradient(180deg, rgba(18,11,32,0.96), rgba(6,12,20,0.96));
    border:2px solid rgba(255,204,51,0.24);
    border-radius:16px;
    padding:18px;
    box-shadow:0 18px 42px rgba(0,0,0,0.55), 0 0 32px rgba(0,240,255,0.14);
    display:none;
    flex-direction:column;
    gap:16px;
    z-index:2700;
    backdrop-filter: blur(14px);
}
.user-menu.open{ display:flex; }
.user-menu-stats{
    display:grid;
    gap:10px;
    grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
}
.user-menu-stat{
    background: linear-gradient(135deg, rgba(0,240,255,0.12), rgba(255,204,51,0.12));
    border:1px solid rgba(255,204,51,0.18);
    border-radius:12px;
    padding:10px;
    display:grid;
    grid-template-columns: 24px 1fr;
    grid-template-areas:
        'icon label'
        'icon value';
    gap:6px;
    align-items:center;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.25);
}
.user-menu-stat i{
    grid-area: icon;
    font-size:1.1rem;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255,204,51,0.32);
}
.user-menu-stat-label{
    grid-area: label;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:rgba(203,213,225,0.7);
}
.user-menu-stat-value{
    grid-area: value;
    font-size:0.9rem;
    font-weight:700;
    color: var(--muted);
}
.user-menu-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.user-menu-action{
    margin:0;
}
.user-menu-action .user-menu-link{
    width:100%;
}
.user-menu-link-button{
    cursor:pointer;
}
.user-menu-link-button:focus-visible{
    outline:2px solid var(--neon);
    outline-offset:3px;
}
.user-menu-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
.user-menu-legend{
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-top:1rem;
    padding-top:.75rem;
    border-top:1px solid rgba(255,255,255,0.08);
    font-size:.85rem;
    color:var(--muted);
}
.badge-legend-icon{
    font-size:1rem;
    line-height:1;
}
.badge-legend-copy{
    line-height:1.4;
}
    border-radius:12px;
    background: rgba(0,0,0,0.35);
    border:1px solid rgba(255,204,51,0.14);
    color: var(--muted);
    font-weight:600;
    text-decoration:none;
    transition: all 0.25s ease;
}
.user-menu-link i{ color: var(--neon); font-size:1rem; }
.user-menu-link:hover{
    color: var(--gold);
    border-color: rgba(255,204,51,0.35);
    box-shadow: 0 0 20px rgba(255,204,51,0.18);
}
.user-menu-link:hover i{ color: var(--gold); }

/* User Menu Header */
.user-menu-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:16px;
    margin-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.user-menu-avatar{
    width:48px;
    height:48px;
    border-radius:12px;
    overflow:hidden;
    border:2px solid rgba(0,240,255,0.3);
    flex-shrink:0;
}
.user-menu-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.user-menu-info{
    flex:1;
    min-width:0;
}
.user-menu-name{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:1.1rem;
    font-weight:600;
    color:#f8fafc;
}
.user-menu-name span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Redesigned Sponsor Marks */
.sponsor-marks-stat{
    background: linear-gradient(135deg, rgba(138,79,255,0.15), rgba(0,240,255,0.1));
    border:1px solid rgba(138,79,255,0.3);
    border-radius:12px;
    padding:12px 16px;
    margin:8px 0;
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
    overflow:hidden;
}
.sponsor-marks-stat::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 20% 80%, rgba(138,79,255,0.2), transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(0,240,255,0.15), transparent 50%);
    pointer-events:none;
}
.sponsor-marks-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, rgba(138,79,255,0.3), rgba(0,240,255,0.2));
    border:1px solid rgba(138,79,255,0.4);
    color:#e6d7ff;
    font-size:1.2rem;
    position:relative;
    z-index:1;
    box-shadow:0 0 16px rgba(138,79,255,0.3);
}
.sponsor-marks-content{
    flex:1;
    position:relative;
    z-index:1;
}
.sponsor-marks-label{
    font-size:0.85rem;
    color:rgba(230,215,255,0.8);
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-weight:600;
}
.sponsor-marks-value{
    font-size:1.2rem;
    font-weight:700;
    color:#f0e6ff;
    margin-top:2px;
}

.topbar-stats{
    position: relative;
    z-index: 1;
    display:none;
    flex-direction:column;
    gap:16px;
    padding:18px 22px;
    border-radius:22px;
    background: linear-gradient(135deg, rgba(8, 18, 36, 0.88), rgba(14, 10, 36, 0.82));
    border:1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 22px 52px rgba(0,0,0,0.55), inset 0 0 28px rgba(0,240,255,0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    width: min(1180px, 100%);
    margin: 0 auto;
    overflow:hidden;
}
.topbar-stats.open{
    display:flex;
}
.topbar-stats::before{
    content:"";
    position:absolute;
    inset:-60% -40% auto -40%;
    height:140%;
    background: radial-gradient(circle at 30% 25%, rgba(0, 240, 255, 0.16), transparent 62%),
                radial-gradient(circle at 85% 18%, rgba(138, 79, 255, 0.16), transparent 60%);
    opacity:0.7;
    pointer-events:none;
}
.topbar-quick-stats{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.quick-stat{
    flex:1 1 150px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    background: linear-gradient(135deg, rgba(0,240,255,0.08), rgba(255,204,51,0.08));
    border:1px solid rgba(255,204,51,0.14);
    box-shadow: inset 0 0 18px rgba(0,240,255,0.08);
}
.quick-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:10px;
    background: rgba(0,0,0,0.3);
    color: var(--gold);
    font-size:1.1rem;
    box-shadow: 0 0 12px rgba(255,204,51,0.18);
}
.quick-data{ display:flex; flex-direction:column; gap:2px; }
.quick-label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.6px; color:rgba(203,213,225,0.75); }
.quick-value{ font-size:0.95rem; font-weight:700; color:var(--muted); }

.topbar-resource-row{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:12px;
    width:100%;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,240,255,0.45) transparent;
}
.topbar-resource-row::-webkit-scrollbar{ height:6px; }
.topbar-resource-row::-webkit-scrollbar-track{ background: transparent; }
.topbar-resource-row::-webkit-scrollbar-thumb{ background: rgba(0,240,255,0.45); border-radius:999px; }
.topbar-resource-pill{
    display:flex;
}
.resource-track{
    position:relative;
    flex:1 1 auto;
    min-height:52px;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:8px 16px 8px 14px;
    background: linear-gradient(135deg, rgba(12, 20, 36, 0.95), rgba(8, 14, 28, 0.9));
    border:1px solid rgba(0, 240, 255, 0.18);
    box-shadow: inset 0 0 28px rgba(0, 240, 255, 0.08), 0 16px 34px rgba(0,0,0,0.55);
    overflow:hidden;
    cursor:pointer;
}
.resource-track::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background: radial-gradient(circle at 25% 20%, rgba(0,240,255,0.16), transparent 55%),
                radial-gradient(circle at 85% 30%, rgba(138,79,255,0.14), transparent 58%);
    pointer-events:none;
    z-index:0;
}
.resource-track:focus-visible{
    outline:2px solid rgba(255, 204, 51, 0.65);
    outline-offset:4px;
}
.resource-track.resource-static{
    cursor:default;
}
.resource-track.resource-static:focus-visible{
    outline:1px solid rgba(255,255,255,0.32);
}
.resource-fill{
    position:absolute;
    inset:0;
    border-radius:inherit;
    transition: width 0.4s ease;
    opacity:0.95;
    filter: saturate(1.1);
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.22);
    mix-blend-mode: screen;
    z-index:1;
}
.resource-text{
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    pointer-events:none;
    color:#e6f6ff;
}
.resource-icon{
    width:32px;
    height:32px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(0, 118, 255, 0.22));
    border:1px solid rgba(0, 240, 255, 0.32);
    box-shadow:0 0 16px rgba(0,240,255,0.18);
    color:#f3fbff;
    flex-shrink:0;
}
.resource-icon i{
    font-size:1.05rem;
}
.resource-main{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    min-width:0;
}
.resource-label{
    font-size:0.66rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(207, 232, 255, 0.75);
}
.resource-value{
    font-size:0.9rem;
    font-weight:700;
    color:#f8fcff;
    text-shadow:0 0 12px rgba(0,0,0,0.45);
}
.resource-meta{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    flex-wrap:wrap;
    justify-content:flex-end;
    margin-left:auto;
}
.resource-percent{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:5px 10px;
    border-radius:999px;
    background: linear-gradient(135deg, rgba(255, 204, 51, 0.92), rgba(0, 240, 255, 0.92));
    color:#041224;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    box-shadow:0 0 18px rgba(255, 204, 51, 0.32);
}
.resource-overflow{
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    background: linear-gradient(135deg, rgba(138, 79, 255, 0.94), rgba(0, 240, 255, 0.9));
    border:1px solid rgba(138, 79, 255, 0.45);
    color:#f7f5ff;
    font-weight:700;
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    box-shadow:0 0 18px rgba(138, 79, 255, 0.36);
}

.resource-tooltip{
    position:absolute;
    bottom: calc(100% + 10px);
    left:50%;
    transform: translate(-50%, 6px);
    padding:6px 10px;
    border-radius:10px;
    background: rgba(8,16,28,0.92);
    border:1px solid rgba(0,240,255,0.35);
    color: var(--muted);
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.4px;
    white-space:nowrap;
    box-shadow:0 12px 24px rgba(0,0,0,0.45);
    opacity:0;
    pointer-events:none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index:10;
}
.resource-tooltip::after{
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    transform: translateX(-50%);
    width:10px;
    height:8px;
    background: inherit;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.resource-tooltip.visible{
    opacity:1;
    transform: translate(-50%, 0);
}

/* Metric Detail Modal */
.metric-detail-modal{
    position:fixed;
    inset:0;
    z-index:3000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.metric-detail-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(4px);
}
.metric-detail-dialog{
    position:relative;
    background:linear-gradient(135deg, rgba(13, 24, 44, 0.95), rgba(15, 12, 34, 0.9));
    border:2px solid rgba(0,240,255,0.25);
    border-radius:16px;
    box-shadow:0 20px 40px rgba(0,0,0,0.6), 0 0 40px rgba(0,240,255,0.15);
    max-width:320px;
    width:100%;
    overflow:hidden;
}
.metric-detail-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}
.metric-detail-header h3{
    margin:0;
    color:#f8fafc;
    font-size:1.1rem;
    font-weight:600;
}
.metric-detail-icon{
    width:32px;
    height:32px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,240,255,0.15);
    border:1px solid rgba(0,240,255,0.25);
    color:var(--neon);
    margin-right:12px;
}
.metric-detail-close{
    background:none;
    border:none;
    color:#cbd5e0;
    font-size:1.5rem;
    cursor:pointer;
    padding:0;
    width:32px;
    height:32px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s ease;
}
.metric-detail-close:hover{
    background:rgba(255,255,255,0.1);
    color:#f8fafc;
}
.metric-detail-body{
    padding:20px;
    text-align:center;
}
.metric-detail-value{
    font-size:1.4rem;
    font-weight:700;
    color:#f8fafc;
    margin-bottom:12px;
}
.metric-detail-description{
    color:#cbd5e0;
    font-size:0.9rem;
    line-height:1.4;
}

@media (max-width: 900px){
    .topbar-stats{ padding:16px 18px; }
    .topbar-resource-row{ gap:10px; }
    .topbar-resource-pill{ min-width:200px; }
    .quick-stat{ flex:1 1 130px; }
    .resource-track{ min-height:48px; padding:8px 14px; }
    .resource-text{ gap:10px; }
    .resource-icon{ width:28px; height:28px; }
    .resource-icon i{ font-size:0.95rem; }
    .resource-label{ font-size:0.62rem; }
    .resource-value{ font-size:0.84rem; }
    .resource-percent, .resource-overflow{ font-size:0.64rem; padding:4px 8px; }
}

@media (max-width: 720px){
    .topbar-stats{ padding:14px 14px; gap:14px; border-radius:18px; }
    .topbar-resource-row{ gap:8px; }
    .topbar-resource-pill{ min-width:200px; }
    .resource-track{ padding:8px 12px; min-height:46px; }
    .resource-text{ gap:8px; }
    .resource-main{ gap:2px; }
    .resource-label{ font-size:0.6rem; letter-spacing:0.1em; }
    .resource-value{ font-size:0.8rem; }
    .resource-meta{ gap:6px; }
    .resource-percent, .resource-overflow{ font-size:0.62rem; padding:4px 7px; }
}

@media (max-width: 720px){
    .topbar-stats{ 
        display:none; 
    }
    .topbar .topbar-stats-toggle{
        display:block;
    }
    .topbar-stats.open{ 
        display:block; 
    }
}

/* Topbar inline login dropdown */
#topbar-login{ position:relative; }
.login-dropdown{
    position:absolute;
    right:0;
    top:56px;
    min-width:300px;
    background: linear-gradient(180deg, rgba(18,11,32,0.96), rgba(6,12,20,0.96));
    border:2px solid rgba(255,204,51,0.28);
    padding:18px;
    border-radius:14px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 32px rgba(255,204,51,0.18);
    display:none; /* hidden by default, opened via JS */
    z-index:2600;
    backdrop-filter: blur(12px);
}
.login-dropdown .form-group{ margin-bottom:10px }
.login-dropdown .form-group label{
    color: var(--gold);
    font-weight:600;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.topbar-login-form input[type="text"],
.topbar-login-form input[type="password"]{
    width:100%;
    padding:10px;
    border-radius:10px;
    border:1px solid rgba(255,204,51,0.24);
    background: rgba(0,0,0,0.45);
    color:var(--muted);
    transition: all 0.3s ease;
}
.topbar-login-form input[type="text"]:focus,
.topbar-login-form input[type="password"]:focus{
    border-color: var(--neon);
    box-shadow: 0 0 16px rgba(0,240,255,0.22);
    outline:none;
}
.topbar-login-form .btn{
    padding:10px 14px;
    font-size:0.9rem;
    font-weight:700;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.topbar-login-form .btn i,
.topbar .user .btn i { color: var(--neon); }
.topbar .user .btn.btn-secondary i { color: var(--muted); }

@media (max-width: 720px){
    .login-dropdown{ right:12px; left:12px; top:66px; min-width:unset }
    .topbar{
        padding:16px 16px 14px;
        gap:14px;
    }
    .topbar .topbar-main{
        display:grid;
        padding:16px 18px;
        grid-template-columns:auto minmax(0,1fr);
        grid-template-areas:
            "brand user"
            "nav nav"
            "metrics metrics";
        align-items:center;
        gap:12px;
    }
    .topbar .brand{
        grid-area:brand;
        align-items:center;
    }
    .topbar .brand h1{ font-size:1rem; }
    .topbar .brand .brand-icon{ width:44px; height:44px; border-radius:12px; }
    .topbar .nav{
        grid-area:nav;
        display:flex;
        gap:8px;
        padding:4px 2px;
        overflow-x:auto;
        justify-content:flex-start;
    }
    .topbar .nav a{
        flex:0 0 auto;
    }
    .topbar .topbar-metrics{
        grid-area:metrics;
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:8px;
        padding-bottom:4px;
    }
    .topbar .topbar-metric{
        flex:0 0 auto;
    }
    .topbar .user{
        grid-area:user;
        min-width:0;
        justify-content:flex-end;
        flex-wrap:nowrap;
        gap:10px;
    }
    .topbar .user .name{
        font-size:0.95rem;
        max-width:220px;
        flex:1 1 auto;
        min-width:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        text-align:right;
    }
    .topbar .avatar{
        width:40px;
        height:40px;
    }
    .user-menu{
        position:fixed;
        top:88px;
        right:16px;
        left:16px;
        width:auto;
    }
}

/* ==========================
   CHAT DOCK
========================== */
.chat-emoji-unlock-form {
    display: flex;
    align-items: center;
    margin-top: 6px;
}
.chat-emoji-unlock-btn {
    background: linear-gradient(135deg, rgba(0,240,255,0.18), rgba(138,79,255,0.22));
    color: #f8fafc;
    border: 1px solid rgba(0,240,255,0.32);
    border-radius: 12px;
    padding: 7px 18px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    outline: none;
}
.chat-emoji-unlock-btn:hover {
    background: linear-gradient(135deg, rgba(0,240,255,0.28), rgba(138,79,255,0.32));
    border-color: rgba(0,240,255,0.55);
    box-shadow: 0 0 18px rgba(0,240,255,0.22);
}
.chat-emoji-unlock-btn:active {
    background: linear-gradient(135deg, rgba(0,240,255,0.22), rgba(138,79,255,0.28));
}
.chat-dock{
    position:fixed;
    bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    right:max(24px, calc(env(safe-area-inset-right, 0px) + 16px));
    left:auto;
    top:auto;
    width:360px;
    max-width:calc(100vw - 32px);
        /* Put closed dock below back-to-top (3600) but when opened raise above it. */
        z-index:3500;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    pointer-events:none;
    transition:transform 0.3s ease, opacity 0.3s ease;
}
.chat-dock-toggle{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid rgba(0,240,255,0.22);
    background:linear-gradient(135deg, rgba(0,240,255,0.18), rgba(9,18,42,0.82));
    color:var(--muted);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.08em;
    cursor:pointer;
    box-shadow:0 12px 24px rgba(0,0,0,0.35);
    transition:all 0.25s ease;
}
.chat-dock-toggle:hover{
    color:var(--gold);
    border-color:rgba(255,204,51,0.35);
    box-shadow:0 16px 34px rgba(0,0,0,0.45);
}
.chat-dock-toggle i{ transition:transform 0.2s ease; }
.chat-dock-open .chat-dock-toggle i{ transform:rotate(180deg); }
.chat-dock-unread{
    min-width:22px;
    height:22px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(255,76,76,0.95), rgba(255,132,76,0.95));
    color:#fff;
    font-size:0.75rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
}
.chat-dock-panel{
    pointer-events:auto;
    width:100%;
    margin-top:14px;
    border-radius:22px;
    border:1px solid rgba(0,240,255,0.28);
    background:linear-gradient(160deg, rgba(8,18,36,0.96), rgba(18,28,64,0.94));
    box-shadow:0 30px 60px rgba(0,0,0,0.6), 0 0 36px rgba(0,240,255,0.18);
    backdrop-filter:blur(22px);
    max-height:min(70vh, 560px);
    min-height:360px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.25s ease, transform 0.25s ease;
}
.chat-dock-panel.open{
    opacity:1;
    transform:translateY(0);
}
/* When dock is open, raise above the back-to-top control */
.chat-dock.chat-dock-open{
    z-index:3700;
}
/* Closed state: hide the panel and ensure dock only shows the toggle */
.chat-dock:not(.chat-dock-open){
    width:auto;
    max-width:none;
    right:max(24px, calc(env(safe-area-inset-right, 0px) + 16px));
    left:auto;
}
.has-bottom-bar .chat-dock{
    bottom:calc(var(--bottom-bar-height) + 40px + env(safe-area-inset-bottom, 0px));
}
.has-bottom-bar .chat-dock:not(.chat-dock-open){
    right:max(24px, calc(env(safe-area-inset-right, 0px) + 16px));
}
.chat-dock:not(.chat-dock-open) .chat-dock-panel{
    display:none;
}
.chat-dock-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    border-bottom:1px solid rgba(0,240,255,0.18);
}
.chat-dock-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:0.95rem;
    color:var(--gold);
}
.chat-dock-title i{ color:var(--neon); }
.chat-dock-actions{display:flex; align-items:center; gap:12px;}
.chat-dock-presence{
    font-size:0.8rem;
    color:var(--muted);
}
.chat-dock-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:12px;
    border:1px solid rgba(0,240,255,0.24);
    background:rgba(0,240,255,0.08);
    color:#cfeaff;
    cursor:pointer;
    transition:all 0.2s ease;
}
.chat-dock-close:hover,
.chat-dock-close:focus-visible{
    color:#fff;
    border-color:rgba(255,204,51,0.4);
    background:linear-gradient(135deg, rgba(255,204,51,0.16), rgba(8,18,36,0.8));
    box-shadow:0 0 16px rgba(255,204,51,0.22);
    outline:none;
}
.chat-dock-close i{font-size:0.9rem; pointer-events:none;}
.chat-dock-body{
    display:flex;
    gap:14px;
    padding:16px 18px;
    flex:1;
    overflow:hidden;
}
.chat-channel-tabs{
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 8px 0 4px 0;
    border-bottom: 1px solid rgba(0,240,255,0.08);
}
.chat-channel-tabs-icons .chat-channel-tab {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.5rem;
    padding: 4px 10px;
    border-radius: 8px 8px 0 0;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 36px;
    cursor: pointer;
    position: relative;
}
.chat-channel-tabs-icons .chat-channel-tab.active, .chat-channel-tabs-icons .chat-channel-tab:focus {
    background: linear-gradient(135deg, rgba(0,240,255,0.12), rgba(9,18,42,0.82));
    color: var(--gold);
    outline: none;
}
.chat-channel-tabs-icons .chat-channel-tab i {
    font-size: 1.5rem;
    pointer-events: none;
}
.chat-channel-tabs-icons .chat-channel-tab .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.chat-channel-empty{
    padding:12px;
    border-radius:14px;
    background:rgba(0,0,0,0.3);
    border:1px dashed rgba(0,240,255,0.24);
    color:var(--muted);
    text-align:center;
    font-size:0.85rem;
}
.chat-channel-tab{
    background:rgba(12,32,56,0.65);
    border:1px solid rgba(0,240,255,0.12);
    border-radius:999px;
    color:var(--muted);
    font-weight:600;
    padding:8px 14px;
    text-align:left;
    cursor:pointer;
    transition:all 0.2s ease;
}
.chat-channel-tab:hover,
.chat-channel-tab.active{
    color:var(--gold);
    border-color:rgba(255,204,51,0.32);
    background:rgba(255,204,51,0.12);
    box-shadow:0 0 16px rgba(255,204,51,0.24);
}
.chat-window{
    flex:1;
    background:rgba(8,22,38,0.78);
    border:1px solid rgba(0,240,255,0.24);
    border-radius:16px;
    padding:14px;
    overflow-y:auto;
    position:relative;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,240,255,0.35) transparent;
}
.chat-window::-webkit-scrollbar{ width:6px; }
.chat-window::-webkit-scrollbar-thumb{ background:rgba(0,240,255,0.45); border-radius:999px; }
.chat-message-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.chat-message{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:rgba(0,0,0,0.25);
    border-radius:14px;
    padding:12px 14px;
    border:1px solid rgba(0,240,255,0.12);
    box-shadow:0 10px 24px rgba(2,10,24,0.36);
}
.chat-avatar-link{
    display:block;
    width:100%;
    height:100%;
}
.chat-message-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
    border:1px solid rgba(0,240,255,0.28);
    background:linear-gradient(135deg, rgba(6,18,32,0.9), rgba(18,30,56,0.9));
    box-shadow:0 8px 20px rgba(0,0,0,0.45);
}
.chat-message-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.chat-message-content{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
    min-width:0;
}
.chat-message-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    font-size:0.76rem;
    color:var(--muted);
}
.chat-message-username{
    color:var(--gold);
    font-weight:600;
    text-decoration:none;
    transition:color 0.15s ease;
}
.chat-message-username:hover,
.chat-message-username:focus{
    color:#fff6c2;
    text-decoration:underline;
}
.chat-user-anon{
    cursor:default;
    pointer-events:none;
}
.chat-message-body{
    margin:0;
    color:#f8fafc;
    font-size:0.9rem;
    line-height:1.35;
    white-space:pre-wrap;
    word-break:break-word;
}
.chat-tooltip{
    position:absolute;
    z-index:4000;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(0,240,255,0.25);
    background:linear-gradient(140deg, rgba(12,24,48,0.96), rgba(26,44,84,0.94));
    color:#f1f5ff;
    box-shadow:0 20px 48px rgba(0,0,0,0.55);
    font-size:0.78rem;
    pointer-events:none;
    min-width:168px;
}
.chat-tooltip-name{
    font-weight:600;
    color:#fff8d6;
    margin-bottom:2px;
}
.chat-tooltip-meta{
    font-size:0.72rem;
    color:#b3caf5;
    letter-spacing:0.02em;
}
.chat-composer{
    border-top:1px solid rgba(0,240,255,0.22);
    padding:14px 20px 20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:linear-gradient(160deg, rgba(10,20,40,0.92), rgba(4,10,24,0.88));
    position:relative;
    box-shadow:0 -16px 36px rgba(0,0,0,0.5);
}
.chat-composer textarea{
    width:100%;
    min-height:64px;
    border-radius:12px;
    border:1px solid rgba(0,240,255,0.26);
    background:rgba(6,18,34,0.82);
    color:#f8fafc;
    padding:10px 12px;
    resize:vertical;
    font-size:0.92rem;
    line-height:1.4;
}
.chat-composer textarea:focus{
    outline:none;
    border-color:rgba(0,240,255,0.6);
    box-shadow:0 0 24px rgba(0,240,255,0.22);
}
.chat-composer-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}
.chat-composer-hint{
    font-size:0.75rem;
    color:#bcd7ff;
    letter-spacing:0.01em;
}
.chat-composer-controls{
    display:flex;
    align-items:center;
    gap:10px;
}
.chat-emoji-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(0,240,255,0.25);
    background:rgba(4,12,24,0.75);
    color:#f8fafc;
    transition:transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.chat-emoji-btn:hover,
.chat-emoji-btn:focus{
    border-color:rgba(0,240,255,0.55);
    box-shadow:0 0 12px rgba(0,240,255,0.25);
    transform:translateY(-1px);
    outline:none;
}
.chat-emoji-btn i{
    font-size:1.3rem;
}
.chat-send-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
    border:none;
    background:linear-gradient(135deg, rgba(0,240,255,0.65), rgba(90,160,255,0.75));
    box-shadow:0 16px 36px rgba(0,240,255,0.28);
    transition:transform 150ms ease, box-shadow 150ms ease;
}
.chat-send-btn:hover,
.chat-send-btn:focus{
    transform:translateY(-1px);
    box-shadow:0 22px 44px rgba(0,240,255,0.35);
    outline:none;
}
.chat-send-btn i{
    font-size:1.05rem;
}
.chat-emoji-picker{
    position:absolute;
    left:18px;
    right:auto;
    bottom:82px;
    min-width:260px;
    padding:14px;
    border-radius:16px;
    border:1px solid rgba(0,240,255,0.2);
    background:rgba(3,9,18,0.97);
    box-shadow:0 18px 48px rgba(0,0,0,0.45);
    display:none;
    flex-direction:column;
    gap:10px;
    z-index:25;
}
.chat-emoji-packs{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.chat-emoji-pack-tab{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(8,16,32,0.6);
    border:1px solid rgba(0,240,255,0.2);
    color:#dbeafe;
    cursor:pointer;
    font-size:0.85rem;
}
.chat-emoji-pack-tab .pack-icon{ font-size:1rem; line-height:1; }
.chat-emoji-pack-tab.active{
    background:linear-gradient(135deg, rgba(0,240,255,0.12), rgba(138,79,255,0.12));
    border-color:rgba(0,240,255,0.45);
    box-shadow:0 0 12px rgba(0,240,255,0.18);
}
.chat-emoji-pack-tab.locked{
    opacity:0.6;
    cursor:not-allowed;
}
.chat-emoji-picker.open{
    display:flex;
}
.chat-emoji-grid{
    display:grid;
    grid-template-columns:repeat(6, 40px);
    gap:8px;
}
.chat-emoji-grid:not(.active){ display:none; }
.chat-emoji-option{
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid transparent;
    background:rgba(8,16,32,0.85);
    font-size:1.35rem;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.chat-emoji-option:hover,
.chat-emoji-option:focus{
    border-color:rgba(0,240,255,0.45);
    box-shadow:0 0 12px rgba(0,240,255,0.2);
    transform:translateY(-1px);
    outline:none;
}
.chat-emoji-actions{
    display:flex;
    justify-content:flex-end;
}
.chat-emoji-close{
    background:transparent;
    border:1px solid rgba(0,240,255,0.25);
    color:rgba(173,216,230,0.9);
    font-size:0.8rem;
    padding:4px 10px;
    border-radius:10px;
    transition:background 120ms ease, border-color 120ms ease;
}
.chat-emoji-close:hover,
.chat-emoji-close:focus{
    background:rgba(0,240,255,0.12);
    border-color:rgba(0,240,255,0.45);
    outline:none;
}
.chat-send-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:12px;
    padding:8px 16px;
}
.chat-composer.is-sending .chat-send-btn{
    opacity:0.6;
    pointer-events:none;
}

@media (max-width: 1024px){
    .chat-dock{
        width:min(760px, calc(100% - 24px));
        bottom:18px;
    }
    .chat-dock-body{
        gap:10px;
    }
    .chat-channel-tabs{
        flex-direction:row;
        justify-content:flex-start;
        overflow-x:auto;
        padding-bottom:4px;
    }
    .chat-channel-tab{
        flex:0 0 auto;
        text-align:center;
    }
}

@media (max-width:640px){
    .chat-emoji-picker{
        left:12px;
        right:12px;
        bottom:88px;
        min-width:auto;
    }
    .chat-emoji-packs{ gap:6px; }
    .chat-emoji-grid{
        grid-template-columns:repeat(6, 1fr);
    }
}

/* Ensure closed-state hides panel on medium screens */
.chat-dock:not(.chat-dock-open){
    right:18px;
}
.chat-dock:not(.chat-dock-open) .chat-dock-panel{
    display:none;
}

@media (max-width: 768px){
    .chat-dock{
        left:16px;
        right:16px;
        transform:none;
        width:auto;
        bottom:12px;
    }
    .chat-dock-panel{
        max-height:70vh;
    }
    .chat-dock-body{
        flex-direction:column;
    }
    .chat-channel-tabs{
        flex-direction:row;
        gap:6px;
        overflow-x:auto;
        padding-bottom:6px;
    }
    .chat-window{
        min-height:220px;
    }
}

/* Ensure closed-state hides panel on small screens */
.chat-dock:not(.chat-dock-open){
    right:16px;
    left:auto;
}
.chat-dock:not(.chat-dock-open) .chat-dock-panel{
    display:none;
}

@media (max-width: 480px){
    .chat-dock-toggle{
        width:100%;
        justify-content:center;
    }
    .chat-dock-body{
        padding:12px 14px;
    }
    .chat-dock-header{
        padding:12px 14px;
    }
    .chat-composer{
        padding:12px 14px 16px;
    }
}
@media (max-width: 540px){
    .topbar{
        padding:14px 14px 12px;
        gap:12px;
    }
    .topbar .topbar-main{
        grid-template-columns:auto minmax(0,1fr);
        gap:10px 12px;
        padding:14px 16px;
    }
    .topbar .brand{
        gap:8px;
    }
    .topbar .brand .brand-icon{
        width:40px;
        height:40px;
    }
    .topbar .user{
        flex-wrap:wrap;
        justify-content:flex-end;
        column-gap:8px;
        row-gap:6px;
    }
    .topbar-presence-icons{
        order:2;
        flex:1 1 100%;
        justify-content:flex-end;
        margin-right:0;
        column-gap:6px;
        row-gap:6px;
        flex-wrap:wrap;
    }
    .topbar-presence-icons .presence-icon{
        min-width:34px;
        height:34px;
        padding:4px 6px;
        border-radius:8px;
    }
    .topbar-presence-icons .presence-icon i{
        font-size:0.9rem;
    }
    .topbar .stats-toggle,
    .topbar-messages .message-toggle,
    .topbar-events .event-toggle,
    .topbar-goals .goals-toggle{
        width:36px;
        height:36px;
        border-radius:10px;
    }
    .topbar-goals .goals-progress-ring{
        inset:4px;
    }
    .topbar-goals .goals-progress-ring circle{
        stroke-width:3;
    }
    .topbar .avatar{
        width:38px;
        height:38px;
        border-width:1px;
    }
    .topbar .user .name{
        max-width:100%;
    }
    .topbar .nav{
        gap:6px;
    }
    .topbar-messages .message-count,
    .topbar-events .event-count{
        top:-4px;
        right:-4px;
    }
}


.header { background: transparent; padding: 18px; border-radius: 10px; display:flex; align-items:center; justify-content:space-between; box-shadow:none; }
.header h1 { color:var(--neon); font-size:1.4rem; margin:0 }
.stats-bar { display:flex; gap:12px; background:#fff; padding:12px; border-radius:8px; margin:16px 0; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.stat-item { padding:8px 12px; background:#f8f9fa; border-left:4px solid #2a5298; border-radius:6px; }
.navigation { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.nav-button { background:#2a5298; color:#fff; padding:12px 14px; border-radius:6px; text-decoration:none; font-weight:700; display:inline-block; }
.nav-button:hover{ background:#1e3c72; }
.content { background:#fff; padding:22px; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.content h2 { color:#2a5298; margin-bottom:12px; }

/* Page metric cards */
.page-kpi-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:20px;
}
.page-kpi{
    flex:1 1 160px;
    min-width:150px;
    padding:12px 14px;
    border-radius:14px;
    background: linear-gradient(135deg, rgba(0,240,255,0.08), rgba(255,204,51,0.08));
    border:1px solid rgba(255,204,51,0.18);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.25), 0 0 20px rgba(0,240,255,0.08);
    display:flex;
    flex-direction:column;
    gap:4px;
}
.page-kpi-label{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.55px;
    color:rgba(203,213,225,0.68);
}
.page-kpi-value{
    font-size:1.05rem;
    font-weight:700;
    color:var(--muted);
    text-shadow:0 0 10px rgba(0,0,0,0.45);
}
.page-kpi-hint{
    font-size:0.75rem;
    color:rgba(203,213,225,0.6);
}

@media (max-width: 640px){
    .page-kpi{ flex:1 1 100%; }
}

/* --- Settings Page --- */
.settings-content{
    background: linear-gradient(135deg, rgba(15,20,35,0.88), rgba(6,14,24,0.92));
    border:1px solid rgba(0,240,255,0.12);
    box-shadow: 0 18px 48px rgba(0,0,0,0.45);
    border-radius:18px;
    padding:26px;
}
.settings-content h2{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Orbitron', sans-serif;
    font-size:1.4rem;
    color: var(--gold);
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:8px;
}
.settings-content h2 i{ color: var(--neon); font-size:1.6rem; }
.settings-subtitle{
    color:rgba(203,213,225,0.76);
    font-size:0.95rem;
    margin-bottom:18px;
}
.alert{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-radius:12px;
    font-weight:600;
    margin-bottom:16px;
    backdrop-filter: blur(6px);
}
.alert i{ font-size:1.1rem; }
.alert-error{
    background: rgba(255,76,76,0.18);
    border:1px solid rgba(255,76,76,0.4);
    color: #ff9b9b;
}
.alert-success{
    background: rgba(46,204,113,0.18);
    border:1px solid rgba(46,204,113,0.4);
    color: #a3f7c0;
}
.settings-avatar{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    align-items:center;
}
.settings-avatar-preview{
    width:160px;
    height:160px;
    border-radius:24px;
    overflow:hidden;
    border:2px solid rgba(255,204,51,0.28);
    box-shadow:0 0 32px rgba(255,204,51,0.16);
}
.settings-avatar-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.settings-avatar-form{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-width:320px;
}
.settings-avatar-form input[type="file"]{
    display:none;
}
.file-input-label{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px 16px;
    border-radius:14px;
    border:1px dashed rgba(0,240,255,0.35);
    background: rgba(0,0,0,0.35);
    color: var(--muted);
    cursor:pointer;
    transition: all 0.25s ease;
    text-align:center;
}
.file-input-label i{
    font-size:1.6rem;
    color: var(--neon);
}
.file-input-label span{ font-weight:700; }
.file-input-label small{ font-size:0.75rem; color:rgba(203,213,225,0.65); }
.file-input-label:hover{
    border-color: var(--gold);
    box-shadow:0 0 22px rgba(255,204,51,0.22);
}
.settings-avatar-form .btn{
    align-self:flex-start;
}

@media (max-width: 640px){
    .settings-avatar{
        flex-direction:column;
        align-items:flex-start;
    }
    .settings-avatar-preview{ width:140px; height:140px; }
    .settings-avatar-form{ width:100%; }
}

/* Additional Settings Sections */
.settings-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-section:first-of-type {
    margin-top: 0;
    border-top: none;
}

.settings-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.settings-section h3 i {
    color: var(--neon);
    font-size: 1.4rem;
}

.settings-section > p {
    color: rgba(203, 213, 225, 0.76);
    font-size: 0.95rem;
    margin-bottom: 18px;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 400px;
}

.settings-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-form label {
    font-weight: 600;
    color: rgba(203, 213, 225, 0.9);
    font-size: 0.9rem;
}

.settings-form input[type="text"],
.settings-form input[type="password"],
.settings-form select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 0.95rem;
}

.settings-form input[type="text"]:focus,
.settings-form input[type="password"]:focus,
.settings-form select:focus {
    outline: none;
    border-color: var(--neon);
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.2);
}

.settings-form small {
    color: rgba(203, 213, 225, 0.6);
    font-size: 0.8rem;
}

.settings-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.9);
    font-size: 0.95rem;
}

.settings-form .checkbox-label input[type="checkbox"] {
    display: none;
}

.settings-form .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
}

.settings-form .checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: var(--neon);
    border-color: var(--neon);
}

.settings-form .checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 12px;
    font-weight: bold;
}

@media (max-width: 640px) {
    .settings-form {
        max-width: 100%;
    }
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px 8px 0 0;
    color: rgba(203, 213, 225, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.9rem;
    position: relative;
    bottom: -1px;
}

.settings-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(203, 213, 225, 0.9);
    transform: translateY(-2px);
}

.settings-tab.active {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 240, 255, 0.05));
    border-color: rgba(0, 240, 255, 0.3);
    color: #00f0ff;
    box-shadow: 0 4px 12px rgba(0, 240, 255, 0.15);
}

.settings-tab i {
    font-size: 1.1rem;
}

.settings-tab-content {
    position: relative;
}

.settings-tab-pane {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .settings-tabs {
        flex-direction: column;
        gap: 2px;
    }

    .settings-tab {
        border-radius: 6px;
        padding: 10px 16px;
        justify-content: center;
    }

    .settings-tab.active {
        border-radius: 6px;
    }
}

/* Buttons */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 14px;
    border-radius:6px;
    font-weight:700;
    text-decoration:none;
    border:none;
    cursor:pointer;
}
.btn-primary{ background:#2a5298; color:#fff; }
.btn-primary:hover{ background:#1e3c72; }
.btn-secondary{ background:#6c757d; color:#fff; }
.btn-success{ background:#28a745; color:#fff; }
.btn-danger{ background:#dc3545; color:#fff; }
.btn:disabled, .btn[disabled]{ opacity:0.6; cursor:not-allowed; }

.btn-outline{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.18);
    color:#e6faff;
    box-shadow:0 4px 12px rgba(8,14,32,0.35);
}

.btn-outline:hover{
    background:rgba(0,240,255,0.14);
    border-color:rgba(0,240,255,0.35);
    color:#fff;
}

/* Cards & grids */
.grid { display:grid; gap:18px; }
.jobs-grid, .races-grid, .properties-grid, .items-grid { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); display:grid; gap:20px; }
.card { background:#f8f9fa; padding:18px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.05); border:1px solid #e6e9ee; }

/* --- Crimes & Activities modern layout --- */
.crime-summary-grid,
.activities-summary-grid,
.inventory-summary-grid {
    display:grid;
    gap:16px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin:18px 0;
}

.summary-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border:1px solid rgba(255,255,255,0.05);
    border-radius:14px;
    padding:16px;
    box-shadow: 0 14px 38px rgba(3,9,32,0.45);
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:120px;
}

.summary-card h3 {
    font-size:0.9rem;
    font-weight:700;
    color:rgba(203,213,225,0.76);
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.summary-value {
    font-size:2.1rem;
    font-weight:800;
    color:var(--neon);
    font-family:'Orbitron', sans-serif;
}

.summary-hint {
    font-size:0.85rem;
    color:rgba(203,213,225,0.65);
    margin:0;
}

/* Make inventory summary cards much smaller - 2 per line */
.inventory-summary-grid {
    gap:8px;
    grid-template-columns: repeat(2, 1fr);
    margin:8px 0;
    max-width:500px;
}

.inventory-insight {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:14px;
}

.inventory-lightbulb {
    border:none;
    border-radius:50%;
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 30% 30%, rgba(91, 124, 250, 0.4), rgba(32, 45, 92, 0.3));
    color:#ffe082;
    box-shadow:0 12px 24px rgba(19, 27, 56, 0.45);
    cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.inventory-lightbulb i {
    font-size:1.3rem;
}

.inventory-lightbulb:hover,
.inventory-lightbulb:focus-visible {
    transform:translateY(-2px) scale(1.05);
    box-shadow:0 16px 32px rgba(19, 27, 56, 0.55);
}

.inventory-lightbulb:focus-visible {
    outline:2px solid var(--neon, #10dbc4);
    outline-offset:4px;
}

.inventory-lightbulb.is-off {
    background:rgba(21, 26, 41, 0.45);
    color:rgba(255, 255, 255, 0.35);
    box-shadow:none;
}

.inventory-lightbulb.is-off:hover,
.inventory-lightbulb.is-off:focus-visible {
    color:rgba(255, 255, 255, 0.65);
}

.inventory-tooltip {
    position:absolute;
    top:110%;
    left:0;
    background:linear-gradient(180deg, rgba(8, 12, 28, 0.95), rgba(4, 8, 18, 0.92));
    border:1px solid rgba(255, 255, 255, 0.08);
    border-radius:14px;
    padding:12px;
    min-width:260px;
    max-width:360px;
    box-shadow:0 26px 48px rgba(4, 10, 30, 0.6);
    z-index:20;
}

.inventory-tooltip::before {
    content:"";
    position:absolute;
    top:-8px;
    left:22px;
    width:16px;
    height:16px;
    background:inherit;
    border-left:1px solid rgba(255,255,255,0.08);
    border-top:1px solid rgba(255,255,255,0.08);
    transform:rotate(45deg);
    clip-path:polygon(0 0, 100% 0, 0 100%);
}

.inventory-tooltip[hidden] {
    display:none;
}

.inventory-tooltip .inventory-summary-grid {
    margin:0;
    max-width:100%;
}

.inventory-tooltip .summary-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:10px;
    padding:10px;
}

.inventory-tooltip .summary-value {
    font-size:1.05rem;
}

@media (max-width: 600px) {
    .inventory-insight {
        flex-wrap:wrap;
        gap:10px;
    }

    .inventory-tooltip {
        position:static;
        width:100%;
        max-width:none;
        box-shadow:0 22px 40px rgba(4, 10, 30, 0.5);
        margin-top:8px;
    }

    .inventory-tooltip::before {
        display:none;
    }
}

.inventory-summary-grid .summary-card {
    padding:6px 8px;
    border-radius:6px;
    min-height:unset;
    gap:2px;
}

.inventory-summary-grid .summary-card h3 {
    font-size:0.6rem;
    letter-spacing:0.02em;
    margin:0;
}

.inventory-summary-grid .summary-value {
    font-size:0.95rem;
    font-weight:700;
    line-height:1.1;
}

.inventory-summary-grid .summary-hint {
    font-size:0.6rem;
    line-height:1.15;
    margin:0;
}

.crime-highlight,
.activity-highlight {
    border-radius:16px;
    border:1px solid rgba(0,240,255,0.12);
    background: linear-gradient(135deg, rgba(0,240,255,0.08), rgba(10,15,40,0.6));
    padding:18px;
    margin-bottom:20px;
    box-shadow: 0 20px 50px rgba(2,12,44,0.55);
}

.crime-highlight.insight {
    margin:24px 0 4px;
    box-shadow:0 14px 34px rgba(3,10,30,0.32);
    border-color:rgba(0,240,255,0.18);
    background:linear-gradient(135deg, rgba(0,240,255,0.1), rgba(8,20,44,0.72));
}

.crime-blocked-banner {
    border-radius:16px;
    padding:18px 20px;
    margin-bottom:22px;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 18px 42px rgba(0,0,0,0.45);
    display:flex;
    flex-direction:column;
    gap:6px;
}

.crime-blocked-banner h3 {
    margin:0;
    font-family:'Orbitron', sans-serif;
    font-size:1.2rem;
    color:#f8fafc;
}

.crime-blocked-banner p {
    margin:0;
    font-size:0.95rem;
    color:rgba(226,232,240,0.8);
}

.crime-blocked-banner a {
    color:var(--neon);
    font-weight:600;
    text-decoration:none;
}

.crime-blocked-banner a:hover {
    text-decoration:underline;
}

.crime-blocked-hospital {
    background:linear-gradient(135deg, rgba(255,76,76,0.18), rgba(11,18,40,0.72));
    border-color:rgba(255,99,132,0.38);
}

.crime-blocked-jail {
    background:linear-gradient(135deg, rgba(255,204,51,0.16), rgba(11,18,40,0.72));
    border-color:rgba(255,204,51,0.34);
}

.crime-highlight-label {
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-weight:700;
    color:rgba(203,213,225,0.65);
}

.crime-highlight-body {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:22px;
    margin-top:10px;
}

.crime-insight-shell {
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
}

.crime-insight-toggle {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 16px;
    border-radius:14px;
    border:1px solid rgba(0,240,255,0.24);
    background:rgba(8,16,32,0.72);
    color:#e7faff;
    font-weight:600;
    letter-spacing:0.05em;
    text-transform:uppercase;
    font-size:0.72rem;
    cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}

.crime-insight-toggle i {
    font-size:1rem;
    color:var(--gold);
    transition:transform 0.2s ease;
}

.crime-insight-shell[data-insight-state="expanded"] .crime-insight-toggle i {
    transform:rotate(12deg) scale(1.05);
}

.crime-insight-toggle:hover,
.crime-insight-toggle:focus-visible {
    border-color:rgba(255,204,51,0.45);
    color:#fff;
    box-shadow:0 12px 32px rgba(0,240,255,0.18);
}

.crime-insight-toggle:focus-visible {
    outline:none;
}

.crime-insight-panel {
    width:100%;
    background:linear-gradient(135deg, rgba(6,12,28,0.92), rgba(12,24,48,0.85));
    border:1px solid rgba(0,240,255,0.16);
    border-radius:18px;
    padding:18px;
    box-shadow:0 18px 40px rgba(3,10,30,0.45);
}

.crime-insight-grid {
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}

.crime-insight-metric {
    display:flex;
    flex-direction:column;
    gap:6px;
    color:rgba(226,232,240,0.86);
}

.crime-insight-metric dt {
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:rgba(203,213,225,0.7);
}

.crime-insight-metric dd {
    margin:0;
    font-size:1.4rem;
    font-weight:700;
    color:#9ffcff;
}

.crime-insight-metric small {
    font-size:0.78rem;
    color:rgba(203,213,225,0.65);
}

.crime-highlight-body h3 {
    margin:0 0 4px;
    font-family:'Orbitron', sans-serif;
    color:#e6faff;
}

.crime-highlight-body p {
    margin:0;
    max-width:420px;
    color:rgba(203,213,225,0.75);
}

.crime-highlight-stats {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.9rem;
    color:#cff1ff;
    font-weight:600;
}

.crime-category-shell {
    display:flex;
    flex-direction:column;
    gap:24px;
    margin:32px 0;
}

.crime-category-shell.panel-active {
    gap:18px;
}

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

.crime-category-shell.panel-active .crime-category-grid {
    display:none;
}

.crime-category-card {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.06);
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(6,12,32,0.66));
    box-shadow:0 16px 40px rgba(2,10,36,0.45);
    cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
    text-align:left;
    overflow:hidden;
}

.crime-category-card::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(200deg, rgba(4,10,26,0.78) 0%, rgba(6,14,34,0.62) 36%, rgba(10,22,48,0.28) 100%);
    transition:opacity 0.2s ease;
    opacity:0.92;
}

.crime-category-card > *:not(.crime-category-card-art) {
    position:relative;
    z-index:1;
}

.crime-category-card-art {
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:0.65;
    pointer-events:none;
    mix-blend-mode:screen;
    transition:opacity 0.2s ease, transform 0.25s ease;
}

.crime-category-card-art img {
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.05);
    filter:saturate(1.05) contrast(1.05);
}

.crime-category-card:hover,
.crime-category-card.active {
    transform:translateY(-4px);
    border-color:rgba(0,240,255,0.4);
    box-shadow:0 20px 48px rgba(0,240,255,0.18);
}

.crime-category-card:hover::before,
.crime-category-card.active::before {
    opacity:1;
}

.crime-category-card:hover .crime-category-card-art,
.crime-category-card.active .crime-category-card-art {
    opacity:0.8;
    transform:scale(1.08);
}

.crime-category-card.locked {
    opacity:0.78;
}

.crime-category-card.empty {
    opacity:0.62;
}

.crime-category-card-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.crime-category-name {
    font-family:'Orbitron', sans-serif;
    font-size:1.05rem;
    color:#e7faff;
}

.crime-category-count {
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:rgba(203,213,225,0.6);
}

.crime-category-tagline {
    margin:0;
    font-size:0.9rem;
    color:rgba(203,213,225,0.75);
}

.crime-category-card .crime-category-name,
.crime-category-card .crime-category-count,
.crime-category-card .crime-category-tagline,
.crime-category-card .crime-category-icon,
.crime-category-card .crime-category-icon small,
.crime-category-card .crime-category-stats span,
.crime-category-card .crime-category-lock {
    text-shadow:0 2px 6px rgba(3,8,20,0.75);
}

.crime-category-icon-row {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.crime-category-icon {
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:0.9rem;
    color:#d8f5ff;
}

.crime-category-icon i {
    font-size:1.2rem;
    color:var(--neon);
}

.crime-category-icon small {
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(203,213,225,0.6);
}

.crime-category-stats {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.82rem;
    color:rgba(203,213,225,0.7);
}

.crime-category-stats span {
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.crime-category-lock {
    margin-top:auto;
    padding:8px 10px;
    border-radius:10px;
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    background:rgba(255,255,255,0.05);
    border:1px dashed rgba(255,255,255,0.18);
    color:rgba(255,255,255,0.68);
}

.crime-category-panels {
    display:flex;
    flex-direction:column;
    gap:24px;
}

.crime-category-shell.panel-active .crime-category-panels {
    gap:0;
}

.crime-category-panel {
    display:none;
    flex-direction:column;
    gap:22px;
    padding:24px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.05);
    background:linear-gradient(180deg, rgba(8,16,36,0.78), rgba(2,8,24,0.92));
    box-shadow:0 24px 54px rgba(2,10,36,0.52);
}

.crime-category-panel.active {
    display:flex;
}

.crime-category-panel-toolbar {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    margin-bottom:8px;
}

.crime-category-back {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:12px;
    border:1px solid rgba(0,240,255,0.24);
    background:rgba(11,18,34,0.72);
    color:#e7faff;
    font-weight:600;
    text-transform:uppercase;
    font-size:0.72rem;
    letter-spacing:0.08em;
    cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}

.crime-category-back:hover,
.crime-category-back:focus-visible {
    border-color:rgba(255,204,51,0.45);
    color:#fff;
    box-shadow:0 10px 30px rgba(0,240,255,0.18);
}

.crime-category-back i {
    font-size:0.95rem;
}

.crime-category-hero {
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:360px;
    border-radius:22px;
}

.crime-category-hero-copy {
    position:absolute;
    inset:0;
    padding:28px 28px 32px;
    display:flex;
    flex-direction:column;
    gap:14px;
    justify-content:flex-end;
    z-index:2;
    background:linear-gradient(180deg, rgba(3,10,30,0.18) 0%, rgba(3,10,30,0.68) 55%, rgba(3,10,30,0.96) 100%);
}

.crime-category-hero-art {
    position:relative;
    width:100%;
    height:360px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 32px 64px rgba(3,10,30,0.45);
}

.crime-category-hero-art::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(2,8,24,0.12), rgba(2,8,24,0.55));
    mix-blend-mode:multiply;
}

.crime-category-hero-art img {
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.0);
    filter:saturate(1.05) contrast(1.06);
}

@media (max-width: 768px) {
    .crime-category-hero {
        min-height:320px;
    }

    .crime-category-hero-copy {
        padding:22px 20px 28px;
        gap:10px;
        background:linear-gradient(180deg, rgba(3,10,30,0.05) 0%, rgba(3,10,30,0.68) 68%, rgba(3,10,30,0.92) 100%);
    }

    .crime-category-hero-copy .hero-eyebrow {
        color:rgba(226,232,240,0.7);
    }

    .crime-category-hero-copy .hero-tagline,
    .crime-category-hero-copy .hero-stat-row span {
        color:rgba(231,242,255,0.85);
    }

    .crime-category-hero-art {
        height:320px;
    }

    .crime-category-hero-art::after {
        background:linear-gradient(180deg, rgba(2,8,24,0.15), rgba(2,8,24,0.6));
    }

    .crime-category-hero-art img {
        transform:scale(1.0);
    }
}

.hero-eyebrow {
    margin:0;
    font-size:0.72rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:rgba(203,213,225,0.5);
}

.hero-tagline {
    margin:0;
    font-size:0.95rem;
    color:rgba(203,213,225,0.75);
}

.hero-stat-row {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.85rem;
    color:rgba(203,213,225,0.7);
}

.hero-stat-row span {
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.hero-locked {
    margin-top:8px;
    padding:10px 12px;
    border-radius:12px;
    border:1px dashed rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.03);
    color:rgba(255,255,255,0.72);
    font-size:0.85rem;
}

.crime-category-items {
    display:flex;
    flex-direction:column;
    gap:14px;
}

.crime-category-items h4 {
    margin:0;
    font-size:0.95rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(203,213,225,0.7);
    display:flex;
    align-items:center;
    gap:8px;
}

.crime-items-row {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.crime-item-card {
    flex:1 1 200px;
    min-width:200px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.03);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.crime-item-card.owned {
    border-color:rgba(48,255,173,0.4);
    box-shadow:0 12px 28px rgba(48,255,173,0.18);
}

.crime-item-card.missing {
    border-color:rgba(255,126,76,0.32);
    box-shadow:0 12px 26px rgba(255,126,76,0.16);
}

.crime-item-thumb {
    width:56px;
    height:56px;
    border-radius:12px;
    overflow:hidden;
    background:rgba(0,0,0,0.25);
    display:flex;
    align-items:center;
    justify-content:center;
}

.crime-item-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.crime-item-placeholder {
    font-size:1.4rem;
    color:rgba(203,213,225,0.6);
}

.crime-item-body {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.crime-item-name {
    font-weight:700;
    color:#e6f9ff;
}

.crime-item-qty {
    font-size:0.82rem;
    color:rgba(203,213,225,0.7);
}

.crime-panel-grid {
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.crime-panel-empty {
    padding:28px;
    border-radius:16px;
    border:1px dashed rgba(255,255,255,0.16);
    background:rgba(255,255,255,0.03);
    text-align:center;
    color:rgba(203,213,225,0.7);
    font-size:0.95rem;
}

.crime-category-card.theme-teal {
    background:linear-gradient(160deg, rgba(0,240,255,0.22), rgba(6,14,34,0.88));
    border-color:rgba(0,240,255,0.35);
}

.crime-category-panel.theme-teal {
    border-color:rgba(0,240,255,0.28);
    box-shadow:0 28px 60px rgba(0,240,255,0.16);
}

.crime-category-card.theme-violet {
    background:linear-gradient(160deg, rgba(138,79,255,0.24), rgba(10,10,32,0.92));
    border-color:rgba(138,79,255,0.34);
}

.crime-category-panel.theme-violet {
    border-color:rgba(138,79,255,0.28);
    box-shadow:0 28px 60px rgba(138,79,255,0.14);
}

.crime-category-card.theme-amber {
    background:linear-gradient(160deg, rgba(255,204,102,0.24), rgba(18,14,34,0.9));
    border-color:rgba(255,204,102,0.34);
}

.crime-category-panel.theme-amber {
    border-color:rgba(255,204,102,0.26);
    box-shadow:0 28px 58px rgba(255,204,102,0.16);
}

.crime-category-card.theme-cyan {
    background:linear-gradient(160deg, rgba(98,235,255,0.22), rgba(8,20,42,0.9));
    border-color:rgba(98,235,255,0.32);
}

.crime-category-panel.theme-cyan {
    border-color:rgba(98,235,255,0.26);
    box-shadow:0 28px 58px rgba(98,235,255,0.14);
}

.crime-category-card.theme-lime {
    background:linear-gradient(160deg, rgba(123,255,179,0.22), rgba(10,22,36,0.88));
    border-color:rgba(123,255,179,0.34);
}

.crime-category-panel.theme-lime {
    border-color:rgba(123,255,179,0.26);
    box-shadow:0 28px 58px rgba(123,255,179,0.16);
}

.crime-category-card.theme-indigo {
    background:linear-gradient(160deg, rgba(88,139,255,0.2), rgba(8,12,36,0.9));
    border-color:rgba(88,139,255,0.34);
}

.crime-category-panel.theme-indigo {
    border-color:rgba(88,139,255,0.28);
    box-shadow:0 28px 58px rgba(88,139,255,0.16);
}

.crime-category-card.theme-crimson {
    background:linear-gradient(160deg, rgba(255,110,110,0.24), rgba(20,10,24,0.9));
    border-color:rgba(255,110,110,0.38);
}

.crime-category-panel.theme-crimson {
    border-color:rgba(255,110,110,0.3);
    box-shadow:0 28px 60px rgba(255,110,110,0.18);
}

.crime-category-card.theme-gold {
    background:linear-gradient(160deg, rgba(255,214,102,0.24), rgba(24,16,8,0.88));
    border-color:rgba(255,214,102,0.36);
}

.crime-category-panel.theme-gold {
    border-color:rgba(255,214,102,0.28);
    box-shadow:0 28px 58px rgba(255,214,102,0.18);
}

.crime-category-card.theme-slate {
    background:linear-gradient(160deg, rgba(148,163,184,0.18), rgba(10,16,24,0.92));
    border-color:rgba(148,163,184,0.3);
}

.crime-category-panel.theme-slate {
    border-color:rgba(148,163,184,0.24);
    box-shadow:0 28px 56px rgba(148,163,184,0.14);
}

.crime-category-card.theme-azure {
    background:linear-gradient(160deg, rgba(64,196,255,0.24), rgba(8,14,34,0.9));
    border-color:rgba(64,196,255,0.34);
}

.crime-category-panel.theme-azure {
    border-color:rgba(64,196,255,0.28);
    box-shadow:0 28px 58px rgba(64,196,255,0.16);
}

.crime-category-card.theme-rose {
    background:linear-gradient(160deg, rgba(255,126,189,0.24), rgba(22,10,26,0.9));
    border-color:rgba(255,126,189,0.36);
}

.crime-category-panel.theme-rose {
    border-color:rgba(255,126,189,0.28);
    box-shadow:0 28px 60px rgba(255,126,189,0.16);
}

.crime-category-card.theme-plasma {
    background:linear-gradient(160deg, rgba(84,108,255,0.24), rgba(16,8,36,0.9));
    border-color:rgba(84,108,255,0.34);
}

.crime-category-panel.theme-plasma {
    border-color:rgba(84,108,255,0.28);
    box-shadow:0 28px 60px rgba(84,108,255,0.18);
}

@media (max-width: 900px) {
    .crime-category-grid {
        grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    }
    .crime-item-card {
        flex:1 1 100%;
    }
    .crime-category-hero {
        flex-direction:column;
    }
    .crime-category-hero-art {
        max-width:100%;
    }
}

@media (max-width: 600px) {
    .crime-category-panel {
        padding:18px;
    }
    .crime-category-shell {
        gap:18px;
    }
}

.crime-filter-bar,
.activities-filter-bar,
.inventory-filter-bar {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:12px;
    margin:18px 0 16px;
}

.crime-filter-group {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.filter-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(11,18,40,0.65);
    color:rgba(203,213,225,0.72);
    font-weight:600;
    font-size:0.9rem;
    text-decoration:none;
    transition: all 0.2s ease;
}

.filter-pill:hover {
    color:#fff;
    border-color:rgba(0,240,255,0.3);
    box-shadow:0 0 20px rgba(0,240,255,0.08);
}

.filter-pill.active {
    background:linear-gradient(90deg, rgba(0,240,255,0.18), rgba(96,80,220,0.18));
    color:#e6faff;
    border-color:rgba(0,240,255,0.4);
    box-shadow:0 10px 24px rgba(0,240,255,0.12);
}

.planning-banner {
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.05);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,8,20,0.52));
    padding:18px;
    margin-bottom:22px;
    box-shadow:0 16px 38px rgba(3,9,32,0.55);
}

.planning-blocked {
    margin-top:8px;
    font-size:0.85rem;
    color:rgba(226,232,240,0.7);
}

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

.planning-header h3 {
    margin:0;
    color:#e6faff;
    font-family:'Orbitron', sans-serif;
}

.badge {
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:0.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.user-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.25rem;
    padding:2px 6px;
    border-radius:999px;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    line-height:1;
    margin-left:0.4rem;
    vertical-align:middle;
    white-space:nowrap;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.user-badge i {
    font-size:0.85rem;
    line-height:1;
    color:inherit;
}

.donator-badge {
    display: inline-block;
    background:linear-gradient(135deg, rgba(255,204,51,0.22), rgba(0,240,255,0.32));
    color:#fffbe6;
    border:1px solid rgba(255,204,51,0.55);
    box-shadow:0 0 12px rgba(255,204,51,0.28), inset 0 0 12px rgba(0,240,255,0.22);
    text-shadow:0 0 6px rgba(0,0,0,0.3);
    vertical-align: baseline;
    line-height: 1;
}

.donator-badge[data-tier="2"] {
    background:linear-gradient(135deg, rgba(255,204,102,0.3), rgba(138,79,255,0.42));
    border-color:rgba(138,79,255,0.55);
    color:#f7f2ff;
}

.donator-badge[data-tier="3"] {
    background:linear-gradient(135deg, rgba(255,126,76,0.35), rgba(255,204,51,0.45));
    border-color:rgba(255,126,76,0.6);
    color:#fff3d6;
    box-shadow:0 0 14px rgba(255,126,76,0.35), inset 0 0 16px rgba(255,204,51,0.3);
}

a .donator-badge {
    text-decoration:none;
}

.player-link, .player-link-inline {
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
}

.player-link .donator-badge,
.player-link-inline .donator-badge,
.user-name-with-badge .donator-badge {
    margin-left:0;
}

.badge-info {
    background:rgba(0,240,255,0.15);
    color:#82f0ff;
    border:1px solid rgba(0,240,255,0.4);
}

.planning-list {
    display:grid;
    gap:14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.crime-plans-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin:0 0 28px;
    padding:16px 20px;
    border-radius:18px;
    border:1px solid rgba(0,240,255,0.22);
    background:linear-gradient(135deg, rgba(0,240,255,0.12), rgba(8,20,36,0.78));
    box-shadow:0 20px 44px rgba(6,12,34,0.55);
}

.crime-plans-header-copy {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.crime-plans-header-title {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:1.05rem;
    font-weight:700;
    color:#f8fbff;
    letter-spacing:0.05em;
    text-transform:uppercase;
}

.crime-plans-header-title i {
    font-size:1.15rem;
    color:var(--gold);
}

.crime-plans-header-subtitle {
    font-size:0.9rem;
    color:rgba(226,232,240,0.78);
}

.crime-plans-header-counts {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.crime-plans-header-count {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(0,240,255,0.24);
    background:rgba(0,240,255,0.08);
    font-size:0.8rem;
    color:#baf9ff;
}

.crime-plans-header-count i {
    font-size:0.85rem;
}

.crime-plans-header-count.ready {
    border-color:rgba(48,255,173,0.6);
    background:rgba(48,255,173,0.18);
    color:#d7ffee;
    box-shadow:0 0 12px rgba(48,255,173,0.25);
}

.crime-plans-popout {
    position:fixed;
    top:150px;
    left:24px;
    z-index:1050;
    display:flex;
    flex-direction:column;
    gap:8px;
    width:300px;
    max-width:calc(100vw - 40px);
    transition:transform 0.3s ease, opacity 0.3s ease;
}

.crime-plans-popout[data-popout-state="collapsed"] {
    transform:translateX(-240px);
    opacity:0.85;
}

.crime-plans-toggle {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:0 16px 16px 0;
    border:1px solid rgba(0,240,255,0.26);
    border-left:none;
    background:linear-gradient(135deg, rgba(0,240,255,0.18), rgba(8,18,36,0.92));
    color:#e7faff;
    font-weight:700;
    letter-spacing:0.05em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 16px 34px rgba(3,12,40,0.45);
}

.crime-plans-toggle .label {
    flex:1;
    font-size:0.75rem;
}

.crime-plans-toggle .count-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:rgba(96,248,255,0.22);
    border:1px solid rgba(0,240,255,0.4);
    font-size:0.75rem;
    color:#baf9ff;
}

.crime-plans-toggle .chevron {
    transition:transform 0.3s ease;
}

.crime-plans-popout[data-popout-state="expanded"] .crime-plans-toggle .chevron {
    transform:rotate(90deg);
}

.crime-plans-body {
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.07);
    background:linear-gradient(180deg, rgba(9,18,36,0.94), rgba(4,10,26,0.97));
    padding:16px;
    box-shadow:0 20px 38px rgba(3,10,34,0.55);
    max-height:68vh;
    overflow-y:auto;
}

.crime-plans-body .planning-list {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:8px;
}

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

.planning-header-text h3 {
    margin:0;
    font-size:1rem;
    font-family:'Orbitron', sans-serif;
    color:#f1fbff;
}

.planning-header-text .muted {
    margin:4px 0 0;
    font-size:0.78rem;
    color:rgba(204,216,232,0.75);
}

.plans-summary {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
}

.plans-chip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:14px;
    border:1px solid rgba(0,240,255,0.2);
    background:rgba(10,30,48,0.65);
    color:#d6f3ff;
    font-size:0.68rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

.plans-chip i {
    font-size:0.8rem;
}

.plans-chip-count {
    font-size:0.85rem;
    font-weight:700;
}

.plans-chip-label {
    opacity:0.8;
}

.plans-chip-ready {
    background:linear-gradient(135deg, rgba(48,255,173,0.18), rgba(12,96,84,0.4));
    border-color:rgba(48,255,173,0.32);
    color:#e3fff6;
}

.plans-chip-ready.is-zero {
    opacity:0.55;
}

.plans-types {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin:4px 0 12px;
}

.plans-type-chip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 9px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.05);
    background:rgba(11,22,40,0.6);
    font-size:0.68rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:#d8e7ff;
}

.plans-type-chip i {
    font-size:0.78rem;
}

.plans-type-chip.type-crime {
    border-color:rgba(255,120,120,0.34);
    background:rgba(255,120,120,0.12);
    color:#ffc9cf;
}

.plans-type-chip.type-activity {
    border-color:rgba(0,240,255,0.3);
    background:rgba(0,240,255,0.12);
    color:#b9fbff;
}

.plans-type-chip.type-expedition {
    border-color:rgba(168,130,255,0.32);
    background:rgba(168,130,255,0.14);
    color:#e3dcff;
}

.plans-type-chip.is-zero {
    opacity:0.45;
}

@media (max-width: 900px) {
    .crime-plans-popout {
        position:fixed;
        top:auto;
        bottom:calc(var(--bottom-bar-height) + 36px + env(safe-area-inset-bottom, 0px));
        left:24px;
        width:min(92vw, 360px);
    }

    .crime-plans-popout[data-popout-state="collapsed"] {
        transform:translateY(0);
    }

    .crime-plans-toggle {
        border-radius:18px;
        border:1px solid rgba(0,240,255,0.32);
    }
}

.planning-card {
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(12,20,48,0.68));
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.05);
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:0 12px 26px rgba(2,10,36,0.5);
    transition:transform 200ms ease, box-shadow 200ms ease;
}

.planning-card.ready {
    border-left:3px solid rgba(48,255,173,0.8);
}

.planning-card.in-progress {
    border-left:3px solid rgba(0,240,255,0.35);
}

.planning-card header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.planning-title-group {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.planning-title {
    font-weight:600;
    color:#e0f4ff;
    font-size:0.95rem;
}

.planning-type-label {
    display:inline-flex;
    align-items:center;
    padding:2px 6px;
    border-radius:999px;
    font-size:0.68rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    background:rgba(255,255,255,0.08);
    color:#dbeaff;
}

.planning-type-label.type-crime {
    background:rgba(255,110,134,0.18);
    color:#ffd7de;
}

.planning-type-label.type-activity {
    background:rgba(0,240,255,0.18);
    color:#c6fbff;
}

.planning-type-label.type-expedition {
    background:rgba(168,130,255,0.2);
    color:#efe7ff;
}

.planning-status {
    font-size:0.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.planning-status.status-ready {
    color:#5cfbc7;
}

.planning-status.status-wait {
    color:#79d2ff;
}

.planning-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.btn-compact {
    padding:6px 12px;
    font-size:0.82rem;
    border-radius:10px;
}

.planning-link {
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:0.82rem;
    color:#8fdfff;
    text-decoration:none;
}

.planning-link i {
    font-size:0.82rem;
}

.planning-link:hover {
    color:#c2f2ff;
}

.planning-empty {
    padding:18px 10px;
    text-align:center;
    font-size:0.85rem;
    color:rgba(204,216,232,0.8);
    border-radius:12px;
    border:1px dashed rgba(204,216,232,0.25);
    background:rgba(12,24,44,0.45);
}

.crime-tier {
    margin:24px 0;
    padding:18px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.05);
    background: linear-gradient(180deg, rgba(8,16,36,0.68), rgba(3,8,24,0.85));
    box-shadow:0 20px 50px rgba(2,10,36,0.55);
}

.crime-tier-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:18px;
}

.crime-tier-header h3 {
    margin:0;
    font-family:'Orbitron', sans-serif;
    color:#f1fbff;
}

.crime-tier-header .muted {
    margin:4px 0 0;
}

.crime-tier-stats {
    display:flex;
    gap:12px;
    font-size:0.85rem;
    color:rgba(203,213,225,0.65);
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.crime-tier-grid {
    display:grid;
    gap:16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.crime-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(6,12,32,0.6));
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.05);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:240px;
    transition: transform 200ms ease, box-shadow 220ms ease;
    box-shadow:0 14px 36px rgba(2,10,36,0.5);
}

.crime-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 46px rgba(0,240,255,0.16);
}

.crime-card-locked {
    opacity:0.78;
}

.crime-card-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.crime-card-header h4 {
    margin:0;
    font-size:1.02rem;
    font-family:'Orbitron', sans-serif;
    color:#e8f6ff;
}

.risk-badge {
    padding:4px 10px;
    border-radius:999px;
    font-size:0.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.risk-safe {
    background:rgba(48,255,173,0.15);
    color:#6efcc8;
    border:1px solid rgba(48,255,173,0.35);
}

.risk-steady {
    background:rgba(0,240,255,0.12);
    color:#87f0ff;
    border:1px solid rgba(0,240,255,0.3);
}

.risk-risky {
    background:rgba(255,99,132,0.16);
    color:#ffb3c3;
    border:1px solid rgba(255,99,132,0.35);
}

.crime-card-description {
    color:rgba(203,213,225,0.7);
    font-size:0.95rem;
    margin:0;
}

.crime-meta {
    display:grid;
    gap:10px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    font-size:0.86rem;
}

.crime-meta div {
    display:flex;
    flex-direction:column;
    gap:2px;
}

.crime-meta dt {
    font-size:0.74rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:rgba(203,213,225,0.55);
}

.crime-meta dd {
    margin:0;
    font-weight:700;
    color:#e4f4ff;
}

.crime-status-line {
    margin-top:auto;
    border-radius:10px;
    padding:10px 12px;
    font-size:0.85rem;
    font-weight:700;
    letter-spacing:0.02em;
}

.crime-status-line.status-open {
    background:rgba(48,255,173,0.09);
    color:#7dfdd2;
    border:1px solid rgba(48,255,173,0.25);
}

.crime-status-line.status-locked {
    background:rgba(255,255,255,0.04);
    color:rgba(203,213,225,0.62);
    border:1px solid rgba(255,255,255,0.08);
}

.crime-action {
    margin-top:8px;
}

.crime-action .btn,
.crime-action .activity-btn {
    width:100%;
    border-radius:10px;
    padding:10px 14px;
    font-weight:700;
    background: linear-gradient(90deg, rgba(0,240,255,0.12), rgba(138,79,255,0.12));
    color:#8cf3ff;
    border:1px solid rgba(0,240,255,0.2);
    box-shadow:0 10px 24px rgba(0,240,255,0.12);
}

.crime-action .btn:disabled,
.crime-action .activity-btn:disabled {
    opacity:0.55;
    box-shadow:none;
}

@media (max-width: 768px){
    .crime-highlight-body { flex-direction:column; align-items:flex-start; }
    .crime-filter-bar, .activities-filter-bar { flex-direction:column; align-items:flex-start; }
    .crime-summary-grid, .activities-summary-grid { grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); }
    .crime-tier { padding:16px; }
}

@media (max-width: 540px){
    .crime-tier-grid { grid-template-columns:1fr; }
    .planning-list { grid-template-columns:1fr; }
}

/* Inventory / Items neon polish */
.items-grid .item-card, .items-grid .card, .item-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:10px; border:1px solid rgba(255,255,255,0.04); padding:12px; transition: transform 160ms ease, box-shadow 200ms ease; }
.item-card img { width:100%; height:140px; object-fit:cover; border-radius:6px; background:var(--glass); }
.item-card .item-name { color:var(--neon); font-weight:800; font-family: 'Orbitron', sans-serif; margin-top:8px; }
.item-card .item-meta { color:var(--muted); font-size:0.9rem; margin-top:6px; }
.item-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,240,255,0.06); }
.item-card .equip-slot{ border-radius:8px; padding:8px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }

/* Small responsive tweaks */
@media (max-width: 720px){
    .crime-stats { grid-template-columns: 1fr; }
    .crime-tile { min-height: 180px; }
}

/* --- Property market specific --- */
.property-card { background:#fff; position:relative; padding:18px; border-radius:10px; border:1px solid #e6e9ee; display:flex; flex-direction:column; gap:14px; }
.property-card h3{ color:#213a78; margin-bottom:6px; }
.property-description{ color:#555; margin-bottom:8px; font-size:0.95rem; }
.property-details{ display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:0.95rem; }
.property-card > .property-badge{ position:absolute; top:12px; right:12px; }
.property-badge{ background:#2a5298; color:#fff; padding:6px 10px; border-radius:8px; font-weight:700; font-size:0.85rem; display:inline-flex; align-items:center; gap:6px; }
.property-badge.owned{ background:#28a745; }
.property-badge.residence{ background:var(--purple); }
.property-badge-row{ display:flex; flex-wrap:wrap; gap:8px; }
.property-badge-row .property-badge{ position:static; }
.collection-status{ margin-top:4px; font-weight:700; }
.residence-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.residence-pill{ display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border-radius:999px; font-size:0.78rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; background:rgba(0,240,255,0.12); color:var(--residence-accent-ink); border:1px solid rgba(0,240,255,0.24); }
.residence-pill.current{ background:rgba(72,199,142,0.18); border-color:rgba(72,199,142,0.3); color:#dcfce7; }
.residence-pill.meta{ background:rgba(148,163,184,0.12); border-color:rgba(148,163,184,0.28); color:rgba(226,232,240,0.88); text-transform:none; letter-spacing:0.4px; }
.stat-item .stat-hint{ display:block; margin-top:4px; font-size:0.78rem; color:rgba(45,55,72,0.65); }
.residence-banner{ margin:24px 0; padding:20px; border-radius:16px; border:1px solid rgba(0,240,255,0.18); background:linear-gradient(135deg, rgba(12,18,36,0.92), rgba(16,24,46,0.92)); color:#e2e8f0; display:flex; align-items:center; justify-content:space-between; gap:18px; box-shadow:0 16px 32px rgba(0,0,0,0.25); }
.residence-banner.neutral{ border-style:dashed; border-color:rgba(148,163,184,0.35); background:rgba(15,23,42,0.85); }
.residence-banner h3{ font-family:'Orbitron', sans-serif; font-size:1.2rem; color:#f8fafc; margin-bottom:6px; }
.residence-banner p{ margin:0; font-size:0.95rem; color:rgba(226,232,240,0.82); }
.residence-banner .banner-meta{ font-size:0.8rem; color:rgba(148,163,184,0.75); margin-top:6px; }
.residence-banner .banner-action .btn{ white-space:nowrap; }

/* --- Racing / Sessions --- */
.session-card{ padding:16px; border-radius:8px; background:#fff; border:1px solid #e6e9ee; }
.active-session{ border:2px solid #28a745; }
.participants-list{ background:#f8f9fa; padding:10px; border-radius:6px; }
.you-badge{ background:#28a745; color:#fff; padding:2px 8px; border-radius:4px; font-weight:700; font-size:0.8rem; }

/* --- Profile --- */
.profile-header{ display:flex; gap:20px; align-items:center; background:#f8f9fa; padding:18px; border-radius:10px; }
.avatar-placeholder{ width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.2rem; }
.profile-happy-readout{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:0.95rem; }
.profile-happy-readout strong{ color:#f8fafc; }
.profile-happy-overflow{ display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; background:var(--residence-accent-bg); border:1px solid var(--residence-accent-border-soft); color:var(--residence-accent-foreground); font-size:0.72rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; }
.profile-residence-card{ margin-top:10px; padding:12px 16px; border-radius:14px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:6px; color:rgba(226,232,240,0.9); }
.profile-residence-card strong{ color:#f8fafc; }
.profile-residence-card.neutral{ border-style:dashed; border-color:rgba(255,255,255,0.18); color:rgba(226,232,240,0.85); }
.profile-residence-card a{ color:var(--neon); font-weight:600; text-decoration:none; }
.profile-residence-card a:hover{ text-decoration:underline; }
.profile-residence-meta{ font-size:0.82rem; color:rgba(203,213,225,0.78); }

/* --- Medbay / Hospital Refresh --- */
.medbay-shell{ display:flex; flex-direction:column; gap:28px; }
.medbay-hero{
    position:relative;
    padding:32px;
    border-radius:28px;
    background:radial-gradient(circle at 12% 18%, rgba(0,240,255,0.18), transparent 55%),
              radial-gradient(circle at 88% 12%, rgba(138,79,255,0.16), transparent 52%),
              linear-gradient(160deg, rgba(15,20,36,0.92), rgba(8,14,30,0.94));
    border:1px solid rgba(0,240,255,0.22);
    box-shadow:0 28px 60px rgba(2,8,24,0.6);
    overflow:hidden;
}
.medbay-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(0,240,255,0.08), transparent 45%, rgba(138,79,255,0.1));
    pointer-events:none;
}
.medbay-hero-critical{ border-color:rgba(255,116,116,0.38); box-shadow:0 32px 70px rgba(255,76,76,0.18); }
.medbay-hero-body{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; z-index:1; }
.medbay-hero-text{ max-width:520px; display:flex; flex-direction:column; gap:18px; }
.medbay-hero-kicker{
    font-size:0.78rem;
    letter-spacing:2.2px;
    text-transform:uppercase;
    color:rgba(203,213,225,0.8);
}
.medbay-hero-text h1{
    font-family:'Orbitron', sans-serif;
    font-size:2.3rem;
    color:#f8fafc;
    text-shadow:0 8px 20px rgba(0,240,255,0.18);
}
.medbay-chip-row{ display:flex; flex-wrap:wrap; gap:12px; }
.medbay-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    font-size:0.85rem;
    font-weight:600;
    background:rgba(0,240,255,0.12);
    border:1px solid rgba(0,240,255,0.32);
    color:#cbe7ff;
    text-transform:uppercase;
    letter-spacing:0.6px;
}
.medbay-chip i{ font-size:0.95rem; color:var(--neon); }
.medbay-chip-warning{ background:rgba(255,110,110,0.14); border-color:rgba(255,110,110,0.38); color:#ffd7d7; }
.medbay-chip-warning i{ color:#ff9e9e; }
.medbay-chip-success{ background:rgba(0,200,120,0.16); border-color:rgba(0,200,120,0.34); color:#c6ffe6; }
.medbay-chip-success i{ color:#6affc6; }
.medbay-vitals{
    position:relative;
    display:flex;
    align-items:center;
    gap:24px;
    padding:20px 24px;
    border-radius:20px;
    background:linear-gradient(135deg, rgba(8,16,36,0.9), rgba(12,22,44,0.96));
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 16px 36px rgba(0,0,0,0.45);
    min-width:260px;
}
.medbay-health-ring{ position:relative; width:150px; aspect-ratio:1; }
.medbay-health-fill{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:conic-gradient(var(--neon) calc(var(--progress) * 1%), rgba(255,255,255,0.06) 0);
    mask:radial-gradient(circle, transparent 60%, black 61%);
    -webkit-mask:radial-gradient(circle, transparent 60%, black 61%);
    filter:drop-shadow(0 0 16px rgba(0,240,255,0.20));
}
.medbay-health-center{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle, rgba(11,17,38,0.88) 55%, transparent 65%);
    border-radius:50%;
    gap:4px;
}
.medbay-health-value{
    font-family:'Orbitron', sans-serif;
    font-size:2rem;
    color:#f8fafc;
}
.medbay-health-unit{ font-size:1rem; margin-left:2px; color:rgba(203,213,225,0.7); }
.medbay-health-label{ font-size:0.8rem; letter-spacing:2px; text-transform:uppercase; color:rgba(203,213,225,0.6); }
.medbay-vital-list{ display:grid; gap:12px; }
.medbay-vital-list div{ display:flex; flex-direction:column; gap:4px; }
.medbay-vital-list dt{ font-size:0.72rem; letter-spacing:1.8px; text-transform:uppercase; color:rgba(203,213,225,0.6); }
.medbay-vital-list dd{ margin:0; font-size:1rem; font-weight:600; color:#e6f2ff; }
.medbay-alert-row{ position:relative; margin-top:28px; z-index:1; }
.medbay-alert{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 18px;
    border-radius:16px;
    background:linear-gradient(135deg, rgba(255,116,116,0.18), rgba(36,12,24,0.85));
    border:1px solid rgba(255,116,116,0.32);
    color:#ffd6d6;
    box-shadow:0 18px 32px rgba(255,76,76,0.14);
}
.medbay-alert i{ font-size:1.3rem; }
.medbay-alert strong{ display:block; font-size:0.95rem; margin-bottom:4px; color:#ffe2e2; }
.medbay-alert span{ font-size:0.85rem; color:rgba(255,222,222,0.85); }
.medbay-alert-success{ background:linear-gradient(135deg, rgba(0,200,120,0.18), rgba(12,28,24,0.9)); border-color:rgba(0,200,120,0.32); color:#d7ffef; box-shadow:0 18px 32px rgba(0,200,120,0.18); }
.medbay-alert-success strong{ color:#edfff9; }
.medbay-alert-success span{ color:rgba(215,255,239,0.82); }
.medbay-feedback{ display:flex; flex-direction:column; gap:12px; }
.medbay-grid{ display:grid; grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1fr); gap:28px; align-items:start; }
.medbay-services{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
.medbay-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:22px;
    border-radius:20px;
    background:linear-gradient(145deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 20px 42px rgba(2,6,23,0.55);
    transition:transform 180ms ease, box-shadow 200ms ease;
}
.medbay-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(0,240,255,0.08), transparent 55%);
    opacity:0;
    transition:opacity 200ms ease;
}
.medbay-card:hover{ transform:translateY(-6px); box-shadow:0 26px 48px rgba(2,8,28,0.65); }
.medbay-card:hover::after{ opacity:1; }
.medbay-card-highlight{ border-color:rgba(0,240,255,0.32); box-shadow:0 24px 50px rgba(0,240,255,0.16); }
.medbay-card-critical{ border-color:rgba(255,110,110,0.4); box-shadow:0 24px 50px rgba(255,110,110,0.16); }
.medbay-card-disabled{ opacity:0.65; box-shadow:0 18px 40px rgba(2,8,28,0.35); }
.medbay-card-header{ display:flex; align-items:flex-start; gap:16px; }
.medbay-card-icon{ width:44px; height:44px; border-radius:14px; background:rgba(0,240,255,0.12); display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:0 0 18px rgba(0,240,255,0.22); }
.medbay-card-critical .medbay-card-icon{ background:rgba(255,110,110,0.2); box-shadow:0 0 18px rgba(255,110,110,0.22); }
.medbay-card-header h3{ font-size:1.15rem; color:#e9f5ff; margin-bottom:4px; }
.medbay-card-header p{ font-size:0.92rem; color:rgba(207,219,237,0.82); }
.medbay-badge{
    margin-left:auto;
    align-self:flex-start;
    padding:4px 10px;
    border-radius:999px;
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:1.1px;
    text-transform:uppercase;
    background:rgba(0,240,255,0.16);
    border:1px solid rgba(0,240,255,0.32);
    color:#b9f8ff;
}
.medbay-card-critical .medbay-badge{ background:rgba(255,110,110,0.18); border-color:rgba(255,110,110,0.38); color:#ffdede; }
.medbay-card-meta{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.medbay-card-meta li{ display:flex; align-items:center; justify-content:space-between; font-size:0.9rem; color:#d7e9ff; background:rgba(255,255,255,0.02); border-radius:12px; padding:10px 14px; border:1px solid rgba(255,255,255,0.04); }
.medbay-card-meta span{ font-size:0.75rem; letter-spacing:1.3px; text-transform:uppercase; color:rgba(203,213,225,0.65); }
.medbay-card-action{ margin-top:auto; }
.medbay-card-action .btn{ width:100%; font-weight:700; }
.medbay-card-note{ font-size:0.85rem; color:rgba(203,213,225,0.8); margin:0; }
.medbay-sidebar{ display:flex; flex-direction:column; gap:20px; }
.medbay-tip p{ font-size:0.92rem; color:rgba(210,226,245,0.82); }
.medbay-tip a{ color:var(--neon); font-weight:600; }
.medbay-tip-list{ margin-top:12px; padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:0.85rem; color:rgba(203,213,225,0.75); }
.medbay-roster-table table{ width:100%; border-collapse:collapse; }
.medbay-roster-table th,
.medbay-roster-table td{ padding:10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.05); }
.medbay-roster-table th{ font-size:0.75rem; text-transform:uppercase; letter-spacing:1.2px; color:rgba(203,213,225,0.7); }
.medbay-roster-table tr.is-self{ background:rgba(0,240,255,0.08); }
.medbay-roster-table tr.is-self td:first-child{ font-weight:700; color:#f8fafc; }
.medbay-chip-inline{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background:rgba(0,240,255,0.18); border:1px solid rgba(0,240,255,0.3); font-size:0.7rem; text-transform:uppercase; letter-spacing:1px; margin-left:6px; color:#c6f8ff; }
.medbay-card-affordable{ border-color:rgba(0,200,120,0.42); box-shadow:0 26px 58px rgba(0,200,120,0.18); }
.medbay-card-affordable::after{ opacity:1; background:linear-gradient(180deg, rgba(0,200,120,0.16), transparent 60%); }
.medbay-card-affordable .medbay-card-icon{ background:rgba(0,200,120,0.22); box-shadow:0 0 18px rgba(0,200,120,0.32); }
.medbay-card-affordable .medbay-badge{ background:rgba(0,200,120,0.24); border-color:rgba(0,200,120,0.42); color:#e4ffe8; }
.medbay-card-warning{ border-color:rgba(255,182,70,0.42); box-shadow:0 24px 54px rgba(255,182,70,0.2); }
.medbay-card-warning::after{ opacity:1; background:linear-gradient(180deg, rgba(255,182,70,0.12), transparent 60%); }
.medbay-card-warning .medbay-card-icon{ background:rgba(255,182,70,0.2); box-shadow:0 0 16px rgba(255,182,70,0.28); }
.medbay-card-warning .medbay-badge{ background:rgba(255,182,70,0.18); border-color:rgba(255,182,70,0.36); color:#fff1d9; }
.medbay-card-ready{ position:relative; animation:medbay-ready-pulse 1.6s ease-in-out infinite; }
.medbay-card-ready::after{ opacity:1; background:linear-gradient(180deg, rgba(0,200,120,0.18), transparent 60%); }
.medbay-card-ready .medbay-card-icon{ background:rgba(0,200,120,0.28); }
.medbay-card-ready .medbay-badge{ background:rgba(0,200,120,0.26); border-color:rgba(0,200,120,0.46); color:#f1fff7; }
.medbay-card-projection{ background:rgba(0,240,255,0.05); }
.medbay-card-projection span{ color:rgba(203,213,225,0.7); }
.medbay-card-projection strong{ color:#ccfbff; }
@keyframes medbay-ready-pulse{
    0%{ box-shadow:0 0 0 0 rgba(0,200,120,0.22); }
    70%{ box-shadow:0 0 0 16px rgba(0,200,120,0); }
    100%{ box-shadow:0 0 0 0 rgba(0,200,120,0); }
}

@media (max-width: 1024px){
    .medbay-grid{ grid-template-columns:1fr; }
    .medbay-sidebar{ order:-1; }
}

@media (max-width: 720px){
    .medbay-hero{ padding:24px; }
    .medbay-vitals{ width:100%; justify-content:space-between; }
    .medbay-health-ring{ width:120px; }
}

@media (max-width: 540px){
    .medbay-services{ grid-template-columns:1fr; }
    .medbay-hero-body{ gap:22px; }
    .medbay-chip-row{ gap:10px; }
}

/* --- Items / Arsenal Exchange --- */
.items-shell{ display:flex; flex-direction:column; gap:32px; }
.items-hero{
    position:relative;
    padding:36px;
    border-radius:28px;
    background:radial-gradient(circle at 12% 18%, rgba(0,240,255,0.16), transparent 55%),
              radial-gradient(circle at 88% 22%, rgba(255,204,51,0.16), transparent 48%),
              linear-gradient(160deg, rgba(10,14,28,0.95), rgba(8,14,30,0.94));
    border:1px solid rgba(0,240,255,0.18);
    box-shadow:0 28px 60px rgba(2,8,24,0.58);
    overflow:hidden;
}
.items-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(0,240,255,0.08), transparent 45%, rgba(255,204,51,0.12));
    pointer-events:none;
}
.items-hero-body{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:32px; z-index:1; }
.items-hero-text{ max-width:540px; display:flex; flex-direction:column; gap:18px; }
.items-hero-kicker{ font-size:0.78rem; letter-spacing:2.2px; text-transform:uppercase; color:rgba(203,213,225,0.8); }
.items-hero-text h1{ font-family:'Orbitron', sans-serif; font-size:2.4rem; color:#f8fafc; text-shadow:0 10px 22px rgba(0,240,255,0.22); }
.items-hero-text p{ font-size:1rem; color:rgba(214,230,247,0.84); line-height:1.6; }
.items-chip-row{ display:flex; flex-wrap:wrap; gap:12px; }
.items-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-size:0.85rem; font-weight:600; background:rgba(0,240,255,0.12); border:1px solid rgba(0,240,255,0.32); color:#c8f0ff; letter-spacing:0.6px; text-transform:uppercase; }
.items-chip i{ color:var(--neon); font-size:1rem; }
.items-chip-primary{ background:rgba(255,204,51,0.2); border-color:rgba(255,204,51,0.42); color:#ffeac0; }
.items-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.items-hero-graphic{ flex:1; min-width:260px; max-width:380px; position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); background:linear-gradient(160deg, rgba(8,16,32,0.9), rgba(12,22,44,0.92)); box-shadow:0 18px 40px rgba(2,6,23,0.55); }
.items-hero-graphic img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; opacity:0.9; }
.items-feedback{ display:flex; flex-direction:column; gap:12px; }
.items-nav{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-start; }
.items-nav-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:14px;
    background:linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border:1px solid rgba(255,255,255,0.08);
    color:rgba(207,220,240,0.92);
    font-weight:600;
    cursor:pointer;
    transition:all 0.22s ease;
}
.items-nav-button i{ color:var(--neon); font-size:1rem; }
.items-nav-button:hover{ border-color:rgba(0,240,255,0.28); box-shadow:0 12px 28px rgba(0,240,255,0.16); transform:translateY(-2px); }
.items-nav-button.active{ background:rgba(0,240,255,0.18); border-color:rgba(0,240,255,0.4); color:#e4fbff; }
.items-filter-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px; border-radius:18px; background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); box-shadow:0 12px 28px rgba(2,6,23,0.45); }
.items-filter-toggle{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(0,240,255,0.08); border:1px solid rgba(0,240,255,0.22); font-weight:600; font-size:0.85rem; color:#d4f4ff; cursor:pointer; transition:all 0.2s ease; }
.items-filter-toggle input{ accent-color:var(--neon); width:18px; height:18px; }
.items-filter-toggle:hover{ background:rgba(0,240,255,0.14); }
.items-filter-toggle.disabled{ opacity:0.5; cursor:default; background:rgba(148,163,184,0.12); border-color:rgba(148,163,184,0.18); }
.items-filter-meta{ font-size:0.85rem; color:rgba(203,213,225,0.72); font-weight:600; }
.items-shell--affordable-only .items-card-locked{ display:none; }
.items-sections{ display:flex; flex-direction:column; gap:32px; }
.items-section{ display:flex; flex-direction:column; gap:20px; }
.items-section-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:0 4px; }
.items-section-lead{ display:flex; align-items:flex-start; gap:16px; }
.items-section-icon{ width:52px; height:52px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:rgba(0,240,255,0.15); border:1px solid rgba(0,240,255,0.28); box-shadow:0 0 18px rgba(0,240,255,0.18); font-size:1.6rem; color:var(--neon); }
.items-section-header h2{ font-size:1.6rem; color:#f0faff; font-family:'Orbitron', sans-serif; }
.items-section-header p{ margin-top:6px; font-size:0.95rem; color:rgba(210,226,245,0.82); }
.items-section-count{ display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.08); font-weight:600; font-size:0.8rem; color:rgba(207,220,240,0.78); text-transform:uppercase; letter-spacing:1.1px; }
.items-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:22px; }
.items-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:22px;
    border-radius:20px;
    background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:0 22px 44px rgba(2,8,24,0.55);
    overflow:hidden;
    transition:transform 220ms ease, box-shadow 220ms ease, opacity 240ms ease;
}
.items-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(0,240,255,0.08), transparent 60%);
    opacity:0;
    transition:opacity 200ms ease;
    pointer-events:none;
}
.items-card-observe{ opacity:0; transform:translateY(12px); }
.items-card-visible{ opacity:1; transform:translateY(0); }
.items-card:hover{ transform:translateY(-6px); box-shadow:0 28px 52px rgba(2,10,30,0.65); }
.items-card:hover::after{ opacity:1; }
.items-card-header{ display:flex; gap:18px; }
.items-card-image{ width:86px; height:86px; border-radius:18px; background:linear-gradient(145deg, rgba(0,240,255,0.12), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 12px 26px rgba(0,240,255,0.18); }
.items-card-image img{ width:100%; height:100%; object-fit:cover; }
.items-card-heading{ display:flex; flex-direction:column; gap:6px; }
.items-card-heading h3{ font-size:1.2rem; color:#f3fbff; }
.items-card-description{ font-size:0.92rem; color:rgba(207,220,240,0.78); line-height:1.45; }
.items-card-tag{ align-self:flex-start; padding:4px 10px; border-radius:999px; background:rgba(0,240,255,0.16); border:1px solid rgba(0,240,255,0.28); font-size:0.7rem; text-transform:uppercase; letter-spacing:1.1px; color:#baf6ff; font-weight:700; }
.items-card-stats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:12px; }
.items-card-stats li{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.items-card-stats span{ font-size:0.74rem; text-transform:uppercase; letter-spacing:1.2px; color:rgba(203,213,225,0.66); }
.items-card-stats strong{ font-size:1.08rem; color:#e2f8ff; }
.items-card-footer{ display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.items-card-cost{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.items-card-price{ font-size:1.1rem; font-weight:700; color:#ffe6a3; }
.items-card-requirement{ font-size:0.8rem; color:rgba(255,134,134,0.86); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.items-card-action .btn{ width:100%; font-weight:700; }
.items-card-note{ margin:0; font-size:0.82rem; color:rgba(203,213,225,0.72); }
.items-card-ready{ border-color:rgba(0,200,120,0.34); box-shadow:0 26px 58px rgba(0,200,120,0.16); }
.items-card-ready::after{ opacity:1; background:linear-gradient(180deg, rgba(0,200,120,0.16), transparent 60%); }
.items-card-ready .items-card-tag{ background:rgba(0,200,120,0.18); border-color:rgba(0,200,120,0.34); color:#dfffea; }
.items-card-locked{ border-color:rgba(148,163,184,0.16); box-shadow:0 18px 38px rgba(15,23,42,0.45); opacity:0.92; }
.items-card-locked .items-card-price{ color:rgba(226,232,240,0.68); }
.items-card-locked .btn{ background:rgba(148,163,184,0.16); border-color:rgba(148,163,184,0.26); cursor:not-allowed; }
.items-card-locked .items-card-note{ color:rgba(148,163,184,0.78); }
.items-empty{ padding:36px 24px; border-radius:20px; background:linear-gradient(160deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); text-align:center; font-size:0.95rem; color:rgba(203,213,225,0.72); box-shadow:0 18px 36px rgba(2,6,23,0.45); }

@media (max-width: 1024px){
    .items-hero{ padding:28px; }
    .items-hero-graphic{ max-width:320px; }
    .items-filter-bar{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 768px){
    .items-hero-body{ flex-direction:column; align-items:flex-start; }
    .items-hero-graphic{ width:100%; max-width:100%; }
    .items-nav{ justify-content:flex-start; }
}

@media (max-width: 540px){
    .items-chip-row{ gap:10px; }
    .items-nav-button{ width:100%; justify-content:center; }
    .items-filter-bar{ gap:12px; }
    .items-filter-meta{ align-self:flex-start; }
}

/* --- Leaderboard --- */
.leaderboard-tabs{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap }
.leaderboard-tab{ padding:8px 12px; background:#e9eef6; border-radius:6px; font-weight:700 }
.leaderboard-tab.active{ background:#2a5298; color:#fff }
.leaderboard-description{ margin-bottom:16px; color:#5b6b82; max-width:720px }
.leaderboard-error{ background:#fdecea; color:#a94442; padding:10px 14px; border-radius:6px; margin-bottom:12px; font-size:0.95rem }
.leaderboard-error-details{ display:block; font-size:0.82rem; opacity:0.8; margin-top:4px; word-break:break-word }
.leaderboard-table td.leaderboard-metric{ min-width:180px }
.metric-primary{ display:block; font-weight:700; color:#1e2a3b }
.current-user-row .metric-primary{ color:#0b5ed7 }
.metric-subtext{ display:block; font-size:0.82rem; color:#64748b; margin-top:2px }
.leaderboard-empty{ text-align:center; padding:24px 12px; color:#64748b; font-style:italic }
.leaderboard-weekly{ background:#f4f8ff; border:1px solid #d5e2ff; border-radius:8px; padding:14px 16px; margin-bottom:18px }
.leaderboard-weekly-header{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px }
.leaderboard-weekly-title{ display:flex; flex-direction:column; gap:4px }
.leaderboard-weekly-title strong{ font-size:1rem; color:#1e2a3b }
.leaderboard-weekly-prizes{ font-size:0.85rem; color:#4361ee }
.leaderboard-weekly-reset{ font-size:0.85rem; color:#5b6b82; font-weight:600 }
.leaderboard-weekly-body{ display:flex; flex-direction:column; gap:8px }
.leaderboard-weekly-range{ font-size:0.85rem; color:#364152; font-weight:600 }
.leaderboard-weekly-winners{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px }
.leaderboard-weekly-winners li{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:#fff; border-radius:6px; padding:8px 10px; border:1px solid #e0e7ff }
.leaderboard-weekly-winners .placement{ font-weight:700; color:#2a5298 }
.leaderboard-weekly-winners .credits{ font-size:0.85rem; color:#0f6d5f; font-weight:600 }
.leaderboard-weekly-winners .weekly-metric{ font-size:0.8rem; color:#64748b }
.leaderboard-weekly-note{ margin:0; font-size:0.85rem; color:#4361ee }

.sponsor-spotlight{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:22px 24px;
    border-radius:20px;
    background:linear-gradient(145deg, rgba(10,24,46,0.94), rgba(18,12,46,0.9));
    border:1px solid rgba(0,240,255,0.2);
    box-shadow:0 24px 46px rgba(2,10,30,0.55), inset 0 0 26px rgba(0,240,255,0.06);
}
.sponsor-spotlight-header{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:14px;
}
.sponsor-spotlight-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:999px;
    font-size:0.75rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    background:rgba(0,240,255,0.14);
    border:1px solid rgba(0,240,255,0.28);
    color:#c7f4ff;
    font-weight:700;
}
.sponsor-spotlight-headline{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.sponsor-spotlight-headline strong{
    font-size:1.35rem;
    font-family:'Orbitron', sans-serif;
    color:#f8fafc;
}
.sponsor-spotlight-headline span{
    font-size:0.85rem;
    color:rgba(203,213,225,0.78);
}
.sponsor-spotlight-balance{
    margin-left:auto;
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:flex-end;
    font-size:0.85rem;
    color:rgba(203,213,225,0.7);
}
.sponsor-spotlight-balance strong{
    font-size:1.2rem;
    color:#ffcc33;
}
.sponsor-spotlight-body{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items:stretch;
}
.sponsor-spotlight-copy{
    flex:1 1 280px;
    display:flex;
    flex-direction:column;
    gap:12px;
    color:rgba(214,226,245,0.86);
    font-size:0.95rem;
}
.sponsor-spotlight-copy p{
    margin:0;
    line-height:1.55;
}
.sponsor-spotlight-copy ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.sponsor-spotlight-copy li{
    position:relative;
    padding-left:20px;
}
.sponsor-spotlight-copy li::before{
    content:'✦';
    position:absolute;
    left:0;
    color:var(--neon);
    opacity:0.75;
    font-size:0.8rem;
}
.sponsor-spotlight-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.sponsor-emblem-card{
    flex:0 1 240px;
    padding:16px 18px;
    border-radius:16px;
    background:linear-gradient(155deg, rgba(0,240,255,0.18), rgba(138,79,255,0.12));
    border:1px solid rgba(0,240,255,0.32);
    box-shadow:0 16px 34px rgba(2,8,24,0.45);
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#ecf7ff;
}
.sponsor-emblem-card .sponsor-emblem-label{
    font-weight:700;
    font-size:1rem;
    color:#f8fafc;
}
.sponsor-emblem-card p{
    margin:0;
    font-size:0.85rem;
    color:rgba(228,235,255,0.78);
    line-height:1.4;
}
.sponsor-spotlight-meta{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1 1 220px;
}
.sponsor-spotlight-meta li{
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:0.82rem;
    color:rgba(210,222,240,0.78);
}
.sponsor-spotlight-meta strong{
    font-size:0.95rem;
    color:#f8fafc;
    word-break:break-word;
}
.bar-sponsor-spotlight{
    margin:26px 0;
}
.hangar-sponsor-spotlight{
    margin-top:20px;
}
.leaderboard-sponsor-callout{
    margin-top:6px;
    padding:6px 10px;
    border-radius:10px;
    border-left:3px solid rgba(0,240,255,0.35);
    background:rgba(0,240,255,0.08);
    display:flex;
    flex-direction:column;
    gap:4px;
    color:rgba(214,226,245,0.86);
}
.leaderboard-sponsor-tier{
    font-size:0.82rem;
    font-weight:700;
    color:#f8fafc;
}
.leaderboard-sponsor-emblem{
    font-size:0.78rem;
    font-weight:600;
    color:#ffcc33;
}
.leaderboard-sponsor-story{
    margin:0;
    font-size:0.75rem;
    color:rgba(203,213,225,0.72);
    line-height:1.36;
}

@media (max-width: 860px){
    .sponsor-spotlight{ padding:20px; }
    .sponsor-spotlight-header{ align-items:flex-start; }
    .sponsor-spotlight-balance{ margin-left:0; align-items:flex-start; }
    .sponsor-spotlight-body{ flex-direction:column; }
    .sponsor-emblem-card{ width:100%; }
}

/* Tables and messages */
.data-table{ width:100%; border-collapse:collapse; margin-top:10px }
.data-table th, .data-table td{ padding:10px; border-bottom:1px solid #eef2f7; text-align:left }
.error-message{ background:#fdecea; color:#721c24; padding:12px; border-radius:8px }
.success-message{ background:#e9f7ee; color:#155724; padding:12px; border-radius:8px }

/* Forms */
.form-group{ margin-bottom:12px }
.form-group label{ display:block; margin-bottom:6px; font-weight:700 }
.form-group input, .form-group textarea, .form-group select{ width:100%; padding:10px; border-radius:6px; border:1px solid #e6e9ee }

/* Utilities and helpers */
.muted{ color:#777; font-size:0.95rem }
.info-text{ color:#2a5298; font-weight:700 }

/* Responsive */
@media (max-width: 768px){
  .container{ padding:12px }
  .header{ flex-direction:column; align-items:flex-start; gap:10px }
  .profile-header{ flex-direction:column; text-align:center }
  .property-details, .crime-details{ grid-template-columns:1fr }
}

/* Dark card surfaces and theme fixes to remove hard white boxes */
.content, .card, .property-card, .profile-section, .service-card, .city-card, .drug-card, .session-card, .profile-header, .equipped-item, .battle-power, .item-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    color: var(--muted);
    box-shadow: 0 6px 20px rgba(2,6,23,0.6);
}

/* Stats bar and stat items: dark glass */
.stats-bar {
    display:flex; gap:12px; padding:12px; border-radius:8px;
    background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}
.stat-item {
    padding:8px 12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
    border-left:4px solid rgba(255,255,255,0.04); border-radius:6px; color:var(--muted);
}

/* Make headings and content titles glow subtly on dark cards */
.content h2, .property-card h3, .profile-section h3, .city-card h3, .drug-card h4 {
    color: var(--neon);
    text-shadow: 0 2px 10px rgba(0,240,255,0.06);
}

/* Tables - use transparent rows so they rest on dark cards */
.data-table th, .data-table td{ background: transparent; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,0.02); }

/* Ensure messages and error/success boxes fit the theme */
.error-message{ background: linear-gradient(180deg, rgba(255,80,80,0.06), rgba(255,80,80,0.03)); color:#ffb3b3; }
.success-message{ background: linear-gradient(180deg, rgba(0,200,120,0.06), rgba(0,200,120,0.03)); color:#bff3d6; }

/* Small tweak: nav buttons darker */
.nav-button { background: rgba(42,82,152,0.12); color: var(--muted); border: 1px solid rgba(255,255,255,0.03); }
.nav-button:hover{ background: rgba(42,82,152,0.18); color:#fff }

/* Accessibility: increase contrast for text inside former white boxes */
.content, .card { color: #dcecf6; }

/* End of dark card/theme adjustments */

/* End of stylesheet */

.profile-rank {
    font-size: 1.2em;
    font-weight: bold;
    color: #666;
    margin: 5px 0;
}

.profile-joined {
    color: #999;
    font-size: 0.9em;
}

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

.profile-sections {
    display: grid;
    gap: 20px;
}

.profile-section {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
}

.profile-section h3 {
    color: #2a5298;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}

.battle-power {
    margin-top: 20px;
    padding: 15px;
    background: white;
    border-radius: 5px;
}

.power-item {
    padding: 8px 0;
}

.equipped-items {
    display: grid;
    gap: 10px;
}

.equipped-item {
    padding: 15px;
    background: white;
    border-radius: 5px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.item-type {
    color: #666;
    font-size: 0.9em;
}

.item-stat {
    background: #2a5298;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: bold;
}

.stats-list {
    display: grid;
    gap: 10px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: white;
    border-radius: 5px;
}

.stat-row span {
    color: #666;
}

.stat-row strong {
    color: #2a5298;
}

/* Profile dark theme overrides and title pill */
.profile-header, .profile-section, .equipped-item, .battle-power, .stat-row {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.05);
    color: var(--muted);
}
.profile-section h3 {
    color: var(--neon);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stat-row {
    display:flex; justify-content:space-between; align-items:center;
}
.stat-row strong { color:#e8f2ff; }
.battle-power { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.equipped-item { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }

.profile-title-pill{
    display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
    background: rgba(0,240,255,0.10);
    border:1px solid rgba(0,240,255,0.28);
    color:#bfefff; font-weight:700; letter-spacing:0.02em;
}
.profile-title-pill .bi{ color:#8be9ff; }

/* Travel System */
.travel-page .travel-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
}

.travel-page .travel-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.travel-page .cities-grid,
.travel-page .cosmos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.travel-page .city-card,
.travel-page .cosmos-card {
    background: linear-gradient(180deg, rgba(12, 20, 36, 0.9), rgba(6, 12, 24, 0.94));
    border-radius: 22px;
    border: 1px solid rgba(0, 240, 255, 0.16);
    padding: 24px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.5), 0 0 30px rgba(0,240,255,0.16);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.travel-page .city-card:hover,
.travel-page .cosmos-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 52px rgba(0,0,0,0.55), 0 0 36px rgba(0,240,255,0.22);
}

.travel-page .city-card.current-location {
    border-color: rgba(0, 240, 255, 0.4);
    background: linear-gradient(180deg, rgba(12, 26, 42, 0.95), rgba(9, 20, 32, 0.95));
}

.travel-page .city-card h3,
.travel-page .cosmos-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    color: #f8fafc;
}

.travel-page .city-description,
.travel-page .cosmos-card p {
    color: rgba(203, 213, 225, 0.78);
    line-height: 1.5;
}

.travel-page .city-details {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

.travel-page .city-details .detail strong {
    color: var(--neon);
}

.travel-page .cosmos-meta {
    list-style: none;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: rgba(203,213,225,0.72);
}

.travel-page .cosmos-meta i {
    color: var(--neon);
    margin-right: 6px;
}

.travel-page .destination-reward {
    font-size: 0.85rem;
    color: #ffe6a1;
    background: rgba(255, 204, 51, 0.08);
    border: 1px solid rgba(255, 204, 51, 0.3);
    border-radius: 12px;
    padding: 10px 14px;
}

.travel-page .cosmos-requirements {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.travel-page .requirement-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(203,213,225,0.75);
}

.travel-page .requirement-pill.met {
    border-color: rgba(0,240,255,0.35);
    background: rgba(0,240,255,0.12);
    color: #afffe6;
}

.travel-page .requirement-pill.missing {
    border-color: rgba(255,99,99,0.32);
    background: rgba(255,99,99,0.12);
    color: #ffbcbc;
}

.travel-page .requirement-pill .req-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    background: rgba(255,255,255,0.12);
}

.travel-page .requirement-pill.met .req-icon {
    background: rgba(0,240,255,0.28);
    color: #0c1d2b;
}

.travel-page .requirement-pill.missing .req-icon {
    background: rgba(255,99,99,0.32);
    color: #fff;
}

.travel-page .cosmos-card.locked {
    border-color: rgba(255,99,99,0.28);
    opacity: 0.92;
}

.travel-page .cosmos-card form {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.travel-page .travel-disabled-note {
    font-size: 0.78rem;
    color: rgba(255,170,170,0.85);
}

.travel-page .cosmos-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    background: rgba(0,240,255,0.14);
    border: 1px solid rgba(0,240,255,0.28);
    color: #affff3;
}

.travel-page .cosmos-loot {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.travel-page .cosmos-loot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.travel-page .cosmos-loot-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #f8fafc;
}

.travel-page .cargo-capacity-chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.78rem;
    color: rgba(203,213,225,0.86);
}

.travel-page .loot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.travel-page .loot-item {
    background: rgba(6, 14, 28, 0.78);
    border-radius: 16px;
    border: 1px solid rgba(0,240,255,0.14);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.35);
}

.travel-page .loot-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.travel-page .loot-item-header strong {
    font-size: 1rem;
    color: #f8fafc;
}

.travel-page .loot-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.82rem;
    color: rgba(203,213,225,0.75);
}

.travel-page .loot-item-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.travel-page .loot-item-body small {
    color: rgba(203,213,225,0.65);
}

.travel-page .loot-trade-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.travel-page .loot-trade-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: rgba(203,213,225,0.75);
}

.travel-page .loot-trade-form input[type="number"] {
    width: 92px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,240,255,0.2);
    background: rgba(0,0,0,0.35);
    color: #e2e8f0;
}

.travel-page .loot-empty {
    font-size: 0.82rem;
    color: rgba(203,213,225,0.7);
    padding: 6px 0;
}

.trade-hint {
    display: block;
    color: rgba(255,170,170,0.85);
    font-size: 0.75rem;
    margin-top: 4px;
}

.rarity-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
    color: #e2e8f0;
}

.rarity-badge.rarity-common {
    background: rgba(129,199,132,0.16);
    border-color: rgba(129,199,132,0.38);
    color: #c8ffd0;
}

.rarity-badge.rarity-uncommon {
    background: rgba(77,182,172,0.18);
    border-color: rgba(77,182,172,0.4);
    color: #b8fff6;
}

.rarity-badge.rarity-rare {
    background: rgba(100,181,246,0.18);
    border-color: rgba(100,181,246,0.4);
    color: #cbe4ff;
}

.rarity-badge.rarity-epic {
    background: rgba(171,134,255,0.2);
    border-color: rgba(171,134,255,0.45);
    color: #e0d4ff;
}

.rarity-badge.rarity-legendary {
    background: rgba(255,215,128,0.22);
    border-color: rgba(255,215,128,0.45);
    color: #ffeccc;
}

.travel-page .travel-tip {
    background: linear-gradient(180deg, rgba(48, 26, 8, 0.85), rgba(30, 14, 4, 0.9));
    border-radius: 20px;
    border: 1px solid rgba(255, 204, 51, 0.32);
    padding: 24px 28px;
    color: #ffe8c2;
    box-shadow: 0 16px 35px rgba(0,0,0,0.45), 0 0 20px rgba(255,204,51,0.16);
}

.travel-page .travel-tip h3 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 12px;
    color: #ffdf8a;
}

.travel-page .travel-tip ul {
    margin-left: 20px;
    display: grid;
    gap: 8px;
}

.travel-page .travel-tip li {
    line-height: 1.45;
}

.travel-page .info-text {
    color: rgba(203,213,225,0.68);
    font-size: 0.9rem;
}

.travel-page .spacecraft-panel {
    margin: 28px 0;
    padding: 26px 30px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(10,24,38,0.96), rgba(12,20,44,0.9));
    border: 1px solid rgba(0,240,255,0.22);
    box-shadow: 0 22px 48px rgba(0,0,0,0.55), 0 0 36px rgba(0,240,255,0.18);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.travel-page .spacecraft-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.travel-page .eyebrow-label {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: rgba(0,240,255,0.7);
}

.travel-page .spacecraft-panel-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    color: #f8fafc;
}

.travel-page .spacecraft-panel-subtitle {
    color: rgba(203,213,225,0.68);
    font-size: 0.9rem;
}

.travel-page .spacecraft-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.7px;
}

.travel-page .spacecraft-status-chip.status-active {
    background: rgba(0,240,255,0.16);
    border: 1px solid rgba(0,240,255,0.32);
    color: #a9fff4;
}

.travel-page .spacecraft-status-chip.status-damaged {
    background: rgba(255, 204, 51, 0.14);
    border: 1px solid rgba(255, 204, 51, 0.32);
    color: #ffe6ac;
}

.travel-page .spacecraft-status-chip.status-destroyed,
.travel-page .spacecraft-status-chip.status-offline {
    background: rgba(255, 99, 99, 0.16);
    border: 1px solid rgba(255, 99, 99, 0.32);
    color: #ffbcbc;
}

.travel-page .spacecraft-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.travel-page .spacecraft-metric {
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.travel-page .spacecraft-metric span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(203,213,225,0.6);
}

.travel-page .spacecraft-metric strong {
    font-size: 1.25rem;
    color: #f8fafc;
}

.travel-page .spacecraft-metric small {
    color: rgba(203,213,225,0.6);
    font-size: 0.78rem;
}

.travel-page .spacecraft-actions {
    display: flex;
    justify-content: flex-end;
}

.travel-page .info-banner {
    margin: 18px 0;
    padding: 16px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(0,240,255,0.2);
    color: rgba(203,213,225,0.85);
}

.travel-page .info-banner.warning {
    background: linear-gradient(180deg, rgba(44, 18, 18, 0.85), rgba(28,10,10,0.88));
    border-color: rgba(255, 120, 90, 0.35);
    color: #ffc9bd;
}

.travel-page .travel-callout {
    margin: 26px 0 18px;
    padding: 26px 30px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(12, 24, 44, 0.95), rgba(14, 18, 36, 0.92));
    border: 1px solid rgba(0, 240, 255, 0.22);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 32px rgba(0, 240, 255, 0.16);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 22px;
    align-items: center;
}

.travel-page .travel-callout .callout-copy {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.travel-page .travel-callout .callout-copy h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: #f8fafc;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.travel-page .travel-callout .callout-copy p {
    color: rgba(203,213,225,0.75);
    font-size: 0.95rem;
    line-height: 1.5;
}

.travel-page .travel-callout .callout-actions {
    flex: 0 1 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.travel-page .travel-callout .callout-actions .btn {
    min-width: 200px;
}

.travel-page .travel-callout .callout-actions .callout-subtext {
    font-size: 0.78rem;
    color: rgba(203,213,225,0.65);
}

@media (max-width: 768px) {
    .travel-page .travel-callout {
        padding: 22px;
        flex-direction: column;
        align-items: flex-start;
    }
    .travel-page .travel-callout .callout-actions {
        width: 100%;
        align-items: stretch;
    }
    .travel-page .travel-callout .callout-actions .btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .travel-page .spacecraft-panel {
        padding: 22px;
    }
    .travel-page .spacecraft-panel-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .travel-page .spacecraft-actions {
        justify-content: flex-start;
    }
}

/* Spacecraft Hangar */
.hangar-page .page-container {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.hangar-page .success-message,
.hangar-page .error-message {
    margin-bottom: 8px;
}

.hangar-page .info-banner {
    margin: 10px 0 4px;
    padding: 16px 20px;
    border-radius: 18px;
    background: rgba(12, 18, 32, 0.85);
    border: 1px solid rgba(0, 240, 255, 0.22);
    color: rgba(203, 213, 225, 0.85);
}

.hangar-page .info-banner.warning {
    background: linear-gradient(180deg, rgba(44, 18, 18, 0.88), rgba(28, 10, 10, 0.9));
    border-color: rgba(255, 120, 90, 0.42);
    color: #ffd5c9;
}

.hangar-page .info-banner ul {
    margin: 8px 0 0 18px;
    display: grid;
    gap: 6px;
}

.hangar-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding: 32px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(10, 24, 42, 0.96), rgba(16, 12, 36, 0.9));
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.55), 0 0 38px rgba(0, 240, 255, 0.18);
    overflow: hidden;
}

.hangar-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 12%, rgba(0, 240, 255, 0.18), transparent 55%),
                radial-gradient(circle at 84% 20%, rgba(138, 79, 255, 0.16), transparent 55%);
    pointer-events: none;
}

.hangar-hero-text {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.hangar-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: #f8fafc;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.hangar-subtitle {
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.95rem;
}

.hangar-page .status-active {
    color: #8fffea;
}

.hangar-page .status-damaged {
    color: #ffd98e;
}

.hangar-page .status-destroyed,
.hangar-page .status-offline {
    color: #ff9b9b;
}

.hangar-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.hangar-metric {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hangar-metric span {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.7px;
    color: rgba(203, 213, 225, 0.62);
}

.hangar-metric strong {
    font-size: 1.35rem;
    color: #f8fafc;
}

.hangar-metric small {
    color: rgba(203, 213, 225, 0.62);
    font-size: 0.78rem;
}

/* Fuel gauge */
.hangar-fuel-bar {
    margin-top: 8px;
    height: 10px;
    background: rgba(148, 163, 184, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
    overflow: hidden;
}
.hangar-fuel-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.75), rgba(138, 79, 255, 0.75));
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.35) inset;
}

/* Fuel management card */
.fuel-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 18px;
}
.fuel-card h3 { color: #fff; margin-bottom: 6px; }
.fuel-card p { margin-bottom: 10px; }
.fuel-form .fuel-form-row { display: flex; gap: 12px; align-items: end; margin-bottom: 10px; flex-wrap: wrap; }
.fuel-form label span { display: block; font-size: 0.78rem; color: rgba(203,213,225,0.7); margin-bottom: 4px; }
.fuel-form input[type="number"] { width: 160px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(0,0,0,0.2); color: #e2e8f0; }

/* Expedition fuel cost hint */
.exp-fuel-requirement { display: block; margin-top: 8px; font-size: 0.82rem; color: rgba(203,213,225,0.8); }
.exp-fuel-requirement.insufficient { color: #ff9b9b; }

.deployment-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: #f8fafc;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.deployment-boarded {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(59, 130, 246, 0.55));
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
}

.deployment-docked {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.32), rgba(100, 116, 139, 0.5));
    box-shadow: none;
}

.hangar-deployment-controls {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.hangar-deployment-controls form {
    margin: 0;
}

.hangar-deployment-controls .btn {
    min-width: 180px;
}

.deployment-tip {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(203, 213, 225, 0.72);
    max-width: 360px;
}

.hangar-hero-art {
    flex: 0 0 260px;
    max-width: 320px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* When action cards are placed under the art frame, stack them neatly */
.hangar-hero-art {
    flex-direction: column;
    align-items: flex-end;
}

.hangar-hero-actions {
    width: 100%;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.hangar-actions-grid-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 320px; /* match art frame width for alignment */
}

.hangar-actions-grid-inner .fuel-card,
.hangar-actions-grid-inner .repair-card,
.hangar-actions-grid-inner .rename-card {
    margin: 0;
}

.hangar-art-frame {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1;
    border-radius: 24px;
    padding: 18px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 240, 255, 0.22);
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.55), 0 0 32px rgba(0, 240, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hangar-art-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 32px rgba(0, 240, 255, 0.18));
    position: relative;
    z-index: 1;
}

.hangar-art-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    transform: none;
    padding: 6px 20px;
    border-radius: 999px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* Faction Expeditions */
.expeditions-page {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.expeditions-page .success-message,
.expeditions-page .error-message,
.expeditions-page .info-banner {
    margin-bottom: 12px;
}

.expeditions-page .info-banner {
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px solid rgba(0,240,255,0.2);
    background: rgba(10, 18, 36, 0.85);
    color: rgba(203,213,225,0.85);
}

.expeditions-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding: 34px 36px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(10, 24, 42, 0.96), rgba(14, 12, 34, 0.9));
    border: 1px solid rgba(0, 240, 255, 0.22);
    box-shadow: 0 28px 58px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 240, 255, 0.18);
    position: relative;
    overflow: hidden;
}

.expeditions-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(0, 240, 255, 0.18), transparent 50%),
                radial-gradient(circle at 85% 25%, rgba(138, 79, 255, 0.18), transparent 55%);
    pointer-events: none;
}

.expeditions-hero-copy {
    flex: 1 1 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.expeditions-hero-copy h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2rem;
    color: #f8fafc;
    text-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

.expeditions-season-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.75rem;
    color: rgba(0, 240, 255, 0.7);
}

.expeditions-season-intro {
    color: rgba(203,213,225,0.85);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 680px;
}

.expeditions-season-meta {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.expeditions-season-meta dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(203,213,225,0.64);
}

.expeditions-season-meta dd {
    font-size: 1.05rem;
    color: #f8fafc;
    font-weight: 600;
}

.expeditions-hero-art {
    flex: 0 1 260px;
    min-height: 220px;
    border-radius: 24px;
    background: url('../images/galaxy_map.png') center/cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 32px rgba(0,0,0,0.55);
    position: relative;
}

.expeditions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 26px;
}

.expedition-card {
    padding: 28px 30px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.expedition-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.expedition-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.expedition-hazard {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}

.expedition-hazard.hazard-low {
    background: rgba(56,189,248,0.18);
    border: 1px solid rgba(56,189,248,0.38);
    color: #b9ebff;
}

.expedition-hazard.hazard-moderate {
    background: rgba(125,211,252,0.18);
    border: 1px solid rgba(125,211,252,0.32);
    color: #dbeafe;
}

.expedition-hazard.hazard-high {
    background: rgba(255,204,128,0.18);
    border: 1px solid rgba(255,204,128,0.4);
    color: #ffe9c2;
}

.expedition-hazard.hazard-extreme {
    background: rgba(248,113,113,0.2);
    border: 1px solid rgba(248,113,113,0.45);
    color: #fecaca;
}

.expedition-window {
    font-size: 0.8rem;
    color: rgba(203,213,225,0.7);
}

.expedition-location {
    color: rgba(203,213,225,0.72);
    font-size: 0.88rem;
}

.expedition-brief {
    color: rgba(203,213,225,0.8);
    line-height: 1.6;
}

.expedition-rewards {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    color: rgba(203,213,225,0.78);
}

.expedition-difficulties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.expedition-difficulty-card {
    padding: 22px 24px;
    border-radius: 22px;
    background: rgba(3, 8, 20, 0.72);
    border: 1px solid rgba(0, 240, 255, 0.18);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.expedition-difficulty-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.difficulty-story {
    color: rgba(203,213,225,0.72);
    font-size: 0.88rem;
    line-height: 1.5;
}

.difficulty-cleared {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: rgba(226, 232, 240, 0.78);
}

.difficulty-cleared.is-cleared {
    background: rgba(34,197,94,0.24);
    border-color: rgba(34,197,94,0.45);
    color: #bbf7d0;
}

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

.difficulty-stats div {
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.difficulty-stats dt {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(203,213,225,0.6);
}

.difficulty-stats dd {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.difficulty-recommended h4,
.difficulty-loot h4 {
    font-size: 0.85rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(203,213,225,0.68);
    margin-bottom: 6px;
}

.difficulty-recommended ul,
.difficulty-loot ul {
    list-style: none;
    display: grid;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(226,232,240,0.82);
}

.difficulty-objectives {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.difficulty-objectives h4 {
    font-size: 0.85rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(203,213,225,0.68);
}

.difficulty-objectives ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.difficulty-objectives li {
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.65);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.difficulty-objectives li.objective-optional {
    border-color: rgba(250, 204, 21, 0.32);
    background: rgba(120, 53, 15, 0.25);
}

.objective-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.objective-sequence {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 12px;
    background: rgba(0, 240, 255, 0.14);
    border: 1px solid rgba(0, 240, 255, 0.28);
    color: #e0f2fe;
    font-size: 0.75rem;
    font-weight: 600;
}

.difficulty-objectives li.objective-optional .objective-sequence {
    background: rgba(250, 204, 21, 0.18);
    border-color: rgba(250, 204, 21, 0.35);
    color: #fef3c7;
}

.objective-header strong {
    font-size: 0.92rem;
    color: #f8fafc;
}

.objective-tag {
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(250, 204, 21, 0.88);
    border: 1px solid rgba(250, 204, 21, 0.35);
    border-radius: 999px;
    padding: 2px 10px;
    background: rgba(120, 53, 15, 0.22);
}

.difficulty-objectives li p {
    color: rgba(226,232,240,0.82);
    font-size: 0.85rem;
    line-height: 1.55;
}

.objective-score {
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(56, 189, 248, 0.78);
}

.difficulty-recommended li span {
    color: rgba(148, 163, 184, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.72rem;
    margin-right: 6px;
}

.difficulty-first-clear {
    margin-top: 6px;
    font-size: 0.8rem;
    color: rgba(203,213,225,0.7);
}

.difficulty-action {
    margin-top: auto;
}

.difficulty-action .btn,
.difficulty-action .btn-primary,
.difficulty-action button {
    min-width: 180px;
}

.expedition-empty {
    color: rgba(203,213,225,0.68);
    font-size: 0.9rem;
}

.expeditions-empty {
    padding: 28px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(203,213,225,0.78);
    text-align: center;
}

.expeditions-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.expeditions-leaderboard header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    color: #f8fafc;
}

.expeditions-leaderboard header p {
    color: rgba(203,213,225,0.68);
    font-size: 0.9rem;
}

.expeditions-leaderboard .table-wrapper {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 18, 0.82);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.4);
}

.expeditions-leaderboard table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.expeditions-leaderboard th,
.expeditions-leaderboard td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.expeditions-leaderboard th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.6px;
    color: rgba(203,213,225,0.65);
}

.expeditions-leaderboard tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.leaderboard-name {
    font-weight: 600;
    color: #f8fafc;
}

.leaderboard-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    margin-left: 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(0, 240, 255, 0.16);
    border: 1px solid rgba(0, 240, 255, 0.28);
    color: #a9fff4;
}

.leaderboard-tier.tier-2 {
    background: rgba(129, 140, 248, 0.16);
    border-color: rgba(129, 140, 248, 0.3);
    color: #c7d2fe;
}

.leaderboard-tier.tier-3 {
    background: rgba(255, 204, 51, 0.18);
    border-color: rgba(255, 204, 51, 0.35);
    color: #ffe8ab;
}

.expeditions-codex {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 30px 32px;
    border-radius: 28px;
    background: rgba(2, 6, 18, 0.88);
    border: 1px solid rgba(0, 240, 255, 0.16);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.45);
}

.expeditions-codex header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.55rem;
    color: #f8fafc;
    margin-bottom: 6px;
}

.expeditions-codex header p {
    color: rgba(203,213,225,0.7);
    font-size: 0.92rem;
    max-width: 720px;
}

.codex-seasons {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.codex-season {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.codex-season:first-of-type {
    padding-top: 0;
    border-top: none;
}

.codex-season-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    justify-content: space-between;
}

.codex-season-header h3 {
    font-size: 1.2rem;
    color: #e2e8f0;
}

.codex-season-window {
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
}

.codex-expedition {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.codex-expedition h4 {
    font-size: 1.05rem;
    color: #f8fafc;
}

.codex-expedition-sector {
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.codex-entries {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.codex-entry {
    border-radius: 18px;
    border: 1px solid rgba(0, 240, 255, 0.16);
    background: rgba(3, 8, 20, 0.85);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.codex-entry[open] {
    border-color: rgba(0, 240, 255, 0.35);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
}

.codex-entry summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, rgba(12, 26, 44, 0.92), rgba(6, 12, 28, 0.88));
}

.codex-entry summary::-webkit-details-marker {
    display: none;
}

.codex-entry-difficulty {
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(56, 189, 248, 0.8);
    flex-shrink: 0;
}

.codex-entry-title {
    font-weight: 600;
    color: #f8fafc;
    text-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}

.codex-entry-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(2, 6, 18, 0.92);
}

.codex-entry-tagline {
    font-size: 0.92rem;
    color: rgba(203,213,225,0.8);
    font-style: italic;
}

.codex-entry-body p {
    color: rgba(226,232,240,0.86);
    line-height: 1.6;
    font-size: 0.9rem;
}

.codex-entry-placeholder {
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.85rem;
}

.codex-entry-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.codex-entry-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 900px) {
    .expeditions-hero {
        padding: 26px;
    }
    .expeditions-hero-art {
        flex: 1 1 100%;
        min-height: 180px;
    }
    .expedition-card {
        padding: 22px;
    }
}

@media (max-width: 600px) {
    .expedition-difficulties {
        grid-template-columns: 1fr;
    }
}

.overlay-boarded {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.55);
    color: #bbf7d0;
}

.overlay-docked {
    background: rgba(248, 113, 113, 0.26);
    border-color: rgba(248, 113, 113, 0.58);
    color: #fecaca;
}

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

.module-card {
    padding: 22px 24px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(14, 22, 40, 0.92), rgba(10, 16, 28, 0.88));
    border: 1px solid rgba(0, 240, 255, 0.18);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 240, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.flagship-upgrades {
    padding: 28px 30px;
    border-radius: 26px;
    background: linear-gradient(150deg, rgba(12, 22, 40, 0.92), rgba(8, 14, 28, 0.86));
    border: 1px solid rgba(0, 240, 255, 0.16);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.flagship-upgrades-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.flagship-upgrades-header h3 {
    margin: 0;
    font-size: 1.75rem;
    color: #f8fafc;
}

.flagship-upgrades-header .muted {
    max-width: 520px;
    line-height: 1.45;
}

.flagship-upgrades-note {
    margin: 4px 0 0;
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.85rem;
    max-width: 260px;
}

.flagship-room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

.flagship-room {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.flagship-room.room-unlocked {
    border-color: rgba(0, 240, 255, 0.28);
    box-shadow: inset 0 0 24px rgba(0, 240, 255, 0.12);
}

.flagship-room.room-unlocked:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 240, 255, 0.42);
    box-shadow: inset 0 0 28px rgba(0, 240, 255, 0.18), 0 18px 32px rgba(0, 0, 0, 0.4);
}

.flagship-room.room-locked {
    background: rgba(8, 14, 24, 0.72);
    border-color: rgba(148, 163, 184, 0.24);
}

.flagship-room-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.flagship-room-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 240, 255, 0.12);
    border: 1px solid rgba(0, 240, 255, 0.2);
    color: rgba(0, 240, 255, 0.85);
    font-size: 1.5rem;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.18);
}

.flagship-room-meta h4 {
    margin: 0 0 6px;
    font-size: 1.25rem;
    color: #f8fafc;
}

.flagship-room-meta p {
    margin: 0;
    color: rgba(203, 213, 225, 0.78);
    font-size: 0.92rem;
    line-height: 1.35;
}

.flagship-room-status {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.flagship-room-status.status-ready {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #a7f3d0;
}

.flagship-room-status.status-locked {
    background: rgba(148, 163, 184, 0.16);
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: rgba(203, 213, 225, 0.72);
}

.flagship-room-flavor {
    margin: 0;
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.9rem;
    line-height: 1.4;
}

.flagship-room-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flagship-room-progress-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.8);
    overflow: hidden;
}

.flagship-room-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.35), rgba(129, 140, 248, 0.6));
}

.flagship-room-progress-label {
    font-size: 0.82rem;
    color: rgba(203, 213, 225, 0.78);
}

.flagship-room-requirements {
    margin: 0;
    padding-left: 20px;
    color: rgba(203, 213, 225, 0.75);
    font-size: 0.85rem;
    display: grid;
    gap: 6px;
}

.flagship-room-actions {
    display: flex;
    gap: 12px;
}

.flagship-room-actions .btn[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

.flagship-room-status.status-cooldown {
    background: rgba(251, 191, 36, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.32);
    color: rgba(254, 215, 102, 0.95);
}

.flagship-room-effect {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: rgba(56, 189, 248, 0.85);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.flagship-room-statusline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.78);
}

.flagship-room-statusline span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.flagship-room-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: rgba(203, 213, 225, 0.65);
}

.flagship-room-action-form {
    display: inline-flex;
}

.flagship-effects {
    margin: 28px 0;
    padding: 22px 26px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.95), rgba(8, 13, 24, 0.9));
    border: 1px solid rgba(0, 240, 255, 0.16);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
}

.flagship-effects-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.flagship-effects-header h3 {
    margin: 0;
    font-size: 1.45rem;
    color: #f8fafc;
}

.flagship-effects-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.flagship-effect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.12);
}

.flagship-effect-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.flagship-effect-main strong {
    font-size: 1rem;
    color: #e2e8f0;
}

.flagship-effect-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(56, 189, 248, 0.95);
}

.flagship-effect-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.85);
    align-items: flex-end;
}

.flagship-bonus-summary {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.flagship-bonus-chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(191, 219, 254, 0.95);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.flagship-cosmetics {
    margin: 30px 0;
    padding: 26px 30px;
    border-radius: 24px;
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.96), rgba(10, 18, 32, 0.9));
    border: 1px solid rgba(0, 240, 255, 0.18);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.flagship-cosmetics-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

.flagship-cosmetics-header h3 {
    margin: 0;
    font-size: 1.6rem;
    color: #f5f9ff;
}

.flagship-cosmetics-status {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: rgba(203, 213, 225, 0.82);
    align-self: center;
}

.flagship-cosmetics-status.is-active {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.38);
    color: rgba(134, 239, 172, 0.95);
}

.flagship-cosmetics-lore {
    margin: -12px 0 4px;
    color: rgba(191, 219, 254, 0.82);
    font-size: 0.92rem;
    line-height: 1.5;
}

.flagship-cosmetics-unlocks {
    margin: -6px 0 10px 18px;
    padding: 0;
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.85rem;
    list-style: disc;
}

.flagship-cosmetics-unlocks li {
    margin-bottom: 4px;
}

.flagship-cosmetics-locked {
    margin-top: 6px;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}

.flagship-cosmetics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.flagship-cosmetics-preview {
    display: grid;
    gap: 12px;
    padding: 22px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.16);
}

.flagship-preview-banner,
.flagship-preview-trim,
.flagship-preview-uniform,
.flagship-preview-emblem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(0, 240, 255, 0.14);
}

.flagship-preview-banner {
    background: var(--preview-banner);
}

.flagship-preview-trim {
    background: var(--preview-trim);
}

.flagship-preview-uniform {
    background: var(--preview-uniform);
}

.flagship-preview-emblem span {
    color: rgba(226, 232, 240, 0.75);
}

.flagship-preview-emblem strong {
    color: #f8fafc;
}

.flagship-cosmetics-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cosmetics-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(203, 213, 225, 0.78);
}

.cosmetics-form input[type="color"],
.cosmetics-form select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.9);
    color: #f8fafc;
}

.cosmetics-form input[type="color"] {
    height: 42px;
    padding: 0;
}

.flagship-cosmetics .btn {
    align-self: flex-start;
}


.hangar-market {
    padding: 26px 30px;
    border-radius: 26px;
    background: linear-gradient(165deg, rgba(10, 20, 38, 0.95), rgba(18, 14, 34, 0.92));
    border: 1px solid rgba(0, 240, 255, 0.18);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 240, 255, 0.16);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hangar-market-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.hangar-market-header h2 {
    font-size: 1.6rem;
    margin-bottom: 6px;
    color: #f5f9ff;
}

.hangar-market-header .muted {
    color: rgba(203, 213, 225, 0.68);
    max-width: 480px;
}

.hangar-market-balance {
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.18);
    display: flex;
    flex-direction: column;
    min-width: 160px;
    text-align: right;
}

.hangar-market-balance .label {
    font-size: 0.76rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(203, 213, 225, 0.65);
}

.hangar-market-balance .value {
    font-size: 1.3rem;
    font-weight: 600;
    color: #f8fafc;
}

.hangar-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

.hangar-market-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 22px;
    background: rgba(8, 16, 28, 0.82);
    border: 1px solid rgba(0, 240, 255, 0.12);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.hangar-market-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 240, 255, 0.32);
}

.hangar-market-card.owned {
    border-color: rgba(104, 252, 233, 0.48);
    box-shadow: inset 0 0 22px rgba(82, 255, 215, 0.1);
}

.hangar-market-top {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.hangar-market-art {
    width: 84px;
    height: 84px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 240, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hangar-market-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hangar-market-info h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    color: #f5f9ff;
}

.hangar-market-info p {
    margin: 0;
    color: rgba(203, 213, 225, 0.7);
    font-size: 0.9rem;
    line-height: 1.4;
}

.hangar-market-stats {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hangar-market-stats li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hangar-market-stats span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(203, 213, 225, 0.6);
}

.hangar-market-stats strong {
    font-size: 1.1rem;
    color: #f8fafc;
}

.hangar-market-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hangar-market-cost {
    font-size: 1.1rem;
    font-weight: 600;
    color: #8fffea;
}

.hangar-market-owned {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #8fffea;
    background: rgba(143, 255, 234, 0.12);
    border: 1px solid rgba(143, 255, 234, 0.24);
    padding: 6px 12px;
    border-radius: 16px;
}

.hangar-market-card form button[disabled] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(203, 213, 225, 0.65);
    cursor: not-allowed;
}

.hangar-attachments {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hangar-attachments-header h3 {
    font-size: 1.5rem;
    color: #f5f9ff;
    margin-bottom: 6px;
}

.hangar-attachments-header .muted {
    color: rgba(203, 213, 225, 0.7);
}

.hangar-attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.attachment-card {
    padding: 20px 22px;
    border-radius: 20px;
    background: rgba(8, 16, 30, 0.86);
    border: 1px solid rgba(0, 240, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.4);
}

.attachment-card.attachment-installed {
    border-color: rgba(120, 247, 255, 0.32);
    box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.12);
}

.attachment-card-header h4 {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: #f8fafc;
}

.attachment-card-header p {
    margin: 0;
    color: rgba(203, 213, 225, 0.7);
    font-size: 0.9rem;
}

.attachment-current {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.22);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item-name {
    font-weight: 600;
    color: #f8fafc;
}

.attachment-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #8fffea;
    font-size: 0.9rem;
}

.attachment-empty {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.attachment-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.attachment-form,
.attachment-remove-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.attachment-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(203, 213, 225, 0.75);
}

.attachment-form select {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 240, 255, 0.2);
    color: #f8fafc;
    padding: 8px 10px;
    border-radius: 12px;
}

.attachment-remove-form .btn {
    align-self: flex-start;
}

.hangar-cargo {
    margin: 32px 0;
    padding: 28px 30px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(10,24,38,0.95), rgba(12,20,36,0.9));
    border: 1px solid rgba(0,240,255,0.18);
    box-shadow: 0 22px 48px rgba(0,0,0,0.55), 0 0 34px rgba(0,240,255,0.14);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hangar-cargo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.hangar-cargo-header h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #f8fafc;
}

.hangar-cargo-header .muted {
    margin: 0;
    max-width: 520px;
    color: rgba(203,213,225,0.7);
    font-size: 0.9rem;
}

.cargo-capacity-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-family: 'Orbitron', sans-serif;
}

.cargo-capacity-summary strong {
    font-size: 1.1rem;
    color: #8fffea;
}

.cargo-capacity-summary span {
    font-size: 0.78rem;
    color: rgba(203,213,225,0.78);
}

.hangar-cargo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
}

.cargo-hold-column,
.cargo-transfer-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cargo-hold-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 8px;
}

.cargo-hold-list::-webkit-scrollbar {
    width: 6px;
}

.cargo-hold-list::-webkit-scrollbar-thumb {
    background: rgba(0,240,255,0.24);
    border-radius: 999px;
}

.cargo-item {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(8,16,30,0.88);
    border: 1px solid rgba(0,240,255,0.16);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

.cargo-item-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cargo-item-info strong {
    font-size: 1rem;
    color: #f8fafc;
}

.cargo-item-type {
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,240,255,0.14);
    border: 1px solid rgba(0,240,255,0.26);
    color: #affff0;
    margin-left: 8px;
}

.cargo-item-qty {
    font-weight: 600;
    color: #8fffea;
    font-size: 0.95rem;
}

.cargo-item-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(203,213,225,0.78);
}

.cargo-item-stats li {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
}

.cargo-item-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cargo-item-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: rgba(203,213,225,0.75);
}

.cargo-item-form input[type="number"] {
    width: 92px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,240,255,0.2);
    background: rgba(0,0,0,0.35);
    color: #e2e8f0;
}

.cargo-transfer-card {
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(8,16,30,0.84);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.28);
}

.cargo-transfer-card h4 {
    margin: 0;
    font-size: 1.05rem;
    color: #f8fafc;
}

.cargo-transfer-card .muted {
    margin: 0;
    color: rgba(203,213,225,0.72);
    font-size: 0.86rem;
}

.cargo-load-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cargo-load-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(203,213,225,0.75);
}

.cargo-load-form select,
.cargo-load-form input[type="number"] {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(0,240,255,0.2);
    color: #f8fafc;
    padding: 8px 10px;
    border-radius: 12px;
}

.cargo-load-form select:disabled,
.cargo-load-form input[type="number"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cargo-empty {
    font-size: 0.85rem;
    color: rgba(203,213,225,0.68);
}

.cargo-guidelines {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(203,213,225,0.75);
}

.cargo-guidelines li {
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .hangar-cargo-grid {
        grid-template-columns: 1fr;
    }

    .cargo-capacity-summary {
        align-items: flex-start;
    }
}

.module-card header {
    display: flex;
    gap: 16px;
    align-items: center;
}

.module-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(0, 240, 255, 0.16);
    border: 1px solid rgba(0, 240, 255, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neon);
    font-size: 1.6rem;
}

.module-card h3 {
    font-family: 'Orbitron', sans-serif;
    color: #f8fafc;
    font-size: 1.2rem;
}

.module-description {
    color: rgba(203, 213, 225, 0.7);
    font-size: 0.88rem;
}

.module-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    color: rgba(203, 213, 225, 0.75);
}

.module-level {
    font-weight: 700;
    color: #f8fafc;
}

.module-card form .btn {
    width: 100%;
}

.module-card .btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.module-card.module-maxed {
    border-color: rgba(255, 204, 51, 0.25);
    background: linear-gradient(180deg, rgba(32, 20, 4, 0.92), rgba(18, 12, 4, 0.88));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48), 0 0 24px rgba(255, 204, 51, 0.16);
}

.hangar-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.repair-card,
.rename-card {
    padding: 24px 26px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(14, 20, 34, 0.92), rgba(10, 16, 26, 0.88));
    border: 1px solid rgba(0, 240, 255, 0.18);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), 0 0 22px rgba(0, 240, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.repair-card h3,
.rename-card h3 {
    font-family: 'Orbitron', sans-serif;
    color: #f8fafc;
    font-size: 1.2rem;
}

.repair-card p,
.rename-card p {
    color: rgba(203, 213, 225, 0.7);
    font-size: 0.88rem;
}

.repair-form,
.rename-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.repair-input,
.rename-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(203, 213, 225, 0.66);
}

.repair-input input,
.rename-input input {
    background: rgba(8, 12, 24, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.22);
    border-radius: 12px;
    padding: 10px 12px;
    color: #f8fafc;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.repair-input input:focus,
.rename-input input:focus {
    outline: none;
    border-color: rgba(0, 240, 255, 0.55);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.28);
}

.rename-card .btn-small {
    width: auto;
    align-self: flex-start;
}

@media (max-width: 768px) {
    .hangar-hero {
        padding: 26px;
    }

    .hangar-actions-grid,
    .module-grid {
        grid-template-columns: 1fr;
    }

    .hangar-hero-art {
        flex: 1 1 100%;
        max-width: none;
        align-items: center;
    }

    .hangar-art-frame {
        max-width: 220px;
    }
    .hangar-actions-grid-inner { width: 100%; }
}

/* Drug Market */


/* small tweak for pages not to show scrollbar jitter */
html, body { -webkit-overflow-scrolling: touch; }
.drug-market-info {
    background: #fff3cd;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    border-left: 4px solid #ffc107;
}

.drugs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.drug-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
}

.drug-card h4 {
    color: #2a5298;
    margin-bottom: 10px;
}

.drug-card p {
    color: #666;
    font-size: 0.9em;
    margin: 10px 0;
}

.drug-price {
    background: white;
    padding: 10px;
    border-radius: 5px;
    margin: 15px 0;
}

.base-price {
    color: #999;
    font-size: 0.85em;
    display: block;
    margin-top: 5px;
}

.drug-form {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.drug-form input[type="number"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.profit-positive {
    color: #28a745;
    font-weight: bold;
}

.profit-negative {
    color: #dc3545;
    font-weight: bold;
}

.drug-tips {
    background: #e7f3ff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    border-left: 4px solid #2a5298;
}

.drug-tips ul {
    margin-left: 20px;
    margin-top: 10px;
}

.drug-tips li {
    padding: 5px 0;
}

.bank-page {
    color: #dff6ff;
}

.bank-dashboard {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bank-hero {
    background: radial-gradient(circle at 12% 20%, rgba(0, 240, 255, 0.18), transparent 55%),
                linear-gradient(135deg, rgba(6, 14, 28, 0.92), rgba(10, 22, 38, 0.88));
    border: 1px solid rgba(0, 240, 255, 0.28);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 24px 48px rgba(1, 8, 21, 0.55);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bank-hero-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bank-hero-kicker {
    font-size: 0.8rem;
    letter-spacing: 0.48rem;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(0, 240, 255, 0.85);
}

.bank-hero h1 {
    font-size: clamp(1.8rem, 2.4vw, 2.6rem);
    color: #f7fbff;
    margin: 0;
    font-family: 'Orbitron', sans-serif;
}

.bank-hero p {
    margin: 0;
    color: rgba(220, 236, 250, 0.82);
    max-width: 640px;
}

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

.bank-alert {
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 0.92rem;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.bank-alert-success {
    background: rgba(15, 118, 110, 0.22);
    border-color: rgba(20, 184, 166, 0.45);
    color: #9ff3e7;
}

.bank-alert-error {
    background: rgba(127, 29, 29, 0.25);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fecaca;
}

.bank-alert-info {
    background: rgba(37, 99, 235, 0.22);
    border-color: rgba(59, 130, 246, 0.38);
    color: #bfdbfe;
}

.bank-alert-muted {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.28);
    color: rgba(226, 232, 240, 0.7);
}

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

.bank-stat-card {
    background: linear-gradient(180deg, rgba(9, 14, 24, 0.88), rgba(10, 20, 32, 0.86));
    border-radius: 18px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 18px 42px rgba(3, 12, 22, 0.55);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bank-stat-card .stat-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    color: rgba(148, 163, 184, 0.75);
}

.bank-stat-card .stat-figure {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 700;
    color: #f8fafc;
    font-family: 'Orbitron', sans-serif;
}

.bank-stat-card .stat-caption {
    font-size: 0.82rem;
    color: rgba(203, 213, 225, 0.74);
}

.bank-limit-card {
    padding-bottom: 26px;
}

.bank-limit-card .limit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bank-limit-card .limit-count {
    font-family: 'Orbitron', sans-serif;
    color: rgba(0, 240, 255, 0.88);
    letter-spacing: 1px;
}

.bank-progress {
    position: relative;
    height: 10px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.bank-progress-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.4), rgba(138, 79, 255, 0.55));
    border-radius: 999px;
    transition: width 0.6s ease;
}

.bank-limit-card .limit-meta {
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.72);
    margin-top: 10px;
}

.bank-limit-card.limit-maxed {
    border-color: rgba(239, 68, 68, 0.38);
    box-shadow: 0 12px 32px rgba(127, 29, 29, 0.35);
}

.bank-limit-card.limit-maxed .bank-progress-fill {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.45), rgba(127, 29, 29, 0.65));
}

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

.bank-interest-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(207, 214, 226, 0.86);
}

.bank-interest-card ul li::before {
    content: "•";
    color: rgba(0, 240, 255, 0.6);
    margin-right: 8px;
}

.bank-actions-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.bank-action-card {
    background: linear-gradient(180deg, rgba(10, 16, 26, 0.92), rgba(6, 12, 24, 0.9));
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 22px 42px rgba(1, 8, 21, 0.6);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bank-action-card .card-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bank-action-card .card-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #f9fbff;
    font-family: 'Orbitron', sans-serif;
}

.card-kicker {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.35rem;
    color: rgba(0, 240, 255, 0.56);
}

.bank-action-card p {
    color: rgba(202, 213, 225, 0.78);
    margin: 0;
    font-size: 0.88rem;
}

.bank-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bank-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bank-form-group label {
    text-transform: uppercase;
    letter-spacing: 0.32rem;
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.72);
}

.bank-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 18, 32, 0.9);
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 14px;
    padding: 8px 14px;
}

.bank-input-wrap:focus-within {
    border-color: rgba(0, 240, 255, 0.55);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.18);
}

.bank-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    color: #f8fafc;
    font-size: 1.1rem;
    font-family: 'Orbitron', sans-serif;
    outline: none;
}

.bank-input-wrap input::-webkit-outer-spin-button,
.bank-input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bank-input-wrap .input-prefix {
    font-size: 1rem;
    color: rgba(148, 163, 184, 0.8);
}

.quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quick-chip {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 240, 255, 0.35);
    background: rgba(2, 132, 199, 0.12);
    color: #e0f2fe;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35);
}

.quick-chip:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.chip-disabled {
    opacity: 0.35;
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(100, 116, 139, 0.12);
    color: rgba(148, 163, 184, 0.55);
}

.btn-full {
    width: 100%;
    justify-content: center;
    padding: 12px;
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
}

.btn-full:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.form-footnote {
    font-size: 0.75rem;
    color: rgba(203, 213, 225, 0.68);
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.fee-note {
    font-size: 0.75rem;
    color: rgba(252, 165, 165, 0.88);
    background: rgba(127, 29, 29, 0.18);
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(248, 113, 113, 0.28);
}

.input-pulse {
    animation: inputPulse 0.36s ease;
}

@keyframes inputPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.45); }
    100% { box-shadow: 0 0 0 12px rgba(0, 240, 255, 0); }
}

.bank-strategy-card .strategy-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(207, 214, 226, 0.82);
}

.bank-strategy-card .strategy-list li {
    position: relative;
    padding-left: 20px;
}

.bank-strategy-card .strategy-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 240, 255, 0.5);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 15px;
    }
    
    .stats-bar {
        flex-direction: column;
    }
    
    .navigation {
        flex-direction: column;
    }
    
    .nav-button {
        min-width: 100%;
    }
    
    .bank-hero {
        padding: 24px;
        border-radius: 20px;
    }

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

    .bank-actions-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .cities-grid, .drugs-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* Final theme overrides to catch any remaining bright white panels across pages */
/* Placed at the end to take precedence; uses !important sparingly to override hard-coded whites */
/* -------------------------------------------------------------------------- */

/* Generic panels / cards */
/* Scope overrides under container to increase specificity instead of using !important */
.container .content,
.container .card,
.container .job-card,
.container .race-card,
.container .session-card,
.container .recent-races,
.container .racing-info,
.container .racing-stats,
.container .property-card,
.container .profile-section,
.container .service-card,
.container .city-card,
.container .city-details,
.container .drug-card,
.container .job-tips,
.container .travel-info,
.container .job-details,
.container .race-details,
.container .session-info,
.container .session-details,
.container .participants-list,
.container .result-item,
.container .result-details,
.container .battle-power,
.container .stat-row,
.container .stat-card,
.container .racing-tips,
.container .race-result-box,
.container .collection-status,
.container .info-box,
.container .drug-price,
.container .travel-tip {
    background: linear-gradient(180deg, rgba(20,26,36,0.45), rgba(12,16,24,0.35));
    border: 1px solid rgba(255,255,255,0.03);
    color: #d9f3ff;
    box-shadow: 0 8px 28px rgba(2,6,23,0.55);
}

/* Specific fixes for elements that used strong white */
.container .city-card.current-location,
.container .active-session,
.container .race-prizes,
.container .job-tips,
.container .travel-tip {
    background: linear-gradient(180deg, rgba(24,34,50,0.45), rgba(12,16,24,0.34));
    border-color: rgba(255,255,255,0.03);
}

/* Make table rows transparent but ensure contrast */
.container .data-table th, .container .data-table td { background: transparent; color: #dcecf6; border-bottom: 1px solid rgba(255,255,255,0.02); }

.attack-form {
    display: block;
}

.attack-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    align-items: end;
}

.attack-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(226, 232, 240, 0.75);
}

.attack-form-label {
    font-weight: 600;
}

.attack-form-select {
    background: rgba(8, 12, 24, 0.7);
    color: #f8fafc;
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 10px;
    padding: 6px 8px;
    font-size: 0.85rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.attack-form-select:focus {
    outline: none;
    border-color: rgba(0, 240, 255, 0.55);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.attack-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.attack-form .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.hospital-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin: 18px 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(255, 204, 51, 0.12), rgba(255, 90, 90, 0.16));
    border: 1px solid rgba(255, 204, 51, 0.35);
    color: rgba(248, 250, 252, 0.9);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    font-size: 0.9rem;
}

.hospital-banner-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.health-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badge-hospital {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 72, 104, 0.25);
    border: 1px solid rgba(255, 72, 104, 0.45);
    color: rgba(255, 188, 199, 0.95);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.spacecraft-state-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.spacecraft-state-cell small {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.78);
    line-height: 1.2;
}

.badge-spacecraft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    transition: background 0.3s ease;
    background: rgba(148, 163, 184, 0.18);
    color: rgba(226, 232, 240, 0.92);
}

.badge-spacecraft-boarded {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.22);
    color: #bbf7d0;
}

.badge-spacecraft-docked {
    border-color: rgba(148, 163, 184, 0.5);
    background: rgba(148, 163, 184, 0.26);
    color: #e2e8f0;
}

.badge-spacecraft-none {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.22);
    color: #bfdbfe;
}

.badge-spacecraft-unknown {
    border-color: rgba(71, 85, 105, 0.4);
    background: rgba(71, 85, 105, 0.22);
    color: rgba(203, 213, 225, 0.78);
}

.attack-spacecraft-note {
    margin: -8px 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.38);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: rgba(191, 219, 254, 0.88);
}

.attack-spacecraft-note strong {
    flex-basis: 100%;
    color: #38bdf8;
    font-size: 0.95rem;
}

.attack-spacecraft-note .note-item {
    font-size: 0.86rem;
    color: rgba(203, 213, 225, 0.86);
}

.hospital-until {
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.7);
}

.badge-outcome {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(248, 250, 252, 0.92);
    background: rgba(255, 255, 255, 0.08);
    width: fit-content;
}

.badge-outcome-leave {
    background: rgba(0, 240, 255, 0.16);
    border-color: rgba(0, 240, 255, 0.32);
}

.badge-outcome-hospitalize {
    background: rgba(255, 90, 90, 0.2);
    border-color: rgba(255, 90, 90, 0.38);
}

.badge-outcome-steal {
    background: rgba(255, 204, 51, 0.2);
    border-color: rgba(255, 204, 51, 0.45);
    color: rgba(32, 24, 12, 0.85);
}

.badge-outcome-defeat {
    background: rgba(255, 72, 104, 0.2);
    border-color: rgba(255, 72, 104, 0.45);
}

.badge-outcome-draw {
    background: rgba(128, 140, 160, 0.2);
    border-color: rgba(128, 140, 160, 0.35);
}

.badge-outcome-abort {
    background: rgba(156, 163, 175, 0.2);
    border-color: rgba(156, 163, 175, 0.4);
}

.attack-disabled-reason {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.7);
    line-height: 1.4;
}

.battle-summary {
    margin: 24px 0;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    background: linear-gradient(160deg, rgba(8, 12, 24, 0.75), rgba(12, 20, 36, 0.85));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.battle-outcome-victory {
    border-color: rgba(0, 240, 180, 0.35);
    box-shadow: 0 20px 40px rgba(0, 240, 180, 0.16);
}

.battle-outcome-defeat {
    border-color: rgba(255, 72, 88, 0.35);
    box-shadow: 0 20px 40px rgba(255, 72, 88, 0.16);
}

.battle-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.battle-summary-header h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.35rem;
    color: #f8fafc;
}

.battle-summary-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.battle-tag {
    background: rgba(0, 240, 255, 0.12);
    border: 1px solid rgba(0, 240, 255, 0.25);
    color: rgba(226, 232, 240, 0.9);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}

.battle-summary-outcome {
    text-align: right;
    min-width: 180px;
}

.battle-outcome-title {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.6px;
    background: rgba(0, 240, 255, 0.2);
    border: 1px solid rgba(0, 240, 255, 0.35);
}

.battle-outcome-victory .battle-outcome-title {
    background: rgba(0, 240, 180, 0.3);
    border-color: rgba(0, 240, 180, 0.5);
}

.battle-outcome-defeat .battle-outcome-title {
    background: rgba(255, 88, 112, 0.25);
    border-color: rgba(255, 72, 104, 0.45);
}

.battle-outcome-detail {
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.8);
    margin-top: 6px;
}

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

.battle-stats > div {
    background: rgba(255, 255, 255, 0.05);
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.battle-hull-report {
    background: rgba(6, 12, 22, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.18);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.battle-hull-report h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.92);
}

.hull-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 140px 180px;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hull-row:first-of-type {
    border-top: none;
}

.hull-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hull-name {
    font-weight: 700;
    color: #f8fafc;
    font-size: 0.95rem;
}

.hull-label small {
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.7);
}

.hull-value {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: rgba(226, 232, 240, 0.85);
}

.hull-percent {
    font-weight: 700;
    color: var(--neon);
    font-size: 1.1rem;
}

.hull-delta {
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 999px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hull-damage {
    background: rgba(255, 90, 90, 0.18);
    border: 1px solid rgba(255, 90, 90, 0.35);
    color: #ffc1c1;
}

.hull-safe {
    background: rgba(0, 240, 180, 0.16);
    border: 1px solid rgba(0, 240, 180, 0.32);
    color: #b5ffef;
}

.stat-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: rgba(226, 232, 240, 0.8);
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f8fafc;
}

.stat-sub {
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.72);
}

.battle-rounds {
    background: rgba(8, 12, 24, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    padding: 18px;
}

.battle-rounds h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    margin-bottom: 12px;
    color: rgba(248, 250, 252, 0.95);
}

.battle-rounds-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.battle-rounds-list > li {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px;
}

.round-title {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: rgba(248, 250, 252, 0.85);
}

.round-events {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}

.round-events li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: rgba(226, 232, 240, 0.85);
}

.event-source {
    font-weight: 600;
    color: #f8fafc;
}

.event-target {
    font-weight: 600;
    color: rgba(255, 204, 51, 0.9);
}

.event-damage {
    font-weight: 600;
    color: rgba(0, 240, 255, 0.86);
}

.battle-summary { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.battle-summary:hover { transform: translateY(-4px); box-shadow: 0 26px 46px rgba(0, 0, 0, 0.45); }

@media (max-width: 768px) {
    .hull-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Participants and lists */
.container .participants-list li, .container .participants-list, .container .participants-list ul { background: transparent; color: #dcecf6; border-bottom: 1px solid rgba(255,255,255,0.02); }

/* Buttons & badges contrast */
.nav-button, .badge { background: rgba(255,255,255,0.02); color: var(--muted); border: 1px solid rgba(255,255,255,0.03) }

/* Ensure input / small info boxes use muted text */
.container .info-box p, .container .city-details .detail, .container .session-info .info-item, .container .result-item { color: var(--muted); }

/* Keep crime tiles and inventory items as designed (no override here) */

/* Accessibility: ensure headings have good contrast */
.container .content h2, .crime-tile h3, .item-card h4, .container .city-card h3, .container .drug-card h4 { color: var(--neon); }

/* End of final theme overrides */

/* Job System Styles */
.work-page{
    display:flex;
    flex-direction:column;
    gap:32px;
}
.work-hero{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:28px;
    padding:32px;
    border-radius:28px;
    background:linear-gradient(135deg, rgba(12,24,42,0.85), rgba(24,16,48,0.88));
    border:1px solid rgba(0,240,255,0.14);
    box-shadow:0 28px 60px rgba(0,0,0,0.52);
}
.work-hero-content{
    flex:1 1 360px;
    display:flex;
    flex-direction:column;
    gap:18px;
    position:relative;
    z-index:1;
}
.work-eyebrow{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:0.75rem;
    font-weight:700;
    color:var(--gold);
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.work-eyebrow::before{
    content:"";
    width:22px;
    height:2px;
    background:linear-gradient(90deg, var(--neon), transparent);
}
.work-hero-content h1{
    font-family:'Orbitron', sans-serif;
    font-size:2.4rem;
    color:#f8fafc;
    margin:0;
}
.work-hero-content p{
    max-width:520px;
    color:rgba(226,232,240,0.82);
    line-height:1.6;
}
.work-boost-banner{
    margin-top:-4px;
    padding:16px 22px;
    border-radius:20px;
    background:linear-gradient(150deg, rgba(18,32,54,0.9), rgba(34,18,62,0.88));
    border:1px solid rgba(0,240,255,0.22);
    display:flex;
    gap:16px;
    align-items:flex-start;
    color:rgba(226,239,255,0.94);
    box-shadow:0 26px 48px rgba(6,16,32,0.45);
}
.work-boost-banner i{
    font-size:1.9rem;
    color:rgba(255,214,102,0.95);
    filter:drop-shadow(0 0 16px rgba(255,196,77,0.4));
}
.work-boost-banner>div{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.work-boost-banner strong{
    font-size:0.95rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:rgba(188,232,255,0.95);
}
.work-boost-banner span{ line-height:1.4; }
.work-boost-sources{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.work-boost-source{
    padding:4px 12px;
    border-radius:999px;
    background:rgba(255,214,102,0.13);
    border:1px solid rgba(255,214,102,0.32);
    color:rgba(255,232,186,0.92);
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.05em;
    text-transform:uppercase;
}
.work-metric-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
    gap:14px;
}
.work-metric{
    padding:14px 16px;
    border-radius:18px;
    background:rgba(8,16,32,0.7);
    border:1px solid rgba(0,240,255,0.12);
    display:flex;
    flex-direction:column;
    gap:6px;
}
.work-metric .label{
    text-transform:uppercase;
    font-size:0.7rem;
    letter-spacing:0.08em;
    color:rgba(148,163,184,0.75);
}
.work-metric .value{
    font-size:1.2rem;
    font-weight:600;
    color:#f8fafc;
}
.work-metric .value .muted{
    font-size:0.9rem;
    color:rgba(148,163,184,0.7);
}
.work-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.work-hero-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    border-radius:999px;
    box-shadow:0 20px 40px rgba(0,0,0,0.45);
}
.work-hero-btn i{ font-size:1rem; }
.work-hero-btn.btn-link{
    border:1px solid rgba(0,240,255,0.18);
    background:rgba(0,240,255,0.08);
    color:rgba(156,224,255,0.92);
}
.work-hero-btn.btn-link:hover{
    background:rgba(0,240,255,0.16);
    color:#f8fafc;
}
.work-hero-sidebar{
    flex:1 1 260px;
    display:flex;
    flex-direction:column;
    gap:18px;
}
.work-panel{
    background:rgba(8,16,32,0.72);
    border:1px solid rgba(0,240,255,0.12);
    border-radius:24px;
    padding:22px 24px;
    box-shadow:0 18px 45px rgba(0,0,0,0.5);
    color:rgba(226,232,240,0.88);
}
.work-panel h3{
    margin-bottom:10px;
    font-size:1.1rem;
    color:#f8fafc;
}
.work-countdown{
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:0.85rem;
    color:rgba(226,232,240,0.75);
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    margin-bottom:12px;
}
.work-countdown.ready .status{ color:var(--gold); }
.work-countdown.ready .time{ color:#f8fafc; }
.work-countdown.understaffed-window{
    border-bottom:1px dashed rgba(255,204,51,0.4);
}
.work-countdown.understaffed-window .status{
    color:rgba(255,204,51,0.9);
}
.work-countdown.understaffed-window .time{
    color:rgba(226,232,240,0.85);
}
.work-countdown.quota-met .status{
    color:rgba(138,79,255,0.85);
}
.work-countdown.quota-met .time{
    color:rgba(148,163,184,0.85);
}
.work-countdown .time{
    font-size:1.4rem;
    font-weight:600;
    color:#e2e8f0;
}
.work-countdown.idle{
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:0;
}
.work-meta-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:0.85rem;
    color:rgba(226,232,240,0.75);
}
.work-meta-list li i{
    color:var(--neon);
    margin-right:6px;
}
.work-alert{
    margin-top:12px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,107,107,0.12);
    border:1px solid rgba(255,107,107,0.25);
    font-size:0.85rem;
    color:rgba(255,188,188,0.9);
    display:flex;
    align-items:center;
    gap:8px;
}
.work-alert.info{
    background:rgba(0,240,255,0.12);
    border-color:rgba(0,240,255,0.28);
    color:rgba(173,232,255,0.95);
}
.work-next-unlock{
    background:linear-gradient(135deg, rgba(14,26,48,0.8), rgba(24,12,52,0.78));
}
.work-toast-stack{ top:120px; right:32px; }
.messages-page .messages-container {
    margin-top: 36px;
}

.messages-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(8, 18, 38, 0.85), rgba(13, 19, 34, 0.72));
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
}

.messages-hero-main h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.1rem;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.messages-hero-main p {
    max-width: 520px;
    color: rgba(203, 213, 225, 0.88);
    line-height: 1.6;
}

.messages-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    min-width: 320px;
}

.messages-metric {
    padding: 18px;
    border-radius: 18px;
    background: rgba(12, 22, 40, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 92px;
}

.messages-metric .label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: rgba(148, 163, 184, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
}

.messages-metric .label i {
    color: var(--neon);
}

.messages-metric .value {
    font-size: 1.8rem;
    font-weight: 600;
    color: #f8fafc;
}

.messages-metric.action {
    align-items: flex-start;
    justify-content: center;
}

.messages-metric .metric-link {
    margin-top: auto;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 204, 51, 0.45);
    transition: color 0.2s ease;
}

.messages-metric .metric-link:hover {
    color: var(--neon);
    border-bottom-color: rgba(0, 240, 255, 0.6);
}

.messages-toast-stack {
    top: 120px;
    right: 32px;
}

.messages-content {
    margin-top: 32px;
}

.messages-card {
    background: rgba(11, 19, 32, 0.82);
    border: 1px solid rgba(0, 240, 255, 0.14);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}

.message-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.message-tabs .tab-button {
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.message-tabs .tab-button:hover {
    color: var(--gold);
    border-color: rgba(255, 204, 51, 0.35);
    box-shadow: 0 0 18px rgba(255, 204, 51, 0.15);
}

.message-tabs .tab-button.active {
    color: #0b0f1a;
    background: linear-gradient(135deg, var(--gold), var(--neon));
    box-shadow: 0 10px 22px rgba(0, 240, 255, 0.25);
}

.messages-tabs-body .tab-content {
    display: none;
    animation: fadeIn 0.25s ease;
}

.messages-tabs-body .tab-content.active {
    display: block;
}

.tab-heading {
    margin-bottom: 18px;
}

.tab-heading h2 {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.tab-heading p {
    color: rgba(203, 213, 225, 0.7);
}

.message-table td {
    vertical-align: top;
}

.message-table .message-preview {
    display: block;
    margin-top: 4px;
    color: rgba(203, 213, 225, 0.65);
    font-size: 0.85rem;
}

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

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

.compose-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compose-form label {
    font-weight: 600;
    color: rgba(203, 213, 225, 0.85);
}

.compose-form input,
.compose-form textarea {
    background: rgba(6, 12, 20, 0.92);
    border: 1px solid rgba(0, 240, 255, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    color: #f8fafc;
    font-size: 0.95rem;
}

.compose-form textarea {
    resize: vertical;
    min-height: 160px;
}

.compose-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.compose-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .messages-hero {
        padding: 20px;
    }

    .messages-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .messages-card {
        padding: 18px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.job-center-info{
    margin-top:24px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.job-center-info h2{ font-size:1.6rem; color:#f8fafc; }
.job-center-info .info-text{ color:rgba(226,232,240,0.75); }
.jobs-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
    gap:20px;
    margin-top:24px;
}
.job-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:24px;
    border-radius:22px;
    background:linear-gradient(135deg, rgba(12,24,42,0.82), rgba(24,16,52,0.82));
    border:1px solid rgba(0,240,255,0.12);
    box-shadow:0 24px 55px rgba(0,0,0,0.5);
    color:#e2e8f0;
    transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.job-card:hover{
    transform:translateY(-4px);
    box-shadow:0 28px 60px rgba(0,0,0,0.55);
}
.job-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.job-card-header h3{
    margin:0;
    font-size:1.25rem;
    color:#f8fafc;
}
.job-badge{
    padding:6px 12px;
    border-radius:999px;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    background:rgba(0,240,255,0.16);
    border:1px solid rgba(0,240,255,0.24);
    color:rgba(156,224,255,0.95);
}
.job-card.locked .job-badge{
    background:rgba(255,107,107,0.16);
    border-color:rgba(255,107,107,0.32);
    color:#ffb4b4;
}
.job-card.active{
    border-color:rgba(0,240,255,0.42);
    box-shadow:0 32px 70px rgba(0,0,0,0.6), 0 0 36px rgba(0,240,255,0.2);
}
.job-description{
    margin:0;
    color:rgba(226,232,240,0.75);
    line-height:1.5;
}
.job-details{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
    gap:10px;
    padding:16px;
    border-radius:16px;
    background:rgba(8,16,32,0.65);
    border:1px solid rgba(0,240,255,0.12);
}
.job-details .detail{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:0.85rem;
}
.job-details .detail strong{
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:rgba(148,163,184,0.7);
}
.job-details .detail span{
    font-size:1rem;
    font-weight:600;
    color:#f8fafc;
}
.job-details .label{
    text-transform:uppercase;
    font-size:0.7rem;
    letter-spacing:0.08em;
    color:rgba(148,163,184,0.7);
}
.job-details .value{
    font-size:1rem;
    font-weight:600;
    color:#f8fafc;
}
.job-locked-hint{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:0.8rem;
    color:rgba(255,188,188,0.9);
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,107,107,0.12);
    border:1px solid rgba(255,107,107,0.24);
}
.job-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.job-card .btn{
    align-self:flex-start;
    border-radius:999px;
    padding:10px 18px;
}
.job-card.locked .btn{ opacity:0.6; }
.job-tips{
    margin-top:32px;
    padding:24px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(8,16,32,0.78), rgba(18,12,44,0.78));
    border:1px solid rgba(0,240,255,0.12);
    box-shadow:0 24px 55px rgba(0,0,0,0.48);
    color:#e2e8f0;
}
.job-tips h3{
    margin-bottom:12px;
    font-size:1.2rem;
    color:#f8fafc;
}
.job-tips ul{
    margin:0;
    padding-left:20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    color:rgba(226,232,240,0.78);
}
.job-tips li{ line-height:1.5; }
.current-job-section{ margin-top:24px; }
.current-job-section h2{ margin-bottom:16px; color:#f8fafc; }
.promotion-track-section,
.work-ledger-section,
.reward-shop-section{
    margin-top:32px;
    display:flex;
    flex-direction:column;
    gap:18px;
}
.work-page .section-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:16px;
}
.work-page .section-header h2{
    margin:0;
    color:#f8fafc;
    font-size:1.45rem;
}
.work-page .section-header p{
    margin:0;
    color:rgba(226,232,240,0.7);
    max-width:520px;
}
.promotion-track-panel,
.work-ledger-table-wrapper,
.reward-shop-section .reward-grid .reward-card{
    background:linear-gradient(135deg, rgba(10,18,34,0.78), rgba(20,14,46,0.8));
    border:1px solid rgba(0,240,255,0.12);
    border-radius:24px;
    padding:22px 24px;
    box-shadow:0 24px 55px rgba(0,0,0,0.48);
}
.promotion-track-panel{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.promotion-track-summary{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    justify-content:space-between;
}
.promotion-track-summary p{
    margin:0;
    color:rgba(226,232,240,0.78);
}
.promotion-tier-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(0,240,255,0.14);
    border:1px solid rgba(0,240,255,0.28);
    color:#f8fafc;
    font-weight:600;
    letter-spacing:0.05em;
    text-transform:uppercase;
}
.promotion-progress-bar{
    position:relative;
    width:100%;
    height:12px;
    border-radius:999px;
    background:rgba(8,16,32,0.6);
    border:1px solid rgba(0,240,255,0.12);
    overflow:hidden;
}
.promotion-progress-fill{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    background:linear-gradient(90deg, rgba(0,240,255,0.85), rgba(138,79,255,0.9));
    box-shadow:0 0 18px rgba(0,240,255,0.36);
    transition:width 0.35s ease;
}
.promotion-ladder-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.promotion-ladder-item{
    padding:16px;
    border-radius:18px;
    background:rgba(8,16,32,0.6);
    border:1px solid rgba(255,255,255,0.05);
    display:flex;
    flex-direction:column;
    gap:8px;
    color:rgba(226,232,240,0.82);
}
.promotion-ladder-item.is-current{
    border-color:rgba(255,204,51,0.4);
    box-shadow:0 0 24px rgba(255,204,51,0.18);
}
.promotion-ladder-item.is-unlocked{
    border-color:rgba(0,240,255,0.32);
}
.promotion-ladder-item.is-locked{
    opacity:0.68;
}
.ladder-item-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-weight:600;
    color:#f8fafc;
}
.ladder-perks{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.85rem;
    color:rgba(148,163,184,0.85);
}
.work-ledger-table-wrapper{
    padding:0;
    overflow:hidden;
}
.work-ledger-table{
    width:100%;
    border-collapse:collapse;
}
.work-ledger-table thead{
    background:rgba(8,16,32,0.65);
}
.work-ledger-table th,
.work-ledger-table td{
    padding:14px 16px;
    text-align:left;
    font-size:0.9rem;
    color:rgba(226,232,240,0.85);
}
.work-ledger-table th{
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:0.72rem;
    color:rgba(148,163,184,0.75);
}
.work-ledger-table tbody tr:nth-child(odd){
    background:rgba(255,255,255,0.02);
}
.work-ledger-table tbody tr:hover{
    background:rgba(0,240,255,0.05);
}
.empty-ledger{
    margin-top:12px;
    padding:28px 24px;
    border-radius:20px;
    background:rgba(8,16,32,0.6);
    border:1px dashed rgba(0,240,255,0.24);
    text-align:center;
    color:rgba(148,163,184,0.75);
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}
.empty-ledger i{ font-size:2rem; color:var(--neon); }
.reward-balance{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    border-radius:16px;
    background:rgba(8,16,32,0.65);
    border:1px solid rgba(0,240,255,0.14);
    margin-bottom:18px;
    font-weight:600;
}
.reward-balance .label{
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:0.72rem;
    color:rgba(148,163,184,0.75);
}
.reward-balance .value{ font-size:1.1rem; color:#f8fafc; }
.reward-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
    gap:18px;
}
.reward-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:220px;
}
.reward-card.is-locked{
    border-color:rgba(255,107,107,0.28);
    box-shadow:0 0 24px rgba(255,107,107,0.12);
}
.reward-card.needs-points{
    border-color:rgba(255,204,51,0.18);
}
.reward-card.already-redeemed{
    opacity:0.75;
    border-style:dashed;
}
.reward-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.reward-card-header h3{
    margin:0;
    font-size:1.15rem;
    color:#f8fafc;
}
.reward-tag{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(138,79,255,0.22);
    border:1px solid rgba(138,79,255,0.3);
    color:#d6bcff;
    font-size:0.72rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
}
.reward-description{
    margin:0;
    line-height:1.5;
    color:rgba(226,232,240,0.78);
}
.reward-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:0.85rem;
    color:rgba(148,163,184,0.78);
}
.reward-cost{
    font-weight:600;
    color:#f8fafc;
}
.reward-status{
    padding:4px 10px;
    border-radius:999px;
    background:rgba(255,204,51,0.18);
    border:1px solid rgba(255,204,51,0.28);
    font-size:0.72rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
}
.reward-actions .btn{
    width:100%;
    justify-content:center;
}
.reward-actions form{ width:100%; }
.reward-actions button[disabled]{
    opacity:0.6;
    cursor:not-allowed;
}
@media (max-width: 960px){
    .work-hero{ padding:26px; }
}
@media (max-width: 720px){
    .work-hero{ flex-direction:column; }
    .work-hero-sidebar{ flex-basis:100%; }
    .work-hero-content h1{ font-size:2.1rem; }
}

/* Inventory modern layout */
.inventory-page {
    display:flex;
    flex-direction:column;
    gap:32px;
}

.inventory-page .muted {
    color:rgba(203,213,225,0.72);
}

.loadout-panel {
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:24px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(8,12,28,0.88), rgba(4,8,22,0.92));
    border:1px solid rgba(0,240,255,0.16);
    box-shadow:0 24px 48px rgba(3,10,30,0.55), 0 0 32px rgba(0,240,255,0.08);
}

.loadout-panel header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}

.loadout-panel header h2 {
    margin:0;
    font-family:'Orbitron', sans-serif;
    font-size:1.4rem;
    color:#f8fafc;
}

.loadout-panel header .muted {
    max-width:520px;
}

.loadout-slot-grid {
    display:grid;
    gap:10px;
    grid-template-columns: repeat(2, 1fr);
    max-width:100%;
}

@media (min-width: 768px) {
    .loadout-slot-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        max-width:100%;
    }
}

.loadout-slot-card {
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));
    border:1px solid rgba(0,240,255,0.14);
    border-radius:12px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    position:relative;
    box-shadow:0 12px 28px rgba(4,12,32,0.55);
}

.loadout-slot-card::after {
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:12px;
    background:linear-gradient(135deg, rgba(0,240,255,0.08), rgba(138,79,255,0.05));
    opacity:0.4;
    pointer-events:none;
}

.loadout-slot-card > * {
    position:relative;
    z-index:1;
}

.loadout-slot-header h3 {
    margin:0;
    color:#f8fafc;
    font-size:0.75rem;
}

.loadout-slot-title {
    display:flex;
    flex-direction:column;
    gap:3px;
    flex:1;
}

.loadout-slot-capacity {
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:0.65rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(203,213,225,0.68);
    padding:2px 6px;
    border-radius:999px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    width:max-content;
}

.loadout-slot-capacity.full {
    color:#ffd9c0;
    background:rgba(255,140,66,0.14);
    border-color:rgba(255,140,66,0.32);
}

.loadout-slot-header .muted {
    font-size:0.7rem;
    line-height:1.3;
}

.loadout-slot-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.loadout-slot-item {
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    background:rgba(6,12,26,0.85);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:10px;
    padding:8px;
    min-height:70px;
}

.loadout-slot-thumb {
    display:flex;
    align-items:center;
    justify-content:center;
}

.loadout-slot-thumb img {
    width:50px;
    height:50px;
    border-radius:8px;
    object-fit:cover;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 18px rgba(0,0,0,0.35);
}

.loadout-slot-meta {
    display:none;
}

.loadout-slot-stats {
    display:none;
}

.loadout-slot-action {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.85);
    border-radius:10px;
    opacity:0;
    transition:opacity 0.2s ease;
    pointer-events:none;
}

.loadout-slot-item:hover .loadout-slot-action {
    opacity:1;
    pointer-events:auto;
}

.loadout-slot-action .btn {
    padding:6px 10px;
    font-size:0.75rem;
    pointer-events:auto;
}

.loadout-slot-empty {
    margin:0;
    padding:18px;
    text-align:center;
    font-size:0.85rem;
    color:rgba(203,213,225,0.68);
    border:1px dashed rgba(255,255,255,0.14);
    border-radius:14px;
    background:rgba(8,12,24,0.6);
}

.inventory-bucket {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(0,240,255,0.1);
}

.inventory-bucket:last-child {
    border-bottom:none;
}

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

.inventory-bucket-header h3 {
    margin:0;
    font-size:0.95rem;
    font-family:'Orbitron', sans-serif;
    color:rgba(0,240,255,0.9);
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-weight:600;
}

.inventory-bucket-header .muted {
    font-size:0.8rem;
    color:rgba(203,213,225,0.6);
    font-weight:400;
}

.inventory-card-grid {
    display:grid;
    gap:10px;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

@media (min-width: 1200px) {
    .inventory-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }
}

.inventory-card {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(2,8,20,0.82));
    border:1px solid rgba(255,255,255,0.05);
    border-radius:12px;
    padding:10px;
    box-shadow:0 8px 20px rgba(5,12,32,0.52);
    overflow:visible;
    cursor:pointer;
    transition:all 0.2s ease;
    min-height:100px;
    user-select:none;
}

.inventory-card:hover {
    border-color:rgba(0,240,255,0.4);
    box-shadow:0 12px 28px rgba(0,240,255,0.2);
    transform:translateY(-3px) scale(1.02);
}

.inventory-card:active {
    transform:translateY(-1px) scale(0.98);
}

.inventory-card::before {
    content:"";
    position:absolute;
    inset:-120px 30% auto -120px;
    height:240px;
    background:radial-gradient(circle, rgba(0,240,255,0.18), transparent 65%);
    pointer-events:none;
    opacity:0;
    transition:opacity 0.2s ease;
}

.inventory-card:hover::before {
    opacity:1;
}

.inventory-card::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:12px;
    border:1px solid rgba(0,240,255,0.06);
    pointer-events:none;
}

.inventory-card-equipped {
    border-color:rgba(0,240,255,0.35);
    box-shadow:0 12px 28px rgba(0,240,255,0.18);
}

.inventory-card-equipped::before {
    opacity:0.5;
}

.inventory-card-locked {
    border-color:rgba(255,76,76,0.22);
}

/* Compact view - show only image */
.inventory-card-header {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    position:relative;
    z-index:1;
}

.inventory-card-thumb {
    display:flex;
    align-items:center;
    justify-content:center;
}

.inventory-card-thumb img {
    width:60px;
    height:60px;
    border-radius:10px;
    object-fit:cover;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 6px 14px rgba(0,0,0,0.45);
    transition:transform 0.2s ease;
    pointer-events:none;
}

.inventory-card:hover .inventory-card-thumb img {
    transform:scale(1.05);
}

.inventory-card-title {
    display:none;
}

.inventory-card-qty {
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2px 6px;
    border-radius:10px;
    background:var(--gold);
    color:#000;
    font-weight:700;
    font-size:0.7rem;
    box-shadow:0 2px 8px rgba(0,0,0,0.4);
}

.inventory-card-description {
    display:none;
}
.inventory-card-callout{
    display:none;
}
.inventory-card-callout i{
    display:none;
}
.donator-pack-callout{
    display:none;
}

.inventory-card-stats {
    display:none;
}

.inventory-card-stats div {
    display:none;
}

.inventory-card-stats dt {
    display:none;
}

.inventory-card-stats dd {
    display:none;
}

.inventory-card-status {
    display:none;
}

.inventory-card-status.status-equipped {
    display:none;
}

.inventory-card-status.status-ready {
    display:none;
}

.inventory-card-status.status-full {
    display:none;
}

.inventory-card-status.status-usable {
    display:none;
}

.inventory-card-status.status-locked {
    display:none;
}

.inventory-card-status.status-stored {
    display:none;
}

.inventory-card-actions {
    display:none;
}

.inventory-card-actions form {
    display:none;
}

.inventory-card-note {
    display:none;
}

.inventory-card-actions .btn {
    display:none;
}

.inventory-card-cargo input[type="number"],
.cargo-card-action input[type="number"] {
    width:80px;
    padding:6px 8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(8,12,28,0.74);
    color:#f8fafc;
}

.inventory-card-cargo label,
.cargo-card-action label {
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:0.78rem;
    font-weight:600;
    color:rgba(203,213,225,0.78);
}

.inventory-card-cargo .btn {
    margin-left:auto;
}

/* Modal for expanded item details */
.inventory-modal {
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,0.85);
    backdrop-filter:blur(8px);
    align-items:center;
    justify-content:center;
    padding:20px;
}

.inventory-modal.active {
    display:flex;
}

.inventory-modal-content {
    background:linear-gradient(180deg, rgba(8,12,28,0.98), rgba(4,8,22,0.98));
    border:1px solid rgba(0,240,255,0.3);
    border-radius:20px;
    padding:24px;
    max-width:500px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 24px 60px rgba(0,240,255,0.2);
    position:relative;
}

.inventory-modal-close {
    position:absolute;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    border:none;
    background:rgba(255,255,255,0.1);
    color:#fff;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    transition:all 0.2s ease;
}

.inventory-modal-close:hover {
    background:rgba(255,76,76,0.3);
    transform:rotate(90deg);
}

.inventory-modal-header {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
}

.inventory-modal-header img {
    width:80px;
    height:80px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 8px 20px rgba(0,0,0,0.4);
}

.inventory-modal-title h3 {
    margin:0 0 4px 0;
    color:#f8fafc;
    font-size:1.3rem;
}

.inventory-modal-title span {
    color:rgba(203,213,225,0.7);
    font-size:0.9rem;
}

.inventory-modal-description {
    color:rgba(203,213,225,0.8);
    line-height:1.6;
    margin:16px 0;
}

.inventory-modal-stats {
    display:grid;
    gap:10px;
    grid-template-columns:repeat(2, 1fr);
    margin:16px 0;
}

.inventory-modal-stats div {
    padding:10px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
}

.inventory-modal-stats dt {
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:rgba(203,213,225,0.6);
    margin-bottom:4px;
}

.inventory-modal-stats dd {
    margin:0;
    font-weight:700;
    color:#f8fafc;
}

.inventory-modal-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.1);
}

.badge-info {
    display:none;
}

.cargo-panel {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:20px;
    border-radius:18px;
    border:1px solid rgba(0,240,255,0.14);
    background:linear-gradient(135deg, rgba(6,12,24,0.88), rgba(2,8,20,0.92));
    box-shadow:0 20px 48px rgba(3,9,28,0.55);
    margin-top:20px;
}

.cargo-panel header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(0,240,255,0.1);
}

.cargo-panel header h2 {
    font-size:0.95rem;
    color:rgba(0,240,255,0.9);
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-weight:600;
    margin:0;
}

.cargo-panel header .muted {
    display:none;
}

.cargo-capacity {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:0.75rem;
    font-weight:600;
    color:rgba(203,213,225,0.7);
}

.cargo-capacity span {
    display:flex;
    align-items:center;
    gap:4px;
}

.cargo-capacity strong {
    color:rgba(0,240,255,0.8);
}

.cargo-grid {
    display:grid;
    gap:10px;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

@media (min-width: 1200px) {
    .cargo-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }
}

.cargo-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    padding:10px;
    background:rgba(8,12,30,0.8);
    border:1px solid rgba(0,240,255,0.12);
    box-shadow:0 8px 20px rgba(3,10,32,0.5);
    cursor:pointer;
    transition:all 0.2s ease;
    position:relative;
    min-height:100px;
    user-select:none;
}

.cargo-card:hover {
    border-color:rgba(0,240,255,0.4);
    box-shadow:0 12px 28px rgba(0,240,255,0.2);
    transform:translateY(-3px) scale(1.02);
}

.cargo-card:active {
    transform:translateY(-1px) scale(0.98);
}

.cargo-card-header {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.cargo-card-header h4,
.cargo-card-header span,
.cargo-card-header div:not(.cargo-card-thumb) {
    display:none;
}

.cargo-card .muted {
    display:none;
}

.cargo-card-thumb img {
    width:60px;
    height:60px;
    border-radius:10px;
    object-fit:cover;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 6px 14px rgba(0,0,0,0.35);
    transition:transform 0.2s ease;
    pointer-events:none;
}

.cargo-card:hover .cargo-card-thumb img {
    transform:scale(1.05);
}

.cargo-card-qty {
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2px 6px;
    border-radius:10px;
    background:var(--gold);
    color:#000;
    font-weight:700;
    font-size:0.7rem;
    box-shadow:0 2px 8px rgba(0,0,0,0.4);
}

.cargo-card-action {
    display:none;
}

.cargo-panel-disabled {
    text-align:center;
    padding:24px;
    border-radius:20px;
    border:1px dashed rgba(255,255,255,0.12);
    background:rgba(8,12,24,0.55);
}

@media (max-width: 960px) {
    .loadout-panel {
        padding:20px;
    }
}

@media (max-width: 720px) {
    .inventory-card-header {
        flex-wrap:wrap;
        align-items:flex-start;
    }
    .inventory-card-qty {
        margin-left:0;
    }
    .inventory-card-actions {
        flex-direction:column;
        align-items:flex-start;
    }
    .inventory-card-actions form {
        width:100%;
    }
    .inventory-card-actions .btn,
    .inventory-card-cargo .btn {
        width:100%;
        justify-content:center;
    }
    .cargo-card-action {
        flex-direction:column;
        align-items:flex-start;
    }
    .cargo-card-action .btn {
        width:100%;
        justify-content:center;
    }
}


.job-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.job-card h3 {
    color: #2a5298;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.job-description {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 15px;
    min-height: 40px;
}

.job-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 5px;
}

.job-details .detail {
    font-size: 0.9em;
}

.current-job-card {
    border: 3px solid #28a745;
}

.current-job-section {
    margin-bottom: 30px;
}

.job-actions {
    display: flex;
    gap: 10px;
}

.job-tips {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
}

.job-tips h3 {
    color: #2a5298;
    margin-bottom: 15px;
}

.job-tips ul {
    list-style-position: inside;
    color: #666;
}

.job-tips li {
    margin-bottom: 8px;
}

/* Racing System Styles */
.racing-hero {
    position: relative;
    margin-bottom: 36px;
    padding: 36px;
    border-radius: 32px;
    background: linear-gradient(155deg, rgba(8,16,32,0.95), rgba(12,26,52,0.92));
    border: 1px solid rgba(0,240,255,0.25);
    color: #f8fafc;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(2,8,24,0.55);
}
.racing-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(34,211,238,0.25), transparent 55%), radial-gradient(circle at bottom left, rgba(139,92,246,0.32), transparent 60%);
    opacity: 0.65;
    pointer-events: none;
}
.racing-hero-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    z-index: 1;
}
.hero-copy {
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hero-copy h1 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
}
.hero-copy p {
    margin: 0;
    color: rgba(226,232,240,0.78);
    line-height: 1.45;
}
.hero-kicker {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: rgba(148,163,184,0.75);
}
.hero-location {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    color: rgba(226,232,240,0.78);
}
.hero-location-name {
    font-weight: 600;
    color: #f8fafc;
}
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.status-chip.docked {
    background: rgba(34,211,238,0.18);
    border-color: rgba(34,211,238,0.45);
    color: #a5f3fc;
}
.status-chip.orbit {
    background: rgba(139,92,246,0.22);
    border-color: rgba(139,92,246,0.4);
    color: #ede9fe;
}
.loadout-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    z-index: 1;
}
.loadout-card {
    position: relative;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 20px 44px rgba(2,8,20,0.38);
    overflow: hidden;
}
.loadout-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 45%);
    opacity: 0.6;
    pointer-events: none;
}
.loadout-card.ground {
    background: linear-gradient(160deg, rgba(4,20,32,0.95), rgba(3,10,22,0.9));
    border-color: rgba(34,211,238,0.25);
}
.loadout-card.cosmo {
    background: linear-gradient(160deg, rgba(26,18,48,0.96), rgba(15,8,32,0.9));
    border-color: rgba(167,139,250,0.35);
}
.card-ready {
    box-shadow: 0 28px 54px rgba(34,197,94,0.18);
}
.card-warning {
    border-style: dashed;
    border-color: rgba(251,191,36,0.45);
    box-shadow: 0 28px 54px rgba(251,191,36,0.18);
}
.loadout-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}
.loadout-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
.loadout-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(15,23,42,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.loadout-title h3 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    color: #f8fafc;
}
.loadout-title p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(203,213,225,0.8);
}
.loadout-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.status-ready {
    background: rgba(34,197,94,0.16);
    border-color: rgba(34,197,94,0.45);
    color: #bbf7d0;
}
.status-warning {
    background: rgba(251,191,36,0.18);
    border-color: rgba(251,191,36,0.4);
    color: #fef08a;
}
.loadout-body {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.loadout-preview {
    flex: 0 0 96px;
    height: 96px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,23,42,0.8);
    box-shadow: 0 16px 28px rgba(0,0,0,0.45);
}
.loadout-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.loadout-metrics {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.metric-label {
    font-size: 0.73rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.75);
}
.metric-value {
    font-size: 1.18rem;
    font-weight: 600;
    color: #f8fafc;
}
.metric-meter {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(15,23,42,0.75);
    overflow: hidden;
}
.metric-meter::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--metric-progress, 0%);
    background: linear-gradient(90deg, rgba(34,211,238,0.95), rgba(6,182,212,0.95));
    box-shadow: 0 0 12px rgba(34,211,238,0.45);
}
.loadout-card.cosmo .metric-meter::after {
    background: linear-gradient(90deg, rgba(167,139,250,0.95), rgba(99,102,241,0.95));
    box-shadow: 0 0 12px rgba(139,92,246,0.45);
}
.metric-empty {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(248,250,252,0.78);
    background: rgba(248,250,252,0.08);
    border: 1px dashed rgba(248,250,252,0.25);
    padding: 12px;
    border-radius: 12px;
}
.loadout-tip {
    font-size: 0.92rem;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,23,42,0.68);
    color: #e2e8f0;
    line-height: 1.45;
}
.loadout-tip.tip-success {
    border-color: rgba(34,197,94,0.45);
    background: rgba(20,56,40,0.7);
    color: #bbf7d0;
}
.loadout-tip.tip-warning {
    border-color: rgba(251,191,36,0.45);
    background: rgba(92,50,6,0.62);
    color: #fef08a;
}
.racing-info,
.racing-stats,
.recent-races,
.racing-tips {
    background: rgba(6,12,24,0.88);
    border-radius: 24px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 18px 40px rgba(2,8,24,0.48);
    color: #e2e8f0;
    margin-bottom: 30px;
}
.racing-info h2,
.racing-stats h2,
.racing-tips h3 {
    margin: 0 0 18px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.04em;
    color: #f8fafc;
}
.info-box {
    background: rgba(15,23,42,0.7);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    display: grid;
    gap: 10px;
    color: rgba(226,232,240,0.85);
}
.info-box p {
    margin: 0;
    line-height: 1.45;
}
.my-race-session,
.active-sessions {
    margin-bottom: 32px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}
.stat-card {
    background: rgba(15,23,42,0.68);
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(34,211,238,0.18);
    text-align: left;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #38bdf8;
}
.stat-label {
    font-size: 0.9rem;
    color: rgba(203,213,225,0.8);
}
.races-grid,
.sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.race-card,
.session-card {
    position: relative;
    padding: 24px;
    border-radius: 22px;
    background: rgba(8,16,28,0.92);
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 18px 38px rgba(0,0,0,0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    color: #e2e8f0;
}
.race-card:hover,
.session-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px rgba(0,0,0,0.45);
}
.race-card.race-class-ground,
.session-card.race-class-ground {
    border-color: rgba(34,211,238,0.35);
    background: linear-gradient(160deg, rgba(4,20,32,0.92), rgba(2,12,24,0.88));
}
.race-card.race-class-cosmo,
.session-card.race-class-cosmo {
    border-color: rgba(167,139,250,0.45);
    background: linear-gradient(160deg, rgba(32,18,60,0.94), rgba(18,10,38,0.9));
}
.race-card.race-class-cosmo .race-details,
.session-card.race-class-cosmo .session-info,
.session-card.race-class-cosmo .session-details,
.session-card.race-class-cosmo .participants-list {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(153,122,255,0.28);
}
.active-session {
    border-width: 2px;
    border-color: rgba(34,197,94,0.65);
    background: linear-gradient(160deg, rgba(6,40,30,0.92), rgba(4,20,18,0.88));
    box-shadow: 0 26px 48px rgba(34,197,94,0.18);
}
.race-card h3,
.session-card h3 {
    margin: 0 0 12px;
    font-size: 1.2rem;
    color: #f8fafc;
}
.session-creator {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: rgba(203,213,225,0.8);
}
.session-requirement,
.race-requirement,
.race-description {
    margin: 0 0 12px;
    font-size: 0.92rem;
    color: rgba(226,232,240,0.78);
}
.race-prizes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.race-prizes .prize {
    flex: 1 1 100px;
    text-align: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(255,215,0,0.22), rgba(255,243,176,0.18));
    color: #fde68a;
    font-weight: 600;
    border: 1px solid rgba(255,215,0,0.35);
}
.race-details,
.session-info,
.session-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(15,23,42,0.65);
    border: 1px solid rgba(255,255,255,0.06);
}
.race-details .detail,
.session-info .info-item,
.session-details .detail {
    font-size: 0.9rem;
    color: rgba(226,232,240,0.82);
}
.session-readiness {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,0.28);
    background: rgba(15,23,42,0.7);
    color: rgba(226,232,240,0.88);
}
.session-readiness .readiness-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.session-readiness p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}
.session-readiness.status-ready {
    border-color: rgba(34,197,94,0.4);
    background: rgba(16,52,36,0.7);
    color: #bbf7d0;
}
.session-readiness.status-warning {
    border-color: rgba(251,191,36,0.4);
    background: rgba(92,50,6,0.62);
    color: #fef08a;
}
.race-class-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid transparent;
    margin-bottom: 12px;
    background: rgba(15,23,42,0.6);
    color: #e2e8f0;
}
.race-class-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.race-class-badge.race-class-ground {
    color: #6ee7ff;
    border-color: rgba(34,211,238,0.4);
    background: rgba(8,78,109,0.45);
}
.race-class-badge.race-class-cosmo {
    color: #ede9fe;
    border-color: rgba(139,92,246,0.45);
    background: rgba(68,36,105,0.6);
}
.participants-list {
    background: rgba(15,23,42,0.65);
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    margin: 18px 0;
}
.participants-list h4 {
    margin: 0 0 12px;
    color: #f8fafc;
}
.participants-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.participant-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid rgba(34,211,238,0.15);
    background: rgba(8,16,28,0.85);
    margin-bottom: 10px;
    transition: transform 0.2s ease;
}
.participant-item:last-child {
    margin-bottom: 0;
}
.participant-item:hover {
    transform: translateY(-2px);
}
.participant-item.race-class-cosmo {
    border-color: rgba(167,139,250,0.35);
    background: linear-gradient(160deg, rgba(24,16,44,0.9), rgba(12,8,28,0.85));
    color: #ede9fe;
}
.participant-avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,23,42,0.75);
    box-shadow: 0 10px 20px rgba(0,0,0,0.35);
}
.participant-item.race-class-cosmo .participant-avatar {
    border-color: rgba(167,139,250,0.4);
    background: rgba(24,16,44,0.9);
}
.participant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.participant-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}
.participant-meta strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: #f8fafc;
}
.participant-item.race-class-cosmo .participant-meta strong {
    color: #ede9fe;
}
.participant-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.85);
}
.participant-stats span {
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(34,211,238,0.12);
    border: 1px solid rgba(34,211,238,0.2);
}
.participant-item.race-class-cosmo .participant-stats span {
    background: rgba(139,92,246,0.18);
    border-color: rgba(139,92,246,0.3);
    color: #ede9fe;
}
.participant-meta .you-badge {
    margin-left: 8px;
    vertical-align: middle;
}
.you-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34,197,94,0.18);
    border: 1px solid rgba(34,197,94,0.45);
    color: #bbf7d0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.session-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}
.session-actions form {
    flex: 1;
    min-width: 160px;
}
.session-actions button {
    width: 100%;
}
.create-race-section {
    margin-bottom: 36px;
}
.race-result-box {
    background: rgba(6,20,28,0.88);
    padding: 24px;
    border-radius: 22px;
    border: 1px solid rgba(34,197,94,0.45);
    margin-bottom: 24px;
    box-shadow: 0 18px 40px rgba(34,197,94,0.18);
    color: #e2e8f0;
}
.result-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 18px;
}
.result-item {
    padding: 14px;
    border-radius: 14px;
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}
.responsive-table {
    overflow-x: auto;
    margin-top: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,23,42,0.75);
    box-shadow: 0 18px 36px rgba(0,0,0,0.38);
}
.responsive-table table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    color: #e2e8f0;
}
.responsive-table th,
.responsive-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.responsive-table th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: rgba(148,163,184,0.78);
}
.responsive-table tbody tr:hover {
    background: rgba(34,211,238,0.08);
}
.racing-tips ul {
    margin: 0;
    padding-left: 18px;
    color: rgba(226,232,240,0.82);
    line-height: 1.55;
}
.racing-tips li {
    margin-bottom: 8px;
}
/* Crew Contracts Board */
.contracts-page{
    display:flex;
    flex-direction:column;
    gap:36px;
    padding-bottom:80px;
}
.contracts-hero{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:48px;
    background:linear-gradient(160deg, rgba(18,28,56,0.88), rgba(26,12,38,0.92));
    border:1px solid rgba(0,240,255,0.25);
    color:#f8fafc;
    box-shadow:0 24px 48px rgba(0,0,0,0.45);
}
.contracts-hero-copy{position:relative; z-index:2; max-width:720px;}
.contracts-hero-copy h1{font-size:2.5rem; margin-bottom:12px; letter-spacing:0.04em;}
.contracts-hero-copy p{font-size:1.05rem; color:rgba(248,250,252,0.75); margin-bottom:24px;}
.contracts-hero-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin:0; padding:0;}
.contracts-hero-stats div{display:flex; flex-direction:column; gap:6px; background:rgba(8,12,24,0.55); border-radius:16px; padding:14px 16px; border:1px solid rgba(0,240,255,0.12);}
.contracts-hero-stats dt{margin:0; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.55);}
.contracts-hero-stats dd{margin:0; font-size:1.1rem; font-weight:600; color:#f8fafc;}
.contracts-hero-overlay{position:absolute; inset:0; background:url('../images/nebula-noise.png'), radial-gradient(circle at top right, rgba(46,204,113,0.25), transparent 55%), radial-gradient(circle at bottom left, rgba(0,240,255,0.25), transparent 50%); mix-blend-mode:screen; opacity:0.6; z-index:1;}

.contracts-alert{border-radius:18px; padding:18px 22px; border:1px solid rgba(255,255,255,0.1); background:rgba(12,16,28,0.75); color:#f8fafc; box-shadow:0 18px 34px rgba(0,0,0,0.35);}
.contracts-alert.success{border-color:rgba(46,204,113,0.4); background:rgba(10,38,24,0.8);}
.contracts-alert.error{border-color:rgba(255,99,132,0.4); background:rgba(42,12,24,0.85);}
.contracts-alert.info{border-color:rgba(0,240,255,0.4); background:rgba(10,24,38,0.85);}
.contracts-alert p{margin:0; font-size:0.95rem;}

.contracts-section{display:flex; flex-direction:column; gap:18px; background:rgba(6,10,18,0.65); border-radius:28px; padding:32px 36px; border:1px solid rgba(255,255,255,0.05); box-shadow:0 18px 40px rgba(0,0,0,0.35);}
.contracts-section-header h2{font-size:1.75rem; margin:0; letter-spacing:0.03em; color:#f8fafc;}
.contracts-section-header p{margin:0; color:var(--muted); font-size:0.98rem;}

.contracts-form{display:flex; flex-direction:column; gap:20px;}
.contracts-form-grid{display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:18px;}
.contracts-form-grid label{display:flex; flex-direction:column; gap:8px; font-size:0.9rem; color:rgba(248,250,252,0.8);}
.contracts-form-grid input,
.contracts-form-grid select,
.contracts-form-grid textarea{background:rgba(8,12,22,0.8); border:1px solid rgba(0,240,255,0.12); border-radius:14px; padding:12px 14px; color:#f8fafc; font-size:1rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);}
.contracts-form-grid textarea{resize:vertical;}
.contracts-form-grid input:focus,
.contracts-form-grid select:focus,
.contracts-form-grid textarea:focus{outline:none; border-color:rgba(0,240,255,0.45); box-shadow:0 0 0 2px rgba(0,240,255,0.15);}
.contracts-form-span{grid-column:1/-1;}

.contracts-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;}
.contract-card{display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:22px; background:linear-gradient(160deg, rgba(12,20,34,0.92), rgba(20,12,30,0.9)); border:1px solid rgba(0,240,255,0.15); box-shadow:0 18px 36px rgba(0,0,0,0.35); color:#f8fafc; position:relative; overflow:hidden;}
.contract-card.own{border-color:rgba(255,214,140,0.35);}
.contract-card header{display:flex; flex-direction:column; gap:10px;}
.contract-card h3{margin:0; font-size:1.45rem; letter-spacing:0.02em;}
.contract-summary{margin:0; color:rgba(248,250,252,0.7); font-size:0.95rem;}
.contract-type{display:inline-flex; align-items:center; gap:8px; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.12em; color:rgba(0,240,255,0.85);}
.contract-brief p{margin:0; color:rgba(248,250,252,0.78); line-height:1.45;}
.contract-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0;}
.contract-stats div{background:rgba(10,16,28,0.6); padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,0.04); display:flex; flex-direction:column; gap:6px;}
.contract-stats dt{margin:0; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.5);}
.contract-stats dd{margin:0; font-size:1.1rem; font-weight:600; color:#f8fafc;}
.contract-reward-note{margin:0; color:rgba(255,214,140,0.85); font-size:0.95rem;}
.contract-actions{display:flex; justify-content:flex-start; align-items:center; gap:12px; flex-wrap:wrap;}
.contract-actions form{margin:0;}
.contract-actions .btn{padding:12px 22px;}
.contract-status-note{color:rgba(248,250,252,0.75); font-size:0.9rem; font-style:italic;}
.contract-note-input{min-width:220px; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,240,255,0.18); background:rgba(8,12,24,0.55); color:#f8fafc; font-size:0.95rem;}
.contract-note-input::placeholder{color:rgba(248,250,252,0.45);}
.contracts-empty{margin:0; padding:18px; border-radius:16px; background:rgba(10,16,26,0.7); border:1px dashed rgba(0,240,255,0.2); color:rgba(248,250,252,0.65); text-align:center;}

/* Titles & Achievements Hub */
.title-hub{display:flex; flex-direction:column; gap:32px;}
.title-hero{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:28px;
    padding:36px;
    border-radius:32px;
    background:linear-gradient(135deg, rgba(18,30,54,0.94), rgba(12,18,40,0.94));
    border:1px solid rgba(90,140,255,0.28);
    box-shadow:0 26px 48px rgba(4,10,26,0.55);
    overflow:hidden;
}
.title-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 8% -10%, rgba(0,240,255,0.25), transparent 55%), radial-gradient(circle at 95% 8%, rgba(138,79,255,0.32), transparent 50%);
    opacity:0.7;
    pointer-events:none;
}
.title-hero-main{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    align-items:stretch;
    justify-content:space-between;
    z-index:1;
}
.title-hero-copy{
    flex:1 1 360px;
    display:flex;
    flex-direction:column;
    gap:14px;
    color:rgba(228,236,255,0.92);
}
.title-hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(0,240,255,0.12);
    border:1px solid rgba(0,240,255,0.35);
    color:rgba(170,244,255,0.9);
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
}
.title-hero-copy h1{
    margin:0;
    font-size:2.4rem;
    line-height:1.15;
    color:#f6f9ff;
    font-family:'Orbitron', sans-serif;
}
.title-hero-copy p{
    margin:0;
    max-width:560px;
    line-height:1.6;
    color:rgba(210,224,248,0.86);
}
.title-hero-alert{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-radius:16px;
    background:rgba(0,240,255,0.12);
    border:1px dashed rgba(0,240,255,0.3);
    color:rgba(196,243,255,0.95);
    font-size:0.9rem;
    box-shadow:0 10px 22px rgba(0,0,0,0.35);
}
.title-hero-alert i{color:var(--neon); font-size:1.1rem;}
.active-title-card{
    flex:0 1 320px;
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:22px 24px;
    border-radius:24px;
    background:linear-gradient(150deg, rgba(10,24,44,0.95), rgba(24,12,46,0.92));
    border:1px solid rgba(110,170,255,0.42);
    box-shadow:0 24px 38px rgba(4,10,28,0.55);
    color:#f4f8ff;
}
.active-title-header{display:flex; align-items:center; justify-content:space-between;}
.active-title-card .badge{
    padding:4px 12px;
    border-radius:999px;
    background:rgba(0,240,255,0.18);
    border:1px solid rgba(0,240,255,0.36);
    color:rgba(178,248,255,0.95);
    letter-spacing:0.08em;
    font-size:0.72rem;
    text-transform:uppercase;
}
.active-title-card .icon{font-size:2.2rem; filter:drop-shadow(0 0 14px rgba(0,240,255,0.45));}
.active-title-body{display:flex; flex-direction:column; gap:8px;}
.active-title-body .label{font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(174,210,255,0.82);}
.active-title-body .value{font-size:1.46rem; font-weight:600; letter-spacing:0.01em;}
.active-title-body p{margin:0; color:rgba(210,224,248,0.78); line-height:1.5;}
.active-title-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto;}
.active-title-meta .meta-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:rgba(12,22,40,0.82); border:1px solid rgba(96,140,255,0.32); color:rgba(210,224,248,0.9); font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase;}
.active-title-meta .meta-chip i{color:rgba(140,190,255,0.92);}
.active-title-meta .meta-chip.highlight{background:rgba(0,240,255,0.16); border-color:rgba(0,240,255,0.36); color:rgba(190,240,255,0.96);}
.active-title-card.empty{justify-content:center; background:linear-gradient(150deg, rgba(12,22,38,0.9), rgba(16,10,38,0.92)); border-style:dashed; border-color:rgba(90,130,200,0.28); color:rgba(194,208,236,0.88);}
.title-hero-stats{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
    gap:18px;
}
.title-hero-stat{
    padding:18px 20px;
    border-radius:18px;
    background:rgba(8,16,30,0.8);
    border:1px solid rgba(90,140,255,0.22);
    display:flex;
    flex-direction:column;
    gap:6px;
    color:#f2f7ff;
    box-shadow:0 18px 32px rgba(4,10,26,0.45);
}
.title-hero-stat.highlight{background:rgba(0,240,255,0.12); border-color:rgba(0,240,255,0.35); box-shadow:0 20px 36px rgba(0,240,255,0.2);}
.title-hero-stat .value{font-size:1.9rem; font-weight:600; letter-spacing:0.02em; color:#f8faff;}
.title-hero-stat .label{font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(186,208,240,0.75);}
.title-hero-stat .hint{font-size:0.76rem; color:rgba(198,210,236,0.72); letter-spacing:0.04em;}

.title-section{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:22px;
    padding:28px 32px;
    border-radius:28px;
    background:linear-gradient(140deg, rgba(10,18,34,0.88), rgba(16,20,44,0.88));
    border:1px solid rgba(80,120,220,0.22);
    box-shadow:0 20px 38px rgba(4,10,26,0.45);
}
.title-section.title-upcoming{background:linear-gradient(140deg, rgba(16,20,44,0.9), rgba(26,18,48,0.9)); border-color:rgba(140,120,255,0.28);}
.title-section.title-boosts{background:linear-gradient(140deg, rgba(12,22,32,0.92), rgba(12,16,34,0.92)); border-color:rgba(90,160,255,0.26);}
.title-section .section-header{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:18px;}
.title-section .section-header h2{margin:0; font-size:1.6rem; color:#f3f7ff; letter-spacing:0.02em;}
.title-section .section-header .muted{margin:4px 0 0; max-width:560px; color:rgba(208,220,240,0.82); line-height:1.5;}
.available-points-pill{padding:8px 18px; border-radius:999px; background:rgba(12,24,46,0.85); border:1px solid rgba(110,170,255,0.32); color:#dde8ff; font-size:0.82rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; box-shadow:0 12px 28px rgba(6,12,32,0.4);}

.title-columns{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:26px; align-items:stretch;}
.title-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;}
.title-card{position:relative; padding:24px; border-radius:22px; background:linear-gradient(155deg, rgba(12,20,38,0.95), rgba(14,14,32,0.92)); border:1px solid rgba(90,130,255,0.3); box-shadow:0 20px 36px rgba(4,10,26,0.5); display:flex; flex-direction:column; gap:16px; transition:transform 0.18s ease, box-shadow 0.22s ease, border 0.22s ease; color:#edf2ff;}
.title-card::after{content:""; position:absolute; inset:-1px; border-radius:inherit; background:radial-gradient(circle at 12% 0, rgba(0,240,255,0.16), transparent 60%); opacity:0; transition:opacity 0.2s ease; pointer-events:none;}
.title-card:hover{transform:translateY(-6px); box-shadow:0 26px 44px rgba(6,12,32,0.58);}
.title-card:hover::after{opacity:1;}
.title-card.equipped{border-color:rgba(0,220,255,0.55); box-shadow:0 24px 42px rgba(0,120,255,0.35);}
.title-card.locked{border-style:dashed; border-color:rgba(150,160,200,0.4); background:linear-gradient(155deg, rgba(18,20,36,0.9), rgba(22,18,38,0.9)); opacity:0.9;}
.title-card-header{display:flex; align-items:flex-start; gap:16px;}
.title-card-icon{font-size:2.6rem; line-height:1; filter:drop-shadow(0 0 14px rgba(140,180,255,0.4)); flex-shrink:0;}
.title-card-title{display:flex; flex-direction:column; gap:6px; flex:1;}
.title-card-title h3{margin:0; font-size:1.28rem; color:#f8faff; letter-spacing:0.01em;}
.title-card-category{font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(156,188,246,0.78);}
.title-card-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:0.75rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; background:rgba(12,22,40,0.82); border:1px solid rgba(90,140,255,0.38); color:#dce6ff;}
.title-card-chip.points{background:rgba(0,240,255,0.14); border-color:rgba(0,240,255,0.32); color:rgba(196,246,255,0.96);}
.title-card-description{margin:0; color:rgba(208,222,248,0.78); line-height:1.55;}
.title-card-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto;}
.title-meta-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:rgba(14,24,46,0.82); border:1px solid rgba(96,136,220,0.28); color:rgba(206,220,246,0.9); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase;}
.title-meta-chip i{color:rgba(130,190,255,0.9);}
.title-meta-chip.highlight{background:rgba(0,240,255,0.16); border-color:rgba(0,240,255,0.32); color:rgba(190,240,255,0.95);}
.title-card-footer{display:flex; justify-content:space-between; align-items:center; margin-top:12px;}
.title-card-actions{display:flex; justify-content:flex-end; align-items:center; gap:10px;}
.equipped-badge,.locked-badge{padding:6px 16px; border-radius:999px; background:rgba(0,220,255,0.18); border:1px solid rgba(0,220,255,0.28); color:rgba(200,248,255,0.95); font-size:0.76rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; box-shadow:0 12px 18px rgba(0,220,255,0.25);} 
.title-card.locked .locked-badge{background:rgba(160,150,210,0.18); border-color:rgba(180,170,220,0.32); color:rgba(220,220,246,0.88); box-shadow:none;}
.title-grid.locked .title-card:hover{transform:none; box-shadow:0 20px 34px rgba(6,12,28,0.5);}

.boost-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;}
.boost-card{position:relative; padding:26px; border-radius:22px; background:linear-gradient(165deg, rgba(10,18,34,0.96), rgba(16,10,40,0.94)); border:1px solid rgba(98,140,255,0.32); box-shadow:0 26px 42px rgba(4,10,28,0.55), inset 0 0 24px rgba(0,0,0,0.28); display:flex; flex-direction:column; gap:20px; overflow:hidden; transition:transform 0.18s ease, box-shadow 0.24s ease, border 0.22s ease; color:#edf3ff;}
.boost-card::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 5% 0%, rgba(0,255,220,0.12), transparent 50%), radial-gradient(circle at 100% 18%, rgba(120,92,255,0.16), transparent 62%); opacity:0.85; pointer-events:none;}
.boost-card:hover{transform:translateY(-6px); box-shadow:0 32px 52px rgba(4,10,26,0.62), inset 0 0 26px rgba(0,0,0,0.24);}
.boost-card.maxed{border-color:rgba(200,170,255,0.48); box-shadow:0 30px 50px rgba(40,10,70,0.45), inset 0 0 28px rgba(40,10,70,0.32);}
.boost-card-top{position:relative; display:flex; align-items:flex-start; gap:20px; z-index:1;}
.boost-icon-bubble{width:64px; height:64px; border-radius:20px; background:linear-gradient(155deg, rgba(80,220,255,0.32), rgba(144,110,255,0.36)); border:1px solid rgba(120,180,255,0.48); display:flex; align-items:center; justify-content:center; box-shadow:0 20px 34px rgba(6,14,36,0.5), inset 0 0 18px rgba(80,220,255,0.28);}
.boost-card.maxed .boost-icon-bubble{background:linear-gradient(155deg, rgba(255,210,150,0.38), rgba(210,140,255,0.44)); border-color:rgba(255,210,150,0.55);}
.boost-icon{font-size:2rem; line-height:1; filter:drop-shadow(0 0 16px rgba(140,196,255,0.55));}
.boost-card-info{flex:1; display:flex; flex-direction:column; gap:12px;}
.boost-card-title-row{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.boost-card-title-row h3{margin:0; font-size:1.24rem; color:#f6f9ff; letter-spacing:0.02em;}
.boost-level-pill{padding:6px 16px; border-radius:999px; background:rgba(12,22,40,0.82); border:1px solid rgba(98,150,255,0.38); color:#dce6ff; font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;}
.boost-card-tags{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.boost-category-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(86,128,255,0.18); border:1px solid rgba(86,128,255,0.35); color:#9eb8ff; font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase;}
.boost-maxed-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(255,196,150,0.18); border:1px solid rgba(255,206,160,0.42); color:#ffe0be; font-size:0.74rem; letter-spacing:0.05em; text-transform:uppercase;}
.boost-description{margin:0; font-size:0.92rem; color:rgba(214,226,255,0.82); line-height:1.55;}
.boost-level-ring{min-width:72px; min-height:72px; border-radius:22px; background:linear-gradient(160deg, rgba(12,22,40,0.85), rgba(48,68,130,0.7)); border:1px solid rgba(96,140,255,0.4); box-shadow:0 18px 32px rgba(8,18,36,0.4), inset 0 0 18px rgba(86,128,255,0.28); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#f6f9ff; font-weight:700; font-size:1.12rem;}
.boost-level-ring .level-value{font-size:1.5rem; line-height:1;}
.boost-level-ring .level-cap{font-size:0.76rem; opacity:0.82; letter-spacing:0.05em;}
.boost-effect-lines{position:relative; z-index:1; display:grid; gap:12px; padding:16px 18px; border-radius:18px; background:rgba(10,18,34,0.82); border:1px solid rgba(96,140,255,0.3); box-shadow:inset 0 0 18px rgba(0,0,0,0.3);}
.effect-line{display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:0.9rem; color:rgba(218,230,255,0.9);}
.effect-line .label{text-transform:uppercase; letter-spacing:0.1em; font-size:0.72rem; color:rgba(170,190,230,0.78);}
.effect-line.cap{color:rgba(226,210,255,0.9);}
.boost-progress{display:flex; flex-direction:column; gap:12px; z-index:1;}
.boost-progress-track{position:relative; height:12px; border-radius:999px; background:rgba(90,120,180,0.18); overflow:hidden; border:1px solid rgba(96,136,255,0.32);}
.boost-progress-fill{position:absolute; inset:0; background:linear-gradient(90deg, rgba(80,220,255,0.88), rgba(144,92,255,0.95)); box-shadow:0 0 18px rgba(120,190,255,0.6);}
.boost-card.maxed .boost-progress-fill{background:linear-gradient(90deg, rgba(255,206,150,0.9), rgba(210,140,255,0.95)); box-shadow:0 0 18px rgba(255,206,150,0.6);}
.boost-progress-meta{display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; letter-spacing:0.06em; color:rgba(206,220,246,0.82); text-transform:uppercase;}
.boost-card-actions{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto;}
.cost-pill{padding:6px 18px; border-radius:999px; background:rgba(12,24,38,0.86); border:1px solid rgba(110,160,255,0.38); color:#deebff; font-size:0.82rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; box-shadow:0 14px 26px rgba(6,12,28,0.4);}
.stat-boost{display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:3px 9px; border-radius:999px; background:rgba(80,240,200,0.16); border:1px solid rgba(90,250,210,0.3); color:rgba(198,255,240,0.94); font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;}
.crime-boost-banner{margin-top:22px; padding:16px 20px; border-radius:18px; background:linear-gradient(155deg, rgba(10,22,36,0.92), rgba(26,12,44,0.88)); border:1px solid rgba(104,156,255,0.32); display:flex; align-items:flex-start; gap:16px; color:#e5f2ff; box-shadow:0 24px 40px rgba(8,16,32,0.35);}
.crime-boost-banner i{font-size:1.8rem; color:#62ffe8; filter:drop-shadow(0 0 14px rgba(98,255,232,0.45));}
.crime-boost-banner>div{display:flex; flex-direction:column; gap:6px;}
.crime-boost-banner strong{font-size:0.95rem; letter-spacing:0.05em; text-transform:uppercase; color:#92d9ff;}
.crime-boost-banner span{line-height:1.4;}
.crime-boost-sources{display:flex; flex-wrap:wrap; gap:8px;}
.crime-boost-source{padding:4px 10px; border-radius:999px; background:rgba(98,255,232,0.12); border:1px solid rgba(98,255,232,0.28); color:rgba(198,255,247,0.92); font-size:0.72rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;}

@media (max-width: 720px){
    .title-hero{padding:26px;}
    .title-hero-main{flex-direction:column;}
    .active-title-card{width:100%;}
    .title-hero-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
    .title-columns{grid-template-columns:1fr;}
    .title-card,
    .boost-card{padding:18px;}
}

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

/* Responsive updates for new systems */
@media (max-width: 768px) {
    .jobs-grid, .races-grid, .properties-grid {
        grid-template-columns: 1fr;
    }
    
    .job-details, .race-details, .property-details {
        grid-template-columns: 1fr;
    }
    
    .stats-grid, .result-details {
        grid-template-columns: 1fr 1fr;
    }
    
    .section-header {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 680px) {
    .ticker-track{
        flex-direction:row;
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:visible;
        scroll-snap-type:x mandatory;
    }

    .ticker-item{
        width:auto;
        flex:0 0 clamp(240px, 85vw, 300px);
    }
}

/* Staff Donator Console */
.staff-donator-card {
    margin: 20px auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.staff-donator-card h3 {
    margin: 0;
    font-size: 1.35rem;
    color: #f8fafc;
}

.staff-donator-search label {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
    color: rgba(226, 232, 240, 0.9);
}

.staff-donator-search-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.staff-donator-search-row input {
    flex: 1 1 240px;
    min-width: 200px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    background: rgba(12, 20, 34, 0.82);
    color: #f8fafc;
}

.staff-donator-search-row input:focus {
    outline: none;
    border-color: rgba(0, 240, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.18);
}

.staff-donator-search .form-text {
    margin-top: 6px;
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.72);
}

.staff-donator-summary {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.14);
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.staff-donator-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.staff-donator-id {
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.66);
}

.staff-donator-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.staff-donator-label.label-active {
    background: rgba(0, 240, 255, 0.18);
    color: #00f0ff;
    border: 1px solid rgba(0, 240, 255, 0.35);
}

.staff-donator-label.label-inactive {
    background: rgba(148, 163, 184, 0.16);
    color: rgba(226, 232, 240, 0.88);
    border: 1px solid rgba(96, 112, 128, 0.32);
}

.staff-donator-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 18px;
}

.staff-donator-stats div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.staff-donator-stats dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(203, 213, 225, 0.75);
}

.staff-donator-stats dd {
    margin: 0;
    font-size: 0.95rem;
    color: #f8fafc;
}

.staff-donator-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.staff-donator-form {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 240, 255, 0.12);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.staff-donator-form h4 {
    margin: 0;
    font-size: 1rem;
    color: #f8fafc;
}

.staff-donator-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.staff-donator-form label {
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.94);
}

.staff-donator-form input[type="number"],
.staff-donator-form select,
.staff-donator-form textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    background: rgba(10, 18, 32, 0.82);
    color: #f8fafc;
    resize: vertical;
}

.staff-donator-form textarea {
    min-height: 72px;
}

.staff-donator-form input:focus,
.staff-donator-form select:focus,
.staff-donator-form textarea:focus {
    outline: none;
    border-color: rgba(0, 240, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.18);
}

.staff-donator-form .checkbox-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.staff-donator-form .checkbox-row input[type="checkbox"] {
    width: auto;
}

.staff-donator-form .muted {
    color: rgba(203, 213, 225, 0.7);
    font-size: 0.8rem;
}

.staff-donator-revoke {
    border-color: rgba(255, 76, 76, 0.28);
}

.staff-donator-form .btn-danger {
    background: linear-gradient(135deg, rgba(255, 76, 76, 0.85), rgba(255, 126, 76, 0.85));
    border: none;
    color: #fff;
    box-shadow: 0 8px 18px rgba(255, 76, 76, 0.35);
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.staff-donator-history {
    padding: 18px 20px;
    margin-top: 6px;
    border-radius: 16px;
    border: 1px solid rgba(0, 240, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.staff-donator-history h4 {
    margin: 0 0 12px;
    font-size: 1rem;
    color: #f8fafc;
}

.staff-donator-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.staff-donator-history-table th,
.staff-donator-history-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    text-align: left;
}

.staff-donator-history-table th {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: rgba(203, 213, 225, 0.78);
}

.staff-donator-history-table tbody tr:hover {
    background: rgba(15, 24, 44, 0.45);
}

@media (max-width: 680px) {
    .staff-donator-actions {
        grid-template-columns: 1fr;
    }

    .staff-donator-summary-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Staff Galactic Broadcast Console */
.staff-announcements-card {
    margin: 20px auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.staff-announcements-card h3 {
    margin: 0;
    font-size: 1.35rem;
    color: #f8fafc;
}

.staff-announcement-create h4,
.staff-announcement-list h4 {
    margin: 0 0 12px;
    font-size: 1rem;
    color: #f8fafc;
}

.staff-announcement-form,
.staff-announcement-edit-form {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 240, 255, 0.12);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.staff-announcement-edit-form {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.staff-announcement-form .form-row,
.staff-announcement-edit-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.staff-announcement-form label,
.staff-announcement-edit-form label {
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.9);
}

.staff-announcement-form input,
.staff-announcement-form textarea,
.staff-announcement-form select,
.staff-announcement-edit-form input,
.staff-announcement-edit-form textarea,
.staff-announcement-edit-form select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    background: rgba(12, 20, 34, 0.82);
    color: #f8fafc;
}

.staff-announcement-form textarea,
.staff-announcement-edit-form textarea {
    resize: vertical;
    min-height: 64px;
}

.staff-announcement-form input:focus,
.staff-announcement-form textarea:focus,
.staff-announcement-form select:focus,
.staff-announcement-edit-form input:focus,
.staff-announcement-edit-form textarea:focus,
.staff-announcement-edit-form select:focus {
    outline: none;
    border-color: rgba(0, 240, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.18);
}

.staff-announcement-form .form-row-stack,
.staff-announcement-edit-form .form-row-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.staff-announcement-form .form-row-stack > div,
.staff-announcement-edit-form .form-row-stack > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.staff-announcement-form .checkbox-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.staff-announcement-form .checkbox-row input[type="checkbox"] {
    width: auto;
}

.staff-announcement-list .table-responsive {
    border-radius: 14px;
    border: 1px solid rgba(0, 240, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
}

.staff-announcement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 640px;
}

.staff-announcement-table th,
.staff-announcement-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    text-align: left;
    vertical-align: top;
}

.staff-announcement-table th {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: rgba(203, 213, 225, 0.78);
}

.staff-announcement-table tbody tr.announcement-live {
    background: rgba(0, 240, 255, 0.05);
}

.staff-announcement-table tbody tr.announcement-scheduled {
    background: rgba(138, 79, 255, 0.05);
}

.staff-announcement-table tbody tr.announcement-expired {
    background: rgba(255, 76, 76, 0.05);
}

.staff-announcement-table tbody tr.announcement-hidden {
    background: rgba(148, 163, 184, 0.04);
}

.staff-announcement-table tbody tr:hover {
    background: rgba(12, 24, 42, 0.52);
}

.staff-announcement-headline {
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 4px;
}

.staff-announcement-summary {
    font-size: 0.85rem;
    line-height: 1.35;
}

.staff-announcement-meta {
    font-size: 0.75rem;
    margin-top: 6px;
}

.staff-announcement-channel {
    font-weight: 600;
    color: rgba(148, 197, 255, 0.95);
}

.staff-announcement-icon {
    font-size: 0.75rem;
    margin-top: 4px;
}

.staff-announcement-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.staff-announcement-inline-form {
    display: flex;
    gap: 8px;
}

.staff-announcement-inline-form .btn,
.staff-announcement-edit-form .btn {
    width: 100%;
}

.btn-small {
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 10px;
}

.staff-announcement-actions details {
    border-radius: 12px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.staff-announcement-actions details[open] {
    border-color: rgba(0, 240, 255, 0.28);
    background: rgba(0, 240, 255, 0.06);
}

.staff-announcement-actions details summary {
    cursor: pointer;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.88);
    list-style: none;
}

.staff-announcement-actions details summary::-webkit-details-marker {
    display: none;
}

.staff-announcement-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.staff-status-live {
    background: rgba(0, 240, 255, 0.18);
    color: #00f0ff;
    border: 1px solid rgba(0, 240, 255, 0.35);
}

.staff-status-scheduled {
    background: rgba(138, 79, 255, 0.18);
    color: #c4b5fd;
    border: 1px solid rgba(138, 79, 255, 0.3);
}

.staff-status-hidden {
    background: rgba(148, 163, 184, 0.16);
    color: rgba(226, 232, 240, 0.85);
    border: 1px solid rgba(96, 112, 128, 0.28);
}

.staff-status-expired {
    background: rgba(255, 76, 76, 0.18);
    color: #ff8d85;
    border: 1px solid rgba(255, 76, 76, 0.32);
}

.staff-announcement-actions details summary::after {
    content: '▾';
    margin-left: 6px;
    font-size: 0.7rem;
    color: rgba(226, 232, 240, 0.65);
}

.staff-announcement-actions details[open] summary::after {
    transform: rotate(180deg);
}

@media (max-width: 720px) {
    .staff-announcement-form .form-row-stack,
    .staff-announcement-edit-form .form-row-stack {
        grid-template-columns: 1fr;
    }

    .staff-announcement-inline-form {
        flex-direction: column;
    }

    .staff-announcement-inline-form .btn {
        width: 100%;
    }
}

/* Galaxy Map Explorer */
.galaxy-map-page {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-bottom: 72px;
}

.galaxy-map-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 26px 28px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(12, 30, 54, 0.85), rgba(20, 14, 44, 0.88));
    border: 1px solid rgba(0, 240, 255, 0.18);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), inset 0 0 24px rgba(0, 240, 255, 0.08);
}

.galaxy-map-hero h1 {
    margin: 0 0 8px;
    font-size: 2.1rem;
    color: #f8fafc;
}

.galaxy-map-hero p {
    margin: 0;
    max-width: 520px;
    color: rgba(226, 232, 240, 0.9);
}

.galaxy-map-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin: 0;
}

.galaxy-map-stats dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(203, 213, 225, 0.75);
}

.galaxy-map-stats dd {
    margin: 4px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
}

.galaxy-map-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 28px;
}

.galaxy-map-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.galaxy-map-filters,
.galaxy-map-details,
.galaxy-map-ship,
.galaxy-map-legend {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 240, 255, 0.12);
    border-radius: 18px;
    padding: 18px 20px;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    background: rgba(9, 18, 34, 0.85);
    color: #f8fafc;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s ease;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.1;
}

.filter-btn:hover,
.filter-btn:focus-visible {
    border-color: rgba(0, 240, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.16);
}

.filter-btn.is-active {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(0, 120, 255, 0.26));
    border-color: rgba(0, 240, 255, 0.45);
}

.galaxy-map-details .details-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.details-chip {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(138, 79, 255, 0.18);
    border: 1px solid rgba(138, 79, 255, 0.35);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #d6bcfa;
}

.details-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #f8fafc;
}

.details-faction {
    margin: 0;
    color: rgba(203, 213, 225, 0.75);
}

.details-description {
    margin: 0 0 16px;
    line-height: 1.4;
    color: rgba(226, 232, 240, 0.9);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 16px;
    margin: 0;
}

.details-grid dt {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.details-grid dd {
    margin: 4px 0 0;
    font-size: 0.95rem;
    color: #f8fafc;
}

.danger-indicator {
    display: inline-flex;
    gap: 4px;
    margin-right: 8px;
}

.danger-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 76, 76, 0.9), rgba(255, 140, 66, 0.85));
    box-shadow: 0 0 10px rgba(255, 76, 76, 0.45);
}

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

.galaxy-map-ship header {
    margin-bottom: 12px;
}

.galaxy-map-ship h3 {
    margin: 4px 0 0;
    font-size: 1.1rem;
    color: #f8fafc;
}

.galaxy-map-ship ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: rgba(226, 232, 240, 0.85);
}

.galaxy-map-legend h2 {
    margin: 0 0 10px;
    font-size: 1rem;
    color: #f8fafc;
}

.galaxy-map-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-flex;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    background: rgba(148, 163, 184, 0.45);
}

.legend-indicator[data-level="1"] {
    background: rgba(72, 187, 120, 0.65);
}

.legend-indicator[data-level="2"] {
    background: rgba(246, 224, 94, 0.75);
}

.legend-indicator[data-level="3"] {
    background: rgba(249, 128, 128, 0.75);
}

.legend-indicator[data-level="4"],
.legend-indicator[data-level="5"] {
    background: rgba(255, 99, 71, 0.85);
}

.galaxy-map-canvas {
    position: relative;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(10, 24, 44, 0.82), rgba(14, 10, 32, 0.9));
    border: 1px solid rgba(0, 240, 255, 0.16);
    box-shadow: inset 0 0 32px rgba(0, 240, 255, 0.05), 0 24px 48px rgba(0, 0, 0, 0.4);
    padding: 32px;
}

.galaxy-map-canvas::before {
    content: "";
    position: absolute;
    inset: 16px;
    background: radial-gradient(circle at 40% 30%, rgba(0, 240, 255, 0.08), transparent 52%),
                radial-gradient(circle at 70% 65%, rgba(138, 79, 255, 0.08), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.galaxy-map-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(140px, 1fr));
    grid-template-columns: repeat(var(--columns, 7), minmax(140px, 1fr));
    grid-auto-rows: 140px;
    gap: 18px;
    z-index: 1;
}

.map-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(0, 240, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: #f8fafc;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    grid-column: var(--col);
    grid-row: var(--row);
    box-shadow: inset 0 0 18px rgba(0, 240, 255, 0.04);
}

.map-node-icon {
    font-size: 1.5rem;
    color: rgba(0, 240, 255, 0.9);
    text-shadow: 0 0 18px rgba(0, 240, 255, 0.45);
}

.map-node-label {
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
}

.map-node:hover,
.map-node:focus-visible {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 204, 51, 0.45);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 204, 51, 0.28);
}

.map-node.is-active {
    border-color: rgba(255, 204, 51, 0.55);
    box-shadow: 0 0 18px rgba(255, 204, 51, 0.3);
}

.map-node[data-type="cosmos"] {
    background: rgba(0, 240, 255, 0.06);
    border-color: rgba(0, 240, 255, 0.22);
}

.map-node[data-type="cosmos"] .map-node-icon {
    color: rgba(138, 79, 255, 0.9);
    text-shadow: 0 0 18px rgba(138, 79, 255, 0.45);
}

.map-node[hidden] {
    display: none;
}

@media (max-width: 1200px) {
    .galaxy-map-layout {
        grid-template-columns: 1fr;
    }

    .galaxy-map-sidebar {
        order: 2;
    }

    .galaxy-map-canvas {
        order: 1;
    }
}

@media (max-width: 780px) {
    .galaxy-map-canvas {
        padding: 24px;
    }

    .galaxy-map-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        grid-auto-rows: auto;
    }

    .map-node {
        grid-column: auto;
        grid-row: auto;
    }
}

    .donation-pack-card .pack-lore {
        margin: 16px 0 0;
        padding: 14px 16px;
        border-radius: 14px;
        background: rgba(0, 240, 255, 0.06);
        border: 1px solid rgba(0, 240, 255, 0.18);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), inset 0 0 22px rgba(0, 240, 255, 0.05);
    }

    .donation-pack-card .pack-lore p {
        margin: 0 0 8px;
        font-weight: 600;
        color: #f8fafc;
    }

    .donation-pack-card .pack-lore ul {
        margin: 0;
        padding-left: 18px;
        color: var(--muted);
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .donation-pack-card .pack-lore li::marker {
        color: var(--neon);
    }

.salvage-operations .salvage-columns {
    display: grid;
    gap: 2.5rem;
}

.salvage-operations .salvage-column {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .salvage-operations .salvage-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: flex-start;
    }
}

@media (min-width: 1400px) {
    .salvage-operations .salvage-columns {
        grid-template-columns: 1.65fr 1fr;
    }
}

.salvage-heading {
    margin: 1rem 0 0.5rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(244, 247, 254, 0.92);
}

.salvage-mission-grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.salvage-mission-card {
    position: relative;
    border: 1px solid rgba(122, 240, 255, 0.16);
    background: linear-gradient(155deg, rgba(10, 24, 44, 0.94), rgba(6, 14, 32, 0.88));
    border-radius: 22px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 24px 52px rgba(5, 12, 32, 0.55), inset 0 0 28px rgba(122, 240, 255, 0.08);
    overflow: hidden;
}

.salvage-mission-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(124, 240, 255, 0.14), transparent 60%),
                radial-gradient(circle at 85% 80%, rgba(142, 84, 233, 0.12), transparent 55%);
    pointer-events: none;
    opacity: 0.9;
}

.salvage-mission-card > * {
    position: relative;
    z-index: 1;
}

.salvage-mission-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.salvage-mission-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(244, 247, 254, 0.95);
}

.salvage-mission-header p {
    margin: 0;
    color: rgba(210, 221, 243, 0.78);
    font-size: 0.96rem;
    line-height: 1.5;
}

.salvage-mission-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem 1.2rem;
    margin: 0;
}

.salvage-mission-meta > div {
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(122, 240, 255, 0.1);
}

.salvage-mission-meta dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(180, 199, 230, 0.75);
    margin-bottom: 0.35rem;
}

.salvage-mission-meta dd {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(244, 247, 254, 0.92);
}

.salvage-rewards {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.salvage-rewards span {
    font-weight: 600;
    color: rgba(244, 247, 254, 0.84);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.salvage-rewards ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: rgba(210, 221, 243, 0.82);
}

.salvage-rewards li {
    font-size: 0.95rem;
}

.salvage-mission-form {
    margin-top: auto;
}

.salvage-mission-form .btn,
.salvage-recipe-form .btn {
    width: 100%;
}

.salvage-component-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.salvage-component-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.1rem;
    align-items: center;
    border: 1px solid rgba(122, 240, 255, 0.12);
    background: linear-gradient(160deg, rgba(8, 20, 38, 0.9), rgba(4, 9, 24, 0.92));
    border-radius: 18px;
    padding: 1rem 1.25rem;
    box-shadow: 0 18px 40px rgba(3, 9, 24, 0.52), inset 0 0 24px rgba(122, 240, 255, 0.06);
    overflow: hidden;
}

.salvage-component-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 18%, rgba(124, 240, 255, 0.18), transparent 60%);
    opacity: 0.9;
    pointer-events: none;
}

.salvage-component-card > * {
    position: relative;
    z-index: 1;
}

.salvage-component-card .component-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(124, 240, 255, 0.08);
    border: 1px solid rgba(124, 240, 255, 0.2);
}

.salvage-component-card .component-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

.salvage-component-card .component-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: rgba(210, 221, 243, 0.85);
}

.salvage-component-card .component-body strong {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(244, 247, 254, 0.95);
}

.salvage-component-card .component-body p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(180, 199, 230, 0.76);
}

.component-quantity {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(244, 247, 254, 0.95);
}

.component-rarity {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(124, 240, 255, 0.8);
}

.salvage-recipe-grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.salvage-recipe-card {
    position: relative;
    border: 1px solid rgba(142, 84, 233, 0.18);
    background: linear-gradient(160deg, rgba(11, 22, 44, 0.9), rgba(16, 10, 36, 0.92));
    border-radius: 22px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    box-shadow: 0 22px 48px rgba(4, 0, 28, 0.48), inset 0 0 28px rgba(142, 84, 233, 0.08);
    overflow: hidden;
}

.salvage-recipe-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 25%, rgba(142, 84, 233, 0.16), transparent 60%);
    opacity: 0.85;
    pointer-events: none;
}

.salvage-recipe-card > * {
    position: relative;
    z-index: 1;
}

.salvage-recipe-card h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(244, 247, 254, 0.95);
}

.salvage-recipe-card p {
    margin: 0;
    color: rgba(210, 221, 243, 0.78);
    line-height: 1.55;
}

.salvage-recipe-buff {
    font-style: italic;
    color: rgba(122, 240, 255, 0.92) !important;
}

.salvage-recipe-costs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 1.75rem;
    color: rgba(244, 247, 254, 0.9);
}

.salvage-recipe-costs li {
    font-weight: 600;
}

.salvage-recipe-components {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.salvage-recipe-components h5 {
    margin: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(180, 199, 230, 0.78);
}

.salvage-recipe-components ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.salvage-recipe-components li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.96rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(244, 247, 254, 0.9);
}

.salvage-recipe-components li.missing-components {
    background: rgba(255, 161, 84, 0.16);
    color: rgba(255, 205, 160, 0.95);
}

.salvage-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.salvage-history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(8, 18, 36, 0.9), rgba(4, 8, 22, 0.95));
    border: 1px solid rgba(122, 240, 255, 0.08);
    box-shadow: 0 18px 40px rgba(3, 8, 22, 0.5);
}

.salvage-history-row.success {
    border-color: rgba(102, 255, 204, 0.35);
    box-shadow: 0 18px 40px rgba(26, 90, 76, 0.45);
}

.salvage-history-row.failure {
    border-color: rgba(255, 142, 142, 0.35);
    box-shadow: 0 18px 40px rgba(90, 26, 26, 0.45);
}

.salvage-history-main {
    display: flex;
    gap: 0.85rem;
    align-items: baseline;
    color: rgba(244, 247, 254, 0.92);
}

.salvage-history-status {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(180, 199, 230, 0.78);
}

.salvage-history-meta {
    display: flex;
    gap: 1.1rem;
    font-size: 0.9rem;
    color: rgba(210, 221, 243, 0.78);
}

[data-toast-type="salvage"] {
    border-left: 4px solid #7af0ff;
}

body.has-bottom-bar{
    padding-bottom:max(96px, calc(var(--bottom-bar-height) + 48px));
}

.global-bottom-bar{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    width:min(480px, calc(100vw - 16px));
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius:22px;
    background:linear-gradient(155deg, rgba(8,18,36,0.9), rgba(10,22,44,0.8));
    border:1px solid rgba(0,240,255,0.16);
    box-shadow:0 16px 38px rgba(0,0,0,0.5), 0 0 24px rgba(0,240,255,0.1);
    backdrop-filter:blur(18px);
    z-index:3300;
}

.bottom-bar-group{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.bottom-bar-group-left{ justify-content:flex-start; }
.bottom-bar-group-right{ justify-content:flex-end; }

.bottom-bar-center{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
}

.bottom-bar-button,
.bottom-bar-home{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    min-width:64px;
    border-radius:16px;
    border:1px solid transparent;
    background:rgba(255,255,255,0.035);
    color:#e6f7ff;
    font-size:0.66rem;
    font-weight:640;
    text-transform:uppercase;
    letter-spacing:0.07em;
    text-decoration:none;
    cursor:pointer;
    transition:all 0.25s ease;
}

.bottom-bar-button{
    padding:8px 16px 8px 10px;
}

.bottom-bar-button[aria-expanded="true"],
.bottom-bar-button.is-active{
    border-color:rgba(255,204,51,0.45);
    background:linear-gradient(150deg, rgba(255,204,51,0.18), rgba(18,42,82,0.92));
    color:#fff;
    box-shadow:0 16px 36px rgba(0,0,0,0.35), 0 0 24px rgba(255,204,51,0.22);
}

.bottom-bar-button:hover,
.bottom-bar-home:hover,
.bottom-bar-button:focus-visible,
.bottom-bar-home:focus-visible{
    color:#fff;
    border-color:rgba(0,240,255,0.38);
    background:linear-gradient(140deg, rgba(0,240,255,0.16), rgba(48,92,184,0.14));
    box-shadow:0 12px 24px rgba(0,0,0,0.32);
    outline:none;
}

.bottom-bar-button:focus-visible,
.bottom-bar-home:focus-visible{
    outline:2px solid rgba(0,240,255,0.55);
    outline-offset:3px;
}

.bottom-bar-icon{
    font-size:1.25rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--neon);
}

.bottom-bar-label{
    display:none;
}

.bottom-bar-badge{
    position:absolute;
    top:4px;
    right:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(255,76,76,0.95), rgba(255,132,76,0.95));
    color:#fff;
    font-size:0.66rem;
    font-weight:680;
    box-shadow:0 0 12px rgba(255,76,76,0.28);
}

.bottom-bar-home{
    width:68px;
    height:68px;
    border-radius:22px;
    background:linear-gradient(160deg, rgba(34,68,132,0.92), rgba(10,28,56,0.82));
    border:1px solid rgba(0,240,255,0.2);
    box-shadow:0 20px 40px rgba(0,0,0,0.48), 0 0 22px rgba(82,148,255,0.24);
    display:flex;
    align-items:center;
    justify-content:center;
}

.bottom-bar-home-icon{
    font-size:1.6rem;
    color:#f8fbff;
}

.bottom-bar-home:hover,
.bottom-bar-home:focus-visible{
    border-color:rgba(255,204,51,0.34);
    background:linear-gradient(155deg, rgba(255,204,51,0.22), rgba(24,52,102,0.9));
    box-shadow:0 24px 46px rgba(0,0,0,0.5), 0 0 30px rgba(255,204,51,0.26);
}

.bottom-bar-center-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:16px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(0,240,255,0.18);
    color:rgba(189,217,255,0.9);
    text-decoration:none;
    transition:all 0.25s ease;
    position:relative;
}

.bottom-bar-center-button i{
    font-size:1.35rem;
    line-height:1;
}

.bottom-bar-center-button:hover,
.bottom-bar-center-button:focus-visible{
    color:#fff;
    border-color:rgba(255,204,51,0.36);
    background:linear-gradient(160deg, rgba(0,240,255,0.18), rgba(22,48,96,0.82));
    box-shadow:0 16px 32px rgba(0,0,0,0.35);
    outline:none;
}

.bottom-bar-center-button:focus-visible{
    outline:2px solid rgba(0,240,255,0.55);
    outline-offset:3px;
}

.bottom-bar-back-to-top i{ color:rgba(159,232,255,0.95); }
.bottom-bar-settings i{ color:rgba(255,204,153,0.95); }

.bottom-bar-center-button::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:inherit;
    border:1px solid transparent;
    transition:opacity 0.25s ease;
    opacity:0;
}

.bottom-bar-center-button:focus-visible::after{
    border-color:rgba(0,240,255,0.4);
    opacity:1;
}

.bottom-bar-button.bottom-bar-chat .bottom-bar-icon{
    color:rgba(122,240,255,0.95);
}

.bottom-bar-button.bottom-bar-plans .bottom-bar-icon{
    color:rgba(255,204,102,0.95);
}

@media (min-width: 1024px){
    .global-bottom-bar{
        width:min(640px, calc(100vw - 120px));
        gap:16px;
        padding:14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius:26px;
        box-shadow:0 20px 44px rgba(0,0,0,0.55), 0 0 28px rgba(0,240,255,0.12);
    }
    .bottom-bar-group{ gap:16px; }
    .bottom-bar-center{ gap:18px; }
    .bottom-bar-button,
    .bottom-bar-home{
        min-width:72px;
        border-radius:18px;
    }
    .bottom-bar-button{ padding:10px 20px 10px 12px; }
    .bottom-bar-icon{ font-size:1.35rem; }
    .bottom-bar-label{ font-size:0.68rem; }
    .bottom-bar-center-button{
        width:52px;
        height:52px;
        border-radius:18px;
    }
    .bottom-bar-home{
        width:72px;
        height:72px;
    }
}

@media (max-width: 720px){
    .global-bottom-bar{
        width:min(460px, calc(100vw - 10px));
        gap:8px;
        padding:9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    }
    .bottom-bar-group{ gap:8px; min-width:0; }
    .bottom-bar-button,
    .bottom-bar-home{
        min-width:58px;
    }
    .bottom-bar-button{ padding:7px 14px 7px 8px; }
    .bottom-bar-center-button{
        width:44px;
        height:44px;
    }
    .bottom-bar-center-button i{ font-size:1.25rem; }
    .bottom-bar-label{ font-size:0.58rem; }
    .bottom-bar-icon{ font-size:1rem; }
    .bottom-bar-home{
        width:64px;
        height:64px;
    }
}

@media (max-width: 520px){
    .global-bottom-bar{
        width:calc(100vw - 8px);
        gap:6px;
        padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        border-radius:20px;
    }
    .bottom-bar-group{ gap:6px; min-width:0; }
    .bottom-bar-button{
        min-width:0;
        flex:1 1 0;
        padding:6px 16px 6px 6px;
    }
    .bottom-bar-home{
        width:58px;
        height:58px;
    }
    .bottom-bar-center{ gap:10px; }
    .bottom-bar-center-button{
        width:42px;
        height:42px;
        border-radius:14px;
    }
    .bottom-bar-center-button i{ font-size:1.2rem; }
}

@keyframes back-to-top-pulse {
    0% {
        opacity: 0.55;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.95;
        transform: scale(1);
    }
    100% {
        opacity: 0.55;
        transform: scale(0.8);
    }
}

@media (max-width: 640px) {