/* ================================================
   SPACE HELL - HUD THEME
   Military Sci-Fi Ship Management Interface
   Inspired by tactical command console design
   ================================================ */

/* Google Fonts - Technical/Military typefaces */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

/* ========== CSS VARIABLE OVERRIDES ========== */
:root {
    /* HUD Color Palette */
    --hud-bg: #060a12;
    --hud-panel: rgba(8, 14, 24, 0.95);
    --hud-panel-header: rgba(12, 20, 35, 0.98);
    --hud-panel-hover: rgba(14, 24, 40, 0.98);
    --hud-border: rgba(232, 115, 30, 0.3);
    --hud-border-bright: rgba(232, 115, 30, 0.6);
    --hud-border-glow: 0 0 8px rgba(232, 115, 30, 0.15);
    --hud-orange: #e8731e;
    --hud-orange-bright: #f0a030;
    --hud-orange-dim: rgba(232, 115, 30, 0.12);
    --hud-purple: #7c3aed;
    --hud-purple-bright: #a78bfa;
    --hud-purple-dim: rgba(124, 58, 237, 0.15);
    --hud-text: #b0bcc8;
    --hud-text-bright: #dce4ec;
    --hud-text-dim: #4a5568;
    --hud-green: #10b981;
    --hud-red: #ef4444;
    --hud-yellow: #f59e0b;
    --hud-blue: #3b82f6;
    --hud-cyan: #06b6d4;

    /* Override existing variables */
    --primary-orange: #e8731e;
    --secondary-purple: #7c3aed;
    --accent-purple: #a78bfa;
    --dark-bg: #060a12;
    --card-bg: rgba(8, 14, 24, 0.95);
    --card-secondary: rgba(12, 20, 35, 0.8);
    --input-bg: rgba(6, 10, 18, 0.9);
    --text-color: #dce4ec;
    --text-primary: #b0bcc8;
    --text-secondary: #5a6a7e;
    --text-muted: #3a4a5e;
    --border-color: rgba(232, 115, 30, 0.3);
    --color-orange: #e8731e;
    --color-purple: #7c3aed;
    --color-green: #10b981;
    --color-red: #ef4444;
    --color-gold: #f59e0b;
    --color-blue: #3b82f6;

    /* Angular aesthetic - minimal border radius */
    --border-radius: 2px;
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 3px;
    --radius-xl: 3px;

    /* Font stacks */
    --font-hud: 'Rajdhani', 'Segoe UI', sans-serif;
    --font-mono: 'Share Tech Mono', 'Courier New', monospace;
    --font-display: 'Orbitron', 'Rajdhani', sans-serif;
}


/* ========== BODY & BACKGROUND ========== */
body {
    font-family: var(--font-hud) !important;
    background: var(--hud-bg) !important;
    color: var(--hud-text) !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px;
    font-size: 15px !important;
}

/* Replace animated stars with subtle HUD grid + scanlines */
body::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    background-image:
        /* Grid pattern */
        linear-gradient(rgba(232, 115, 30, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 115, 30, 0.025) 1px, transparent 1px),
        /* Scanlines */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.04) 2px,
            rgba(0, 0, 0, 0.04) 4px
        ) !important;
    background-size: 50px 50px, 50px 50px, 100% 4px !important;
    z-index: 0 !important;
    opacity: 1 !important;
    animation: none !important;
}

/* Bottom status bar */
body::after {
    content: 'SYSTEM ONLINE          DATA TRANSFER COMPLETE          CONNECTION STABLE          v2.4.1' !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 28px !important;
    background: rgba(8, 14, 24, 0.98) !important;
    border-top: 1px solid var(--hud-border) !important;
    color: var(--hud-text-dim) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    z-index: 9999 !important;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Ensure body content doesn't get hidden behind status bar */
body {
    padding-bottom: 32px !important;
}


/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--hud-text-bright) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

h1 { font-size: 1.5rem !important; letter-spacing: 3px !important; }
h2 { font-size: 1.25rem !important; }
h3 { font-size: 1.05rem !important; }
h4 { font-size: 0.9rem !important; }

/* Section headers - dark bar style */
.card h2, .card h3 {
    background: var(--hud-panel-header) !important;
    margin: -30px -30px 20px -30px !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--hud-border) !important;
    color: var(--hud-orange) !important;
    font-family: var(--font-display) !important;
    font-size: 0.85rem !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* Data values in monospace */
span[id*="resource-"],
span[id*="balance"],
span[id*="count"],
span[id*="total"],
span[id*="price"],
span[id*="amount"],
.role-indicator,
td[style*="text-align: right"] {
    font-family: var(--font-mono) !important;
}

p {
    color: var(--hud-text) !important;
}


/* ========== NAVIGATION ========== */

/* Header bar */
.header {
    background: rgba(8, 14, 24, 0.98) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--hud-border-glow), 0 4px 20px rgba(0, 0, 0, 0.6) !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

/* Add corner brackets to header */
.header::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 18px;
    height: 18px;
    border-top: 2px solid var(--hud-orange);
    border-left: 2px solid var(--hud-orange);
    z-index: 10;
    pointer-events: none;
}

.header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 18px;
    height: 18px;
    border-bottom: 2px solid var(--hud-orange);
    border-right: 2px solid var(--hud-orange);
    z-index: 10;
    pointer-events: none;
}

/* Navigation container */
.header nav,
nav[style*="display: flex"] {
    padding: 8px 12px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}

/* Navigation buttons - ship class tab style */
.nav-btn {
    padding: 8px 14px !important;
    background: transparent !important;
    color: var(--hud-text-dim) !important;
    border: 1px solid rgba(232, 115, 30, 0.15) !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    position: relative !important;
    min-height: auto !important;
}

.nav-btn::before {
    display: none !important;
}

.nav-btn:hover {
    color: var(--hud-orange) !important;
    border-color: var(--hud-border-bright) !important;
    background: var(--hud-orange-dim) !important;
    box-shadow: var(--hud-border-glow) !important;
    transform: none !important;
}

.nav-btn.active {
    color: #fff !important;
    background: rgba(232, 115, 30, 0.2) !important;
    border-color: var(--hud-orange) !important;
    box-shadow: var(--hud-border-glow), inset 0 0 20px rgba(232, 115, 30, 0.1) !important;
}

.nav-btn.active::before {
    display: none !important;
}

/* Play Now button special styling */
.nav-btn[href*="itch.io"],
a.nav-btn[style*="background: linear-gradient"] {
    background: linear-gradient(135deg, rgba(232, 115, 30, 0.3), rgba(232, 115, 30, 0.15)) !important;
    border-color: var(--hud-orange) !important;
    color: var(--hud-orange-bright) !important;
    box-shadow: var(--hud-border-glow) !important;
}

/* Dropdown */
.nav-dropdown {
    position: relative !important;
}

.nav-dropdown .nav-btn {
    cursor: pointer !important;
}

.nav-dropdown-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: rgba(8, 14, 24, 0.98) !important;
    border: 1px solid var(--hud-border) !important;
    border-top: none !important;
    min-width: 180px !important;
    z-index: 10001 !important;
    display: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7) !important;
    border-radius: 0 !important;
}

.nav-dropdown.open .nav-dropdown-content {
    display: block !important;
}

.nav-dropdown-content a {
    display: block !important;
    padding: 10px 16px !important;
    color: var(--hud-text) !important;
    text-decoration: none !important;
    font-family: var(--font-hud) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(232, 115, 30, 0.1) !important;
    transition: all 0.15s ease !important;
}

.nav-dropdown-content a::before {
    content: '▸ ' !important;
    color: var(--hud-orange) !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
}

.nav-dropdown-content a:hover {
    background: var(--hud-orange-dim) !important;
    color: var(--hud-orange) !important;
}

.nav-dropdown-content a:hover::before {
    opacity: 1 !important;
}

.nav-dropdown-content a:last-child {
    border-bottom: none !important;
}

/* Logout button */
#logout-btn {
    border-radius: 0 !important;
    border-color: rgba(232, 115, 30, 0.2) !important;
}

#logout-btn:hover {
    border-color: var(--hud-red) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

#logout-btn::before {
    display: none !important;
}

/* Settings icon */
a[href="/settings.html"][title="Settings"] {
    border-radius: 0 !important;
    border-color: rgba(232, 115, 30, 0.2) !important;
}


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

.card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    padding: 30px !important;
    box-shadow: var(--hud-border-glow), 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: none !important;
    position: relative !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    overflow: visible !important;
}

.card:hover {
    border-color: var(--hud-border-bright) !important;
    box-shadow: 0 0 15px rgba(232, 115, 30, 0.2), 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transform: none !important;
}

/* Corner brackets on cards */
.card::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
}

.card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    opacity: 1 !important;
}


/* ========== TABLES ========== */

table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-family: var(--font-hud) !important;
}

thead {
    background: var(--hud-panel-header) !important;
}

th {
    color: var(--hud-orange) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    padding: 12px 15px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--hud-border-bright) !important;
    white-space: nowrap !important;
}

td {
    padding: 10px 15px !important;
    color: var(--hud-text) !important;
    border-bottom: 1px solid rgba(232, 115, 30, 0.1) !important;
    font-size: 13px !important;
    font-family: var(--font-mono) !important;
}

tbody tr {
    transition: background 0.15s ease !important;
}

tbody tr:hover {
    background: var(--hud-orange-dim) !important;
    transform: none !important;
}

tbody tr:last-child td {
    border-bottom: none !important;
}


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

button, .btn {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    position: relative !important;
    transition: all 0.15s ease !important;
}

.btn-primary, button.primary,
button[type="submit"] {
    background: transparent !important;
    color: var(--hud-orange) !important;
    border: 1px solid var(--hud-orange) !important;
    padding: 10px 24px !important;
    font-size: 12px !important;
}

.btn-primary:hover, button.primary:hover,
button[type="submit"]:hover {
    background: rgba(232, 115, 30, 0.15) !important;
    box-shadow: 0 0 15px rgba(232, 115, 30, 0.3), inset 0 0 15px rgba(232, 115, 30, 0.1) !important;
    color: var(--hud-orange-bright) !important;
    transform: none !important;
    border-color: var(--hud-orange-bright) !important;
}

.btn-secondary, button.secondary {
    background: transparent !important;
    color: var(--hud-purple-bright) !important;
    border: 1px solid var(--hud-purple) !important;
}

.btn-secondary:hover, button.secondary:hover {
    background: var(--hud-purple-dim) !important;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.3) !important;
    transform: none !important;
}

.btn-success, button.success {
    background: transparent !important;
    color: var(--hud-green) !important;
    border: 1px solid var(--hud-green) !important;
}

.btn-success:hover, button.success:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
    transform: none !important;
}

.btn-danger, button.danger {
    background: transparent !important;
    color: var(--hud-red) !important;
    border: 1px solid var(--hud-red) !important;
}

.btn-danger:hover, button.danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3) !important;
    transform: none !important;
}

.btn-sm {
    padding: 6px 14px !important;
    font-size: 10px !important;
    min-height: auto !important;
    letter-spacing: 1.5px !important;
}


/* ========== FORMS ========== */

.form-group label {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 10px !important;
    color: var(--hud-orange) !important;
    font-weight: 600 !important;
}

.form-group input,
.form-group select,
.form-group textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    background: rgba(6, 10, 18, 0.9) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    color: var(--hud-text-bright) !important;
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
    transition: all 0.15s ease !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--hud-orange) !important;
    box-shadow: 0 0 12px rgba(232, 115, 30, 0.2), inset 0 0 20px rgba(232, 115, 30, 0.05) !important;
    background: rgba(10, 16, 28, 0.95) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--hud-text-dim) !important;
    font-family: var(--font-mono) !important;
}


/* ========== BADGES & LABELS ========== */

.badge {
    font-family: var(--font-display) !important;
    border-radius: 0 !important;
    letter-spacing: 1.5px !important;
    font-size: 9px !important;
    padding: 3px 10px !important;
    font-weight: 600 !important;
}

.badge-primary {
    background: var(--hud-orange-dim) !important;
    color: var(--hud-orange) !important;
    border: 1px solid rgba(232, 115, 30, 0.4) !important;
}

.badge-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--hud-green) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

.badge-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--hud-red) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--hud-yellow) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}


/* ========== MODALS ========== */

.modal {
    z-index: 10000 !important;
}

.modal-content,
.modal-dialog {
    background: rgba(8, 14, 24, 0.98) !important;
    border: 1px solid var(--hud-border-bright) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 30px rgba(232, 115, 30, 0.2), 0 8px 40px rgba(0, 0, 0, 0.8) !important;
    position: relative !important;
}

/* Corner brackets on modals */
.modal-content::before,
.modal-dialog::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--hud-orange);
    border-left: 2px solid var(--hud-orange);
    z-index: 10;
    pointer-events: none;
}

.modal-content::after,
.modal-dialog::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid var(--hud-orange);
    border-right: 2px solid var(--hud-orange);
    z-index: 10;
    pointer-events: none;
}

.modal-header {
    border-bottom: 1px solid var(--hud-border) !important;
    background: var(--hud-panel-header) !important;
}

.modal-title {
    font-family: var(--font-display) !important;
    color: var(--hud-orange) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 0.9rem !important;
}

.modal-body {
    background: transparent !important;
    color: var(--hud-text) !important;
}

.modal-footer {
    border-top: 1px solid var(--hud-border) !important;
    background: transparent !important;
}

.close {
    color: var(--hud-text-dim) !important;
    font-size: 24px !important;
    transition: color 0.15s ease !important;
}

.close:hover {
    color: var(--hud-red) !important;
}


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

.admin-header {
    background: linear-gradient(135deg, rgba(8, 14, 24, 0.98), rgba(12, 20, 35, 0.98)) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    padding: 20px 30px !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

/* Admin header corner brackets */
.admin-header::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--hud-orange);
    border-left: 2px solid var(--hud-orange);
    z-index: 5;
    pointer-events: none;
}

.admin-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid var(--hud-orange);
    border-right: 2px solid var(--hud-orange);
    z-index: 5;
    pointer-events: none;
}

.admin-header h1 {
    color: var(--hud-orange) !important;
    font-family: var(--font-display) !important;
    font-size: 1.2rem !important;
    letter-spacing: 4px !important;
    margin: 0 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--hud-orange) !important;
    background-clip: unset !important;
}

.admin-container {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 20px 40px !important;
}


/* ========== STATS / KPI GRIDS ========== */

.stats-grid,
.kpi-grid,
.stat-cards {
    display: grid !important;
    gap: 12px !important;
}

.stat-card,
.kpi-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    padding: 16px !important;
    position: relative !important;
    transition: border-color 0.15s ease !important;
}

.stat-card:hover,
.kpi-card:hover {
    border-color: var(--hud-border-bright) !important;
}

.stat-card label,
.kpi-card label,
.stat-card .stat-label,
.kpi-card .kpi-label {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 9px !important;
    color: var(--hud-text-dim) !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.stat-card .stat-value,
.kpi-card .kpi-value,
.stat-card .value,
.kpi-card .value {
    font-family: var(--font-mono) !important;
    font-size: 1.4rem !important;
    color: var(--hud-orange-bright) !important;
    font-weight: 700 !important;
}


/* ========== PROGRESS BARS ========== */

progress,
.progress-bar,
.level-bar,
.efficiency-bar {
    background: rgba(6, 10, 18, 0.8) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    height: 8px !important;
    overflow: hidden !important;
}

progress::-webkit-progress-bar {
    background: rgba(6, 10, 18, 0.8) !important;
    border-radius: 0 !important;
}

progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--hud-orange), var(--hud-orange-bright)) !important;
    border-radius: 0 !important;
}


/* ========== TABS ========== */

.tab-nav,
.filter-tabs,
.phase-nav {
    display: flex !important;
    gap: 2px !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--hud-border) !important;
    background: rgba(6, 10, 18, 0.5) !important;
    padding: 3px !important;
}

.tab-btn,
.filter-tab,
.phase-btn,
.tab-nav button,
.filter-tabs button,
.phase-nav button {
    background: transparent !important;
    color: var(--hud-text-dim) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    min-height: auto !important;
}

.tab-btn:hover,
.filter-tab:hover,
.phase-btn:hover,
.tab-nav button:hover,
.filter-tabs button:hover,
.phase-nav button:hover {
    color: var(--hud-orange) !important;
    background: var(--hud-orange-dim) !important;
    transform: none !important;
    box-shadow: none !important;
}

.tab-btn.active,
.filter-tab.active,
.phase-btn.active,
.tab-nav button.active,
.filter-tabs button.active,
.phase-nav button.active {
    color: #fff !important;
    background: rgba(232, 115, 30, 0.2) !important;
    border: 1px solid var(--hud-orange) !important;
    box-shadow: inset 0 0 15px rgba(232, 115, 30, 0.1) !important;
}


/* ========== MESSAGES / ALERTS ========== */

.message, .alert {
    border-radius: 0 !important;
    border-left: 3px solid !important;
    font-family: var(--font-hud) !important;
    background: var(--hud-panel) !important;
}

.error-message {
    color: var(--hud-red) !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
}

.success-message {
    color: var(--hud-green) !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
}


/* ========== LOADING STATES ========== */

.spinner,
.loading-spinner {
    border-color: rgba(232, 115, 30, 0.2) !important;
    border-top-color: var(--hud-orange) !important;
    border-radius: 50% !important;
}


/* ========== TOAST NOTIFICATIONS ========== */

.toast {
    background: rgba(8, 14, 24, 0.98) !important;
    border-radius: 0 !important;
    font-family: var(--font-hud) !important;
}

.toast-success {
    border-color: var(--hud-green) !important;
}

.toast-error {
    border-color: var(--hud-red) !important;
}


/* ========== LOGIN / AUTH SCREENS ========== */

#login-screen,
#register-screen,
#forgot-password-screen {
    background:
        /* Grid overlay */
        linear-gradient(rgba(232, 115, 30, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 115, 30, 0.015) 1px, transparent 1px),
        /* Dark gradient */
        linear-gradient(180deg, rgba(6, 10, 18, 0.95) 0%, rgba(10, 16, 28, 0.9) 50%, rgba(6, 10, 18, 0.95) 100%),
        /* Keep background image but darker */
        url('images/background.png') !important;
    background-size: 50px 50px, 50px 50px, cover, cover !important;
    background-position: 0 0, 0 0, center, center !important;
}

#login-screen::after,
#register-screen::after,
#forgot-password-screen::after {
    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(6, 10, 18, 0.7) 100%) !important;
}

/* Login card styling */
#login-screen .card,
#register-screen .card,
#forgot-password-screen .card {
    background: rgba(8, 14, 24, 0.95) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 30px rgba(232, 115, 30, 0.1), 0 8px 40px rgba(0, 0, 0, 0.6) !important;
    max-width: 420px !important;
    width: 100% !important;
}

#login-screen .card h2,
#register-screen .card h2,
#forgot-password-screen .card h2 {
    background: var(--hud-panel-header) !important;
    margin: -30px -30px 24px -30px !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--hud-border) !important;
    color: var(--hud-orange) !important;
    font-size: 0.85rem !important;
    letter-spacing: 3px !important;
}

/* Tagline */
.tagline {
    font-family: var(--font-display) !important;
    letter-spacing: 4px !important;
    font-size: 0.8rem !important;
    color: var(--hud-text-dim) !important;
    text-shadow: none !important;
}

/* Logo glow adjustment */
.logo-image {
    filter: drop-shadow(0 0 20px rgba(232, 115, 30, 0.4)) drop-shadow(0 0 40px rgba(124, 58, 237, 0.2)) !important;
}

/* Switch form links */
.switch-form {
    text-align: center !important;
    margin-top: 20px !important;
}

.switch-form a {
    color: var(--hud-orange) !important;
    font-family: var(--font-hud) !important;
    letter-spacing: 1px !important;
    font-size: 13px !important;
}

.switch-form p {
    color: var(--hud-text-dim) !important;
    font-size: 13px !important;
}


/* ========== DASHBOARD ========== */

.dashboard {
    display: grid !important;
    gap: 20px !important;
}

.dashboard-top-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

.profile-card {
    background: var(--hud-panel) !important;
}

.profile-info {
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important;
}

.profile-details p {
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

.profile-details strong {
    color: var(--hud-orange) !important;
    font-family: var(--font-display) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
}

.avatar img,
#avatar-img {
    border-radius: 0 !important;
    border: 1px solid var(--hud-border) !important;
}

/* Resource table in dashboard */
.resource-table table {
    background: transparent !important;
}


/* ========== GUILD-SPECIFIC ========== */

.guild-tab-nav {
    display: flex !important;
    gap: 0 !important;
    border: 1px solid var(--hud-border) !important;
    background: rgba(6, 10, 18, 0.5) !important;
    margin-bottom: 20px !important;
}

.guild-tab-btn {
    flex: 1 !important;
    padding: 12px 16px !important;
    background: transparent !important;
    color: var(--hud-text-dim) !important;
    border: none !important;
    border-right: 1px solid var(--hud-border) !important;
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

.guild-tab-btn:last-child {
    border-right: none !important;
}

.guild-tab-btn.active {
    background: rgba(232, 115, 30, 0.15) !important;
    color: var(--hud-orange) !important;
}


/* ========== MARKETPLACE-SPECIFIC ========== */

.marketplace-grid {
    display: grid !important;
    gap: 16px !important;
}

.order-book {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
}

.buy-orders {
    color: var(--hud-green) !important;
}

.sell-orders {
    color: var(--hud-red) !important;
}


/* ========== PORT AUTHORITY ========== */

.contracts-table {
    font-family: var(--font-mono) !important;
}

.goods-list {
    display: grid !important;
    gap: 8px !important;
}


/* ========== OUTPOST / GAME HUD ========== */

#gameCanvas {
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 20px rgba(232, 115, 30, 0.1) !important;
}


/* ========== PLANET OUTPOST ========== */

.ops-header {
    font-family: var(--font-display) !important;
    letter-spacing: 4px !important;
}

.week-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.modifier-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}


/* ========== SCROLLBAR ========== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--hud-bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(232, 115, 30, 0.3);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(232, 115, 30, 0.5);
}


/* ========== SELECTION ========== */

::selection {
    background: rgba(232, 115, 30, 0.3);
    color: #fff;
}


/* ========== LINKS ========== */

a {
    color: var(--hud-orange) !important;
    transition: color 0.15s ease !important;
}

a:hover {
    color: var(--hud-orange-bright) !important;
}


/* ========== NOTIFICATION BELL ========== */

#notification-bell-placeholder {
    font-family: var(--font-hud) !important;
}


/* ========== CHART.JS OVERRIDES ========== */

canvas:not(#gameCanvas) {
    border-radius: 0 !important;
}


/* ========== MISC COMPONENT OVERRIDES ========== */

/* Info icons */
.info-icon {
    border-radius: 0 !important;
    border-color: var(--hud-orange) !important;
    color: var(--hud-orange) !important;
    font-family: var(--font-mono) !important;
}

/* Wallet roles */
.wallet-roles p strong,
.wallet-connected strong {
    font-family: var(--font-display) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    color: var(--hud-text) !important;
}

.role-indicator {
    font-family: var(--font-mono) !important;
    color: var(--hud-yellow) !important;
}

/* WIP Banner */
.wip-banner {
    background: rgba(8, 14, 24, 0.95) !important;
    border: 1px solid var(--hud-yellow) !important;
    color: var(--hud-yellow) !important;
    font-family: var(--font-display) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}

/* Station labels */
.station-selector,
.station-dropdown {
    font-family: var(--font-hud) !important;
}

/* Crown Exchange title */
.marketplace-title-header,
.port-title-header,
.ops-header {
    font-family: var(--font-display) !important;
    color: var(--hud-orange) !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
}

/* Filter sections */
.filter-section,
.filter-panel,
.controls-section {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}


/* ========== ANIMATIONS ========== */

@keyframes hudPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes hudScan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

@keyframes hudGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(232, 115, 30, 0.2); }
    50% { box-shadow: 0 0 15px rgba(232, 115, 30, 0.4); }
}


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

/* ========== ADMIN PAGE-SPECIFIC OVERRIDES ========== */

/* Admin header - override red gradient */
.admin-header {
    background: var(--hud-panel-header) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    padding: 20px 30px !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

.admin-header h1 {
    color: var(--hud-orange) !important;
    font-family: var(--font-display) !important;
    font-size: 1.2rem !important;
    letter-spacing: 4px !important;
    margin: 0 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--hud-orange) !important;
}

/* KPI cards across admin pages */
.kpi-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    padding: 20px !important;
    position: relative !important;
    overflow: visible !important;
    transition: border-color 0.15s ease !important;
}

.kpi-card::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    right: auto !important;
    width: 14px !important;
    height: 14px !important;
    background: none !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    border-bottom: none !important;
    border-right: none !important;
}

.kpi-card:hover {
    border-color: var(--hud-border-bright) !important;
    box-shadow: 0 0 15px rgba(232, 115, 30, 0.15) !important;
    transform: none !important;
}

.kpi-label {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 9px !important;
    color: var(--hud-text-dim) !important;
    font-weight: 600 !important;
}

.kpi-value {
    font-family: var(--font-mono) !important;
    font-size: 1.8rem !important;
    color: var(--hud-orange-bright) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(232, 115, 30, 0.2) !important;
}

.kpi-subtext {
    color: var(--hud-text-dim) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
}

/* Tier-specific accent colors */
.tier-25 .kpi-value { color: var(--hud-green) !important; }
.tier-50 .kpi-value { color: var(--hud-blue) !important; }
.tier-100 .kpi-value { color: var(--hud-yellow) !important; }

/* Admin refresh/export buttons */
.refresh-btn {
    background: transparent !important;
    border: 1px solid var(--hud-orange) !important;
    color: var(--hud-orange) !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    letter-spacing: 2px !important;
}

.refresh-btn:hover {
    background: var(--hud-orange-dim) !important;
    box-shadow: 0 0 12px rgba(232, 115, 30, 0.3) !important;
    transform: none !important;
}

.export-btn {
    background: transparent !important;
    border: 1px solid var(--hud-green) !important;
    color: var(--hud-green) !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    letter-spacing: 2px !important;
}

.export-btn:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
    transform: none !important;
}

/* Admin search box */
.search-box {
    background: rgba(6, 10, 18, 0.9) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    color: var(--hud-text-bright) !important;
    font-family: var(--font-mono) !important;
}

.search-box:focus {
    border-color: var(--hud-orange) !important;
    box-shadow: 0 0 12px rgba(232, 115, 30, 0.2) !important;
}

.search-box::placeholder {
    color: var(--hud-text-dim) !important;
}

/* Admin tables */
.airdrop-table,
.contracts-table-wrap,
.history-table-wrap {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.airdrop-table th {
    background: var(--hud-panel-header) !important;
    color: var(--hud-orange) !important;
    border-bottom: 1px solid var(--hud-border-bright) !important;
    font-family: var(--font-display) !important;
    letter-spacing: 2px !important;
}

.airdrop-table td {
    color: var(--hud-text) !important;
    border-bottom: 1px solid rgba(232, 115, 30, 0.1) !important;
    font-family: var(--font-mono) !important;
}

.airdrop-table tr:hover {
    background: var(--hud-orange-dim) !important;
}

/* Tier badges */
.tier-badge {
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    letter-spacing: 1.5px !important;
}

.tier-badge.tier-25 {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid var(--hud-green) !important;
    color: var(--hud-green) !important;
}

.tier-badge.tier-50 {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid var(--hud-blue) !important;
    color: var(--hud-blue) !important;
}

.tier-badge.tier-100 {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid var(--hud-yellow) !important;
    color: var(--hud-yellow) !important;
}

/* Admin guild logos grid */
.logos-grid,
.logo-grid {
    gap: 16px !important;
}

.logo-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    transition: border-color 0.15s ease !important;
}

.logo-card:hover {
    border-color: var(--hud-border-bright) !important;
}

/* Pagination */
.pagination {
    font-family: var(--font-display) !important;
}

.pagination button,
#prevBtn, #nextBtn {
    background: transparent !important;
    border: 1px solid var(--hud-border) !important;
    color: var(--hud-orange) !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
}

.pagination button:hover,
#prevBtn:hover, #nextBtn:hover {
    background: var(--hud-orange-dim) !important;
    border-color: var(--hud-orange) !important;
}

#pageInfo {
    font-family: var(--font-mono) !important;
    color: var(--hud-text-dim) !important;
}


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

.settings-section {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    position: relative !important;
}

.settings-section h3 {
    font-family: var(--font-display) !important;
    color: var(--hud-orange) !important;
}

.settings-section .status-msg,
#display-name-status,
#password-status,
#enjin-wallet-status-msg {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
}


/* ========== MARKETPLACE SPECIFIC ========== */

.marketplace-title-header {
    font-family: var(--font-display) !important;
    color: var(--hud-orange) !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
}

.resource-btn,
.resource-selector button {
    background: transparent !important;
    border: 1px solid var(--hud-border) !important;
    color: var(--hud-text) !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

.resource-btn:hover,
.resource-selector button:hover {
    border-color: var(--hud-orange) !important;
    color: var(--hud-orange) !important;
    background: var(--hud-orange-dim) !important;
}

.resource-btn.active,
.resource-selector button.active {
    background: rgba(232, 115, 30, 0.2) !important;
    border-color: var(--hud-orange) !important;
    color: var(--hud-orange-bright) !important;
}

/* Order book buy/sell colors */
.buy-price, .buy-order { color: var(--hud-green) !important; }
.sell-price, .sell-order { color: var(--hud-red) !important; }

/* Trading panel tabs */
.trade-tab,
.trading-tab {
    background: transparent !important;
    border: 1px solid var(--hud-border) !important;
    color: var(--hud-text-dim) !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
}

.trade-tab.active,
.trading-tab.active {
    background: rgba(232, 115, 30, 0.2) !important;
    border-color: var(--hud-orange) !important;
    color: var(--hud-orange) !important;
}

/* Market stats */
.stat-box,
.market-stat {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.stat-label {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 9px !important;
    color: var(--hud-text-dim) !important;
}

.stat-value {
    font-family: var(--font-mono) !important;
    color: var(--hud-orange-bright) !important;
}

/* Station selector */
.station-selector,
#station-dropdown,
.station-select {
    background: rgba(6, 10, 18, 0.9) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    color: var(--hud-text-bright) !important;
    font-family: var(--font-mono) !important;
}


/* ========== PORT AUTHORITY SPECIFIC ========== */

.port-title-header {
    font-family: var(--font-display) !important;
    color: var(--hud-orange) !important;
}

.contract-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    position: relative !important;
}

.contract-card:hover {
    border-color: var(--hud-border-bright) !important;
}

.safe-station { color: var(--hud-green) !important; }
.dangerous-station { color: var(--hud-red) !important; }

/* Goods categories */
.goods-category {
    font-family: var(--font-display) !important;
    color: var(--hud-orange) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

.good-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.good-card:hover {
    border-color: var(--hud-border-bright) !important;
}


/* ========== OUTPOST SUPPLY GAME ========== */

.route-card,
.cargo-section {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.route-card:hover,
.route-card.selected {
    border-color: var(--hud-orange) !important;
    box-shadow: 0 0 15px rgba(232, 115, 30, 0.2) !important;
}

/* Game HUD elements */
.hud-element,
.game-hud span {
    font-family: var(--font-mono) !important;
}

#time-remaining,
#cargo-status,
#hull-status,
#boost-status {
    font-family: var(--font-mono) !important;
    color: var(--hud-orange-bright) !important;
}

/* Results screen */
.result-grade,
#results-grade {
    font-family: var(--font-display) !important;
    color: var(--hud-orange-bright) !important;
}


/* ========== PLANET OUTPOST ========== */

.ops-header {
    font-family: var(--font-display) !important;
    color: var(--hud-orange) !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
}

.weekly-banner {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.week-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.week-card-value,
.week-card .value {
    font-family: var(--font-mono) !important;
    color: var(--hud-orange-bright) !important;
}

.modifier-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.severity {
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    letter-spacing: 1px !important;
}

.phase-content {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}


/* ========== PROFIT & LOSS ========== */

.pnl-card,
.summary-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.pnl-positive,
.profit-positive { color: var(--hud-green) !important; }

.pnl-negative,
.profit-negative { color: var(--hud-red) !important; }

#pnl-chart {
    border-radius: 0 !important;
}


/* ========== ARBITRAGE ========== */

.opportunity-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    transition: border-color 0.15s ease !important;
}

.opportunity-card:hover {
    border-color: var(--hud-border-bright) !important;
}


/* ========== PLANET OUTPOST INSTRUCTIONS ========== */

.instructions-header {
    background: var(--hud-panel-header) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.instructions-header .back-button,
.back-button {
    background: transparent !important;
    border: 1px solid var(--hud-border) !important;
    color: var(--hud-orange) !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
}

.back-button:hover {
    background: var(--hud-orange-dim) !important;
    border-color: var(--hud-orange) !important;
}

.quick-nav {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.quick-nav a {
    color: var(--hud-text) !important;
    border-bottom: 1px solid rgba(232, 115, 30, 0.1) !important;
    font-family: var(--font-hud) !important;
}

.quick-nav a:hover {
    color: var(--hud-orange) !important;
    background: var(--hud-orange-dim) !important;
}

.section {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.highlight-box {
    background: var(--hud-orange-dim) !important;
    border: 1px solid var(--hud-border) !important;
    border-left: 3px solid var(--hud-orange) !important;
    border-radius: 0 !important;
    color: var(--hud-text-bright) !important;
}

.warning-box {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-left: 3px solid var(--hud-red) !important;
    border-radius: 0 !important;
    color: var(--hud-text-bright) !important;
}

.tip-box {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-left: 3px solid var(--hud-green) !important;
    border-radius: 0 !important;
    color: var(--hud-text-bright) !important;
}

.phase-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.resource-table {
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}


/* ========== GUILD SPECIFIC ========== */

#guild-details {
    background: transparent !important;
}

.treasury-grid {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.members-list {
    background: transparent !important;
}

.member-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.member-card:hover {
    border-color: var(--hud-border-bright) !important;
}

.guild-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    transition: border-color 0.15s ease !important;
}

.guild-card:hover {
    border-color: var(--hud-border-bright) !important;
}

.logs-container {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.log-entry {
    border-bottom: 1px solid rgba(232, 115, 30, 0.1) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
}

/* Guild settings */
#guild-settings {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

/* Guild logo upload */
#logo-upload {
    border: 1px dashed var(--hud-border) !important;
    border-radius: 0 !important;
    background: rgba(6, 10, 18, 0.5) !important;
}

/* Application/invite cards */
.application-card,
.invite-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}


/* ========== STATION PAGE ========== */

#no-wallet-section,
#no-token-section,
#station-interface {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.mission-card {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.mission-card:hover {
    border-color: var(--hud-border-bright) !important;
}

#complete-telemetry-btn,
#complete-crelyte-btn {
    background: transparent !important;
    border: 1px solid var(--hud-green) !important;
    color: var(--hud-green) !important;
    border-radius: 0 !important;
}

#complete-telemetry-btn:hover,
#complete-crelyte-btn:hover {
    background: rgba(16, 185, 129, 0.15) !important;
}


/* ========== ADMIN APPROVED CLONES ========== */

.orders-container {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

.stats-container {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.stats-container .stat {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
}

/* Class badges */
.class-warrior { color: var(--hud-red) !important; border-color: var(--hud-red) !important; }
.class-support { color: var(--hud-green) !important; border-color: var(--hud-green) !important; }
.class-trader { color: var(--hud-yellow) !important; border-color: var(--hud-yellow) !important; }
.class-miner { color: var(--hud-cyan) !important; border-color: var(--hud-cyan) !important; }
.class-explorer { color: var(--hud-purple-bright) !important; border-color: var(--hud-purple) !important; }


/* ========== ADMIN SYNC USERNAMES ========== */

#result {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    color: var(--hud-text) !important;
}


/* ========== CONFIRMATION MODAL (JS-created) ========== */

.confirmation-modal,
.confirm-modal {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(3px) !important;
}

.confirmation-modal .modal-content,
.confirm-modal .modal-content {
    background: rgba(8, 14, 24, 0.98) !important;
    border: 1px solid var(--hud-border-bright) !important;
    border-radius: 0 !important;
}


/* ========== BALANCE DISPLAYS ========== */

.balance-display,
.crown-balance,
.resource-balance {
    font-family: var(--font-mono) !important;
    color: var(--hud-orange-bright) !important;
}

#cw-balance, #cr-balance, #tl-balance, #ov-balance,
#crown-balance {
    font-family: var(--font-mono) !important;
    color: var(--hud-orange-bright) !important;
}


/* ========== NUCLEAR BORDER-RADIUS OVERRIDE ========== */
/* Force sharp corners on ALL page-specific selectors across every page */

/* Universal nuclear override for ALL elements */
*:not(.loading-spinner):not(.user-avatar):not(.avatar-img):not(.phase-num):not(.task-icon):not(.good-icon) {
    border-radius: 0 !important;
}

/* ============================================================
   MARKETPLACE PAGE — full override
   ============================================================ */
.marketplace-title-header,
.marketplace-header,
.station-selector-container,
.station-info,
.station-dropdown,
.station-input,
.station-go-btn,
.station-autocomplete,
.section-panel,
.resource-selector,
.resource-btn,
.market-stats,
.stat-item,
.order-book,
.order-item,
.trading-panel,
.tab-btn,
.my-orders,
.cancel-btn,
.trade-history,
.notification,
.balance-display,
.balances-header,
.balance-card,
.status-badge,
.sort-select,
.quick-trade-btn,
.pagination-controls,
.page-btn,
.modal-content,
.modal-details,
.modal-btn,
.order-table,
.order-list::-webkit-scrollbar-track,
.order-list::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
}

/* Marketplace section panels — corner brackets */
.section-panel,
.order-book,
.trading-panel,
.my-orders,
.trade-history,
.market-stats,
.balances-header {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
    border-radius: 0 !important;
}

.section-panel::before,
.order-book::before,
.trading-panel::before,
.my-orders::before,
.trade-history::before,
.market-stats::before,
.balances-header::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
}

.section-panel::after,
.order-book::after,
.trading-panel::after,
.my-orders::after,
.trade-history::after,
.market-stats::after,
.balances-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
}


/* ============================================================
   ADMIN PAGES — full override  
   ============================================================ */
.admin-header,
.kpi-card,
.search-box,
.refresh-btn,
.export-btn,
.airdrop-table,
.tier-badge,
.btn,
.coming-soon-overlay,
.chart-container,
.filters-section,
.filter-group input,
.filter-group select,
.stat-card,
.contracts-table-wrapper,
.pagination button,
.error,
.orders-container,
.class-badge,
.model-preview,
.filter-tab,
.logo-card,
.logo-preview,
.logo-status,
.logo-actions button,
.rejection-reason,
.modal-content textarea,
.modal-actions button,
.guild-card,
.guild-card-logo,
.guild-card-actions button,
.member-item,
.member-role,
.container,
#result {
    border-radius: 0 !important;
}

/* Admin table wrappers — corner brackets */
.airdrop-table,
.contracts-table-wrapper,
.orders-container {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
}

.airdrop-table::before,
.contracts-table-wrapper::before,
.orders-container::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
}

.airdrop-table::after,
.contracts-table-wrapper::after,
.orders-container::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
}

/* KPI cards — corner brackets */
.kpi-card,
.stat-card {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
}

.kpi-card::before,
.stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 12px !important;
    height: 12px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
}

.kpi-card::after,
.stat-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 12px !important;
    height: 12px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
}


/* ============================================================
   GUILDS PAGE — full override
   ============================================================ */
.guild-title-header,
.guilds-header,
.guild-tab,
.guild-card,
.guild-level,
.form-section,
.form-group select,
.form-group input[type="checkbox"],
.member-row,
.treasury-item,
.level-bar,
.log-entry,
.invite-card,
.username-suggestions,
.action-dropdown,
.recruitment-badge {
    border-radius: 0 !important;
}

/* Guild section panels — corner brackets */
.form-section,
.guilds-header,
.guild-card {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
}

.form-section::before,
.guilds-header::before,
.guild-card::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
}

.form-section::after,
.guilds-header::after,
.guild-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
}


/* ============================================================
   PORT AUTHORITY PAGE — full override
   ============================================================ */
.port-title-header,
.header,
.contract-section,
.active-contract-card,
.detail-item,
.cargo-info,
.filters-container,
.filter-group select,
.station-card,
.risk-badge,
.good-item,
.error-message,
.success-message,
.payout-breakdown,
#star-map {
    border-radius: 0 !important;
}

/* Port Authority section panels — corner brackets */
.contract-section,
.active-contract-card,
.filters-container {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
}

.contract-section::before,
.active-contract-card::before,
.filters-container::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
}

.contract-section::after,
.active-contract-card::after,
.filters-container::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
}


/* ============================================================
   OUTPOST SUPPLY PAGE — full override
   ============================================================ */
.outpost-status,
.status-item,
.efficiency-bar,
.cargo-selection,
.cargo-item,
.cargo-input input,
.route-card,
.game-hud,
.game-canvas-container,
.game-controls,
.results-header,
.result-card,
.warning-banner {
    border-radius: 0 !important;
}

/* Outpost section panels — corner brackets */
.outpost-status,
.cargo-selection,
.game-hud,
.results-header {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
}

.outpost-status::before,
.cargo-selection::before,
.game-hud::before,
.results-header::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
}

.outpost-status::after,
.cargo-selection::after,
.game-hud::after,
.results-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
}


/* ============================================================
   ARBITRAGE PAGE — full override
   ============================================================ */
.arbitrage-header,
.opportunity-card,
.profit-info {
    border-radius: 0 !important;
}

/* Arbitrage panels — corner brackets */
.arbitrage-header,
.opportunity-card {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
}

.arbitrage-header::before,
.opportunity-card::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
}

.arbitrage-header::after,
.opportunity-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
}


/* ============================================================
   PROFIT & LOSS PAGE — full override
   ============================================================ */
.pnl-header,
.info-banner,
.summary-card,
.filter-section,
.filter-btn,
.chart-container,
.history-section,
.resource-badge,
.station-badge,
.best-trade-card {
    border-radius: 0 !important;
}

/* P&L section panels — corner brackets */
.pnl-header,
.summary-card,
.filter-section,
.history-section,
.chart-container,
.best-trade-card {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
}

.pnl-header::before,
.summary-card::before,
.filter-section::before,
.history-section::before,
.chart-container::before,
.best-trade-card::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
}

.pnl-header::after,
.summary-card::after,
.filter-section::after,
.history-section::after,
.chart-container::after,
.best-trade-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
}


/* ============================================================
   PLANET OUTPOST PAGE — full override
   ============================================================ */
.ops-header,
.week-card,
.phase-btn,
.modifiers-section,
.modifier-card,
.modifier-card .severity,
.capital-section,
.resource-card,
.resource-input input,
.resource-input button,
.warning-box,
.commit-btn,
.game-section,
.leaderboard-section {
    border-radius: 0 !important;
}

/* Planet Outpost section panels — corner brackets */
.ops-header,
.modifiers-section,
.capital-section,
.game-section,
.leaderboard-section {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
}

.ops-header::before,
.modifiers-section::before,
.capital-section::before,
.game-section::before,
.leaderboard-section::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
}

.ops-header::after,
.modifiers-section::after,
.capital-section::after,
.game-section::after,
.leaderboard-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
}

/* Planet Outpost instructions tables */
.resource-table {
    border-radius: 0 !important;
    border: 1px solid var(--hud-border) !important;
    position: relative !important;
}


/* ============================================================
   SETTINGS PAGE — full override
   ============================================================ */
.settings-card,
.editable-field,
.editable-field input,
.editable-field select,
.toggle-switch {
    border-radius: 0 !important;
}


/* ============================================================
   STATION PAGE — all inline style overrides
   ============================================================ */
div[style*="border-radius"] {
    border-radius: 0 !important;
}


/* ============================================================
   GENERIC TABLE WRAPPERS — corner brackets
   ============================================================ */
/* Catch-all for any table wrapper that might not have specific rules */
.guild-table,
.contracts-table,
.orders-table,
.pnl-table,
.history-table,
.leaderboard-table,
.order-table {
    border-radius: 0 !important;
}

/* Table parent containers — corner brackets where tables live */
.guild-table-wrapper,
.pnl-table-wrapper {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
    border-radius: 0 !important;
}

/* Logo card — corner brackets (admin-logos) */
.logo-card {
    position: relative !important;
    border: 1px solid var(--hud-border) !important;
    background: var(--hud-panel) !important;
    border-radius: 0 !important;
}

.logo-card::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 12px !important;
    height: 12px !important;
    border-top: 2px solid var(--hud-orange) !important;
    border-left: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
}

.logo-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 12px !important;
    height: 12px !important;
    border-bottom: 2px solid var(--hud-orange) !important;
    border-right: 2px solid var(--hud-orange) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
}


/* ========== INLINE STYLE OVERRIDES ========== */
/* These override common inline styles using high-specificity selectors */

/* Logout button - override inline border-radius */
#logout-btn[style] {
    border-radius: 0 !important;
    border-color: rgba(232, 115, 30, 0.2) !important;
    opacity: 0.8 !important;
}

#logout-btn[style]:hover {
    border-color: var(--hud-red) !important;
    background: rgba(239, 68, 68, 0.08) !important;
    opacity: 1 !important;
}

/* Settings gear button - override inline border-radius */
a[href="/settings.html"][style] {
    border-radius: 0 !important;
    border-color: rgba(232, 115, 30, 0.2) !important;
}

a[href="/settings.html"][style]:hover {
    border-color: var(--hud-orange) !important;
    background: var(--hud-orange-dim) !important;
}

/* Dashboard profile section h3/h4 with inline color */
.profile-card h3[style],
.profile-card h4[style],
.card h3[style*="color"],
.card h4[style*="color"] {
    background: var(--hud-panel-header) !important;
    margin: 0 -30px 16px -30px !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--hud-border) !important;
    font-family: var(--font-display) !important;
    font-size: 0.8rem !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* Info icon - override inline border-radius */
a.info-icon[style] {
    border-radius: 0 !important;
}

/* Container with inline max-width */
.container[style*="max-width"],
div[style*="max-width: 1600px"] {
    max-width: 1600px !important;
}


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

@media (max-width: 1024px) {
    .dashboard-top-row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 14px !important;
    }

    h1 { font-size: 1.2rem !important; }
    h2 { font-size: 1rem !important; }
    h3 { font-size: 0.9rem !important; }

    .header nav,
    nav[style*="display: flex"] {
        gap: 3px !important;
        padding: 6px 8px !important;
    }

    .nav-btn {
        font-size: 9px !important;
        padding: 6px 10px !important;
        letter-spacing: 1px !important;
    }

    .card {
        padding: 20px !important;
    }

    .card h2, .card h3 {
        margin: -20px -20px 16px -20px !important;
        padding: 12px 16px !important;
    }

    th {
        font-size: 9px !important;
        padding: 8px 10px !important;
    }

    td {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    body::after {
        font-size: 8px !important;
        letter-spacing: 1px !important;
        height: 24px !important;
    }

    .admin-header h1 {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .nav-btn {
        font-size: 8px !important;
        padding: 5px 8px !important;
    }

    .btn-primary, button[type="submit"] {
        font-size: 11px !important;
        padding: 8px 16px !important;
    }

    th, td {
        padding: 6px 8px !important;
        font-size: 10px !important;
    }
}