/* =========================================================
   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.
     The values here are the kometa theme defaults. Admin overrides from
     VisualSettings are rendered as a :root override AFTER the stylesheets
     (templates/includes/branding_css.html), so nothing here may carry
     !important — it would beat the admin layer. */
  --primary: #2563EB;               /* 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 */

  /* Sidebar surface (admin-overridable independently of the ink text
     colors above; defaults reproduce the dark sidebar gradient). */
  --k-sidebar-top: var(--k-deep);
  --k-sidebar-bottom: var(--k-ink);
  --k-sidebar-bg: var(--k-deep);

  /* Tag/badge chips (language chips on glossary cards and file rows). */
  --k-tag-bg: #EDF2FB;
  --k-tag-text: #556A7B;

  /* 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-panel-gradient: linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,249,252,.92));
  --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;

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

  /* Feature scopes */
  --k-safe-blue-2: #2563EB;
  --k-safe-ink: #121B26;
  --k-safe-muted: #60747C;
  --k-client-blue: #2563EB;
  --k-client-blue-dark: #1D4ED8;
}

/* =========================================================
   Legacy base + third-party widget skin (formerly main.css,
   merged 2026-07-23 — kept ABOVE all kometa sections so every
   original main.css-before-kometa.css cascade relationship is
   preserved). Mostly select2/quill DOM, the glossary table and
   a few input primitives; --primary is defined in :root above.
   ========================================================= */
/*********** SELECT STYLES ***********/

.select2-container {
    width: 200px !important;
}

.select2-container--default .select2-selection--single {
    border: none;
    background-color: transparent;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url("/static/images/ico-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 1.5rem;
    height: 1rem;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-dropdown {
    border: none;
    box-shadow: 0 0 20px rgba(43, 68, 89, 0.08);
    margin-top: 6px;
    border-top-right-radius: 6px !important;
    border-top-left-radius: 6px !important;
}

.select2-search--dropdown .select2-search__field {
    border: none;
    outline: none;
    background-image: url('/static/images/ico-search.svg');
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 35px;
    font-size: 14px;
    font-weight: 400;
}

.select2-search--dropdown .select2-search__field::placeholder {
    color: #9EAAB3;
    font-size: 14px;
    font-weight: 400;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    outline: none;
    box-shadow: none;
}

.select2-container--default .select2-results__option--selected {
    background-color: transparent;
}

.select2-search--dropdown .select2-search__field {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


.select2-results__option {
    color: #0D2B40;
    font-weight: 400;
    font-size: 14px;
    padding: 8px 12px;
    border-top: 1px solid #E4E8EA;
    margin-right: 20px;
}


.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option:hover {
    background-color: transparent;
    color: var(--primary);
    font-weight: 600;
}

.select2-container--default.gray .select2-search--dropdown .select2-search__field:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.select2-container.gray {
    background: #F2F3F5;
    border-radius: 6px;
}

.select2-container.gray .select2-selection--single {
    height: auto;
    padding: 6px 20px;
    border-radius: 6px;
}

.select2-container--default.gray .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
}

.select2-container.gray .select2-selection {
    background: #F2F3F5;
}

.select2-container.gray .select2-container--default {
    background: #F2F3F5;
}

.select2-container--default.glossary .select2-search--dropdown .select2-search__field:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.select2-container.glossary {
    background: #F8F9FA;
    width: 270px !important;
    border-radius: 6px;
}

.select2-container.glossary .select2-selection--single {
    color: var(--primary);
    height: auto;
    padding: 12px 20px;
    border-radius: 6px;
}

.select2-container--default.glossary .select2-selection--single .select2-selection__rendered {
    font-size: 16px;
    border-radius: 6px;
}

.select2-container.glossary .select2-selection {
    background: #F8F9FA;
}

.select2-container.glossary .select2-container--open {
    background: #F8F9FA;
}

.select2-container.glossary .select2-container--default {
    background: #F8F9FA;
}

.select2-container--default.error .select2-search--dropdown .select2-search__field:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.select2-container.error {
    background: #FFF7F7;
}

.select2-container.error .select2-selection--single {
    height: auto;
    border-radius: 6px;
}

.select2-container--default.error .select2-selection--single .select2-selection__rendered {
    color: #9EAAB3;
    border-radius: 6px;
}

.select2-container.error .select2-selection {
    background: #FFF7F7;
}

.select2-container.error .select2-container--open {
    background: #FFF7F7;
    border-radius: 6px;
}

.select2-container.error .select2-container--default {
    background: #FFF7F7;
}

.select2-container.error .select2-dropdown {
    background: #FFF7F7;
}

.select2-container.error .select2-search {
    background-color: #FFF7F7;
}

.select2-container.error .select2-search input {
    background-color: #FFF7F7;
}

.select2-container.error .select2-results {
    background-color: #FFF7F7;
}

.select2-container.gray.action {
    width: 350px !important;
}



button:focus,
select:focus,
input:focus,
textarea:focus {
    outline: none;
}

.border-line {
    background-image: repeating-linear-gradient(to right, currentColor, currentColor 5px, transparent 5px, transparent 10px),
    repeating-linear-gradient(to right, currentColor, currentColor 5px, transparent 5px, transparent 10px),
    repeating-linear-gradient(to bottom, currentColor, currentColor 5px, transparent 5px, transparent 10px),
    repeating-linear-gradient(to bottom, currentColor, currentColor 5px, transparent 5px, transparent 10px);
    background-position: top, bottom, left, right;
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
    background-repeat: no-repeat;
}

.loader {
    width: 48px;
    height: 48px;
    border: 2px solid #556A7B;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#source-text,
#translated-text {
    resize: none;
    box-sizing: border-box;
    min-height: 200px;
    max-height: 100%;
    overflow: hidden;
}

#pre-text,
#post-text {
    resize: none;
    box-sizing: border-box;
    min-height: 200px;
    max-height: 100%;
    overflow: hidden;
}

input[type="checkbox"]:checked {
    background-image: url("/static/images/ico-check.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
}


.ql-editor {
    font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    font-size: 16px;
    transition: height 0.2s ease;
    overflow-y: hidden;
    padding: 0;
    height: auto;
}

.ql-container.ql-snow {
    border: none;
}

.ql-editor.ql-blank::before {
    left: 20px;
    color: #CACACA;
    font-size: 16px;
    font-style: normal;
}

.register-error-text {
    font-size: 24px;
}

@media (max-width: 1124px) {
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-selection__placeholder {
        font-size: 12px !important;
    }


}

@media (max-width: 480px) {
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-selection__placeholder {
        font-size: 12px !important;
    }


}

/* Arrow між 1-м і 2-м інпутом: 3px зліва/справа */
#glossary-body tr.glossary-row td:nth-child(2) .glossary-cell {
    position: relative;      /* на всяк випадок */
    margin-right: -2px;      /* 12px + 12px -> 20px gutter */
}

#glossary-body tr.glossary-row td:nth-child(3) .glossary-cell {
    margin-left: -2px;       /* 12px + 12px -> 20px gutter */
}

#glossary-body tr.glossary-row td:nth-child(2) .edit-arrow {
    position: absolute;
    left: calc(100% + 3px);  /* 3px від правого краю 1-го інпута */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

.select2-container .select2-selection.border-red-500 {
    border: 1px solid #ef4444 !important;
}


* { 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%, color-mix(in srgb, var(--k-blue) 18%, transparent), transparent 58%),
    radial-gradient(760px 420px at 98% 8%, color-mix(in srgb, var(--k-blue) 8%, transparent), 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 — consolidated terminal section at the end of this file. */

/* Header */
body > div > .flex-1.flex.flex-col.overflow-hidden {
  position: relative !important;
  min-width: 0 !important;
  background: transparent !important;
}
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;
}

/* 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;
}
/* (page wrappers are .content-shell in components.css) */
/* 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: var(--k-panel-gradient) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: var(--k-shadow-lg) !important;
}

/* Stepper — consolidated terminal section at the end of this file. */

/* Workflow cards (.step-container / .file-upload) — consolidated at the
   "safe theme" section mid-file (search: "Step container — consolidated"). */
.file-list > * {
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--k-blue) 8%, transparent) !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: color-mix(in srgb, var(--k-blue) 42%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-blue) 13%, transparent), 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: color-mix(in srgb, var(--k-blue) 42%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-blue) 13%, transparent), 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. */
#document-translate-content .detected-language-row {
  width: 100% !important;
  min-width: 0 !important;
}
#document-translate-content .detected-file {
  min-width: 0 !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--k-tag-bg) !important;
  color: var(--k-tag-text) !important;
  box-shadow: none !important;
}
#document-translate-content .detected-file > span {
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
#document-translate-content .detected-file .remove-detected-file {
  flex: 0 0 20px !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). The
   yellow/blue/red pills keep their literal semantic hues (matching the old
   yellow-100/blue-400/red-400 utilities they replaced) — they signal
   workflow states, not brand. */
.status-processing { color: var(--k-blue) !important; }
.status-done {
  background: color-mix(in srgb, var(--k-blue) 10%, transparent) !important;
  color: var(--k-blue) !important;
}
.status-queued {
  background: #FCF9ED !important;
  color: #D4A600 !important;
}
.status-accepted {
  background: #E9F4FF !important;
  color: #1E90FF !important;
}
.status-error {
  background: #FFEFEF !important;
  color: #FD625E !important;
}
.status-neutral { background: #EAECED !important; } /* text inherits table ink */
/* Pagination arrows (project history / usage) — links, not .btn, so they
   carry their own disabled state. */
#prev-page.is-disabled,
#next-page.is-disabled {
  color: #D5DADE !important;
  pointer-events: none !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,
main:has(> #main-loader:not(.hidden)) .corner-decoration {
  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: color-mix(in srgb, var(--k-blue) 16%, transparent) !important;
  border-top-color: var(--k-blue) !important;
}

/* Footer */

/* Utility overrides */
.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) {
  header.bg-header, header[class*="bg-header"], main, footer { padding-left: 20px !important; padding-right: 20px !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; }
  header.bg-header, header[class*="bg-header"] { padding: 14px 14px 8px !important; }
  main { padding: 0 14px 18px !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 */
@media (max-width: 900px) {
  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: var(--k-blue) / #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%, color-mix(in srgb, var(--k-blue) 20%, transparent), transparent 60%),
    radial-gradient(740px 430px at 88% 4%, color-mix(in srgb, var(--k-orange) 10.5%, transparent), 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, color-mix(in srgb, var(--k-blue) 5.5%, transparent) 24px 25px, transparent 25px 84px),
    radial-gradient(circle at 83% 76%, color-mix(in srgb, var(--k-orange) 9%, transparent) 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%, color-mix(in srgb, var(--k-blue) 10%, transparent), transparent 72%) !important;
}

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

/* Sidebar */

/* Header */




/* Page layout */
main {
  padding: 0 var(--content-gutter) !important;
  background: transparent !important;
  scrollbar-gutter: stable both-edges !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) */



/* 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: color-mix(in srgb, var(--k-blue) 48%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-blue) 12%, transparent) !important;
}

.select-block,
.target-language-container,
.detective-language-list,
.glossary-container {
  border-radius: 22px !important;
}
/* add-glossary dropzone flagged when no file was chosen (pairs with the
   upload button's .is-invalid); the normal background is the markup's
   bg-gray-25 utility, restored when the class is removed */
.glossary-container.is-invalid { background: #FFF7F7 !important; }
/* edit-glossary page states (toggled by glossary.js) */
#glossary-name-line.is-editing { border-color: #D5DADE; }
.glossary-input.is-editing {
  background-color: #F5F7F7;
  border-color: #F5F7F7;
  pointer-events: auto;
}
#glossary-prev-page.is-disabled,
#glossary-next-page.is-disabled {
  opacity: .5;
  pointer-events: none;
}
/* project-history download icon follows its button's disabled state
   (markup renders the initial state server-side with the same colours) */
.download-file:not([disabled]) svg { color: #292929; }
.download-file:not([disabled]):hover svg { color: var(--k-blue); }

.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 color-mix(in srgb, var(--k-blue) 18%, transparent) !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 */

/* Utility palette overrides */
.text-header_text { color: var(--k-ink-2) !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: color-mix(in srgb, var(--k-blue) 30%, transparent) !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 row (identity left, controls right) — must precede the gap/
   direction media tweaks below, which win by order at equal specificity */
header > .w-full {
  max-width: 1320px !important;
  margin: 0 auto !important;
  gap: 28px !important;
}

@media (max-width: 1024px) {
  header > .w-full { gap: 16px !important; }
  #document-translate-content > div,
  :is(#text-translate-content, #text-writing-content, #document-writing-content) > div { 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 .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; }
  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. */


/* Header: larger KOMETA mark and strictly branded profile/logout controls. */

/* Green/legacy hover cleanup: brand colors only for interactive states. */
button:hover,
a:hover,
button:focus,
a:focus {
  outline-color: color-mix(in srgb, var(--k-blue) 28%, transparent) !important;
}
select:focus,
textarea:focus,
input:focus {
  border-color: var(--k-blue) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-blue) 10%, transparent) !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 > 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;
}


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


@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; }
}

@media (max-width: 1024px) {
  .kometa-uploaded-state__grid { grid-template-columns: 1fr !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%, color-mix(in srgb, var(--k-orange) 7.5%, transparent), 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;
}
.text-gray-200 {
  color: #C8D0DC !important;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--k-blue) 20%, transparent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-blue) 35%, transparent) !important;
}


/* Header: stricter, calmer, precise. */
body > div > .flex-1 {
  min-width: 0 !important;
  background: transparent !important;
}
header,
/* Header shell — consolidated terminal state (formerly four layers).
   The hairline border-bottom and the glass blur are LIVE survivors of
   the mid layers (bisected 2026-07-23 — do not "simplify" them away);
   later media/typography rules keep overriding their own properties. */
header.bg-header,
header[class*="bg-header"] {
  height: 72px !important;
  min-height: 72px !important;
  padding: 10px var(--content-gutter) 8px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(18, 27, 38, .08) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  z-index: 3 !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 identity — consolidated terminal state (formerly four layers;
   plain header-scoped selectors on purpose: the later mobile block and
   the html-body typography pass must keep winning their properties).
   .portal-mark/.portal-logo-mark render only on the auth pages; the
   auth-page section adds its own overrides after this. */
header .portal-identity {
  position: relative !important;
  height: 54px !important;
  min-height: 54px !important;
  min-width: 0 !important;
  max-width: 540px !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 0 0 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !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-mark {
  position: relative !important;
  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;
  white-space: nowrap !important;
}
header .portal-subtitle {
  margin-top: 4px !important;
  color: var(--k-text-soft) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
header .flex.gap-5.items-center.font-semibold {
  gap: 10px !important;
}

/* Main canvas: no hidden scroll debt on the first screen. */
main {
  background:
    radial-gradient(circle at 3% 6%, color-mix(in srgb, var(--k-blue) 9%, transparent), transparent 18%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--k-orange) 5.5%, transparent), transparent 20%),
    linear-gradient(180deg, #F7F9FC 0%, #EEF1F6 100%) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
main .content-shell {
  padding: 22px 0 10px !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;
}


/* Step container — consolidated base: position + geometry only. The frosted
   background comes from the later card-frost pass, the text color from the
   .border-line rule further down, and the ≤820px-height / ≤900px-width
   medias later in the file compact the padding — this rule must stay
   BEFORE those medias. No z-index: it would open a stacking context and
   trap the modals nested in the steps below the mobile bottom nav. */
.step-container,
#document-translate-content .step-container {
  position: relative !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(18,27,38,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}
/* Upload CTA keeps a generous fixed width inside the dropzone. */
.file-upload .btn { min-width: 256px; }
/* Fixed inner-zone height on desktop: with min-height 230 on the same
   element this deliberately over-fills the zone so flex-shrink compacts
   the icon. LOW specificity on purpose — the ≤900px media later in the
   file must be able to release it to auto. */
.file-upload > div:first-child { height: 220px !important; }
/* Subline spacing/type at LOW specificity on purpose — the .has-files
   compact-state rules at the end of the file must keep out-ranking it. */
.file-upload span.text-gray-400 {
  margin: 8px 0 0 !important;
  font-size: 12px !important;
  font-weight: 560 !important;
}

/* Action strip under the wizard — hidden until a control is revealed.
   The wizard JS toggles #prev-step/#next-step/#restart/#restart-text via
   jQuery .hide()/.show() (inline display), so visibility keys on the
   inline style; a .hidden-class predicate would never fire here
   (#restart-text never carries the class). */
#document-translate-content .action-list {
  min-height: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 12px !important;
  /* Plain button row, not a panel: 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. */
  padding: 4px 34px 0 !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;
}
/* 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: color-mix(in srgb, var(--k-blue) 42%, transparent) !important;
}
input:focus,
textarea:focus,
select:focus,
.select2-container--focus .select2-selection {
  border-color: var(--k-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-blue) 13%, transparent) !important;
}

/* Footer: restrained, not competing with the workflow. */

@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; }
  .step-container, #document-translate-content .step-container { padding: 16px !important; }
  /* compact inner zone on short screens — only observable in the .has-files
     state, where the min-height floor is released */
  .file-upload > div:first-child { height: 200px !important; }
  footer { height: 42px !important; min-height: 42px !important; padding-top: 6px !important; padding-bottom: 8px !important; }
}

@media (max-width: 1024px) {
  header { padding-left: 22px !important; padding-right: 22px !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 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;
}



/* 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: color-mix(in srgb, var(--k-blue) 45%, transparent) !important;
  color: #121B26 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 3px color-mix(in srgb, var(--k-blue) 10%, transparent) !important;
}




/* Header controls keep fixed geometry on hover/focus. */
/* Logout button — consolidated terminal state (formerly six layers).
   All states render identically: the last color layer overrode hover
   long ago, so hover/focus differ only by the focus outline behavior. */
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,
html body header form[action*="logout"] button[type="submit"]:focus-visible {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 88px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 20px !important;
  line-height: 42px !important;
  border: 1px solid var(--k-ink) !important;
  border-radius: 17px !important;
  background: var(--k-ink) !important;
  background-image: none !important;
  color: var(--k-white) !important;
  box-shadow: 0 10px 20px rgba(8,15,23,.16) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  outline: none !important;
  transform: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !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;
}
/* Keep nearby action stable: hover changes only color, not geometry. */

/* Account identity link — consolidated terminal state (formerly five
   base layers plus the V10 specificity-lock chains): a plain clickable
   link, never a pill/button. Font-weight/letter-spacing intentionally
   yield to the later typography pass (V10 used to beat it on the link
   element only — an accident with no visible effect, since only the
   span carries text). */
html body header a.profile-trigger,
html body header a.profile-trigger:hover,
html body header a.profile-trigger:focus,
html body header a.profile-trigger: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-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  color: var(--k-ink) !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.profile-trigger:hover,
html body header a.profile-trigger:focus-visible {
  color: var(--k-blue) !important;
  opacity: 1 !important;
}
html body header a.profile-trigger 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: var(--k-blue) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  transition: color .18s ease, opacity .18s ease !important;
}
html body header a.profile-trigger:hover svg {
  opacity: .84 !important;
}
html body header a.profile-trigger span {
  display: inline-block !important;
  height: 28px !important;
  line-height: 28px !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-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.profile-trigger:hover span,
html body header a.profile-trigger:focus-visible span {
  text-decoration-color: var(--k-blue) !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 .border-line.step-container {
  color: var(--k-safe-ink) !important;
}

#document-translate-content .file-upload.step-0 {
  position: relative !important;
  min-height: 230px !important;
  /* grows with content and does not clip: the .file-list occupies the
     upload grid's second row, outside the old fixed-height box */
  height: auto !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: visible !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !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;
  background: var(--k-tag-bg) !important;
  color: var(--k-tag-text) !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::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 {
  margin: 0 0 7px !important;
  color: var(--k-safe-ink) !important;
  font-size: 26px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -.055em !important;
}

/* margin/font-size/font-weight live on the low-specificity companion rule
   (search: "Subline spacing/type") so .has-files can override them */
#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: var(--k-blue) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--k-blue) 10%, transparent) !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;
  }


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

  /* The language-pair row cannot keep its two desktop columns once the
     source chip and select no longer fit side by side. Stack the controls
     and let Select2 consume the remaining row width. */
  #document-translate-content .step-1 {
    flex-direction: column !important;
    gap: 16px !important;
  }
  #document-translate-content .step-1 > div {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
  }
  #document-translate-content .detective-language-list {
    width: 100% !important;
    align-items: stretch !important;
  }
  #document-translate-content .detected-language-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  #document-translate-content .detected-file,
  #document-translate-content .detected-language-row > div:last-child,
  #document-translate-content .target-language-container,
  #document-translate-content .select-block {
    width: 100% !important;
    min-width: 0 !important;
  }
  #document-translate-content .detected-language-row .select2-container,
  #document-translate-content .target-language-container .select2-container {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }

  /* release the fixed desktop inner-zone height (same specificity as the
     base rule, later in the file — order decides) */
  .file-upload > div:first-child { height: auto !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 color-mix(in srgb, var(--k-blue) 30%, transparent) !important;
  background: var(--k-panel-gradient) !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;
}

#document-writing-content .document-writing-file {
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 6px !important;
  gap: 8px !important;
}

#document-writing-content .document-writing-file__name {
  min-width: 0 !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  background: var(--k-tag-bg) !important;
  color: var(--k-tag-text) !important;
  overflow-wrap: anywhere !important;
}

#document-writing-content .document-writing-file .remove-file {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px !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: var(--k-panel-gradient) !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: color-mix(in srgb, var(--k-blue) 18%, transparent) !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 color-mix(in srgb, var(--k-blue) 12%, transparent), 26px 0 0 3px color-mix(in srgb, var(--k-blue) 18%, transparent), 52px 0 0 3px color-mix(in srgb, var(--k-blue) 18%, transparent) !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 color-mix(in srgb, var(--k-blue) 22%, transparent) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--k-blue) 20%, transparent) 0 48%, rgba(255,255,255,.75) 48% 52%, color-mix(in srgb, var(--k-blue) 20%, transparent) 52% 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 28px color-mix(in srgb, var(--k-blue) 10%, transparent) !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: var(--k-panel-gradient) !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-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: color-mix(in srgb, var(--k-blue) 20%, transparent) !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;
}
/* the usage page mutes its disabled arrows differently from the default
   #prev/#next-page.is-disabled rule (matches the old text-gray-225 look) */
.usage-history-page .pagination #prev-page.is-disabled,
.usage-history-page .pagination #next-page.is-disabled {
  color: rgba(75,91,103,.68) !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: color-mix(in srgb, var(--k-blue) 22%, transparent) !important;
    background: linear-gradient(180deg, var(--k-btn-top), var(--k-btn-bottom)) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--k-blue) 25%, transparent), 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 color-mix(in srgb, var(--k-blue) 20%, transparent) !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: color-mix(in srgb, var(--k-blue) 88%, transparent) !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: color-mix(in srgb, var(--k-blue) 24%, transparent) !important;
    background: color-mix(in srgb, var(--k-blue) 10%, transparent) !important;
    color: var(--k-btn-bottom) !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: var(--k-panel-gradient) !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-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: var(--k-panel-gradient) !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-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;
  }
}

/* Shared empty table row. Project history is the visual reference; glossary
   and usage empty states use this exact surface, width, spacing and type. */
:is(.project-history-table, .glossaries-table, .usage-table) tbody td.table-empty-state {
  width: 100% !important;
  padding: 13px 10px !important;
  border: 1px solid rgba(15,44,52,.07) !important;
  border-radius: 18px !important;
  background: var(--k-panel-gradient) !important;
  color: rgba(8,15,23,.78) !important;
}

:is(.project-history-table, .glossaries-table, .usage-table) tbody td.table-empty-state p {
  color: inherit !important;
}

:is(.project-history-table, .glossaries-table, .usage-table) tbody td.table-empty-state[colspan] p:first-child {
  color: inherit !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 :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%, color-mix(in srgb, var(--k-blue) 8%, transparent), 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 .glossaries-table-card,
html body .project-history-table-card,
html body .usage-table-card {
  background: var(--k-panel-gradient) !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: color-mix(in srgb, var(--k-blue) 10%, transparent) !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;
}


/* 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. */
/* Footer — consolidated terminal state (formerly four append-layers;
   media-scoped tweaks remain at their original positions). */
html body footer {
  height: 42px !important;
  min-height: 42px !important;
  padding: 4px var(--content-gutter) 8px !important;
  background: transparent !important;
  color: rgba(18,27,38,.52) !important;
}
html body 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;
}
html body footer .portal-footer-brand {
  display: inline-flex !important;   /* blockified to flex as a flex item */
  justify-content: center !important;
  align-items: center !important;
  gap: 9px !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  color: var(--k-text-soft) !important;
  font-size: 12px !important;
}
html body footer .portal-footer-label {
  color: var(--k-text-soft) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
}
html body footer .portal-footer-logo-link,
html body footer .portal-footer-logo-link:hover {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  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;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
html body footer .portal-footer-logo-link:hover {
  transform: translateY(-1px) !important;
}
html body footer .portal-footer-logo {
  display: block !important;
  width: 185px !important;
  height: auto !important;
  max-height: 40px !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  html body footer .portal-footer-logo {
    width: 168px !important;
    max-height: 40px !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%, color-mix(in srgb, var(--k-blue) 8%, transparent), 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: var(--k-orange) !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: color-mix(in srgb, var(--k-blue) 42%, transparent) !important;
}

html body.auth-page form[name="login"] input:focus {
  border-color: var(--k-blue) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-blue) 13%, transparent), 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;
}

/* JS validation failures on any auth form (login, register, forgot/reset) —
   the softer legacy red the old border-red-400/text-red-400 utilities meant
   to give. They never actually rendered: the global form-control rule
   (`input:not(...):not(...)`, four :not()s ≈ four classes) out-ranked them
   everywhere — a bug, not a design decision. The :not() chain here matches
   that rule's specificity so the error finally shows; :focus keeps winning
   with the blue treatment. */
html body.auth-page form input.is-invalid:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  border-color: #FD625E !important;
  color: #FD625E !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: var(--k-blue) !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: var(--k-blue-hover) !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 color-mix(in srgb, var(--k-blue) 78%, transparent) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--k-btn-top), var(--k-btn-bottom)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--k-blue) 22%, transparent), 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, var(--k-blue), var(--k-blue-hover)) !important;
  border-color: var(--k-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--k-blue) 26%, transparent), 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: var(--k-orange) !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: color-mix(in srgb, var(--k-blue) 42%, transparent) !important;
}

html body.auth-page form[name="forgot-password"] input:focus {
  border-color: var(--k-blue) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-blue) 13%, transparent), 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 color-mix(in srgb, var(--k-blue) 78%, transparent) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--k-btn-top), var(--k-btn-bottom)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--k-blue) 22%, transparent), 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, var(--k-blue), var(--k-blue-hover)) !important;
  border-color: var(--k-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--k-blue) 26%, transparent), 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: var(--k-blue) !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: var(--k-blue) !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;
  }
}


/* Corner decoration infrastructure. The decoration itself is an add-on:
   CSS-drawn variants live in static/css/decorations/<style>.css (loaded by
   base templates only when VisualSettings selects that style, drawing via
   main.corner-decoration-on::before/::after), and the "image" style renders
   an <img class="corner-decoration"> instead. Rules here are shared by all
   variants. */
main .corner-decoration {
  position: absolute !important;
  right: 44px !important;
  top: 26px !important;
  max-width: 220px !important;
  /* pages that reserve top-right space calibrate to a decoration bottom of
     ~118px (top 26 + 88); a taller image would overlap their header row */
  max-height: 88px !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
@media (max-width: 1024px) {
  main.corner-decoration-on::before,
  main.corner-decoration-on::after,
  main .corner-decoration {
    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,
body:has(.modal-overlay:not(.hidden)) main .corner-decoration {
  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. */
/* 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 color-mix(in srgb, var(--k-blue) 22%, transparent) !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 color-mix(in srgb, var(--k-blue) 30%, transparent),
    0 4px 10px color-mix(in srgb, var(--k-blue) 16%, transparent) !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.corner-decoration-on .glossaries-page,
  html body main.corner-decoration-on .project-history-page,
  html body main.corner-decoration-on .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 / #FF7A1A;
   brand hues are referenced via the --k-* tokens so admin overrides apply). */
.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: var(--k-blue-hover) !important;
}
.text-secondary,
.text-secondary_button {
  color: var(--k-blue-hover) !important;
}
.border-secondary {
  border-color: var(--k-blue-hover) !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;
}
/* language/badge chips — the only utilities the old DB-driven Tailwind
   config still painted; now owned here via the tag tokens. */
.bg-tag_bg { background-color: var(--k-tag-bg) !important; }
.text-tag_text { color: var(--k-tag-text) !important; }
/* detected-file chip flagged by the language-consistency check: a red
   outline only — the old JS also swapped red bg/text utilities, but the
   tag-token rules above always out-ranked them (dead since the KOMETA
   theme), so the border is the whole visible state. */
.detected-file.is-invalid { border: 1px solid #FD625E !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;
}

/* =========================================================
   Sidebar — consolidated terminal state (formerly five layers
   spread across the file: base, v6, editorial app-shell,
   layout QC, capsule removal). Bisected 2026-07-24.
   Notes that must survive future edits:
   - the shell keeps position/z-index (the nav drop shadow must paint
     over the content column);
   - label spans: 11.5px / 1.12 / -.02em / max-width 100% are the LIVE
     values (the old v6 layer used to win them by specificity over the
     app-shell span rule);
   - nav li margin 9px AND ul gap 4px are both live (13px tile spacing);
   - hover has no transform (the layout-QC transform:none blanket wins);
     on inactive-tile hover the palette-lock `.hover\:bg-active_sidebar_link
     :hover` rule wins background-color by specificity — same as before;
   - the ≤900px hide at the end of this section is REQUIRED: the earlier
     mobile media alone would lose to the shell display:flex below.
   ========================================================= */
body > div > .flex-shrink-0 {
  position: relative !important;
  z-index: 5 !important;
  width: 168px !important;
  min-width: 168px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  padding: 18px 0 !important;
  background: var(--k-sidebar-bg) !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, var(--k-sidebar-top), var(--k-sidebar-bottom)) !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;
}
/* no CSS-drawn capsule in the sidebar corner (the corner decoration is an
   opt-in add-on rendered in the content area — see the corner-decoration
   infrastructure section) */
body > div > .flex-shrink-0 nav::after,
nav.bg-sidebar::after,
nav[class*="bg-sidebar"]::after {
  content: none !important;
  display: none !important;
}
/* Brand 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), var(--k-btn-deep)) !important;
  box-shadow: 0 18px 36px color-mix(in srgb, var(--k-blue) 28%, transparent) !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;
  margin: 0 0 9px !important;
}
/* the [href] variant keeps class-level specificity so the palette-lock
   utility neutralizers (single-class selectors) cannot out-rank the base
   tile style */
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 {
  background: color-mix(in srgb, var(--k-blue) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--k-blue) 42%, transparent) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
nav a.bg-active_sidebar_link,
nav a#nav-translation.bg-active_sidebar_link {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, var(--k-blue) 0%, var(--k-blue-hover) 100%) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--k-blue) 24%, transparent) !important;
}
nav a.bg-active_sidebar_link:hover,
nav a#nav-translation.bg-active_sidebar_link:hover {
  background: linear-gradient(180deg, var(--k-blue-hover) 0%, var(--k-btn-deep) 100%) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--k-blue) 24%, transparent) !important;
}
nav a span,
nav a span.font-normal {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
  font-size: 11.5px !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
  opacity: .88 !important;
}
nav a svg {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  margin-bottom: 2px !important;
  color: currentColor !important;
  opacity: .88 !important;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.18));
}
/* BETA badge kept inside the AI-editor tile, pinned to its top-right
   without overlapping the icon or label. */
nav a[href*="/writing/"] {
  position: relative !important;
  padding-top: 13px !important;
  padding-bottom: 10px !important;
}
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;
}
nav a[href*="/writing/"] span.absolute,
nav a[href*="/writing/"] .absolute.-top-3,
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;
}
nav a[href*="/writing/"] > span.font-normal {
  margin-top: 7px !important;
  width: 100% !important;
  white-space: nowrap !important;
}
@media (max-width: 1024px) {
  body > div > .flex-shrink-0 { width: 150px !important; min-width: 150px !important; }
  body > div > .flex-shrink-0 nav,
  nav.bg-sidebar,
  nav[class*="bg-sidebar"] { width: 122px !important; }
  nav a span,
  nav a span.font-normal { font-size: 10.8px !important; }
}
@media (max-width: 900px) {
  body > div > .flex-shrink-0 { display: none !important; }
}

/* =========================================================
   Document wizard stepper strip — consolidated terminal state
   (formerly ~10 generations and 8 media bands spread across the
   file; computed-captured and bisected 2026-07-24). Scope: the
   progress field, rail, points and label rows. The step cards,
   .step-container and .file-upload keep their own sections; the
   .is-done/.is-current state colors live in the "document wizard
   stepper states" section above (it out-ranks these rules by
   specificity, so section order does not matter).
   Facts that must survive future edits:
   - status rows appear only when they mean something: JS removes
     .hidden once it fills the language pair / domain / terminology,
     and step-0's static "Documents uploaded" once the first file is
     selected; hidden status lines keep their reserved 18px
     (visibility, not display) so nothing shifts when they appear;
   - ≤640px the strip becomes a vertical list (media at the end of
     this section); the ≥641px media carries the tall-strip heights;
   - the field border literal rgba(12,104,232,.09) predates the tint
     tokens and is kept for pixel parity;
   - points inherit font-size to the svg row (line-height is a
     unitless 1.2 so both ≤1180px and desktop bands scale from one
     declaration). */
#document-translate-content > div > div.w-full:first-child {
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 24px 34px 26px !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;
  overflow: visible !important;
}
#document-translate-content .relative.pt-1 {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 106px !important;
  min-height: 106px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 1px solid rgba(12, 104, 232, 0.09) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.64) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90) !important;
  overflow: visible !important;
}
#document-translate-content .overflow-hidden.h-1\.5,
#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;
  box-shadow: inset 0 1px 2px rgba(8,15,23,.08) !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
#progress-bar {
  height: 4px !important;
  min-height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--k-client-blue), var(--k-client-blue-dark)) !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;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 106px !important;
  min-height: 106px !important;
  padding: 0 42px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: start !important;
  /* stretch, not the element's justify-between utility — inert with five
     1fr columns but declared here so the utility never resurfaces */
  justify-content: stretch !important;
  gap: 0 !important;
  overflow: visible !important;
  z-index: 2 !important;
}
#step-0,
#point-1,
#point-2,
#point-3,
#point-4 {
  position: relative !important;
  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;
  gap: 7px !important;
  text-align: center !important;
  overflow: visible !important;
  z-index: 3 !important;
  color: var(--k-text-muted) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
}
/* the upload step is the brand-colored anchor of the strip in every state */
#step-0 { color: var(--k-blue) !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: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 17px auto 14px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  filter: drop-shadow(0 8px 18px rgba(8, 15, 23, 0.10)) !important;
  position: relative !important;
  z-index: 3 !important;
}
#step-0 > div,
#point-1 > div,
#point-2 > div,
#point-3 > 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;
}
#step-0 span,
#point-1 span,
#point-2 span,
#point-3 span,
#point-4 span {
  display: block !important;
  width: 100% !important;
  max-width: 168px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !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 {
  height: 18px !important;
  min-height: 18px !important;
  color: #121826 !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 760 !important;
  letter-spacing: -.025em !important;
}
#point-4 > span {
  width: 100% !important;
  padding: 0 !important;
  color: #121826 !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 760 !important;
  letter-spacing: -.025em !important;
}
/* reserves the (invisible) status line under the processing label so the
   five columns keep one baseline */
#point-4::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 17px !important;
  min-height: 17px !important;
}
/* status rows — one shared style (title rows above share another; see
   docs/design.md). Every status line keeps its reserved 18px so nothing
   shifts when it appears; the .hidden variants stay in the list so
   `display: block` keeps beating the global `.hidden { display: none }`. */
#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-1 .language-step,
#point-2 .domain-step,
#point-3 .terminology-step,
#point-1 .language-step.hidden,
#point-2 .domain-step.hidden,
#point-3 .terminology-step.hidden,
#step-0 > div > span:nth-child(2).hidden,
#point-1 > div > span:nth-child(2).hidden,
#point-2 > div > span:nth-child(2).hidden,
#point-3 > div > span:nth-child(2).hidden {
  display: block !important;
  height: 18px !important;
  min-height: 18px !important;
  line-height: 18px !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  color: rgba(101, 115, 134, 0.82) !important;
}
/* the language pair lays out source ➔ target on one centered line
   (selector matches the structural rule's specificity — order decides) */
#point-1 > div > span.language-step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  max-height: 18px !important;
}
#point-2 .domain-step,
#point-3 .terminology-step {
  max-height: 18px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* nested pair fragments inherit the status row's typography (design rule:
   nothing inside a status row gets its own type style) */
#point-1 .language-step .source,
#point-1 .language-step .target {
  display: inline !important;
  width: auto !important;
}
#point-1 .language-step svg {
  width: 10px !important;
  height: 8px !important;
  flex-shrink: 0 !important;
}
/* a status line is invisible (but keeps its space) until it means
   something: JS drops .hidden once it fills the pair/domain/terminology,
   and on step-0 once the first document is selected */
#point-1 .language-step.hidden,
#point-2 .domain-step.hidden,
#point-3 .terminology-step.hidden,
#point-1 > div > span:nth-child(2).hidden,
#point-2 > div > span:nth-child(2).hidden,
#point-3 > div > span:nth-child(2).hidden,
#step-0 > div > span:nth-child(2).hidden {
  visibility: hidden !important;
}
@media (min-width: 641px) {
  #document-translate-content .relative.pt-1,
  #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"],
  #step-0,
  #point-1,
  #point-2,
  #point-3,
  #point-4 {
    height: 118px !important;
    min-height: 118px !important;
  }
  #step-0 > div,
  #point-1 > div,
  #point-2 > div,
  #point-3 > div {
    min-height: 62px !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 > span {
    min-height: 30px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  #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 {
    font-size: 11.5px !important;
    line-height: 14px !important;
  }
}
@media (max-width: 1180px) {
  #step-0, #point-1, #point-2, #point-3, #point-4 { font-size: 11px !important; }
}
@media (max-width: 1024px) {
  #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"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}
@media (max-width: 900px) {
  #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"] {
    justify-content: flex-start !important;
  }
}
@media (max-height: 820px) {
  #document-translate-content > div > div.w-full:first-child { margin-bottom: 12px !important; }
}
@media (max-height: 760px) {
  #document-translate-content .relative.pt-1 { margin-bottom: 10px !important; }
}
/* ≤640px: the stepper becomes a vertical list — point beside its label,
   rail running down the left. (This is the layout a broken rule prelude
   had silently swallowed for generations; restored 2026-07-24.) Wins over
   the base 106px strip by order; the ≥641px media above never matches
   here. The progress fill is collapsed (the JS animates its width for the
   horizontal rail); state is carried by the point colors alone. */
@media (max-width: 640px) {
  #document-translate-content > div > div.w-full:first-child {
    padding: 18px !important;
    overflow: visible !important;
  }
  #document-translate-content .relative.pt-1 {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  #document-translate-content .overflow-hidden.h-1\.5,
  #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;
  }
  #document-translate-content #progress-bar {
    width: 4px !important;
    height: 0 !important;
    min-height: 0 !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: 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;
  }
  #step-0,
  #point-1,
  #point-2,
  #point-3,
  #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;
  }
  #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 {
    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;
  }
  #step-0 > div,
  #point-1 > div,
  #point-2 > div,
  #point-3 > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
  }
  #point-4 > span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    text-align: left !important;
  }
  #point-4::after {
    content: none !important;
    display: none !important;
  }
  #step-0 span,
  #point-1 span,
  #point-2 span,
  #point-3 span,
  #point-4 span {
    max-width: none !important;
    text-align: left !important;
    white-space: normal !important;
  }
  /* the pair line hugs the left edge like the other status text */
  #point-1 > div > span.language-step {
    justify-content: flex-start !important;
  }
}