/* Human Studio Mobile V4 FIX
   Only active on small screens. Desktop layout is intentionally untouched. */
@media (max-width: 768px) {
  :root {
    --hsm-bg: #f8f3eb;
    --hsm-card: rgba(255,255,255,.88);
    --hsm-text: #3f2c22;
    --hsm-muted: #8a7a70;
    --hsm-line: rgba(93, 62, 42, .18);
    --hsm-brand: #a96f45;
    --hsm-brand-dark: #7a4c32;
    --hsm-shadow: 0 16px 42px rgba(80, 48, 28, .12);
    --hsm-top: 64px;
    --hsm-bottom: 72px;
  }

  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: var(--hsm-bg) !important;
  }

  body.hs-v4-ready {
    padding-top: calc(var(--hsm-top) + 54px) !important;
    padding-bottom: calc(var(--hsm-bottom) + env(safe-area-inset-bottom, 0px)) !important;
    color: var(--hsm-text) !important;
  }

  body.hs-v4-ready * {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
  }

  body.hs-v4-ready .hs-mobile-rail,
  body.hs-v4-ready #hs-mobile-rail,
  body.hs-v4-ready .hsm-left-rail,
  body.hs-v4-ready [data-hsm-left-rail],
  body.hs-v4-ready .mobile-left-rail {
    display: none !important;
  }

  .hsm-v4-topbar {
    position: fixed !important;
    z-index: 99970 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: calc(var(--hsm-top) + env(safe-area-inset-top, 0px)) !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(248, 243, 235, .96) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(90, 59, 39, .10) !important;
  }

  .hsm-v4-title {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .hsm-v4-title strong {
    font-size: 18px !important;
    line-height: 1.05 !important;
    letter-spacing: .04em !important;
    color: var(--hsm-text) !important;
    font-weight: 900 !important;
  }

  .hsm-v4-title span {
    font-size: 11px !important;
    color: var(--hsm-muted) !important;
    line-height: 1 !important;
  }

  .hsm-v4-account-btn {
    border: 1px solid rgba(133, 86, 54, .25) !important;
    background: rgba(255,255,255,.78) !important;
    color: var(--hsm-text) !important;
    border-radius: 999px !important;
    height: 38px !important;
    min-width: 82px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    box-shadow: 0 10px 28px rgba(83, 52, 31, .10) !important;
  }

  .hsm-v4-tabs {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(var(--hsm-top) + env(safe-area-inset-top, 0px) + 6px) !important;
    z-index: 99960 !important;
    height: 46px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 5px !important;
    border: 1px solid rgba(117, 78, 53, .16) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.78) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 12px 32px rgba(79, 50, 31, .08) !important;
  }

  .hsm-v4-tab {
    height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #7e6e63 !important;
    font-size: 14px !important;
    line-height: 34px !important;
    font-weight: 850 !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }

  .hsm-v4-tab.is-active {
    background: var(--hsm-brand) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(169, 111, 69, .22) !important;
  }

  .hsm-v4-bottomnav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99970 !important;
    height: calc(var(--hsm-bottom) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255,255,255,.94) !important;
    border-top: 1px solid rgba(90, 59, 39, .12) !important;
    box-shadow: 0 -16px 36px rgba(80, 48, 28, .10) !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }

  .hsm-v4-navitem {
    border: 0 !important;
    background: transparent !important;
    color: #7c6d63 !important;
    border-radius: 16px !important;
    min-width: 0 !important;
    padding: 4px 2px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .hsm-v4-navitem .ico {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .hsm-v4-navitem.is-active {
    color: var(--hsm-brand-dark) !important;
    background: rgba(169, 111, 69, .10) !important;
  }

  body.hs-v4-ready > :not(.hsm-v4-topbar):not(.hsm-v4-tabs):not(.hsm-v4-bottomnav):not(.hsm-v4-drawer-mask):not(.hsm-v4-browser-mask):not(script):not(style):not(link) {
    max-width: 100vw !important;
  }

  /* Main content becomes clean, centered and compact on mobile */
  body.hs-v4-ready main,
  body.hs-v4-ready .main,
  body.hs-v4-ready .container,
  body.hs-v4-ready .content,
  body.hs-v4-ready .app,
  body.hs-v4-ready .workspace,
  body.hs-v4-ready .page,
  body.hs-v4-ready #app {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.hs-v4-ready [data-hsm-hidden="1"] {
    display: none !important;
  }

  body.hs-v4-ready .hsm-v4-drawer-body [data-hsm-hidden="1"] {
    display: block !important;
  }

  body.hs-v4-ready .hsm-v4-cardish,
  body.hs-v4-ready section,
  body.hs-v4-ready article,
  body.hs-v4-ready .card,
  body.hs-v4-ready .panel,
  body.hs-v4-ready .box,
  body.hs-v4-ready .upload-card,
  body.hs-v4-ready .result-card {
    border-radius: 22px !important;
  }

  /* Avoid giant mobile fields */
  body.hs-v4-ready textarea {
    min-height: 88px !important;
    max-height: 160px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    border-radius: 18px !important;
  }

  body.hs-v4-ready input,
  body.hs-v4-ready select,
  body.hs-v4-ready button {
    min-height: 38px;
    font-size: 14px;
  }

  body.hs-v4-ready button,
  body.hs-v4-ready .btn,
  body.hs-v4-ready [role="button"] {
    border-radius: 16px !important;
  }

  body.hs-v4-ready img,
  body.hs-v4-ready video,
  body.hs-v4-ready canvas {
    max-width: 100% !important;
  }

  body.hs-v4-ready .preview,
  body.hs-v4-ready .upload-preview,
  body.hs-v4-ready .image-preview,
  body.hs-v4-ready .video-preview,
  body.hs-v4-ready .dropzone,
  body.hs-v4-ready .drop-zone,
  body.hs-v4-ready [class*="preview"],
  body.hs-v4-ready [class*="Preview"],
  body.hs-v4-ready [class*="drop"],
  body.hs-v4-ready [class*="Drop"] {
    max-height: 360px !important;
  }

  body.hs-v4-ready .upload-area,
  body.hs-v4-ready [class*="upload"],
  body.hs-v4-ready [class*="Upload"] {
    max-width: 100% !important;
  }

  body.hs-v4-ready .hsm-v4-primary-action {
    position: sticky !important;
    bottom: calc(var(--hsm-bottom) + 10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 50 !important;
  }

  .hsm-v4-drawer-mask {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99990 !important;
    background: rgba(25, 18, 14, .36) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
  }

  .hsm-v4-drawer-mask.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .hsm-v4-drawer {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    max-height: min(78vh, 680px) !important;
    overflow: hidden !important;
    background: #fffaf3 !important;
    border-radius: 26px !important;
    border: 1px solid rgba(114, 74, 49, .16) !important;
    box-shadow: 0 24px 70px rgba(52, 34, 23, .28) !important;
    transform: translateY(110%) !important;
    transition: transform .24s ease !important;
  }

  .hsm-v4-drawer-mask.is-open .hsm-v4-drawer {
    transform: translateY(0) !important;
  }

  .hsm-v4-drawer-head {
    height: 54px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(114, 74, 49, .12) !important;
  }

  .hsm-v4-drawer-head strong {
    font-size: 17px !important;
    color: var(--hsm-text) !important;
    font-weight: 900 !important;
  }

  .hsm-v4-drawer-close {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(114, 74, 49, .15) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.78) !important;
    color: var(--hsm-text) !important;
    font-size: 18px !important;
    line-height: 30px !important;
  }

  .hsm-v4-drawer-body {
    padding: 14px !important;
    overflow-y: auto !important;
    max-height: calc(min(78vh, 680px) - 54px) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hsm-v4-drawer-body > * {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hsm-v4-empty {
    padding: 26px 16px !important;
    text-align: center !important;
    color: var(--hsm-muted) !important;
    border: 1px dashed rgba(114, 74, 49, .20) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.58) !important;
    font-weight: 700 !important;
  }

  .hsm-v4-browser-mask {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    background: #050505 !important;
    color: #111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px 20px !important;
  }

  .hsm-v4-browser-card {
    width: min(92vw, 420px) !important;
    border-radius: 28px !important;
    background: #fff !important;
    padding: 26px 22px !important;
    text-align: center !important;
    box-shadow: 0 20px 80px rgba(0,0,0,.35) !important;
  }

  .hsm-v4-browser-logo {
    color: #fff !important;
    position: absolute !important;
    top: 14vh !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 950 !important;
    letter-spacing: .06em !important;
  }

  .hsm-v4-browser-card h2 {
    margin: 4px 0 14px !important;
    font-size: 22px !important;
    color: #0b0b0b !important;
    font-weight: 950 !important;
  }

  .hsm-v4-browser-card p {
    margin: 10px 0 !important;
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .hsm-v4-copy-btn,
  .hsm-v4-continue-btn {
    width: 100% !important;
    height: 48px !important;
    margin-top: 12px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  .hsm-v4-copy-btn {
    background: #000 !important;
    color: #fff !important;
    border: 0 !important;
  }

  .hsm-v4-continue-btn {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #e6e6e6 !important;
  }

  .hsm-v4-save-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    margin: 8px 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(122, 76, 50, .22) !important;
    background: rgba(255,255,255,.92) !important;
    color: var(--hsm-brand-dark) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 22px rgba(90, 55, 31, .10) !important;
  }

  .hsm-v4-image-viewer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100001 !important;
    background: rgba(0,0,0,.92) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
  }

  .hsm-v4-image-viewer.is-open {
    display: flex !important;
  }

  .hsm-v4-image-viewer img {
    max-width: 100% !important;
    max-height: 72vh !important;
    object-fit: contain !important;
    border-radius: 14px !important;
  }

  .hsm-v4-image-tip {
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    color: #fff !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .hsm-v4-image-close {
    position: absolute !important;
    right: 14px !important;
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-size: 24px !important;
  }
}