/* MyDayDay — Global Responsive Hardening 2026-07-03 */
html,
body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
iframe,
svg {
  max-width: 100%;
}

table {
  max-width: 100%;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #app,
  .app,
  .page,
  .body,
  .shell,
  main,
  .main,
  .main-col,
  .left-rail,
  .right-rail,
  .container,
  .content,
  .wrap,
  .panel,
  .card,
  .box,
  .module,
  .module-card,
  .module-launch-panel,
  .profile-bento,
  .photo-edit-card,
  .composer,
  .post,
  .vscroll {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .body,
  .shell,
  .layout,
  .grid,
  .g2,
  .g3,
  .g4,
  .cards,
  .module-grid,
  .profile-basics,
  .profile-data-grid,
  .ec-bar-row,
  .f2,
  .f3 {
    grid-template-columns: 1fr !important;
  }

  .topbar,
  .top-bar,
  .mdd-profile-topbar,
  header,
  nav {
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tabs,
  .tabbar,
  .tab-bar,
  .menu-tabs,
  .submenu,
  .toolbar,
  .chips,
  .filters,
  .profile-actions,
  .module-tabs {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  .tabs > *,
  .tabbar > *,
  .tab-bar > *,
  .menu-tabs > *,
  .submenu > *,
  .toolbar > *,
  .chips > *,
  .filters > *,
  .profile-actions > *,
  .module-tabs > * {
    flex: 0 0 auto !important;
  }

  button,
  .btn,
  .chip,
  input,
  select,
  textarea {
    max-width: 100% !important;
  }

  table,
  .table,
  .data-table,
  .list-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal,
  .mo .modal,
  .dialog,
  .popup,
  .sheet,
  .profile-data-box,
  .cover-model-panel {
    width: min(calc(100vw - 24px), 680px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .wizard-wrap {
    width: min(100%, 680px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ls {
    max-width: 88vw !important;
  }

  .rp {
    max-width: 100vw !important;
  }

  .mdd-safe-back-btn,
  .mdd-safe-back-promoted {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    left: 10px !important;
    z-index: 2147483000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    max-width: calc(100vw - 20px) !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(8,6,22,.92) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.38) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.mdd-particular-profile #app:not(.hidden),
  body.mdd-particular-profile #app:not(.hidden) .shell,
  body.mdd-particular-profile #app:not(.hidden) .left-rail,
  body.mdd-particular-profile #app:not(.hidden) .main-col,
  body.mdd-particular-profile #app:not(.hidden) .right-rail {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}