/* Midx Studio unified visual system - v110
   Visual-only layer. Behaviour, state classes, routes, handlers and API flow stay untouched. */
:root {
  --studio-bg: #020507;
  --studio-bg-soft: #050a10;
  --studio-surface: rgba(255, 255, 255, 0.055);
  --studio-surface-strong: rgba(255, 255, 255, 0.082);
  --studio-line: rgba(146, 214, 255, 0.13);
  --studio-line-strong: rgba(164, 224, 255, 0.22);
  --studio-text: #f7fbff;
  --studio-muted: rgba(220, 242, 255, 0.66);
  --studio-blue: #0099ff;
  --studio-blue-soft: #7ee0ff;
  --studio-radius-sm: 14px;
  --studio-radius-md: 22px;
  --studio-radius-lg: 34px;
  --studio-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  --studio-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  background: var(--studio-bg);
}

body.home-page,
body.upload-page,
body.account-page,
body.info-page,
body.legal-page,
body.admin-page,
body.auth-page {
  background-color: var(--studio-bg) !important;
  color: var(--studio-text);
  text-rendering: optimizeLegibility;
}

body.home-page::before,
body.upload-page::before,
body.account-page::before,
body.info-page::before,
body.legal-page::before,
body.admin-page::before,
body.auth-page::before {
  pointer-events: none;
}

::selection {
  background: rgba(0, 153, 255, 0.34);
  color: #fff;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--studio-blue-soft) !important;
  outline-offset: 3px !important;
}

:where(a, button) {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared desktop app chrome */
@media (min-width: 761px) {
  body.home-page .nav,
  body.upload-page .nav,
  body.account-page .top,
  body.info-page .top {
    border-color: var(--studio-line) !important;
    background:
      linear-gradient(180deg, rgba(8, 14, 22, 0.92), rgba(3, 8, 13, 0.74)) !important;
    box-shadow:
      0 18px 64px rgba(0, 0, 0, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  }

  body.home-page .navlinks a,
  body.upload-page .navlinks a,
  body.account-page .navlinks a,
  body.info-page .navlinks a,
  body.home-page .account-trigger,
  body.upload-page .account-trigger {
    transition:
      background-color 180ms var(--studio-ease),
      border-color 180ms var(--studio-ease),
      color 180ms var(--studio-ease),
      transform 180ms var(--studio-ease) !important;
  }

  body.home-page .navlinks a:hover,
  body.upload-page .navlinks a:hover,
  body.account-page .navlinks a:hover,
  body.info-page .navlinks a:hover,
  body.home-page .account-trigger:hover,
  body.upload-page .account-trigger:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: var(--studio-line-strong) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
  }
}

/* Home: preserve the asymmetric dashboard, improve surface hierarchy. */
@media (min-width: 761px) {
  body.home-page .hero {
    border-color: rgba(146, 214, 255, 0.14) !important;
    background:
      radial-gradient(circle at 86% 18%, rgba(0, 153, 255, 0.10), transparent 32%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.018)) !important;
    box-shadow: var(--studio-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  }

  body.home-page .account-panel {
    border-color: rgba(146, 214, 255, 0.15) !important;
    background:
      radial-gradient(circle at 76% 10%, rgba(0, 153, 255, 0.12), transparent 34%),
      linear-gradient(180deg, rgba(18, 32, 48, 0.96), rgba(9, 17, 27, 0.98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  body.home-page .desktop-upload-card {
    border-color: rgba(255, 255, 255, 0.82) !important;
    background: linear-gradient(160deg, #fff 0%, #f3f9ff 52%, #dcefff 100%) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), inset 0 1px 0 #fff !important;
    transition: transform 220ms var(--studio-ease), box-shadow 220ms var(--studio-ease) !important;
  }

  body.home-page .desktop-upload-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 32px 76px rgba(0, 0, 0, 0.36), inset 0 1px 0 #fff !important;
  }

  body.home-page .desktop-upload-card b {
    letter-spacing: -0.07em !important;
  }

  body.home-page .panel-action,
  body.home-page .hero .actions .btn {
    transition: transform 180ms var(--studio-ease), box-shadow 180ms var(--studio-ease) !important;
  }

  body.home-page .panel-action:hover,
  body.home-page .hero .actions .btn:hover {
    transform: translateY(-2px) !important;
  }
}

/* Upload: retain the proven square/state invariants and refine only framing. */
@media (min-width: 761px) {
  body.upload-page .bg {
    background:
      radial-gradient(circle at 50% 84%, rgba(0, 86, 190, 0.20), transparent 42%),
      radial-gradient(circle at 82% 0%, rgba(0, 153, 255, 0.11), transparent 30%),
      linear-gradient(180deg, #020507, #040a11 58%, #020507) !important;
  }

  body.upload-page:is(.checking-account, .is-guest, .is-authed):not(.video-picked) #dropZone {
    border-color: rgba(255, 255, 255, 0.84) !important;
    background: linear-gradient(155deg, #fff 0%, #f5faff 56%, #dcefff 100%) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34), inset 0 1px 0 #fff !important;
  }

  body.upload-page:is(.checking-account, .is-guest, .is-authed):not(.video-picked) #dropZone h2 {
    letter-spacing: -0.075em !important;
  }

  body.upload-page.is-guest:not(.video-picked) #guestLock,
  body.upload-page.is-guest:not(.video-picked) #guestLock[style] {
    border-color: rgba(146, 214, 255, 0.15) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.036)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 18px 54px rgba(0, 0, 0, 0.18) !important;
  }

  body.upload-page.video-picked .panel {
    border-color: var(--studio-line) !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.03)) !important;
    box-shadow: var(--studio-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  }
}

/* Account: use the viewport like a real desktop profile surface. */
@media (min-width: 761px) {
  body.account-page .screen {
    width: min(860px, 100%) !important;
  }

  body.account-page .profile-card {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 500px !important;
    padding: 18px !important;
    border-radius: 38px !important;
    border-color: var(--studio-line) !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.028)) !important;
    box-shadow: var(--studio-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  body.account-page .banner {
    height: 190px !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 78% 24%, rgba(0, 153, 255, 0.72), transparent 29%),
      radial-gradient(circle at 19% 10%, rgba(126, 224, 255, 0.22), transparent 24%),
      linear-gradient(135deg, #0a2b4c, #003e7a 48%, #07101a) !important;
  }

  body.account-page .avatar-wrap {
    margin-top: -62px !important;
    margin-left: 24px !important;
  }

  body.account-page .avatar {
    width: 112px !important;
    height: 112px !important;
    border-radius: 30px !important;
    border-width: 7px !important;
  }

  body.account-page .identity {
    margin: 12px 24px 0 !important;
  }

  body.account-page .identity h1 {
    font-size: clamp(38px, 4vw, 52px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.065em !important;
  }

  body.account-page .bio,
  body.account-page .stats,
  body.account-page .actions {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }

  body.account-page .stats {
    gap: 10px !important;
  }

  body.account-page .stat {
    min-height: 86px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.052) !important;
    border-color: rgba(146, 214, 255, 0.105) !important;
  }

  body.account-page .stat strong {
    font-size: 30px !important;
  }

  body.account-page .actions {
    gap: 10px !important;
  }

  body.account-page .app-btn {
    min-height: 50px !important;
    height: 50px !important;
  }
}

/* Info: three useful surfaces instead of a small island. */
@media (min-width: 761px) {
  body.info-page .hero,
  body.info-page .cards {
    width: min(960px, 100%) !important;
  }

  body.info-page .hero {
    padding: 22px 0 26px !important;
  }

  body.info-page .hero h1 {
    font-size: clamp(54px, 5.5vw, 76px) !important;
    max-width: 11ch !important;
    letter-spacing: -0.07em !important;
  }

  body.info-page .cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.info-page .card {
    min-height: 318px !important;
    padding: 26px !important;
    border-radius: 30px !important;
    border-color: var(--studio-line) !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.028)) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.info-page .card strong {
    font-size: 28px !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
  }

  body.info-page .card p {
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: var(--studio-muted) !important;
  }

  body.info-page .card .app-btn {
    margin-top: auto !important;
    width: 100% !important;
  }
}

/* Legal: match the app shell while keeping long-form reading comfortable. */
@media (min-width: 761px) {
  body.legal-page main {
    width: min(1040px, calc(100% - 48px)) !important;
    padding: 0 0 96px !important;
  }

  body.legal-page .top {
    min-height: 70px !important;
    padding: 0 18px !important;
    border: 1px solid var(--studio-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 26px 26px !important;
    background: linear-gradient(180deg, rgba(8, 14, 22, 0.92), rgba(3, 8, 13, 0.74)) !important;
    box-shadow: 0 18px 64px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  }

  body.legal-page h1,
  body.legal-page > main > h1 {
    max-width: 12ch !important;
    margin: 62px 0 18px !important;
    font-size: clamp(58px, 6.2vw, 84px) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.072em !important;
  }

  body.legal-page .lead {
    max-width: 760px !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    color: var(--studio-muted) !important;
  }

  body.legal-page .small {
    margin: 16px 0 34px !important;
    color: rgba(220, 242, 255, 0.48) !important;
  }

  body.legal-page .card {
    margin: 14px 0 !important;
    padding: 28px 30px !important;
    border-radius: 28px !important;
    border-color: var(--studio-line) !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  }

  body.legal-page .card h2 {
    margin-bottom: 12px !important;
    font-size: 25px !important;
    letter-spacing: -0.045em !important;
  }

  body.legal-page .card :where(p, li) {
    color: rgba(228, 244, 255, 0.70) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  body.legal-page .footer {
    color: rgba(220, 242, 255, 0.56) !important;
  }
}

/* Admin and OAuth status: same materials, no behavioural changes. */
@media (min-width: 761px) {
  body.admin-page .nav {
    min-height: 70px !important;
    padding: 0 18px !important;
    border: 1px solid var(--studio-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 26px 26px !important;
    background: linear-gradient(180deg, rgba(8, 14, 22, 0.92), rgba(3, 8, 13, 0.74)) !important;
    box-shadow: 0 18px 64px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  }

  body.admin-page .login-card,
  body.admin-page .panel,
  body.admin-page .stat {
    border-color: var(--studio-line) !important;
  }
}

body.auth-page .card {
  border-color: var(--studio-line) !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)) !important;
  box-shadow: var(--studio-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

/* Mobile app and browser gate polish. Layout/branching remains owned by existing rules. */
@media (max-width: 760px) {
  body.home-page,
  body.upload-page,
  body.account-page,
  body.info-page,
  body.legal-page {
    background: #080c11 !important;
  }

  body.home-page .top,
  body.upload-page .top,
  body.account-page .top,
  body.info-page .top {
    border-color: rgba(146, 214, 255, 0.12) !important;
    background: rgba(7, 13, 20, 0.88) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  }

  .mobile-tabs a {
    transition: background-color 160ms var(--studio-ease), color 160ms var(--studio-ease) !important;
  }

  .mobile-tabs a.active {
    border-color: rgba(146, 214, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  }

  body.midx-browser-gated #midxInstallGate {
    background:
      radial-gradient(circle at 50% -8%, rgba(0, 153, 255, 0.25), transparent 34%),
      linear-gradient(180deg, #020507, #07101a 56%, #020507) !important;
  }

  .midx-install-native-btn,
  .midx-install-desktop {
    border-radius: 18px !important;
  }

  body.legal-page main {
    width: min(100% - 28px, 680px) !important;
  }

  body.legal-page .card {
    border-radius: 24px !important;
    padding: 20px !important;
  }
}


/* v108 feedback pass: navy atmosphere, clean panel edges, stable upload auth check. */
@media (min-width: 761px) {
  html {
    background: #06131f !important;
  }

  body.home-page,
  body.upload-page,
  body.account-page,
  body.info-page,
  body.legal-page,
  body.admin-page,
  body.auth-page {
    background: #06131f !important;
  }

  body.home-page::before,
  body.upload-page::before,
  body.account-page::before,
  body.info-page::before,
  body.legal-page::before,
  body.admin-page::before,
  body.auth-page::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
    opacity: 1 !important;
    background:
      radial-gradient(ellipse 76% 62% at 2% -8%, rgba(0, 153, 255, 0.22), transparent 62%),
      radial-gradient(ellipse 58% 48% at 102% 4%, rgba(111, 205, 255, 0.10), transparent 64%),
      radial-gradient(ellipse 68% 54% at 52% 112%, rgba(0, 82, 148, 0.12), transparent 70%),
      linear-gradient(145deg, #081a2a 0%, #06131f 46%, #091721 100%) !important;
  }

  body.home-page .bg,
  body.upload-page .bg {
    opacity: 0.44 !important;
    background:
      radial-gradient(circle at 14% 18%, rgba(0, 153, 255, 0.16), transparent 34%),
      radial-gradient(circle at 84% 10%, rgba(126, 224, 255, 0.075), transparent 31%) !important;
  }

  body.home-page .bg::before,
  body.upload-page .bg::before {
    opacity: 0.38 !important;
    filter: blur(18px) !important;
  }

  body.home-page .bg::after,
  body.upload-page .bg::after {
    opacity: 0.035 !important;
  }

  body.home-page .nav,
  body.upload-page .nav,
  body.account-page .top,
  body.info-page .top,
  body.legal-page .top,
  body.admin-page .nav {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  body.upload-page.checking-account #accountPill,
  body.upload-page.checking-account #guestLock {
    display: none !important;
  }

  body.upload-page.checking-account #fileInput {
    pointer-events: none !important;
  }

  body.upload-page:not(.video-picked) {
    --upload-idle-square: min(500px, calc(100dvh - 250px), calc(100vw - 96px));
  }

  body.upload-page:is(.checking-account, .is-guest, .is-authed):not(.video-picked) .workspace,
  body.upload-page:is(.checking-account, .is-guest, .is-authed):not(.video-picked) .workspace:not(.has-video) {
    width: var(--upload-idle-square) !important;
    min-width: 0 !important;
    max-width: var(--upload-idle-square) !important;
  }

  body.upload-page:is(.checking-account, .is-guest, .is-authed):not(.video-picked) #dropZone {
    width: 100% !important;
    height: var(--upload-idle-square) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
  }

  body.info-page .hero .lead {
    max-width: 38ch !important;
    color: rgba(224, 242, 255, 0.72) !important;
  }

  body.info-page .card {
    min-height: 292px !important;
  }

  body.info-page .card p {
    max-width: 29ch !important;
    color: rgba(224, 242, 255, 0.70) !important;
    text-wrap: pretty;
  }
}

/* v109 regression repair: one surface, normal-flow upload, authored depth plate. */
@media (min-width: 761px) {
  html {
    background: #06111b !important;
  }

  body.home-page,
  body.upload-page,
  body.account-page,
  body.info-page,
  body.legal-page,
  body.admin-page,
  body.auth-page {
    position: relative !important;
    isolation: isolate;
    background: #06111b !important;
  }

  body.home-page::before,
  body.upload-page::before,
  body.account-page::before,
  body.info-page::before,
  body.legal-page::before,
  body.admin-page::before,
  body.auth-page::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0.82 !important;
    background: none !important;
  }

  body.home-page .bg,
  body.upload-page .bg {
    display: none !important;
  }

  /* The section is layout only. The inner window is the single visible Home surface. */
  body.home-page .hero {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body.home-page .hero::before,
  body.home-page .hero::after,
  body.home-page .hero-inner::before,
  body.home-page .hero-inner::after {
    content: none !important;
    display: none !important;
  }

  body.home-page .hero-inner {
    border: 1px solid rgba(146, 214, 255, 0.18) !important;
    background: linear-gradient(145deg, rgba(8, 18, 29, 0.93), rgba(5, 11, 18, 0.84)) !important;
    box-shadow: 0 28px 84px rgba(0, 4, 10, 0.42) !important;
  }

  /* Account dropdown must remain above the workspace and own its hit area. */
  body.home-page .nav,
  body.upload-page .nav {
    position: relative !important;
    z-index: 110 !important;
    overflow: visible !important;
  }

  .account-menu {
    position: relative !important;
    z-index: 120 !important;
  }

  .account-menu .dropdown {
    z-index: 121 !important;
    pointer-events: none !important;
  }

  .account-menu.open .dropdown,
  .account-menu:hover .dropdown,
  .account-menu:focus-within .dropdown {
    pointer-events: auto !important;
  }
}


@media (min-width: 761px) {
  body.home-page #desktopProfileName {
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* Midx Studio interactive redesign - v111 */
@media (min-width: 761px) {
  html,
  body.home-page,
  body.upload-page,
  body.account-page,
  body.info-page,
  body.legal-page,
  body.admin-page,
  body.auth-page {
    background: #06111b !important;
  }

  body.home-page::before,
  body.upload-page::before,
  body.account-page::before,
  body.info-page::before,
  body.legal-page::before,
  body.admin-page::before,
  body.auth-page::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  body.home-page .bg,
  body.upload-page .bg,
  body.admin-page .bg {
    display: none !important;
  }

  .midx-ambient-canvas {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    background: radial-gradient(circle at 72% 24%, rgba(0,153,255,.12), transparent 34%), linear-gradient(145deg,#071522,#030a11 58%,#06111b) !important;
  }

  body.home-page > :not(.midx-ambient-canvas),
  body.upload-page > :not(.midx-ambient-canvas),
  body.account-page > :not(.midx-ambient-canvas),
  body.info-page > :not(.midx-ambient-canvas),
  body.legal-page > :not(.midx-ambient-canvas),
  body.admin-page > :not(.midx-ambient-canvas),
  body.auth-page > :not(.midx-ambient-canvas) {
    position: relative;
    z-index: 1;
  }

  /* Detached desktop modules replace the full-width eyebrow bar. */
  body.home-page .nav,
  body.upload-page .nav,
  body.account-page .top,
  body.info-page .top,
  body.legal-page .top,
  body.admin-page .nav {
    height: 72px !important;
    min-height: 72px !important;
    padding: 9px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
  }

  body.account-page .top,
  body.info-page .top {
    width: 100% !important;
    margin: 0 !important;
  }

  body.home-page .nav > .brand,
  body.upload-page .nav > .brand,
  body.account-page .top > .brand,
  body.info-page .top > .brand,
  body.legal-page .top > .brand,
  body.admin-page .nav > .brand,
  body.home-page .navlinks,
  body.upload-page .navlinks,
  body.account-page .navlinks,
  body.info-page .navlinks,
  body.home-page .nav-login,
  body.home-page .account-trigger,
  body.upload-page .account-trigger,
  body.account-page .top > .pill,
  body.info-page .top > .pill,
  body.legal-page .top > .link {
    box-sizing: border-box !important;
    height: 54px !important;
    min-height: 54px !important;
    border: 1px solid rgba(157,220,255,.16) !important;
    border-radius: 19px !important;
    background: linear-gradient(145deg,rgba(12,26,40,.80),rgba(4,10,17,.66)) !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
    backdrop-filter: blur(20px) saturate(135%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 16px 44px rgba(0,5,12,.18) !important;
  }

  body.home-page .nav > .brand,
  body.upload-page .nav > .brand,
  body.account-page .top > .brand,
  body.info-page .top > .brand,
  body.legal-page .top > .brand,
  body.admin-page .nav > .brand {
    padding: 0 16px 0 12px !important;
  }

  body.home-page .nav > .brand .dot,
  body.upload-page .nav > .brand .dot,
  body.account-page .top > .brand .dot,
  body.info-page .top > .brand .dot,
  body.legal-page .top > .brand .dot {
    width: 31px !important;
    height: 31px !important;
    flex-basis: 31px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.16),0 0 24px rgba(0,153,255,.36) !important;
  }

  body.home-page .navlinks,
  body.upload-page .navlinks,
  body.account-page .navlinks,
  body.info-page .navlinks {
    padding: 5px !important;
    gap: 2px !important;
  }

  body.home-page .navlinks a,
  body.upload-page .navlinks a,
  body.account-page .navlinks a,
  body.info-page .navlinks a {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(232,247,255,.68) !important;
  }

  body.home-page .navlinks a:hover,
  body.upload-page .navlinks a:hover,
  body.account-page .navlinks a:hover,
  body.info-page .navlinks a:hover {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    transform: none !important;
  }

  body.info-page .navlinks a[href="/info/"],
  body.account-page .navlinks a[href="/account/"] {
    background: linear-gradient(180deg,rgba(126,224,255,.13),rgba(0,102,178,.09)) !important;
    color: #dff7ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  body.home-page .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body.home-page .nav-login,
  body.home-page .account-trigger,
  body.upload-page .account-trigger,
  body.account-page .top > .pill,
  body.info-page .top > .pill,
  body.legal-page .top > .link {
    padding: 0 17px !important;
  }

  body.home-page .nav-login,
  body.home-page .nav-login:visited {
    color: #e9f8ff !important;
    text-shadow: 0 1px 18px rgba(126,224,255,.12) !important;
  }

  body.home-page .account-trigger:hover,
  body.upload-page .account-trigger:hover,
  body.home-page .nav-login:hover,
  body.legal-page .top > .link:hover {
    border-color: rgba(164,224,255,.27) !important;
    background: linear-gradient(145deg,rgba(17,35,52,.88),rgba(5,13,21,.78)) !important;
    transform: translateY(-1px) !important;
  }

  body.upload-page .nav,
  body.account-page .top,
  body.info-page .top {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    align-items: center !important;
    gap: 12px !important;
  }

  body.upload-page .nav > .brand,
  body.account-page .top > .brand,
  body.info-page .top > .brand { justify-self: start !important; }

  body.upload-page .nav > .navlinks,
  body.account-page .top > .navlinks,
  body.info-page .top > .navlinks { justify-self: center !important; }

  body.upload-page .nav > .account-menu,
  body.account-page .top > .pill,
  body.info-page .top > .pill { justify-self: end !important; }

  body.account-page .top > .pill,
  body.info-page .top > .pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(223,247,255,.82) !important;
  }

  /* Info hero and content now share one exact grid. */
  body.info-page { --info-content: min(1080px,calc(100% - 32px)); }

  body.info-page .hero,
  body.info-page .cards {
    box-sizing: border-box !important;
    width: var(--info-content) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.info-page .hero { padding: 34px 0 28px !important; }

  body.info-page .hero h1 {
    max-width: none !important;
    margin: 16px 0 14px !important;
    font-size: clamp(56px,5.35vw,72px) !important;
    line-height: .92 !important;
    letter-spacing: -.068em !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
  }

  body.info-page .hero .lead {
    max-width: 46ch !important;
    margin: 0 !important;
  }

  body.info-page .cards {
    grid-template-columns: minmax(0,1.08fr) minmax(0,1.08fr) minmax(250px,.84fr) !important;
    gap: 14px !important;
  }

  body.info-page .card {
    min-width: 0 !important;
    min-height: 304px !important;
    padding: 26px !important;
    overflow: hidden !important;
    transition: transform 240ms var(--studio-ease),border-color 240ms var(--studio-ease),background-color 240ms var(--studio-ease) !important;
  }

  body.info-page .card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(164,224,255,.24) !important;
    background: linear-gradient(155deg,rgba(255,255,255,.082),rgba(255,255,255,.035)) !important;
  }

  body.info-page .card:nth-child(3) {
    background: radial-gradient(circle at 80% 10%,rgba(0,153,255,.13),transparent 42%),linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.027)) !important;
  }

  body.info-page .card strong,
  body.info-page .card p,
  body.info-page .card .app-btn {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.info-page .card .email {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 12px !important;
  }

  /* Animated idle stage occupies Upload side space while square geometry stays untouched. */
  body.upload-page:not(.video-picked) .shell { isolation: isolate !important; }

  body.upload-page:not(.video-picked) .shell::before,
  body.upload-page:not(.video-picked) .shell::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    pointer-events: none !important;
  }

  body.upload-page:not(.video-picked) .shell::before {
    top: 8px !important;
    z-index: 0 !important;
    width: min(1120px,calc(100vw - 64px)) !important;
    height: min(680px,calc(100dvh - 92px)) !important;
    transform: translateX(-50%) !important;
    background: radial-gradient(ellipse at center,transparent 0 51%,rgba(98,202,255,.13) 51.25%,transparent 51.7%),radial-gradient(ellipse at center,transparent 0 63%,rgba(98,202,255,.075) 63.2%,transparent 63.65%),radial-gradient(ellipse at center,transparent 0 74%,rgba(98,202,255,.045) 74.2%,transparent 74.6%) !important;
    -webkit-mask-image: linear-gradient(90deg,#000 0 32%,transparent 43% 57%,#000 68% 100%) !important;
    mask-image: linear-gradient(90deg,#000 0 32%,transparent 43% 57%,#000 68% 100%) !important;
    opacity: .82 !important;
    animation: midxUploadOrbit 8s ease-in-out infinite alternate !important;
  }

  body.upload-page:not(.video-picked) .shell::after {
    top: 22px !important;
    z-index: 0 !important;
    width: min(1180px,calc(100vw - 24px)) !important;
    height: min(650px,calc(100dvh - 100px)) !important;
    transform: translateX(-50%) !important;
    background: radial-gradient(circle at 10% 50%,rgba(0,153,255,.16),transparent 26%),radial-gradient(circle at 90% 42%,rgba(126,224,255,.10),transparent 24%) !important;
    filter: blur(22px) !important;
    opacity: .58 !important;
    animation: midxUploadSides 9s var(--studio-ease) infinite alternate !important;
  }

  body.upload-page:not(.video-picked) .workspace { z-index: 2 !important; }

  @keyframes midxUploadOrbit {
    from { opacity: .48; transform: translateX(-50%) scale(.985); }
    to { opacity: .88; transform: translateX(-50%) scale(1.015); }
  }

  @keyframes midxUploadSides {
    from { opacity: .36; transform: translateX(-50%) translate3d(-10px,4px,0); }
    to { opacity: .68; transform: translateX(-50%) translate3d(10px,-6px,0); }
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  body.info-page { --info-content: min(100% - 24px,760px); }
  body.info-page .hero h1 { font-size: clamp(45px,6.5vw,58px) !important; }
  body.info-page .cards { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  body.info-page .card:nth-child(3) { grid-column: 1 / -1 !important; min-height: 198px !important; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  body.upload-page:not(.video-picked) .shell::before,
  body.upload-page:not(.video-picked) .shell::after { animation: none !important; }
}

/* v112: wide desktop Upload stage. Functional context fills the side field. */
@media (min-width: 1180px) {
  body.upload-page:is(.checking-account,.is-authed):not(.video-picked) {
    --upload-idle-square: min(590px, calc(100dvh - 160px), calc(100vw - 620px)) !important;
  }

  body.upload-page.is-guest:not(.video-picked) {
    --upload-idle-square: min(520px, calc(100dvh - 250px), calc(100vw - 700px)) !important;
  }

  body.upload-page:not(.video-picked) .upload-idle-context {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    min-height: calc(100dvh - 70px) !important;
    overflow: visible !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transition: opacity .28s cubic-bezier(.16,1,.3,1) !important;
  }

  body.upload-page .upload-guide {
    position: absolute !important;
    width: 220px !important;
    padding: 2px 0 2px 21px !important;
    color: rgba(230,247,255,.7) !important;
    text-align: left !important;
  }

  body.upload-page .upload-guide::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 1px !important;
    background: linear-gradient(180deg,rgba(113,215,255,.72),rgba(113,215,255,.12)) !important;
    box-shadow: 0 0 20px rgba(64,194,255,.16) !important;
  }

  body.upload-page .upload-guide::after {
    content: "" !important;
    position: absolute !important;
    top: 27px !important;
    height: 1px !important;
    background: linear-gradient(90deg,transparent,rgba(119,218,255,.56),transparent) !important;
    background-size: 200% 100% !important;
    animation: midxUploadSignal 3.8s ease-in-out infinite !important;
  }

  body.upload-page .upload-guide > span {
    display: block !important;
    margin: 0 0 16px !important;
    color: rgba(152,222,250,.58) !important;
    font: 700 10px/1.1 "Azeret Mono",monospace !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
  }

  body.upload-page .upload-guide > strong {
    display: block !important;
    max-width: 205px !important;
    color: #eefaff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: -.05em !important;
    text-wrap: balance !important;
  }

  body.upload-page .upload-guide > p {
    max-width: 200px !important;
    margin: 12px 0 0 !important;
    color: rgba(211,239,251,.52) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body.upload-page .upload-guide-source {
    top: clamp(104px,18dvh,154px) !important;
    left: 20px !important;
  }

  body.upload-page .upload-guide-source::after {
    left: calc(100% + 14px) !important;
    width: 94px !important;
  }

  body.upload-page .upload-guide-next {
    top: clamp(328px,49dvh,410px) !important;
    right: 18px !important;
    width: 232px !important;
  }

  body.upload-page .upload-guide-next::after {
    right: calc(100% + 14px) !important;
    width: 86px !important;
    animation-direction: reverse !important;
  }

  body.upload-page.video-picked .upload-idle-context {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  @keyframes midxUploadSignal {
    0%,100% { opacity: .25; background-position: 100% 0; }
    50% { opacity: .9; background-position: 0 0; }
  }
}

@media (max-width: 1179px) {
  body.upload-page .upload-idle-context { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.upload-page .upload-guide::after { animation: none !important; }
}

/* v113: mobile bookmark visual sync. Geometry and DOM remain untouched. */
@media (max-width: 760px) {
  body.home-page,
  body.upload-page,
  body.info-page,
  body.account-page {
    background:
      radial-gradient(ellipse at 82% -8%, rgba(0,153,255,.17), transparent 34%),
      radial-gradient(ellipse at 4% 72%, rgba(0,86,190,.10), transparent 40%),
      linear-gradient(180deg,#02070b 0%,#04101a 52%,#02070b 100%) !important;
    color: #f1f9fd !important;
  }

  body.upload-page .bg {
    background:
      radial-gradient(ellipse at 78% 6%, rgba(0,153,255,.15), transparent 34%),
      radial-gradient(ellipse at 18% 80%, rgba(0,86,190,.11), transparent 38%),
      linear-gradient(180deg,#02070b,#04101a 54%,#02070b) !important;
  }

  body.home-page .nav,
  body.upload-page .mobile-top,
  body.info-page .top,
  body.account-page .top {
    border-color: rgba(126,224,255,.14) !important;
    background:
      radial-gradient(circle at 10% 0%,rgba(0,153,255,.075),transparent 36%),
      linear-gradient(180deg,rgba(8,19,30,.96),rgba(3,10,16,.96)) !important;
    box-shadow:
      inset 0 -1px 0 rgba(126,224,255,.055),
      inset 0 1px 0 rgba(255,255,255,.035),
      0 18px 54px rgba(0,21,38,.24) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  }

  body.home-page .nav .pill,
  body.upload-page .mobile-top .pill,
  body.info-page .top .pill,
  body.account-page .top .pill {
    border-color: rgba(126,224,255,.25) !important;
    background: rgba(0,87,142,.16) !important;
    color: #d9f5ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045),0 0 30px rgba(0,153,255,.055) !important;
  }

  body.home-page .hero,
  body.info-page .card,
  body.account-page .profile-card,
  body.upload-page.video-picked .panel {
    border-color: rgba(126,224,255,.15) !important;
    background:
      radial-gradient(circle at 92% 0%,rgba(0,153,255,.065),transparent 34%),
      linear-gradient(155deg,rgba(13,27,40,.96),rgba(5,14,22,.97)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 26px 70px rgba(0,18,31,.24) !important;
  }

  body.home-page .mobile-home-card:not(.primary),
  body.home-page .mobile-status-card,
  body.account-page .stat,
  body.account-page .app-btn.dark,
  body.upload-page .guest-lock,
  body.upload-page .file-card,
  body.upload-page .selected-mini,
  body.upload-page .notice,
  body.upload-page .switch,
  body.upload-page textarea,
  body.upload-page select {
    border-color: rgba(126,224,255,.13) !important;
    background: linear-gradient(155deg,rgba(15,30,43,.88),rgba(7,17,26,.92)) !important;
    color: #edf9fe !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  body.home-page .mobile-home-card.primary,
  body.upload-page:not(.video-picked) #dropZone,
  body.info-page .card a,
  body.account-page .app-btn:not(.dark):not(.danger) {
    border-color: rgba(255,255,255,.86) !important;
    background: linear-gradient(155deg,#ffffff 0%,#f1f9ff 58%,#d9eeff 100%) !important;
    color: #00131e !important;
    box-shadow: inset 0 1px 0 #fff,0 18px 46px rgba(0,91,145,.13) !important;
  }

  body.upload-page:not(.video-picked) #dropZone h2,
  body.upload-page:not(.video-picked) #dropZone p,
  body.home-page .mobile-home-card.primary b,
  body.home-page .mobile-home-card.primary span {
    color: #00131e !important;
  }

  body.account-page .banner {
    border-color: rgba(126,224,255,.12) !important;
    background:
      radial-gradient(ellipse at 22% 24%,rgba(126,224,255,.25),transparent 24%),
      radial-gradient(ellipse at 88% 5%,rgba(0,153,255,.32),transparent 38%),
      linear-gradient(132deg,#06131f 0%,#07345b 48%,#006aa8 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
  }

  body.account-page .avatar-wrap,
  body.account-page .avatar {
    border-color: rgba(126,224,255,.16) !important;
    box-shadow: 0 14px 36px rgba(0,18,31,.32),0 0 28px rgba(0,153,255,.09) !important;
  }

  body.account-page .app-btn.danger {
    border-color: rgba(255,96,130,.31) !important;
    background: linear-gradient(155deg,rgba(80,24,42,.66),rgba(45,14,26,.8)) !important;
    color: #ffc6d3 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  body.info-page .hero p,
  body.info-page .card p,
  body.account-page .identity p,
  body.account-page .bio,
  body.account-page .stat span,
  body.upload-page .muted,
  body.upload-page .side-note {
    color: rgba(216,240,251,.62) !important;
  }

  body.home-page .eyebrow,
  body.info-page .eyebrow,
  body.info-page .card > span,
  body.upload-page .label {
    color: #8edfff !important;
  }

  body.home-page .mobile-tabs,
  body.upload-page .mobile-tabs,
  body.info-page .mobile-tabs,
  body.account-page .mobile-tabs {
    border-color: rgba(126,224,255,.11) !important;
    background: linear-gradient(180deg,rgba(4,12,19,.97),rgba(2,8,13,.99)) !important;
    box-shadow: 0 -18px 52px rgba(0,18,31,.38),inset 0 1px 0 rgba(126,224,255,.065) !important;
    backdrop-filter: blur(20px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
  }

  body.home-page .mobile-tabs a,
  body.upload-page .mobile-tabs a,
  body.info-page .mobile-tabs a,
  body.account-page .mobile-tabs a {
    color: rgba(206,231,242,.58) !important;
  }

  body.home-page .mobile-tabs a.active,
  body.upload-page .mobile-tabs a.active,
  body.info-page .mobile-tabs a.active,
  body.account-page .mobile-tabs a.active {
    border-color: rgba(255,255,255,.85) !important;
    background: linear-gradient(155deg,#fff,#e7f5ff) !important;
    color: #00131e !important;
    box-shadow: 0 12px 32px rgba(0,91,145,.16),inset 0 1px 0 #fff !important;
  }

  body.home-page .mobile-tabs a.active .tab-ico,
  body.upload-page .mobile-tabs a.active .tab-ico,
  body.info-page .mobile-tabs a.active .tab-ico,
  body.account-page .mobile-tabs a.active .tab-ico {
    filter: drop-shadow(0 5px 12px rgba(0,153,255,.13)) !important;
  }

  body.midx-browser-gated #midxInstallGate {
    background:
      radial-gradient(ellipse at 78% -8%,rgba(0,153,255,.20),transparent 35%),
      radial-gradient(ellipse at 8% 82%,rgba(0,86,190,.12),transparent 42%),
      linear-gradient(180deg,#02070b,#04101a 54%,#02070b) !important;
  }

  body.midx-browser-gated .midx-install-steps li {
    border-color: rgba(126,224,255,.13) !important;
    background: linear-gradient(155deg,rgba(15,30,43,.86),rgba(7,17,26,.9)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }
}

/* v114: preserve account handle descenders inside the desktop trigger. */
@media (min-width: 761px) {
  body.home-page .account-trigger #accountName,
  body.upload-page .account-trigger #accountName {
    line-height: 1.25 !important;
    padding-top: 1px !important;
    padding-bottom: 2px !important;
    transform: none !important;
  }
}