/* 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; }
}