/* VidGoAI nocturne glass theme
   Source: Stitch project projects/11180285876277143992, screen 90e01c1f.
   This file is an overlay: it preserves runtime DOM hooks while unifying the
   production pages under the glassmorphism direction. */

:root {
  --glass-bg: #0b1322;
  --glass-bg-deep: #060a13;
  --glass-text: rgba(255, 255, 255, 0.94);
  --glass-text-soft: rgba(255, 255, 255, 0.78);
  --glass-text-muted: rgba(255, 255, 255, 0.54);
  --glass-line: rgba(255, 255, 255, 0.16);
  --glass-line-strong: rgba(255, 255, 255, 0.28);
  --glass-panel: rgba(255, 255, 255, 0.08);
  --glass-panel-strong: rgba(255, 255, 255, 0.12);
  --glass-panel-soft: rgba(255, 255, 255, 0.055);
  --glass-gold: #e4b863;
  --glass-gold-soft: rgba(228, 184, 99, 0.16);
  --glass-gold-line: rgba(228, 184, 99, 0.42);
  --glass-danger: #ff8f8f;
  --glass-success: #89f0bd;
  --glass-warning: #ffd485;
  --ink-900: var(--glass-text);
  --ink-700: var(--glass-text-soft);
  --ink-500: var(--glass-text-muted);
  --ink-400: rgba(255, 255, 255, 0.42);
  --ink-300: rgba(255, 255, 255, 0.34);
  --ink-100: rgba(255, 255, 255, 0.10);
  --line: var(--glass-line);
  --line-strong: var(--glass-line-strong);
  --bg-page: var(--glass-bg);
  --bg-card: var(--glass-panel);
  --bg-soft: var(--glass-panel-soft);
  --brand-primary: var(--glass-gold);
  --brand-primary-deep: #ffd485;
  --brand-primary-soft: var(--glass-gold-soft);
  --accent-coral: var(--glass-gold);
  --accent-coral-deep: #ffd485;
  --accent-coral-soft: var(--glass-gold-soft);
  --needs-review: var(--glass-warning);
  --needs-review-soft: rgba(228, 184, 99, 0.12);
  --needs-review-deep: #ffd485;
  --success: var(--glass-success);
  --success-soft: rgba(137, 240, 189, 0.12);
  --warning: var(--glass-warning);
  --warning-soft: rgba(228, 184, 99, 0.12);
  --danger: var(--glass-danger);
  --danger-soft: rgba(255, 143, 143, 0.12);
}

html {
  background: var(--glass-bg-deep);
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--glass-text);
  background:
    radial-gradient(720px circle at 82% 8%, rgba(124, 156, 196, 0.25), transparent 62%),
    radial-gradient(620px circle at 8% 88%, rgba(51, 81, 122, 0.34), transparent 64%),
    radial-gradient(520px circle at 50% 22%, rgba(228, 184, 99, 0.10), transparent 64%),
    linear-gradient(180deg, #0b1322 0%, #060a13 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.028;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}

body > * {
  position: relative;
  z-index: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--glass-gold);
}

nav,
header[class*="bg-white"],
.topbar,
.site-nav {
  background: rgba(11, 19, 34, 0.64) !important;
  border-color: var(--glass-line) !important;
  color: var(--glass-text) !important;
  backdrop-filter: blur(48px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(180%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 32px rgba(3, 7, 18, 0.34) !important;
}

main,
section,
footer,
.card,
.job,
.status-box,
.review-box,
.ops,
.corr-table,
.corr-soon,
[class*="bg-surface-container-lowest"],
[class*="bg-surface-container-low"],
[class*="bg-surface-container"],
[class*="bg-white"] {
  color: var(--glass-text);
}

[class*="bg-white"],
[class*="bg-surface-container-low"],
[class*="bg-surface-container-high"],
[class*="bg-surface-container"],
[class*="bg-surface-bright"],
[class*="bg-background"] {
  background-color: rgba(255, 255, 255, 0.075) !important;
  color: var(--glass-text) !important;
}

section[class*="rounded"],
.card,
.job,
.status-box,
.review-box,
.ops,
.corr-soon,
.corr-table,
.legal-shell,
.pay-card,
.usage-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055) 56%, rgba(255, 255, 255, 0.075)) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 28px !important;
  color: var(--glass-text) !important;
  backdrop-filter: blur(60px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(180%) !important;
  box-shadow:
    0 16px 48px rgba(3, 7, 18, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(2, 6, 16, 0.36) !important;
}

h1,
h2,
h3,
h4,
.job-title,
.st-title,
.font-headline-lg,
.font-headline-md,
.font-headline-display {
  color: var(--glass-text) !important;
}

.text-on-surface,
[class*="text-on-surface"] {
  color: var(--glass-text) !important;
}

.text-primary,
[class*="text-primary"],
.text-primary-container,
[class*="text-primary-container"] {
  color: var(--glass-gold) !important;
}

h1 .text-primary,
h1 [class*="text-primary"],
.font-headline-display .text-primary,
.font-headline-display [class*="text-primary"] {
  color: #ffd485 !important;
  text-shadow: 0 0 28px rgba(228, 184, 99, 0.22);
}

p,
li,
.sm,
.st-desc,
.job-meta,
.sub-meta,
.body,
.text-on-surface-variant,
.text-outline,
.text-outline-variant,
[class*="text-on-surface-variant"],
[class*="text-outline"] {
  color: var(--glass-text-soft) !important;
}

input,
textarea,
select,
.link-in input,
.gloss-source,
.gloss-target {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--glass-text) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(2, 6, 16, 0.30) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  transition: all 500ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.40) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--glass-gold-line) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 0 0 3px rgba(228, 184, 99, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

button,
.btn,
.job-act,
.dl-btn,
a[class*="rounded"] {
  transition: all 500ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary,
button[onclick="trySubmit()"],
[data-cta="try-free"],
a[href="/app"][class*="bg-primary"],
[class*="bg-primary-container"] {
  background: var(--glass-gold) !important;
  color: #261900 !important;
  border: 1px solid rgba(255, 221, 163, 0.55) !important;
  box-shadow:
    0 12px 32px rgba(228, 184, 99, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.btn-primary:hover,
button[onclick="trySubmit()"]:hover,
[data-cta="try-free"]:hover {
  background: #ffd485 !important;
  transform: translateY(-1px);
}

.btn-ghost,
.tab,
.chip,
.lang-chip,
.mode-chip,
.voice-chip,
.bg-chip,
.gloss-add,
.preview-toggle,
.preview-toggle button,
.dl-btn:not(.btn-primary),
.job-act,
a[class*="bg-white"],
button[class*="bg-white"] {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--glass-text-soft) !important;
  border-color: var(--glass-line) !important;
  backdrop-filter: blur(36px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(180%) !important;
}

.is-sel,
.tab.is-on,
.lang-chip.is-sel,
.mode-chip.is-sel,
.voice-chip.is-sel,
.bg-chip.is-sel,
.preview-toggle button.on {
  background: var(--glass-gold-soft) !important;
  color: #ffd485 !important;
  border-color: var(--glass-gold-line) !important;
}

.tag,
[class*="tag-"] {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--glass-text-soft) !important;
  border: 1px solid var(--glass-line);
}

.tag-done,
.status-done {
  color: var(--glass-success) !important;
}

.tag-fail,
.status-fail {
  color: var(--glass-danger) !important;
}

.tag-review,
.status-review {
  color: var(--glass-warning) !important;
}

video,
.pv,
.preview-card,
.job-thumb {
  background: rgba(3, 7, 18, 0.62) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 24px !important;
}

.hero-mobile-br {
  display: none;
}

.home-hero {
  min-height: clamp(600px, 68vh, 720px);
  justify-content: center;
  padding-top: clamp(100px, 12vh, 132px) !important;
  padding-bottom: clamp(84px, 10vh, 118px) !important;
}

.home-scope-pill {
  margin-bottom: 34px !important;
  background: rgba(255, 255, 255, 0.085) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 10px 28px rgba(3, 7, 18, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(2, 6, 16, 0.35) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.home-scope-pill .material-symbols-outlined {
  color: #f3dca8 !important;
}

.home-scope-pill span:last-child {
  color: rgba(255, 255, 255, 0.86) !important;
  letter-spacing: 0 !important;
}

.home-hero h1 {
  max-width: min(1120px, calc(100vw - 72px)) !important;
  margin-bottom: 24px !important;
  font-size: clamp(48px, 5.6vw, 72px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.home-hero p.font-body-lg {
  max-width: 760px !important;
  margin-bottom: 42px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(17px, 1.55vw, 21px) !important;
  line-height: 1.72 !important;
}

.home-hero-actions {
  gap: 24px !important;
  margin-bottom: 20px !important;
}

.home-hero-actions a {
  min-width: 218px;
  height: 64px;
}

.home-hero > p.font-label-sm {
  margin-top: 8px !important;
  color: rgba(255, 255, 255, 0.68) !important;
  line-height: 1.8 !important;
}

#cases {
  padding-top: clamp(64px, 8vh, 92px) !important;
}

#cases > .text-center {
  margin-bottom: clamp(48px, 5vh, 68px) !important;
}

.app-hero-head {
  max-width: 1060px;
  margin-bottom: 34px !important;
}

.app-hero-head p:first-child {
  color: var(--glass-gold) !important;
  letter-spacing: 0 !important;
}

.app-hero-head h1 {
  max-width: 1060px;
  font-size: clamp(2.1rem, 3.2vw, 3.35rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

.app-hero-head p:last-child {
  max-width: 760px;
  line-height: 1.78 !important;
}

.workbench-grid {
  align-items: start;
  max-width: 1120px;
  margin-inline: auto;
  gap: 26px !important;
}

.source-card,
.setup-card,
.options-card,
.submit-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.05) 54%, rgba(255, 255, 255, 0.075)),
    radial-gradient(420px circle at 20% 8%, rgba(124, 156, 196, 0.12), transparent 62%) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 30px !important;
  box-shadow:
    0 18px 52px rgba(3, 7, 18, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(2, 6, 16, 0.34) !important;
}

.source-card,
.setup-card,
.options-card,
.submit-card {
  padding: clamp(24px, 3vw, 36px) !important;
}

.source-card {
  margin-inline: auto;
}

.source-card__head,
.setup-card > .flex:first-child,
.options-card > .flex:first-child,
.submit-card > .flex:first-child {
  margin-bottom: 22px !important;
}

.source-card__head h2,
.setup-card > .flex:first-child h2,
.options-card > .flex:first-child h2,
.submit-card > .flex:first-child h2 {
  font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
  line-height: 1.18 !important;
}

.source-tabs {
  width: min(100%, 560px);
}

.source-card .up-in,
.source-card .link-in {
  width: 100%;
}

.source-card .up-in > div:first-child {
  min-height: 168px;
}

.source-card .link-in:not(.hidden) {
  min-height: 184px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 2.6vw, 34px) !important;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(280px circle at 50% 0%, rgba(228, 184, 99, 0.09), transparent 60%),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(2, 6, 16, 0.28);
}

.source-card .link-in input {
  min-height: 60px;
  font-size: 1rem !important;
}

.source-note {
  position: relative;
  width: 100%;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(228, 184, 99, 0.18) !important;
}

.setup-body {
  gap: 1.15rem !important;
}

.setup-body > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

.setup-card #langSelectBtn {
  min-height: 58px;
  background: rgba(255, 255, 255, 0.065) !important;
  border-color: var(--glass-line) !important;
}

.setup-card #langMenu {
  background: rgba(11, 19, 34, 0.92) !important;
  border-color: var(--glass-line) !important;
  backdrop-filter: blur(42px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(42px) saturate(180%) !important;
  box-shadow: 0 18px 44px rgba(3, 7, 18, 0.58) !important;
}

.setup-card .glossary-row {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px !important;
}

.setup-card .glossary-row input {
  min-width: 0;
}

.setup-card .gloss-add {
  border: 1px solid var(--glass-line) !important;
  border-radius: 16px !important;
  width: 52px;
}

.setup-card #translationModeRow,
.setup-card #voiceModeRow {
  min-width: 0;
  width: min(100%, 260px);
}

.setup-card #bgRow .bg-chip {
  min-height: 48px;
}

.submit-panel {
  margin-top: 0.35rem;
  background:
    linear-gradient(135deg, rgba(228, 184, 99, 0.13), rgba(255, 255, 255, 0.075) 48%, rgba(124, 156, 196, 0.10)) !important;
  border-color: rgba(228, 184, 99, 0.34) !important;
  box-shadow:
    0 16px 42px rgba(3, 7, 18, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.submit-panel button[onclick="trySubmit()"] {
  min-width: 180px;
  min-height: 58px;
  border-radius: 20px !important;
}

@media (min-width: 1024px) {
  .source-card {
    display: block;
  }

  .source-note {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    min-height: 0;
    background:
      linear-gradient(90deg, rgba(228, 184, 99, 0.075), rgba(255, 255, 255, 0.035)) !important;
  }

  .source-note::before {
    content: none;
  }

  .source-note p {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
  }

  .setup-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
    column-gap: 34px !important;
    row-gap: 22px !important;
    align-items: start;
  }

  .setup-body #langSelect {
    grid-column: 1;
    grid-row: 1;
  }

  .setup-body > .space-y-2 {
    grid-column: 1;
    grid-row: 2 / span 4;
    min-width: 0;
  }

  .setup-body .submit-panel {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 104px;
    align-self: start;
  }

  .setup-body > .border-t:nth-of-type(1) {
    grid-column: 2;
    grid-row: 3;
    padding-top: 18px !important;
  }

  .setup-body > .border-t:nth-of-type(2) {
    grid-column: 2;
    grid-row: 4;
    padding-top: 18px !important;
  }

  .setup-body > .border-t:nth-of-type(3) {
    grid-column: 2;
    grid-row: 5;
    padding-top: 18px !important;
  }

  .setup-body > .border-t:nth-of-type(1) > .flex,
  .setup-body > .border-t:nth-of-type(2) > .flex,
  .setup-body > .border-t:nth-of-type(3) > .flex:first-child {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
    align-items: start !important;
  }

  .setup-body > .border-t:nth-of-type(1) .inline-grid,
  .setup-body > .border-t:nth-of-type(2) .inline-grid,
  .setup-body > .border-t:nth-of-type(3) #bgRow {
    width: 100%;
  }

  .setup-body > .border-t:nth-of-type(3) #bgRow {
    grid-template-columns: 1fr;
  }

  .submit-panel > .flex {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .submit-panel button[onclick="trySubmit()"] {
    width: 100%;
    min-height: 62px;
    margin-top: 6px;
  }
}

@media (max-width: 760px) {
  .app-main {
    padding-inline: 18px !important;
    padding-top: 24px !important;
  }

  .app-hero-head h1 {
    font-size: 2.05rem !important;
  }

  .source-card,
  .setup-card {
    border-radius: 24px !important;
    padding: 20px !important;
  }

  .source-card .up-in > div:first-child {
    min-height: 156px;
  }

  .source-card .link-in:not(.hidden) {
    min-height: 156px;
    padding: 18px !important;
  }
}

@media (min-width: 1024px) {
  .workbench-grid {
    max-width: 1160px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px !important;
    align-items: stretch;
  }

  .source-card,
  .setup-card,
  .options-card,
  .submit-card {
    max-width: none;
    width: 100%;
    margin: 0 !important;
  }

  .source-card {
    grid-column: 1;
    grid-row: 1;
  }

  .setup-card {
    grid-column: 2;
    grid-row: 1;
  }

  .options-card {
    grid-column: 1;
    grid-row: 2;
  }

  .submit-card {
    grid-column: 2;
    grid-row: 2;
  }

  .setup-body {
    display: block !important;
  }

  .setup-body #langSelect,
  .setup-body > .space-y-2 {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .source-tabs,
  .source-card .up-in,
  .source-card .link-in,
  .source-note {
    width: 100%;
  }

  .source-card .up-in > div:first-child,
  .source-card .link-in:not(.hidden) {
    min-height: 168px;
  }

  .source-note {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    min-height: 0;
  }

  .options-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .options-card > .border-t:first-of-type {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  .options-card > .border-t {
    padding-top: 18px !important;
  }

  .options-card > .border-t > .flex,
  .options-card > .border-t > .flex:first-child {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
    align-items: start !important;
  }

  .options-card .inline-grid,
  .options-card #bgRow {
    width: 100%;
  }

  .submit-card {
    align-self: start;
  }

  .submit-card .submit-panel {
    margin-top: 0 !important;
  }
}

/* Final workbench composition: two horizontal glass frames.
   Row 1 holds source + translation, row 2 holds options + submit. */
@media (min-width: 1024px) {
  .workbench-grid {
    position: relative;
    max-width: 1180px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    gap: 0 24px !important;
    align-items: stretch !important;
  }

  .workbench-column {
    display: contents !important;
  }

  .workbench-grid::before,
  .workbench-grid::after {
    content: "" !important;
    grid-column: 1 / -1;
    display: block;
    z-index: 0;
    border: 1px solid var(--glass-line);
    border-radius: 34px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.04) 58%, rgba(255, 255, 255, 0.07)),
      radial-gradient(680px circle at 18% 8%, rgba(124, 156, 196, 0.13), transparent 66%),
      radial-gradient(560px circle at 84% 14%, rgba(228, 184, 99, 0.065), transparent 68%);
    box-shadow:
      0 28px 74px rgba(3, 7, 18, 0.68),
      0 0 0 1px rgba(255, 255, 255, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(2, 6, 16, 0.42);
    pointer-events: none;
  }

  .workbench-grid::before {
    grid-row: 1 / 3;
    border-radius: 34px;
  }

  .workbench-grid::after {
    content: none !important;
    display: none !important;
  }

  .workbench-column .source-card,
  .workbench-column .setup-card,
  .workbench-column .options-card,
  .workbench-column .submit-card {
    position: relative;
    z-index: 1;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018) 58%, rgba(255, 255, 255, 0.035)),
      radial-gradient(420px circle at 20% 4%, rgba(124, 156, 196, 0.075), transparent 62%) !important;
    border: 1px solid rgba(255, 255, 255, 0.105) !important;
    box-shadow:
      0 18px 44px rgba(3, 7, 18, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(2, 6, 16, 0.26) !important;
    padding: clamp(28px, 3.2vw, 40px) !important;
    margin-block: 24px !important;
    margin-inline: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    height: auto !important;
    align-self: stretch !important;
  }

  .source-card {
    grid-column: 1;
    grid-row: 1;
    margin-left: 24px !important;
    border-radius: 30px !important;
  }

  .setup-card {
    grid-column: 2;
    grid-row: 1;
    margin-right: 24px !important;
    border-radius: 30px !important;
  }

  .options-card {
    grid-column: 1;
    grid-row: 2;
    margin-left: 24px !important;
    border-radius: 30px !important;
  }

  .submit-card {
    grid-column: 2;
    grid-row: 2;
    margin-right: 24px !important;
    border-radius: 30px !important;
  }

  .source-card,
  .setup-card {
    min-height: 430px !important;
  }

  .options-card,
  .submit-card {
    min-height: 360px !important;
  }

  .source-card::after,
  .options-card::after {
    content: none !important;
  }

  .workbench-column .source-card .up-in > div:first-child,
  .workbench-column .source-card .link-in:not(.hidden) {
    min-height: 142px !important;
    height: 142px !important;
  }

  .workbench-column .source-tabs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 48px !important;
    align-items: stretch !important;
  }

  .workbench-column .source-tabs .tab {
    width: 100% !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .workbench-column .source-card .link-in input {
    height: 64px !important;
  }

  .workbench-column .options-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .workbench-column .options-card > .border-t {
    padding-top: 12px !important;
  }

  .workbench-column .submit-card {
    display: flex;
    flex-direction: column;
  }
}

.job-detail-main {
  width: min(1120px, calc(100vw - 64px)) !important;
  max-width: min(1120px, calc(100vw - 64px)) !important;
}

.job-detail-main .jd-grid:not([style*="display: none"]) {
  display: block !important;
  width: 100% !important;
}

.job-detail-main .jd-main,
.job-detail-main .jd-side {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

.job-detail-main .jd-side {
  position: static !important;
  top: auto !important;
  margin-top: 0 !important;
}

.job-detail-main .status-box,
.job-detail-main .card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.052) 56%, rgba(255, 255, 255, 0.075)),
    radial-gradient(360px circle at 18% 10%, rgba(124, 156, 196, 0.12), transparent 62%) !important;
  border-color: var(--glass-line) !important;
}

.job-detail-main .status-box {
  padding: 24px !important;
}

.job-detail-main .pv {
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(320px, 48vw, 620px);
  overflow: hidden;
}

.job-detail-main .pv video,
.job-detail-main .card video {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  object-fit: contain;
}

.job-detail-main .dl-row {
  gap: 12px !important;
}

.job-detail-main .dl-btn,
.job-detail-main .ops .btn {
  min-height: 54px;
  border-radius: 18px !important;
}

.job-detail-main #subtitle-compare {
  width: 100%;
  scroll-margin-top: 96px;
}

.job-detail-main .subtitle-help,
.job-detail-main .sub-head,
.job-detail-main .sub-meta2 {
  color: rgba(255, 255, 255, 0.66) !important;
}

.job-detail-main .sub-cell,
.job-detail-main .sub-source,
.job-detail-main .sub-target,
.job-detail-main .empty-note {
  background: rgba(255, 255, 255, 0.065) !important;
  border-color: var(--glass-line) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.job-detail-main .sub-source-input {
  color: rgba(255, 255, 255, 0.94) !important;
  background: transparent !important;
}

.job-detail-main .sub-row-editing .sub-source {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(228, 184, 99, 0.7) !important;
  box-shadow:
    0 0 0 3px rgba(228, 184, 99, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.job-detail-main .sub-row-editing .sub-source-input {
  background: rgba(3, 7, 18, 0.24) !important;
  border-color: rgba(228, 184, 99, 0.42) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

.jobs-main {
  width: min(1120px, calc(100vw - 64px));
}

.jobs-hero {
  padding: 26px 0 8px;
}

.jobs-kicker {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.jobs-guide,
.jobs-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.05) 58%, rgba(255, 255, 255, 0.075)),
    radial-gradient(520px circle at 82% 18%, rgba(228, 184, 99, 0.12), transparent 62%),
    rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 30px !important;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
}

.jobs-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.78);
}

.jobs-guide strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 15px;
}

.jobs-guide span {
  font-size: 13px;
}

.jobs-guide-action {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(228, 184, 99, 0.42);
  border-radius: 18px;
  background: rgba(228, 184, 99, 0.14);
  color: #f3dca8 !important;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(3, 7, 18, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: all 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.jobs-guide-action:hover {
  background: rgba(228, 184, 99, 0.2);
  border-color: rgba(228, 184, 99, 0.62);
}

.jobs-panel {
  padding: 22px;
}

.jobs-main .job-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.jobs-main .job {
  min-width: 0;
  margin: 0 !important;
  padding: 18px !important;
  border-radius: 26px !important;
  border-color: var(--glass-line) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.048)),
    rgba(255, 255, 255, 0.055) !important;
  box-shadow: 0 12px 30px rgba(3, 7, 18, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.jobs-main .job:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.jobs-main .job-thumb {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--glass-line);
  color: rgba(255, 255, 255, 0.72) !important;
}

.jobs-main .job-title {
  color: #fff !important;
}

.jobs-main .job-meta {
  color: rgba(255, 255, 255, 0.64) !important;
}

.jobs-main .job-act .btn {
  min-width: 86px;
  border-radius: 18px !important;
}

.jobs-main .empty,
.jobs-main .loading {
  margin: 0;
  border-color: var(--glass-line) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.048)),
    rgba(255, 255, 255, 0.055) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  box-shadow: none !important;
}

.jobs-main .empty h2 {
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

.jobs-main .empty p,
.jobs-main .loading {
  color: rgba(255, 255, 255, 0.66) !important;
}

.jobs-main .empty .eic {
  background: rgba(255, 255, 255, 0.08) !important;
}

.auth-main {
  width: 100%;
}

.auth-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.052) 56%, rgba(255, 255, 255, 0.075)),
    radial-gradient(460px circle at 82% 0%, rgba(228, 184, 99, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.06) !important;
  border-color: var(--glass-line) !important;
  border-radius: 32px !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
}

.auth-card h1,
.auth-card label {
  color: #fff !important;
}

.auth-card p,
.auth-card [data-pwd-hint] {
  color: rgba(255, 255, 255, 0.68) !important;
}

.auth-card a {
  color: var(--accent) !important;
}

.auth-card input {
  min-height: 54px;
  border-color: var(--glass-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(2, 6, 16, 0.3) !important;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.auth-card input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.auth-card input:focus {
  border-color: rgba(228, 184, 99, 0.45) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(228, 184, 99, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.auth-card button[type="submit"] {
  min-height: 54px;
  border: 1px solid rgba(228, 184, 99, 0.42) !important;
  border-radius: 20px !important;
  background: rgba(228, 184, 99, 0.16) !important;
  color: #f3dca8 !important;
  box-shadow: 0 10px 32px rgba(3, 7, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.auth-card button[type="submit"]:hover {
  background: rgba(228, 184, 99, 0.23) !important;
  border-color: rgba(228, 184, 99, 0.62) !important;
  color: #fff3d1 !important;
}

.auth-card [data-auth-msg][data-kind="err"] {
  background: rgba(255, 218, 214, 0.16) !important;
  border: 1px solid rgba(255, 180, 172, 0.38);
  color: #ffd9d4 !important;
}

.auth-card [data-auth-msg][data-kind="ok"] {
  background: rgba(151, 240, 255, 0.12) !important;
  border: 1px solid rgba(151, 240, 255, 0.32);
  color: #bff7ff !important;
}

.pricing-main {
  width: 100%;
}

.pricing-hero {
  padding-top: 92px !important;
  padding-bottom: 36px !important;
}

.pricing-hero h1 {
  color: #fff !important;
}

.pricing-hero h1 .text-primary-container {
  color: var(--accent) !important;
}

.pricing-hero p {
  color: rgba(255, 255, 255, 0.72) !important;
}

.pricing-plans > div,
.pricing-note,
.pricing-faq details {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.05) 58%, rgba(255, 255, 255, 0.075)),
    radial-gradient(520px circle at 82% 18%, rgba(124, 156, 196, 0.11), transparent 62%),
    rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 30px !important;
  box-shadow: var(--glass-shadow) !important;
  color: #fff !important;
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
}

.pricing-plans > div {
  min-height: 100%;
  min-width: 0;
}

.pricing-plans > div:nth-child(3) {
  border-color: rgba(228, 184, 99, 0.52) !important;
  box-shadow: 0 18px 54px rgba(228, 184, 99, 0.14), var(--glass-shadow) !important;
}

.pricing-plans .bg-primary-fixed,
.pricing-plans .bg-surface-container-low {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--glass-line);
  border-radius: 18px !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.pricing-plans .text-on-surface,
.pricing-plans .text-on-surface-variant,
.pricing-note,
.pricing-note .text-on-surface-variant,
.pricing-faq p {
  color: rgba(255, 255, 255, 0.72) !important;
}

.pricing-plans li,
.pricing-plans li span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pricing-plans ul {
  min-width: 0;
}

.pricing-plans .font-headline-display,
.pricing-plans .font-headline-md {
  color: #fff !important;
}

.pricing-plans .text-primary,
.pricing-plans .text-secondary,
.pricing-faq a,
.pricing-faq #faq-heading {
  color: var(--accent) !important;
}

.pricing-plans a,
.pricing-plans span[aria-disabled="true"] {
  border-radius: 20px !important;
}

.pricing-plans a {
  border: 1px solid rgba(228, 184, 99, 0.42) !important;
  background: rgba(228, 184, 99, 0.16) !important;
  color: #f3dca8 !important;
  box-shadow: 0 10px 32px rgba(3, 7, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.pricing-plans span[aria-disabled="true"] {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.52) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.pricing-note {
  border-radius: 26px !important;
}

.pricing-faq details {
  margin-bottom: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--glass-line) !important;
}

.pricing-faq summary {
  color: #fff !important;
}

.guide-main {
  width: 100%;
}

.guide-hero {
  max-width: min(980px, calc(100vw - 64px)) !important;
  padding-top: 96px !important;
  padding-bottom: 38px !important;
}

.guide-hero h1 {
  color: #fff !important;
}

.guide-hero h1 .text-primary-container {
  color: var(--accent) !important;
}

.guide-hero p {
  color: rgba(255, 255, 255, 0.72) !important;
}

.guide-content,
.guide-faq {
  max-width: min(1120px, calc(100vw - 64px)) !important;
}

.guide-content {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.guide-content > div,
.guide-faq details {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.05) 58%, rgba(255, 255, 255, 0.075)),
    radial-gradient(520px circle at 82% 18%, rgba(124, 156, 196, 0.11), transparent 62%),
    rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 30px !important;
  box-shadow: var(--glass-shadow) !important;
  color: #fff !important;
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
}

.guide-content > div:nth-child(4) {
  grid-column: 1 / -1;
}

.guide-content .bg-primary-fixed,
.guide-content .bg-primary\/5 {
  background: rgba(228, 184, 99, 0.1) !important;
  border-color: rgba(228, 184, 99, 0.32) !important;
}

.guide-content h2,
.guide-faq summary,
.guide-faq #faq-heading {
  color: #fff !important;
}

.guide-content p,
.guide-content li,
.guide-faq p {
  color: rgba(255, 255, 255, 0.72) !important;
}

.guide-content b,
.guide-content .text-on-surface {
  color: rgba(255, 255, 255, 0.92) !important;
}

.guide-content .text-primary-container,
.guide-content .text-primary,
.guide-content .text-on-primary-fixed-variant,
.guide-content .text-secondary {
  color: var(--accent) !important;
}

.guide-content .bg-primary-container,
.guide-content span.w-9 {
  background: var(--accent) !important;
  color: #261900 !important;
}

.guide-faq details {
  margin-bottom: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--glass-line) !important;
}

.about-main {
  width: 100%;
}

.about-hero {
  max-width: min(960px, calc(100vw - 64px)) !important;
  padding-top: 96px !important;
  padding-bottom: 36px !important;
}

.about-hero h1 {
  color: #fff !important;
}

.about-hero p {
  color: rgba(255, 255, 255, 0.74) !important;
}

.about-grid {
  max-width: min(1120px, calc(100vw - 64px)) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.about-grid > div:not(.about-cta) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.05) 58%, rgba(255, 255, 255, 0.075)),
    radial-gradient(520px circle at 82% 18%, rgba(124, 156, 196, 0.11), transparent 62%),
    rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 30px !important;
  box-shadow: var(--glass-shadow) !important;
  color: #fff !important;
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
}

.about-grid h2 {
  color: #fff !important;
}

.about-grid p,
.about-grid .text-on-surface-variant,
.about-grid .text-outline {
  color: rgba(255, 255, 255, 0.7) !important;
}

.about-grid b,
.about-grid .text-on-surface {
  color: rgba(255, 255, 255, 0.92) !important;
}

.about-grid .border-surface-variant {
  border-color: rgba(255, 255, 255, 0.13) !important;
}

.about-grid .bg-ph-soft {
  background: rgba(228, 184, 99, 0.12) !important;
  border: 1px solid rgba(228, 184, 99, 0.28);
  color: var(--accent) !important;
}

.about-cta {
  grid-column: 1 / -1;
  justify-content: center;
}

.about-cta a {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 18px !important;
  color: #fff !important;
  box-shadow: var(--button-shadow) !important;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  transition: all 500ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.about-cta a:last-child {
  background: rgba(228, 184, 99, 0.18) !important;
  border-color: rgba(228, 184, 99, 0.42) !important;
  color: #f3dca8 !important;
}

.usage-main {
  max-width: min(1120px, calc(100vw - 64px)) !important;
}

.usage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.usage-hero h1 {
  color: #fff !important;
  font-size: clamp(40px, 5vw, 68px) !important;
  line-height: 1.05 !important;
}

.usage-hero p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.72) !important;
}

.credits-card,
.usage-wrap,
.u-state {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.05) 58%, rgba(255, 255, 255, 0.075)),
    radial-gradient(520px circle at 82% 18%, rgba(124, 156, 196, 0.11), transparent 62%),
    rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 30px !important;
  box-shadow: var(--glass-shadow) !important;
  color: #fff !important;
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
}

.credits-card {
  padding: 26px 28px !important;
}

.credits-card .text-on-surface-variant,
.usage-main .section-label {
  color: rgba(255, 255, 255, 0.62) !important;
}

.credits-num {
  color: var(--accent) !important;
  font-size: 44px !important;
}

.usage-main .u-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 18px !important;
  color: #fff !important;
  box-shadow: var(--button-shadow) !important;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.usage-main .u-btn.ghost,
.credits-card .u-btn {
  background: rgba(228, 184, 99, 0.16) !important;
  border-color: rgba(228, 184, 99, 0.42) !important;
  color: #f3dca8 !important;
}

.usage-wrap {
  overflow: hidden;
}

table.usage-table th {
  background: rgba(255, 255, 255, 0.085) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

table.usage-table td {
  color: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

table.usage-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

.usage-main .section-label {
  display: none;
}

.u-state h2 {
  color: #fff !important;
}

.u-state p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.u-state .eic {
  background: rgba(255, 255, 255, 0.08) !important;
}

hr,
.border-t,
.border-b,
[class*="border-surface"],
[class*="border-outline"] {
  border-color: var(--glass-line) !important;
}

footer {
  background: rgba(6, 10, 19, 0.72) !important;
  border-top: 1px solid var(--glass-line) !important;
}

footer .grid > div:last-child {
  min-width: min(360px, 100%);
}

footer .grid > div:last-child p:first-child {
  white-space: nowrap;
  font-size: 13px !important;
}

footer .grid > div:last-child p,
footer .grid > div:last-child span,
footer .grid > div:last-child a {
  line-height: 1.8;
}

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

@media (max-width: 640px) {
  footer .grid > div:last-child p:first-child {
    white-space: normal;
  }

  nav,
  header[class*="bg-white"],
  .topbar,
  .site-nav {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  nav > *,
  header > *,
  main,
  section,
  footer,
  .card,
  .job,
  .status-box,
  .review-box,
  .ops,
  .corr-soon,
  .corr-table,
  .legal-shell,
  .pay-card,
  .usage-card,
  [class*="max-w-"] {
    max-width: calc(100vw - 32px) !important;
  }

  main[class*="max-w-"] {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .card,
  .job,
  .status-box,
  .review-box,
  .ops,
  .corr-soon,
  .corr-table,
  .legal-shell,
  .pay-card,
  .usage-card,
  section[class*="rounded"] {
    max-width: calc(100vw - 48px) !important;
  }

  [class*="px-margin-x"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  main *,
  section *,
  nav *,
  footer * {
    min-width: 0 !important;
  }

  main,
  section,
  footer {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  h1,
  .font-headline-display {
    max-width: calc(100vw - 32px) !important;
    font-size: clamp(2rem, 9vw, 2.25rem) !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere;
    word-break: break-all !important;
    white-space: normal !important;
  }

  h1 .text-primary,
  h1 [class*="text-primary"],
  .font-headline-display .text-primary,
  .font-headline-display [class*="text-primary"] {
    display: inline-block;
  }

  h1 .text-primary::before,
  h1 [class*="text-primary"]::before,
  .font-headline-display .text-primary::before,
  .font-headline-display [class*="text-primary"]::before {
    content: none;
  }

  .hero-mobile-br {
    display: block;
  }

  h2,
  .font-headline-lg {
    font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  p,
  li,
  .st-desc,
  .job-meta,
  .sub-meta,
  .body {
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .btn,
  button,
  a[class*="rounded"] {
    max-width: 100% !important;
  }

  .preview-toggle,
  .tab,
  .chip,
  .lang-chip,
  .mode-chip,
  .voice-chip,
  .bg-chip {
    min-width: 0 !important;
  }

  .tab,
  .preview-toggle,
  #langRow,
  #voiceModeRow,
  #bgRow,
  #translationModeRow {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  nav #auth-slot [data-cta],
  nav [data-cta="try-free"] {
    display: none !important;
  }

  section > .rounded-full,
  section [class*="rounded-full"] {
    max-width: calc(100vw - 48px) !important;
    white-space: normal !important;
    text-align: center;
  }

  .app-hero-head {
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  .app-main {
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .app-hero-head h1 {
    font-size: clamp(1.72rem, 7.2vw, 2.05rem) !important;
    line-height: 1.16 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }

  .app-hero-head p:first-child,
  .app-hero-head p:last-child {
    font-size: 0.82rem !important;
    line-height: 1.65 !important;
  }

  .workbench-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .source-card,
  .setup-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  .source-card h2,
  .setup-card h2 {
    font-size: 1.85rem !important;
  }

  .source-card .up-in > div:first-child {
    min-height: 190px;
    padding: 18px !important;
  }

  .source-card .tab {
    font-size: 0.82rem !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .setup-card #langSelectBtn {
    min-height: 54px;
    align-items: flex-start;
    border-radius: 22px !important;
  }

  .setup-card #langMenu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  .setup-card .glossary-row {
    grid-template-columns: minmax(0, 1fr) 52px !important;
  }

  .setup-card .glossary-row .gloss-source,
  .setup-card .glossary-row .gloss-target {
    grid-column: 1 / 2;
  }

  .setup-card .glossary-row .gloss-add {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    height: 100% !important;
    min-height: 108px !important;
  }

  .setup-card #translationModeRow,
  .setup-card #voiceModeRow {
    min-width: 0;
    width: 100% !important;
  }

  .submit-panel {
    border-radius: 24px !important;
  }

  .submit-panel button[onclick="trySubmit()"] {
    width: 100% !important;
    min-width: 0;
  }

  .job-detail-main {
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .job-detail-main .jd-grid:not([style*="display: none"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .job-detail-main .jd-side {
    position: static;
  }

  .job-detail-main .status-box,
  .job-detail-main .card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  .job-detail-main .pv {
    min-height: 220px;
  }

  .jobs-main {
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .jobs-hero {
    display: block !important;
  }

  .jobs-nav-new {
    width: 42px;
    height: 42px;
    padding: 0 !important;
    justify-content: center;
  }

  .jobs-nav-new-text {
    display: none;
  }

  .jobs-guide,
  .jobs-panel {
    border-radius: 26px !important;
  }

  .jobs-guide {
    display: grid;
    padding: 16px;
  }

  .jobs-guide-action {
    width: 100%;
  }

  .jobs-panel {
    padding: 14px;
  }

  .jobs-main .job-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .jobs-main .job {
    align-items: flex-start !important;
  }

  .jobs-main .job-act {
    align-self: stretch;
  }

  .jobs-main .empty {
    padding: 34px 18px !important;
  }

  .jobs-main .empty h2 {
    font-size: 22px !important;
  }

  .pricing-hero {
    padding-top: 68px !important;
    padding-bottom: 28px !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }

  .pricing-hero h1 {
    font-size: 30px !important;
    line-height: 1.18 !important;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-hero p {
    max-width: 326px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-section {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pricing-plans {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .pricing-plans > div {
    border-radius: 26px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .pricing-plans li {
    align-items: flex-start !important;
  }

  .pricing-plans li span {
    display: block;
    line-height: 1.55;
  }

  .guide-hero,
  .guide-content,
  .guide-faq {
    max-width: calc(100vw - 40px) !important;
  }

  .guide-hero {
    padding-top: 68px !important;
    padding-bottom: 28px !important;
  }

  .guide-hero h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    max-width: 320px !important;
  }

  .guide-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-content > div:nth-child(4) {
    grid-column: auto;
  }

  .guide-content > div {
    padding: 22px !important;
    border-radius: 26px !important;
  }

  .guide-content h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  .guide-content li,
  .guide-content p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .guide-faq details {
    border-radius: 22px !important;
  }

  .about-hero,
  .about-grid {
    max-width: calc(100vw - 40px) !important;
  }

  .about-hero {
    padding-top: 68px !important;
    padding-bottom: 26px !important;
  }

  .about-hero h1 {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }

  .about-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-grid > div:not(.about-cta) {
    padding: 22px !important;
    border-radius: 26px !important;
  }

  .about-grid h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  .about-grid p,
  .about-grid .text-body-md {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .about-grid .flex.gap-4 {
    gap: 10px !important;
  }

  .about-grid .min-w-\[96px\] {
    min-width: 72px !important;
  }

  .about-grid .bg-ph-soft {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .about-cta {
    flex-direction: column;
  }

  .about-cta a {
    width: 100%;
  }

  .usage-main {
    max-width: calc(100vw - 40px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .usage-hero {
    display: block;
  }

  .usage-hero h1 {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }

  .credits-card {
    padding: 22px !important;
    border-radius: 26px !important;
    align-items: flex-start !important;
  }

  .credits-num {
    font-size: 36px !important;
  }

  .usage-wrap,
  .u-state {
    border-radius: 26px !important;
  }

  table.usage-table {
    min-width: 620px;
  }
}