/* Section-specific color overrides for neutralized content */
.github-enhanced .stat-value,
.github-enhanced .stat-label,
.github-enhanced .project-detail .label,
.github-enhanced .project-detail .value,
.github-enhanced .current-project h3,
.contribution-heatmap h3 {
    color: #ccc !important;
}

.leetcode-enhanced .stat-value,
.leetcode-enhanced .stat-label,
.leetcode-enhanced .activity-heatmap h3 {
    color: #ccc !important;
}
:root {
  /* Color variables */
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);
  
  /* Project gradient colors */
  --projects-gradient: linear-gradient(135deg, rgba(50, 184, 198, 0.1), rgba(45, 166, 178, 0.08), rgba(33, 128, 141, 0.05));
  --projects-accent: linear-gradient(90deg, var(--color-teal-300), var(--color-teal-400));

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Semantic colors */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
  }
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: 'Fira Code', var(--font-family-mono);
  background: var(--color-background);
  color: var(--color-text);
  overflow: hidden;
  height: 100vh;
  position: relative;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code, pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2');
}

/* Terminal Container */
.terminal-container {
    width: 100vw;
    height: 100vh;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1);
    cursor: text;
    /* Mobile optimizations */
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Terminal Header */
.terminal-header {
    background: #1e1e1e;
    border-bottom: 1px solid #333;
    padding: var(--space-8) var(--space-16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.terminal-controls {
    display: flex;
    gap: var(--space-8);
}

.control-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.control-btn:hover {
    opacity: 0.8;
}

.control-btn.close {
    background: #ff5f56;
}

.control-btn.minimize {
    background: #ffbd2e;
}

.control-btn.maximize {
    background: #27ca3f;
}

.terminal-title {
    color: #888;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Terminal Body */
.terminal-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    cursor: text;
}

.terminal-content {
    height: 100%;
    padding: var(--space-20);
    padding-bottom: calc(var(--space-20) + 60px); /* Extra padding to account for the input container */
    overflow-y: auto;
    scroll-behavior: smooth;
    cursor: text;
}

.terminal-content::-webkit-scrollbar {
    width: 8px;
}

.terminal-content::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.terminal-content::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

.terminal-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Welcome Banner */
.welcome-banner {
    margin-bottom: var(--space-32);
}

.ascii-art {
    color: #00ff00;
    font-size: clamp(6px, 2vw, 18px);
    white-space: pre;
    /* preserve ASCII formatting without forced wrapping */
    line-height: 1.1;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    margin-bottom: var(--space-16);
    overflow-x: auto;
    font-weight: bold;
    letter-spacing: -1px;
}

.welcome-text {
    margin-top: var(--space-16);
}

.greeting {
    color: #00ff00;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-8);
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

.subtext {
    color: #888;
    font-size: var(--font-size-base);
    margin-bottom: var(--space-16);
}

.hint {
    color: #ccc;
    font-size: var(--font-size-sm);
}

.command-highlight {
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: var(--font-weight-medium);
}

.output-line {
    margin-bottom: var(--space-8);
    line-height: 1.4;
    word-wrap: break-word;
}

.output-line.error {
    color: #ff6b6b;
}

.output-line.success {
    color: #00ff00;
}

.output-line.info {
    color: #64b5f6;
}

.output-line.warning {
    color: #ffb74d;
}

.output-line.command {
    color: #ccc;
    margin-bottom: var(--space-12);
}

/* Enhanced Help Command UI */
.help-section {
    margin: var(--space-16) 0;
    background: rgba(0, 255, 0, 0.03);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: var(--radius-base);
    padding: var(--space-20);
}

.help-header {
    text-align: center;
    margin-bottom: var(--space-20);
    color: #00ff00;
    font-size: var(--font-size-xl);
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.help-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-20);
    margin-bottom: var(--space-16);
}

.help-category {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-16);
    transition: all 0.3s ease;
}

.help-category:hover {
    border-color: #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
}

.help-category-title {
    color: #64b5f6;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-12);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.help-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
    margin-bottom: var(--space-4);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    cursor: pointer;
}

.help-command:hover {
    background: rgba(0, 255, 0, 0.1);
    transform: translateX(4px);
}

.help-command-name {
    color: #00ff00;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.2s ease;
}

.help-command:hover .help-command-name {
    border-bottom-color: #00ff00;
}

.help-command-desc {
    color: #ccc;
    font-size: var(--font-size-sm);
}

.help-footer {
    margin-top: var(--space-20);
    padding-top: var(--space-16);
    border-top: 1px solid #333;
    text-align: center;
    color: #888;
    font-size: var(--font-size-sm);
}

/* Modern Skills Section - Consistent with Site Theme */
.skills-modern {
    margin: var(--space-16) 0;
    background: linear-gradient(135deg, rgba(255, 138, 128, 0.1), rgba(255, 171, 145, 0.08), rgba(255, 204, 159, 0.05));
    border: 1px solid rgba(255, 138, 128, 0.2);
    border-radius: var(--radius-base);
    padding: var(--space-20);
}

.skills-modern-header {
    background: linear-gradient(90deg, #ff8a80, #ffab91);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-24);
    text-align: center;
    filter: drop-shadow(0 0 8px rgba(255, 138, 128, 0.3));
}

.skills-grid {
    display: grid;
    gap: var(--space-20);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.skill-category-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-20);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.skill-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(90deg, #ff8a80, #ffab91);
    transition: width 0.3s ease;
}

.skill-category-card:hover {
    border-color: #ff8a80;
    box-shadow: 0 0 25px rgba(255, 138, 128, 0.15);
    transform: translateY(-2px);
}

.skill-category-card:hover::before {
    width: 6px;
}

.category-title {
    color: #ff8a80;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-16);
    text-align: center;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid #444;
}

.skills-list-modern {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.skill-item-modern {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--space-12);
    transition: all 0.2s ease;
}

.skill-item-modern:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(4px);
}

.skill-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
}

.skill-name-with-icon {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.tech-icon {
    font-size: var(--font-size-base);
    display: inline-block;
    min-width: 20px;
}

.skill-name-modern {
    color: #ccc;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-mono);
}

.skill-level-indicator {
    color: #ff8a80;
    font-size: var(--font-size-sm);
    letter-spacing: 2px;
}

.skill-progress-container {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.skill-bar-ascii {
    font-family: var(--font-family-mono);
    color: #7dd87d;
    font-size: var(--font-size-sm);
    letter-spacing: 1px;
    flex: 1;
    text-shadow: 0 0 5px rgba(125, 216, 125, 0.3);
    line-height: 1;
    display: flex;
    align-items: center;
}

.skill-percentage-modern {
    color: #ffab91;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    min-width: 40px;
    text-align: right;
    font-family: var(--font-family-mono);
}

/* Responsive Design - Mobile-First Optimized */
@media (max-width: 768px) {
    .terminal-content {
        padding: var(--space-16);
        padding-bottom: calc(var(--space-16) + 50px);
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
    
    .skill-item-modern {
        padding: var(--space-10);
    }
    
    .skill-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
    
    .skill-progress-container {
        width: 100%;
    }
    
    .help-categories {
        grid-template-columns: 1fr;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
        padding: var(--space-12);
    }
    
    .project-card {
        padding: var(--space-20);
    }
    
    .about-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-16);
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .contact-section {
        padding: var(--space-16);
    }

    .contact-method {
        padding: var(--space-12);
    }

    .contact-title {
        font-size: var(--font-size-lg);
    }

    .github-stats-grid, .leetcode-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-12);
    }

    .heatmap-container-enhanced {
        overflow-x: auto;
        padding: var(--space-8);
    }

    /* Fix month label spacing on mobile for heatmaps */
    .heatmap-months {
        display: grid;
        grid-template-columns: repeat(53, minmax(10px, 1fr));
        gap: 2px;
        margin-bottom: 8px;
        padding-left: 32px;
    }

    .month-label {
        font-size: 8px;
        text-align: left;
        grid-column: span 4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ensure contribution grid maintains proper width on mobile */
    .contribution-grid {
        grid-template-columns: repeat(53, minmax(10px, 1fr));
        min-width: 500px;
    }

    .blog-posts-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }
    
    .blog-post-header {
        flex-direction: column;
        gap: var(--space-8);
        align-items: flex-start;
    }

    /* Better mobile terminal experience */
    .terminal-input-container {
        padding: var(--space-8);
    }

    .welcome-banner {
        padding: var(--space-12);
    }

    .ascii-art {
        font-size: 8px;
    }
}

@media (max-width: 480px) {
    .skills-modern {
        padding: var(--space-16);
    }
    
    .skill-category-card {
        padding: var(--space-16);
    }
    
    .category-title {
        font-size: var(--font-size-sm);
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        padding: var(--space-8);
        margin: var(--space-8) 0;
    }
    
    .project-card {
        padding: var(--space-16);
        margin: var(--space-4) 0;
    }
    
    .project-header {
        flex-direction: column;
        gap: var(--space-8);
    }

    .project-links {
        flex-direction: column;
        gap: var(--space-8);
    }

    .project-link {
        justify-content: center;
        text-align: center;
    }

    /* Extra small mobile heatmap adjustments */
    .heatmap-container-enhanced {
        padding: var(--space-6);
    }

    .heatmap-months {
        padding-left: 28px;
    }

    .month-label {
        font-size: 7px;
        grid-column: span 4;
        text-align: left;
    }

    .day-label {
        font-size: 8px;
        width: 28px;
    }

    .contribution-grid {
        grid-template-columns: repeat(53, minmax(8px, 1fr));
        min-width: 450px;
    }

    .contribution-day {
        min-width: 8px;
        max-width: 10px;
    }

    .week-column {
        grid-template-rows: repeat(7, 10px);
    }

    .github-stats-grid, .leetcode-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .blog-posts-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .contact-method-header {
        gap: var(--space-8);
    }

    .contact-footer {
        padding-top: var(--space-16);
    }

    .contact-availability {
        flex-direction: column;
        gap: var(--space-4);
    }

    /* Enhanced mobile terminal */
    .terminal-content {
        padding: var(--space-12);
        padding-bottom: calc(var(--space-12) + 45px);
    }

    .welcome-banner {
        padding: var(--space-8);
    }

    .ascii-art {
        font-size: 6px;
        line-height: 1;
    }

    .terminal-input-container {
        padding: var(--space-6);
    }

    .help-category {
        padding: var(--space-12);
    }

    /* Improved mobile typography */
    .projects-header, .skills-modern-header {
        font-size: var(--font-size-lg);
    }

    .about-name {
        font-size: var(--font-size-2xl);
    }

    .contact-title {
        font-size: var(--font-size-md);
    }
}

/* Enhanced Projects Section - GitHub Cards Style */
.projects-section {
    margin: var(--space-16) 0;
    background: var(--projects-gradient);
    border: 1px solid rgba(50, 184, 198, 0.2);
    border-radius: var(--radius-base);
    padding: var(--space-20);
}

.projects-header {
    background: var(--projects-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-24);
    text-align: center;
    filter: drop-shadow(0 0 8px rgba(50, 184, 198, 0.3));
}

.projects-grid {
    display: grid;
    gap: var(--space-24);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    padding: var(--space-16);
    margin: var(--space-16) 0;
}

.project-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-24);
    margin: var(--space-8) 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /* Mobile touch optimizations */
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(50, 184, 198, 0.1);
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--projects-accent);
    transition: width 0.3s ease;
}

.project-card:hover,
.project-card:focus {
    border-color: var(--color-teal-300);
    box-shadow: 0 0 25px rgba(50, 184, 198, 0.15);
    transform: translateY(-4px);
    outline: 2px solid transparent;
}

.project-card:hover::before,
.project-card:focus::before {
    width: 6px;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-16);
}

.project-title {
    color: var(--color-teal-300);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

.project-description {
    color: #ccc;
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin-bottom: var(--space-16);
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.tech-tag {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    border: 1px solid #333;
    transition: all 0.2s ease;
}

.tech-tag:hover {
    border-color: var(--color-teal-300);
    color: var(--color-teal-300);
}

.project-achievements {
    color: #ffb74d;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-16);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.project-links {
    display: flex;
    gap: var(--space-12);
}

.project-link {
    color: var(--color-teal-300);
    text-decoration: none;
    padding: var(--space-8) var(--space-16);
    border: 1px solid rgba(50, 184, 198, 0.3);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.project-link:hover {
    background: rgba(50, 184, 198, 0.1);
    border-color: var(--color-teal-300);
    box-shadow: 0 0 10px rgba(50, 184, 198, 0.2);
}

.project-link.demo {
    border-color: rgba(100, 181, 246, 0.3);
    color: #64b5f6;
}

.project-link.demo:hover {
    background: rgba(100, 181, 246, 0.1);
    border-color: #64b5f6;
    box-shadow: 0 0 10px rgba(100, 181, 246, 0.2);
}

/* Enhanced About Command - Terminal Business Card */
.about-section {
    margin: var(--space-16) 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-base);
    padding: var(--space-20);
}

.about-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-24);
    align-items: start;
}

.about-avatar {
    width: 120px;
    height: 120px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-base);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.about-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-base) - 2px);
}

.about-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.about-name {
    color: #ffffff;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.about-title {
    color: #cccccc;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-8);
}

.about-bio {
    color: #ccc;
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin-bottom: var(--space-16);
}

.about-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-12);
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: #888;
    font-size: var(--font-size-sm);
}

.highlight-icon {
    color: #999999;
}

/* Enhanced Contact Command - Professional Digital Business Card */
.contact-section {
    margin: var(--space-16) 0;
    background: rgba(141, 110, 99, 0.03);
    border: 1px solid rgba(141, 110, 99, 0.2);
    border-radius: var(--radius-base);
    padding: var(--space-24);
    position: relative;
}

.contact-header {
    text-align: center;
    margin-bottom: var(--space-24);
}

.contact-title {
    color: #ffffff;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    display: block;
    margin-bottom: var(--space-8);
}

.contact-subtitle {
    color: #888;
    font-size: var(--font-size-sm);
    font-style: italic;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-16);
    margin-bottom: var(--space-24);
}

.contact-method {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-16);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.contact-method--clickable {
    cursor: pointer;
}

.contact-method--clickable:hover {
    border-color: #8d6e63;
    box-shadow: 0 0 20px rgba(141, 110, 99, 0.15);
    transform: translateY(-2px);
    background: rgba(141, 110, 99, 0.05);
}

.contact-method--clickable:focus {
    outline: 2px solid #8d6e63;
    outline-offset: 2px;
}

.contact-method-header {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-8);
}

.contact-icon {
    font-size: var(--font-size-xl);
    line-height: 1;
}

.contact-icon-svg {
    width: 20px;
    height: 20px;
    color: inherit;
}

.contact-label {
    color: #ffffff;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.contact-value {
    color: #888888;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-6);
    word-break: break-all;
}

.contact-description {
    color: #ccc;
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-8);
}

.contact-link-indicator {
    position: absolute;
    top: var(--space-12);
    right: var(--space-12);
    color: #8d6e63;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: var(--font-size-sm);
}

.contact-method--clickable:hover .contact-link-indicator {
    opacity: 1;
    transform: translateX(2px);
}

.contact-footer {
    padding-top: var(--space-20);
    border-top: 1px solid #333;
    text-align: center;
}

.contact-availability {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
    color: #00ff00;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.status-indicator {
    font-size: var(--font-size-xs);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.contact-cta {
    color: #888;
    font-size: var(--font-size-sm);
    font-style: italic;
}

.contact-link {
    color: #00ff00;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover {
    color: #64b5f6;
}

/* Enhanced Resume Command - Terminal Resume */
.resume-section {
    margin: var(--space-16) 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-base);
    padding: var(--space-20);
}

.resume-header {
    color: #ffffff;
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-24);
    text-align: center;
    text-shadow: none;
}

.resume-section-block {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-16);
    margin-bottom: var(--space-16);
    border-left: 4px solid #ffffff;
}

.resume-section-title {
    color: #64b5f6;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-12);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.resume-item {
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid #333;
}

.resume-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.resume-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-8);
}

.resume-item-title {
    color: #00ff00;
    font-weight: var(--font-weight-semibold);
}

.resume-item-org {
    color: #ffb74d;
    font-size: var(--font-size-sm);
}

.resume-item-period {
    color: #888;
    font-size: var(--font-size-sm);
}

.resume-item-desc {
    color: #ccc;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.resume-info {
    margin-bottom: var(--space-16);
}

.resume-info p {
    margin: 0;
}

.resume-info p:first-child {
    color: #ffffff;
    margin-bottom: 10px;
    font-size: 16px;
}

.resume-info p:last-child {
    color: #cccccc;
    font-size: 14px;
    margin-bottom: 20px;
}

.resume-download-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #666;
    border-radius: 6px;
    padding: 16px 24px;
    font-size: 16px;
    font-family: 'Fira Code', monospace;
    font-weight: bold;
    color: #ffffff;
    transition: all 0.3s ease;
    /* Mobile touch optimizations */
    min-height: 44px;
    min-width: 44px;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
}

.resume-download-button:hover,
.resume-download-button:focus {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
    outline: 2px solid transparent;
}

/* Blog, GitHub, LeetCode sections */
.blog-section {
    margin: var(--space-16) 0;
    border-radius: var(--radius-base);
    padding: var(--space-20);
    font-family: 'Fira Code', monospace;
    background: rgba(0, 102, 204, 0.03);
    border: 1px solid rgba(0, 102, 204, 0.2);
}

.blog-header {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-20);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    color: #ffb74d;
}

/* Enhanced Blog Post Cards */
.blog-post-card {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-20);
    transition: all 0.3s ease;
    position: relative;
}

.blog-post-card:hover {
    border-color: #6b7280;
    box-shadow: 0 0 15px rgba(107, 114, 128, 0.1);
    transform: translateY(-2px);
}

.blog-post-title {
    color: #00ff00;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-12);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.blog-post-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
    font-size: var(--font-size-sm);
}

.blog-post-date {
    color: #888;
}

/* Enhanced blog source styling - tag-like appearance */
.blog-post-source {
    background: rgba(0, 102, 204, 0.15);
    color: #0066cc;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    border: 1px solid rgba(0, 102, 204, 0.3);
    display: inline-block;
    font-weight: var(--font-weight-medium);
    text-shadow: none;
    transition: all 0.2s ease;
}

.blog-post-source:hover {
    background: rgba(0, 102, 204, 0.25);
    border-color: #0066cc;
    transform: scale(1.05);
}

.blog-post-excerpt {
    color: #ccc;
    line-height: 1.4;
    margin-bottom: var(--space-12);
}

/* Enhanced Blog Section - Clean Terminal Style with Neutral Theme */
.blog-filter-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-16);
    margin-bottom: var(--space-20);
    border-left: 4px solid #6b7280;
}

.filter-label {
    color: #9ca3af;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-12);
}

.blog-source-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.blog-filter-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
    color: #ccc;
    padding: var(--space-6) var(--space-12);
    border-radius: var(--radius-sm);
    font-family: 'Fira Code', monospace;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.blog-filter-btn:hover {
    border-color: #6b7280;
    box-shadow: 0 0 10px rgba(107, 114, 128, 0.1);
}

.blog-filter-btn.active {
    background: rgba(107, 114, 128, 0.2);
    border-color: #6b7280;
    color: #9ca3af;
    box-shadow: 0 0 15px rgba(107, 114, 128, 0.2);
}

.filter-icon {
    font-size: var(--font-size-sm);
}

.blog-results-count {
    color: #888;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-20);
    text-align: center;
}

/* Blog Posts Grid */
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-20);
}
.blog-post-card {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-20);
    transition: all 0.3s ease;
    position: relative;
}

.blog-post-card:hover {
    border-color: #6b7280;
    box-shadow: 0 0 15px rgba(107, 114, 128, 0.1);
    transform: translateY(-2px);
}

.blog-post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-16);
}

.blog-post-title {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 1;
}

.post-emoji {
    font-size: var(--font-size-xl);
}

.blog-post-title h3 {
    color: #d1d5db;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    line-height: 1.3;
}

.blog-post-source {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    border: 1px solid rgba(156, 163, 175, 0.3);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    font-family: 'Fira Code', monospace;
    transition: all 0.3s ease;
}

.blog-post-source.clickable {
    cursor: pointer;
    user-select: none;
}

.blog-post-source.clickable:hover {
    background: rgba(156, 163, 175, 0.25);
    border-color: #9ca3af;
    color: #d1d5db;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(156, 163, 175, 0.2);
}

.blog-post-source.clickable:active {
    transform: scale(0.98);
}

.blog-post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: #888;
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid #333;
}

.blog-post-date {
    color: #888;
}

.blog-post-read-time {
    color: #9ca3af;
}

.blog-post-excerpt {
    color: #ccc;
    line-height: 1.5;
    margin-bottom: var(--space-16);
}

.blog-post-footer {
    border-top: 1px solid #333;
    padding-top: var(--space-12);
}

.blog-post-btn {
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid #6b7280;
    color: #9ca3af;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
}

.blog-post-btn:hover {
    background: rgba(107, 114, 128, 0.3);
    border-color: #9ca3af;
    color: #d1d5db;
    box-shadow: 0 0 15px rgba(107, 114, 128, 0.2);
    transform: translateY(-1px);
}

.blog-post-btn:active {
    transform: translateY(0);
}

/* Empty State - Simple and Clean */
.blog-empty-state {
    text-align: center;
    padding: var(--space-32);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    margin-top: var(--space-20);
}

.empty-message {
    color: #888;
    font-family: 'Fira Code', monospace;
}

/* GitHub Enhanced Styling */
.github-enhanced {
    margin: var(--space-16) 0;
    background: rgba(110, 84, 148, 0.03);
    border: 1px solid rgba(110, 84, 148, 0.2);
    border-radius: var(--radius-base);
    padding: var(--space-20);
    font-family: 'Fira Code', monospace;
}

.github-header-enhanced {
    margin-bottom: var(--space-24);
}

.github-header-enhanced h2 {
    color: #6e5494;
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--space-16);
    text-shadow: 0 0 10px rgba(110, 84, 148, 0.3);
}

.github-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-16);
    margin-bottom: var(--space-20);
}

.stat-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-12);
    text-align: center;
    transition: all 0.3s ease;
}

.stat-item:hover {
    border-color: #6e5494;
    box-shadow: 0 0 10px rgba(110, 84, 148, 0.1);
}

.stat-value {
    color: #00ff00;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4);
}

.stat-label {
    color: #888;
    font-size: var(--font-size-sm);
}

.current-project {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-16);
    margin-bottom: var(--space-20);
    border-left: 4px solid #6e5494;
}

.current-project h3 {
    color: #64b5f6;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-12);
}

.project-info {
    display: grid;
    gap: var(--space-8);
}

.project-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-detail .label {
    color: #888;
    font-size: var(--font-size-sm);
}

.project-detail .value {
    color: #6e5494;
    font-weight: var(--font-weight-medium);
}

.contribution-heatmap {
    margin-bottom: var(--space-20);
}

.contribution-heatmap h3 {
    color: #64b5f6;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-16);
}

.heatmap-container-enhanced {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-16);
    width: 100%;
}

.heatmap-months {
    display: grid;
    grid-template-columns: repeat(53, minmax(12px, 1fr));
    gap: 2px;
    margin-bottom: 8px;
    padding-left: 36px;
}

.month-label {
    color: #888;
    font-size: 9px;
    text-align: left;
    grid-column: span 4;
    position: relative;
}

.heatmap-grid-enhanced {
    display: flex;
    gap: 2px;
}

.days-labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.day-label {
    color: #888;
    font-size: 9px;
    height: 12px;
    line-height: 12px;
    width: 32px;
}

.contribution-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(53, minmax(12px, 1fr));
    gap: 2px;
    width: 100%;
}

.week-column {
    display: grid;
    grid-template-rows: repeat(7, 12px);
    gap: 2px;
}

.contribution-day {
    width: 100%;
    aspect-ratio: 1;
    min-width: 10px;
    max-width: 12px;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.contribution-day:hover, .activity-day:hover {
    transform: scale(1.2);
    z-index: 10;
}

/* GitHub Contribution Levels */
.contribution-day.none {
    background: #161b22;
    border: 1px solid #21262d;
}

.contribution-day.low {
    background: #0e4429;
    border: 1px solid #006d32;
}

.contribution-day.medium {
    background: #26a641;
    border: 1px solid #26a641;
}

.contribution-day.high {
    background: #39d353;
    border: 1px solid #39d353;
}

.contribution-day.very-high {
    background: #57e96b;
    border: 1px solid #57e96b;
}



.legend-day.none {
    background: #161b22;
    border: 1px solid #21262d;
}

.legend-day.low {
    background: #0e4429;
    border: 1px solid #006d32;
}

.legend-day.medium {
    background: #26a641;
    border: 1px solid #26a641;
}

.legend-day.high {
    background: #39d353;
    border: 1px solid #39d353;
}

.legend-day.very-high {
    background: #57e96b;
    border: 1px solid #57e96b;
}

.additional-stats {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-12);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    color: #888;
    font-size: var(--font-size-sm);
}

.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--space-12);
    gap: var(--space-8);
    color: #888;
    font-size: var(--font-size-xs);
}

.legend-scale {
    display: flex;
    gap: 2px;
}

.legend-day {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* LeetCode Enhanced Styling */
.leetcode-enhanced {
    margin: var(--space-16) 0;
    background: rgba(248, 159, 27, 0.03);
    border: 1px solid rgba(248, 159, 27, 0.2);
    border-radius: var(--radius-base);
    padding: var(--space-20);
    font-family: 'Fira Code', monospace;
}

.leetcode-header-enhanced {
    margin-bottom: var(--space-24);
}

.leetcode-header-enhanced h2 {
    color: #f89f1b;
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--space-16);
    text-shadow: 0 0 10px rgba(248, 159, 27, 0.3);
}

.leetcode-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-16);
    margin-bottom: var(--space-20);
}

.leetcode-enhanced .stat-item:hover {
    border-color: #f89f1b;
    box-shadow: 0 0 10px rgba(248, 159, 27, 0.1);
}

.leetcode-enhanced .stat-value {
    color: #f89f1b;
}

/* LeetCode Activity Heatmap - using same calendar style as GitHub */
.activity-heatmap {
    margin-bottom: var(--space-20);
}

.activity-heatmap h3 {
    color: #64b5f6;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-16);
}

/* LeetCode Activity Levels - similar to GitHub but with red theme */
.activity-day.none {
    background: #161b22;
    border: 1px solid #21262d;
}

.activity-day.low {
    background: #4a1a1a;
    border: 1px solid #6d2020;
}

.activity-day.medium {
    background: #ff6b6b;
    border: 1px solid #ff6b6b;
}

.activity-day.high {
    background: #ff8a80;
    border: 1px solid #ff8a80;
}

.activity-day.very-high {
    background: #ffab91;
    border: 1px solid #ffab91;
}

.recent-submissions {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-16);
    margin-bottom: var(--space-20);
    border-left: 4px solid #ff6b6b;
}

.recent-submissions h3 {
    color: #64b5f6;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-16);
}

.submissions-list {
    display: grid;
    gap: var(--space-8);
}

.submission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-8);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.submission-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.submission-problem {
    color: #00ff00;
    font-weight: var(--font-weight-medium);
}

.submission-details {
    display: flex;
    gap: var(--space-16);
    font-size: var(--font-size-sm);
}

.submission-status.accepted {
    color: #00ff00;
}

.submission-status.failed {
    color: #ff6b6b;
}

.submission-language {
    color: #64b5f6;
}

.submission-time {
    color: #888;
}

.performance-metrics {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #333;
    border-radius: var(--radius-base);
    padding: var(--space-12);
}

.metric-row {
    display: flex;
    justify-content: space-between;
    color: #888;
    font-size: var(--font-size-sm);
}

/* Terminal Input */
.terminal-input-container {
    display: flex;
    align-items: center;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0a0a0a;
    padding: var(--space-12) 0;
    z-index: 10;
    border-top: 1px solid #333;
    width: 100%;
    /* Mobile optimizations */
    min-height: 44px; /* Touch target minimum */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.prompt {
    color: #00ff00;
    font-weight: var(--font-weight-medium);
    margin-right: var(--space-8);
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

.terminal-input {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Fira Code', var(--font-family-mono);
    font-size: var(--font-size-base);
    outline: none;
    flex: 1;
    caret-color: transparent;
    text-shadow: none;
    /* Mobile touch optimizations */
    min-height: 44px;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.terminal-input:focus {
    outline: none;
    caret-color: transparent;
}

/* Hidden mirror element for custom cursor width measurement */
.mirror {
    position: absolute;
    visibility: hidden;
    white-space: pre;
    font-family: 'Fira Code', var(--font-family-mono);
    font-size: var(--font-size-base);
    top: 0;
    left: 0;
}

.cursor {
    color: #00ff00;
    animation: blink 1s infinite;
    font-weight: var(--font-weight-bold);
    margin-left: 2px;
}
/* Thicker block cursor style */
.cursor.thick {
    font-size: 0.9em; /* increase size for thickness */
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    
}

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

/* Loading animations */
.loading-text {
    color: #888;
    font-style: italic;
    display: inline-block;
}

.loading-text::after {
    content: '';
    animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
    0%, 33% { content: '.'; }
    34%, 66% { content: '..'; }
    67%, 100% { content: '...'; }
}

/* Terminal Loader */
.terminal-loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

.terminal-loader {
    font-family: 'CascadiaCode', monospace;
    margin: 20px auto;
    padding: 12px 18px;
    border-radius: 6px;
    background-color: rgba(16, 16, 16, 0.85);
    max-width: 90%;
    width: fit-content;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
    position: relative;
    overflow: hidden;
}

.terminal-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(170, 170, 170, 0.3), transparent);
}

.terminal-loader::after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% 4px;
    opacity: 0.1;
}

/* Terminal type-specific styling */
.terminal-loader.github {
    box-shadow: 0 4px 20px rgba(110, 84, 148, 0.15);
    border-top: 2px solid #6e5494;
}

.terminal-loader.leetcode {
    box-shadow: 0 4px 20px rgba(248, 159, 27, 0.15);
    border-top: 2px solid #f89f1b;
}

.terminal-loader.blog {
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.15);
    border-top: 2px solid #0066cc;
}

.terminal-loader.flicker {
    opacity: 0.85;
}

.loader-content {
    display: flex;
    align-items: center;
}

.loader-prompt {
    color: #4adc7c;
    margin-right: 10px;
    font-weight: bold;
    opacity: 0.9;
    text-shadow: 0 0 3px rgba(74, 220, 124, 0.5);
}

.loader-text {
    color: #e2e2e2;
    position: relative;
}

.loader-indicator {
    margin-left: 2px;
    color: #bbb;
}

.loader-cursor-typing {
    display: inline-block;
    color: #e2e2e2;
    margin-left: 1px;
    animation: cursor-typing 0.2s step-end infinite;
}

.loader-cursor-blinking {
    display: inline-block;
    color: #e2e2e2;
    margin-left: 1px;
    animation: cursor-blink 1.2s step-end infinite;
}

@keyframes cursor-typing {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes cursor-blink {
    0%, 24% { opacity: 1; }
    25%, 75% { opacity: 0; }
    76%, 100% { opacity: 1; }
}

/* Scanlines Effect */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        transparent 0%,
        rgba(0, 255, 0, 0.02) 50%,
        transparent 100%
    );
    background-size: 100% 4px;
    animation: scanline 0.1s linear infinite;
    z-index: 1000;
    opacity: 0.6;
}

@keyframes scanline {
    0% { background-position: 0 0; }
    100% { background-position: 0 4px; }
}