/* =========================================================
   KOMETA skin — page layout and integration layer.
   Visual-only: preserves DOM, ids, names, actions, hrefs and
   Django/front-end bindings. Buttons, tabs and floating
   surfaces live in components.css.
   ========================================================= */
:root {
  /* =========================================================
     KOMETA Portal — canonical design tokens (single source of truth).
     Feature layers below and components.css reference these names
     instead of redefining the palette.
     ========================================================= */

  /* Brand */
  --primary: #2563EB !important;    /* consumed by main.css */
  --k-blue: #2563EB;                /* brand blue */
  --k-blue-hover: #1D4ED8;
  --k-orange: #FF7A1A;

  /* Dark ink surfaces */
  --k-deep: #080F17;                /* near-black / sidebar */
  --k-ink: #121B26;                 /* primary dark text */
  --k-ink-2: #1E2433;               /* headings & deep panels */

  /* Muted text on light surfaces. --k-text-mid/-soft and --k-text-muted/-faint
     are near-duplicate greys; candidates to merge into two shades. */
  --k-text-soft:  #647086;          /* default muted body/label text */
  --k-text-mid:   #60747C;          /* muted header/footer/hint text */
  --k-text-muted: #8792A3;          /* lighter muted text */
  --k-text-faint: #84969D;          /* faint captions */

  /* Neutral surfaces & lines */
  --k-white: #FFFFFF;
  --k-mist:  #E6E9EF;               /* light mist fill for backgrounds */
  --k-line:  rgba(15, 44, 52, .12); /* hairline separators */

  /* Elevation */
  --k-shadow-card:    0 26px 80px rgba(8, 15, 23, .12), 0 1px 0 rgba(255, 255, 255, .88) inset;
  --k-shadow-lg:      0 24px 80px rgba(11, 15, 23, .11), 0 1px 0 rgba(255,255,255,.9) inset;
  --k-shadow-control: 0 14px 34px rgba(37, 99, 235, .20);

  /* Radii & motion */
  --k-radius-xl: 30px;
  --k-transition: 180ms ease;

  /* Feature scopes */
  --k-safe-blue: #0C68E8;           /* translator "safe polish" layer */
  --k-safe-blue-2: #2563EB;
  --k-safe-ink: #121B26;
  --k-safe-muted: #60747C;
  --k-safe-orange: #FFA304;
  --k-client-blue: #2563EB;
  --k-client-blue-dark: #1D4ED8;
}

* { box-sizing: border-box; }
html { background: #E6E9EF !important; }
body.font-montserrat,
body {
  margin: 0 !important;
  color: var(--k-ink) !important;
  background:
    radial-gradient(980px 560px at 16% -8%, rgba(37,99,235,.18), transparent 58%),
    radial-gradient(760px 420px at 98% 8%, rgba(37,99,235,.08), transparent 55%),
    linear-gradient(135deg, #F4F7FA 0%, #F7F9FC 42%, #F4F7FA 100%) !important;
  font-family: Inter, Montserrat, Open Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .62;
  background-image:
    linear-gradient(110deg, transparent 0 20px, rgba(37,99,235,.055) 20px 21px, transparent 21px 72px),
    radial-gradient(circle at 82% 78%, rgba(109,93,252,.055) 0 2px, transparent 2px 38px),
    radial-gradient(circle at 22% 18%, rgba(37,99,235,.07) 0 1.5px, transparent 1.5px 32px);
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 92%, transparent 100%);
}

body > div.flex.h-screen.overflow-hidden,
body > div:first-child {
  position: relative !important;
  z-index: 1;
  background: transparent !important;
  min-height: 100vh !important;
}

/* Sidebar */
body > div > .flex-shrink-0 {
  position: relative !important;
  z-index: 5 !important;
  padding: 18px 0 18px 18px !important;
  background: transparent !important;
}

body > div > .flex-shrink-0 nav,
nav[class*="bg-sidebar"] {
  width: 122px !important;
  height: calc(100vh - 36px) !important;
  padding: 18px 10px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(130px 170px at 35% 4%, rgba(37,99,235,.24), transparent 70%),
    radial-gradient(150px 190px at 110% 78%, rgba(109,93,252,.12), transparent 68%),
    linear-gradient(180deg, var(--k-deep), var(--k-ink)) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 18px 24px 70px rgba(11, 15, 23, .24), inset 0 1px 0 rgba(255,255,255,.09) !important;
  overflow-x: hidden !important;
}

/* (the old CSS-drawn white tile at the sidebar top is gone — the KOMETA
   mark tile is real markup now: nav .portal-sidebar-mark) */

body > div > .flex-shrink-0 nav::after {
  content: "";
  position: absolute;
  right: -33px;
  bottom: 72px;
  width: 84px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.12) 0 49%, rgba(37,99,235,.20) 49% 51%, rgba(255,255,255,.06) 51% 100%);
  border: 1px solid rgba(255,255,255,.14);
  transform: rotate(-38deg);
  pointer-events: none;
}

nav ul { margin: 0 !important; padding: 0 !important; }
nav ul + ul { margin-top: 18px !important; padding-top: 18px !important; border-top: 1px solid rgba(255,255,255,.10); }
nav li { margin: 0 0 9px !important; }
nav a {
  position: relative !important;
  min-height: 74px !important;
  padding: 12px 6px 10px !important;
  border-radius: 19px !important;
  color: rgba(235,241,250,.72) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
  font-weight: 650 !important;
  letter-spacing: -.02em !important;
  transition: transform var(--k-transition), color var(--k-transition), background var(--k-transition), border-color var(--k-transition) !important;
}
nav a svg {
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 2px !important;
  color: currentColor !important;
  opacity: .88 !important;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.18));
}
nav a:hover {
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.10) !important;
}
nav a.bg-active_sidebar_link,
nav a#nav-translation.bg-active_sidebar_link {
  color: #FFFFFF !important;
  background: linear-gradient(180deg, rgba(37,99,235,.27), rgba(37,99,235,.18)) !important;
  border-color: rgba(37,99,235,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 36px rgba(37,99,235,.18) !important;
}
nav a.bg-active_sidebar_link::after,
nav a#nav-translation.bg-active_sidebar_link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: #8A96A8;
  transform: translateX(-50%);
  box-shadow: 0 0 16px rgba(138,150,168,.42);
}

/* Header */
body > div > .flex-1.flex.flex-col.overflow-hidden {
  position: relative !important;
  min-width: 0 !important;
  background: transparent !important;
}
header.bg-header,
header[class*="bg-header"] {
  height: 82px !important;
  min-height: 82px !important;
  padding: 18px 36px 10px 28px !important;
  background: transparent !important;
  border: 0 !important;
}
header > div {
  height: 54px !important;
  padding: 8px 12px 8px 16px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 18px 48px rgba(11, 15, 23, .075), inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter: blur(18px) saturate(130%);
}
header img[alt="Logo"] {
  height: 38px !important;
  max-width: 182px !important;
  object-fit: contain !important;
  padding: 5px 12px !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid rgba(15,44,52,.08) !important;
  box-shadow: 0 8px 22px rgba(15,44,52,.06) !important;
}
header .profile-trigger,
header a[href*="profile-details"] {
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(230, 233, 239, .86) !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  color: var(--k-ink-2) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
header .profile-trigger svg,
header a[href*="profile-details"] svg { color: var(--k-blue) !important; }
header form[method="POST"] button[type="submit"] {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: #1E2433 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 12px 26px rgba(11, 15, 23,.18) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}
header form[method="POST"] button[type="submit"]:hover { transform: translateY(-1px); background: #2563EB !important; }

/* Main shell */
main.h-full,
main {
  position: relative !important;
  height: 100% !important;
  padding: 0 var(--content-gutter) 26px !important;
  overflow-y: auto !important;
  background: transparent !important;
}
main::before {
  content: "";
  position: fixed;
  right: 40px;
  top: 115px;
  width: min(44vw, 630px);
  height: min(52vw, 620px);
  pointer-events: none;
  opacity: .92;
  background:
    radial-gradient(circle at 72% 24%, rgba(37,99,235,.16) 0 2px, transparent 2px 58px),
    radial-gradient(circle at 34% 70%, rgba(109,93,252,.10) 0 2px, transparent 2px 62px),
    linear-gradient(115deg, transparent 0 37%, rgba(37,99,235,.08) 37% 38%, transparent 38% 100%);
  border-radius: 50%;
  filter: blur(.1px);
}
main::after {
  content: "";
  position: fixed;
  right: 112px;
  top: 146px;
  width: 156px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.16);
  background: linear-gradient(90deg, rgba(255,255,255,.72) 0 49%, rgba(37,99,235,.22) 49% 51%, rgba(255,255,255,.44) 51% 100%);
  transform: rotate(-19deg);
  box-shadow: 0 28px 70px rgba(37,99,235,.12);
  pointer-events: none;
  opacity: .8;
}
/* (page wrappers are .content-shell in components.css) */
main > div > p:first-child,
p.text-5.font-bold.my-5 {
  margin: 6px 0 20px !important;
  color: var(--k-ink) !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.02 !important;
  font-weight: 820 !important;
  letter-spacing: -.055em !important;
}
main > div > p:first-child::after,
p.text-5.font-bold.my-5::after {
  content: "";
  display: inline-block;
  width: 64px;
  height: 18px;
  margin-left: 16px;
  vertical-align: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(37,99,235,.22) 0 49%, rgba(255,255,255,.92) 49% 51%, rgba(37,99,235,.12) 51% 100%);
  border: 1px solid rgba(37,99,235,.20);
  box-shadow: 0 10px 28px rgba(37,99,235,.10);
}

/* Tab switcher */
main > div > div.flex.justify-between.items-center {
  align-items: center !important;
  margin: 0 0 14px !important;
}
/* (tab tray and tab buttons are styled by .tab-tray/.tab in components.css) */

/* Premium card */
main > div > .my-5 {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}
#document-translate-content,
:is(#text-translate-content, #text-writing-content, #document-writing-content) {
  position: relative !important;
}
/* No backdrop-filter here: it would make the card the containing block for the
   `fixed` modals nested in the wizard steps, shrinking their full-screen
   overlay to the card and letting the stepper paint over the dialog. The card
   background is ~92% opaque, so the blur bought nothing anyway. */
#document-translate-content > div,
:is(#text-translate-content, #text-writing-content, #document-writing-content) > div {
  position: relative !important;
  overflow: hidden !important;
  padding: 26px !important;
  min-height: 628px !important;
  border-radius: var(--k-radius-xl) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,253,253,.90)),
    radial-gradient(720px 360px at 88% 0%, rgba(37,99,235,.10), transparent 68%) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: var(--k-shadow-lg) !important;
}
#document-translate-content > div::after {
  content: "";
  position: absolute;
  right: 32px;
  bottom: 30px;
  width: 126px;
  height: 30px;
  border-radius: 999px;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(37,99,235,.11) 0 49%, rgba(255,255,255,.9) 49% 51%, rgba(109,93,252,.10) 51% 100%);
  border: 1px solid rgba(37,99,235,.14);
  box-shadow: 0 20px 50px rgba(37,99,235,.08);
  pointer-events: none;
}

/* Stepper */
#document-translate-content .relative.pt-1 {
  position: relative !important;
  padding: 18px 20px 4px !important;
  margin: 0 0 18px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(246,252,251,.90), rgba(255,255,255,.82)) !important;
  border: 1px solid rgba(15,44,52,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
#document-translate-content .overflow-hidden.h-1\.5,
#document-translate-content div[class*="h-1.5"][class*="bg-gray-200"] {
  height: 8px !important;
  margin: 28px 48px 62px !important;
  border-radius: 999px !important;
  background: rgba(15,44,52,.08) !important;
  overflow: hidden !important;
}
#progress-bar {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #2563EB, #5D9CEC) !important;
  box-shadow: 0 0 24px rgba(37,99,235,.16) !important;
}
#document-translate-content .absolute.w-full.top-0\.5,
#document-translate-content div[class*="absolute"][class*="w-full"][class*="top-0.5"] {
  top: 24px !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 8px !important;
}
#step-0, #point-1, #point-2, #point-3, #point-4 {
  position: relative !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 132px !important;
  color: var(--k-text-faint) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  text-align: center !important;
}
#step-0 > div:first-child,
#point-1 > div:first-child,
#point-2 > div:first-child,
#point-3 > div:first-child,
#point-4 > div:first-child {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  margin-bottom: 7px !important;
  color: var(--k-blue) !important;
  background: #fff !important;
  border: 1px solid rgba(37,99,235,.16) !important;
  box-shadow: 0 12px 28px rgba(11, 15, 23,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
#step-0.text-main,
#step-0 {
  color: var(--k-blue) !important;
}
#step-0 > div:first-child {
  color: #fff !important;
  background: linear-gradient(135deg, #2563EB, #5D9CEC) !important;
  border-color: rgba(138,150,168,.24) !important;
  box-shadow: 0 16px 36px rgba(37,99,235,.26) !important;
}
#step-0 span, #point-1 span, #point-2 span, #point-3 span, #point-4 span { max-width: 122px; }

/* Workflow content. No z-index: it would open a stacking context and trap the
   modals nested in the steps below the mobile bottom nav. The container has an
   opaque background of its own, so it already covers the card's decoration. */
.step-container,
#document-translate-content .step-container {
  position: relative !important;
  padding: 28px !important;
  border-radius: 26px !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-line) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(250,253,253,.82)) !important;
  box-shadow: 0 18px 48px rgba(11, 15, 23,.055), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.file-upload,
.step-0.file-upload {
  min-height: 332px !important;
  border: 1.5px dashed rgba(37,99,235,.30) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(320px 220px at 50% 28%, rgba(37,99,235,.095), transparent 72%),
    linear-gradient(135deg, rgba(230,233,239,.72), rgba(255,255,255,.92)) !important;
  overflow: hidden !important;
  transition: border-color var(--k-transition), box-shadow var(--k-transition), transform var(--k-transition) !important;
}
.file-upload:hover {
  border-color: rgba(37,99,235,.48) !important;
  box-shadow: 0 22px 56px rgba(37,99,235,.10) !important;
}
.file-upload > div:first-child {
  position: relative !important;
  min-height: 332px !important;
  padding: 46px 32px !important;
}
.file-upload > div:first-child::before {
  content: "";
  width: 116px;
  height: 32px;
  border-radius: 999px;
  margin: 0 0 22px;
  display: block;
  background:
    linear-gradient(90deg, rgba(37,99,235,.14) 0 49%, rgba(255,255,255,.96) 49% 51%, rgba(37,99,235,.12) 51% 100%);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 18px 40px rgba(37,99,235,.11);
  transform: rotate(-7deg);
}
.file-upload > div:first-child::after {
  content: "";
  position: absolute;
  right: 48px;
  top: 42px;
  width: 32px;
  height: 118px;
  border-radius: 18px 18px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88) 0 32%, rgba(37,99,235,.13) 32% 100%);
  border: 1px solid rgba(37,99,235,.14);
  box-shadow: 0 20px 48px rgba(11, 15, 23,.08);
  transform: rotate(14deg);
}
.file-upload span.text-gray-575,
.file-upload > div:first-child > span:first-child {
  color: var(--k-ink) !important;
  font-size: clamp(26px, 2.4vw, 36px) !important;
  line-height: 1.04 !important;
  font-weight: 820 !important;
  letter-spacing: -.05em !important;
}
.file-upload span.text-gray-400 {
  margin-top: 8px !important;
  max-width: 650px !important;
  color: var(--k-text-mid) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  font-weight: 560 !important;
  text-align: center !important;
}
.file-upload svg.my-7\.5,
.file-upload svg[class*="my-7.5"] {
  width: 56px !important;
  height: 56px !important;
  padding: 13px !important;
  margin: 24px 0 !important;
  color: var(--k-blue) !important;
  border-radius: 19px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  box-shadow: 0 18px 40px rgba(37,99,235,.10) !important;
}
.file-list {
  border-top: 1px solid var(--k-line) !important;
  padding-top: 18px !important;
}
.file-list > * {
  border-radius: 999px !important;
  background: rgba(37,99,235,.08) !important;
  color: var(--k-ink-2) !important;
}

/* Buttons */
button,
a[type="button"] {
  cursor: pointer;
}
/* (buttons are styled by .btn/.btn-primary/.btn-outline in components.css) */

/* Action row */
.action-list {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 20px !important;
  padding: 18px 20px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15,44,52,.09) !important;
  box-shadow: 0 16px 38px rgba(11, 15, 23,.06), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
#restart-text {
  color: var(--k-text-mid) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* Text translate form */
:is(#text-translate-content, #text-writing-content, #document-writing-content) textarea#text {
  min-height: 172px !important;
  padding: 20px !important;
  resize: vertical !important;
  border-radius: 22px !important;
  border: 1px solid rgba(15,44,52,.12) !important;
  background: rgba(255,255,255,.90) !important;
  color: var(--k-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 34px rgba(11, 15, 23,.055) !important;
  outline: none !important;
}
:is(#text-translate-content, #text-writing-content, #document-writing-content) textarea#text:focus {
  border-color: rgba(37,99,235,.42) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
:is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.w-full.gap-1 {
  gap: 18px !important;
  margin-top: 18px !important;
}
:is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.w-full.gap-1 > div {
  padding: 18px !important;
  border-radius: 24px !important;
  background: rgba(246,252,251,.78) !important;
  border: 1px solid rgba(15,44,52,.08) !important;
}

/* Select2 and inputs */
.select2-container,
.select2-container--default,
.select2-container.languages,
.select2-container.action {
  min-height: 46px !important;
  width: 100% !important;
}
.select2-container.languages {
  min-width: 176px !important;
}
.select2-container--default .select2-selection--single,
.select2-selection,
input[type="text"],
select,
textarea {
  min-height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,44,52,.12) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--k-ink) !important;
  box-shadow: 0 10px 24px rgba(11, 15, 23,.045), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
/* Legacy select2 variants (.gray topics, .glossary language selects, .error
   validation state) each paint a light background (#F2F3F5 / #F8F9FA / #FFF7F7)
   with 6px radius on the rectangular *container*, which sits behind the white
   16px-rounded .select2-selection — the container's squarer corners poked out
   as a stray light-gray rectangle. Drop the container background (the selection
   keeps its white fill; error state is still shown by the red .border-red-500
   selection border). */
.select2-container.gray,
.select2-container.gray .select2-container--default,
.select2-container.glossary,
.select2-container.glossary .select2-container--default,
.select2-container.error,
.select2-container.error .select2-container--default {
  background: transparent !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-selection__rendered {
  color: var(--k-ink) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 44px !important;
  padding-left: 20px !important;
  padding-right: 42px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Native <select> text uses the same 20px left inset as select2 selections, so
   every dropdown across the UI keeps its label clear of the rounded border. */
select {
  padding-left: 20px !important;
  padding-right: 36px !important;
}
.select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--k-text-faint) !important; }

/* The open dropdown inherits the closed control's width, which is sized to the
   selected label — so a short selection ("English") made the list too narrow
   and long language names wrapped onto two lines. Give the open list a floor
   width so every option fits on one line. */
.select2-dropdown {
  min-width: 220px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-selection__arrow {
  height: 44px !important;
  right: 10px !important;
  width: 24px !important;
  pointer-events: none !important;
}
input[type="text"]:focus,
select:focus,
textarea:focus,
.select2-container--focus .select2-selection {
  border-color: rgba(37,99,235,.42) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.95) !important;
  outline: none !important;
}

/* Steps 1-4 size to their content; the container is a .panel-fit
   (components.css): it shrinks when sparse, grows with content, and scrolls
   internally once it would outgrow the viewport. */
#document-translate-content .step-container {
  /* header (72) + title + tabs + stepper card + action row (60) + footer;
     measured against the wizard steps where prev/next are visible, with the
     stepper status rows shown (620 leaves main with zero scroll debt — a
     smaller offset makes the whole page overflow by the difference and
     "resist" scrolling) */
  --panel-viewport-offset: 620px;
}
.step-1,
.step-2,
.step-3,
.step-4 {
  color: var(--k-ink) !important;
}
.step-2 span.text-4,
.step-3 span.text-4,
.step-4 span.text-4,
.step-4 span.text-secondary {
  color: var(--k-ink) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 820 !important;
  letter-spacing: -.04em !important;
}
/* Detected-file chips in the language step (plain divs, not seg-tab
   components). Domain/glossary chips are seg-tab components and are styled
   solely by components.css — never restyle them here. */
.detective-language-list > * {
  border-radius: 18px !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  background: rgba(255,255,255,.82) !important;
  color: var(--k-ink-2) !important;
  box-shadow: 0 12px 28px rgba(11, 15, 23,.05) !important;
}

/* Language step: the target select (right column) is vertically centred within
   the 300px step, but the detected-language list (left column) sat at the top,
   so source and target didn't line up. Centre the left column to match. */
#document-translate-content .step-1 > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Document status pills — brand palette, purpose-named (replaced the former
   green-* utilities, which no longer reflected the rendered colour). */
.status-processing { color: var(--k-blue) !important; }
.status-done {
  background: rgba(37, 99, 235, .10) !important;
  color: var(--k-blue) !important;
}
/* Neutral separator between the usage-summary stats (was a green "|"). */
.stat-sep { color: rgba(18, 27, 38, .28) !important; }

/* (glossary source tabs are styled by .seg-tab in components.css) */

/* Tables and translated files */
table.projects,
table.translated {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  color: var(--k-ink) !important;
}
table.projects tr,
table.translated tr {
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 12px 32px rgba(11, 15, 23,.055) !important;
}
table.projects td,
table.projects th,
table.translated td,
table.translated th {
  padding: 16px !important;
  border-top: 1px solid rgba(15,44,52,.08) !important;
  border-bottom: 1px solid rgba(15,44,52,.08) !important;
}
table.projects td:first-child,
table.translated td:first-child { border-left: 1px solid rgba(15,44,52,.08) !important; border-radius: 18px 0 0 18px !important; }
table.projects td:last-child,
table.translated td:last-child { border-right: 1px solid rgba(15,44,52,.08) !important; border-radius: 0 18px 18px 0 !important; }

/* Modal surfaces are styled by .modal-overlay/.modal-panel in components.css;
   .modal-overlay carries z-index 100, above the mobile bottom nav (80) and its
   panel (90). Titles inside modals share one display size: */
#modal .text-5,
#modal-error .text-5,
#invite-modal .text-5,
#modal-revision .text-5,
.error-title {
  color: var(--k-ink) !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 820 !important;
  letter-spacing: -.04em !important;
}
#modal form,
#invite-modal form,
#modal-revision form,
#modal-error .p-12\.5 {
  position: relative !important;
  z-index: 1 !important;
}

/* Loader */
#main-loader {
  /* Brand neutral scrim (#E6E9EF) — the old rgba(238,247,246) was green-tinted
     (G/B > R), which read as a green-gray haze under the panel. */
  background: rgba(230,233,239,.72) !important;
  backdrop-filter: blur(14px) !important;
}
/* Hide the decorative corner capsule (and its glow) while the loader is up: it
   otherwise bleeds through the translucent scrim and sits over the panel's
   shadow box. */
main:has(> #main-loader:not(.hidden))::before,
main:has(> #main-loader:not(.hidden))::after {
  content: none !important;
  display: none !important;
}
#main-loader > div {
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--k-shadow-lg) !important;
}
.loader {
  border-color: rgba(37,99,235,.16) !important;
  border-top-color: var(--k-blue) !important;
}

/* Footer */
footer {
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 var(--content-gutter) 18px !important;
  background: transparent !important;
}
footer > div {
  width: min(100%, var(--content-max)) !important;
  margin: 0 auto !important;
  text-align: center !important;
  color: rgba(96,116,124,.78) !important;
  font-size: 12px !important;
}
footer span.text-red-600 { color: var(--k-blue) !important; font-weight: 800 !important; }

/* Utility overrides */
.text-main { color: var(--k-blue) !important; }
.bg-main { background-color: var(--k-blue) !important; }
.border-main { border-color: var(--k-blue) !important; }
.text-secondary { color: var(--k-ink-2) !important; }
.border-secondary { border-color: rgba(37,99,235,.28) !important; }
.text-gray-300, .text-gray-400, .text-gray-475, .text-gray-500, .text-gray-575 { color: var(--k-text-mid) !important; }
.border-line { border-color: var(--k-line) !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(15,44,52,.08) !important; }
.hidden { display: none !important; }
#document-translate-content[style*="block"] { display: block !important; }
:is(#text-translate-content, #text-writing-content, #document-writing-content)[style*="none"] { display: none !important; }

@media (max-width: 1180px) {
  body > div > .flex-shrink-0 { padding-left: 10px !important; }
  body > div > .flex-shrink-0 nav { width: 104px !important; }
  header.bg-header, header[class*="bg-header"], main, footer { padding-left: 20px !important; padding-right: 20px !important; }
  #step-0, #point-1, #point-2, #point-3, #point-4 { min-width: 104px !important; font-size: 11px !important; }
  #document-translate-content > div, :is(#text-translate-content, #text-writing-content, #document-writing-content) > div { padding: 20px !important; }
}

@media (max-width: 900px) {
  body > div.flex.h-screen.overflow-hidden { overflow: auto !important; }
  body > div > .flex-shrink-0 { display: none !important; }
  header.bg-header, header[class*="bg-header"] { padding: 14px 14px 8px !important; }
  main { padding: 0 14px 18px !important; }
  #document-translate-content .relative.pt-1 { overflow-x: auto !important; }
  #document-translate-content .absolute.w-full.top-0\.5,
  #document-translate-content div[class*="absolute"][class*="w-full"][class*="top-0.5"] { min-width: 680px !important; }
  #document-translate-content .overflow-hidden.h-1\.5,
  #document-translate-content div[class*="h-1.5"][class*="bg-gray-200"] { min-width: 580px !important; }
  :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.w-full.gap-1 { flex-direction: column !important; }
}


/* Portal identity and KOMETA footer update */
header .portal-identity {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 360px !important;
  max-width: 560px !important;
  padding: 10px 16px 10px 12px !important;
  border: 1px solid rgba(37, 99, 235, .14) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(236, 253, 245, .72)),
    radial-gradient(circle at 16% 0%, rgba(37, 99, 235, .16), transparent 42%) !important;
  box-shadow: 0 18px 40px rgba(15, 44, 52, .08), inset 0 1px 0 rgba(255,255,255,.75) !important;
  overflow: hidden !important;
}
header .portal-identity::after {
  content: "" !important;
  position: absolute !important;
  width: 74px !important;
  height: 18px !important;
  right: -18px !important;
  top: 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(37, 99, 235, .12) !important;
  background: linear-gradient(90deg, rgba(37,99,235,.10) 0 49%, rgba(255,255,255,.6) 50% 100%) !important;
  transform: rotate(-18deg) !important;
}
header .portal-mark {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #080F17, #2563EB) !important;
  box-shadow: 0 14px 26px rgba(37, 99, 235, .28) !important;
}
header .portal-mark::before,
header .portal-mark::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
}
header .portal-mark::before {
  width: 22px !important;
  height: 8px !important;
  left: 10px !important;
  top: 11px !important;
  transform: rotate(-28deg) !important;
}
header .portal-mark::after {
  width: 8px !important;
  height: 20px !important;
  left: 17px !important;
  top: 17px !important;
  border-radius: 5px !important;
  opacity: .82 !important;
}
header .portal-mark-pill {
  position: absolute !important;
  width: 16px !important;
  height: 7px !important;
  right: 8px !important;
  bottom: 9px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(230,233,239,.95) 0 48%, rgba(255,255,255,.95) 50% 100%) !important;
  transform: rotate(24deg) !important;
}
header .portal-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  line-height: 1.08 !important;
  position: relative !important;
  z-index: 1 !important;
}
header .portal-title {
  color: #121B26 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}
header .portal-subtitle {
  color: rgba(74, 96, 104, .86) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
footer .portal-footer-brand {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 9px !important;
  color: rgba(96,116,124,.76) !important;
}
footer .portal-footer-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
footer .portal-footer-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 8px !important;
  min-height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(37, 99, 235, .12) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 24px rgba(15,44,52,.06) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
footer .portal-footer-logo-link:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(37, 99, 235, .28) !important;
  box-shadow: 0 14px 28px rgba(15,44,52,.10) !important;
}
footer .portal-footer-logo {
  display: block !important;
  width: 82px !important;
  height: auto !important;
  max-height: 18px !important;
  object-fit: contain !important;
}
@media (max-width: 900px) {
  header .portal-identity {
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;
    padding: 9px 12px !important;
  }
  header .portal-title { font-size: 14px !important; }
  header .portal-subtitle { font-size: 10px !important; }
  header .portal-mark { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
  footer .portal-footer-brand { justify-content: center !important; }
}

/* =========================================================
   KOMETA Portal - Brand palette + layout polish
   Visual-only layer: no functional ids/names/actions/hrefs changed.
   Palette: #2563EB / #080F17 / #121B26 / #1E2433 / #E6E9EF / #FFFFFF
   ========================================================= */

html,
body {
  background: #E6E9EF !important;
}

body.font-montserrat,
body {
  color: var(--k-ink-2) !important;
  background:
    radial-gradient(880px 520px at 7% -12%, rgba(37, 99, 235, .20), transparent 60%),
    radial-gradient(740px 430px at 88% 4%, rgba(255, 122, 26, .105), transparent 54%),
    linear-gradient(135deg, #E6E9EF 0%, #F7F9FC 42%, #EDF1F7 100%) !important;
  font-family: Inter, Montserrat, Open Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -.015em !important;
}

body::before {
  opacity: .50 !important;
  background-image:
    linear-gradient(110deg, transparent 0 24px, rgba(37, 99, 235, .055) 24px 25px, transparent 25px 84px),
    radial-gradient(circle at 83% 76%, rgba(255, 122, 26, .09) 0 2px, transparent 2.5px),
    radial-gradient(circle at 15% 26%, rgba(37, 99, 235, .08) 0 1.5px, transparent 2px) !important;
  background-size: 116px 116px, 42px 42px, 54px 54px !important;
}

body::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.28)) 0 0 / 100% 1px no-repeat,
    radial-gradient(520px 280px at 22% 0%, rgba(37,99,235,.10), transparent 72%) !important;
}

body > div.flex.h-screen.overflow-hidden {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
}

/* Sidebar */
body > div > .flex-shrink-0 {
  background: var(--k-ink) !important;
  box-shadow: 24px 0 70px rgba(8, 15, 23, .22) !important;
  z-index: 4 !important;
}

body > div > .flex-shrink-0 nav,
nav.bg-sidebar,
nav[class*="bg-sidebar"] {
  width: 124px !important;
  padding: 22px 12px 18px !important;
  background:
    radial-gradient(220px 220px at 50% -30px, rgba(37, 99, 235, .30), transparent 62%),
    linear-gradient(180deg, #080F17 0%, #121B26 58%, #080F17 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, .07) !important;
}

nav ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

nav a {
  position: relative !important;
  min-height: 74px !important;
  padding: 12px 8px !important;
  border-radius: 18px !important;
  color: rgba(230, 233, 239, .68) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

nav a:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .09) !important;
  transform: translateY(-1px) !important;
}

nav a.bg-active_sidebar_link,
nav a#nav-translation.bg-active_sidebar_link {
  color: #FFFFFF !important;
  background:
    linear-gradient(135deg, rgba(37,99,235,.96), rgba(37,99,235,.68)) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .32), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

nav a.bg-active_sidebar_link::after,
nav a#nav-translation.bg-active_sidebar_link::after {
  content: "" !important;
  position: absolute !important;
  right: 9px !important;
  top: 9px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--k-orange) !important;
  box-shadow: 0 0 0 5px rgba(255, 122, 26, .16) !important;
}

nav svg {
  width: 24px !important;
  height: 24px !important;
}

nav span {
  font-size: 11px !important;
  line-height: 1.18 !important;
  font-weight: 680 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
}

/* Header */
header.bg-header,
header[class*="bg-header"] {
  min-height: 92px !important;
  height: 92px !important;
  padding: 18px 44px !important;
  background: rgba(255, 255, 255, .76) !important;
  border-bottom: 1px solid rgba(18, 27, 38, .08) !important;
  box-shadow: 0 20px 50px rgba(8, 15, 23, .055) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  z-index: 3 !important;
}

header > .w-full {
  max-width: 1320px !important;
  margin: 0 auto !important;
  gap: 28px !important;
}

header .portal-identity {
  min-width: 420px !important;
  max-width: 580px !important;
  min-height: 58px !important;
  padding: 9px 18px 9px 10px !important;
  gap: 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(37, 99, 235, .16) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(246,248,252,.92) 100%) !important;
  box-shadow: 0 16px 36px rgba(8,15,23,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

header .portal-identity::after {
  width: 92px !important;
  height: 22px !important;
  right: -24px !important;
  top: 11px !important;
  border-color: rgba(255, 122, 26, .24) !important;
  background: linear-gradient(90deg, rgba(255,122,26,.16) 0 48%, rgba(255,255,255,.92) 49% 52%, rgba(37,99,235,.12) 53% 100%) !important;
  transform: rotate(-14deg) !important;
}

header .portal-mark {
  width: 44px !important;
  height: 44px !important;
  flex-basis: 44px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.34), transparent 36%),
    linear-gradient(135deg, #2563EB 0%, #1E2433 100%) !important;
  box-shadow: 0 16px 30px rgba(37, 99, 235, .30) !important;
}

header .portal-mark::before {
  background: rgba(255,255,255,.94) !important;
}

header .portal-mark::after {
  background: rgba(255,122,26,.88) !important;
  opacity: .92 !important;
}

header .portal-mark-pill {
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0 48%, rgba(255,122,26,.92) 50% 100%) !important;
  box-shadow: 0 7px 16px rgba(255, 122, 26, .20) !important;
}

header .portal-title {
  color: var(--k-ink-2) !important;
  font-size: 18px !important;
  font-weight: 840 !important;
  letter-spacing: -.035em !important;
}

header .portal-subtitle {
  color: rgba(18, 27, 38, .62) !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  letter-spacing: .085em !important;
}

header .profile-trigger {
  height: 44px !important;
  padding: 0 13px !important;
  border-radius: 15px !important;
  color: rgba(18, 27, 38, .72) !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(18, 27, 38, .08) !important;
}

header .profile-trigger svg {
  color: var(--k-blue) !important;
}

header form[action*="logout"] button,
header button[type="submit"] {
  height: 44px !important;
  padding: 0 20px !important;
  border-radius: 15px !important;
  background: var(--k-ink-2) !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 28px rgba(8, 15, 23, .16) !important;
}

header form[action*="logout"] button:hover,
header button[type="submit"]:hover {
  background: var(--k-blue) !important;
  transform: translateY(-1px) !important;
}

/* Page layout */
main {
  padding: 0 var(--content-gutter) !important;
  background: transparent !important;
  scrollbar-gutter: stable both-edges !important;
}



main .content-shell > p.text-5,
main .content-shell > p[class*="text-5"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: rgba(18, 27, 38, .72) !important;
  background: rgba(255,255,255,.70) !important;
  border: 1px solid rgba(18, 27, 38, .08) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 24px rgba(8, 15, 23, .04) !important;
}

main .content-shell > p.text-5::before,
main .content-shell > p[class*="text-5"]::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--k-orange) !important;
  box-shadow: 0 0 0 5px rgba(255,122,26,.13) !important;
}

main .content-shell > div.flex.justify-between.items-center {
  margin-bottom: 20px !important;
}

/* Tabs */
/* (tabs are styled by .tab in components.css; active state = .is-active) */

/* Main cards */
#document-translate-content > div,
:is(#text-translate-content, #text-writing-content, #document-writing-content) > div {
  position: relative !important;
  overflow: hidden !important;
  padding: 30px !important;
  border-radius: 32px !important;
  border: 1px solid rgba(18,27,38,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 100%) !important;
  box-shadow: var(--k-shadow-card) !important;
}

/* (the brand stripe on content cards is the .brand-stripe component) */

#document-translate-content .relative.pt-1 {
  padding: 14px 6px 58px !important;
  margin: 0 0 22px !important;
  overflow: visible !important;
}

#document-translate-content .overflow-hidden.h-1\.5,
#document-translate-content div[class*="overflow-hidden"][class*="h-1.5"] {
  height: 8px !important;
  margin-bottom: 0 !important;
  border-radius: 999px !important;
  background: #E6E9EF !important;
  box-shadow: inset 0 1px 2px rgba(8,15,23,.08) !important;
}

#progress-bar {
  background: linear-gradient(90deg, #2563EB 0%, #1D4ED8 76%, #FF7A1A 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .22) !important;
}

#document-translate-content .absolute.w-full.top-0\.5,
#document-translate-content div[class*="absolute"][class*="w-full"][class*="top-0.5"] {
  top: 0 !important;
  padding-top: 18px !important;
}

#step-0,
#point-1,
#point-2,
#point-3,
#point-4 {
  min-width: 126px !important;
  max-width: 172px !important;
  color: rgba(18,27,38,.48) !important;
}

#step-0 span,
#point-1 span,
#point-2 span,
#point-3 span,
#point-4 span {
  max-width: 154px !important;
  line-height: 1.18 !important;
}

/* Stepper rows: every title shares one style, every status line another.
   Child-scoped so nothing leaks into spans nested inside a status line
   (e.g. the language pair's source/target). */
#step-0 > div > span:first-child,
#point-1 > div > span:first-child,
#point-2 > div > span:first-child,
#point-3 > div > span:first-child,
#point-4 > span:first-child {
  color: var(--k-ink-2) !important;
  font-size: 12px !important;
  font-weight: 820 !important;
}

#step-0 > div > span:nth-child(2),
#point-1 > div > span:nth-child(2),
#point-2 > div > span:nth-child(2),
#point-3 > div > span:nth-child(2),
#point-4 > div > span:nth-child(2) {
  color: rgba(101,115,134,.82) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
}

.progress-point,
svg.progress-point {
  width: 12px !important;
  height: 12px !important;
  color: #C9D2E0 !important;
  filter: drop-shadow(0 4px 8px rgba(8,15,23,.10)) !important;
}

#step-0 .progress-point,
#step-0 svg.progress-point {
  color: var(--k-blue) !important;
}

/* Workflow container */
.step-container,
#document-translate-content .step-container {
  padding: 30px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(18,27,38,.09) !important;
  background:
    radial-gradient(420px 240px at 12% 0%, rgba(37,99,235,.08), transparent 68%),
    linear-gradient(180deg, rgba(246,248,252,.90), rgba(255,255,255,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 16px 42px rgba(8,15,23,.055) !important;
}

.file-upload,
.step-0.file-upload {
  min-height: 330px !important;
  border: 1.5px dashed rgba(37,99,235,.30) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(280px 180px at 50% 34%, rgba(37,99,235,.08), transparent 74%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(230,233,239,.38)) !important;
  box-shadow: 0 18px 42px rgba(8,15,23,.055), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.file-upload:hover {
  border-color: rgba(37,99,235,.48) !important;
  box-shadow: 0 24px 56px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,1) !important;
}

.file-upload > div:first-child {
  min-height: 330px !important;
  padding: 42px 32px !important;
}

.file-upload > div:first-child::before {
  width: 124px !important;
  height: 34px !important;
  margin-bottom: 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(18,27,38,.09) !important;
  background: linear-gradient(90deg, rgba(37,99,235,.92) 0 48%, rgba(255,255,255,.96) 49% 52%, rgba(255,122,26,.90) 53% 100%) !important;
  box-shadow: 0 18px 34px rgba(37,99,235,.18) !important;
  transform: rotate(-6deg) !important;
}

.file-upload > div:first-child::after {
  right: 54px !important;
  top: 42px !important;
  width: 34px !important;
  height: 118px !important;
  border-radius: 18px 18px 10px 10px !important;
  border: 1px solid rgba(37,99,235,.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0 30%, rgba(37,99,235,.12) 31% 76%, rgba(255,122,26,.12) 77% 100%) !important;
  box-shadow: 0 22px 44px rgba(8,15,23,.10) !important;
  transform: rotate(12deg) !important;
}

.file-upload span.text-gray-575,
.file-upload > div:first-child > span:first-child {
  color: var(--k-ink-2) !important;
  font-size: clamp(27px, 2.35vw, 36px) !important;
  line-height: 1.04 !important;
  font-weight: 860 !important;
  letter-spacing: -.055em !important;
}

.file-upload span.text-gray-400 {
  max-width: 690px !important;
  color: rgba(18,27,38,.56) !important;
  font-size: 13.5px !important;
  line-height: 1.62 !important;
  font-weight: 620 !important;
}

.file-upload svg.my-7\.5,
.file-upload svg[class*="my-7.5"] {
  width: 58px !important;
  height: 58px !important;
  padding: 14px !important;
  color: var(--k-blue) !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow: 0 18px 32px rgba(37,99,235,.12) !important;
}

/* Buttons */
/* (button variants live in components.css) */

/* Forms, selects, glossary, tables */
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  min-height: 46px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(18,27,38,.12) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--k-ink-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
}

select:focus,
textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus {
  border-color: rgba(37,99,235,.48) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important;
}

.select-block,
.target-language-container,
.detective-language-list,
.glossary-container {
  border-radius: 22px !important;
}

.glossary-tab {
  border-color: rgba(18,27,38,.08) !important;
  background: rgba(255,255,255,.72) !important;
  color: rgba(18,27,38,.70) !important;
}

/* Selected glossary type = uniform blue/white like every other seg-tab —
   never the old black (--k-ink-2) fill, and no black :focus flash. The JS
   toggles .is-active; .selected/.bg-secondary_button are covered for safety. */
.glossary-tab.is-active,
.glossary-tab.selected,
.glossary-tab.bg-secondary_button {
  background: var(--grad-active) !important;
  border-color: var(--btn-primary-border) !important;
  color: #FFFFFF !important;
}

/* Uploaded-file chips in the upload step (plain divs, not seg-tab
   components). Domain/glossary chips are seg-tab components styled solely by
   components.css (base + hover + selected/is-active) — do not restyle here. */
.file-list > * {
  border-radius: 999px !important;
  border: 1px solid rgba(37,99,235,.18) !important;
  background: #FFFFFF !important;
  color: var(--k-ink-2) !important;
  box-shadow: 0 10px 22px rgba(8,15,23,.04) !important;
}

.projects,
table.projects,
table.translated {
  border-spacing: 0 12px !important;
}

table.projects tr,
table.translated tr {
  border-radius: 18px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 14px 30px rgba(8,15,23,.055) !important;
}

/* (modal surfaces live in components.css) */

/* Footer */
footer {
  padding: 18px var(--content-gutter) 26px !important;
  color: rgba(18,27,38,.52) !important;
}

footer .portal-footer-brand {
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  justify-content: center !important;
  gap: 10px !important;
}

footer .portal-footer-label {
  color: rgba(18,27,38,.52) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

footer .portal-footer-logo-link {
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(37,99,235,.16) !important;
  background: #FFFFFF !important;
  box-shadow: 0 12px 24px rgba(8,15,23,.06) !important;
}

footer .portal-footer-logo-link:hover {
  border-color: rgba(37,99,235,.38) !important;
  box-shadow: 0 16px 30px rgba(37,99,235,.12) !important;
}

footer .portal-footer-logo {
  width: 86px !important;
  max-height: 19px !important;
}

/* Utility palette overrides */
.text-main { color: var(--k-blue) !important; }
.bg-main { background-color: var(--k-blue) !important; }
.border-main { border-color: var(--k-blue) !important; }
.text-secondary { color: var(--k-ink-2) !important; }
.border-secondary { border-color: rgba(18,27,38,.18) !important; }
.bg-secondary_button { background-color: var(--k-blue) !important; }
.text-header_text { color: var(--k-ink-2) !important; }
.text-button_bg { color: var(--k-blue) !important; }
.bg-button_bg { background-color: var(--k-blue) !important; }
.text-button_text { color: #FFFFFF !important; }
/* --k-muted is the light "mist" token used for backgrounds (see the
   background: var(--k-mist) rules below); using it as the text colour here
   rendered every muted label near-white (#E6E9EF) on light surfaces. Route
   muted body/label text through the shared --k-text-soft token instead. */
.text-gray-300,
.text-gray-350,
.text-gray-400,
.text-gray-475,
.text-gray-500,
.text-gray-575 { color: var(--k-text-soft) !important; }
.border-button_bg { border-color: rgba(37,99,235,.30) !important; }

/* Responsive layout fixes */
@media (max-width: 1280px) {
  header.bg-header,
  header[class*="bg-header"],
  main,
  footer {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  header .portal-identity { min-width: 360px !important; }
  #step-0, #point-1, #point-2, #point-3, #point-4 { min-width: 112px !important; }
}

@media (max-width: 1024px) {
  body > div > .flex-shrink-0 nav,
  nav.bg-sidebar,
  nav[class*="bg-sidebar"] { width: 108px !important; padding-left: 9px !important; padding-right: 9px !important; }
  header > .w-full { gap: 16px !important; }
  header .portal-identity { min-width: 0 !important; max-width: 460px !important; }
  #document-translate-content > div,
  :is(#text-translate-content, #text-writing-content, #document-writing-content) > div { padding: 24px !important; }
  .step-container,
  #document-translate-content .step-container { padding: 24px !important; }
}

@media (max-width: 900px) {
  body > div.flex.h-screen.overflow-hidden { overflow: auto !important; }
  body > div > .flex-shrink-0 { display: none !important; }
  header.bg-header,
  header[class*="bg-header"] { height: auto !important; min-height: 0 !important; padding: 14px !important; }
  header > .w-full { flex-direction: column !important; align-items: stretch !important; }
  header .portal-identity { width: 100% !important; max-width: none !important; }
  header .flex.gap-5.items-center { justify-content: space-between !important; gap: 10px !important; }
  main { padding: 0 14px 18px !important; }
  main .content-shell { padding-top: 18px !important; }
  #document-translate-content .relative.pt-1 { overflow-x: auto !important; padding-bottom: 72px !important; }
  #document-translate-content .absolute.w-full.top-0\.5,
  #document-translate-content div[class*="absolute"][class*="w-full"][class*="top-0.5"] { min-width: 650px !important; }
  .file-upload > div:first-child::after { display: none !important; }
  footer { padding-left: 14px !important; padding-right: 14px !important; }
  footer .portal-footer-brand { justify-content: center !important; }
}

/* =========================================================
   KOMETA Portal - v6 production polish
   Requested corrections: centered controls, brand-only states,
   compact upload flow, stable wizard labels, uploaded-documents state.
   ========================================================= */

/* Remove remaining decorative pills/capsules. Keep the interface calm and corporate. */
main::after,
#document-translate::after,
#document-translate-content > div::after,
:is(#text-translate-content, #text-writing-content, #document-writing-content) > div::after,
.file-upload::before,
.file-upload::after,
.file-upload > div:first-child::before,
.file-upload > div:first-child::after,
.step-container::before,
.step-container::after {
  content: none !important;
  display: none !important;
}

/* Sidebar: centered shell and one-line labels. */
body > div > .flex-shrink-0 {
  width: 150px !important;
  min-width: 150px !important;
  padding: 18px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--k-deep) !important;
}
body > div > .flex-shrink-0 nav,
nav.bg-sidebar,
nav[class*="bg-sidebar"] {
  width: 126px !important;
  height: calc(100vh - 36px) !important;
  margin: 0 auto !important;
  padding: 15px 10px !important;
  border-radius: 28px !important;
}
nav a {
  width: 100% !important;
  min-height: 66px !important;
  padding: 10px 6px !important;
  border-radius: 16px !important;
}
nav span,
nav a span,
nav a[class] span[class] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 11.5px !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
}

/* Header: larger KOMETA mark and strictly branded profile/logout controls. */
header.bg-header,
header[class*="bg-header"],
header {
  height: 72px !important;
  min-height: 72px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
header .portal-identity {
  min-height: 54px !important;
  gap: 14px !important;
  /* The identity lost its card look (and its leading logo): kill the old
     card radius/clip so text isn't shaved at the rounded corner and the
     selection outline is square, and give the text a small left inset. */
  border-radius: 0 !important;
  overflow: visible !important;
  padding-left: 14px !important;
}
header .portal-mark {
  width: 57px !important;
  height: 57px !important;
  flex: 0 0 57px !important;
}
header .portal-logo-mark {
  width: 57px !important;
  height: 57px !important;
  max-width: 57px !important;
  max-height: 57px !important;
  object-fit: contain !important;
}
header .portal-title {
  font-size: 16.5px !important;
  line-height: 1.08 !important;
}
header .portal-subtitle {
  font-size: 10.7px !important;
  color: rgba(30,36,51,.72) !important;
}
header .profile-trigger,
header a.profile-trigger,
header a[href*="profile-details"].profile-trigger,
header .profile-trigger:hover,
header .profile-trigger:focus,
header .profile-trigger:focus-visible,
header a[href*="profile-details"].profile-trigger:hover,
header a[href*="profile-details"].profile-trigger:focus {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 15px !important;
  background: var(--k-mist) !important;
  background-image: none !important;
  color: var(--k-ink) !important;
  border: 1px solid rgba(30,36,51,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80), 0 10px 24px rgba(8,15,23,.055) !important;
  outline: none !important;
}
header .profile-trigger svg,
header .profile-trigger:hover svg,
header .profile-trigger:focus svg {
  color: var(--k-blue) !important;
}
header .profile-trigger span,
header .profile-trigger:hover span,
header .profile-trigger:focus span {
  color: var(--k-ink) !important;
}
header form button[type="submit"],
header form button[type="submit"]:hover,
header form button[type="submit"]:focus,
header form button[type="submit"]:focus-visible {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  background: var(--k-ink) !important;
  background-image: none !important;
  color: var(--k-white) !important;
  border: 1px solid var(--k-ink) !important;
  box-shadow: 0 10px 22px rgba(8,15,23,.10) !important;
  outline: none !important;
}

/* Green/legacy hover cleanup: brand colors only for interactive states. */
button:hover,
a:hover,
button:focus,
a:focus {
  outline-color: rgba(37,99,235,.28) !important;
}
button.hover\:bg-button_bg:hover,
a.hover\:bg-button_bg:hover,
button[class*="hover:bg-button_bg"]:hover,
a[class*="hover:bg-button_bg"]:hover,
button.focus\:bg-secondary_button:focus,
a.focus\:bg-secondary_button:focus,
button[class*="focus:bg-secondary_button"]:focus,
a[class*="focus:bg-secondary_button"]:focus {
  background: var(--k-blue) !important;
  background-image: none !important;
  border-color: var(--k-blue) !important;
  color: var(--k-white) !important;
}
.bg-secondary_button,
button.bg-secondary_button,
.glossary-tab.bg-secondary_button {
  background: var(--k-blue) !important;
  background-image: none !important;
  border-color: var(--k-blue) !important;
  color: var(--k-white) !important;
}
.text-gray-200 {
  color: #C8D0DC !important;
}
select:focus,
textarea:focus,
input:focus {
  border-color: var(--k-blue) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10) !important;
  outline: none !important;
}

/* Main first-screen rhythm: document upload fits without vertical scrolling on common laptop heights. */
main {
  overflow-y: auto !important;
}
main .content-shell {
  padding-top: 22px !important;
  padding-bottom: 10px !important;
}
main .content-shell > p.text-5,
main .content-shell > p[class*="text-5"] {
  margin-bottom: 12px !important;
  font-size: 27px !important;
}
main .content-shell > div.my-5 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
#document-translate-content > div,
:is(#text-translate-content, #text-writing-content, #document-writing-content) > div {
  padding: 18px !important;
  border-radius: 25px !important;
}

/* Wizard: the labels are inside the progress field and reserve space for status text. */
#document-translate-content .relative.pt-1 {
  height: 96px !important;
  min-height: 96px !important;
  padding: 0 20px !important;
  margin: 0 0 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(18,27,38,.09) !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90) !important;
  overflow: hidden !important;
}
#document-translate-content .overflow-hidden.h-1\.5,
#document-translate-content div[class*="overflow-hidden"][class*="h-1.5"] {
  position: absolute !important;
  top: 28px !important;
  left: 74px !important;
  right: 74px !important;
  height: 4px !important;
  margin: 0 !important;
  z-index: 1 !important;
  background: #D8DEE9 !important;
  border-radius: 999px !important;
}
#document-translate-content .absolute.w-full.top-0\.5,
#document-translate-content div[class*="absolute"][class*="w-full"][class*="top-0.5"] {
  top: 23px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 0 42px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(112px, 1fr)) !important;
  align-items: start !important;
  justify-content: stretch !important;
  gap: 0 !important;
  z-index: 2 !important;
}
#step-0,
#point-1,
#point-2,
#point-3,
#point-4 {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  align-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  z-index: 3 !important;
}
#step-0 .progress-point,
#point-1 .progress-point,
#point-2 .progress-point,
#point-3 .progress-point,
#point-4 .progress-point {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
  margin: 0 auto !important;
  color: #C8D0DC !important;
}
#step-0 .progress-point {
  color: var(--k-blue) !important;
}
#step-0 > div,
#point-1 > div,
#point-2 > div,
#point-3 > div,
#point-4 > span {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin-top: 10px !important;
  display: grid !important;
  grid-template-rows: 17px 17px !important;
  justify-items: center !important;
  align-items: start !important;
  gap: 1px !important;
  overflow: hidden !important;
}
#point-4 > span {
  grid-template-rows: 17px !important;
}
#point-4::after {
  content: "" !important;
  display: block !important;
  height: 17px !important;
  min-height: 17px !important;
}
#step-0 span,
#point-1 span,
#point-2 span,
#point-3 span,
#point-4 span {
  display: block !important;
  max-width: 150px !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 730 !important;
}
#step-0 span + span,
#point-1 span + span,
#point-2 span + span,
#point-3 span + span,
#point-1 .language-step,
#point-2 .domain-step,
#point-3 .terminology-step {
  min-height: 17px !important;
  max-height: 17px !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  font-weight: 560 !important;
  color: rgba(30,36,51,.55) !important;
}
#point-1 .language-step.hidden {
  display: block !important;
  visibility: hidden !important;
}

/* Upload zone: smaller, centered, and with a prepared uploaded-documents visual state. */
.step-container,
#document-translate-content .step-container {
  padding: 18px !important;
  border-radius: 23px !important;
}
.file-upload,
.step-0.file-upload {
  min-height: 238px !important;
  border-color: rgba(37,99,235,.24) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,249,252,.78)) !important;
}
.file-upload > div:first-child {
  min-height: 238px !important;
  padding: 22px 26px !important;
}
.file-upload > div:first-child > span.text-gray-575,
.file-upload span.text-gray-575,
.file-upload > div:first-child > span:first-child {
  font-size: 24px !important;
  line-height: 1.08 !important;
  margin-bottom: 7px !important;
}
.file-upload > div:first-child > span.text-gray-400 {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.file-upload svg.my-7\.5,
.file-upload svg[class*="my-7.5"] {
  width: 38px !important;
  height: 38px !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
  padding: 9px !important;
  border-radius: 14px !important;
}
/* Upload CTA keeps a generous fixed width inside the dropzone. */
.file-upload .btn { min-width: 256px; }
/* The uploaded-file list must size to its content so the file-name pills show.
   It previously used overflow-y:auto + max-height, but as a scroll container
   inside the upload grid it contributed a ~0 minimum size — its row collapsed
   (~29px) and clipped the pills, so the file name never appeared. Let it grow
   with its content instead (the page scrolls if the list gets long). */
.file-list {
  width: 100% !important;
  margin-top: 16px !important;
  padding: 16px 22px 22px !important;
  border-top: 1px solid rgba(18,27,38,.08) !important;
  gap: 10px !important;
}
.kometa-uploaded-state {
  width: 100% !important;
  margin-top: 14px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: rgba(230,233,239,.48) !important;
  border: 1px solid rgba(18,27,38,.08) !important;
}
.kometa-uploaded-state__title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  color: var(--k-ink) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}
.kometa-uploaded-state__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.kometa-uploaded-state__file {
  min-width: 0 !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(18,27,38,.09) !important;
  color: var(--k-ink-2) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.kometa-uploaded-state__meta {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(30,36,51,.55) !important;
  font-size: 10px !important;
  font-weight: 560 !important;
}

/* Hide empty action strip under upload; reveal it automatically when a control becomes visible. */
#document-translate-content .action-list {
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#document-translate-content .action-list:has(#prev-step[style*="display: none"]):has(#next-step[style*="display: none"]):has(#restart[style*="display: none"]):has(#restart-text[style*="display: none"]) {
  display: none !important;
}
#document-translate-content .action-list:not(:has(#prev-step[style*="display: none"]):has(#next-step[style*="display: none"]):has(#restart[style*="display: none"]):has(#restart-text[style*="display: none"])) {
  display: flex !important;
  margin-top: 12px !important;
}

@media (max-height: 760px) {
  header.bg-header,
  header[class*="bg-header"],
  header { height: 66px !important; min-height: 66px !important; }
  header .portal-mark,
  header .portal-logo-mark { width: 52px !important; height: 52px !important; flex-basis: 52px !important; }
  main .content-shell { padding-top: 16px !important; }
  main .content-shell > p.text-5,
  main .content-shell > p[class*="text-5"] { font-size: 25px !important; margin-bottom: 10px !important; }
  #document-translate-content .relative.pt-1 { height: 88px !important; min-height: 88px !important; margin-bottom: 10px !important; }
  .step-container,
  #document-translate-content .step-container { padding: 16px !important; }
  .file-upload,
  .step-0.file-upload { min-height: 214px !important; }
  .file-upload > div:first-child { min-height: 214px !important; padding: 18px 22px !important; }
  .file-upload > div:first-child > span.text-gray-575,
  .file-upload span.text-gray-575,
  .file-upload > div:first-child > span:first-child { font-size: 22px !important; }
  .file-upload svg.my-7\.5,
  .file-upload svg[class*="my-7.5"] { margin-top: 10px !important; margin-bottom: 10px !important; }
}

@media (max-width: 1024px) {
  body > div > .flex-shrink-0 { width: 136px !important; min-width: 136px !important; }
  body > div > .flex-shrink-0 nav,
  nav.bg-sidebar,
  nav[class*="bg-sidebar"] { width: 116px !important; }
  nav span,
  nav a span,
  nav a[class] span[class] { font-size: 10.8px !important; }
  #document-translate-content .absolute.w-full.top-0\.5,
  #document-translate-content div[class*="absolute"][class*="w-full"][class*="top-0.5"] {
    grid-template-columns: repeat(5, minmax(96px, 1fr)) !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  #document-translate-content .overflow-hidden.h-1\.5,
  #document-translate-content div[class*="overflow-hidden"][class*="h-1.5"] {
    left: 58px !important;
    right: 58px !important;
  }
  .kometa-uploaded-state__grid { grid-template-columns: 1fr !important; }
}


/* Post-visual-check fixes. */
main::before {
  content: none !important;
  display: none !important;
}
html body header form[method="POST"] button[type="submit"],
html body header form[method="POST"] button[type="submit"].bg-button_bg,
html body header form[method="POST"] button[type="submit"]:hover,
html body header form[method="POST"] button[type="submit"].bg-button_bg:hover,
html body header form[method="POST"] button[type="submit"]:focus,
html body header form[method="POST"] button[type="submit"]:focus-visible,
html body header form[action*="logout"] button[type="submit"],
html body header form[action*="logout"] button[type="submit"]:hover,
html body header form[action*="logout"] button[type="submit"]:focus {
  background: var(--k-ink) !important;
  background-color: var(--k-ink) !important;
  background-image: none !important;
  color: var(--k-white) !important;
  border-color: var(--k-ink) !important;
  transform: none !important;
}
#step-0 > div,
#point-1 > div,
#point-2 > div,
#point-3 > div,
#point-4 > span {
  grid-template-rows: 18px 18px !important;
  gap: 2px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}
#step-0 span,
#point-1 span,
#point-2 span,
#point-3 span,
#point-4 span {
  line-height: 1.18 !important;
}
#step-0 span + span,
#point-1 span + span,
#point-2 span + span,
#point-3 span + span,
#point-1 .language-step,
#point-2 .domain-step,
#point-3 .terminology-step {
  min-height: 18px !important;
  max-height: 18px !important;
  line-height: 1.25 !important;
}

/* =========================================================
   Editorial layout pass
   ========================================================= */

html,
body {
  background: var(--k-mist) !important;
  color: var(--k-ink) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body * {
  font-family: inherit !important;
}

body > div.flex.h-screen.overflow-hidden {
  background:
    radial-gradient(circle at 72% 4%, rgba(255,122,26,.075), transparent 25%),
    linear-gradient(180deg, #F7F9FC 0%, #E6E9EF 100%) !important;
}

/* Palette hard lock: old green/teal utilities are neutralized visually. */
.text-main,
.hover\:text-main:hover,
.focus\:text-main:focus,
.text-active_sidebar_text_icon,
.group:hover .group-hover\:text-active_sidebar_text_icon {
  color: var(--k-blue) !important;
}
.bg-main,
.hover\:bg-main:hover,
.focus\:bg-main:focus,
.bg-active_sidebar_link,
.hover\:bg-active_sidebar_link:hover {
  background-color: var(--k-blue) !important;
}
.border-main,
.hover\:border-main:hover,
.focus\:border-main:focus {
  border-color: var(--k-blue) !important;
}
.text-gray-200 {
  color: #C8D0DC !important;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(37,99,235,.20) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px rgba(37,99,235,.35) !important;
}

/* App shell: centered sidebar panel and balanced content width. */
body > div > .flex-shrink-0 {
  width: 168px !important;
  min-width: 168px !important;
  background: var(--k-deep) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  padding: 18px 0 !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04) !important;
}
body > div > .flex-shrink-0 nav,
nav.bg-sidebar,
nav[class*="bg-sidebar"] {
  width: 128px !important;
  height: calc(100vh - 36px) !important;
  max-height: calc(100vh - 36px) !important;
  margin: 0 auto !important;
  padding: 16px 10px 18px !important;
  border-radius: 30px !important;
  background:
    linear-gradient(180deg, rgba(30,36,51,.72), rgba(8,15,23,.98)) !important;
  border: 1px solid rgba(230,233,239,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 48px rgba(8,15,23,.34) !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}
/* KOMETA mark tile at the sidebar top (monochrome white icon on brand
   blue — the brand-board interface variant; the colored icon's blue dot
   would blend into this background). */
nav .portal-sidebar-mark {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 20px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, var(--k-blue), #153A8A) !important;
  box-shadow: 0 18px 36px rgba(37,99,235,.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
nav .portal-sidebar-mark img {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}
nav ul {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
nav ul:first-child { margin-top: 0 !important; }
nav ul + ul {
  margin-top: auto !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(230,233,239,.10) !important;
}
nav li { width: 100% !important; }
nav a,
nav a[href] {
  width: 100% !important;
  min-height: 64px !important;
  padding: 9px 8px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  background: rgba(230,233,239,.045) !important;
  border: 1px solid rgba(230,233,239,.08) !important;
  color: rgba(230,233,239,.78) !important;
  box-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease !important;
}
nav a:hover,
nav a:focus-visible {
  transform: translateY(-1px) !important;
  background: rgba(37,99,235,.16) !important;
  border-color: rgba(37,99,235,.46) !important;
  color: #FFFFFF !important;
}
nav a.bg-active_sidebar_link,
nav a#nav-translation.bg-active_sidebar_link {
  background: linear-gradient(180deg, #2563EB, #1D4ED8) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 24px rgba(37,99,235,.24) !important;
}
nav a span,
nav a span.font-normal {
  max-width: 104px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  opacity: .88 !important;
}
nav a svg {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
}
nav a .relative span.absolute,
nav .absolute.-top-3,
nav span[class*="BETA"] {
  background: #FFFFFF !important;
  color: rgba(8,15,23,.72) !important;
  border: 1px solid rgba(18,27,38,.12) !important;
  box-shadow: 0 3px 8px rgba(8,15,23,.10) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  opacity: .92 !important;
}

/* Header: stricter, calmer, precise. */
body > div > .flex-1 {
  min-width: 0 !important;
  background: transparent !important;
}
header,
header.bg-header {
  height: 72px !important;
  min-height: 72px !important;
  padding: 10px var(--content-gutter) 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}
header > div {
  width: min(100%, var(--content-max)) !important;
  margin: 0 auto !important;
  height: 54px !important;
  padding: 0 12px 0 20px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(18,27,38,.07) !important;
  box-shadow: 0 16px 42px rgba(8,15,23,.08) !important;
  backdrop-filter: blur(12px);
}
header .portal-identity {
  height: 54px !important;
  min-width: 0 !important;
  max-width: 540px !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  /* small left inset so the text doesn't sit flush on the header edge */
  padding: 0 0 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
header .portal-identity::after { display: none !important; }
header .portal-mark {
  width: 50px !important;
  height: 38px !important;
  flex: 0 0 50px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
header .portal-logo-mark {
  display: block !important;
  width: 48px !important;
  height: 38px !important;
  object-fit: contain !important;
  filter: none !important;
}
header .portal-title {
  color: var(--k-ink) !important;
  font-size: 16px !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
}
header .portal-subtitle {
  margin-top: 4px !important;
  color: var(--k-text-soft) !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: .11em !important;
}
header .flex.gap-5.items-center.font-semibold {
  gap: 10px !important;
}
header .profile-trigger,
header a[href*="profile-details"] {
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  background: #E6E9EF !important;
  color: var(--k-ink) !important;
  border: 1px solid #C8D0DC !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}
header .profile-trigger:hover,
header a[href*="profile-details"]:hover {
  background: #EDF1F7 !important;
  border-color: rgba(37,99,235,.42) !important;
  transform: translateY(-1px) !important;
}
header .profile-trigger svg,
header a[href*="profile-details"] svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--k-blue) !important;
}
header form[method="POST"] button[type="submit"],
header button[type="submit"].bg-button_bg {
  height: 42px !important;
  border-radius: 17px !important;
  padding: 0 20px !important;
  background: var(--k-ink) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 20px rgba(8,15,23,.16) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}
header form[method="POST"] button[type="submit"]:hover,
header form[method="POST"] button[type="submit"]:focus-visible {
  background: var(--k-ink-2) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

/* Main canvas: no hidden scroll debt on the first screen. */
main {
  background:
    radial-gradient(circle at 3% 6%, rgba(37,99,235,.09), transparent 18%),
    radial-gradient(circle at 92% 8%, rgba(255,122,26,.055), transparent 20%),
    linear-gradient(180deg, #F7F9FC 0%, #EEF1F6 100%) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
main::before {
  opacity: .24 !important;
  background-image:
    linear-gradient(115deg, rgba(37,99,235,.045) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(255,122,26,.10) 0 1px, transparent 1.6px) !important;
  background-size: 54px 54px, 32px 32px !important;
}
main::after,
#document-translate::after,
#document-translate-content > div::after,
:is(#text-translate-content, #text-writing-content, #document-writing-content) > div::after,
.step-container::after,
.file-upload::after,
.file-upload::before {
  display: none !important;
  content: none !important;
}
main .content-shell {
  padding: 22px 0 10px !important;
}
main p.text-5.font-bold.my-5 {
  position: relative !important;
  /* Indented so the marker dot sits clear of the cards' rounded corners. */
  margin: 0 0 18px 14px !important;
  padding-left: 20px !important;
  color: var(--k-ink) !important;
  font-size: 40px !important;
  line-height: .95 !important;
  font-weight: 860 !important;
  letter-spacing: -.055em !important;
}
main p.text-5.font-bold.my-5::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .42em !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--k-blue) !important;
  box-shadow: 0 0 0 5px rgba(37,99,235,.10) !important;
}
main .flex.justify-between.items-center {
  align-items: center !important;
}
/* (tab trays are styled by .tab-tray in components.css) */
/* Document panel: designed to fit the visible viewport. */
main .my-5 { margin-top: 14px !important; margin-bottom: 0 !important; }
#document-translate-content,
:is(#text-translate-content, #text-writing-content, #document-writing-content) {
  width: 100% !important;
}
#document-translate-content > div,
:is(#text-translate-content, #text-writing-content, #document-writing-content) > div {
  height: auto !important;
  min-height: 0 !important;
  border-radius: 26px !important;
  padding: 16px 18px 18px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(18,27,38,.08) !important;
  box-shadow: 0 24px 70px rgba(8,15,23,.10) !important;
}

/* Wizard: one stable field with rail, aligned labels, reserved status text. */
#document-translate-content > div > div.w-full:first-child {
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 24px 30px 18px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(18,27,38,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90) !important;
}
#document-translate-content .relative.pt-1 {
  position: relative !important;
  height: 76px !important;
  padding: 0 !important;
}
#document-translate-content .overflow-hidden.h-1\.5,
#document-translate-content div[class*="overflow-hidden"][class*="h-1.5"] {
  position: absolute !important;
  left: 62px !important;
  right: 62px !important;
  top: 23px !important;
  height: 4px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #D8DEE9 !important;
  overflow: visible !important;
}
#progress-bar {
  height: 4px !important;
  min-height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--k-blue), var(--k-blue-hover)) !important;
  box-shadow: none !important;
}
#document-translate-content .flex.justify-between.absolute.w-full.top-0\.5,
#document-translate-content div[class*="justify-between"][class*="absolute"][class*="top-0.5"] {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 0 !important;
}
#step-0,
#point-1,
#point-2,
#point-3,
#point-4 {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 76px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  color: var(--k-text-muted) !important;
  position: relative !important;
}
#step-0 svg.progress-point,
#point-1 svg.progress-point,
#point-2 svg.progress-point,
#point-3 svg.progress-point,
#point-4 svg.progress-point {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  margin: 18px 0 10px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  color: #C8D0DC !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 6px rgba(18,27,38,.09) !important;
  position: relative !important;
  z-index: 2 !important;
}
#step-0 svg.progress-point {
  color: var(--k-blue) !important;
  box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 6px rgba(37,99,235,.24), 0 8px 18px rgba(37,99,235,.18) !important;
}
#step-0 > div,
#point-1 > div,
#point-2 > div,
#point-3 > div,
#point-4 > div {
  width: 100% !important;
  min-height: 35px !important;
  max-height: 35px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  overflow: hidden !important;
}
#step-0 span,
#point-1 span,
#point-2 span,
#point-3 span,
#point-4 span {
  display: block !important;
  max-width: 100% !important;
  text-align: center !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#step-0 > div > span:first-child,
#point-1 > div > span:first-child,
#point-2 > div > span:first-child,
#point-3 > div > span:first-child,
#point-4 > div > span:first-child {
  height: 14px !important;
  color: var(--k-ink) !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
}
#point-1 > div > span:first-child,
#point-2 > div > span:first-child,
#point-3 > div > span:first-child,
#point-4 > div > span:first-child {
  color: #536174 !important;
}
#step-0 > div > span:nth-child(2),
#point-1 > div > span:nth-child(2),
#point-2 > div > span:nth-child(2),
#point-3 > div > span:nth-child(2),
#point-4 > div > span:nth-child(2),
#point-1 .language-step,
#point-2 .domain-step,
#point-3 .glossary-step {
  min-height: 13px !important;
  height: 13px !important;
  color: #8792A3 !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  line-height: 1.05 !important;
  max-width: min(130px, 100%) !important;
  visibility: visible !important;
}
#point-1 .language-step.hidden {
  display: block !important;
  visibility: hidden !important;
}

/* Upload area: compact, centered, premium. */
.step-container,
#document-translate-content .step-container {
  padding: 18px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #F7F9FC, #FFFFFF) !important;
  border: 1px solid rgba(18,27,38,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.file-upload,
.step-0.file-upload {
  min-height: 220px !important;
  height: 220px !important;
  border-radius: 20px !important;
  border: 1px dashed rgba(37,99,235,.28) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,247,250,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90) !important;
  overflow: hidden !important;
}
.file-upload > div:first-child {
  min-height: 220px !important;
  height: 220px !important;
  padding: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.file-upload .text-6,
.file-upload span.text-gray-575 {
  margin: 0 0 10px !important;
  color: var(--k-ink) !important;
  font-size: 25px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: -.045em !important;
}
.file-upload span.text-gray-400,
.file-upload span.text-gray-425 {
  color: var(--k-text-soft) !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  font-weight: 560 !important;
}
.file-upload svg.my-7\.5,
.file-upload svg.w-10.h-10 {
  width: 34px !important;
  height: 34px !important;
  margin: 14px 0 !important;
  color: var(--k-blue) !important;
}
.file-upload svg path[fill="#8A96A8"] { fill: #8A96A8 !important; }
.file-upload svg path[fill="#C8D0DC"] { fill: #C8D0DC !important; }
.file-list.hidden + .kometa-uploaded-state.hidden {
  display: none !important;
}
.kometa-uploaded-state {
  margin-top: 12px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #F4F7FA !important;
  border: 1px solid rgba(37,99,235,.16) !important;
}
.kometa-uploaded-state__title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 8px !important;
  color: var(--k-ink) !important;
  font-size: 12px !important;
  font-weight: 820 !important;
}
.kometa-uploaded-state__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.kometa-uploaded-state__file {
  padding: 9px 10px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(18,27,38,.08) !important;
  color: var(--k-ink) !important;
  font-size: 11.5px !important;
  font-weight: 760 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.kometa-uploaded-state__meta {
  display: block !important;
  margin-top: 2px !important;
  color: #8792A3 !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
}

/* Hide empty action strip unless Django/JS reveals real controls. */
#document-translate-content .action-list:empty,
#document-translate-content .action-list.hidden,
#document-translate-content .action-list:not(:has(button:not(.hidden), a:not(.hidden), span:not(.hidden), p:not(.hidden))) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
#document-translate-content .action-list {
  margin-top: 12px !important;
  /* Plain button row, not a panel: no border-top rule/box. The 34px horizontal
     inset matches the .w-full wrapper around the stepper and step card
     (padding: 24px 34px 26px), so the nav buttons line up with the card above
     instead of overhanging it by ~34px on each side. */
  padding: 4px 34px 0 !important;
  border-top: 0 !important;
}
/* Track the wrapper's horizontal inset at each breakpoint so the nav buttons
   stay aligned with the step card (see .w-full:first-child padding overrides). */
@media (max-width: 1024px) {
  #document-translate-content .action-list { padding: 4px 22px 0 !important; }
}
@media (max-width: 640px) {
  #document-translate-content .action-list { padding: 4px 18px 0 !important; }
}

/* Generic form controls/buttons: no green hover/focus leak. */
button,
a,
select,
input,
textarea {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
input,
textarea,
select,
.select2-container .select2-selection {
  border-color: #C8D0DC !important;
  background-color: #FFFFFF !important;
  color: var(--k-ink) !important;
}
input:hover,
textarea:hover,
select:hover,
.select2-container .select2-selection:hover {
  border-color: rgba(37,99,235,.42) !important;
}
input:focus,
textarea:focus,
select:focus,
.select2-container--focus .select2-selection {
  border-color: var(--k-blue) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.13) !important;
}

/* Footer: restrained, not competing with the workflow. */
footer {
  height: 48px !important;
  min-height: 48px !important;
  padding: 8px var(--content-gutter) 12px !important;
  background: transparent !important;
}
footer .portal-footer-brand {
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--k-text-soft) !important;
  font-size: 12px !important;
}
footer .portal-footer-label {
  color: var(--k-text-soft) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
footer .portal-footer-logo-link {
  height: 34px !important;
  min-width: 108px !important;
  padding: 0 15px !important;
  border-radius: 13px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(18,27,38,.08) !important;
  box-shadow: 0 8px 20px rgba(8,15,23,.07) !important;
}
footer .portal-footer-logo {
  width: 82px !important;
  height: auto !important;
  max-height: 17px !important;
  object-fit: contain !important;
}

@media (max-height: 820px) {
  header { height: 66px !important; min-height: 66px !important; padding-top: 8px !important; padding-bottom: 6px !important; }
  header > div { height: 52px !important; }
  main .content-shell { padding-top: 16px !important; }
  main p.text-5.font-bold.my-5 { font-size: 36px !important; margin-bottom: 14px !important; }
  .tab { min-height: 40px !important; height: 40px !important; }
  #document-translate-content > div, :is(#text-translate-content, #text-writing-content, #document-writing-content) > div { padding: 14px 16px 16px !important; }
  #document-translate-content > div > div.w-full:first-child { padding: 20px 26px 14px !important; margin-bottom: 12px !important; }
  #document-translate-content .relative.pt-1 { height: 70px !important; }
  .step-container, #document-translate-content .step-container { padding: 16px !important; }
  .file-upload, .step-0.file-upload, .file-upload > div:first-child { min-height: 200px !important; height: 200px !important; }
  .file-upload .text-6, .file-upload span.text-gray-575 { font-size: 23px !important; }
  .file-upload svg.my-7\.5, .file-upload svg.w-10.h-10 { margin: 10px 0 !important; width: 30px !important; height: 30px !important; }
  footer { height: 42px !important; min-height: 42px !important; padding-top: 6px !important; padding-bottom: 8px !important; }
}

@media (max-width: 1024px) {
  body > div > .flex-shrink-0 { width: 150px !important; min-width: 150px !important; }
  body > div > .flex-shrink-0 nav { width: 122px !important; }
  header { padding-left: 22px !important; padding-right: 22px !important; }

  .kometa-uploaded-state__grid { grid-template-columns: 1fr !important; }
}

/* =========================================================
   Layout QC pass
   ========================================================= */

/* 1) Interactive states: hover changes color only. No jump, no radius change, no transform. */
html body button,
html body a,
html body [role="button"],
html body .tab,
html body .choose-file,
html body .profile-trigger,
html body nav a,
html body header form[method="POST"] button[type="submit"] {
  transform: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}
html body button:hover,
html body button:focus,
html body button:focus-visible,
html body a:hover,
html body a:focus,
html body a:focus-visible,
html body .tab:hover,
html body .tab:focus-visible,
html body .choose-file:hover,
html body .choose-file:focus-visible,
html body nav a:hover,
html body nav a:focus-visible,
html body header .profile-trigger:hover,
html body header .profile-trigger:focus-visible,
html body header a[href*="profile-details"]:hover,
html body header a[href*="profile-details"]:focus-visible,
html body header form[method="POST"] button[type="submit"]:hover,
html body header form[method="POST"] button[type="submit"]:focus-visible,
html body .file-upload button:hover,
html body .file-upload button:focus-visible,
html body button.bg-button_bg:not(header button):hover,
html body button.expert-revision:not(header button):hover,
html body #invite-btn:hover,
html body #openModal:hover {
  transform: none !important;
}

/* 2) Sidebar: remove the odd orange active dot and use a calm blue side marker. */
html body nav a.bg-active_sidebar_link,
html body nav a#nav-translation.bg-active_sidebar_link {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #FFFFFF !important;
  box-shadow: inset 4px 0 0 rgba(255,255,255,.34), 0 12px 24px rgba(37,99,235,.24) !important;
}
html body nav a.bg-active_sidebar_link::after,
html body nav a#nav-translation.bg-active_sidebar_link::after {
  content: none !important;
  display: none !important;
}
html body nav a.bg-active_sidebar_link::before,
html body nav a#nav-translation.bg-active_sidebar_link::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 3px !important;
  border-radius: 0 999px 999px 0 !important;
  background: #FFFFFF !important;
  opacity: .92 !important;
}
html body nav a:hover,
html body nav a:focus-visible {
  background: rgba(37,99,235,.16) !important;
  border-color: rgba(37,99,235,.42) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
html body nav a.bg-active_sidebar_link:hover,
html body nav a#nav-translation.bg-active_sidebar_link:hover {
  background: linear-gradient(180deg, #1D4ED8 0%, #153A8A 100%) !important;
  box-shadow: inset 4px 0 0 rgba(255,255,255,.34), 0 12px 24px rgba(37,99,235,.24) !important;
}

/* 3) BETA badge: keep it inside the AI editor tile without overlapping the icon or label. */
html body nav a[href*="/writing/"] {
  position: relative !important;
  padding-top: 13px !important;
  padding-bottom: 10px !important;
}
html body nav a[href*="/writing/"] > div.relative {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 24px !important;
}
html body nav a[href*="/writing/"] span.absolute,
html body nav a[href*="/writing/"] .absolute.-top-3,
html body nav a[href*="/writing/"] span[class*="absolute"] {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  width: auto !important;
  min-width: 26px !important;
  height: 16px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: rgba(8,15,23,.72) !important;
  border: 1px solid rgba(18,27,38,.14) !important;
  box-shadow: 0 3px 8px rgba(8,15,23,.10) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  opacity: .92 !important;
}
html body nav a[href*="/writing/"] > span.font-normal {
  margin-top: 7px !important;
  width: 100% !important;
  white-space: nowrap !important;
}

/* 4) Header controls: hover keeps geometry fixed. */
html body header .profile-trigger,
html body header a[href*="profile-details"] {
  background: #E6E9EF !important;
  border-color: #C8D0DC !important;
  color: #121B26 !important;
}
html body header .profile-trigger:hover,
html body header a[href*="profile-details"]:hover,
html body header .profile-trigger:focus-visible,
html body header a[href*="profile-details"]:focus-visible {
  background: #F4F7FA !important;
  border-color: rgba(37,99,235,.45) !important;
  color: #121B26 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 3px rgba(37,99,235,.10) !important;
}
html body header form[method="POST"] button[type="submit"],
html body header button[type="submit"].bg-button_bg {
  background: #121B26 !important;
  color: #FFFFFF !important;
  border-color: rgba(18,27,38,.18) !important;
}
html body header form[method="POST"] button[type="submit"]:hover,
html body header button[type="submit"].bg-button_bg:hover {
  background: #1E2433 !important;
  color: #FFFFFF !important;
  border-color: rgba(30,36,51,.24) !important;
}

/* 5) Wizard: labels sit inside the same field, aligned under the rail, with reserved status line. */
html body #document-translate-content > div > div.w-full:first-child {
  padding: 26px 36px 24px !important;
  overflow: visible !important;
}
html body #document-translate-content .relative.pt-1 {
  height: 96px !important;
  min-height: 96px !important;
  padding: 0 !important;
  overflow: visible !important;
}
html body #document-translate-content .overflow-hidden.h-1\.5,
html body #document-translate-content div[class*="overflow-hidden"][class*="h-1.5"] {
  left: 70px !important;
  right: 70px !important;
  top: 25px !important;
  height: 4px !important;
  overflow: visible !important;
  background: #D8DEE9 !important;
}
html body #document-translate-content .flex.justify-between.absolute.w-full.top-0\.5,
html body #document-translate-content div[class*="justify-between"][class*="absolute"][class*="top-0.5"] {
  inset: 0 !important;
  height: 96px !important;
  min-height: 96px !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: start !important;
}
html body #step-0,
html body #point-1,
html body #point-2,
html body #point-3,
html body #point-4 {
  height: 96px !important;
  min-height: 96px !important;
  width: 100% !important;
  padding: 0 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  overflow: visible !important;
}
html body #step-0 svg.progress-point,
html body #point-1 svg.progress-point,
html body #point-2 svg.progress-point,
html body #point-3 svg.progress-point,
html body #point-4 svg.progress-point {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 17px 0 15px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  position: relative !important;
  z-index: 3 !important;
}
html body #step-0 > div,
html body #point-1 > div,
html body #point-2 > div,
html body #point-3 > div {
  width: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: 17px 17px !important;
  row-gap: 3px !important;
  align-items: start !important;
  justify-items: center !important;
  overflow: visible !important;
}
html body #point-4 > span {
  width: 100% !important;
  min-height: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  text-align: center !important;
  color: #121B26 !important;
  font-size: 12px !important;
  line-height: 17px !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
}
html body #point-4::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 17px !important;
  min-height: 17px !important;
}
html body #step-0 span,
html body #point-1 span,
html body #point-2 span,
html body #point-3 span,
html body #point-4 span {
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* Language-pair status renders "XX -> YY" on one line: the wrapper lays out
   source, arrow and target side by side; .hidden keeps meaning (the grid row
   above reserves the height, so nothing shifts). */
html body #point-1 .language-step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
html body #point-1 .language-step.hidden {
  display: none !important;
}
html body #point-1 .language-step .source,
html body #point-1 .language-step .target {
  display: inline !important;
  width: auto !important;
}
html body #point-1 .language-step svg {
  width: 10px !important;
  height: 8px !important;
  flex-shrink: 0 !important;
}
html body #step-0 > div > span:first-child,
html body #point-1 > div > span:first-child,
html body #point-2 > div > span:first-child,
html body #point-3 > div > span:first-child {
  height: 17px !important;
  min-height: 17px !important;
  color: #121B26 !important;
  font-size: 12px !important;
  line-height: 17px !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
}
html body #point-1 > div > span:first-child,
html body #point-2 > div > span:first-child,
html body #point-3 > div > span:first-child {
  color: #536174 !important;
}
html body #step-0 > div > span:nth-child(2),
html body #point-1 > div > span:nth-child(2),
html body #point-2 > div > span:nth-child(2),
html body #point-3 > div > span:nth-child(2),
html body #point-1 .language-step,
html body #point-2 .domain-step,
html body #point-3 .terminology-step,
html body #point-3 .glossary-step {
  width: 100% !important;
  max-width: 100% !important;
  height: 17px !important;
  min-height: 17px !important;
  color: #8792A3 !important;
  font-size: 11px !important;
  line-height: 17px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #point-1 .language-step.hidden,
html body #point-2 .domain-step.hidden,
html body #point-3 .terminology-step.hidden,
html body #point-3 .glossary-step.hidden,
html body #point-1 > div > span:nth-child(2).hidden,
html body #point-2 > div > span:nth-child(2).hidden,
html body #point-3 > div > span:nth-child(2).hidden {
  display: block !important;
  visibility: hidden !important;
}


@media (max-height: 820px) {
  html body #document-translate-content .relative.pt-1 {
    height: 90px !important;
    min-height: 90px !important;
  }
  html body #document-translate-content .flex.justify-between.absolute.w-full.top-0\.5,
  html body #document-translate-content div[class*="justify-between"][class*="absolute"][class*="top-0.5"] {
    height: 90px !important;
    min-height: 90px !important;
  }
  html body #step-0,
  html body #point-1,
  html body #point-2,
  html body #point-3,
  html body #point-4 {
    height: 90px !important;
    min-height: 90px !important;
  }
}

/* Header controls keep fixed geometry on hover/focus. */
html body header form[method="POST"] button[type="submit"],
html body header button[type="submit"].bg-button_bg,
html body header form[action*="logout"] button[type="submit"] {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 78px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 20px !important;
  line-height: 42px !important;
  border: 1px solid rgba(18,27,38,.18) !important;
  border-radius: 17px !important;
  transform: none !important;
}
html body header form[method="POST"] button[type="submit"]:hover,
html body header form[method="POST"] button[type="submit"]:focus,
html body header form[method="POST"] button[type="submit"]:focus-visible,
html body header button[type="submit"].bg-button_bg:hover,
html body header form[action*="logout"] button[type="submit"]:hover {
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(30,36,51,.24) !important;
  border-radius: 17px !important;
  line-height: 42px !important;
  transform: none !important;
}

/* Profile identity is a link, not a button/pill. */
html body header .flex.gap-5.items-center.font-semibold {
  gap: 22px !important;
  align-items: center !important;
}
html body header a.profile-trigger,
html body header a.profile-trigger[href*="profile-details"],
html body header a[href*="profile-details"].profile-trigger,
html body header a[href*="profile-details"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  color: #121B26 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transform: none !important;
  transition: color .18s ease, opacity .18s ease !important;
}
html body header a.profile-trigger svg,
html body header a[href*="profile-details"] svg {
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  color: #2563EB !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color .18s ease, opacity .18s ease !important;
}
html body header a.profile-trigger span,
html body header a[href*="profile-details"] span {
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px !important;
  transition: color .18s ease, text-decoration-color .18s ease !important;
}
html body header a.profile-trigger:hover,
html body header a.profile-trigger:focus,
html body header a.profile-trigger:focus-visible,
html body header a[href*="profile-details"]:hover,
html body header a[href*="profile-details"]:focus,
html body header a[href*="profile-details"]:focus-visible {
  color: #2563EB !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}
html body header a.profile-trigger:hover span,
html body header a.profile-trigger:focus-visible span,
html body header a[href*="profile-details"]:hover span,
html body header a[href*="profile-details"]:focus-visible span {
  text-decoration-color: #2563EB !important;
}
html body header a.profile-trigger:hover svg,
html body header a.profile-trigger:focus-visible svg,
html body header a[href*="profile-details"]:hover svg,
html body header a[href*="profile-details"]:focus-visible svg {
  color: #2563EB !important;
  opacity: .86 !important;
}
/* Keep nearby action stable: hover changes only color, not geometry. */
html body header form[action*="logout"] button,
html body header form[action*="logout"] button:hover,
html body header form[action*="logout"] button:focus-visible {
  transform: none !important;
}

/* V10 specificity lock: account identity is a plain clickable link, never a pill/button. */
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"],
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:hover,
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:focus,
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:focus-visible,
html body header a.profile-trigger.profile-trigger[href*="profile-details"],
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:hover,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:focus,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:focus-visible {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  color: #121B26 !important;
  font-size: 15px !important;
  line-height: 28px !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transform: none !important;
  transition: color .18s ease, opacity .18s ease !important;
}
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:hover,
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:focus-visible,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:hover,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:focus-visible {
  color: #2563EB !important;
  opacity: 1 !important;
}
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"] svg,
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:hover svg,
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:focus-visible svg,
html body header a.profile-trigger.profile-trigger[href*="profile-details"] svg,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:hover svg,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:focus-visible svg {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #2563EB !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:hover svg,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:hover svg {
  opacity: .84 !important;
}
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"] span,
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:hover span,
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:focus-visible span,
html body header a.profile-trigger.profile-trigger[href*="profile-details"] span,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:hover span,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:focus-visible span {
  display: inline-block !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: transparent !important;
  transition: color .18s ease, text-decoration-color .18s ease !important;
}
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:hover span,
html body header a.flex.items-center.gap-2.cursor-pointer.profile-trigger.text-header_text[href*="profile-details"]:focus-visible span,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:hover span,
html body header a.profile-trigger.profile-trigger[href*="profile-details"]:focus-visible span {
  text-decoration-color: #2563EB !important;
}

/* Safe front-end polish. Scoped to the translator screen; no backend contracts are changed. */

body.font-montserrat {
  background:
    radial-gradient(circle at 78% 12%, rgba(12, 104, 232, 0.12), transparent 28rem),
    radial-gradient(circle at 24% 8%, rgba(255, 163, 4, 0.08), transparent 22rem),
    #F5F8FC !important;
}

#document-translate-content > div {
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88)),
    radial-gradient(circle at 75% 0%, rgba(12,104,232,0.08), transparent 38%) !important;
  box-shadow: 0 24px 70px rgba(8, 15, 23, 0.10) !important;
}

#document-translate-content .relative.pt-1 {
  border: 1px solid rgba(12, 104, 232, 0.09) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.64) !important;
}

#document-translate-content .progress-point {
  filter: drop-shadow(0 8px 18px rgba(8, 15, 23, 0.10)) !important;
}

#document-translate-content .border-line.step-container {
  color: var(--k-safe-ink) !important;
}

#document-translate-content .file-upload.step-0 {
  position: relative !important;
  min-height: 230px !important;
  border: 1px dashed rgba(12, 104, 232, 0.22) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.74), rgba(248,251,255,0.92)),
    radial-gradient(circle at 50% 8%, rgba(12,104,232,0.10), transparent 42%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 14px 36px rgba(8,15,23,0.05) !important;
  overflow: hidden !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

/* The dropzone is a fixed-height, overflow-hidden box. Once a file is chosen the
   .file-list occupies the upload grid's second row, which fell outside that box
   and got clipped — so the file name never showed. Let the zone grow with its
   content (min-height keeps the empty dropzone at its designed size) and stop
   clipping so the file pills are visible. */
#document-translate-content .file-upload.step-0 {
  height: auto !important;
  overflow: visible !important;
}

/* Uploaded-files layout: the chips render ABOVE the dropzone (grid `order`,
   so the many `> div:first-child` rules keep targeting the zone), and once
   files exist (.has-files, toggled by JS) the zone collapses to a compact
   "add more" strip — no scrolling to find the uploaded file's name under a
   mostly-empty full-size dropzone. */
#document-translate-content .file-upload .file-list {
  order: -1;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(15, 44, 52, .10) !important;
  padding: 16px 18px !important;
  margin: 0 !important;
}
/* Long file names wrap inside their chip instead of pushing it past the
   container edge (visible on narrow screens). */
#document-translate-content .file-list .file {
  max-width: 100% !important;
}
#document-translate-content .file-list .file span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
/* (the .has-files compact-zone rules live at the end of this file — they
   must outrank the later step-0 geometry and typography layers) */

/* File chips: the generic .file-upload heading styles (24px, bottom margin)
   otherwise leak into the file-name span and blow the chip out. Reset to a
   compact chip. */
#document-translate-content .file-list .file span,
.file-list .file span {
  font-size: 14px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* The remove (×) control otherwise inherits the generic button pill sizing
   (min-width 256px / min-height 44px) and dominates the chip. Make it a
   compact icon button. */
#document-translate-content .file-list .file .remove-file,
.file-list .file .remove-file {
  min-width: 0 !important;
  min-height: 0 !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#document-translate-content .file-upload.step-0::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  border-radius: 18px !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(12,104,232,0.08) 50%, transparent 52% 100%),
    linear-gradient(0deg, transparent 0 48%, rgba(12,104,232,0.06) 50%, transparent 52% 100%) !important;
  background-size: 76px 76px !important;
  opacity: .55 !important;
}

#document-translate-content .file-upload.step-0::after {
  content: "" !important;
  position: absolute !important;
  left: 12% !important;
  right: 12% !important;
  top: -40% !important;
  height: 32% !important;
  pointer-events: none !important;
  opacity: .0 !important;
  background: linear-gradient(180deg, transparent, rgba(12, 104, 232, 0.12), transparent) !important;
  transform: skewY(-7deg) !important;
}

#document-translate-content .file-upload.step-0 > div:first-child {
  position: relative !important;
  z-index: 1 !important;
  min-height: 230px !important;
  padding: 28px 18px !important;
}

#document-translate-content .file-upload.step-0 > div:first-child > span:first-child {
  color: var(--k-safe-ink) !important;
  font-size: 26px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

#document-translate-content .file-upload.step-0 > div:first-child > span:nth-child(2) {
  max-width: 760px !important;
  text-align: center !important;
  line-height: 1.45 !important;
  color: var(--k-safe-muted) !important;
}

#document-translate-content .file-upload.step-0 svg.my-7\.5 {
  display: block !important;
  width: 54px !important;
  height: 64px !important;
  margin-top: 18px !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--k-safe-blue-2) !important;
}


#document-translate-content .file-upload.step-0.is-dragging {
  transform: translateY(-1px) !important;
  border-color: rgba(12, 104, 232, 0.50) !important;
  box-shadow: 0 22px 46px rgba(12,104,232,0.12), inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

#document-translate-content .file-upload.step-0.is-dragging::after {
  opacity: 1 !important;
  animation: k-safe-scan 1.2s ease-in-out infinite !important;
}

@keyframes k-safe-scan {
  from { transform: translateY(0) skewY(-7deg); }
  to { transform: translateY(520%) skewY(-7deg); }
}

/* Django integration fixes for the live portal templates. */
main p.text-5.font-bold.my-5,
main .content-shell > p.text-5,
main .content-shell > p[class*="text-5"] {
  display: block !important;
  position: relative !important;
  width: fit-content !important;
  /* Indented so the marker dot sits clear of the cards' rounded corners. */
  margin: 6px 0 20px 14px !important;
  padding: 0 0 0 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #121B26 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.02 !important;
  font-weight: 820 !important;
  letter-spacing: -0.055em !important;
  text-transform: none !important;
}

main p.text-5.font-bold.my-5::before,
main .content-shell > p.text-5::before,
main .content-shell > p[class*="text-5"]::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.42em !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #2563EB !important;
  box-shadow: 0 0 0 5px rgba(37,99,235,.10) !important;
}

main p.text-5.font-bold.my-5::after,
main .content-shell > p.text-5::after,
main .content-shell > p[class*="text-5"]::after {
  content: "" !important;
  display: inline-block !important;
  width: 64px !important;
  height: 18px !important;
  margin-left: 16px !important;
  vertical-align: middle !important;
  transform: translateY(1px) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(37,99,235,.22) 0 49%, rgba(255,255,255,.92) 49% 51%, rgba(37,99,235,.12) 51% 100%) !important;
  border: 1px solid rgba(37,99,235,.20) !important;
  box-shadow: 0 10px 28px rgba(37,99,235,.10) !important;
}

header .portal-mark::before,
header .portal-mark::after,
header .portal-mark-pill {
  display: none !important;
}

header .portal-logo-mark {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

@media (max-width: 900px) {
  body > div.flex.h-screen.overflow-hidden,
  body > div:first-child {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  body > div > .flex-shrink-0 {
    display: none !important;
  }

  body > div > .flex-1.flex.flex-col.overflow-hidden {
    display: flex !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  header.bg-header,
  header[class*="bg-header"] {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 12px 8px !important;
  }

  header > div {
    height: auto !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px 10px !important;
  }

  header .portal-identity {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  header .portal-title,
  header .portal-subtitle {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  header .flex.gap-5.items-center {
    gap: 8px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  header .profile-trigger span {
    display: none !important;
  }

  main.h-full,
  main {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 12px 18px !important;
    overflow: visible !important;
  }

  main .content-shell,
  main .content-shell {
    width: 100% !important;
    max-width: none !important;
    padding-top: 12px !important;
  }

  main p.text-5.font-bold.my-5,
  main .content-shell > p.text-5,
  main .content-shell > p[class*="text-5"] {
    font-size: 30px !important;
    margin-bottom: 12px !important;
  }

  main > div > div.flex.justify-between.items-center,
  main .flex.justify-between.items-center {
    display: block !important;
  }

  main .flex.gap-2\.5.items-center {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }

  button.tab,
  #text-translate,
  #document-translate {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #document-translate-content > div,
  :is(#text-translate-content, #text-writing-content, #document-writing-content) > div {
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 22px !important;
  }

  #document-translate-content > div > div.w-full:first-child {
    overflow-x: auto !important;
    padding: 12px !important;
  }

  #document-translate-content .relative.pt-1 {
    min-width: 760px !important;
  }

  #document-translate-content .absolute.w-full.top-0\.5,
  #document-translate-content div[class*="absolute"][class*="w-full"][class*="top-0.5"] {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 34px !important;
    min-width: 760px !important;
  }

  #step-0,
  #point-1,
  #point-2,
  #point-3,
  #point-4 {
    min-width: 138px !important;
    max-width: 138px !important;
    font-size: 11px !important;
  }

  #step-0 span,
  #point-1 span,
  #point-2 span,
  #point-3 span,
  #point-4 span {
    max-width: 132px !important;
    white-space: normal !important;
  }

  #point-1 span,
  #point-2 span,
  #point-3 span,
  #point-4 span {
    display: none !important;
  }

  .step-container,
  #document-translate-content .step-container {
    padding: 12px !important;
  }

  .file-upload,
  .step-0.file-upload,
  .file-upload > div:first-child {
    min-height: 230px !important;
    height: auto !important;
  }

  .file-upload span.text-gray-575,
  .file-upload > div:first-child > span:first-child {
    font-size: 24px !important;
  }

  footer {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 12px 14px !important;
  }
}

/* Integration pass: writing tabs and profile page. */
:is(#text-translate-content, #text-writing-content, #document-writing-content):not(.hidden),
#document-translate-content:not(.hidden),
#text-writing-content:not(.hidden),
#document-writing-content:not(.hidden) {
  display: block !important;
}

/* (the old writing-page fork of the editor skin is gone — the writing
   containers are covered by the shared editor rules via :is() throughout
   this file, so translator and AI editor stay visually identical) */

#document-writing-content form > div.flex.items-center.gap-5 {
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 28px !important;
  border-radius: 24px !important;
  border: 1px dashed rgba(37,99,235,.30) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(246,252,251,.80)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 16px 38px rgba(11, 15, 23,.055) !important;
}

#document-writing-content .file-list {
  border-color: rgba(15,44,52,.10) !important;
}

main form[name="change-user-data"],
main form[name="change-user-data"] + div {
  position: relative !important;
  padding: 28px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(15,44,52,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,252,252,.90)) !important;
  box-shadow: 0 22px 70px rgba(11, 15, 23,.09), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

main form[name="change-user-data"] > p,
main form[name="change-user-data"] + div > p {
  margin: 0 0 20px !important;
  color: var(--k-ink) !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

main form[name="change-user-data"] label,
main form[name="change-user-data"] + div span {
  letter-spacing: 0 !important;
}

main form[name="change-user-data"] input,
main form[name="change-user-data"] + div input {
  height: 50px !important;
  padding: 13px 16px !important;
  border-radius: 16px !important;
  border-color: rgba(15,44,52,.12) !important;
  background: rgba(255,255,255,.92) !important;
}

main form[name="change-user-data"] + div [class*="justify-between"][class*="items-end"] {
  align-items: center !important;
  gap: 18px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(15,44,52,.08) !important;
  background: rgba(246,252,251,.72) !important;
}

main form[name="change-user-data"] + div .password-form {
  margin-top: 16px !important;
  border-color: rgba(37,99,235,.18) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

@media (min-width: 1100px) {
  main form[name="change-user-data"] {
    max-width: 740px !important;
  }

  main form[name="change-user-data"] + div {
    max-width: 860px !important;
  }
}

@media (max-width: 900px) {
  #text-writing-content form > div.flex.w-full.gap-1,
  #text-writing-content form > div.flex.items-center.justify-between.mt-5,
  #document-writing-content form > div.flex.items-center.justify-between.mt-5,
  #document-writing-content form > div.flex.items-center.gap-5,
  main form[name="change-user-data"] + div [class*="justify-between"][class*="items-end"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #text-writing-content form > div.flex.items-center.justify-between.mt-5,
  #document-writing-content form > div.flex.items-center.justify-between.mt-5 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #text-writing-content form > div.flex.items-center.justify-between.mt-5 > *,
  #document-writing-content form > div.flex.items-center.justify-between.mt-5 > *,
  #text-writing-content .select2-container,
  #document-writing-content .select2-container,
  #text-writing-content select,
  #document-writing-content select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #text-writing-content form > div.flex.items-center.justify-between.mt-5 > button[type="submit"],
  #document-writing-content form > div.flex.items-center.justify-between.mt-5 > button[type="submit"] {
    width: 100% !important;
  }

  main form[name="change-user-data"],
  main form[name="change-user-data"] + div {
    padding: 18px !important;
    border-radius: 22px !important;
  }
}

/* Integration pass: usage/statistics page. */
.usage-history-page {
  max-width: 1180px !important;
  margin-right: auto !important;
}

.usage-history-page > div:first-child {
  gap: 18px !important;
  margin-bottom: 22px !important;
}

.usage-history-page > div:first-child > p {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 10px 0 0 !important;
  color: var(--k-ink) !important;
  font-size: clamp(38px, 4.2vw, 54px) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.usage-history-page > div:first-child > p::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  background: var(--k-blue) !important;
  box-shadow: 0 0 0 8px rgba(37,99,235,.12), 26px 0 0 3px rgba(37,99,235,.18), 52px 0 0 3px rgba(37,99,235,.18) !important;
}

.usage-history-page > div:first-child > p::after {
  content: "" !important;
  width: 64px !important;
  height: 18px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  transform: translateY(1px) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(37,99,235,.22) !important;
  background:
    linear-gradient(90deg, rgba(37,99,235,.20) 0 48%, rgba(255,255,255,.75) 48% 52%, rgba(37,99,235,.20) 52% 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 28px rgba(37,99,235,.10) !important;
}

.usage-history-page > div:first-child > div {
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  color: var(--k-text-mid) !important;
}

.usage-history-page #multiLevelDropdownButton {
  width: auto !important;
  min-width: 98px !important;
  min-height: 44px !important;
  padding: 10px 15px !important;
  border: 1px solid rgba(15,44,52,.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.70) !important;
  color: var(--k-ink) !important;
  box-shadow: 0 12px 28px rgba(11, 15, 23,.07), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.usage-history-page #multiLevelDropdownButton svg path {
  fill: currentColor !important;
}

.usage-history-page #filter-button {
  color: var(--k-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Let the filter panel size to its content (the Clear/Apply row was wider than
   the fixed width and got clipped). Adapts as sub-menus expand, capped so long
   names don't blow it up. */
.usage-history-page #multi-dropdown {
  width: max-content !important;
  min-width: 15rem !important;
  max-width: min(360px, calc(100vw - 40px)) !important;
}

.usage-history-page .calendar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 44px !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(15,44,52,.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.70) !important;
  box-shadow: 0 12px 28px rgba(11, 15, 23,.06), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.usage-history-page .calendar::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  background: var(--k-blue) !important;
}

.usage-history-page #selected-date-from,
.usage-history-page #selected-date-to {
  color: rgba(31,42,55,.68) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.usage-history-page #prev-button,
.usage-history-page #next-button {
  width: 34px !important;
  height: 34px !important;
  padding: 9px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: 0 10px 24px rgba(11, 15, 23,.07) !important;
}

.usage-history-page #selected-items {
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.usage-table-card {
  align-items: stretch !important;
  overflow-x: auto !important;
  padding: 24px 18px !important;
  border: 1px solid rgba(15,44,52,.08) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,252,252,.90)) !important;
  box-shadow: 0 22px 70px rgba(11, 15, 23,.09), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.usage-table {
  min-width: 900px !important;
  border-spacing: 0 10px !important;
  table-layout: fixed !important;
}

.usage-table.usage-table-empty {
  min-width: 100% !important;
}

.usage-table thead th {
  padding: 0 12px 14px !important;
  border-color: rgba(15,44,52,.10) !important;
  color: rgba(8,15,23,.92) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  vertical-align: bottom !important;
}

.usage-table thead th .sort-trigger {
  min-height: 32px !important;
  align-items: center !important;
  color: inherit !important;
}

.usage-table tbody tr {
  border-radius: 18px !important;
}

.usage-table tbody td {
  padding: 13px 12px !important;
  border-top: 1px solid rgba(15,44,52,.07) !important;
  border-bottom: 1px solid rgba(15,44,52,.07) !important;
  background: rgba(255,255,255,.72) !important;
  color: rgba(8,15,23,.78) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  vertical-align: middle !important;
}

.usage-table tbody td:first-child {
  border-left: 1px solid rgba(15,44,52,.07) !important;
  border-radius: 16px 0 0 16px !important;
}

.usage-table tbody td:last-child {
  border-right: 1px solid rgba(15,44,52,.07) !important;
  border-radius: 0 16px 16px 0 !important;
}

.usage-table tbody td[colspan] {
  border-radius: 18px !important;
  background: rgba(247,252,252,.72) !important;
}

.usage-table tbody td[colspan] p:first-child {
  color: rgba(75,91,103,.72) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

.usage-history-page > div.pt-12\.5,
.usage-history-page > div.pt-4 {
  gap: 12px !important;
}

.usage-history-page > div.pt-12\.5 > div,
.usage-history-page > div.pt-4 > div {
  border: 1px solid rgba(15,44,52,.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 14px 32px rgba(11, 15, 23,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.usage-history-page > div.pt-12\.5 span,
.usage-history-page > div.pt-4 span {
  color: rgba(37,99,235,.20) !important;
}

.usage-history-page > div.pt-12\.5 .text-gray-400,
.usage-history-page > div.pt-4 .text-gray-400 {
  color: rgba(75,91,103,.82) !important;
}

.usage-history-page .pagination a,
.usage-history-page .pagination span {
  font-size: 14px !important;
  line-height: 20.3px !important;
  font-weight: 500 !important;
}

.usage-history-page .pagination a.text-gray-225,
.usage-history-page .pagination span.text-gray-225 {
  color: rgba(75,91,103,.68) !important;
}

.usage-history-page .pagination a.text-secondary,
.usage-history-page .pagination span.text-secondary {
  color: #1E2433 !important;
}

@media (max-width: 900px) {
  .usage-history-page {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
  }

  .usage-history-page > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .usage-history-page > div:first-child > p {
    font-size: 32px !important;
    gap: 12px !important;
  }

  .usage-history-page > div:first-child > p::after {
    width: 52px !important;
    height: 16px !important;
    margin-left: 2px !important;
  }

  .usage-history-page > div:first-child > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 10px !important;
  }

  .usage-history-page > div:first-child > div > div:first-child {
    grid-column: 1 / -1 !important;
  }

  .usage-history-page > div:first-child > div > div:first-child button {
    width: 100% !important;
  }

  .usage-history-page #multiLevelDropdownButton {
    min-width: 112px !important;
    justify-content: center !important;
  }

  .usage-history-page > div:first-child > div > div:last-child {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .usage-history-page .calendar {
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
  }

  .usage-history-page #selected-date-from,
  .usage-history-page #selected-date-to {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .usage-history-page #multi-dropdown {
    right: auto !important;
    left: 0 !important;
    width: min(320px, calc(100vw - 24px)) !important;
  }

  .usage-history-page #datepicker {
    right: 50% !important;
    transform: translateX(50%) !important;
    width: min(344px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .usage-table-card {
    padding: 14px 10px !important;
    border-radius: 18px !important;
    overflow-x: hidden !important;
  }

  .usage-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-spacing: 0 8px !important;
  }

  .usage-table col {
    width: auto !important;
  }

  .usage-table:not(:has(col:nth-child(6))) col:nth-child(1) { width: 34% !important; }
  .usage-table:not(:has(col:nth-child(6))) col:nth-child(2) { width: 12% !important; }
  .usage-table:not(:has(col:nth-child(6))) col:nth-child(3) { width: 14% !important; }
  .usage-table:not(:has(col:nth-child(6))) col:nth-child(4) { width: 18% !important; }
  .usage-table:not(:has(col:nth-child(6))) col:nth-child(5) { width: 22% !important; }

  .usage-table:has(col:nth-child(6)):not(:has(col:nth-child(7))) col:nth-child(1) { width: 16% !important; }
  .usage-table:has(col:nth-child(6)):not(:has(col:nth-child(7))) col:nth-child(2) { width: 30% !important; }
  .usage-table:has(col:nth-child(6)):not(:has(col:nth-child(7))) col:nth-child(3) { width: 11% !important; }
  .usage-table:has(col:nth-child(6)):not(:has(col:nth-child(7))) col:nth-child(4) { width: 12% !important; }
  .usage-table:has(col:nth-child(6)):not(:has(col:nth-child(7))) col:nth-child(5) { width: 15% !important; }
  .usage-table:has(col:nth-child(6)):not(:has(col:nth-child(7))) col:nth-child(6) { width: 16% !important; }

  .usage-table:has(col:nth-child(7)) col:nth-child(1) { width: 15% !important; }
  .usage-table:has(col:nth-child(7)) col:nth-child(2) { width: 12% !important; }
  .usage-table:has(col:nth-child(7)) col:nth-child(3) { width: 23% !important; }
  .usage-table:has(col:nth-child(7)) col:nth-child(4) { width: 9% !important; }
  .usage-table:has(col:nth-child(7)) col:nth-child(5) { width: 10% !important; }
  .usage-table:has(col:nth-child(7)) col:nth-child(6) { width: 14% !important; }
  .usage-table:has(col:nth-child(7)) col:nth-child(7) { width: 17% !important; }

  .usage-table.usage-table-empty {
    min-width: 100% !important;
  }

  .usage-table.usage-table-empty thead {
    display: none !important;
  }

  .usage-table thead th,
  .usage-table tbody td {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 11px !important;
    line-height: 13.5px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  .usage-table thead th .sort-trigger {
    min-width: 0 !important;
    width: 100% !important;
    gap: 2px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .usage-table thead th .sort-trigger > span {
    flex: 0 0 auto !important;
  }

  .usage-table tbody td > .truncate {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .usage-history-page > div.pt-12\.5 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-top: 28px !important;
  }

  .usage-history-page > div.pt-12\.5 > div,
  .usage-history-page > div.pt-4 > div {
    justify-content: center !important;
    width: 100% !important;
    border-radius: 18px !important;
    font-size: 14px !important;
  }

  .usage-history-page > div.pt-12\.5 > div > span.stat-sep {
    display: none !important;
  }
}

/* Integration pass: mobile primary navigation. */
.mobile-bottom-nav,
.mobile-more-panel {
  display: none;
}

@media (max-width: 900px) {
  body.mobile-more-open {
    overflow: hidden !important;
  }

  .mobile-bottom-nav {
    display: block !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 80 !important;
    pointer-events: none !important;
  }

  .mobile-bottom-nav__bar {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: min(100%, 420px) !important;
    min-height: 66px !important;
    margin: 0 auto !important;
    padding: 7px !important;
    border: 1px solid rgba(15,44,52,.10) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 20px 58px rgba(11, 15, 23,.20), inset 0 1px 0 rgba(255,255,255,.96) !important;
    pointer-events: auto !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }

  .mobile-bottom-nav__item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 6px 3px !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    background: transparent !important;
    color: rgba(75,91,103,.78) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    appearance: none !important;
  }

  .mobile-bottom-nav__item svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    fill: currentColor !important;
  }

  .mobile-bottom-nav__item span {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    color: inherit !important;
    font-size: 9.5px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .mobile-bottom-nav__item.is-active {
    flex: 1.28 1 74px !important;
    border-color: rgba(37,99,235,.22) !important;
    background: linear-gradient(180deg, #2F73F6, #1F55D9) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(37,99,235,.25), inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  .mobile-bottom-nav__item:focus-visible,
  .mobile-more-panel__link:focus-visible {
    outline: 3px solid rgba(37,99,235,.20) !important;
    outline-offset: 2px !important;
  }

  .mobile-more-toggle {
    flex: 0 0 42px !important;
    cursor: pointer !important;
  }

  .mobile-more-panel.is-open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 90 !important;
  }

  .mobile-more-panel__backdrop {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    appearance: none !important;
  }

  .mobile-more-panel__sheet {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(calc(100% - 20px), 420px) !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border: 1px solid rgba(15,44,52,.10) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 12px 28px rgba(11, 15, 23,.12), inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  .mobile-more-panel__handle {
    width: 42px !important;
    height: 4px !important;
    margin: 2px auto 10px !important;
    border-radius: 999px !important;
    background: rgba(75,91,103,.22) !important;
  }

  .mobile-more-panel__links {
    display: grid !important;
    gap: 8px !important;
  }

  .mobile-more-panel__link {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(15,44,52,.08) !important;
    border-radius: 18px !important;
    background: rgba(246,252,251,.74) !important;
    color: var(--k-ink) !important;
    text-decoration: none !important;
  }

  .mobile-more-panel__link svg {
    width: 24px !important;
    height: 24px !important;
    justify-self: center !important;
    fill: currentColor !important;
    color: rgba(37,99,235,.88) !important;
  }

  .mobile-more-panel__link span {
    overflow: hidden !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-more-panel__link.is-active {
    border-color: rgba(37,99,235,.24) !important;
    background: rgba(37,99,235,.10) !important;
    color: #1F55D9 !important;
  }

  main.h-full,
  main {
    padding-bottom: 112px !important;
  }

  footer {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.w-full.gap-1 {
    gap: 12px !important;
    margin-top: 12px !important;
  }

  :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.w-full.gap-1 > div {
    gap: 10px !important;
    padding: 12px !important;
  }

  :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.items-center.justify-between.mt-5 {
    margin-top: 12px !important;
  }

  :is(#text-translate-content, #text-writing-content, #document-writing-content) textarea,
  :is(#text-translate-content, #text-writing-content, #document-writing-content) :is(#source-text, #pre-text),
  :is(#text-translate-content, #text-writing-content, #document-writing-content) :is(#translated-text, #post-text),
  :is(#text-translate-content, #text-writing-content, #document-writing-content) .ql-container,
  :is(#text-translate-content, #text-writing-content, #document-writing-content) .ql-editor {
    min-height: 126px !important;
    height: 126px !important;
  }
}

/* Integration pass: project history table and empty state. */
.project-history-page {
  max-width: 1180px !important;
  margin-right: auto !important;
}

.project-history-table-card {
  align-items: stretch !important;
  overflow-x: auto !important;
  padding: 24px 18px !important;
  border: 1px solid rgba(15,44,52,.08) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,252,252,.90)) !important;
  box-shadow: 0 22px 70px rgba(11, 15, 23,.09), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.project-history-table {
  min-width: 920px !important;
  border-spacing: 0 10px !important;
  /* Auto layout: columns size to their content instead of splitting the width
     into equal fixed slices. Keeps sensible proportions and stops the wide
     "Доработка экспертом" button from colliding with the Created date. */
  table-layout: auto !important;
}

.project-history-table.project-history-table-empty {
  min-width: 100% !important;
}

.project-history-table thead th {
  padding: 0 10px 14px !important;
  border-color: rgba(15,44,52,.10) !important;
  color: rgba(8,15,23,.92) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  vertical-align: bottom !important;
}

.project-history-table thead th .sort-trigger {
  min-height: 32px !important;
  align-items: center !important;
  color: inherit !important;
}

.project-history-table tbody td {
  padding: 13px 10px !important;
  border-top: 1px solid rgba(15,44,52,.07) !important;
  border-bottom: 1px solid rgba(15,44,52,.07) !important;
  background: rgba(255,255,255,.72) !important;
  color: rgba(8,15,23,.78) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  vertical-align: middle !important;
}

.project-history-table tbody td:first-child {
  border-left: 1px solid rgba(15,44,52,.07) !important;
  border-radius: 16px 0 0 16px !important;
}

.project-history-table tbody td:last-child {
  border-right: 1px solid rgba(15,44,52,.07) !important;
  border-radius: 0 16px 16px 0 !important;
}

.project-history-table tbody td[colspan] {
  border: 1px solid rgba(15,44,52,.07) !important;
  border-radius: 18px !important;
  background: rgba(247,252,252,.72) !important;
}

.project-history-table tbody td[colspan] p:first-child {
  color: rgba(75,91,103,.72) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

.project-history-page .pagination {
  gap: 18px !important;
}

.project-history-page .pagination:not(.hidden) {
  display: flex !important;
}

.project-history-page .pagination a,
.project-history-page .pagination span.current-page {
  min-height: 38px !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(15,44,52,.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 14px 32px rgba(11, 15, 23,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

@media (max-width: 900px) {
  .project-history-page {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
  }

  .project-history-table-card {
    padding: 14px 10px !important;
    border-radius: 18px !important;
  }

  .project-history-table {
    min-width: 760px !important;
  }

  .project-history-table.project-history-table-empty {
    min-width: 100% !important;
  }

  .project-history-table.project-history-table-empty thead {
    display: none !important;
  }

  .project-history-table thead th,
  .project-history-table tbody td {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 12px !important;
  }

  .project-history-page .pagination {
    padding-top: 26px !important;
    gap: 12px !important;
  }
}

/* Integration pass: glossaries table and empty state. */
.glossaries-page {
  max-width: 1180px !important;
  margin-right: auto !important;
}

.glossaries-page > div:first-child {
  gap: 16px !important;
}

.glossaries-table-card {
  align-items: stretch !important;
  overflow-x: auto !important;
  padding: 24px 18px !important;
  border: 1px solid rgba(15,44,52,.08) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,252,252,.90)) !important;
  box-shadow: 0 22px 70px rgba(11, 15, 23,.09), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.glossaries-table {
  min-width: 760px !important;
  border-spacing: 0 10px !important;
  table-layout: fixed !important;
}

.glossaries-table.glossaries-table-empty {
  min-width: 100% !important;
}

.glossaries-table thead th {
  padding: 0 12px 14px !important;
  border-color: rgba(15,44,52,.10) !important;
  color: rgba(8,15,23,.92) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  vertical-align: bottom !important;
}

.glossaries-table thead th .sort-trigger {
  min-height: 32px !important;
  align-items: center !important;
  color: inherit !important;
}

.glossaries-table tbody td {
  padding: 13px 12px !important;
  border-top: 1px solid rgba(15,44,52,.07) !important;
  border-bottom: 1px solid rgba(15,44,52,.07) !important;
  background: rgba(255,255,255,.72) !important;
  color: rgba(8,15,23,.78) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  vertical-align: middle !important;
}

.glossaries-table tbody td:first-child {
  border-left: 1px solid rgba(15,44,52,.07) !important;
  border-radius: 16px 0 0 16px !important;
}

.glossaries-table tbody td:last-child {
  border-right: 1px solid rgba(15,44,52,.07) !important;
  border-radius: 0 16px 16px 0 !important;
}

.glossaries-table tbody td[colspan] {
  border: 1px solid rgba(15,44,52,.07) !important;
  border-radius: 18px !important;
  background: rgba(247,252,252,.72) !important;
}

.glossaries-table tbody td[colspan] p:first-child {
  color: rgba(75,91,103,.72) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

.glossaries-page .pagination {
  gap: 18px !important;
}

.glossaries-page .pagination:not(.hidden) {
  display: flex !important;
}

.glossaries-page .pagination a,
.glossaries-page .pagination span.current-page {
  min-height: 38px !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(15,44,52,.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 14px 32px rgba(11, 15, 23,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

@media (max-width: 900px) {
  .glossaries-page {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
  }

  .glossaries-page > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .glossaries-page #openModal {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 12px 18px !important;
  }

  .glossaries-table-card {
    padding: 14px 10px !important;
    border-radius: 18px !important;
  }

  .glossaries-table {
    min-width: 620px !important;
  }

  .glossaries-table.glossaries-table-empty {
    min-width: 100% !important;
  }

  .glossaries-table.glossaries-table-empty thead {
    display: none !important;
  }

  .glossaries-table thead th,
  .glossaries-table tbody td {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 12px !important;
  }

  .glossaries-page .pagination {
    padding-top: 26px !important;
    gap: 12px !important;
  }
}

/* Typography and control fit layer. Keep this single block last. */
html body,
html body header,
html body header *,
html body main,
html body main *,
html body footer,
html body footer *,
html body button,
html body input,
html body select,
html body textarea {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

html body {
  font-size: 14px !important;
  line-height: 20.3px !important;
  font-weight: 400 !important;
  letter-spacing: -0.084px !important;
}

html body header .portal-title {
  font-size: 16px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

html body header .portal-subtitle {
  font-size: 10.5px !important;
  line-height: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.07em !important;
}

html body header .profile-trigger,
html body header .profile-trigger span,
html body header a[href*="profile-details"],
html body header a[href*="profile-details"] span {
  font-weight: 500 !important;
  letter-spacing: -0.04px !important;
}

html body main p.text-5.font-bold.my-5,
html body main .content-shell > p.text-5,
html body .usage-history-page > div:first-child > p {
  font-size: 40px !important;
  line-height: 38px !important;
  font-weight: 600 !important;
  letter-spacing: -1.25px !important;
}

html body button.tab,
html body button.tab span,
html body #text-translate,
html body #document-translate,
html body #text-writing,
html body #document-writing {
  font-size: 13px !important;
  line-height: 15.6px !important;
  font-weight: 500 !important;
  letter-spacing: -0.12px !important;
}

html body button.tab span {
  line-height: 13px !important;
}

html body .select2-selection__rendered,
html body .select2-selection__placeholder,
html body .select2-container--default .select2-selection--single .select2-selection__rendered,
html body .select2-container--default .select2-selection--single .select2-selection__placeholder {
  font-size: 14px !important;
  line-height: 44px !important;
  font-weight: 500 !important;
  letter-spacing: -0.084px !important;
}

html body header form[method="POST"] button[type="submit"],
html body header button[type="submit"].bg-button_bg {
  min-width: 88px !important;
  font-size: 13px !important;
}

html body :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.items-center.justify-between.mt-5 > button[type="submit"],
html body #text-writing-content form > div.flex.items-center.justify-between.mt-5 > button[type="submit"],
html body #document-writing-content form > div.flex.items-center.justify-between.mt-5 > button[type="submit"] {
  min-width: 128px !important;
  justify-content: center !important;
}

html body :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.items-center.justify-between.mt-5 > button[type="submit"] span,
html body #text-writing-content form > div.flex.items-center.justify-between.mt-5 > button[type="submit"] span,
html body #document-writing-content form > div.flex.items-center.justify-between.mt-5 > button[type="submit"] span {
  font-size: 14px !important;
  line-height: 20.3px !important;
  font-weight: 500 !important;
  letter-spacing: -0.04px !important;
  white-space: nowrap !important;
}

html body button,
html body button *,
html body a[type="button"],
html body a[type="button"] *,
html body [role="button"],
html body [role="button"] *,
html body .mobile-bottom-nav__item,
html body .mobile-bottom-nav__item *,
html body .mobile-more-panel__link,
html body .mobile-more-panel__link * {
  font-weight: 500 !important;
}

html body .usage-table thead th,
html body .project-history-table thead th,
html body .glossaries-table thead th,
html body .usage-table thead th .sort-trigger,
html body .project-history-table thead th .sort-trigger,
html body .glossaries-table thead th .sort-trigger {
  font-size: 13px !important;
  line-height: 15.6px !important;
  font-weight: 500 !important;
  letter-spacing: -0.084px !important;
}

html body .usage-table thead th > div:not(.sort-trigger),
html body .project-history-table thead th > div:not(.sort-trigger),
html body .glossaries-table thead th > div:not(.sort-trigger) {
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

html body .usage-table thead th:not(:has(.sort-trigger)):not(:has(> div)),
html body .project-history-table thead th:not(:has(.sort-trigger)):not(:has(> div)),
html body .glossaries-table thead th:not(:has(.sort-trigger)):not(:has(> div)) {
  line-height: 32px !important;
}

html body .usage-table tbody td,
html body .project-history-table tbody td,
html body .glossaries-table tbody td {
  font-size: 13px !important;
  line-height: 17.55px !important;
  font-weight: 400 !important;
  letter-spacing: -0.084px !important;
}

html body .usage-table tbody td[colspan] p:first-child,
html body .project-history-table tbody td[colspan] p:first-child,
html body .glossaries-table tbody td[colspan] p:first-child {
  font-size: 20px !important;
  line-height: 27px !important;
  font-weight: 500 !important;
  letter-spacing: -0.084px !important;
}

html body #text-translate span,
html body #document-translate span,
html body #text-writing span,
html body #document-writing span,
html body .usage-table thead th .sort-trigger[role="button"],
html body .project-history-table thead th .sort-trigger[role="button"],
html body .glossaries-table thead th .sort-trigger[role="button"],
html body .usage-table thead th .sort-trigger[role="button"] *,
html body .project-history-table thead th .sort-trigger[role="button"] *,
html body .glossaries-table thead th .sort-trigger[role="button"] * {
  font-weight: 500 !important;
}

@media (max-width: 900px) {
  html body main p.text-5.font-bold.my-5,
  html body main .content-shell > p.text-5,
  html body .usage-history-page > div:first-child > p {
    font-size: 30px !important;
    line-height: 30.6px !important;
    font-weight: 600 !important;
    letter-spacing: -0.82px !important;
  }

  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) .flex.gap-2.items-center {
    display: grid !important;
    grid-template-columns: minmax(164px, max-content) minmax(148px, 1fr) !important;
    gap: 8px !important;
  }

  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) .flex.gap-2.items-center > .flex.items-center.justify-end {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) .select2-container.languages {
    width: 100% !important;
    min-width: 148px !important;
  }

  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.items-center.justify-between.mt-5 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.items-center.justify-between.mt-5 > *,
  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.items-center.justify-between.mt-5 .select2-container,
  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.items-center.justify-between.mt-5 select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .select2-selection__placeholder {
    font-size: 12px !important;
    line-height: 44px !important;
  }

  html body .mobile-bottom-nav__item span {
    font-size: 10px !important;
    line-height: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  html body .mobile-more-panel__link span {
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
    letter-spacing: -0.084px !important;
  }

  html body .glossaries-page #openModal,
  html body .usage-history-page button[type="submit"],
  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.items-center.justify-between.mt-5 > button[type="submit"],
  html body #text-writing-content form > div.flex.items-center.justify-between.mt-5 > button[type="submit"],
  html body #document-writing-content form > div.flex.items-center.justify-between.mt-5 > button[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

@media (max-width: 520px) {
  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) .flex.gap-2.items-center {
    flex-wrap: wrap !important;
  }

  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) .flex.gap-2.items-center > .flex.items-center.justify-end {
    justify-content: stretch !important;
  }

  html body :is(#text-translate-content, #text-writing-content, #document-writing-content) .select2-container.languages {
    min-width: 0 !important;
  }

  /* The language column is too narrow for the full-size pill; compact it. */
  html body #detect-language {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    justify-content: center !important;
  }
}

/* Neutral/brand-blue surface corrections. */

/* Replace remaining greenish glass with neutral/brand-blue surfaces. */
html body,
html body.font-montserrat,
html body > div.flex.h-screen.overflow-hidden,
html body main {
  background:
    radial-gradient(circle at 7% 6%, rgba(37,99,235,.08), transparent 24rem),
    radial-gradient(circle at 92% 8%, rgba(255,128,32,.045), transparent 23rem),
    linear-gradient(180deg, #F7F9FC 0%, #E6E9EF 100%) !important;
}

html body :is(#text-translate-content, #text-writing-content, #document-writing-content) > div,
html body #document-translate-content > div,
html body #text-writing-content > div,
html body #document-writing-content > div,
html body .step-container,
html body #document-translate-content .step-container,
html body main form[name="change-user-data"],
html body main form[name="change-user-data"] + div,
html body .project-history-table-card,
html body .usage-table-card {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,249,252,.92)) !important;
}

html body :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.w-full.gap-1 > div,
html body #text-writing-content form > div.flex.w-full.gap-1 > div,
html body #text-writing-content form > div.flex.items-center.justify-between.mt-5,
html body #document-writing-content form > div.flex.items-center.justify-between.mt-5,
html body #document-writing-content form > div.flex.items-center.gap-5,
html body main form[name="change-user-data"] + div [class*="justify-between"][class*="items-end"],
html body .mobile-more-panel__link {
  background: rgba(247,249,252,.86) !important;
}

html body :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.w-full.gap-1 > div {
  border-color: rgba(37,99,235,.10) !important;
}

html body :is(#text-translate-content, #text-writing-content, #document-writing-content) :is(#source-text, #pre-text),
html body :is(#text-translate-content, #text-writing-content, #document-writing-content) :is(#translated-text, #post-text) {
  background: #F1F3F7 !important;
}

/* Text translator tabs/card: no drop-list backing plate, no extra frosted shine. */
html body :is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.items-center.justify-between.mt-5 {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Document stepper: labels centered on points and kept clear of the frame. */
html body #document-translate-content > div > div.w-full:first-child {
  padding: 24px 34px 26px !important;
}

html body #document-translate-content .relative.pt-1,
html body #document-translate-content .flex.justify-between.absolute.w-full.top-0\.5,
html body #document-translate-content div[class*="justify-between"][class*="absolute"][class*="top-0.5"] {
  height: 100px !important;
  min-height: 100px !important;
}

html body #document-translate-content .overflow-hidden.h-1\.5,
html body #document-translate-content div[class*="overflow-hidden"][class*="h-1.5"] {
  left: 70px !important;
  right: 70px !important;
  top: 24px !important;
  height: 4px !important;
  background: #D8DEE9 !important;
}

html body #progress-bar {
  height: 4px !important;
  background: linear-gradient(90deg, var(--k-client-blue), var(--k-client-blue-dark)) !important;
}

html body #step-0,
html body #point-1,
html body #point-2,
html body #point-3,
html body #point-4 {
  height: 100px !important;
  min-height: 100px !important;
  padding: 0 10px !important;
}

html body #step-0 svg.progress-point,
html body #point-1 svg.progress-point,
html body #point-2 svg.progress-point,
html body #point-3 svg.progress-point,
html body #point-4 svg.progress-point {
  margin: 16px 0 16px !important;
}

html body #step-0 > div,
html body #point-1 > div,
html body #point-2 > div,
html body #point-3 > div,
html body #point-4 > div {
  min-height: 42px !important;
  height: 42px !important;
  max-height: 42px !important;
  grid-template-rows: 18px 18px !important;
  row-gap: 4px !important;
}

html body #step-0 > div > span:first-child,
html body #point-1 > div > span:first-child,
html body #point-2 > div > span:first-child,
html body #point-3 > div > span:first-child,
html body #point-4 > div > span:first-child,
html body #point-4 > span {
  height: 18px !important;
  min-height: 18px !important;
  line-height: 18px !important;
}

html body #step-0 > div > span:nth-child(2),
html body #point-1 > div > span:nth-child(2),
html body #point-2 > div > span:nth-child(2),
html body #point-3 > div > span:nth-child(2),
html body #point-1 .language-step,
html body #point-2 .domain-step,
html body #point-3 .terminology-step,
html body #point-3 .glossary-step {
  height: 18px !important;
  min-height: 18px !important;
  line-height: 18px !important;
}

/* Upload button: keep text optically centered. */
html body .file-upload button,
html body .file-upload button[type="button"],
html body .file-upload .choose-file,
html body button.choose-file {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  min-height: 44px !important;
}

html body .file-upload button span,
html body .file-upload button .text-3\.5,
html body .file-upload .choose-file span,
html body button.choose-file span,
html body button.choose-file span[class] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  line-height: 16px !important;
}

/* Footer: remove logo backing plate and make the mark 1.5x larger. */
html body footer {
  height: 42px !important;
  min-height: 42px !important;
  padding: 4px var(--content-gutter) 8px !important;
}

html body footer .portal-footer-brand {
  gap: 9px !important;
}

html body footer .portal-footer-label {
  font-size: 13px !important;
}

html body footer .portal-footer-logo-link,
html body footer .portal-footer-logo-link:hover {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body footer .portal-footer-logo {
  width: 185px !important;
  max-height: 40px !important;
  display: block !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  html body footer .portal-footer-logo {
    width: 168px !important;
    max-height: 40px !important;
  }

  html body #document-translate-content .relative.pt-1,
  html body #document-translate-content .flex.justify-between.absolute.w-full.top-0\.5,
  html body #document-translate-content div[class*="justify-between"][class*="absolute"][class*="top-0.5"] {
    height: 96px !important;
    min-height: 96px !important;
  }
}

/* Responsive stepper: do not squeeze labels into each other. */
@media (max-width: 1024px) {
  html body #document-translate-content > div > div.w-full:first-child {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 18px 22px 20px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #document-translate-content .relative.pt-1 {
    width: 840px !important;
    min-width: 840px !important;
    max-width: none !important;
  }

  html body #document-translate-content .flex.justify-between.absolute.w-full.top-0\.5,
  html body #document-translate-content div[class*="justify-between"][class*="absolute"][class*="top-0.5"] {
    width: 840px !important;
    min-width: 840px !important;
    max-width: none !important;
    grid-template-columns: repeat(5, 168px) !important;
  }

  html body #document-translate-content .overflow-hidden.h-1\.5,
  html body #document-translate-content div[class*="overflow-hidden"][class*="h-1.5"] {
    left: 84px !important;
    right: 84px !important;
  }

  html body #step-0,
  html body #point-1,
  html body #point-2,
  html body #point-3,
  html body #point-4 {
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    padding: 0 10px !important;
  }

  html body #step-0 span,
  html body #point-1 span,
  html body #point-2 span,
  html body #point-3 span,
  html body #point-4 span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Auth/login page: align registration shell with the portal UI. */
html body.auth-page {
  min-height: 100vh !important;
  color: #121826 !important;
  background:
    radial-gradient(circle at 7% 6%, rgba(37,99,235,.08), transparent 24rem),
    radial-gradient(circle at 92% 8%, rgba(255,128,32,.045), transparent 23rem),
    linear-gradient(180deg, #F7F9FC 0%, #E6E9EF 100%) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

html body.auth-page .auth-page-shell {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

html body.auth-page header.auth-header {
  flex: 0 0 auto !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 10px var(--content-gutter) 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.auth-page header.auth-header > div {
  width: min(100%, var(--content-max)) !important;
  max-width: var(--content-max) !important;
  height: 54px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(18,27,38,.07) !important;
  box-shadow: 0 16px 42px rgba(8,15,23,.08) !important;
  backdrop-filter: blur(12px) !important;
}

html body.auth-page .auth-main {
  flex: 1 1 auto !important;
  display: flex !important;
  min-height: 0 !important;
  padding: 34px 24px 18px !important;
}

html body.auth-page .auth-login-page {
  width: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.auth-page form[name="login"].auth-login-card,
html body.auth-page form[name="login"] {
  position: relative !important;
  width: min(100%, 430px) !important;
  min-width: 0 !important;
  padding: 34px !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  border: 1px solid rgba(18,27,38,.08) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 24px 70px rgba(8,15,23,.10) !important;
}

html body.auth-page form[name="login"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 4px !important;
  background: #FF8020 !important;
}

html body.auth-page .auth-login-title,
html body.auth-page form[name="login"] h2 {
  margin: 0 0 26px !important;
  color: #121826 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.auth-page form[name="login"] > div {
  width: 100% !important;
}

html body.auth-page form[name="login"] input {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 0 12px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1px solid #C8D0DC !important;
  background: #F7F9FC !important;
  color: #121826 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
  font-size: 15px !important;
  line-height: 50px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html body.auth-page form[name="login"] input::placeholder {
  color: #8792A3 !important;
}

html body.auth-page form[name="login"] input:hover {
  border-color: rgba(37,99,235,.42) !important;
}

html body.auth-page form[name="login"] input:focus {
  border-color: #2563EB !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.90) !important;
  outline: none !important;
}

html body.auth-page form[name="login"] .relative input {
  padding-right: 46px !important;
}

html body.auth-page form[name="login"] .toggle-visibility {
  right: 15px !important;
  color: var(--k-text-soft) !important;
}

html body.auth-page form[name="login"] .toggle-visibility svg path {
  fill: currentColor !important;
}

html body.auth-page form[name="login"] .error-message {
  min-height: 18px !important;
  margin: 2px 0 0 !important;
  color: #C24141 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 650 !important;
}

html body.auth-page form[name="login"] a[href*="forgot-password"] {
  align-self: flex-start !important;
  margin: 14px 0 20px !important;
  color: #2563EB !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 4px !important;
}

html body.auth-page form[name="login"] a[href*="forgot-password"]:hover,
html body.auth-page form[name="login"] a[href*="forgot-password"]:focus-visible {
  color: #1D4ED8 !important;
  text-decoration-color: currentColor !important;
}

html body.auth-page form[name="login"] button[type="submit"] {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(37,99,235,.78) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #2F73F6, #1F55D9) !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 34px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.30) !important;
  font-size: 15px !important;
  line-height: 48px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html body.auth-page form[name="login"] button[type="submit"]:hover,
html body.auth-page form[name="login"] button[type="submit"]:focus-visible {
  background: linear-gradient(180deg, #2563EB, #1D4ED8) !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 34px rgba(37,99,235,.26), inset 0 1px 0 rgba(255,255,255,.30) !important;
  transform: none !important;
}

html body.auth-page footer {
  flex: 0 0 auto !important;
}

html body.auth-page.auth-login-screen header.auth-header {
  display: none !important;
}

html body.auth-page.auth-login-screen .auth-main {
  padding-top: 18px !important;
}

html body.auth-page.auth-forgot-screen header.auth-header {
  display: none !important;
}

html body.auth-page.auth-forgot-screen .auth-main {
  align-items: center !important;
  justify-content: center !important;
  padding-top: 18px !important;
}

html body.auth-page .auth-forgot-page {
  width: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.auth-page form[name="forgot-password"].auth-forgot-card,
html body.auth-page .auth-forgot-card.success-email {
  position: relative !important;
  width: min(100%, 500px) !important;
  min-width: 0 !important;
  padding: 34px !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  border: 1px solid rgba(18,27,38,.08) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 24px 70px rgba(8,15,23,.10) !important;
}

html body.auth-page form[name="forgot-password"]::before,
html body.auth-page .auth-forgot-card.success-email::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 4px !important;
  background: #FF8020 !important;
}

html body.auth-page .auth-forgot-title,
html body.auth-page form[name="forgot-password"] h2,
html body.auth-page .success-email h2 {
  margin: 0 0 12px !important;
  color: #121826 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.auth-page form[name="forgot-password"] > p,
html body.auth-page .success-email > span {
  width: 100% !important;
  max-width: 390px !important;
  margin: 0 auto 22px !important;
  color: var(--k-text-soft) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  text-align: center !important;
}

html body.auth-page form[name="forgot-password"] input {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1px solid #C8D0DC !important;
  background: #F7F9FC !important;
  color: #121826 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
  font-size: 15px !important;
  line-height: 50px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html body.auth-page form[name="forgot-password"] input::placeholder {
  color: #8792A3 !important;
}

html body.auth-page form[name="forgot-password"] input:hover {
  border-color: rgba(37,99,235,.42) !important;
}

html body.auth-page form[name="forgot-password"] input:focus {
  border-color: #2563EB !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.90) !important;
  outline: none !important;
}

html body.auth-page form[name="forgot-password"] .error-message {
  min-height: 18px !important;
  margin: 8px 0 0 !important;
  color: #C24141 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 650 !important;
}

html body.auth-page form[name="forgot-password"] button[type="submit"] {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 20px 0 !important;
  padding: 0 22px !important;
  border: 1px solid rgba(37,99,235,.78) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #2F73F6, #1F55D9) !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 34px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.30) !important;
  font-size: 15px !important;
  line-height: 48px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html body.auth-page form[name="forgot-password"] button[type="submit"]:hover,
html body.auth-page form[name="forgot-password"] button[type="submit"]:focus-visible {
  background: linear-gradient(180deg, #2563EB, #1D4ED8) !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 34px rgba(37,99,235,.26), inset 0 1px 0 rgba(255,255,255,.30) !important;
  transform: none !important;
}

html body.auth-page form[name="forgot-password"] div.flex.justify-center,
html body.auth-page .success-email a {
  color: var(--k-text-soft) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

html body.auth-page form[name="forgot-password"] a,
html body.auth-page .success-email a {
  color: #2563EB !important;
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 4px !important;
}

html body.auth-page form[name="forgot-password"] a:hover,
html body.auth-page .success-email a:hover {
  text-decoration-color: currentColor !important;
}

html body.auth-page .success-email svg {
  width: 44px !important;
  height: 44px !important;
  margin: 0 0 18px !important;
  color: #2563EB !important;
}

html body.auth-page .success-email svg path {
  fill: currentColor !important;
}

@media (max-width: 640px) {
  html body.auth-page header.auth-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 12px 8px !important;
  }

  html body.auth-page header.auth-header > div {
    height: 58px !important;
    padding: 0 14px !important;
  }

  html body.auth-page .portal-title {
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.auth-page .portal-subtitle {
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.auth-page .auth-main {
    padding: 28px 12px 12px !important;
  }

  html body.auth-page form[name="login"].auth-login-card,
  html body.auth-page form[name="login"],
  html body.auth-page form[name="forgot-password"].auth-forgot-card,
  html body.auth-page .auth-forgot-card.success-email {
    padding: 30px 24px 26px !important;
    border-radius: 22px !important;
  }

  html body.auth-page .auth-login-title,
  html body.auth-page form[name="login"] h2,
  html body.auth-page .auth-forgot-title,
  html body.auth-page form[name="forgot-password"] h2,
  html body.auth-page .success-email h2 {
    font-size: 28px !important;
  }
}

/* Document wizard stepper: centered desktop/tablet, vertical mobile list. */
html body #document-translate-content > div > div.w-full:first-child {
  overflow: visible !important;
  padding: 24px 34px 26px !important;
}

html body #document-translate-content .relative.pt-1 {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 106px !important;
  min-height: 106px !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body #document-translate-content .overflow-hidden.h-1\.5,
html body #document-translate-content div[class*="overflow-hidden"][class*="h-1.5"] {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: 25px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 4px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #D8DEE9 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

html body #document-translate-content .flex.justify-between.absolute.w-full.top-0\.5,
html body #document-translate-content div[class*="justify-between"][class*="absolute"][class*="top-0.5"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 106px !important;
  min-height: 106px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 0 !important;
  overflow: visible !important;
  z-index: 2 !important;
}

html body #step-0,
html body #point-1,
html body #point-2,
html body #point-3,
html body #point-4 {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 106px !important;
  min-height: 106px !important;
  padding: 0 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  overflow: visible !important;
}

html body #step-0 svg.progress-point,
html body #point-1 svg.progress-point,
html body #point-2 svg.progress-point,
html body #point-3 svg.progress-point,
html body #point-4 svg.progress-point {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 17px auto 14px !important;
  z-index: 3 !important;
}

html body #step-0 > div,
html body #point-1 > div,
html body #point-2 > div,
html body #point-3 > div,
html body #point-4 > div {
  width: 100% !important;
  min-height: 45px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  overflow: visible !important;
}

html body #step-0 span,
html body #point-1 span,
html body #point-2 span,
html body #point-3 span,
html body #point-4 span {
  display: block !important;
  width: 100% !important;
  max-width: 168px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body #step-0 > div > span:first-child,
html body #point-1 > div > span:first-child,
html body #point-2 > div > span:first-child,
html body #point-3 > div > span:first-child,
html body #point-4 > div > span:first-child,
html body #point-4 > span {
  color: #121826 !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 760 !important;
}

html body #step-0 > div > span:nth-child(2),
html body #point-1 > div > span:nth-child(2),
html body #point-2 > div > span:nth-child(2),
html body #point-3 > div > span:nth-child(2),
html body #point-1 .language-step,
html body #point-2 .domain-step,
html body #point-3 .terminology-step,
html body #point-3 .glossary-step {
  color: #8792A3 !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 650 !important;
}

@media (max-width: 640px) {
  html body #document-translate-content > div > div.w-full:first-child {
    padding: 18px !important;
    overflow: visible !important;
  }

  html body #document-translate-content .relative.pt-1 {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html body #document-translate-content .overflow-hidden.h-1\.5,
  html body #document-translate-content div[class*="overflow-hidden"][class*="h-1.5"] {
    left: 17px !important;
    right: auto !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 4px !important;
    height: auto !important;
    min-height: 0 !important;
    background: #D8DEE9 !important;
  }

  html body #document-translate-content #progress-bar {
    width: 4px !important;
    height: 0 !important;
  }

  html body #document-translate-content .flex.justify-between.absolute.w-full.top-0\.5,
  html body #document-translate-content div[class*="justify-between"][class*="absolute"][class*="top-0.5"] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 !important;
  }

  html body #step-0,
  html body #point-1,
  html body #point-2,
  html body #point-3,
  html body #point-4 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    text-align: left !important;
  }

  html body #step-0 svg.progress-point,
  html body #point-1 svg.progress-point,
  html body #point-2 svg.progress-point,
  html body #point-3 svg.progress-point,
  html body #point-4 svg.progress-point {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
  }

  html body #step-0 > div,
  html body #point-1 > div,
  html body #point-2 > div,
  html body #point-3 > div,
  html body #point-4 > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
  }

  html body #point-4 > span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    text-align: left !important;
  }

  html body #step-0 span,
  html body #point-1 span,
  html body #point-2 span,
  html body #point-3 span,
  html body #point-4 span {
    max-width: none !important;
    text-align: left !important;
    white-space: normal !important;
  }
}

@media (min-width: 641px) {
  html body #document-translate-content .relative.pt-1,
  html body #document-translate-content .flex.justify-between.absolute.w-full.top-0\.5,
  html body #document-translate-content div[class*="justify-between"][class*="absolute"][class*="top-0.5"],
  html body #step-0,
  html body #point-1,
  html body #point-2,
  html body #point-3,
  html body #point-4 {
    height: 118px !important;
    min-height: 118px !important;
  }

  html body #step-0 > div,
  html body #point-1 > div,
  html body #point-2 > div,
  html body #point-3 > div,
  html body #point-4 > div {
    min-height: 62px !important;
  }

  html body #step-0 > div > span:first-child,
  html body #point-1 > div > span:first-child,
  html body #point-2 > div > span:first-child,
  html body #point-3 > div > span:first-child,
  html body #point-4 > div > span:first-child,
  html body #point-4 > span {
    min-height: 30px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  html body #step-0 > div > span:nth-child(2),
  html body #point-1 > div > span:nth-child(2),
  html body #point-2 > div > span:nth-child(2),
  html body #point-3 > div > span:nth-child(2),
  html body #point-1 .language-step,
  html body #point-2 .domain-step,
  html body #point-3 .terminology-step,
  html body #point-3 .glossary-step {
    min-height: 16px !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  html body #step-0 > div > span:first-child,
  html body #point-1 > div > span:first-child,
  html body #point-2 > div > span:first-child,
  html body #point-3 > div > span:first-child,
  html body #point-4 > div > span:first-child,
  html body #point-4 > span {
    font-size: 11.5px !important;
    line-height: 14px !important;
  }

  html body #step-0 > div > span:nth-child(2),
  html body #point-1 > div > span:nth-child(2),
  html body #point-2 > div > span:nth-child(2),
  html body #point-3 > div > span:nth-child(2),
  html body #point-1 .language-step,
  html body #point-2 .domain-step,
  html body #point-3 .terminology-step,
  html body #point-3 .glossary-step {
    font-size: 10.5px !important;
    line-height: 13px !important;
  }
}

/* move the capsule decoration from the sidebar corner (near the
   support link) to the content top-right, */
body > div > .flex-shrink-0 nav::after,
nav.bg-sidebar::after,
nav[class*="bg-sidebar"]::after {
  content: none !important;
  display: none !important;
}
/* The capsule sits in the content's top-right corner, above the content and
   anchored to the top of the page (position: absolute inside the scrolling
   <main>, so it scrolls away with the content instead of a fixed overlay that
   followed the viewport and overlapped whatever scrolled under it). */
main::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 24px !important;
  top: 24px !important;
  width: min(40vw, 560px) !important;
  height: min(44vw, 520px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: .85 !important;
  filter: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 72% 24%, rgba(37,99,235,.10) 0 2px, transparent 2px 58px),
    radial-gradient(circle at 34% 70%, rgba(109,93,252,.07) 0 2px, transparent 2px 62px) !important;
}
main::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 44px !important;
  top: 26px !important;
  width: 156px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(18,27,38,.05) !important;
  background: linear-gradient(90deg, #FBFCFD 0 49.2%, rgba(167,186,214,.55) 49.2% 50.8%, #F3F6F9 50.8% 100%) !important;
  transform: rotate(-19deg) !important;
  box-shadow: 0 26px 55px rgba(18,27,38,.10) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 3 !important;
}
@media (max-width: 1024px) {
  main::before,
  main::after {
    content: none !important;
    display: none !important;
  }
}
/* Hide the decorative corner capsule (glow + pill) whenever any modal overlay
   is open: the crisp white pill otherwise floats above the semi-transparent,
   blurred backdrop instead of being dimmed with the rest of the page. Covers
   every `.modal-overlay` (base-level error/invite, the in-page add-glossary
   modal, and the body-reparented guide) via a body-level :has. */
body:has(.modal-overlay:not(.hidden)) main::before,
body:has(.modal-overlay:not(.hidden)) main::after {
  content: none !important;
  display: none !important;
}
/* symmetric selected sidebar tile — drop the white marker line on its
   left edge (inset shadow + ::before bar) so both sides look the same. */
html body nav a.bg-active_sidebar_link,
html body nav a#nav-translation.bg-active_sidebar_link,
html body nav a.bg-active_sidebar_link:hover,
html body nav a#nav-translation.bg-active_sidebar_link:hover {
  box-shadow: 0 12px 24px rgba(37,99,235,.24) !important;
}
html body nav a.bg-active_sidebar_link::before,
html body nav a#nav-translation.bg-active_sidebar_link::before {
  content: none !important;
  display: none !important;
}

/* drop the small capsule decoration to the right of page titles. */
main > div > p:first-child::after,
p.text-5.font-bold.my-5::after,
main p.text-5.font-bold.my-5::after,
main .content-shell > p.text-5::after,
main .content-shell > p[class*="text-5"]::after,
.usage-history-page > div:first-child > p::after {
  content: none !important;
  display: none !important;
}

/* document wizard stepper states. document-translate.js marks each
   .stepper-step as .is-done/.is-current and fills #progress-bar exactly to the
   center of the current point; these rules render the states. The :is(#...)
   form keeps id-level specificity so it wins over the per-id legacy rules. */
html body :is(#step-0, #point-1, #point-2, #point-3, #point-4) svg.progress-point {
  color: #C8D0DC !important;
  box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 6px rgba(18,27,38,.09) !important;
  transition: color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
html body :is(#step-0, #point-1, #point-2, #point-3, #point-4).is-done svg.progress-point {
  color: var(--k-blue) !important;
  box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 6px rgba(37,99,235,.22) !important;
}
html body :is(#step-0, #point-1, #point-2, #point-3, #point-4).is-current svg.progress-point {
  color: var(--k-blue) !important;
  transform: scale(1.2) !important;
  box-shadow:
    0 0 0 4px #FFFFFF,
    0 0 0 5px rgba(37,99,235,.30),
    0 4px 10px rgba(37,99,235,.16) !important;
}
html body :is(#step-0, #point-1, #point-2, #point-3, #point-4).is-current > div > span:first-child,
html body #point-4.is-current > span {
  color: var(--k-blue) !important;
}

/* glossaries/history/usage put a control (add-glossary button, date
   range) in the top-right, where the corner capsule sits. Reserve space above
   their header row so the capsule stays clear of the content (capsule bottom
   ≈ 118px). The translator wizard's top-right is empty, so it needs no gap. */
@media (min-width: 1025px) {
  html body main .glossaries-page,
  html body main .project-history-page,
  html body main .usage-history-page {
    padding-top: 120px !important;
  }
}

/* brand palette lock. The seeded VisualSettings DB colors are teal/mint
   (#00BBA7, #00A5BC, #E5F8F6) and leak through Tailwind utilities that earlier
   layers do not override. Map every DB-driven utility to the brand palette
   (brand-colors.md: #2563EB / #0B0F17 / #121826 / #1E2433 / #E6E9EF / #FF8020). */
.bg-main,
.hover\:bg-main:hover,
.bg-button_bg,
.hover\:bg-button_bg:hover {
  background-color: var(--k-blue) !important;
}
.text-main,
.hover\:text-main:hover,
.text-button_bg {
  color: var(--k-blue) !important;
}
.border-main,
.hover\:border-main:hover,
.border-button_bg {
  border-color: var(--k-blue) !important;
}
.text-button_text,
.hover\:text-button_text:hover {
  color: #FFFFFF !important;
}
.bg-secondary,
.hover\:bg-secondary:hover,
.bg-secondary_button,
.hover\:bg-secondary_button:hover,
.focus\:bg-secondary_button:focus {
  background-color: #1D4ED8 !important;
}
.text-secondary,
.text-secondary_button {
  color: #1D4ED8 !important;
}
.border-secondary {
  border-color: #1D4ED8 !important;
}
/* mint chip background (non-header elements tagged with the header color) */
div.bg-header:not(header),
span.bg-header:not(header) {
  background-color: #EDF2FB !important;
}

/* =========================================================
   Add-glossary modal (#modal) — bring it in line with the
   other portal dialogs (edit / delete glossary).
   ========================================================= */

/* (Bottom helper text is handled by the global .text-gray-* fix above.) */

/* 3. The two language columns default to min-width:auto, so their select2
   boxes (content min-width ~270px) overflow the modal and swallow the right
   padding. Allow them to shrink to an equal share so both sides stay 42px. */
#modal .flex.w-full.justify-between > div {
  min-width: 0 !important;
}

/* =========================================================
   Page-level fixes
   ========================================================= */

/* Glossary name pill ("DMF_Demo"): the generic input rule paints the
   white pill but leaves browser-default padding, so text hugs the
   edges. content-box keeps the JS autosize width (shadow-span text
   width) intact while the padding extends outward. */
#glossary-name-input {
  box-sizing: content-box !important;
  padding: 6px 16px !important;
}

/* Translator: the template's pr-10 (35px) is narrower than the strip
   the corner copy icon occupies (30px wide, 17.5px from the edge), so
   the editor and its focus border ran under the icon. */
:is(#text-translate-content, #text-writing-content, #document-writing-content) :is(#source-text, #pre-text),
:is(#text-translate-content, #text-writing-content, #document-writing-content) :is(#translated-text, #post-text) {
  padding-right: 56px !important;
}

/* =========================================================
   Page-level fixes (pharmacy portal feedback)
   ========================================================= */

/* The mobile rules for page-level toolbar rows
     main .flex.justify-between.items-center      -> display: block
     main .flex.gap-2\.5.items-center             -> display: grid (2 columns)
   also match rows *inside* the dialogs that live in the wizard steps, because
   those dialogs sit under <main>. In the add-glossary dialog that turned the
   vertical upload stack into a two-column grid and — worse — forced #fileInfo
   to display:block, so the "file chosen" pill showed with no file chosen and
   pushed the dialog wider than the viewport. Dialogs keep their own layout. */
@media (max-width: 900px) {
    html body #modal .hidden,
    html body #modal-error .hidden,
    html body #modal-revision .hidden,
    html body #invite-modal .hidden {
        display: none !important;
    }

    html body #modal #uploadButtons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    html body #modal #uploadButtons .flex.gap-2\.5.items-center {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: auto !important;
    }

    html body #modal #fileInfo:not(.hidden) {
        display: flex !important;
    }

    /* With the rows above no longer forcing a wide min-content, the dialog can
       shrink to the viewport again; keep the template's mx-4 gutter. */
    html body #modal form {
        padding: 28px 20px !important;
    }

    /* The close button hangs outside the dialog's top-right corner, which on a
       viewport-width dialog puts it off-screen. Tuck it inside and darken the
       glyph (the SVG paints white, for the dimmed backdrop it normally sits on). */
    html body #modal > div > .absolute {
        top: 4px !important;
        right: 4px !important;
        margin: 0 !important;
    }

    html body #modal #closeIcon svg path {
        fill: var(--k-ink) !important;
    }
}

/* ---------------------------------------------------------------------------
   Two-pane text editors (translator + writing): keep the editor row inside the
   card.

   The two panes are flex items, which default to min-width:auto and therefore
   refuse to shrink below their content's min-content width. A wide image (or a
   long unbreakable token) pasted into a Quill editor makes that pane as wide as
   its content, so the `.gap-1` row can no longer shrink — it overflows the
   form, squeezing the other pane to a sliver. And because the form is a
   column-flex that stretches its children, the controls row widens to match.
   Pin every link in the chain to the card width (min-width:0 so it can shrink,
   max-width so it can't overflow) and scale pasted media. Keyed on the shared
   structure so it covers every two-pane editor, present and future.
   --------------------------------------------------------------------------- */
:is(#text-translate-content, #text-writing-content, #document-writing-content) form,
:is(#text-translate-content, #text-writing-content, #document-writing-content) form > div,
:is(#text-translate-content, #text-writing-content, #document-writing-content) form > div.flex.w-full.gap-1 > div,
:is(#text-translate-content, #text-writing-content, #document-writing-content) .ql-container,
:is(#text-translate-content, #text-writing-content, #document-writing-content) .ql-editor,
#text-writing-content form,
#text-writing-content form > div,
#text-writing-content form > div.flex.w-full.gap-1 > div,
#text-writing-content .ql-container,
#text-writing-content .ql-editor {
  min-width: 0 !important;
  max-width: 100% !important;
}
:is(#text-translate-content, #text-writing-content, #document-writing-content) .ql-editor img,
:is(#text-translate-content, #text-writing-content, #document-writing-content) .ql-editor video,
:is(#text-translate-content, #text-writing-content, #document-writing-content) .ql-editor .ql-video,
#text-writing-content .ql-editor img,
#text-writing-content .ql-editor video,
#text-writing-content .ql-editor .ql-video {
  max-width: 100% !important;
  height: auto !important;
}

/* Compact dropzone once files are chosen (.has-files, toggled by JS): the
   chips render above the zone (grid order rules mid-file) and the zone
   collapses to a small "add more" strip. Must sit last — it outranks the
   step-0 geometry, decoration and typography layers above. */
html body #document-translate-content .file-upload.has-files.step-0 {
  min-height: 0 !important;
}
html body #document-translate-content .file-upload.has-files.step-0 > div:first-child {
  min-height: 0 !important;
  padding: 18px 24px !important;
}
html body #document-translate-content .file-upload.has-files.step-0 > div:first-child::before,
html body #document-translate-content .file-upload.has-files.step-0 > div:first-child::after,
html body #document-translate-content .file-upload.has-files.step-0 > div:first-child > svg {
  display: none !important;
}
html body #document-translate-content .file-upload.has-files > div:first-child > span:first-child,
html body #document-translate-content .file-upload.has-files span.text-gray-575 {
  font-size: 18px !important;
  margin-bottom: 2px !important;
}
html body #document-translate-content .file-upload.has-files span.text-gray-400 {
  margin: 2px 0 10px !important;
  font-size: 12px !important;
}