@media (max-width:700px){
  .site-header,
  main,
  .sticky-action-bar,
  .modal,
  .section-block,
  .footer,
  .layout-shell,
  .container {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
    box-sizing:border-box;
  }
  @media (min-width:480px){
    .site-header,
    main,
    .sticky-action-bar,
    .modal,
    .section-block,
    .layout-shell,
    .container {
      padding-left: var(--gutter-mobile-wide);
      padding-right: var(--gutter-mobile-wide);
    }
  }
  .site-header { display:flex; align-items:center; gap:12px; }
  .site-header > * { flex-shrink:0; }
  .site-header .search-bar,
  .site-header form.search,
  .site-header input[type=search]{ flex:1 1 auto; min-width:0; }

  .media-grid,
  .media-grid--poster,
  .media-grid--list {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(var(--card-min-mobile),1fr));
    gap:var(--card-gap-mobile);
    align-content:start;
  }
  .media-grid > * { height:100%; }

  .view-toggle,
  .layout-toggle,
  .display-mode-toggle { display:flex; align-items:center; gap:8px; }
  .view-toggle button,
  .layout-toggle button,
  .display-mode-toggle button {
    width:44px; height:44px; padding:0;
    display:flex; align-items:center; justify-content:center;
    line-height:1; border-radius:8px;
  }

  .section-block + .section-block,
  .stacked-section + .stacked-section,
  main > section + section { margin-top:var(--section-spacing-mobile); }

  main h1, main h2, main h3, main p { margin-left:0; margin-right:0; }
  .hero, .dashboard-hero, .welcome-hero { padding-left:0; padding-right:0; }
  .btn-group, .filter-bar, .sort-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .container .container { padding-left:0; padding-right:0; }
  .align-row { display:flex; align-items:center; gap:12px; min-width:0; }
}
@media (min-width:701px){
  .container { max-width:1200px; margin:0 auto; }
}
@media (max-width:700px){
  /* Include actual header class names used */
  .header,
  .header-container {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
    box-sizing:border-box;
  }
  @media (min-width:480px){
    .header,
    .header-container {
      padding-left: var(--gutter-mobile-wide);
      padding-right: var(--gutter-mobile-wide);
    }
  }

  /* Normalize header internals */
  .header {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px;
  }
  .header-container {
    display:flex;
    flex:1;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0; /* avoid double padding */
  }
  .header-left,
  .header-right { display:flex; align-items:center; gap:12px; }

  /* Search grows; prevents overflow */
  .header-search { flex:1 1 auto; min-width:0; }

  /* Remove stray margin/padding from nested .container inside main container */
  .main-content .container { padding-left:0; padding-right:0; }

  /* Tighten giant internal card grid spacing on narrow screens */
  .media-grid.media-grid--grid,
  #main-grid.media-grid--grid {
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:12px;
  }
  /* Poster view variant (if switched) */
  .media-grid.media-grid--poster,
  #main-grid.media-grid--poster {
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:10px;
  }

  /* Force uniform card wrapper stretch */
  .media-card-wrapper { display:flex; }
  .media-card { display:flex; flex-direction:column; width:100%; }

  /* Prevent horizontal scroll from wide inline blocks */
  html, body { max-width:100%; overflow-x:hidden; }

  /* Compact tab header stack when wrapping */
  .tab-header {
    flex-wrap:wrap;
    align-items:flex-start;
    gap:12px;
  }

  /* Control groups wrapping cleanly */
  .tab-list {
    flex-wrap:wrap;
    row-gap:8px;
  }

  /* Legacy view buttons normalization (if still present) */
  .view-options .view-btn {
    min-width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center;
  }
}

/* Desktop safeguard: ensure container centers after changes */
@media (min-width:701px){
  .header-container, .main-content > .container {
    max-width:1200px;
    margin:0 auto;
  }
}