/*
 * Mumpic — mobile & tablet layer
 * Loaded after the main app stylesheet. Every rule is inside a max-width
 * media query, so desktop (1024px and wider) is untouched.
 *   Phones  : up to 767px
 *   Tablets : 768px – 1023px
 */

/* ───────────────────────── Phones + tablets ───────────────────────── */
@media (max-width: 1023.98px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* App-like touch behaviour: no grey flash, no double-tap zoom delay */
  a, button, [role="button"], input, select, textarea, label {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* iOS zooms the page when a focused field is under 16px — this was hitting
     the mobile-money number, card and login fields during checkout. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }

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

  /* Horizontal chip / tab strips: swipeable, no visible scrollbar */
  [class*="overflow-x-auto"],
  [class*="overflow-x-scroll"] {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  [class*="overflow-x-auto"]::-webkit-scrollbar,
  [class*="overflow-x-scroll"]::-webkit-scrollbar {
    display: none;
  }
  [class*="overflow-x-auto"] > button,
  [class*="overflow-x-auto"] > a {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Underlined tab bars (Creator Studio, channel, settings…): one swipeable row */
  main .flex.border-b:has(> button.border-b-2),
  main .flex.border-b:has(> a.border-b-2) {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  main .flex.border-b:has(> button.border-b-2)::-webkit-scrollbar,
  main .flex.border-b:has(> a.border-b-2)::-webkit-scrollbar {
    display: none;
  }
  main .flex.border-b > button.border-b-2,
  main .flex.border-b > a.border-b-2 {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Centered dialogs never taller than the visible screen */
  .fixed.inset-0.items-center > div:not(.absolute),
  .fixed.inset-0.items-start > div:not(.absolute) {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Toasts: keep inside the screen */
  .fixed.top-5.right-5 {
    top: calc(0.75rem + env(safe-area-inset-top));
    right: 0.75rem;
    left: 0.75rem;
    align-items: flex-end;
  }
}

/* ───────────────────────────── Phones ───────────────────────────── */
@media (max-width: 767.98px) {
  /* ---- Top bar: everything must fit on a 360px screen ---- */
  header.fixed.top-0 {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
    padding-top: env(safe-area-inset-top);
    height: calc(4rem + env(safe-area-inset-top));
  }
  header.fixed.top-0 > div > div {
    gap: 0.125rem !important;
    min-width: 0;
  }
  header.fixed.top-0 > div > div:first-child {
    flex-shrink: 1;
    overflow: hidden;
  }
  header.fixed.top-0 > div > div:last-child {
    flex-shrink: 0;
  }
  header.fixed.top-0 button,
  header.fixed.top-0 > div > div > a,
  header.fixed.top-0 .relative > button {
    padding: 0.4rem !important;
  }
  header.fixed.top-0 svg.lucide {
    width: 22px;
    height: 22px;
  }
  /* logo */
  header.fixed.top-0 > div > div:first-child > a {
    gap: 0.3rem !important;
    margin-left: 0.125rem;
  }
  header.fixed.top-0 > div > div:first-child > a > :first-child {
    height: 1.9rem !important;
    width: auto;
  }
  header.fixed.top-0 > div > div:first-child > a > span {
    font-size: 1rem !important;
  }
  /* Watch pages add a Back button — drop the wordmark so icons still fit */
  header.fixed.top-0 > div > div:first-child:has(> :nth-child(3)) > a > span {
    display: none;
  }
  /* avatar */
  header.fixed.top-0 > div > div:last-child img,
  header.fixed.top-0 > div > div:last-child [class*="rounded-full"][class*="w-8"],
  header.fixed.top-0 > div > div:last-child [class*="rounded-full"][class*="w-9"] {
    width: 2rem !important;
    height: 2rem !important;
  }
  /* Dropdowns from the header (notifications, account) fill the width */
  header.fixed.top-0 .absolute.right-0.top-12 {
    position: fixed !important;
    top: calc(4rem + env(safe-area-inset-top)) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    max-height: calc(100dvh - 4rem - 5.5rem - env(safe-area-inset-top)) !important;
    overflow-y: auto !important;
  }

  /* Push content below the taller header on notched phones */
  main.pt-16 {
    padding-top: calc(4rem + env(safe-area-inset-top)) !important;
  }

  /* ---- Bottom tab bar: clear the iPhone home indicator ---- */
  nav.fixed.bottom-0 {
    height: calc(4rem + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  nav.fixed.bottom-0 > a {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    margin: 0 0.125rem;
    border-radius: 0.875rem;
  }
  nav.fixed.bottom-0 > a > span {
    white-space: nowrap;
  }
  main.pb-20 {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
  }
  /* mini player sits above the tab bar */
  .fixed.bottom-20.right-4 {
    bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
    right: 0.75rem !important;
    left: 0.75rem;
    width: auto !important;
  }

  /* Side drawer: fill to the bottom of the screen on notched phones */
  nav.fixed.left-0.top-16 {
    top: calc(4rem + env(safe-area-inset-top)) !important;
    height: calc(100dvh - 4rem - env(safe-area-inset-top)) !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  /* ---- Checkout / unlock / payment popups: centred card on phones ---- */
  .fixed.inset-0.items-end {
    align-items: center !important;
    justify-content: center !important;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)) !important;
  }
  .fixed.inset-0.items-end > div:not(.absolute) {
    width: 100% !important;
    max-width: 28rem !important;
    margin: auto !important;
    border-radius: 1.25rem !important;
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: mumpic-pop-in 0.2s ease-out;
  }

  /* Bigger, easier pay buttons inside sheets and dialogs */
  .fixed.inset-0 button.w-full.bg-primary,
  .fixed.inset-0 button.w-full[class*="bg-primary"] {
    min-height: 3.25rem;
    font-size: 1rem !important;
  }

  /* ---- Movie / series page: full-width primary action ---- */
  main .flex.flex-wrap.items-center.gap-2\.5 > button.bg-primary:first-child,
  main .flex.flex-wrap.items-center.gap-2\.5 > a.bg-primary:first-child {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 3rem;
    font-size: 1rem;
    border-radius: 0.75rem;
  }
  main .flex.flex-wrap.items-center.gap-2\.5 > :not(:first-child) {
    min-height: 2.75rem;
  }

  /* Comfortable minimum tap size for small icon buttons in content */
  main button.p-1,
  main button.p-1\.5 {
    min-width: 2.25rem;
    min-height: 2.25rem;
  }

  /* Wide content that should scroll sideways instead of breaking layout */
  main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  /* Footer columns stack nicely */
  footer .grid.grid-cols-2 {
    gap: 1.5rem !important;
  }
}

/* Very narrow phones (320–359px): wordmark off, icons tighter */
@media (max-width: 359.98px) {
  header.fixed.top-0 > div > div:first-child > a > span {
    display: none;
  }
  nav.fixed.bottom-0 > a > span {
    font-size: 9px !important;
  }
}

/* ───────────────────────────── Tablets ───────────────────────────── */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Pinned sidebar becomes a slim icon rail so content gets the width */
  nav.fixed.left-0.top-16:not(.shadow-2xl) {
    width: 5.25rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: none;
  }
  nav.fixed.left-0.top-16:not(.shadow-2xl)::-webkit-scrollbar {
    display: none;
  }
  nav.fixed.left-0.top-16:not(.shadow-2xl) > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  nav.fixed.left-0.top-16:not(.shadow-2xl) > div > a {
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem !important;
    padding: 0.6rem 0.25rem !important;
    margin: 0 0.35rem !important;
    border-radius: 0.75rem;
    text-align: center;
  }
  nav.fixed.left-0.top-16:not(.shadow-2xl) > div > a > svg {
    width: 22px;
    height: 22px;
  }
  nav.fixed.left-0.top-16:not(.shadow-2xl) > div > a > span {
    font-size: 9px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.15;
    text-transform: none;
    flex: none !important;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  nav.fixed.left-0.top-16:not(.shadow-2xl) > div > a > span + span {
    display: none; /* "new" badges */
  }
  nav.fixed.left-0.top-16:not(.shadow-2xl) > hr {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
  }
  /* legal links don't fit in a rail — they remain in the page footer and drawer */
  nav.fixed.left-0.top-16:not(.shadow-2xl) > div:last-child:not(:first-child):not(:has(> a > svg)) {
    display: none;
  }
  main.md\:ml-64 {
    margin-left: 5.25rem !important;
  }

  /* Header: more room for search */
  header.fixed.top-0 > div > div.flex-1 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Bottom sheets on tablet: centred card, comfortable width */
  .fixed.inset-0.items-end > div:not(.absolute) {
    max-height: 90dvh;
  }
}

@keyframes mumpic-pop-in {
  from { transform: scale(0.96); opacity: 0.6; }
  to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fixed.inset-0.items-end > div:not(.absolute) { animation: none !important; }
}

/* ───────────────────────── Video player (watch page) ───────────────────────── */
@media (max-width: 1023.98px) {
  /* Never taller than the visible screen (phones in landscape, small tablets) */
  [class*="group/player"].aspect-video {
    max-height: calc(100dvh - 4.5rem - env(safe-area-inset-top));
    margin-left: auto;
    margin-right: auto;
  }
  /* Fullscreen: fill the whole device */
  [class*="group/player"]:fullscreen,
  [class*="group/player"]:-webkit-full-screen {
    max-height: none;
    border-radius: 0;
  }
  [class*="group/player"] video {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 767.98px) {
  /* Edge-to-edge player directly under the top bar, like a native app */
  main [class*="grid-area:player"] {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: -1rem;
  }
  main [class*="grid-area:player"] [class*="group/player"].aspect-video {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Control bar: everything fits on one row at 320–430px */
  [class*="group/player"] button[class*="min-w-[40px]"],
  [class*="group/player"] .flex.items-center > button.p-2 {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0.4rem !important;
  }
  [class*="group/player"] .flex.items-center > button svg {
    width: 20px;
    height: 20px;
  }
  [class*="group/player"] .flex.items-center.gap-1.mr-1 {
    margin-right: 0 !important;
    gap: 0 !important;
  }
  /* Phones use hardware volume keys; the slider only crowds out the time */
  [class*="group/player"] input[aria-label="Volume"] {
    display: none !important;
  }
  [class*="group/player"] span.tabular-nums {
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
    font-size: 11px !important;
    letter-spacing: -0.01em;
  }
  [class*="group/player"] .flex.items-center.gap-0\.5 > .flex-1 {
    overflow: hidden;
  }
}

/* Very narrow phones: drop the "next video" button so time stays readable */
@media (max-width: 359.98px) {
  [class*="group/player"] .flex-1 > button.p-2.shrink-0:not([aria-label]) {
    display: none;
  }
}

/* ───────── Popups (unlock, membership, checkout): hand cursor on everything clickable ───────── */
.fixed.inset-0 button:not(:disabled),
.fixed.inset-0 a[href],
.fixed.inset-0 [role="button"],
.fixed.inset-0 label:has(input[type="radio"]),
.fixed.inset-0 label:has(input[type="checkbox"]),
.fixed.inset-0 input[type="radio"],
.fixed.inset-0 input[type="checkbox"] {
  cursor: pointer;
}
.fixed.inset-0 button:disabled {
  cursor: not-allowed;
}

/* ───────────────── Watch page: YouTube-style mobile & tablet layout (v6) ───────────────── */
/* Description "Show more" works on every screen size */
.mp-w-cbtn { display: none; }
.mp-w-desc.mp-open .mp-w-desc-text { -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; }

@media (max-width: 1023.98px) {
  .mp-watch { gap: 12px !important; }

  /* One column, in YouTube order: title, views, channel, actions, description, comments */
  .mp-w-main { display: flex; flex-direction: column; }
  .mp-w-a, .mp-w-row, .mp-w-b { display: contents !important; }
  .mp-w-back { display: none !important; }

  .mp-w-title { order: 1; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700; margin: 0; }
  .mp-w-meta { order: 2; margin-top: 4px; font-size: 12px !important; gap: 6px !important; }

  .mp-w-channel { order: 3; margin-top: 14px; flex-wrap: nowrap !important; }
  .mp-w-channel-in { width: 100%; gap: 10px !important; min-width: 0; }
  .mp-w-avatar { width: 36px !important; height: 36px !important; flex-shrink: 0; }
  .mp-w-channel-in > div { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; }
  .mp-w-channel-in > div > a { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mp-w-channel-in > div > p { font-size: 12px !important; white-space: nowrap; flex-shrink: 0; }
  .mp-w-sub { margin-left: auto !important; flex-shrink: 0; padding: 8px 16px !important; }

  .mp-w-actions { order: 4; margin-top: 12px; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem; width: auto !important; }
  .mp-w-actions button { padding-top: 7px !important; padding-bottom: 7px !important; }

  .mp-w-desc { order: 5; padding-left: 0 !important; margin-top: 12px; }
  .mp-w-desc > div { border-radius: 12px; cursor: pointer; }

  /* Comments: a compact card that opens on tap */
  .mp-w-comments { order: 6; margin-top: 12px !important; position: relative; background: rgba(255,255,255,.06); border-radius: 12px; padding: 12px; }
  .mp-w-comments .mp-w-chead { margin-bottom: 10px !important; }
  .mp-w-comments .mp-w-chead h4 { font-size: 15px !important; }
  .mp-w-comments:not(.mp-open) { max-height: 132px; overflow: hidden; }
  .mp-w-comments:not(.mp-open) .mp-w-chead > div { display: none; }
  .mp-w-cbtn { position: absolute; inset: 0; z-index: 5; width: 100%; border: 0; cursor: pointer;
    background: linear-gradient(to bottom, transparent 40%, rgba(15,15,15,.92)); display: flex; align-items: flex-end;
    justify-content: center; padding-bottom: 10px; color: #fff; font: 700 12px/1 inherit; }
  .mp-w-comments.mp-open .mp-w-cbtn { display: none; }

  /* Up next: big thumbnails with the text underneath */
  .mp-w-aside { gap: 12px !important; }
  .mp-w-list { gap: 20px !important; }
  .mp-w-item { flex-direction: column; gap: 10px !important; }
  .mp-w-thumb { width: 100% !important; border-radius: 12px !important; }
  .mp-w-thumb > span:last-child { font-size: 12px !important; padding: 1px 5px !important; bottom: 6px !important; right: 6px !important; }
  .mp-w-info { display: block !important; padding-right: 8px; }
  .mp-w-info h4 { font-size: 15px !important; line-height: 1.3 !important; font-weight: 600; margin: 0 0 4px; }
  .mp-w-info p { display: inline; font-size: 12px !important; }
  .mp-w-info .mp-w-ch::after { content: " • "; }
}

/* Tablets: up next as a two-column grid */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .mp-w-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px !important; }
}

/* Phones: edge-to-edge thumbnails and a player that stays at the top while scrolling */
@media (max-width: 639.98px) {
  .mp-w-player { position: sticky; top: var(--mp-head, 64px); z-index: 30; background: #000; }
  .mp-w-thumb { margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem) !important; border-radius: 0 !important; }
  .mp-w-chips { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}

/* ═════════════════ v7: tidier phone layout — headings, forms, channels, popups ═════════════════ */
@media (max-width: 767.98px) {
  /* Watch page: channel name gets the full line; subscribers + Subscribe go underneath */
  .mp-w-channel-in { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "av nm nm" "av sb bt"; column-gap: 10px !important; row-gap: 2px; align-items: center; }
  .mp-w-channel-in > .mp-w-avatar { grid-area: av; width: 40px !important; height: 40px !important; align-self: start; }
  .mp-w-channel-in > div { display: contents !important; }
  .mp-w-channel-in > div > a { grid-area: nm; font-size: 15px !important; white-space: normal !important; overflow: visible !important;
    line-height: 1.25; max-width: none !important; }
  .mp-w-channel-in > div > p { grid-area: sb; font-size: 12px !important; white-space: nowrap; align-self: center; }
  .mp-w-channel-in > .mp-w-sub { grid-area: bt; margin: 0 !important; padding: 7px 16px !important; justify-self: end; }

  /* Channels page: compact rows */
  .mp-ch-card { border-radius: 14px !important; }
  .mp-ch-row { padding: 12px !important; gap: 12px !important; }
  .mp-ch-info { align-items: flex-start !important; gap: 12px !important; }
  .mp-ch-info img { width: 52px !important; height: 52px !important; border-width: 1px !important; }
  .mp-ch-info h3 { font-size: 16px !important; line-height: 1.25; }
  .mp-ch-info h3 + span { font-size: 9px !important; }
  .mp-ch-info p { font-size: 12px !important; margin-top: 2px !important; }
  .mp-ch-desc { -webkit-line-clamp: 1 !important; line-clamp: 1; margin-top: 4px !important; }
  .mp-ch-stats { margin-top: 6px !important; column-gap: 12px !important; font-size: 11px !important; }
  .mp-ch-stats > span:nth-child(3) { display: none !important; }
  .mp-ch-actions { width: 100%; }
  .mp-ch-actions > * { flex: 1 1 0 !important; padding: 8px 10px !important; font-size: 13px !important; min-height: 38px;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }

  /* Channel popup: a sheet from the bottom of the screen */
  .mp-chp-wrap { padding: 0 !important; align-items: flex-end !important; z-index: 95 !important; }
  .mp-chp { max-width: none !important; border-radius: 20px 20px 0 0 !important; max-height: 88dvh !important;
    border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom); animation: mp-sheet-up .22s ease-out; }
  .mp-chp-banner { height: 104px !important; }
  .mp-chp-body { padding: 0 16px 20px !important; margin-top: -36px !important; }
  .mp-chp-top { display: grid !important; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px !important;
    row-gap: 14px !important; align-items: end !important; margin-bottom: 14px !important; }
  .mp-chp-avatar { width: 72px !important; height: 72px !important; border-width: 3px !important; }
  .mp-chp-top > div:nth-child(2) { padding-bottom: 4px; min-width: 0; }
  .mp-chp-name { font-size: 19px !important; line-height: 1.2; flex-wrap: wrap; }
  .mp-chp-actions { grid-column: 1 / -1; display: flex !important; gap: 8px !important; }
  .mp-chp-actions > * { flex: 1 1 0; text-align: center; padding: 10px 12px !important; font-size: 14px !important; }
  .mp-chp-body > p { font-size: 13px !important; margin-bottom: 12px !important; }
  .mp-chp-stats { gap: 6px 14px !important; font-size: 12px !important; }

  /* Sign-in / sign-up / password pages: the form uses the full width */
  .mp-auth-page { padding: 20px 16px 28px !important; align-items: flex-start !important; }
  .mp-auth-page .lg\:hidden.mb-10, .mp-auth-page .lg\:hidden.mb-8, .mp-auth-page .mb-10 { margin-bottom: 20px !important; }
  .mp-auth-card { padding: 4px 0 0 !important; border: 0 !important; background: transparent !important;
    box-shadow: none !important; backdrop-filter: none !important; }
  .mp-auth-card .space-y-5 > * + *, .mp-auth-card .space-y-4 > * + * { margin-top: 14px !important; }
  .mp-auth-card .mb-7, .mp-auth-card .mb-6 { margin-bottom: 18px !important; }
  .mp-auth-row { gap: 8px !important; }
  .mp-auth-row label { gap: 8px !important; min-width: 0; }
  .mp-auth-row label > span, .mp-auth-row > a { font-size: 13px !important; white-space: nowrap; }

  /* Create your channel (annual fee) */
  .mp-cc-page { margin-top: 0 !important; padding: 12px !important; }
  .mp-cc { padding: 18px 14px !important; }
  .mp-cc > h2, .mp-cc > h1 { font-size: 22px !important; margin-bottom: 8px !important; }
  .mp-cc > p { font-size: 13px !important; margin-bottom: 16px !important; }
  .mp-cc-form { padding: 14px 12px !important; margin-bottom: 16px !important; }
  .mp-cc-form .text-4xl { font-size: 28px !important; line-height: 1.15 !important; white-space: nowrap; }
  .mp-cc-form input, .mp-cc-form textarea { font-size: 15px; }
  .mp-cc-info { padding: 14px 12px !important; }
  .mp-cc-info ul { padding-left: 16px !important; font-size: 13px !important; }
  .mp-cc-info ul > * + * { margin-top: 8px !important; }
}

@keyframes mp-sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Phones: one consistent type scale and less empty space on every page */
@media (max-width: 639.98px) {
  main .text-7xl, main .text-6xl, main .text-5xl { font-size: 2rem !important; line-height: 1.12 !important; }
  main .text-4xl { font-size: 1.75rem !important; line-height: 1.15 !important; }
  main .text-3xl { font-size: 1.5rem !important; line-height: 1.2 !important; }
  main h1.text-2xl, main h2.text-2xl { font-size: 1.375rem !important; line-height: 1.25 !important; }
  main p.text-xl, main p.text-lg { font-size: 1rem !important; line-height: 1.55 !important; }
  .mp-auth-page .text-3xl, .mp-auth-page .text-2xl { font-size: 1.5rem !important; }

  /* Cards and form boxes: trim oversized padding */
  main .p-12, main .p-10, main .p-8 { padding: 1rem !important; }
  main .p-7, main .p-6 { padding: 0.875rem !important; }
  main .px-10, main .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  main .py-16, main .py-14, main .py-12 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  main .mt-16, main .mt-12, main .mt-10 { margin-top: 1.25rem !important; }
  main .mb-12, main .mb-10 { margin-bottom: 1.5rem !important; }
  main .mb-8 { margin-bottom: 1.25rem !important; }
  main .gap-8 { gap: 1.25rem !important; }
  main form .space-y-6 > * + * { margin-top: 1rem !important; }
  /* Popups keep a little air but no wasted space */
  .fixed.inset-0 .p-8, .fixed.inset-0 .p-7 { padding: 1.125rem !important; }
}

/* Top bar on small phones: icon only, so the logo never gets cut off */
@media (max-width: 379.98px) {
  header.fixed.top-0 > div > div:first-child > a > span { display: none; }
}