#us-mp-hint {
  display: none;
}

@media (max-width: 768px) {

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #user-col-right-panel {
    display: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #user-col-design {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    width: auto !important;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    z-index: 40;
    background: var(--white-color);
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #user-settings-card-wrap,
  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #user-settings-card {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #user-settings-card {
    background: var(--white-color) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #user-settings-card
    .design-card-top,
  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #userDeviceToolbar {
    display: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #user-profile-preview {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #userIframeContainer {
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    border-radius: inherit;
    overflow: hidden;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #userIframeContainer
    .iframe-dim,
  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #userIframeContainer
    .device-frame {
    display: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #userIframeScaler {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #userPreviewFrame {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-profile
    #us-mp-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 0.85rem;
    z-index: 58;
    padding: 0.55rem 0.55rem 0.55rem 0.8rem;
    border-radius: 0.8rem;
    background: rgba(var(--white-color-rgb), 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--primary-color-rgb), 0.35);
    box-shadow: 0 6px 20px rgba(var(--black-color-rgb), 0.12);
    color: var(--primary-color-deep);
    font-size: 0.78rem;
    font-weight: var(--fw-medium);
  }

  .us-mp-hint-icon {
    display: flex;
    color: var(--primary-color-dark);
  }

  .us-mp-hint-icon i,
  .us-mp-hint-icon svg {
    width: 15px;
    height: 15px;
  }

  #us-mp-hint > span:not(.us-mp-hint-icon) {
    flex: 1;
    min-width: 0;
  }

  .us-mp-hint-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--primary-color-deep);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .us-mp-hint-close i,
  .us-mp-hint-close svg {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 768px) {
  body[data-mobile-nav="user"].us-mp-editing #cc-mobile-nav {
    display: none !important;
  }

  body[data-mobile-nav="user"].us-mp-editing main {
    padding-bottom: 0 !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #right-user-settings-content {
    transform: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar {
    perspective: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar
    .sidebar-flip-inner {
    transform: none !important;
    transform-style: flat !important;
    will-change: auto !important;
    transition: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar
    .sidebar-face--back {
    transform: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar
    .sidebar-face--front {
    display: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar,
  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar
    .sidebar-face {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar
    .cs-back-inner {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar
    .cs-save-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    margin: 0 !important;
    padding: 0.65rem 1rem 0.35rem !important;
    background: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar
    .cs-save-bar:empty {
    display: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar
    .cs-face--back
    .ls-hero-headrow,
  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar
    .cs-face--back
    .card-icon {
    display: none !important;
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    .us-mp-close {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    margin: 0;
    padding: 0.35rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(15, 23, 42, 0.07);
  }

  body[data-mobile-nav="user"]
    main[data-view="user-settings"]
    #user-morph-layout.us-mp-editor
    #us-sidebar
    .cs-back-inner {
    padding-bottom: calc(8.6rem + env(safe-area-inset-bottom, 0px));
  }

  .us-mp-close-btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.9rem;
    border-radius: 0.9rem;
    background: var(--white-color);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-800);
    font-family: "Outfit", sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
  }

  .us-mp-close-btn:active {
    transform: scale(0.98);
  }

  body[data-mobile-nav="user"] #us-exp-modal,
  body[data-mobile-nav="user"] #us-edu-modal,
  body[data-mobile-nav="user"] #us-cert-modal,
  body[data-mobile-nav="user"] #us-proj-modal,
  body[data-mobile-nav="user"] #us-resume-modal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  body[data-mobile-nav="user"] #us-exp-modal .v-modal-box,
  body[data-mobile-nav="user"] #us-edu-modal .v-modal-box,
  body[data-mobile-nav="user"] #us-cert-modal .v-modal-box,
  body[data-mobile-nav="user"] #us-proj-modal .v-modal-box,
  body[data-mobile-nav="user"] #us-resume-modal .v-modal-box {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    animation: usMpPageIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body[data-mobile-nav="user"] #us-exp-modal .v-modal-header,
  body[data-mobile-nav="user"] #us-edu-modal .v-modal-header,
  body[data-mobile-nav="user"] #us-cert-modal .v-modal-header,
  body[data-mobile-nav="user"] #us-proj-modal .v-modal-header,
  body[data-mobile-nav="user"] #us-resume-modal .v-modal-header {
    flex: none;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
  }

  body[data-mobile-nav="user"] #us-exp-modal .v-modal-body,
  body[data-mobile-nav="user"] #us-edu-modal .v-modal-body,
  body[data-mobile-nav="user"] #us-cert-modal .v-modal-body,
  body[data-mobile-nav="user"] #us-proj-modal .v-modal-body,
  body[data-mobile-nav="user"] #us-resume-modal .v-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
  }

  body[data-mobile-nav="user"] #us-exp-modal .v-modal-footer,
  body[data-mobile-nav="user"] #us-edu-modal .v-modal-footer,
  body[data-mobile-nav="user"] #us-cert-modal .v-modal-footer,
  body[data-mobile-nav="user"] #us-proj-modal .v-modal-footer,
  body[data-mobile-nav="user"] #us-resume-modal .v-modal-footer {
    flex: none;
    padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  }

  body[data-mobile-nav="user"] #us-exp-modal input,
  body[data-mobile-nav="user"] #us-exp-modal textarea,
  body[data-mobile-nav="user"] #us-edu-modal input,
  body[data-mobile-nav="user"] #us-edu-modal textarea,
  body[data-mobile-nav="user"] #us-cert-modal input,
  body[data-mobile-nav="user"] #us-cert-modal textarea,
  body[data-mobile-nav="user"] #us-proj-modal input,
  body[data-mobile-nav="user"] #us-proj-modal textarea,
  body[data-mobile-nav="user"] #us-resume-modal input,
  body[data-mobile-nav="user"] #us-resume-modal textarea {
    font-size: 16px;
  }

  @keyframes usMpPageIn {
    from {
      opacity: 0;
      transform: translateY(26px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}