/* ============================================
   Modern CSS for SEO-Optimized Content Site
   Based on Google 2026 Best Practices
   ============================================ */

/* ============================================
   1. CSS RESET & BASE STYLES
   ============================================ */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  :root {
    /* Colors */
    --color-primary: #1976d2;
    --color-primary-dark: #115293;
    --color-primary-light: #4791db;
    --color-secondary: #424242;
    --color-accent: #ff6b6b;
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-danger: #f44336;
    
    /* Neutrals */
    --color-text: #212121;
    --color-text-light: #666666;
    --color-text-lighter: #999999;
    --color-border: #e0e0e0;
    --color-border-light: #f5f5f5;
    --color-bg: #ffffff;
    --color-bg-alt: #fafafa;
    --color-bg-section: #f8f9fa;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Merriweather', Georgia, serif;
    
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-xxl: 4rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
  }
  
  html {
    font-size: 16px;
    scroll-behavior: smooth;
    /* Do NOT set overflow-x here: combined with body's overflow-x: hidden
       it makes <html> its own scroll container and breaks the sticky header. */
  }
  
  body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
  }
  
  /* ============================================
     2. SKIP LINK (Accessibility)
     ============================================ */
  .wrapper-old-bb4e {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 4px 0;
  }
  
  .wrapper-old-bb4e:focus {
    top: 0;
  }
  
  /* ============================================
     3. CONTAINER & LAYOUT
     ============================================ */
  .cool_5914 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    width: 100%;
    box-sizing: border-box;
  }
  
  @media (max-width: 768px) {
    .cool_5914 {
      padding: 0 var(--space-sm);
    }
  }
  
  @media (max-width: 480px) {
    .cool_5914 {
      padding: 0 12px;
    }
  }
  
  /* Prevent horizontal overflow on all elements EXCEPT header */
  *:not(.clean-e707):not(header) {
    max-width: 100%;
  }
  
  /* Allow specific elements to exceed container */
  html,
  body,
  .clean-e707,
  header,
  .stale_414f,
  .notice-f9fe,
  .widget_wide_f1d7,
  .stone-f22a,
  .stale-2923,
  .panel-upper-a5b2,
  .component-light-7a28 {
    max-width: none;
  }
  
  /* Critical mobile fix: prevent any overflow */
  section,
  article,
  div,
  main {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Ensure images never cause overflow */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* Ensure SVG icons don't cause issues */
  svg {
    max-width: 100%;
    height: auto;
  }
  
  /* ============================================
     4. HEADER & NAVIGATION
     ============================================ */
  .clean-e707 {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-base);
  }
  
  .motion_c434 {
    animation: slideDown 0.3s ease-out;
  }
  
  @keyframes slideDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Scrolled state */
  .clean-e707.texture-under-8a41 {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 1);
  }
  
  .brown-9671 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    gap: var(--space-md);
  }
  
  .message-under-9dae {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  
  .panel-large-1810 img {
    height: 36px;
    width: auto;
    display: block;
  }
  
  .dirty_5c35 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: #e8f5e9;
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;
    white-space: nowrap;
  }
  
  .stale-77bd {
    flex: 1;
  }
  
  .outline-right-0de6 {
    display: flex;
    list-style: none;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
  }
  
  .soft_3666 {
    display: block;
    padding: 8px 16px;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }
  
  .soft_3666:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
  }
  
  .soft_3666.fn-active-d805 {
    background: var(--color-primary);
    color: white;
  }
  
  /* Dropdown Navigation */
  .first_d4a4 {
    position: relative;
  }
  
  .texture_557c {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
  }
  
  .texture_557c svg {
    transition: transform 0.2s ease;
  }
  
  /* é¼ æ ‡æ‚¬åœæ—¶ç®­å¤´æ—‹è½¬ï¼ˆæ¡Œé¢ï¼‰ï¼›ç‚¹å‡»å±•å¼€æ—¶ç®­å¤´æ—‹è½¬ï¼ˆç§»åŠ¨ç«¯ï¼‰ */
  .first_d4a4:hover .texture_557c svg,
  .texture_557c[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
  
  .banner-c451 {
    position: absolute;
    top: calc(100% + 8px); /* è·ç¦»çˆ¶å…ƒç´ 8pxï¼Œæ›´è‡ªç„¶ */
    left: 0;
    min-width: 200px;
    width: max-content; /* è‡ªåŠ¨é€‚åº”å†…å®¹å®½åº¦ */
    max-width: 300px; /* æœ€å¤§å®½åº¦é™åˆ¶ */
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.08);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1001;
    /* å…³é”®ï¼šç¡®ä¿æ²¡æœ‰overflowï¼Œå†…å®¹å®Œå…¨å¯è§ */
    overflow: visible;
    max-height: none;
    height: auto;
  }
  
  /* é¼ æ ‡æ‚¬åœçˆ¶å…ƒç´ æ—¶ï¼Œç«‹å³æ˜¾ç¤ºä¸‹æ‹‰èœå• */
  .first_d4a4:hover .banner-c451 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  
  /* åœ¨ä¸‹æ‹‰èœå•ä¸Šæ–¹æ·»åŠ ä¸€ä¸ªä¸å¯è§çš„æ¡¥æŽ¥åŒºåŸŸï¼Œé˜²æ­¢é¼ æ ‡ç§»åŠ¨æ—¶èœå•æ¶ˆå¤± */
  .banner-c451::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
  }
  
  .grid_8b30 {
    display: block;
    padding: 10px 20px;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
  }
  
  .grid_8b30:hover {
    background: var(--color-primary);
    color: white;
    padding-left: 24px; /* æ‚¬åœæ—¶è½»å¾®ç¼©è¿› */
  }
  
  /* å½“å‰é¡µé¢åœ¨ä¸‹æ‹‰èœå•ä¸­çš„æ ·å¼ */
  .grid_8b30[aria-current="page"] {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
  }
  
  .over_6e4a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  
  /* Header Login Button */
  .pattern_aa21 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: transparent;
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;
  }
  
  .pattern_aa21:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-text-light);
    transform: translateY(-1px);
  }
  
  .pattern_aa21 svg {
    flex-shrink: 0;
  }
  
  /* Header Download Button */
  .active_7e5c {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
    white-space: nowrap;
  }
  
  .active_7e5c:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #0d47a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
  }
  
  .active_7e5c svg {
    flex-shrink: 0;
    animation: bounce 2s infinite;
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3px);
    }
  }
  
  .paragraph-4bf0 {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    z-index: 1001;
  }
  
  .blue_21c9 {
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: var(--transition-base);
  }
  
  /* Hamburger animation when active */
  .paragraph-4bf0[aria-expanded="true"] .blue_21c9:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .paragraph-4bf0[aria-expanded="true"] .blue_21c9:nth-child(2) {
    opacity: 0;
  }
  
  .paragraph-4bf0[aria-expanded="true"] .blue_21c9:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }
  
  /* Mobile Navigation Menu */
  @media (max-width: 1100px) {
    .stale-77bd {
      position: fixed;
      top: 0;
      right: -100%;
      width: 280px;
      height: 100vh;
      background: white;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
      padding: 80px 0 20px;
      transition: right 0.3s ease-out;
      z-index: 999;
      overflow-y: auto; /* ç§»åŠ¨ç«¯èœå•å†…å®¹è¿‡å¤šæ—¶å¯æ»šåŠ¨ */
      overflow-x: visible; /* æ°´å¹³æ–¹å‘ä¸æ»šåŠ¨ï¼Œç¡®ä¿ä¸‹æ‹‰èœå•å¯è§ */
      /* éšè—æ»šåŠ¨æ¡å¤–è§‚ï¼Œä½†ä¿ç•™å¯æ»šåŠ¨èƒ½åŠ›ï¼Œè§†è§‰ä¸Šæ›´è‡ªç„¶ */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
    }
  
    .stale-77bd::-webkit-scrollbar {
      display: none; /* Chrome/Safari/Edge(Chromium) */
    }
    
    .stale-77bd.pink_0c2a {
      display: block;
      right: 0;
    }
    
    .outline-right-0de6 {
      flex-direction: column;
      gap: 0;
    }
    
    .soft_3666 {
      display: block;
      padding: 16px 24px;
      border-radius: 0;
      border-bottom: 1px solid var(--color-border-light);
    }
    
    /* Mobile overlay */
    .stale-77bd::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease-out;
    }
    
    .stale-77bd.pink_0c2a::before {
      opacity: 1;
      pointer-events: auto;
    }
  }
  
  @media (max-width: 1100px) {
    .stale-77bd {
      display: none;
    }
    
    .paragraph-4bf0 {
      display: flex;
    }
    
    .dirty_5c35 {
      display: none;
    }
    
    /* Adjust header buttons on tablet */
    .pattern_aa21,
    .active_7e5c {
      padding: 8px 16px;
      font-size: 0.875rem;
    }
    
    /* ç§»åŠ¨ç«¯ä¸‹æ‹‰èœå•æ”¹ä¸ºå †å æ˜¾ç¤ºï¼Œä¸éœ€è¦æµ®åŠ¨ */
    .first_d4a4 {
      position: relative;
    }
    
    .banner-c451 {
      position: static; /* ç§»åŠ¨ç«¯ä¸æµ®åŠ¨ï¼Œç›´æŽ¥å †å  */
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: none;
      border-left: 3px solid var(--color-primary);
      padding-left: 20px;
      margin-top: 0;
      /* ç”¨ max-height è¿‡æ¸¡å®žçŽ°è‡ªç„¶å±•å¼€/æ”¶èµ·ï¼Œè€Œä¸æ˜¯ç”Ÿç¡¬çš„ display åˆ‡æ¢ */
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, margin-top 0.3s ease;
    }
    
    .texture_557c[aria-expanded="true"] + .banner-c451 {
      max-height: 320px; /* è¶³å¤Ÿå®¹çº³æ‰€æœ‰å­é¡¹ï¼Œå±•å¼€æ—¶è‡ªç„¶æ’‘å¼€ */
      margin-top: 8px;
    }
    
    .grid_8b30 {
      padding: 8px 16px;
      font-size: 0.9rem;
    }
  }
  
  @media (max-width: 768px) {
    /* Stack buttons vertically or hide login on small screens */
    .over_6e4a {
      gap: 8px;
    }
    
    .pattern_aa21 {
      display: none;
    }
    
    .active_7e5c {
      padding: 8px 16px;
      font-size: 0.875rem;
    }
    
    .panel-large-1810 img {
      height: 32px;
      width: auto;
    }
  }
  
  @media (max-width: 480px) {
    .active_7e5c {
      padding: 6px 12px;
      font-size: 0.8125rem;
    }
    
    .active_7e5c svg {
      width: 14px;
      height: 14px;
    }
    
    .brown-9671 {
      gap: var(--space-sm);
    }
  }
  
  /* ============================================
     5. ARTICLE META BANNER
     ============================================ */
  .stale_414f {
    background: var(--color-bg-section);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-sm) 0;
  }
  
  .rough_933b {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-text-light);
  }
  
  .texture_advanced_0aba {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .texture_advanced_0aba svg {
    flex-shrink: 0;
  }
  
  .texture_advanced_0aba a {
    color: var(--color-primary);
    text-decoration: none;
  }
  
  .texture_advanced_0aba a:hover {
    text-decoration: underline;
  }
  
  @media (max-width: 768px) {
    .rough_933b {
      font-size: 0.8125rem;
      gap: var(--space-sm);
    }
  }
  
  /* ============================================
     6. HERO SECTION
     ============================================ */
  .notice-f9fe {
    padding: var(--space-xl) 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  }
  
  .texture-large-1850 {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-xl);
    align-items: center;
    width: 100%;
  }
  
  @media (max-width: 1024px) {
    .texture-large-1850 {
      grid-template-columns: 1fr 350px;
      gap: var(--space-lg);
    }
  }
  
  .slider-dirty-3467 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
  }
  
  .slider-dirty-3467 a {
    color: var(--color-primary);
    text-decoration: none;
  }
  
  .slider-dirty-3467 a:hover {
    text-decoration: underline;
  }
  
  .steel-ea4b {
    color: var(--color-text-lighter);
  }
  
  .prev-8640 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  @media (max-width: 1024px) {
    .prev-8640 {
      font-size: 2rem;
    }
  }
  
  @media (max-width: 480px) {
    .prev-8640 {
      font-size: 1.5rem;
    }
  }
  
  .primary-easy-7ee3 {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
  }
  
  .card-5a69 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }
  
  @media (max-width: 768px) {
    .card-5a69 {
      grid-template-columns: 1fr;
    }
  }
  
  .search-fresh-e573 {
    display: flex;
    gap: var(--space-sm);
  }
  
  .component_steel_d0e9 {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--color-primary-light);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
  }
  
  .hard_1ce8 {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .hard_1ce8 strong {
    font-weight: 600;
    color: var(--color-text);
  }
  
  .hard_1ce8 span {
    font-size: 0.875rem;
    color: var(--color-text-light);
  }
  
  .preview_b520 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  
  .menu_basic_8e1e {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .detail-18a7 {
    position: relative;
    text-align: center;
  }
  
  .detail-18a7 img {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
  }
  
  .component-light-bd68 {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  
  .new_3081 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
  }
  
  .selected-3d3f {
    color: #ffa000;
    font-size: 1.25rem;
    letter-spacing: 2px;
  }
  
  .detail_4500 {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-text);
  }
  
  .slider_dc0c {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
  }
  
  .lite-3eb8 {
    font-size: 0.875rem;
    color: var(--color-text-light);
  }
  
  @media (max-width: 968px) {
    .texture-large-1850 {
      grid-template-columns: 1fr;
    }
    
    .prev-8640 {
      font-size: 1.75rem;
    }
    
    .menu_basic_8e1e {
      order: -1;
      max-width: 100%;
    }
    
    .detail-18a7 {
      max-width: 300px;
      margin: 0 auto;
    }
  }
  
  @media (max-width: 480px) {
    .prev-8640 {
      font-size: 1.5rem;
    }
    
    .primary-easy-7ee3 {
      font-size: 1rem;
    }
    
    .slider-dirty-3467 {
      font-size: 0.8125rem;
      flex-wrap: wrap;
    }
    
    .detail-18a7 {
      max-width: 250px;
    }
  }
  
  /* ============================================
     7. BUTTONS
     ============================================ */
  .fresh_cb77 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    font-size: 1rem;
    line-height: 1.5;
  }
  
  .plasma_455c {
    background: var(--color-primary);
    color: white;
  }
  
  .plasma_455c:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
  
  .breadcrumb-5713 {
    background: white;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
  }
  
  .breadcrumb-5713:hover {
    background: var(--color-primary);
    color: white;
  }
  
  .form-9bd1 {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }
  
  .form-9bd1:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-text-light);
  }
  
  .center-3fa1 {
    padding: 16px 32px;
    font-size: 1.125rem;
  }
  
  .popup-over-95c0 {
    padding: 20px 40px;
    font-size: 1.25rem;
  }
  
  /* ============================================
     8. STATS SECTION
     ============================================ */
  .widget_wide_f1d7 {
    padding: var(--space-xl) 0;
    background: white;
  }
  
  .title_82a2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
  }
  
  .advanced-49c3 {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-bg-section);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
  }
  
  .advanced-49c3:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  
  .caption_4091 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-xs);
  }
  
  .filter-871c {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
  }
  
  .main-bfcb {
    font-size: 0.875rem;
    color: var(--color-text-light);
  }
  
  /* ============================================
     9. TABLE OF CONTENTS
     ============================================ */
  .stone-f22a {
    padding: var(--space-xl) 0;
    background: var(--color-bg-section);
  }
  
  .container-lite-b873 {
    background: white;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  
  .notice_067f {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    color: var(--color-text);
  }
  
  .hero_bottom_501a {
    list-style: none;
    counter-reset: toc-counter;
  }
  
  .hero_bottom_501a li {
    counter-increment: toc-counter;
    margin-bottom: var(--space-sm);
  }
  
  .hero_bottom_501a li a {
    display: flex;
    align-items: center;
    padding: var(--space-sm);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
  }
  
  .hero_bottom_501a li a:before {
    content: counter(toc-counter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-primary-light);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    margin-right: var(--space-sm);
    flex-shrink: 0;
  }
  
  .hero_bottom_501a li a:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
  }
  
  /* ============================================
     10. CONTENT SECTIONS
     ============================================ */
  .stale-2923 {
    padding: var(--space-xxl) 0;
  }
  
  .fixed-7981 {
    background: var(--color-bg-section);
  }
  
  .tabs_action_5c17 {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-xl);
  }
  
  .dropdown_7131 {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-primary-light);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: var(--space-md);
  }
  
  .simple_0383 {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    margin-bottom: var(--space-md);
  }
  
  .notice_smooth_faa6 {
    font-size: 1.125rem;
    color: var(--color-text-light);
    line-height: 1.7;
  }
  
  .heading_solid_2b0a {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--space-xl);
    width: 100%;
  }
  
  @media (max-width: 1200px) {
    .heading_solid_2b0a {
      grid-template-columns: 1fr 300px;
    }
  }
  
  .sidebar_warm_2840 {
    max-width: 750px;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  .sidebar_warm_2840 img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  .sidebar_warm_2840 pre,
  .sidebar_warm_2840 code {
    overflow-x: auto;
    max-width: 100%;
  }
  
  .sidebar_warm_2840 h3 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    margin: var(--space-xl) 0 var(--space-md);
    color: var(--color-text);
  }
  
  .sidebar_warm_2840 h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: var(--space-lg) 0 var(--space-sm);
    color: var(--color-text);
  }
  
  .sidebar_warm_2840 h5 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: var(--space-md) 0 var(--space-sm);
    color: var(--color-text);
  }
  
  .sidebar_warm_2840 p {
    margin-bottom: var(--space-md);
    color: var(--color-text);
  }
  
  .sidebar_warm_2840 ul,
  .sidebar_warm_2840 ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
  }
  
  .sidebar_warm_2840 li {
    margin-bottom: var(--space-xs);
    color: var(--color-text);
  }
  
  .sidebar_warm_2840 strong {
    font-weight: 600;
    color: var(--color-text);
  }
  
  .sidebar_warm_2840 a {
    color: var(--color-primary);
    text-decoration: underline;
  }
  
  .sidebar_warm_2840 a:hover {
    color: var(--color-primary-dark);
  }
  
  .section_hot_eacf {
    counter-reset: list-counter;
    list-style: none;
    padding-left: 0;
  }
  
  .section_hot_eacf li {
    counter-increment: list-counter;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: var(--space-md);
  }
  
  .section_hot_eacf li:before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
  }
  
  @media (max-width: 968px) {
    .heading_solid_2b0a {
      grid-template-columns: 1fr;
    }
    
    .simple_0383 {
      font-size: 1.75rem;
    }
    
    .sidebar_warm_2840 {
      max-width: 100%;
    }
  }
  
  @media (max-width: 480px) {
    .simple_0383 {
      font-size: 1.5rem;
    }
    
    .sidebar_warm_2840 h3 {
      font-size: 1.375rem;
    }
    
    .sidebar_warm_2840 h4 {
      font-size: 1.125rem;
    }
  }
  
  /* ============================================
     11. INFO BOXES
     ============================================ */
  .pattern-top-c2a8 {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    margin: var(--space-lg) 0;
    border-left: 4px solid;
  }
  
  .secondary_down_8b90 {
    background: #fff3e0;
    border-color: var(--color-warning);
  }
  
  .thick_0c05 {
    background: #e3f2fd;
    border-color: var(--color-primary);
  }
  
  .module-f19c {
    font-size: 1.5rem;
    flex-shrink: 0;
  }
  
  .panel_short_ecd8 strong {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
  }
  
  /* ============================================
     12. AUTHOR NOTE
     ============================================ */
  .out_f87d {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: #f1f8ff;
    border: 2px solid #0366d6;
    border-radius: var(--radius-lg);
    margin: var(--space-xl) 0;
  }
  
  .popup_south_f177 {
    flex-shrink: 0;
  }
  
  .breadcrumb_stone_6c02 strong {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
  }
  
  /* ============================================
     13. TABLES
     ============================================ */
  .pattern-hovered-7ad4 {
    overflow-x: auto;
    margin: var(--space-lg) 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  
  @media (max-width: 768px) {
    .pattern-hovered-7ad4 {
      margin-left: calc(-1 * var(--space-sm));
      margin-right: calc(-1 * var(--space-sm));
      width: calc(100% + 2 * var(--space-sm));
      border-radius: 0;
    }
  }
  
  .paragraph-e2b2,
  .module_f632,
  .background-large-83f6 {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  
  .paragraph-e2b2 thead,
  .module_f632 thead {
    background: var(--color-primary);
    color: white;
  }
  
  .paragraph-e2b2 th,
  .paragraph-e2b2 td,
  .module_f632 th,
  .module_f632 td,
  .background-large-83f6 th,
  .background-large-83f6 td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
    white-space: nowrap;
  }
  
  @media (max-width: 768px) {
    .paragraph-e2b2 th,
    .paragraph-e2b2 td,
    .module_f632 th,
    .module_f632 td,
    .background-large-83f6 th,
    .background-large-83f6 td {
      padding: var(--space-sm);
      font-size: 0.875rem;
    }
    
    .paragraph-e2b2,
    .module_f632,
    .background-large-83f6 {
      min-width: 600px;
    }
  }
  
  .paragraph-e2b2 th,
  .module_f632 th,
  .background-large-83f6 th {
    font-weight: 600;
  }
  
  .paragraph-e2b2 tbody tr:hover,
  .module_f632 tbody tr:hover,
  .background-large-83f6 tbody tr:hover {
    background: var(--color-bg-alt);
  }

  .bench-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: var(--space-lg) 0;
  }

  @media (max-width: 860px) {
    .bench-grid {
      grid-template-columns: 1fr;
    }
  }

  .bench-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem 1.35rem 1.4rem;
    box-shadow: 0 8px 28px rgba(33, 33, 33, 0.08);
    border: 1px solid #eef0f4;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .bench-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .bench-card header strong {
    font-size: 1.05rem;
    color: #212121;
  }

  .bench-year {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
  }

  .bench-card--flag {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, #f5f7ff 0%, #fff 48%);
  }

  .bench-card--mid .bench-year {
    background: #e0f2fe;
    color: #0369a1;
  }

  .bench-card--entry .bench-year {
    background: #fef3c7;
    color: #b45309;
  }

  .bench-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin: 0;
  }

  .bench-metrics div {
    background: #f7f8fb;
    border-radius: 10px;
    padding: 0.65rem 0.7rem;
  }

  .bench-metrics dt {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0.2rem;
  }

  .bench-metrics dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
  }

  .compare-wrap {
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(33, 33, 33, 0.08);
  }

  .module_f632 {
    border-radius: 16px;
  }

  .module_f632 thead th {
    padding: 1rem 1.1rem;
    font-size: 0.92rem;
  }

  .module_f632 tbody td {
    vertical-align: top;
    white-space: normal;
  }
  
  .accent-629b {
    font-size: 0.875rem;
    color: var(--color-text-light);
    font-style: italic;
    margin-top: var(--space-sm);
  }
  
  /* ============================================
     14. SIDEBAR
     ============================================ */
  .hidden_green_3b8a {
    position: sticky;
    top: 80px;
    align-self: start;
  }
  
  .border_mini_0370 {
    background: white;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-md);
  }
  
  .border_mini_0370 h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--color-text);
  }
  
  .video-rough-a05f {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }
  
  .video-rough-a05f h4 {
    color: white;
  }
  
  .sidebar_slow_8eea {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .logo-huge-9c8d {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
  }
  
  .logo-huge-9c8d:last-child {
    border-bottom: none;
  }
  
  .logo-huge-9c8d dt {
    font-weight: 600;
    color: var(--color-text-light);
  }
  
  .logo-huge-9c8d dd {
    font-weight: 500;
    color: var(--color-text);
    text-align: right;
  }
  
  .heading_db71 {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    word-break: break-all;
  }
  
  .shadow-d93d {
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-md);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
  }
  
  .shadow-d93d:hover {
    text-decoration: underline;
  }
  
  .main-c005 {
    text-align: center;
    margin-bottom: var(--space-md);
  }
  
  .lower_981e {
    width: 118px;
    height: 118px;
    margin: 0 auto var(--space-sm);
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
  
  .lower_981e span {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
  }
  
  .popup_gold_812e {
    font-weight: 600;
    color: white;
  }
  
  .menu_6f50 {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.85rem;
  }

  .score-group {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
  }

  .score-group dt {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 0.35rem;
    font-weight: 700;
  }

  .score-group dd {
    margin: 0;
  }
  
  .menu_6f50 li {
    padding: 0.15rem 0;
    font-size: 0.92rem;
    line-height: 1.45;
  }
  
  .hard_75bd {
    color: #4caf50;
  }
  
  .modal-1efb {
    color: #ff9800;
  }
  
  .picture_smooth_924b {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .summary-2d54 {
    display: grid;
    grid-template-columns: 92px 1fr 36px;
    align-items: center;
    gap: var(--space-sm);
  }
  
  .feature-brown-1895 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
  }
  
  .stale-a0d7 {
    height: 10px;
    background: #eef2f6;
    border-radius: 999px;
    overflow: hidden;
  }
  
  .wrapper_middle_0736 {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #84cc16 100%);
    border-radius: 999px;
    transition: width var(--transition-slow);
  }
  
  .hero-0f81 {
    font-weight: 700;
    color: var(--color-text);
    text-align: right;
  }
  
  /* ============================================
     15. FEATURE GRID
     ============================================ */
  .preview_fd99 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
  }
  
  @media (max-width: 768px) {
    .preview_fd99 {
      grid-template-columns: 1fr;
    }
  }
  
  .carousel_over_11b8 {
    padding: var(--space-xl);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    position: relative;
  }
  
  .carousel_over_11b8:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  
  .gallery-cd2a {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 48px;
    height: 48px;
    background: var(--color-primary-light);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    opacity: 0.3;
  }
  
  .carousel_over_11b8 h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--color-text);
  }
  
  .carousel_over_11b8 p {
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
  }
  
  .input-slow-33c5 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
  }
  
  .popup_gold_812e {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-light);
  }
  
  .filter_4731 {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-primary);
  }
  
  .label-new-5147 {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: #f1f8ff;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
  }
  
  .label-new-5147 h4 {
    margin-bottom: var(--space-sm);
    font-size: 1.125rem;
  }
  
  /* ============================================
     16. COMPARISON & DECISION HELPER
     ============================================ */
  .section_70d9 {
    max-width: 900px;
    margin: 0 auto;
  }
  
  .silver-9fea {
    text-align: center;
    margin-bottom: var(--space-xl);
    font-size: 1.125rem;
    color: var(--color-text-light);
  }
  
  .link_daa6 {
    margin: var(--space-xl) 0;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  
  @media (max-width: 768px) {
    .link_daa6 {
      margin-left: calc(-1 * var(--space-sm));
      margin-right: calc(-1 * var(--space-sm));
      width: calc(100% + 2 * var(--space-sm));
    }
  }
  
  .status_next_f794 {
    margin-top: var(--space-xxl);
  }
  
  .status_next_f794 h3 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: var(--space-xl);
  }
  
  .element_gas_c312 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
  }
  
  @media (max-width: 768px) {
    .element_gas_c312 {
      grid-template-columns: 1fr;
    }
  }
  
  .slider_4f74 {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  
  .aside_west_ab28 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }
  
  .video-white-5e3a {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
  }
  
  .slider_4f74 h4 {
    margin-bottom: var(--space-lg);
    font-size: 1.5rem;
    color: white;
  }
  
  .slider_4f74 ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-lg);
  }
  
  .slider_4f74 li {
    padding: var(--space-xs) 0;
    color: white;
  }
  
  .slider_4f74 .fresh_cb77 {
    width: 100%;
    background: white;
  }
  
  .aside_west_ab28 .fresh_cb77 {
    color: #667eea;
  }
  
  .video-white-5e3a .fresh_cb77 {
    color: #f5576c;
  }
  
  /* ============================================
     17. TUTORIAL / STEPS
     ============================================ */
  .dark-c229 {
    max-width: 900px;
    margin: 0 auto;
  }
  
  .dirty_e534 {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-xl);
    overflow: hidden;
  }
  
  .heading-a330 {
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
  }
  
  .complex-3198 {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
  }
  
  .heading-a330 h3 {
    margin: 0;
    font-size: 1.5rem;
    color: white;
  }
  
  .title_purple_0681 {
    padding: var(--space-xl);
  }
  
  @media (max-width: 768px) {
    .heading-a330 {
      padding: var(--space-md);
    }
    
    .title_purple_0681 {
      padding: var(--space-md);
    }
    
    .search_c3f6 {
      margin-left: calc(-1 * var(--space-md));
      margin-right: calc(-1 * var(--space-md));
    }
  }
  
  .slider_2340 ol,
  .slider_2340 ul {
    margin: var(--space-md) 0;
    padding-left: var(--space-lg);
  }
  
  .slider_2340 li {
    margin-bottom: var(--space-sm);
  }
  
  .slider_2340 code {
    background: var(--color-bg-alt);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
  }
  
  .new-dae0 {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: #fff3e0;
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-md);
  }
  
  .backdrop_4b7d {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: #ffebee;
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius-md);
  }
  
  .search_c3f6 {
    margin-top: var(--space-lg);
    text-align: center;
  }
  
  .search_c3f6 img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }
  
  .brown-84cc,
  .popup_3b18,
  .label_inner_83bd,
  .motion_71c4 {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--color-bg-section);
    border-radius: var(--radius-md);
  }
  
  .shadow_020f {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: var(--color-bg-section);
    border-radius: var(--radius-md);
  }
  
  .clean-3261 {
    font-weight: 600;
    margin-bottom: var(--space-xs);
  }
  
  .shadow_out_31d9 {
    display: block;
    padding: var(--space-sm);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    word-break: break-all;
    overflow-wrap: break-word;
    margin: var(--space-sm) 0;
  }
  
  @media (max-width: 480px) {
    .shadow_out_31d9 {
      font-size: 0.625rem;
    }
  }
  
  .new-7da3 {
    padding: 8px 16px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
  }
  
  .new-7da3:hover {
    background: var(--color-primary-dark);
  }
  
  .image_094b {
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: var(--color-bg-section);
    border-radius: var(--radius-lg);
    text-align: center;
  }
  
  .image_094b h4 {
    margin-bottom: var(--space-md);
  }
  
  .message_fast_1034 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }
  
  /* ============================================
     18. SECURITY SECTION
     ============================================ */
  .secondary_9239 {
    max-width: 800px;
    margin: 0 auto var(--space-xl);
    font-size: 1.125rem;
    text-align: center;
    color: var(--color-text-light);
  }
  
  .light_a169 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
  }
  
  @media (max-width: 768px) {
    .light_a169 {
      grid-template-columns: 1fr;
    }
  }
  
  .link_51f6 {
    padding: var(--space-lg);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid;
  }
  
  .backdrop-5976 {
    border-color: var(--color-success);
  }
  
  .logo_f3e6 {
    border-color: var(--color-warning);
  }
  
  .light_7ea2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
  }
  
  .backdrop-5976 .light_7ea2 {
    background: #e8f5e9;
    color: var(--color-success);
  }
  
  .logo_f3e6 .light_7ea2 {
    background: #fff3e0;
    color: var(--color-warning);
  }
  
  .link_51f6 h4 {
    margin-bottom: var(--space-sm);
    font-size: 1.125rem;
  }
  
  .link_51f6 p {
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
  }
  
  .inner_ed4c {
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.8;
  }
  
  .frame_inner_d2ce {
    margin: var(--space-xxl) 0;
  }
  
  .frame_inner_d2ce h3 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: var(--space-md);
  }
  
  .frame_inner_d2ce > p {
    text-align: center;
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
  }
  
  .tag-fa80 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
  }
  
  @media (max-width: 768px) {
    .tag-fa80 {
      grid-template-columns: 1fr;
    }
  }
  
  .dynamic_f72a {
    padding: var(--space-lg);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  
  .dynamic_f72a h4 {
    margin-bottom: var(--space-md);
    font-size: 1.125rem;
    color: var(--color-primary);
  }
  
  .carousel-down-ba48 {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    cursor: pointer;
  }
  
  .carousel-down-ba48 input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 4px;
    cursor: pointer;
  }
  
  .photo-d1ee {
    margin-top: var(--space-xxl);
  }
  
  .focus_copper_2adc {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  
  .card_iron_3467 {
    text-align: center;
  }
  
  .soft_2a5c {
    width: 180px;
    height: 180px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
  }
  
  .primary_a9a4 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: white;
  }
  
  .soft_2a5c .popup_gold_812e {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
  }
  
  .breadcrumb_4bda {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
  }
  
  .bottom-7827 p {
    margin-bottom: var(--space-md);
  }
  
  .right-b698 {
    font-size: 0.875rem;
    color: var(--color-text-light);
  }
  
  @media (max-width: 768px) {
    .focus_copper_2adc {
      grid-template-columns: 1fr;
    }
  }
  
  /* ============================================
     19. REVIEW SECTION
     ============================================ */
  .surface-hard-8bbc {
    max-width: 600px;
    margin: 0 auto var(--space-xxl);
  }
  
  .description-663d {
    padding: var(--space-xl);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
  }
  
  .form-center-4aeb {
    margin-bottom: var(--space-xl);
  }
  
  .fast_0978 {
    font-size: 4rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
  }
  
  .notice_d15e {
    font-size: 2rem;
    color: #ffa000;
    letter-spacing: 4px;
    margin: var(--space-sm) 0;
  }
  
  .button_04dd {
    color: var(--color-text-light);
  }
  
  .hidden_d7e4 {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .accordion-in-373f {
    display: grid;
    grid-template-columns: 40px 1fr 50px;
    align-items: center;
    gap: var(--space-sm);
  }
  
  .badge-cold-8ed4 {
    font-weight: 600;
    color: var(--color-text);
  }
  
  .background-d1f3 {
    height: 12px;
    background: var(--color-border-light);
    border-radius: 6px;
    overflow: hidden;
  }
  
  .border_glass_52e4 {
    height: 100%;
    background: linear-gradient(90deg, #ffa000 0%, #ff6f00 100%);
    transition: width var(--transition-slow);
  }
  
  .slow_841f {
    text-align: right;
    font-weight: 600;
    color: var(--color-text-light);
    font-size: 0.875rem;
  }
  
  .header_pressed_9191 {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }
  
  .north-0a22 {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
  }
  
  .logo_0cc8 {
    border: 2px solid #4caf50;
  }
  
  .menu_solid_c619 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-md);
    gap: var(--space-md);
  }
  
  .narrow_3f5b {
    display: flex;
    gap: var(--space-md);
    flex: 1;
  }
  
  .thumbnail_hovered_57c0 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
  }
  
  .accordion_focused_b7d9 {
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
  }
  
  .next-91d9 {
    display: inline-block;
    padding: 2px 8px;
    background: #4caf50;
    color: white;
    font-size: 0.75rem;
    border-radius: 10px;
    margin-left: 8px;
  }
  
  .narrow_fa5b {
    font-size: 0.875rem;
    color: var(--color-text-light);
  }
  
  .wrapper_fa75 {
    text-align: right;
  }
  
  .wrapper_fa75 .video-7dfc {
    color: #ffa000;
    font-size: 1.125rem;
    margin-bottom: 4px;
  }
  
  .in-1dce {
    font-size: 0.875rem;
    color: var(--color-text-light);
  }
  
  .glass-029c h4 {
    margin-bottom: var(--space-sm);
    font-size: 1.125rem;
    color: var(--color-text);
  }
  
  .glass-029c p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: var(--space-md);
  }
  
  .smooth-2ca3 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: var(--space-md) 0;
  }
  
  .notice_51d4 {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  
  .secondary-aabe {
    background: #e8f5e9;
    color: #2e7d32;
  }
  
  .sidebar-10ef {
    background: #e3f2fd;
    color: #1565c0;
  }
  
  .shadow_large_8858 {
    background: #fff3e0;
    color: #e65100;
  }
  
  .section_6060 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
  }
  
  .section_6060 span {
    font-size: 0.875rem;
    color: var(--color-text-light);
  }
  
  .slider-black-2342 {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-fast);
  }
  
  .slider-black-2342:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-text-light);
  }
  
  .complex_a8b1 {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: #f1f8ff;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
  }
  
  .avatar-liquid-1192 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
  }
  
  .avatar-liquid-1192 strong {
    color: var(--color-primary);
  }
  
  .feature-bright-74f8 {
    font-size: 0.875rem;
    color: var(--color-text-light);
  }
  
  .table_wood_7974 {
    text-align: center;
    margin-top: var(--space-xl);
  }
  
  /* ============================================
     20. FAQ SECTION
     ============================================ */
  .tabs_short_a9b7 {
    max-width: 900px;
    margin: 0 auto;
  }
  
  .tag-lite-0640 {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-md);
    overflow: hidden;
  }
  
  .active-ba8a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: transparent;
    border: none;
    text-align: left;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition-fast);
  }
  
  .active-ba8a:hover {
    background: var(--color-bg-alt);
  }
  
  .link-6296 {
    flex-shrink: 0;
    transition: transform var(--transition-base);
  }
  
  .active-ba8a[aria-expanded="true"] .link-6296 {
    transform: rotate(180deg);
  }
  
  .in-6562 {
    display: none;
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--color-text-light);
    line-height: 1.7;
  }
  
  .in-6562 h5 {
    font-size: 1rem;
    font-weight: 600;
    margin: var(--space-md) 0 var(--space-sm);
    color: var(--color-text);
  }
  
  .in-6562 ul,
  .in-6562 ol {
    margin: var(--space-sm) 0;
    padding-left: var(--space-lg);
  }
  
  .in-6562 li {
    margin-bottom: var(--space-xs);
  }
  
  .narrow-055c {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: var(--radius-md);
    overflow-x: auto;
  }
  
  .easy-9be2 {
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: #9cdcfe;
  }
  
  .narrow-055c code {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  
  /* ============================================
     21. CONCLUSION SECTION
     ============================================ */
  .nav-steel-db72 {
    max-width: 800px;
    margin: 0 auto var(--space-xxl);
    text-align: center;
  }
  
  .under_e46f {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-xl) 0;
  }
  
  .dark_277a {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
  }
  
  .liquid_8bdb {
    padding: 12px 24px;
    background: #4caf50;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: var(--shadow-md);
  }
  
  .search_center_f151 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-xl);
    margin: var(--space-xxl) 0;
  }
  
  @media (max-width: 768px) {
    .search_center_f151 {
      grid-template-columns: 1fr;
    }
  }
  
  .north_0443,
  .accordion-6711 {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  
  .north_0443 {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  }
  
  .accordion-6711 {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  }
  
  .north_0443 h4,
  .accordion-6711 h4 {
    margin-bottom: var(--space-lg);
    font-size: 1.5rem;
  }
  
  .north_0443 ul,
  .accordion-6711 ul {
    list-style: none;
    padding: 0;
  }
  
  .north_0443 li,
  .accordion-6711 li {
    padding: var(--space-sm) 0;
    line-height: 1.6;
  }
  
  .widget_steel_9686 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-xl);
    margin: var(--space-xxl) 0;
  }
  
  @media (max-width: 768px) {
    .widget_steel_9686 {
      grid-template-columns: 1fr;
    }
  }
  
  .warm-7d16 {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  
  .section_hot_034b {
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
    color: white;
  }
  
  .medium_6df1 {
    background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
    color: white;
  }
  
  .warm-7d16 h4 {
    margin-bottom: var(--space-lg);
    font-size: 1.5rem;
    color: white;
  }
  
  .warm-7d16 ul {
    list-style: none;
    padding: 0;
  }
  
  .warm-7d16 li {
    padding: var(--space-xs) 0;
    color: white;
  }
  
  .secondary_copper_5872 {
    max-width: 800px;
    margin: var(--space-xxl) auto;
  }
  
  .secondary_copper_5872 h3 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    margin-bottom: var(--space-lg);
    text-align: center;
  }
  
  .secondary_copper_5872 p {
    margin-bottom: var(--space-md);
    color: var(--color-text-light);
    line-height: 1.8;
  }
  
  .nav_7264 {
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: var(--color-bg-section);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
  }
  
  .tabs_89bd {
    font-style: italic;
  }
  
  .progress-748b {
    display: block;
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-light);
  }
  
  .menu_1baa {
    margin-top: var(--space-xxl);
    padding: var(--space-xxl);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    text-align: center;
    color: white;
  }
  
  .menu_1baa h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: var(--space-md);
    color: white;
  }
  
  .menu_1baa p {
    font-size: 1.125rem;
    margin-bottom: var(--space-xl);
    color: rgba(255,255,255,0.9);
  }
  
  .plasma_4e1d {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
  }
  
  /* ============================================
     22. RELATED CONTENT
     ============================================ */
  .panel-upper-a5b2 {
    padding: var(--space-xxl) 0;
    background: var(--color-bg-section);
  }
  
  .texture_fee6 {
    font-family: var(--font-heading);
    font-size: 2rem;
    text-align: center;
    margin-bottom: var(--space-xl);
  }
  
  .badge_6adc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
  }
  
  @media (max-width: 768px) {
    .badge_6adc {
      grid-template-columns: 1fr;
    }
  }
  
  .box-6b0e {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: var(--transition-base);
  }
  
  .box-6b0e:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  
  .purple-c986 {
    font-size: 3rem;
    margin-bottom: var(--space-md);
  }
  
  .box-6b0e h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
  }
  
  .box-6b0e p {
    color: var(--color-text-light);
    font-size: 0.875rem;
  }
  
  /* ============================================
     23. FOOTER
     ============================================ */
  .component-light-7a28 {
    background: #212121;
    color: #e0e0e0;
    padding: var(--space-xxl) 0 var(--space-lg);
  }
  
  .center-b351 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
  }
  
  /* Footer variant: footer-content (subpages) */
  .gallery_top_5bc7 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
  }
  
  .accent_clean_a213 h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-md);
  }
  
  .accent_clean_a213 p {
    color: #b0b0b0;
    line-height: 1.7;
    margin-bottom: var(--space-md);
  }
  
  .badge_84ea {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .badge_84ea li {
    margin-bottom: var(--space-xs);
  }
  
  .badge_84ea a {
    color: #b0b0b0;
    text-decoration: none;
    transition: var(--transition-fast);
  }
  
  .badge_84ea a:hover {
    color: white;
  }
  
  .pagination-348f {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }
  
  .pagination-348f a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 6px 12px;
    border: 1px solid #424242;
    border-radius: 4px;
    transition: var(--transition-fast);
  }
  
  .pagination-348f a:hover {
    color: white;
    border-color: #666;
    background: #333;
  }
  
  .badge-white-0980 {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
  }
  
  .badge-white-0980 a {
    color: #808080;
    text-decoration: none;
    font-size: 0.875rem;
    transition: var(--transition-fast);
  }
  
  .badge-white-0980 a:hover {
    color: white;
  }
  
  .slider_south_9e3b > p {
    font-size: 0.875rem;
    color: #808080;
    margin: 0;
  }
  
  @media (max-width: 768px) {
    .center-b351,
    .gallery_top_5bc7 {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
  }
  
  .notification-outer-d98f h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-md);
  }
  
  .banner-copper-f107 p {
    color: #b0b0b0;
    line-height: 1.7;
    margin-bottom: var(--space-md);
  }
  
  .left_dfcf {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  
  .left_dfcf .search-fresh-e573 {
    color: #4caf50;
    font-size: 0.875rem;
  }
  
  .outline_893e {
    list-style: none;
    padding: 0;
  }
  
  .outline_893e li {
    margin-bottom: var(--space-xs);
  }
  
  .outline_893e a {
    color: #b0b0b0;
    text-decoration: none;
    transition: var(--transition-fast);
  }
  
  .outline_893e a:hover {
    color: white;
  }
  
  .thumbnail_iron_7820 {
    list-style: none;
    padding: 0;
  }
  
  .thumbnail_iron_7820 li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    color: #b0b0b0;
  }
  
  .thumbnail_iron_7820 a {
    color: #b0b0b0;
    text-decoration: none;
  }
  
  .thumbnail_iron_7820 a:hover {
    color: white;
  }
  
  .slider_south_9e3b {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-lg);
    border-top: 1px solid #424242;
    flex-wrap: wrap;
    gap: var(--space-md);
  }
  
  .main_c602 p {
    font-size: 0.875rem;
    color: #808080;
    margin-bottom: var(--space-xs);
  }
  
  .main_c602 a {
    color: #4caf50;
    text-decoration: none;
  }
  
  .solid-b589 {
    font-size: 0.75rem;
    color: #666666;
  }
  
  .highlight_c295 {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: #808080;
  }
  
  .highlight_c295 a {
    color: #808080;
    text-decoration: none;
    transition: var(--transition-fast);
  }
  
  .highlight_c295 a:hover {
    color: white;
  }
  
  /* Element selectors: survive CMS class obfuscation on deploy */
  footer > div > div:last-child > div:last-child a {
    color: #808080;
    text-decoration: none;
    transition: var(--transition-fast);
  }
  
  footer > div > div:last-child > div:last-child a:hover {
    color: white;
  }
  
  .element-f61c {
    color: var(--color-primary-light);
    text-decoration: none;
    font-weight: 600;
  }
  
  .element-f61c:hover {
    text-decoration: underline;
  }
  
  @media (max-width: 768px) {
    .slider_south_9e3b {
      flex-direction: column;
      text-align: center;
    }
  }
  
  /* ============================================
     24. RESPONSIVE UTILITIES
     ============================================ */
  @media (max-width: 1200px) {
    :root {
      font-size: 15px;
    }
  }
  
  @media (max-width: 968px) {
    :root {
      --space-xxl: 3rem;
    }
    
    .prev-8640 {
      font-size: 2rem;
    }
    
    .simple_0383 {
      font-size: 1.75rem;
    }
    
    /* Ensure all grids are single column */
    .texture-large-1850,
    .heading_solid_2b0a {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 768px) {
    :root {
      font-size: 14px;
      --space-xl: 2rem;
      --space-xxl: 2.5rem;
    }
    
    .preview_fd99,
    .light_a169,
    .element_gas_c312,
    .tag-fa80,
    .search_center_f151,
    .widget_steel_9686,
    .badge_6adc,
    .center-b351,
    .gallery_top_5bc7 {
      grid-template-columns: 1fr;
    }
    
    .title_82a2 {
      grid-template-columns: repeat(2, 1fr);
    }
    
    /* Mobile-specific adjustments */
    .stale-2923 {
      padding: var(--space-lg) 0;
    }
    
    .hero_bottom_501a li a {
      font-size: 0.875rem;
      padding: var(--space-xs);
    }
    
    .hero_bottom_501a li a:before {
      width: 28px;
      height: 28px;
      font-size: 0.875rem;
    }
    
    /* Improve mobile readability */
    p, li {
      font-size: 0.9375rem;
    }
    
    /* Better touch targets */
    .fresh_cb77 {
      min-height: 44px;
    }
    
    /* Optimize images for mobile */
    img {
      height: auto;
      max-width: 100%;
    }
  }
  
  @media (max-width: 480px) {
    :root {
      --space-lg: 1.5rem;
      --space-xl: 1.75rem;
      --space-xxl: 2rem;
    }
    
    .title_82a2 {
      grid-template-columns: 1fr;
    }
    
    .preview_b520,
    .plasma_4e1d,
    .message_fast_1034 {
      flex-direction: column;
      width: 100%;
    }
    
    .center-3fa1,
    .popup-over-95c0,
    .preview_b520 .fresh_cb77,
    .plasma_4e1d .fresh_cb77 {
      width: 100%;
    }
    
    /* Smaller font sizes for very small screens */
    .prev-8640 {
      font-size: 1.5rem;
      line-height: 1.3;
    }
    
    .simple_0383 {
      font-size: 1.375rem;
    }
    
    .caption_4091 {
      font-size: 2rem;
    }
    
    /* Reduce padding on small screens */
    .advanced-49c3,
    .carousel_over_11b8,
    .border_mini_0370,
    .north-0a22,
    .dirty_e534 {
      padding: var(--space-md);
    }
    
    /* Improve code readability on mobile */
    code,
    .shadow_out_31d9 {
      font-size: 0.625rem;
      word-break: break-all;
    }
    
    /* Better meta display */
    .rough_933b {
      gap: var(--space-xs);
    }
    
    .texture_advanced_0aba {
      font-size: 0.75rem;
    }
    
    /* Optimize score circles */
    .lower_981e {
      width: 100px;
      height: 100px;
      font-size: 2.5rem;
    }
    
    .soft_2a5c {
      width: 150px;
      height: 150px;
    }
    
    .primary_a9a4 {
      font-size: 3rem;
    }
  }
  
  /* ============================================
     25. PRINT STYLES
     ============================================ */
  @media print {
    .clean-e707,
    .stale_414f,
    .preview_b520,
    .menu_1baa,
    .panel-upper-a5b2,
    .component-light-7a28,
    .paragraph-4bf0 {
      display: none;
    }
    
    body {
      font-size: 12pt;
      line-height: 1.5;
    }
    
    .stale-2923 {
      page-break-inside: avoid;
    }
  }
  
  /* css-noise: 5244 */
  .phantom-card-f9 {
    padding: 0.3rem;
    font-size: 11px;
    line-height: 1.1;
  }