/* ================================================== */
/* ============ FALLOUT ANOMALY GUIDE STYLES ======== */
/* ================================================== */

/* CSS Custom Properties for Modern Design System */
      :root {
   /* Colors - Reduced neon usage, more neutral palette */
   --primary-color: #00ff41;
   --primary-color-rgb: 0, 255, 65;
   --primary-dark: #00cc33;
   --secondary-color: #0080ff;
   --accent-color: #ff6b35;
   --text-primary: #ffffff;
   --text-secondary: #b8b8b8;
   --text-muted: #888888;
   --bg-primary: #0a0a0a;
   --bg-secondary: #1a1a1a;
   --bg-secondary-rgb: 26, 26, 26;
   --bg-tertiary: #2a2a2a;
   --bg-card: rgba(26, 26, 26, 0.8);
   --bg-overlay: rgba(0, 0, 0, 0.7);
   --border-color: #333333;
   --border-light: #444444;
   --border-accent: var(--primary-color);
   
   /* Status Colors */
   --success-color: #00ff41;
   --warning-color: #ffaa00;
   --warning-color-bright: #ffcc00;
   --error-color: #ff4444;
   --info-color: #0080ff;
   --primary-color-dim: #00cc33;
   
   /* Spacing Scale */
   --space-xs: 0.5rem;
   --space-sm: 1rem;
   --space-md: 1.5rem;
   --space-lg: 2rem;
   --space-xl: 3rem;
   --space-xxl: 4rem;
   
   /* Typography */
   --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: 'VT323', 'Courier New', monospace;
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
   --font-size-base: 1rem;
   --font-size-lg: 1.125rem;
   --font-size-xl: 1.25rem;
   --font-size-2xl: 1.5rem;
   --font-size-3xl: 2rem;
   
   /* Shadows */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
   --shadow-glow: 0 0 20px rgba(0, 255, 65, 0.3);
   
   /* Border Radius */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --border-radius-md: 8px; /* Alias for compatibility */
   
   /* Transitions */
   --transition-fast: 0.15s ease;
   --transition-normal: 0.3s ease;
   --transition-slow: 0.5s ease;
}

/* ================================================== */
/* ============ ACCESSIBILITY ======================= */
/* ================================================== */

/* Focus visible styles for keyboard navigation */
*:focus-visible {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
}

.tab-button:focus-visible {
   outline: 3px solid var(--primary-color);
   outline-offset: 4px;
   box-shadow: 0 0 15px rgba(0, 255, 65, 0.5);
}

.collapsible-header:focus-visible,
.sub-collapsible-header:focus-visible {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
   background: rgba(0, 255, 65, 0.1);
}

a:focus-visible {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
   text-decoration: underline;
}

button:focus-visible {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
}

/* ================================================== */
/* ============ BASE STYLES ========================= */
/* ================================================== */

* {
   box-sizing: border-box;
}

body {
   background-color: var(--bg-primary);
   color: var(--text-primary);
   font-family: var(--font-primary);
   font-size: var(--font-size-base);
   line-height: 1.6;
   margin: 0;
   padding: 0;
}

/* ================================================== */
/* ============ LAYOUT COMPONENTS =================== */
/* ================================================== */

.main-content {
   margin: 0 auto;
   max-width: none; /* Removed max-width for full-width layout */
   padding: var(--space-lg);
}

/* Guide Header */
.guide-header {
   background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   margin-bottom: var(--space-xl);
   padding: var(--space-xl) 0;
   text-align: center;
}

.guide-header .header-content {
   max-width: 800px;
   margin: 0 auto;
   padding: 0 var(--space-lg);
}

.guide-header h1 {
   color: var(--primary-color);
   font-size: var(--font-size-3xl);
   font-weight: 700;
   margin: var(--space-sm) 0;
   text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

.guide-header .icon {
   color: var(--primary-color);
   font-size: var(--font-size-2xl);
   margin-bottom: var(--space-sm);
}

.guide-subtitle {
   color: var(--text-secondary);
   font-size: var(--font-size-lg);
   font-weight: 400;
   margin: 0;
}

/* Guide Navigation */
.guide-nav {
   position: sticky;
   top: 0;
   z-index: 100;
   background: var(--bg-overlay);
   -webkit-backdrop-filter: blur(10px); /* Safari support */
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--border-color);
   margin-bottom: var(--space-lg);
   border-radius: var(--radius-md);
   padding: var(--space-sm) 0;
}

.nav-list {
        display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   justify-content: center;
   flex-wrap: wrap;
   gap: var(--space-sm);
}

/* Nav-link styles are now handled in style.css for consistency across all pages */

/* Tab Navigation */
.tab-navigation {
   margin-bottom: var(--space-lg);
}

.tab-buttons {
        display: flex;
   flex-wrap: wrap;
   gap: var(--space-xs);
   justify-content: center;
   padding: var(--space-sm);
   background: var(--bg-secondary);
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
}

.tab-button {
   background: transparent;
   border: 1px solid var(--border-color);
   color: var(--text-secondary);
   padding: var(--space-xs) var(--space-sm);
   border-radius: var(--radius-sm);
        cursor: pointer;
   transition: var(--transition-fast);
   font-family: var(--font-primary);
   font-size: var(--font-size-sm);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.tab-button:hover {
   border-color: var(--primary-color);
   color: var(--primary-color);
   background: rgba(0, 255, 65, 0.05);
}

.tab-button.active {
   background: var(--primary-color);
   color: var(--bg-primary);
   border-color: var(--primary-color);
   box-shadow: var(--shadow-glow);
}

/* ================================================== */
/* ============ CONTENT SECTIONS ==================== */
/* ================================================== */

.tab-content-container {
   min-height: 600px;
}

/* ================================================== */
/* ============ TAB VISIBILITY (CRITICAL) =========== */
/* ================================================== */

/* Explicit visibility rules with fallbacks */
.tab-content {
   display: none !important; /* Hide by default */
   opacity: 0;
   visibility: hidden;
}

.tab-content.active {
   display: block !important; /* Force visibility */
   opacity: 1 !important;
   visibility: visible !important;
   animation: fadeIn 0.3s ease-in-out;
}

/* Tab button states */
.tab-button {
   opacity: 0.7;
   transition: all 0.3s ease;
}

.tab-button.active {
   opacity: 1;
   border: 2px solid var(--primary-color) !important;
   background: rgba(0, 255, 65, 0.05);
   box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}

.tab-button:hover {
   opacity: 0.9;
   box-shadow: 0 0 10px rgba(0, 255, 65, 0.2);
}

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

/* Content Grid */
.content-grid {
        display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--space-lg);
   margin-bottom: var(--space-xl);
}

/* Secondary Grid for Getting Started */
.secondary-grid {
   margin-top: var(--space-lg);
}

/* ================================================== */
/* ============ CARD COMPONENTS ===================== */
/* ================================================== */

.card {
   background: var(--bg-card);
        border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
        overflow: hidden;
   transition: var(--transition-normal);
   -webkit-backdrop-filter: blur(10px); /* Safari support */
   backdrop-filter: blur(10px);
}

.card:hover {
   border-color: var(--border-light);
   box-shadow: var(--shadow-md);
        transform: translateY(-2px);
}

.card.critical {
   border-color: var(--warning-color);
   background: rgba(255, 170, 0, 0.05);
}

.card.critical:hover {
   border-color: var(--warning-color);
   box-shadow: 0 0 20px rgba(255, 170, 0, 0.2);
}

/* Critical Banner - Full Width Prominent Display */
.critical-banner {
   grid-column: 1 / -1;
   margin-bottom: var(--space-lg);
   background: linear-gradient(135deg, rgba(255, 68, 68, 0.1) 0%, rgba(255, 170, 0, 0.1) 100%);
   border: 2px solid var(--error-color);
   border-radius: var(--radius-lg);
   box-shadow: 0 0 30px rgba(255, 68, 68, 0.4), inset 0 0 20px rgba(255, 68, 68, 0.1);
   animation: criticalPulse 3s ease-in-out infinite;
}

.critical-banner .card-header {
   background: linear-gradient(135deg, rgba(255, 68, 68, 0.2) 0%, rgba(255, 170, 0, 0.2) 100%);
   border-bottom: 2px solid var(--error-color);
}

.critical-banner .card-header h3 {
        color: var(--primary-color);
   font-size: var(--font-size-xl);
   font-weight: 700;
   text-shadow: 0 0 10px rgba(0, 255, 65, 0.8);
   letter-spacing: 1px;
}

.critical-banner .card-header .icon {
   color: var(--error-color);
   font-size: var(--font-size-xl);
   animation: criticalIconPulse 2s ease-in-out infinite;
}

/* Critical Steps Enhanced Styling */
.critical-banner .critical-steps {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--space-md);
}

.critical-banner .step-item {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid var(--error-color);
   border-radius: var(--radius-md);
   padding: var(--space-md);
   transition: var(--transition-normal);
}

.critical-banner .step-item:hover {
   background: rgba(255, 68, 68, 0.1);
   transform: translateY(-2px);
   box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
}

.critical-banner .step-item .icon {
   color: var(--error-color);
   font-size: var(--font-size-lg);
   animation: criticalIconPulse 2s ease-in-out infinite;
}

.critical-banner .step-item strong {
        color: var(--primary-color);
        font-weight: 600;
   display: block;
   margin-bottom: var(--space-xs);
}

.critical-banner .step-item p {
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
        margin: 0;
}

/* Critical Banner Animations */
@keyframes criticalPulse {
   0%, 100% {
      box-shadow: 0 0 30px rgba(255, 68, 68, 0.4), inset 0 0 20px rgba(255, 68, 68, 0.1);
   }
   50% {
      box-shadow: 0 0 40px rgba(255, 68, 68, 0.6), inset 0 0 25px rgba(255, 68, 68, 0.15);
   }
}

@keyframes criticalIconPulse {
   0%, 100% {
      opacity: 1;
      transform: scale(1);
   }
   50% {
      opacity: 0.8;
      transform: scale(1.1);
   }
}

.card-header {
   padding: var(--space-md);
   background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
   gap: var(--space-sm);
}

.card-header h3 {
   margin: 0;
   font-size: var(--font-size-lg);
   font-weight: 600;
   color: var(--text-primary);
}

.card-header .icon {
        color: var(--primary-color);
   font-size: var(--font-size-lg);
}

.card-content {
   padding: var(--space-md);
}

/* ================================================== */
/* ============ BUTTON COMPONENTS =================== */
/* ================================================== */

.btn {
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
   padding: var(--space-sm) var(--space-md);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   background: var(--bg-secondary);
   color: var(--text-primary);
        text-decoration: none;
   font-family: var(--font-primary);
   font-size: var(--font-size-sm);
   font-weight: 500;
   cursor: pointer;
   transition: var(--transition-fast);
        text-transform: uppercase;
        letter-spacing: 0.5px;
     }
     
.btn:hover {
   border-color: var(--primary-color);
   color: var(--primary-color);
   background: rgba(0, 255, 65, 0.05);
   box-shadow: var(--shadow-sm);
}

.btn.primary {
   background: var(--primary-color);
   color: var(--bg-primary);
   border-color: var(--primary-color);
}

.btn.primary:hover {
   background: var(--primary-dark);
   box-shadow: var(--shadow-glow);
}

.btn.secondary {
   background: var(--secondary-color);
   color: var(--text-primary);
   border-color: var(--secondary-color);
}

.btn.secondary:hover {
   background: #0066cc;
   box-shadow: 0 0 20px rgba(0, 128, 255, 0.3);
}

/* ================================================== */
/* ============ NOTICE COMPONENTS =================== */
/* ================================================== */

.notice {
   padding: var(--space-md);
   border-radius: var(--radius-md);
   border-left: 4px solid;
   margin: var(--space-md) 0;
   background: rgba(26, 26, 26, 0.5);
}

.notice.info {
   border-left-color: var(--info-color);
   background: rgba(0, 128, 255, 0.05);
}

.notice.warning {
   border-left-color: var(--warning-color);
   background: rgba(255, 170, 0, 0.05);
}

.notice.error {
   border-left-color: var(--error-color);
   background: rgba(255, 68, 68, 0.05);
}

.notice.success {
   border-left-color: var(--success-color);
   background: rgba(0, 255, 65, 0.05);
}

.notice.critical {
   border-left-color: var(--error-color);
   background: rgba(255, 68, 68, 0.1);
   border: 1px solid var(--error-color);
}

.notice h3 {
   margin: 0 0 var(--space-sm) 0;
   font-size: var(--font-size-lg);
   font-weight: 600;
        display: flex;
        align-items: center;
   gap: var(--space-xs);
}

.notice h3 .icon {
   font-size: var(--font-size-base);
}

.notice ul {
   margin: var(--space-sm) 0 0 0;
   padding-left: var(--space-lg);
}

.notice li {
   margin-bottom: var(--space-xs);
   color: var(--text-secondary);
}

.notice strong {
   color: var(--text-primary);
}

/* ================================================== */
/* ============ LIST COMPONENTS ===================== */
/* ================================================== */
     
     .requirements-list {
        display: grid;
   gap: var(--space-xs);
   margin-bottom: var(--space-md);
     }
     
     .req-item {
   padding: var(--space-xs) var(--space-sm);
   background: var(--bg-secondary);
   border-radius: var(--radius-sm);
   border: 1px solid var(--border-color);
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
     }
     
     .download-grid {
        display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--space-sm);
   margin-top: var(--space-md);
     }
     
     .download-item {
        display: flex;
        align-items: center;
   gap: var(--space-xs);
   padding: var(--space-sm);
   background: var(--bg-secondary);
        border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   color: var(--text-secondary);
        text-decoration: none;
   transition: var(--transition-fast);
   font-size: var(--font-size-sm);
     }
     
     .download-item:hover {
   border-color: var(--primary-color);
   color: var(--primary-color);
   background: rgba(0, 255, 65, 0.05);
        transform: translateY(-1px);
     }
     
.download-item .icon {
        color: var(--primary-color);
   font-size: var(--font-size-base);
}

.critical-steps {
   display: grid;
   gap: var(--space-md);
}

.step-item {
        display: flex;
   align-items: flex-start;
   gap: var(--space-sm);
   padding: var(--space-md);
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
}

.step-item .icon {
   color: var(--warning-color);
   font-size: var(--font-size-lg);
   margin-top: 2px;
     }
     
     .step-item strong {
   color: var(--text-primary);
   font-weight: 600;
        display: block;
   margin-bottom: var(--space-xs);
     }
     
     .step-item p {
        margin: 0;
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
}

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

.community-links {
   margin: var(--space-xl) 0;
}

.social-links {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--space-md);
   margin-top: var(--space-md);
}

.social-link {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-xs);
   padding: var(--space-lg);
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   color: var(--text-primary);
   text-decoration: none;
   transition: var(--transition-normal);
   text-align: center;
}

.social-link:hover {
   border-color: var(--primary-color);
   background: rgba(0, 255, 65, 0.05);
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
}

.social-link .icon {
   font-size: var(--font-size-2xl);
   margin-bottom: var(--space-xs);
}

.social-link.discord .icon { color: #5865f2; }
.social-link.youtube .icon { color: #ff0000; }
.social-link.nexus .icon { color: #da8e35; }
.social-link.bug-report .icon { color: var(--error-color); }
.social-link.donate .icon { color: #ff69b4; }

.social-link span {
   font-weight: 600;
   font-size: var(--font-size-sm);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.social-link small {
   color: var(--text-muted);
   font-size: var(--font-size-xs);
}

/* ================================================== */
/* ============ SEARCH COMPONENTS =================== */
/* ================================================== */

.search-section {
    margin: var(--space-lg) auto;
    max-width: 800px;
    padding: 0 var(--space-md);
}

.search-container {
    position: relative;
}

.search-input-wrapper {
    position: relative;
        display: flex;
        align-items: center;
    background-color: #1a1a1a;
    border: 1px solid var(--primary-color-dim);
    border-radius: var(--border-radius-sm);
    transition: all 0.3s ease;
}

.search-input-wrapper:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}

.search-icon {
    position: absolute;
    left: 15px;
    color: var(--primary-color-dim);
}

.search-input {
    width: 100%;
    padding: 15px 20px 15px 45px; /* Left padding for icon */
    background-color: transparent;
    border: none;
    color: var(--text-color-light);
    font-family: var(--font-primary);
    font-size: 1rem;
    outline: none;
}

.search-input::placeholder {
    color: #666;
}

.clear-search-btn {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: var(--primary-color-dim);
    cursor: pointer;
    font-size: 1.2rem;
}

.clear-search-btn:hover {
    color: var(--primary-color);
}

.search-results {
    position: absolute;
    width: 100%;
    background-color: #1a1a1a;
    border: 1px solid var(--primary-color-dim);
    border-top: none;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
}

.search-results .result-item {
    padding: 15px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-results .result-item:last-child {
    border-bottom: none;
}

.search-results .result-item:hover {
    background-color: var(--primary-color-dark);
}

.search-results .result-item h4 {
    margin: 0 0 5px;
    color: var(--primary-color);
    font-size: 1rem;
    line-height: 1.3;
}

.search-results .result-item p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-color);
        line-height: 1.4;
}

.search-results .result-item mark {
    background-color: var(--primary-color);
        color: #000;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 3px;
}

.search-highlight {
    transition: background-color 0.5s ease-in-out;
    background-color: rgba(0, 255, 65, 0.15) !important;
    border: 1px solid var(--primary-color-dim);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
}


/* ================================================== */
/* ============ VIDEO SECTION ======================= */
/* ================================================== */

.video-section {
   margin: var(--space-xl) auto; /* Centers the section and maintains vertical spacing */
   max-width: 1200px; /* Set a sensible maximum width for the video */
}

.video-notice {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   padding: var(--space-md);
   margin-bottom: var(--space-lg);
        display: flex;
        align-items: center;
   gap: var(--space-sm);
}

.video-notice .icon {
   color: var(--info-color);
   font-size: var(--font-size-lg);
}

.video-notice strong {
   color: var(--primary-color);
}

.video-wrapper {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
   overflow: hidden;
   border-radius: var(--border-radius-md);
   border: 1px solid var(--border-color);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   background-color: #000;
}

.video-wrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
   border: 0;
}

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

@media (max-width: 768px) {
   .main-content {
      padding: var(--space-md);
   }
   
   .guide-header h1 {
      font-size: var(--font-size-2xl);
   }
   
   .nav-list {
      flex-direction: column;
        align-items: center;
   }
   
   .tab-buttons {
      flex-direction: column;
      align-items: stretch;
   }
   
   .content-grid {
      grid-template-columns: 1fr;
      gap: var(--space-md);
   }
   
   .social-links {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: var(--space-sm);
   }
   
   .download-grid {
      grid-template-columns: 1fr;
   }
   
   .video-wrapper {
      border-radius: var(--radius-md);
   }
   
   /* Critical Banner Mobile Responsiveness */
   .critical-banner .critical-steps {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
   }
   
   .critical-banner .card-header h3 {
      font-size: var(--font-size-lg);
   }
}

@media (max-width: 480px) {
   .guide-header {
      padding: var(--space-lg) 0;
   }
   
   .guide-header h1 {
      font-size: var(--font-size-xl);
   }
   
   .card-header {
      padding: var(--space-sm);
   }
   
   .card-content {
      padding: var(--space-sm);
   }
   
   .social-link {
      padding: var(--space-md);
   }
   
   .search-box input {
      padding: var(--space-sm) var(--space-sm) var(--space-sm) 2.5rem;
   }
}

/* ================================================== */
/* ============ ACCESSIBILITY ======================= */
/* ================================================== */

@media (prefers-reduced-motion: reduce) {
   * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}

/* Focus styles for keyboard navigation */
.tab-button:focus,
.btn:focus,
.social-link:focus,
.download-item:focus,
.search-box input:focus {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
   :root {
      --border-color: #666666;
      --text-secondary: #cccccc;
   }
   
   .card {
      border-width: 2px;
   }
   
   .btn {
      border-width: 2px;
   }
}

/* ================================================== */
/* ============ LEGACY COMPATIBILITY ================ */
/* ================================================== */

/* Maintain compatibility with existing terminal classes */
.terminal-text {
   font-family: var(--font-mono);
   color: var(--text-primary);
}

.terminal-sublist {
   list-style: none;
   padding-left: 0;
}

.terminal-sublist li {
   margin-bottom: var(--space-xs);
   padding-left: var(--space-md);
   position: relative;
}

.terminal-sublist li::before {
   content: "→";
   position: absolute;
   left: 0;
   color: var(--primary-color);
     }
     
     .terminal-link {
   color: var(--primary-color);
   text-decoration: none;
     }
     
     .terminal-link:hover {
   text-decoration: underline;
   text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
}

/* Collapsible sections */
.collapsible-section {
   margin-bottom: var(--space-md);
}

.collapsible-header {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   padding: var(--space-md);
   cursor: pointer;
        display: flex;
        align-items: center;
   justify-content: space-between;
   transition: var(--transition-fast);
   font-weight: 600;
}

.collapsible-header:hover {
   border-color: var(--primary-color);
   background: rgba(0, 255, 65, 0.05);
}

.collapsible-header .icon {
   color: var(--primary-color);
   margin-right: var(--space-sm);
}

.collapsible-icon {
   color: var(--text-muted);
   transition: var(--transition-fast);
}

.collapsible-content {
   padding: var(--space-md);
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-top: none;
   border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Sub-collapsible sections */
.sub-collapsible {
   margin: var(--space-md) 0;
}

.sub-collapsible-header {
   background: var(--bg-tertiary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
   padding: var(--space-sm) var(--space-md);
        cursor: pointer;
        display: flex;
        align-items: center;
   justify-content: space-between;
   transition: var(--transition-fast);
   font-weight: 500;
}

.sub-collapsible-header:hover {
   border-color: var(--secondary-color);
   background: rgba(0, 128, 255, 0.05);
}

.sub-collapsible-content {
   display: none;
   padding: var(--space-md);
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
        border-top: none;
   border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Skill grid for gameplay sections */
.skill-grid {
   display: grid;
   gap: var(--space-sm);
   margin: var(--space-md) 0;
}

.skill-item {
   padding: var(--space-sm);
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
}

/* Compact lists for controls */
.compact-list {
   list-style: none;
        padding: 0;
   margin: var(--space-md) 0;
}

.compact-list li {
   padding: var(--space-xs) 0;
   border-bottom: 1px solid var(--border-color);
        display: flex;
   justify-content: space-between;
     }
     
.compact-list li:last-child {
        border-bottom: none;
     }
     
/* Keybind categories */
.keybind-categories {
   display: grid;
   gap: var(--space-lg);
   margin: var(--space-md) 0;
}

.keybind-category h5 {
   color: var(--primary-color);
   margin-bottom: var(--space-sm);
   font-size: var(--font-size-base);
   font-weight: 600;
}

/* FAQ sections */
.faq-section {
   margin: var(--space-xl) 0;
}

.faq-item {
   margin-bottom: var(--space-lg);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   overflow: hidden;
}

.faq-question {
   background: var(--bg-secondary);
   padding: var(--space-md);
        cursor: pointer;
        display: flex;
   align-items: center;
   gap: var(--space-sm);
   transition: var(--transition-fast);
}

.faq-question:hover {
   background: rgba(0, 255, 65, 0.05);
}

.faq-question .icon {
   color: var(--primary-color);
}

.faq-answer {
   padding: var(--space-md);
   background: var(--bg-card);
   border-top: 1px solid var(--border-color);
}

.faq-answer ul {
   margin: var(--space-sm) 0;
   padding-left: var(--space-lg);
}

.faq-answer li {
   margin-bottom: var(--space-xs);
   color: var(--text-secondary);
}

/* AI Assistant styles */
.ai-feature-box {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   padding: var(--space-lg);
   margin: var(--space-lg) 0;
}

.ai-feature-box h4 {
   color: var(--primary-color);
   margin-bottom: var(--space-md);
   font-size: var(--font-size-lg);
}

.ai-feature-box textarea {
   width: 100%;
        min-height: 100px;
   padding: var(--space-md);
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   font-family: var(--font-primary);
   font-size: var(--font-size-base);
   resize: vertical;
   margin: var(--space-md) 0;
}

.ai-feature-box textarea:focus {
   outline: none;
   border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.1);
}

.ai-result-box {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   padding: var(--space-md);
   margin-top: var(--space-md);
   white-space: pre-line;
   font-family: var(--font-mono);
   font-size: var(--font-size-sm);
   color: var(--text-primary);
   min-height: 100px;
   max-height: 300px;
   overflow-y: auto;
}

/* Loading animation for AI */
     .ai-loading {
        display: inline-block;
   width: 12px;
   height: 12px;
   border: 2px solid var(--text-muted);
        border-radius: 50%;
   border-top-color: var(--primary-color);
        animation: spin 1s ease-in-out infinite;
     }
     
     @keyframes spin {
        to { transform: rotate(360deg); }
     }
     
/* Terminal-style sections for troubleshooting */
.terminal-section {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
        overflow: hidden;
   margin: var(--space-lg) 0;
}

.terminal-header {
   background: var(--bg-secondary);
   padding: var(--space-md);
   border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
   gap: var(--space-sm);
}

.terminal-prompt {
   background: var(--primary-color);
   color: var(--bg-primary);
   padding: var(--space-xs) var(--space-sm);
   border-radius: var(--radius-sm);
   font-family: var(--font-mono);
   font-size: var(--font-size-xs);
   font-weight: 600;
   text-transform: uppercase;
}

.terminal-title {
   font-weight: 600;
   color: var(--text-primary);
}

.terminal-divider {
   height: 1px;
   background: var(--border-color);
   margin: var(--space-md) 0;
}

.terminal-error-block,
.terminal-download-block,
.terminal-info-block {
   padding: var(--space-md);
}

.error-header,
.download-header {
   font-weight: 600;
   color: var(--primary-color);
   margin-bottom: var(--space-sm);
   font-size: var(--font-size-base);
}

.error-solution,
.download-solution {
   margin-bottom: var(--space-md);
}

.solution-step {
   margin-bottom: var(--space-xs);
   color: var(--text-secondary);
   padding-left: var(--space-md);
   position: relative;
}

.solution-step::before {
   content: "→";
        position: absolute;
   left: 0;
   color: var(--primary-color);
}

.terminal-buttons {
        display: flex;
   gap: var(--space-sm);
   flex-wrap: wrap;
   margin-top: var(--space-md);
}

.terminal-button {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   color: var(--text-primary);
   padding: var(--space-sm) var(--space-md);
   border-radius: var(--radius-md);
   text-decoration: none;
   display: inline-flex;
        align-items: center;
   gap: var(--space-xs);
   transition: var(--transition-fast);
   font-size: var(--font-size-sm);
}

.terminal-button:hover {
   border-color: var(--primary-color);
   color: var(--primary-color);
   background: rgba(0, 255, 65, 0.05);
}

.terminal-button.primary {
   background: var(--primary-color);
   color: var(--bg-primary);
   border-color: var(--primary-color);
}

.terminal-button.primary:hover {
   background: var(--primary-dark);
}

/* Warning text styling */
.warning-text {
   color: var(--warning-color);
   font-weight: 600;
}

/* Guide images */
.guide-image {
        width: 100%;
   max-width: 400px;
   height: auto;
   border-radius: var(--radius-md);
   margin: 0; /* Adjusted margin for container */
   border: 1px solid var(--border-color);
}

.guide-image-container {
   padding: var(--space-sm);
   border-radius: var(--radius-md);
   margin: var(--space-md) 0;
   border: 1px solid var(--primary-color);
   background-color: #0a0a0a;
   box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
}

.guide-image-container .guide-image {
   margin: 0;
   border: none;
}

/* Screenshot styling */
.screenshot {
   max-width: 100%;
   height: auto;
   border-radius: var(--radius-sm);
   margin: var(--space-sm) 0;
   border: 1px solid var(--border-color);
   box-shadow: var(--shadow-sm);
}

/* Hierarchical content for complex sections */
.hierarchical-content {
   display: grid;
   gap: var(--space-lg);
}

.section-item {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   padding: var(--space-md);
}

.section-header {
   color: var(--primary-color);
   font-weight: 600;
   display: block;
   margin-bottom: var(--space-xs);
}

/* Radiation loop section */
.radiation-loop-section {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   padding: var(--space-lg);
   margin: var(--space-lg) 0;
}

.radiation-loop-section h4 {
   color: var(--primary-color);
   text-align: center;
   margin-bottom: var(--space-md);
   font-size: var(--font-size-lg);
   text-transform: uppercase;
   letter-spacing: 2px;
}

.loop-intro {
   text-align: center;
   margin-bottom: var(--space-lg);
   color: var(--text-secondary);
   line-height: 1.6;
   font-style: italic;
}

.radiation-cycle-diagram {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   grid-template-rows: auto auto auto auto;
   gap: var(--space-md);
   align-items: center;
   justify-items: center;
   margin: var(--space-lg) auto;
   max-width: 800px;
   position: relative;
}

.cycle-step {
   background: var(--bg-secondary);
   border: 2px solid var(--border-color);
   border-radius: var(--radius-lg);
   padding: var(--space-lg);
   text-align: center;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   transition: all 0.3s ease;
   min-height: 140px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
}

.cycle-step::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), 0.1), transparent);
   transition: left 0.6s ease;
   z-index: 0;
}

.cycle-step:hover::before {
   left: 100%;
}

.cycle-step:hover {
   border-color: var(--primary-color);
   box-shadow: 0 6px 25px rgba(var(--primary-color-rgb), 0.4);
   transform: translateY(-5px);
}

.cycle-step h5 {
   color: var(--primary-color);
   font-size: var(--font-size-md);
   margin: var(--space-xs) 0;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 700;
   position: relative;
   z-index: 1;
}

.cycle-step p {
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
   line-height: 1.5;
   margin: 0;
   position: relative;
   z-index: 1;
}

.step-icon {
   font-size: var(--font-size-xl);
   color: var(--primary-color);
   text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.6);
   margin-bottom: var(--space-xs);
   position: relative;
   z-index: 1;
}

.cycle-arrow {
   color: var(--primary-color);
   font-size: var(--font-size-xl);
   font-weight: bold;
   text-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.7);
   padding: var(--space-sm);
   animation: pulseGlow 2s infinite alternate;
   position: relative;
   z-index: 2;
}

/* Grid positioning for steps and arrows - Clockwise cycle */
.step-1 { grid-area: 1 / 1 / 2 / 2; }     /* Top-left: Initial Exposure */
.arrow-1 { grid-area: 1 / 2 / 2 / 3; }    /* Right arrow: 1 → 2 */
.step-2 { grid-area: 1 / 3 / 2 / 4; }     /* Top-right: RAD Damage */
.arrow-2 { grid-area: 2 / 3 / 3 / 4; }    /* Down arrow: 2 → 3 */
.step-3 { grid-area: 3 / 3 / 4 / 4; }     /* Bottom-right: IRA Increases */
.arrow-3 { grid-area: 3 / 2 / 4 / 3; }    /* Left arrow: 3 → 4 */
.step-4 { grid-area: 3 / 1 / 4 / 2; }     /* Bottom-left: Vulnerability Spiral */
.arrow-4 { grid-area: 2 / 1 / 3 / 2; }    /* Up arrow: 4 → 1 (completes loop) */

/* Rotate arrows for logical flow */
.arrow-1 i { transform: rotate(0deg); }      /* Right arrow: Step 1 → Step 2 */
.arrow-2 i { transform: rotate(90deg); }     /* Down arrow: Step 2 → Step 3 */
.arrow-3 i { transform: rotate(180deg); }    /* Left arrow: Step 3 → Step 4 */
.arrow-4 i { transform: rotate(-90deg); }    /* Up arrow: Step 4 → Step 1 (completing the loop) */

/* Loop breaker notice */
.loop-breaker-notice {
   margin-top: var(--space-xl);
   padding: var(--space-lg);
   background: rgba(var(--primary-color-rgb), 0.1);
   border: 1px solid var(--primary-color);
   border-radius: var(--radius-lg);
   text-align: center;
}

.loop-breaker-notice h5 {
   color: var(--primary-color);
   margin-bottom: var(--space-md);
   font-size: var(--font-size-md);
   text-transform: uppercase;
   letter-spacing: 1px;
}

.loop-breaker-notice h5 i {
   margin-right: var(--space-xs);
   color: var(--primary-color);
}

.break-methods {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--space-md);
   margin-top: var(--space-md);
}

.break-method {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-sm);
   background: rgba(var(--bg-secondary-rgb), 0.5);
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
   transition: all 0.3s ease;
}

.break-method:hover {
   background: rgba(var(--primary-color-rgb), 0.1);
   border-color: var(--primary-color);
   transform: translateY(-2px);
}

.break-method i {
   color: var(--primary-color);
   font-size: var(--font-size-md);
   min-width: 20px;
}

.break-method span {
   color: var(--text-primary);
   font-size: var(--font-size-sm);
}

/* Responsive adjustments */
@media (max-width: 768px) {
   .radiation-cycle-diagram {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto auto auto auto auto;
      gap: var(--space-sm);
   }
   
   .step-1 { grid-area: 1 / 1 / 2 / 2; }     /* Step 1: Initial Exposure */
   .arrow-1 { grid-area: 2 / 1 / 3 / 2; }    /* Down arrow: 1 → 2 */
   .step-2 { grid-area: 3 / 1 / 4 / 2; }     /* Step 2: RAD Damage */
   .arrow-2 { grid-area: 4 / 1 / 5 / 2; }    /* Down arrow: 2 → 3 */
   .step-3 { grid-area: 5 / 1 / 6 / 2; }     /* Step 3: IRA Increases */
   .arrow-3 { grid-area: 6 / 1 / 7 / 2; }    /* Down arrow: 3 → 4 */
   .step-4 { grid-area: 7 / 1 / 8 / 2; }     /* Step 4: Vulnerability Spiral */
   .arrow-4 { grid-area: 8 / 1 / 9 / 2; }    /* Down arrow: 4 → 1 (back to top) */

   .arrow-1 i, .arrow-2 i, .arrow-3 i, .arrow-4 i {
      transform: rotate(90deg) !important;
   }
   
   .cycle-step {
      min-height: 120px;
      padding: var(--space-md);
   }
   
   .break-methods {
      grid-template-columns: 1fr;
   }
}

@keyframes pulseGlow {
   0% { 
      text-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3);
      transform: scale(1);
   }
   100% { 
      text-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.8);
      transform: scale(1.1);
   }
}

/* Three column section */
.three-column-section {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: var(--space-lg);
   margin: var(--space-lg) 0;
}

.column {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   padding: var(--space-md);
   text-align: center;
}

.column-icon {
   font-size: var(--font-size-2xl);
   color: var(--primary-color);
   margin-bottom: var(--space-sm);
}

.column h5 {
   color: var(--text-primary);
   margin-bottom: var(--space-sm);
   font-size: var(--font-size-base);
   font-weight: 600;
}

.column ul {
        list-style: none;
   padding: 0;
   text-align: left;
}

.column li {
   padding: var(--space-xs) 0;
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
   border-bottom: 1px solid var(--border-color);
}

.column li:last-child {
        border-bottom: none;
     }
     
/* Table styling */
.table-container {
   overflow-x: auto;
   margin: var(--space-md) 0;
}

.radiation-table {
   width: 100%;
   border-collapse: collapse;
   background: var(--bg-card);
        border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   overflow: hidden;
}

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

.radiation-table th {
   background: var(--bg-secondary);
        color: var(--primary-color);
   font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
   font-size: var(--font-size-sm);
}

.radiation-table td {
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
}

.radiation-table tr:last-child td {
   border-bottom: none;
}

.treats-grid {
   display: flex;
   gap: var(--space-md);
   align-items: flex-start;
   justify-content: flex-end;
}

.treats-item {
   display: flex;
   align-items: flex-start;
   gap: var(--space-xs);
   min-width: 60px;
}

.treats-label {
   color: var(--text-secondary);
   font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-weight: 600;
   min-width: 35px;
   text-align: right;
   padding-right: var(--space-xs);
}
     
.treats-icon {
   font-size: var(--font-size-base);
   width: 16px;
   text-align: center;
   flex-shrink: 0;
}

.treats-icon.positive {
   color: var(--success-color);
}

.treats-icon.negative {
   color: var(--error-color);
}

.treats-icon.shield {
   color: var(--info-color);
}

.treats-single {
   display: flex;
   align-items: flex-start;
   gap: var(--space-xs);
   min-width: 60px;
   justify-content: flex-end;
}

/* Right-align the entire TREATS column content */
.radiation-table td:last-child {
   text-align: right;
}

.radiation-table td:last-child > * {
   display: flex;
   justify-content: flex-end;
   width: 100%;
}

/* Emoji legend */
.emoji-legend {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   padding: var(--space-md);
   margin: var(--space-md) 0;
   font-size: var(--font-size-sm);
}

.emoji-legend p {
        margin: 0;
   color: var(--text-secondary);
     }
     
.emoji-legend strong {
        color: var(--primary-color);
}

/* Support links section */
.support-links {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--space-md);
   margin-top: var(--space-md);
}

.support-link {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-md);
   background: var(--bg-secondary);
        border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   text-decoration: none;
   transition: var(--transition-fast);
   font-weight: 500;
}

.support-link:hover {
   border-color: var(--primary-color);
   color: var(--primary-color);
   background: rgba(0, 255, 65, 0.05);
   transform: translateY(-1px);
}

.support-link.discord {
   border-color: #5865f2;
}

.support-link.discord:hover {
   border-color: #5865f2;
   color: #5865f2;
   background: rgba(88, 101, 242, 0.1);
}

.support-link.wiki {
   border-color: var(--info-color);
}

.support-link.wiki:hover {
   border-color: var(--info-color);
   color: var(--info-color);
   background: rgba(0, 128, 255, 0.1);
}

/* Cards grid for different layouts */
.cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--space-lg);
   margin: var(--space-lg) 0;
}

/* Warning box styling */
.warning-box {
   background: rgba(255, 170, 0, 0.1);
   border: 1px solid var(--warning-color);
   border-radius: var(--radius-md);
   padding: var(--space-md);
   margin: var(--space-md) 0;
}

.warning-box p {
   margin: 0;
   color: var(--text-primary);
   font-weight: 500;
}

.warning-box code {
        background: rgba(0, 0, 0, 0.3);
   padding: 2px 6px;
        border-radius: 3px;
   font-family: var(--font-mono);
   font-size: var(--font-size-sm);
        color: var(--primary-color);
}

/* Info card styling */
.info-card {
   background-color: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-md);
        display: flex;
   flex-direction: column;
   height: 100%;
}

.info-card .card-header {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-md);
   background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
   border-bottom: 1px solid var(--border-color);
}

.info-card .card-header h3 {
        margin: 0;
   font-size: var(--font-size-lg);
   font-weight: 600;
   color: var(--text-primary);
     }
     
.info-card .card-header .icon {
        color: var(--primary-color);
   font-size: var(--font-size-lg);
}

.info-card .card-content {
   padding: var(--space-md);
   flex-grow: 1;
}

.info-card .card-content p {
   color: var(--text-secondary);
   margin-bottom: var(--space-md);
}

.info-card .card-content p:last-child {
   margin-bottom: 0;
}

/* ================================================== */
/* ============ THEME COMPATIBILITY ================= */
/* ================================================== */

/* Ensure compatibility with existing theme system */
body.crt {
   /* CRT effects are handled by the main theme CSS - no additional styles needed */
   position: relative;
}

/* Terminal text compatibility */
.terminal-text {
   font-family: var(--font-mono);
}

/* Fallout card compatibility */
.fallout-card {
   background: var(--bg-card);
        border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   overflow: hidden;
}

.fallout-card-header {
   background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
   border-bottom: 1px solid var(--border-color);
   padding: var(--space-lg);
        display: flex;
        align-items: center;
   gap: var(--space-md);
}

.fallout-card-header h1 {
   margin: 0;
   font-size: var(--font-size-2xl);
   font-weight: 700;
        color: var(--primary-color);
   text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

.fallout-card-header .icon {
        color: var(--primary-color);
   font-size: var(--font-size-xl);
}

/* ================================================== */
/* ============ UTILITY CLASSES ===================== */
/* ================================================== */

.hidden {
   display: none !important;
}

.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;
}

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

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

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

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-5 { margin-bottom: var(--space-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-5 { margin-top: var(--space-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }
.p-5 { padding: var(--space-xl); }

.flex {
   display: flex;
}

.flex-col {
   flex-direction: column;
}

.items-center {
   align-items: center;
}

.justify-center {
   justify-content: center;
}

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

.gap-1 { gap: var(--space-xs); }
.gap-2 { gap: var(--space-sm); }
.gap-3 { gap: var(--space-md); }
.gap-4 { gap: var(--space-lg); }
.gap-5 { gap: var(--space-xl); }

/* ================================================== */
/* ============ PRINT STYLES ======================== */
/* ================================================== */

@media print {
   .back-to-top,
   .tab-navigation,
   .guide-nav,
   .search-section,
   .video-section {
      display: none !important;
   }
   
   .tab-content {
      display: block !important;
   }
   
   .card {
      break-inside: avoid;
      border: 1px solid #000;
      background: #fff;
      color: #000;
   }
   
   .social-link,
   .download-item,
   .btn {
      border: 1px solid #000;
      background: #f0f0f0;
      color: #000;
   }
}

/* ==========================================================================
   Troubleshooting Section Styles
   ========================================================================== */

.troubleshooting-content {
        display: flex;
   flex-direction: column;
   gap: var(--space-lg);
   padding: var(--space-md) 0;
}

.issue-block {
   background-color: rgba(0, 255, 65, 0.03);
   border: 1px solid var(--primary-color-dim);
   border-left: 3px solid var(--primary-color);
   padding: var(--space-lg);
   border-radius: var(--border-radius-md);
}

.issue-block h4 {
   font-size: 1.1rem;
   color: var(--primary-color);
   margin-bottom: var(--space-md);
   display: flex;
        align-items: center;
   gap: var(--space-sm);
}

.solution-list {
   list-style: none;
   padding-left: var(--space-md);
   margin: 0;
}

.solution-list li {
   margin-bottom: var(--space-md);
   position: relative;
   line-height: 1.6;
}

.solution-list li::before {
   content: '→';
   position: absolute;
   left: -20px;
        color: var(--primary-color);
}

.solution-list li.attention {
   color: var(--warning-color);
   font-weight: bold;
}

.solution-list li.attention strong {
    color: var(--warning-color-bright);
}

.download-buttons {
    margin-top: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* ==========================================================================
   RESPONSIVE DESIGN - Mobile Optimizations
   ========================================================================== */

/* Small screens (< 320px) */
@media (max-width: 320px) {
   .content-grid,
   .secondary-grid {
      grid-template-columns: 1fr !important;
      gap: var(--space-sm);
   }
   
   .tab-buttons {
      flex-direction: column;
      gap: var(--space-xs);
   }
   
   .tab-button {
      width: 100%;
      font-size: 0.875rem;
   }
   
   .guide-header h1 {
      font-size: 1.5rem;
   }
   
   .card {
      padding: var(--space-sm);
   }
}

/* ==========================================================================
   Tab Content Styles
   ========================================================================== */

/* ==========================================================================
   Support Page Styles
   ========================================================================== */

/* Support Grid Layout */
.support-grid {
        display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--space-lg);
   margin: var(--space-lg) 0;
}

.support-item {
   background: var(--card-bg);
        border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   padding: var(--space-lg);
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
}

.support-item:hover {
   border-color: var(--primary-color);
   box-shadow: 0 4px 20px rgba(0, 204, 51, 0.1);
   transform: translateY(-2px);
}

.support-icon {
   width: 60px;
   height: 60px;
   border-radius: var(--radius-md);
   background: var(--card-bg);
   border: 1px solid var(--border-color);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   color: var(--text-secondary);
   margin-bottom: var(--space-sm);
}

.support-content {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
}

.support-content h4 {
   color: var(--text-primary);
   font-size: 1.25rem;
   font-weight: 600;
   margin: 0;
}

.support-content p {
   color: var(--text-secondary);
   line-height: 1.6;
   margin: 0;
}

/* Support Buttons */
.btn {
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
   padding: var(--space-sm) var(--space-md);
   border-radius: var(--radius-md);
   text-decoration: none;
   font-weight: 500;
   font-size: 0.9rem;
   transition: all 0.3s ease;
   border: 1px solid transparent;
   cursor: pointer;
   margin-top: auto;
}

.btn-primary {
   background: var(--border-color);
   color: var(--text-primary);
   border-color: var(--border-color);
}

.btn-primary:hover {
   background: var(--text-secondary);
   border-color: var(--text-secondary);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(184, 184, 184, 0.3);
}

.btn-secondary {
   background: transparent;
   color: var(--text-secondary);
   border-color: var(--border-color);
}

.btn-secondary:hover {
   background: var(--border-color);
   color: var(--text-primary);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(184, 184, 184, 0.2);
}

/* Support Section */
.support-section {
   margin: var(--space-xl) 0;
   padding-top: var(--space-lg);
   border-top: 1px solid var(--border-color);
}

.support-section h4 {
   color: var(--text-primary);
   font-size: 1.25rem;
   font-weight: 600;
   margin-bottom: var(--space-md);
   display: flex;
   align-items: center;
   gap: var(--space-sm);
}

.resource-links {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: var(--space-md);
}

.resource-link {
   display: flex;
   align-items: center;
   gap: var(--space-md);
   padding: var(--space-md);
   background: var(--card-bg);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   text-decoration: none;
   color: var(--text-primary);
   transition: all 0.3s ease;
}

.resource-link:hover {
   border-color: var(--text-secondary);
   background: rgba(184, 184, 184, 0.05);
   transform: translateY(-1px);
}

.resource-link i {
   font-size: 1.5rem;
   color: var(--text-secondary);
   width: 30px;
   text-align: center;
}

.resource-link span {
   font-weight: 600;
   font-size: 1rem;
}

.resource-link small {
   color: var(--text-secondary);
   font-size: 0.85rem;
   display: block;
   margin-top: 2px;
}

/* Mobile Responsiveness for Support */
@media (max-width: 768px) {
   .support-grid {
      grid-template-columns: 1fr;
      gap: var(--space-md);
   }
   
   .resource-links {
      grid-template-columns: 1fr;
   }
   
   .support-item {
      padding: var(--space-md);
   }
   
   .support-icon {
      width: 50px;
      height: 50px;
      font-size: 1.25rem;
   }
}

@media (max-width: 480px) {
   .support-content h4 {
      font-size: 1.1rem;
   }
   
   .btn {
      padding: var(--space-xs) var(--space-sm);
      font-size: 0.85rem;
   }
   
   .resource-link {
      padding: var(--space-sm);
      gap: var(--space-sm);
   }
   
   .resource-link i {
      font-size: 1.25rem;
      width: 25px;
   }
}