/* [project]/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .table {
    display: table;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-grow, .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

:root {
  --canvas: #f4f4f1;
  --paper: #fff;
  --ink: #171820;
  --muted: #71727c;
  --line: #e5e4df;
  --line-strong: #d3d2cc;
  --navy: #191a3a;
  --navy-soft: #282951;
  --violet: #715cff;
  --violet-dark: #5844e8;
  --violet-pale: #efedff;
  --green: #14845e;
  --green-pale: #e8f7f0;
  --red: #c93d4c;
  --red-pale: #fff0f2;
  --amber: #b46d16;
  --shadow: 0 10px 28px #1c1d2f0e;
}

.category-attribute-admin-page {
  background: #f5f7fb;
  min-width: 0;
}

.category-attribute-admin-header {
  align-items: center;
}

.category-attribute-admin-header h1 {
  margin: 3px 0 5px;
  font-size: 25px;
}

.category-attribute-admin-header p:last-child {
  color: #667085;
  margin: 0;
  font-size: 13px;
}

.category-attribute-admin-notice {
  margin: 14px 22px 0;
}

.category-attribute-toolbar {
  margin: 18px 22px 12px;
  padding: 16px;
}

.category-attribute-toolbar form {
  grid-template-columns: minmax(320px, 1fr) 170px 170px auto;
  align-items: end;
  gap: 12px;
  display: grid;
}

.category-attribute-toolbar label {
  color: #475467;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.category-attribute-toolbar input, .category-attribute-toolbar select, .category-attribute-table input, .category-attribute-table textarea {
  color: #101828;
  width: 100%;
  font: inherit;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}

.category-attribute-toolbar input, .category-attribute-toolbar select, .category-attribute-table input {
  min-height: 38px;
  padding: 8px 10px;
}

.category-attribute-batch-actions {
  border-top: 1px solid #eaecf0;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 13px;
  display: flex;
}

.category-attribute-batch-actions > span {
  color: #667085;
  margin-right: auto;
  font-size: 12px;
}

.category-attribute-batch-actions button, .category-attribute-pagination button {
  color: #344054;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  min-height: 34px;
  padding: 0 12px;
}

.category-attribute-batch-actions button:disabled, .category-attribute-pagination button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.category-attribute-table-card {
  margin: 0 22px 24px;
  overflow: hidden;
}

.category-attribute-table-wrap {
  max-height: calc(100vh - 315px);
}

.category-attribute-table {
  min-width: 1180px;
}

.category-attribute-table thead th {
  z-index: 2;
  background: #f8fafc;
  position: sticky;
  top: 0;
}

.category-attribute-table th:first-child, .category-attribute-table td:first-child {
  text-align: center;
  width: 42px;
}

.category-attribute-table th:nth-child(2) {
  width: 190px;
}

.category-attribute-table th:nth-child(3) {
  width: 80px;
}

.category-attribute-table th:nth-child(4), .category-attribute-table th:nth-child(5) {
  width: 280px;
}

.category-attribute-table th:nth-child(6) {
  width: 130px;
}

.category-attribute-table th:nth-child(7) {
  width: 110px;
}

.category-attribute-table td {
  vertical-align: top;
}

.category-attribute-table td:first-child input, .category-attribute-table th:first-child input {
  width: 16px;
  min-height: 16px;
}

.category-attribute-table td:nth-child(2), .category-attribute-table td:nth-child(6) {
  gap: 5px;
  display: grid;
}

.category-attribute-table td small, .category-attribute-table td code {
  color: #667085;
  font-size: 11px;
}

.category-attribute-table td p {
  color: #667085;
  white-space: pre-wrap;
  max-height: 74px;
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.55;
  overflow: auto;
}

.category-attribute-table textarea {
  resize: vertical;
  min-height: 58px;
  margin-top: 7px;
  padding: 8px 10px;
  line-height: 1.45;
}

.category-attribute-edit-button {
  color: #5844e8;
  white-space: nowrap;
  cursor: pointer;
  background: #f5f3ff;
  border: 1px solid #bcb5ff;
  border-radius: 8px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 750;
}

.category-attribute-table tr.dirty td {
  background: #fffbea;
}

.category-attribute-table tr.manual td:first-child {
  box-shadow: inset 3px 0 #7f56d9;
}

.category-attribute-required, .category-attribute-optional, .category-attribute-translation-mode {
  border-radius: 999px;
  width: fit-content;
  padding: 3px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  display: inline-flex;
}

.category-attribute-required {
  color: #b42318;
  background: #fee4e2;
}

.category-attribute-optional {
  color: #175cd3;
  background: #eaf2ff;
}

.category-attribute-translation-mode.ozon {
  color: #027a48;
  background: #ecfdf3;
}

.category-attribute-translation-mode.manual {
  color: #6941c6;
  background: #f4ebff;
}

.category-attribute-empty {
  color: #667085;
  place-items: center;
  gap: 5px;
  min-height: 180px;
  display: grid;
}

.category-attribute-pagination {
  color: #667085;
  border-top: 1px solid #eaecf0;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 12px;
  display: flex;
}

.category-attribute-pagination div {
  gap: 8px;
  display: flex;
}

.category-attribute-editor-backdrop {
  z-index: 500;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #10182894;
  place-items: center;
  padding: 28px;
  display: grid;
  position: fixed;
  inset: 0;
}

.category-attribute-editor {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 16px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1040px, 100%);
  max-height: min(850px, 100vh - 56px);
  display: grid;
  overflow: hidden;
  box-shadow: 0 24px 64px #10182847;
}

.category-attribute-editor > header, .category-attribute-editor > footer {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 17px 20px;
  display: flex;
}

.category-attribute-editor > header {
  border-bottom: 1px solid #eaecf0;
}

.category-attribute-editor > header span {
  color: #715cff;
  font-size: 11px;
  font-weight: 800;
}

.category-attribute-editor > header h2 {
  color: #101828;
  margin: 3px 0;
  font-size: 19px;
}

.category-attribute-editor > header p, .category-attribute-editor > footer > span {
  color: #667085;
  margin: 0;
  font-size: 12px;
}

.category-attribute-editor > header > button {
  color: #475467;
  cursor: pointer;
  background: #f2f4f7;
  border: 0;
  border-radius: 9px;
  width: 36px;
  height: 36px;
  font-size: 22px;
}

.category-attribute-editor-list {
  background: #f8fafc;
  gap: 12px;
  padding: 16px 20px;
  display: grid;
  overflow-y: auto;
}

.category-attribute-editor-list article {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  overflow: hidden;
}

.category-attribute-editor-meta {
  border-bottom: 1px solid #eaecf0;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  display: flex;
}

.category-attribute-editor-meta > span {
  color: #5844e8;
  background: #efedff;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.category-attribute-editor-meta div {
  gap: 2px;
  display: grid;
}

.category-attribute-editor-meta strong {
  color: #101828;
  font-size: 13px;
}

.category-attribute-editor-meta small {
  color: #667085;
  font-size: 10px;
}

.category-attribute-editor-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
  padding: 14px;
  display: grid;
}

.category-attribute-source-copy {
  background: #f8fafc;
  border-radius: 10px;
  min-width: 0;
  padding: 13px;
}

.category-attribute-source-copy label, .category-attribute-edit-fields label > span {
  color: #667085;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 800;
  display: block;
}

.category-attribute-source-copy strong {
  color: #344054;
  font-size: 13px;
}

.category-attribute-source-copy p {
  color: #667085;
  white-space: pre-wrap;
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.category-attribute-edit-fields {
  gap: 12px;
  display: grid;
}

.category-attribute-edit-fields input, .category-attribute-edit-fields textarea {
  color: #101828;
  width: 100%;
  font: inherit;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  outline: none;
  padding: 9px 11px;
}

.category-attribute-edit-fields input {
  min-height: 40px;
}

.category-attribute-edit-fields textarea {
  resize: vertical;
  line-height: 1.55;
}

.category-attribute-edit-fields input:focus, .category-attribute-edit-fields textarea:focus {
  border-color: #715cff;
  box-shadow: 0 0 0 3px #715cff1f;
}

.category-attribute-edit-fields b {
  color: #d92d20;
}

.category-attribute-editor > footer {
  background: #fff;
  border-top: 1px solid #eaecf0;
}

.category-attribute-editor > footer div {
  gap: 9px;
  display: flex;
}

.category-attribute-editor > footer button {
  color: #344054;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  min-height: 38px;
  padding: 0 15px;
  font-weight: 750;
}

.category-attribute-editor > footer button.primary-button {
  color: #fff;
  background: #715cff;
  border-color: #715cff;
}

.category-attribute-editor > footer button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

@media (max-width: 980px) {
  .category-attribute-toolbar form {
    grid-template-columns: 1fr 1fr;
  }

  .category-attribute-search {
    grid-column: 1 / -1;
  }

  .category-attribute-batch-actions, .category-attribute-admin-header {
    flex-direction: column;
    align-items: stretch;
  }

  .category-attribute-editor-grid {
    grid-template-columns: 1fr;
  }

  .category-attribute-editor-backdrop {
    padding: 12px;
  }
}

.publication-snapshot-main {
  align-content: start;
  gap: 20px;
  display: grid;
}

.publication-snapshot-banner {
  background: #fff;
  border: 1px solid #d9dce5;
  border-radius: 18px;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  display: flex;
}

.publication-snapshot-banner > span {
  color: #16824b;
  background: #e9f8ef;
  border-radius: 50%;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 24px;
  font-weight: 800;
  display: grid;
}

.publication-snapshot-banner.processing > span {
  color: #a76400;
  background: #fff4db;
}

.publication-snapshot-banner div {
  gap: 4px;
  display: grid;
}

.publication-snapshot-banner small {
  color: #777d8f;
  letter-spacing: .08em;
}

.publication-snapshot-banner strong {
  font-size: 18px;
}

.publication-snapshot-banner p {
  color: #626879;
  margin: 0;
}

.publication-snapshot-summary {
  grid-template-columns: 112px minmax(0, 1fr) minmax(340px, .7fr);
  align-items: center;
  gap: 22px;
  padding: 22px;
  display: grid;
}

.publication-snapshot-summary > img, .publication-snapshot-placeholder {
  aspect-ratio: 1;
  object-fit: cover;
  background: #f1f2f6;
  border-radius: 14px;
  width: 112px;
}

.publication-snapshot-placeholder {
  color: #969bad;
  place-items: center;
  font-weight: 800;
  display: grid;
}

.publication-snapshot-summary h2, .publication-snapshot-summary p {
  margin: 4px 0;
}

.publication-snapshot-summary dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  display: grid;
}

.publication-snapshot-summary dl div {
  background: #f7f8fb;
  border-radius: 12px;
  gap: 3px;
  padding: 12px;
  display: grid;
}

.publication-snapshot-summary dt {
  color: #858a99;
  font-size: 12px;
}

.publication-snapshot-summary dd {
  margin: 0;
  font-weight: 700;
}

.publication-snapshot-source {
  background: #fff;
  border-color: #d9dce5;
  border-radius: 18px;
  margin: 0;
}

.publication-snapshot-footer-actions {
  justify-content: flex-end;
  gap: 12px;
  display: flex;
}

.publication-snapshot-footer-actions a {
  color: inherit;
  background: #fff;
  border: 1px solid #d9dce5;
  border-radius: 10px;
  padding: 10px 15px;
  text-decoration: none;
}

@media (max-width: 980px) {
  .publication-snapshot-summary {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .publication-snapshot-summary dl {
    grid-column: 1 / -1;
  }
}

.image-task-monitor {
  background: linear-gradient(135deg, #fbfaff, #f5f3ff);
  border: 1px solid #d9d3ff;
  border-radius: 12px;
  max-width: 1600px;
  margin: 20px auto 0;
  overflow: hidden;
  box-shadow: 0 8px 24px #503db214;
}

.image-task-monitor > header {
  border-bottom: 1px solid #e4e0ff;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 9px 14px;
  display: flex;
}

.image-task-monitor > header > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.image-task-monitor > header strong {
  font-size: 12px;
}

.image-task-monitor > header small {
  color: var(--violet-dark);
  background: #e8e4ff;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 750;
}

.image-task-monitor > header a {
  color: var(--violet-dark);
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
}

.image-task-live-dot {
  background: #6d56ff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 1.6s ease-in-out infinite image-task-pulse;
  box-shadow: 0 0 0 4px #6d56ff1f;
}

.image-task-monitor-list {
  background: #e8e4fa;
  gap: 1px;
  display: grid;
}

.image-task-monitor-list article {
  background: #ffffffeb;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, .8fr) 48px 28px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px;
  display: grid;
}

.image-task-monitor-title {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.image-task-monitor-title > a {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 730;
  text-decoration: none;
  overflow: hidden;
}

.image-task-monitor-title > small {
  color: var(--muted);
  flex: none;
  font-size: 9px;
}

.image-task-monitor-progress, .image-task-row-progress, .image-task-detail-progress-track {
  background: #e9e7ef;
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.image-task-monitor-progress > i, .image-task-row-progress > i, .image-task-detail-progress-track > i {
  border-radius: inherit;
  background: linear-gradient(90deg, #6d56ff, #9a86ff);
  height: 100%;
  transition: width .3s;
  display: block;
}

.image-task-monitor-percent {
  color: var(--violet-dark);
  text-align: right;
  font-size: 11px;
}

.image-task-monitor-list article > button {
  color: #8b8995;
  background: none;
  border: 0;
  border-radius: 7px;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 18px;
  display: grid;
}

.image-task-monitor-list article > button:hover {
  color: var(--violet-dark);
  background: #eeebff;
}

.image-task-monitor-error, .image-task-page-error {
  color: #a03644;
  background: #fff5f6;
  border: 1px solid #efc4c9;
  margin: 0;
  padding: 10px 14px;
  font-size: 10px;
}

.image-task-page-error {
  border-radius: 9px;
  max-width: 1600px;
  margin: 18px auto 0;
}

.image-task-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  max-width: 1600px;
  margin: 22px auto 0;
  display: grid;
}

.image-task-metrics article {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: 11px;
  gap: 7px;
  padding: 15px 17px;
  display: grid;
}

.image-task-metrics span {
  color: var(--muted);
  font-size: 10px;
}

.image-task-metrics strong {
  color: var(--ink);
  font-size: 24px;
}

.image-task-metrics article.active {
  background: #f8f6ff;
  border-color: #cbc2ff;
}

.image-task-metrics article.active strong {
  color: var(--violet-dark);
}

.image-task-metrics article.success strong {
  color: var(--green);
}

.image-task-metrics article.failed strong {
  color: var(--red);
}

.image-task-filters {
  gap: 7px;
  max-width: 1600px;
  margin: 14px auto 0;
  display: flex;
  overflow-x: auto;
}

.image-task-filters button {
  border: 1px solid var(--line-strong);
  color: #575862;
  background: #fff;
  border-radius: 9px;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.image-task-filters button strong {
  background: #efeff3;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 9px;
}

.image-task-filters button.active {
  color: var(--violet-dark);
  background: #f4f1ff;
  border-color: #7864ff;
}

.image-task-list-card {
  margin-top: 14px;
}

.image-task-table {
  min-width: 1500px;
}

.image-task-table td:first-child {
  min-width: 260px;
}

.image-task-table td:first-child code {
  color: #9896a1;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
  margin-top: 5px;
  font-size: 8px;
  display: block;
  overflow: hidden;
}

.image-task-status, .image-task-item-status {
  color: #62636d;
  white-space: nowrap;
  background: #eeeef2;
  border-radius: 999px;
  align-items: center;
  width: max-content;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 780;
  display: inline-flex;
}

.image-task-status.status-running, .image-task-status.status-queued, .image-task-status.status-cancel_requested, .image-task-item-status.status-processing, .image-task-item-status.status-queued {
  color: var(--violet-dark);
  background: #eeeaff;
}

.image-task-status.status-completed, .image-task-item-status.status-succeeded, .image-task-item-status.status-skipped {
  color: var(--green);
  background: #e9f7ef;
}

.image-task-status.status-failed, .image-task-status.status-partial_failed, .image-task-item-status.status-failed {
  color: var(--red);
  background: #fff0f1;
}

.image-task-table-status {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.image-task-row-progress {
  min-width: 150px;
  margin-top: 8px;
}

.image-task-result-counts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  min-width: 150px;
  font-size: 9px;
  display: grid;
}

.image-task-result-counts .failed, .image-task-detail-stats .failed {
  color: var(--red);
}

.image-task-row-actions {
  gap: 6px;
  display: grid;
}

.image-task-row-actions button, .image-task-row-actions a {
  border: 1px solid var(--line-strong);
  color: var(--violet-dark);
  text-align: center;
  white-space: nowrap;
  background: #fff;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 730;
  text-decoration: none;
}

.image-task-detail-backdrop {
  z-index: 90;
  background: #15132494;
  place-items: center;
  padding: 22px;
  display: grid;
  position: fixed;
  inset: 0;
}

.image-task-detail {
  background: #f8f8fa;
  border-radius: 15px;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1220px, 96vw);
  max-height: 92vh;
  display: grid;
  overflow: hidden;
  box-shadow: 0 28px 80px #0a091c4d;
}

.image-task-detail > header {
  border-bottom: 1px solid var(--line);
  background: #fff;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 74px;
  padding: 14px 18px;
  display: flex;
}

.image-task-detail > header > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.image-task-detail > header span, .image-task-detail > header small {
  color: var(--muted);
  font-size: 9px;
}

.image-task-detail > header h2 {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 16px;
  overflow: hidden;
}

.image-task-detail > header button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 20px;
  display: grid;
}

.image-task-detail-body {
  gap: 13px;
  padding: 16px;
  display: grid;
  overflow: auto;
}

.image-task-detail-progress, .image-task-detail-info, .image-task-parameters, .image-task-global-error, .image-task-items {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
}

.image-task-detail-progress {
  gap: 12px;
  padding: 14px;
  display: grid;
}

.image-task-detail-progress > div:first-child {
  align-items: center;
  gap: 9px;
  display: flex;
}

.image-task-detail-progress > div:first-child > strong {
  color: var(--violet-dark);
  margin-left: auto;
  font-size: 20px;
}

.image-task-detail-progress > div:first-child > small {
  color: var(--muted);
  font-size: 10px;
}

.image-task-detail-progress-track {
  height: 9px;
}

.image-task-detail-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.image-task-detail-stats span {
  color: var(--muted);
  background: #f3f3f6;
  border-radius: 7px;
  justify-content: space-between;
  padding: 7px 8px;
  font-size: 9px;
  display: flex;
}

.image-task-detail-info {
  background: var(--line);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.image-task-detail-info > div {
  background: #fff;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  display: grid;
}

.image-task-detail-info span, .image-task-parameters small {
  color: var(--muted);
  font-size: 9px;
}

.image-task-detail-info strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.image-task-parameters, .image-task-global-error {
  padding: 13px 14px;
}

.image-task-parameters h3, .image-task-items h3 {
  margin: 0;
  font-size: 12px;
}

.image-task-parameters > div {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  display: flex;
}

.image-task-parameters span {
  background: #f3f2f8;
  border-radius: 7px;
  gap: 3px;
  padding: 7px 9px;
  display: grid;
}

.image-task-parameters strong {
  font-size: 10px;
}

.image-task-global-error {
  color: #9a3542;
  background: #fff7f7;
  border-color: #efc4c9;
}

.image-task-global-error pre, .image-task-items pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 560px;
  margin: 8px 0 0;
  font-size: 9px;
  overflow: auto;
}

.image-task-items > header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  display: flex;
}

.image-task-items > header > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.image-task-items > header span {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 9px;
}

.image-task-items > header small {
  color: var(--muted);
  font-size: 9px;
}

.image-task-items .product-data-table {
  min-width: 1120px;
}

.image-task-items details summary {
  max-width: 260px;
  color: var(--red);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.image-task-detail-loading {
  min-height: 280px;
  color: var(--muted);
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

@keyframes image-task-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .55;
    transform: scale(.78);
  }
}

@media (max-width: 900px) {
  .image-task-monitor, .image-task-metrics, .image-task-filters, .image-task-list-card, .image-task-page-error {
    margin-left: 14px;
    margin-right: 14px;
  }

  .image-task-monitor-list article {
    grid-template-columns: minmax(0, 1fr) 44px 28px;
  }

  .image-task-monitor-progress {
    grid-area: 2 / 1 / auto / -1;
  }

  .image-task-metrics, .image-task-detail-stats, .image-task-detail-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .image-task-monitor-title > small {
    display: none;
  }

  .image-task-monitor-list article {
    padding: 9px 10px;
  }

  .image-task-metrics {
    grid-template-columns: 1fr;
  }

  .image-task-detail-backdrop {
    align-items: end;
    padding: 0;
  }

  .image-task-detail {
    border-radius: 15px 15px 0 0;
    width: 100%;
    max-height: 94vh;
  }

  .image-task-detail-stats, .image-task-detail-info {
    grid-template-columns: 1fr;
  }

  .image-task-items > header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.product-image-job-progress {
  background: linear-gradient(145deg, #fbfaff 0%, #f3f0ff 100%);
  border: 1px solid #cfc8ef;
  border-radius: 13px;
  flex: none;
  gap: 10px;
  margin: 12px;
  padding: 13px;
  display: grid;
  box-shadow: 0 8px 22px #402b7e14;
}

.product-image-job-progress.status-completed {
  background: linear-gradient(145deg, #f7fffb 0%, #edfbf5 100%);
  border-color: #9fd9c3;
}

.product-image-job-progress.status-partial_failed, .product-image-job-progress.status-failed {
  background: linear-gradient(145deg, snow 0%, #fff1f1 100%);
  border-color: #efb8b8;
}

.product-image-job-progress > header, .product-image-job-progress-count, .product-image-job-progress > footer {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.product-image-job-progress > header > div {
  gap: 2px;
  display: grid;
}

.product-image-job-progress > header small {
  color: #81799a;
  font-size: 9px;
  font-weight: 750;
}

.product-image-job-progress > header strong {
  color: #322c43;
  font-size: 13px;
}

.product-image-job-progress > header > span {
  color: #fff;
  background: #6047c5;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 800;
}

.product-image-job-progress.status-completed > header > span {
  background: #18825d;
}

.product-image-job-progress.status-partial_failed > header > span, .product-image-job-progress.status-failed > header > span {
  background: #c63f48;
}

.product-image-job-progress-track {
  background: #ded8f3;
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.product-image-job-progress-track > i {
  border-radius: inherit;
  background: linear-gradient(90deg, #7659e5, #4f35bd);
  height: 100%;
  transition: width .35s;
  display: block;
}

.product-image-job-progress-count strong {
  color: #4d36b7;
  font-size: 18px;
}

.product-image-job-progress-count span, .product-image-job-progress > p {
  color: #746e82;
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}

.product-image-job-progress-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.product-image-job-progress-stats > span {
  color: #6e6879;
  background: #ffffffbf;
  border-radius: 7px;
  padding: 7px;
  font-size: 9px;
}

.product-image-job-progress-stats > span strong {
  color: #322d3c;
  font-size: 11px;
}

.product-image-job-progress-stats > span.failed strong {
  color: #c63f48;
}

.product-image-job-failures {
  border-top: 1px solid #e2ddec;
  padding-top: 8px;
}

.product-image-job-failures summary {
  color: #a3333b;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}

.product-image-job-failures > div {
  gap: 7px;
  max-height: 170px;
  margin-top: 8px;
  display: grid;
  overflow: auto;
}

.product-image-job-failures p {
  background: #fff;
  border-radius: 7px;
  gap: 2px;
  margin: 0;
  padding: 7px;
  font-size: 9px;
  line-height: 1.4;
  display: grid;
}

.product-image-job-failures p strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.product-image-job-failures p span {
  color: #9a333a;
  white-space: pre-wrap;
}

.product-image-job-progress > footer {
  justify-content: flex-end;
}

.product-image-job-progress > footer button {
  color: #554d68;
  cursor: pointer;
  background: #fff;
  border: 1px solid #cbc5db;
  border-radius: 7px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 750;
}

.product-image-job-progress > footer button.primary {
  color: #fff;
  background: #5f45c5;
  border-color: #5f45c5;
}

.product-image-job-progress > footer button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.product-image-dialog.sku-only {
  width: min(1240px, 100vw - 48px);
  height: min(820px, 100vh - 48px);
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.product-image-editor-layout.sku-only {
  grid-template-columns: 108px minmax(0, 1fr) 280px;
}

.product-image-editor-layout.sku-only > .product-image-index-nav {
  grid-column: 1;
}

.product-image-editor-layout.sku-only > .product-image-editor-content {
  grid-column: 2;
  padding-top: 12px;
}

.product-image-editor-layout.sku-only > .product-image-action-panel {
  grid-column: 3;
}

.product-image-dialog.sku-only .product-image-group-list {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 7px;
  padding: 8px;
}

.product-image-dialog.sku-only .product-image-list-thumb {
  max-height: 170px;
}

.product-image-dialog.sku-only .product-image-list-meta {
  padding: 6px 7px 4px;
}

.product-image-dialog.sku-only .product-image-list-actions {
  gap: 5px;
  padding: 4px 7px 7px;
}

.product-image-dialog.sku-only .product-image-list-meta strong, .product-image-dialog.sku-only .product-image-list-meta small {
  font-size: 9px;
}

.product-image-dialog.sku-only .product-image-version-switch > span, .product-image-dialog.sku-only .product-image-version-single {
  display: none;
}

.product-image-dialog.sku-only .product-image-version-switch > div {
  width: 100%;
}

.product-image-dialog.sku-only .product-image-version-switch > div button, .product-image-dialog.sku-only .product-image-list-actions button, .product-image-dialog.sku-only .product-image-list-actions select, .product-image-dialog.sku-only .product-image-card-replace {
  min-height: 28px;
  padding-inline: 5px;
  font-size: 9px;
}

.product-image-dialog.sku-only .product-image-list-actions button.assign {
  min-height: 32px;
  font-size: 9px;
}

.product-image-dialog.sku-only .product-image-card-secondary {
  grid-template-columns: minmax(0, 1fr);
}

.product-image-dialog.sku-only .product-image-card-badges {
  gap: 2px;
  bottom: 5px;
  left: 5px;
  right: 5px;
}

.product-image-dialog.sku-only .product-image-card-badges span {
  padding: 2px 4px;
  font-size: 7px;
}

.product-image-dialog.sku-only .product-image-card-selector {
  min-height: 24px;
  padding: 0 5px;
  font-size: 9px;
  top: 5px;
  left: 5px;
}

.product-image-dialog.sku-only .product-image-card-selector input {
  width: 12px;
  height: 12px;
}

.product-image-dialog.sku-only .product-image-list-item .product-image-drag-handle {
  width: 22px;
  height: 22px;
  font-size: 11px;
  top: 5px;
  right: 5px;
}

@media (max-width: 900px) {
  .product-image-dialog.sku-only {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
  }

  .product-image-editor-layout.sku-only {
    grid-template-rows: minmax(0, 1fr) minmax(220px, 40%);
    grid-template-columns: 88px minmax(0, 1fr);
    overflow-y: auto;
  }

  .product-image-editor-layout.sku-only > .product-image-index-nav {
    grid-area: 1 / 1 / 3;
  }

  .product-image-editor-layout.sku-only > .product-image-editor-content, .product-image-editor-layout.sku-only > .product-image-action-panel {
    grid-column: 2;
  }

  .product-image-editor-layout.sku-only > .product-image-action-panel {
    border-top: 1px solid #ddd9e9;
    border-left: 0;
    grid-row: 2;
    max-height: none;
  }
}

@media (max-width: 600px) {
  .product-image-editor-layout.sku-only {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .product-image-dialog.sku-only .product-image-group-list {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}

.product-image-index-nav {
  background: #f8f7fb;
  border-right: 1px solid #e1deea;
  flex-direction: column;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.product-image-index-nav > header {
  border-bottom: 1px solid #e4e1eb;
  gap: 3px;
  padding: 13px 10px 10px;
  display: grid;
}

.product-image-index-nav > header strong {
  color: #3e3b47;
  font-size: 12px;
}

.product-image-index-nav > header small {
  color: #8a8592;
  font-size: 8px;
}

.product-image-index-nav > nav {
  align-content: start;
  gap: 12px;
  padding: 9px 7px 16px;
  display: grid;
  overflow: hidden auto;
}

.product-image-index-nav section {
  gap: 6px;
  display: grid;
}

.product-image-index-group {
  color: #4d485a;
  cursor: pointer;
  background: #ece9f7;
  border: 0;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 8px;
  display: flex;
}

.product-image-index-group strong {
  font-size: 10px;
}

.product-image-index-group span {
  color: #6657b7;
  background: #fff;
  border-radius: 999px;
  place-items: center;
  min-width: 19px;
  height: 19px;
  font-size: 8px;
  font-weight: 800;
  display: grid;
}

.product-image-index-nav section > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  display: grid;
}

.product-image-index-nav section > div button {
  color: #77717f;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ded9e8;
  border-radius: 6px;
  place-items: center;
  min-width: 0;
  height: 25px;
  font-size: 8px;
  font-weight: 760;
  display: grid;
}

.product-image-index-nav section > div button:hover, .product-image-index-nav section > div button.selected {
  color: #5541ba;
  background: #eeeaff;
  border-color: #9d91ec;
}

.product-image-index-nav section > div button.current {
  color: #17683d;
  background: #eaf8f0;
  border-color: #54ad7d;
}

.product-image-add-card {
  border: 1px solid var(--line);
  color: #554b6b;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: 0;
  transition: border-color .14s, box-shadow .14s;
  display: grid;
  overflow: hidden;
}

.product-image-add-card:hover {
  border-color: #cfc9ff;
  box-shadow: 0 4px 14px #3f329112;
}

.product-image-add-card-preview {
  aspect-ratio: 3 / 4;
  border-bottom: 1px solid var(--line);
  background: #f7f6fb;
  place-content: center;
  justify-items: center;
  gap: 5px;
  width: 100%;
  display: grid;
}

.product-image-add-card-icon {
  color: #634ce0;
  background: #e9e4ff;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 2px;
  font-size: 24px;
  line-height: 1;
  display: grid;
}

.product-image-add-card-preview > strong {
  font-size: 11px;
}

.product-image-add-card-preview > small {
  color: #85808f;
  font-size: 8px;
  line-height: 1.45;
}

.product-image-add-card-actions {
  gap: 5px;
  padding: 7px;
  display: grid;
}

.product-image-add-upload, .product-image-card-replace {
  color: #fff;
  cursor: pointer;
  background: #735de5;
  border: 1px solid #8371e8;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  padding: 0 7px;
  font-size: 9px;
  font-weight: 760;
  display: inline-flex;
}

.product-image-add-upload.disabled, .product-image-card-replace.disabled {
  cursor: not-allowed;
  opacity: .48;
}

.product-image-add-upload input, .product-image-card-replace input {
  display: none;
}

.product-image-add-url {
  gap: 5px;
  display: grid;
}

.product-image-add-url input, .product-image-add-url button {
  box-sizing: border-box;
  color: #625e6a;
  background: #fff;
  border: 1px solid #d6d1e2;
  border-radius: 7px;
  width: 100%;
  min-width: 0;
  min-height: 29px;
  padding: 0 6px;
  font-size: 8px;
}

.product-image-add-url button {
  color: #5d48c0;
  cursor: pointer;
  border-color: #c7bfff;
  font-weight: 740;
}

.product-image-add-url button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.store-management-page {
  background: #f5f7fb;
}

.store-return-banner {
  background: #fffdf2;
  border: 1px solid #e2dcae;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 22px 28px 0;
  padding: 14px 17px;
  display: flex;
}

.store-return-banner.ready {
  background: #f2fbf5;
  border-color: #b9dfc7;
}

.store-return-banner > div {
  gap: 4px;
  display: grid;
}

.store-return-banner strong {
  color: #303139;
  font-size: 12px;
}

.store-return-banner span {
  color: #72747d;
  font-size: 10px;
}

.store-return-banner > a {
  color: #fff;
  background: #715cff;
  border-radius: 9px;
  flex: none;
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 780;
  text-decoration: none;
}

.store-connect-card, .store-list-section {
  background: #fff;
  border: 1px solid #e3e8f1;
  border-radius: 18px;
  margin: 22px 28px 0;
  box-shadow: 0 10px 30px #1c27400d;
}

.store-connect-card {
  grid-template-columns: minmax(220px, .7fr) minmax(520px, 1.8fr);
  gap: 28px;
  padding: 24px;
  display: grid;
}

.store-connect-card > div:first-child > span, .store-list-heading span {
  color: #71809d;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 800;
}

.store-connect-card h2, .store-list-heading h2 {
  color: #162039;
  margin: 5px 0 8px;
  font-size: 20px;
}

.store-connect-card p {
  color: #68748b;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.store-connect-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  display: grid;
}

.store-connect-form label, .store-edit-row label {
  color: #59667e;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.store-connect-form input, .store-connect-form select, .store-edit-row input, .store-edit-row select {
  color: #1c2942;
  width: 100%;
  min-height: 42px;
  font: inherit;
  background: #fff;
  border: 1px solid #d9e0eb;
  border-radius: 10px;
  padding: 0 12px;
}

.store-connect-form .primary-button {
  min-height: 42px;
}

.store-list-section {
  margin-bottom: 28px;
  padding: 22px;
}

.store-list-heading {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.store-list-heading h2 {
  margin-bottom: 0;
}

.store-list-heading > strong {
  color: #315ed0;
  background: #eef3ff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
}

.store-card-grid {
  gap: 16px;
  display: grid;
}

.store-info-card {
  background: #fbfcfe;
  border: 1px solid #e4e9f2;
  border-radius: 15px;
  overflow: hidden;
}

.store-info-card > header {
  background: #fff;
  border-bottom: 1px solid #e8ecf3;
  align-items: center;
  gap: 12px;
  padding: 17px 18px;
  display: flex;
}

.store-info-card > header > div:nth-child(2) {
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: grid;
}

.store-info-card > header strong {
  color: #17223c;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  overflow: hidden;
}

.store-info-card > header span, .store-info-card footer {
  color: #748098;
  font-size: 12px;
}

.store-info-card > header em {
  color: #16854e;
  background: #eaf7ef;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.store-credential-dot {
  border-radius: 50%;
  flex: none;
  width: 10px;
  height: 10px;
}

.store-credential-dot.connected {
  background: #24ad6b;
  box-shadow: 0 0 0 5px #e7f8ef;
}

.store-credential-dot.missing {
  background: #e79c34;
  box-shadow: 0 0 0 5px #fff4df;
}

.store-info-metrics {
  grid-template-columns: 1.2fr .5fr 1fr;
  gap: 12px;
  padding: 16px 18px 4px;
  display: grid;
}

.store-info-metrics > span {
  background: #f1f4f9;
  border-radius: 10px;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  display: grid;
}

.store-info-metrics small {
  color: #7b879b;
  font-size: 11px;
}

.store-info-metrics strong {
  color: #293650;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.store-edit-row {
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, .8fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
  display: grid;
}

.store-edit-row button {
  color: #fff;
  background: #1d315a;
  border: 0;
  border-radius: 10px;
  min-height: 42px;
  padding: 0 16px;
  font-weight: 750;
}

.store-info-card footer {
  border-top: 1px solid #e8ecf3;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  display: flex;
}

@media (max-width: 960px) {
  .store-connect-card, .store-edit-row, .store-info-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .store-return-banner {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 14px;
    margin-right: 14px;
  }

  .store-connect-card, .store-list-section {
    margin-left: 14px;
    margin-right: 14px;
  }

  .store-connect-form {
    grid-template-columns: 1fr;
  }

  .store-info-card footer {
    flex-direction: column;
  }
}

.product-main {
  padding-bottom: 80px;
}

.product-sidebar-divider {
  border-top: 1px solid var(--line);
  margin: 17px 8px -9px;
}

.product-sidebar .nav-list + .nav-list {
  margin-top: 18px;
}

.product-user {
  border-top: 1px solid var(--line);
  color: var(--ink);
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 14px 7px 0;
  font-size: 10px;
  display: flex;
}

.product-user > span {
  width: 30px;
  height: 30px;
  color: var(--navy);
  background: #d8d4ff;
  border-radius: 50%;
  place-items: center;
  font-weight: 800;
  display: grid;
}

.product-topbar {
  align-items: flex-start;
  max-width: 1600px;
}

.product-topbar > div:first-child > p:last-child {
  max-width: 760px;
  color: var(--muted);
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.7;
}

.product-link-button {
  text-decoration: none;
}

.product-list-card, .online-control-card {
  border: 1px solid var(--line);
  background: var(--paper);
  max-width: 1600px;
  box-shadow: var(--shadow);
  border-radius: 12px;
  margin: 24px auto 0;
}

.product-list-heading {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 70px;
  padding: 16px 20px;
  display: flex;
}

.product-list-heading > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.product-list-heading h2 {
  margin: 0;
  font-size: 15px;
}

.product-list-heading span {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 750;
}

.product-list-heading small {
  color: var(--muted);
  font-size: 9px;
}

.product-table-scroll {
  overflow-x: auto;
}

.product-data-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1320px;
}

.inbox-table {
  min-width: 1180px;
}

.inbox-table .product-name-cell {
  min-width: 300px;
}

.inbox-view-tabs {
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 10px;
  max-width: 1600px;
  margin: 14px auto 0;
  display: grid;
}

.inbox-view-tabs button {
  color: #666771;
  text-align: left;
  background: #fffffff0;
  border: 1px solid #e4e4e8;
  border-radius: 13px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 14px;
  padding: 12px 14px;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
  display: grid;
  box-shadow: 0 3px 12px #22222d06;
}

.inbox-view-tabs button:hover {
  background: #fff;
  border-color: #cfcbea;
  transform: translateY(-1px);
}

.inbox-view-tabs button.active {
  color: var(--violet-dark);
  background: linear-gradient(145deg, #fbfaff, #f2efff);
  border-color: #b9b1f3;
  box-shadow: 0 8px 22px #5b4caa1a;
}

.inbox-view-tabs span {
  font-size: 11px;
  font-weight: 820;
}

.inbox-view-tabs strong {
  min-width: 28px;
  color: inherit;
  text-align: right;
  grid-area: 1 / 2 / span 2;
  font-size: 15px;
}

.inbox-view-tabs small {
  color: #9999a2;
  font-size: 9px;
}

.inbox-view-tabs button.active small {
  color: #7b72ab;
}

.product-data-table th {
  border-bottom: 1px solid var(--line);
  color: #7d7e87;
  text-align: left;
  white-space: nowrap;
  background: #f8f8fa;
  padding: 11px 13px;
  font-size: 9px;
  font-weight: 760;
}

.product-data-table td {
  color: #43444d;
  vertical-align: middle;
  border-bottom: 1px solid #eeeeea;
  max-width: 280px;
  padding: 13px;
  font-size: 10px;
  line-height: 1.5;
}

.product-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.product-data-table tbody tr:hover {
  background: #fbfaff;
}

.product-data-table td > strong, .product-data-table td > small, .online-table td > small {
  display: block;
}

.product-data-table td > small, .online-table td > small {
  overflow-wrap: anywhere;
  max-width: 210px;
  color: var(--muted);
  margin-top: 4px;
  font-size: 8px;
}

.product-thumb {
  border: 1px solid var(--line);
  object-fit: cover;
  background: #f2f1fa;
  border-radius: 8px;
  place-items: center;
  width: 58px;
  height: 58px;
  display: grid;
}

.product-thumb.placeholder {
  color: var(--violet);
  font-size: 8px;
  font-weight: 800;
}

.product-name-cell, .online-product-cell > div {
  flex-direction: column;
  gap: 5px;
  min-width: 220px;
  display: flex;
}

.product-name-cell strong, .online-product-cell strong {
  color: var(--ink);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.product-name-cell a, .online-product-cell a, .listing-table td > a {
  color: var(--violet-dark);
  font-size: 9px;
  text-decoration: none;
}

.source-badge, .product-status, .online-status, .listing-status {
  color: #696a76;
  white-space: nowrap;
  background: #f0eff5;
  border-radius: 999px;
  align-items: center;
  width: fit-content;
  padding: 5px 8px;
  font-size: 8px;
  font-weight: 760;
  display: inline-flex;
}

.source-badge {
  color: #b26313;
  background: #fff3df;
}

.product-status.status-imported, .online-status.status-selling, .listing-status.success {
  background: var(--green-pale);
  color: var(--green);
}

.product-status.status-failed, .online-status.status-error, .online-status.status-needs_revision, .listing-status.error {
  background: var(--red-pale);
  color: var(--red);
}

.online-status.status-preparing, .listing-status.pending {
  color: #95600e;
  background: #fff4db;
}

.online-status.status-delisted, .online-status.status-archived {
  color: #6b6c73;
  background: #eeeeef;
}

.product-note {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  min-width: 90px;
  display: -webkit-box;
  overflow: hidden;
}

.product-row-actions {
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.product-row-actions a, .product-row-actions button {
  color: var(--violet-dark);
  background: none;
  border: 0;
  padding: 0;
  font-size: 9px;
  font-weight: 750;
  text-decoration: none;
}

.product-row-actions button {
  color: var(--red);
}

.inbox-row-actions {
  gap: 7px;
  margin-top: 3px;
}

.inbox-row-actions a, .inbox-row-actions button {
  background: #fff;
  border: 1px solid #d9d5e8;
  border-radius: 7px;
  min-height: 30px;
  padding: 0 11px;
  font-size: 9px;
  line-height: 28px;
}

.inbox-row-actions a {
  background: var(--violet-pale);
  border-color: #bcb4e6;
}

.inbox-row-actions button {
  background: #fff8f8;
  border-color: #efcece;
  line-height: 1;
}

.product-empty {
  min-height: 270px;
  color: var(--muted);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 30px;
  display: flex;
}

.product-empty strong {
  font-size: 11px;
  font-weight: 600;
}

.product-header-actions {
  gap: 9px;
  display: flex;
}

.online-control-card {
  grid-template-columns: minmax(240px, .8fr) minmax(200px, .6fr) minmax(280px, 1fr);
  align-items: end;
  gap: 14px;
  padding: 16px;
  display: grid;
}

.online-control-card label, .listing-store-filter {
  color: var(--muted);
  flex-direction: column;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
}

.online-control-card select, .online-control-card input, .listing-store-filter select {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-height: 40px;
  color: var(--ink);
  background: #fff;
  border-radius: 8px;
  padding: 0 11px;
  font-size: 10px;
}

.online-control-card > div {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 40px;
  display: flex;
}

.online-control-card > div span, .online-control-card > div small {
  color: var(--muted);
  font-size: 8px;
}

.online-control-card > div strong {
  font-size: 10px;
}

.online-status-tabs {
  gap: 8px;
  max-width: 1600px;
  margin: 14px auto 0;
  padding-bottom: 2px;
  display: flex;
  overflow-x: auto;
}

.online-status-tabs button {
  border: 1px solid var(--line);
  color: #696a73;
  background: #fff;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 13px;
  min-width: 105px;
  padding: 10px 11px;
  font-size: 9px;
  display: inline-flex;
}

.online-status-tabs button.active {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-color: #bcb4ff;
}

.online-status-tabs strong {
  font-size: 11px;
}

.online-list-card {
  margin-top: 14px;
}

.online-table {
  min-width: 1640px;
}

.online-product-cell {
  grid-template-columns: 64px minmax(270px, 1fr);
  align-items: start;
  gap: 11px;
  display: grid;
}

.online-product-details {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.online-group-row > td {
  vertical-align: top;
}

.online-product-cell .online-group-badge {
  background: var(--violet-pale);
  width: fit-content;
  color: var(--violet-dark);
  border-radius: 999px;
  padding: 3px 7px;
  font-weight: 780;
}

.online-product-cell .online-group-alert {
  background: var(--red-pale);
  width: fit-content;
  color: var(--red);
  border-radius: 6px;
  margin-top: 3px;
  padding: 4px 7px;
  font-weight: 750;
}

.online-group-members {
  border-top: 1px dashed #d8d4e3;
  max-width: 520px;
  margin-top: 6px;
  padding-top: 7px;
}

.online-group-members > summary {
  cursor: pointer;
  width: fit-content;
  color: var(--violet-dark);
  font-size: 9px;
  font-weight: 780;
}

.online-group-member-list {
  gap: 8px;
  margin-top: 8px;
  display: grid;
}

.online-group-member {
  background: #faf9fd;
  border: 1px solid #e2dfea;
  border-radius: 8px;
  gap: 4px;
  padding: 9px;
  display: grid;
}

.online-group-member-heading {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.online-group-member-heading .online-status {
  flex: none;
}

.online-product-cell span {
  color: var(--muted);
  font-size: 8px;
}

.online-original-text {
  max-width: 440px;
  color: var(--muted);
  font-size: 8px;
}

.online-original-text summary, .online-product-issues summary {
  cursor: pointer;
  width: fit-content;
  color: var(--violet-dark);
  font-weight: 700;
}

.online-original-text p {
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.5;
}

.online-product-issue-wrap {
  gap: 4px;
  max-width: 460px;
  margin-top: 5px;
  display: grid;
}

.online-product-issues {
  color: var(--red);
  background: #fff7f7;
  border: 1px solid #f0caca;
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 9px;
}

.online-product-issues ul {
  gap: 7px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.online-product-issues li {
  gap: 3px;
  display: grid;
}

.online-product-issues p, .online-product-issues small {
  color: #7b3137;
  margin: 0;
  line-height: 1.45;
}

.online-product-issues code {
  overflow-wrap: anywhere;
}

.online-product-cell .online-issue-severity {
  color: #9d2831;
  background: #f8d9dc;
  border-radius: 999px;
  width: fit-content;
  padding: 2px 5px;
  font-weight: 760;
}

.online-product-cell .online-issue-severity.warning {
  color: #8a5a00;
  background: #fff0c9;
}

.online-product-cell .online-issue-severity.info {
  color: #285b9d;
  background: #e6efff;
}

.online-product-cell .online-localization-retry {
  color: #9a711a;
}

.online-row-actions {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  display: flex;
}

.online-member-actions {
  margin-top: 4px;
}

.online-row-actions button {
  min-height: 29px;
  color: var(--violet-dark);
  white-space: nowrap;
  background: #fff;
  border: 1px solid #cbc6dc;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 760;
}

.online-row-actions button:hover:not(:disabled) {
  background: var(--violet-pale);
  border-color: #9f95ca;
}

.online-row-actions button.repair {
  color: #fff;
  background: #d83a46;
  border-color: #d83a46;
  box-shadow: 0 4px 10px #d83a462e;
}

.online-row-actions button.repair:hover:not(:disabled) {
  background: #bc2935;
  border-color: #bc2935;
}

.online-row-actions button.danger {
  color: var(--red);
  border-color: #ecc8c8;
}

.online-row-actions button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.listing-metrics {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1600px;
  margin: 24px auto 0;
  display: grid;
  overflow: hidden;
}

.listing-metrics article {
  border-right: 1px solid var(--line);
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 90px;
  padding: 16px 20px;
  display: flex;
}

.listing-metrics article:last-child {
  border-right: 0;
}

.listing-metrics span {
  color: var(--muted);
  font-size: 9px;
}

.listing-metrics strong {
  font-size: 24px;
}

.listing-store-filter {
  min-width: 220px;
}

.listing-table td:first-child > strong, .listing-table td:first-child > a {
  max-width: 250px;
  margin-bottom: 5px;
  display: block;
}

.listing-table code {
  font-size: 9px;
}

.listing-table details {
  min-width: 90px;
}

.listing-table summary {
  cursor: pointer;
  color: var(--violet-dark);
  font-size: 9px;
  font-weight: 700;
}

.listing-table pre {
  color: #d8d9e8;
  white-space: pre-wrap;
  background: #18192c;
  border-radius: 7px;
  max-width: 500px;
  max-height: 240px;
  padding: 9px;
  font-size: 8px;
  overflow: auto;
}

.product-modal-backdrop {
  z-index: 100;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #14152a8f;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.product-modal {
  background: #fff;
  border-radius: 15px;
  width: min(520px, 100%);
  padding: 24px;
  box-shadow: 0 24px 80px #14152a47;
}

.product-modal header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.product-modal header span {
  color: var(--violet);
  letter-spacing: .14em;
  font-size: 8px;
  font-weight: 800;
}

.product-modal h2 {
  margin: 6px 0 0;
  font-size: 22px;
}

.product-modal header > button {
  color: var(--muted);
  background: none;
  border: 0;
  font-size: 24px;
}

.product-modal > p {
  color: var(--muted);
  margin: 13px 0 18px;
  font-size: 10px;
  line-height: 1.7;
}

.product-modal > label {
  color: var(--muted);
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
}

.product-modal input, .product-modal textarea {
  border: 1px solid var(--line-strong);
  width: 100%;
  color: var(--ink);
  resize: vertical;
  background: #fff;
  border-radius: 8px;
  padding: 10px 11px;
  font-size: 10px;
}

.product-modal footer {
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
  display: flex;
}

.barcode-product-modal {
  width: min(620px, 100%);
}

.barcode-product-summary {
  background: #f8f7fc;
  border: 1px solid #e3e0ec;
  border-radius: 9px;
  gap: 5px;
  margin: 16px 0 5px;
  padding: 11px 13px;
  display: grid;
}

.barcode-product-summary strong {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.barcode-product-summary span {
  color: var(--muted);
  font-size: 9px;
}

.barcode-method-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  display: flex;
}

.barcode-method-actions button {
  min-height: 34px;
}

.barcode-generation-hint {
  background: #fff8e9;
  border: 1px solid #f0d8aa;
  border-radius: 8px;
  margin-top: 9px;
  padding: 9px 11px;
  color: #8a5a11 !important;
}

.listing-barcode-control {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 7px;
  display: grid;
}

.listing-barcode-control button {
  border: 1px solid var(--line-strong);
  min-width: 118px;
  color: var(--violet-dark);
  background: #fff;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 760;
}

@media (max-width: 900px) {
  .product-header-actions {
    width: 100%;
  }

  .product-header-actions button {
    flex: 1;
  }

  .online-control-card {
    grid-template-columns: 1fr;
  }

  .listing-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-metrics article:nth-child(2) {
    border-right: 0;
  }

  .listing-metrics article:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 680px) {
  .inbox-view-tabs, .listing-barcode-control {
    grid-template-columns: 1fr;
  }

  .listing-barcode-control button {
    min-height: 38px;
  }
}

.account-main {
  background: #f7f7f5;
  min-height: 100vh;
  padding: 34px clamp(22px, 4vw, 58px) 64px;
}

.account-page-header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto 24px;
  display: flex;
}

.account-page-header .breadcrumb {
  color: #85868e;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 11px;
  display: flex;
}

.account-page-header .breadcrumb a {
  color: #5844e8;
  text-decoration: none;
}

.account-page-header h1 {
  color: #17181d;
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
}

.account-page-header > div > p:last-child {
  color: #6f7079;
  margin: 8px 0 0;
  font-size: 13px;
}

.account-page-header .secondary-button {
  color: #34353d;
  background: #fff;
  border: 1px solid #d2d3d8;
  border-radius: 9px;
  align-items: center;
  min-height: 40px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.account-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
}

.account-card {
  background: #fff;
  border: 1px solid #e1e2e5;
  border-radius: 15px;
  min-width: 0;
  padding: 24px;
  box-shadow: 0 10px 28px #1b1c230b;
}

.account-loading {
  color: #777880;
  max-width: 1180px;
  margin: 0 auto;
}

.account-card-heading {
  border-bottom: 1px solid #ececef;
  align-items: center;
  gap: 15px;
  padding-bottom: 20px;
  display: flex;
}

.account-avatar {
  color: #fff;
  background: linear-gradient(145deg, #715cff, #4d3bc7);
  border-radius: 15px;
  flex: none;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-weight: 850;
  display: grid;
}

.account-card-heading > div:last-child, .account-section-heading {
  gap: 4px;
  display: grid;
}

.account-card-heading span, .account-section-heading > span {
  color: #715cff;
  letter-spacing: .12em;
  font-size: 9px;
  font-weight: 850;
}

.account-card-heading h2, .account-section-heading h2 {
  color: #202127;
  margin: 0;
  font-size: 18px;
}

.account-card-heading p, .account-section-heading p {
  color: #777880;
  margin: 0;
  font-size: 11px;
  line-height: 1.65;
}

.account-details {
  gap: 0;
  margin: 18px 0 0;
  display: grid;
}

.account-details > div {
  border-bottom: 1px solid #f0f0f2;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 48px;
  display: grid;
}

.account-details dt {
  color: #85868e;
  font-size: 11px;
}

.account-details dd {
  color: #303139;
  overflow-wrap: anywhere;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  display: flex;
}

.account-details code {
  color: #37308a;
  font-size: 10px;
}

.account-details button {
  color: #5844e8;
  cursor: pointer;
  background: none;
  border: 0;
  flex: none;
  font-size: 10px;
}

.account-nickname-form {
  gap: 5px;
  width: min(100%, 360px);
  display: grid;
}

.account-nickname-form > div {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  display: grid;
}

.account-nickname-form input {
  background: #fff;
  border: 1px solid #d4d5da;
  border-radius: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
}

.account-nickname-form input:focus {
  border-color: #715cff;
  box-shadow: 0 0 0 3px #715cff1a;
}

.account-details .account-nickname-form button {
  background: #f1efff;
  border-radius: 8px;
  min-width: 76px;
  padding: 0 11px;
  font-weight: 750;
}

.account-details .account-nickname-form button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.account-nickname-form small, .account-nickname-form > span {
  color: #85868e;
  font-size: 10px;
  line-height: 1.45;
}

.account-nickname-form > span.success {
  color: #027a48;
}

.account-nickname-form > span.error {
  color: #b42318;
}

.account-connect-link {
  color: #4938ba;
  background: #f1efff;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  display: flex;
}

.account-form {
  gap: 14px;
  margin-top: 20px;
  display: grid;
}

.account-form label {
  gap: 7px;
  display: grid;
}

.account-form label > span {
  color: #45464e;
  font-size: 11px;
  font-weight: 700;
}

.account-form input {
  background: #fff;
  border: 1px solid #d4d5da;
  border-radius: 8px;
  outline: none;
  width: 100%;
  height: 43px;
  padding: 0 12px;
}

.account-form input:focus {
  border-color: #715cff;
  box-shadow: 0 0 0 3px #715cff1a;
}

.account-form .primary-button, .account-session-actions .primary-button, .account-form .danger-button {
  color: #fff;
  cursor: pointer;
  background: #715cff;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: fit-content;
  min-height: 42px;
  padding: 0 17px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.account-form-message {
  border-radius: 7px;
  margin: 0;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.55;
}

.account-form-message.success {
  color: #027a48;
  background: #ecfdf3;
}

.account-form-message.error {
  color: #b42318;
  background: #fff0f1;
}

.account-session-card, .account-danger-card {
  grid-column: 1 / -1;
}

.account-session-card {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  display: flex;
}

.account-session-actions {
  align-items: center;
  gap: 16px;
  display: flex;
}

.account-session-actions p {
  color: #85868e;
  max-width: 270px;
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.account-danger-card {
  background: #fffbfb;
  border-color: #efc8ca;
}

.account-danger-card .account-section-heading > span {
  color: #c4323a;
}

.account-danger-card .account-form {
  max-width: 520px;
}

.account-form .danger-button {
  background: #c4323a;
}

.account-form .danger-button:disabled, .account-form .primary-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

@media (max-width: 980px) {
  .account-grid {
    grid-template-columns: 1fr;
  }

  .account-session-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 680px) {
  .account-main {
    margin-left: 0;
    padding: 22px 14px 50px;
  }

  .account-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .account-card {
    padding: 18px;
  }

  .account-details > div {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 10px 0;
  }

  .account-nickname-form, .account-nickname-form > div {
    width: 100%;
  }

  .account-session-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-sidebar .product-sidebar-divider, .product-sidebar .nav-list:nth-of-type(2), .product-user {
    display: none;
  }

  .product-sidebar .nav-list {
    gap: 4px;
  }

  .product-sidebar .nav-item {
    display: flex;
  }

  .product-sidebar .nav-item .nav-symbol, .product-sidebar .nav-item .nav-count {
    display: none;
  }

  .listing-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .listing-store-filter {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: Inter, SF Pro Display, PingFang SC, Microsoft YaHei, system-ui, -apple-system, sans-serif;
}

button, input, select, textarea {
  color: inherit;
  font: inherit;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

input, select, textarea {
  outline: none;
}

input::placeholder, textarea::placeholder {
  color: #aaaab2;
}

.app-shell {
  min-height: 100vh;
}

.auth-page {
  background: radial-gradient(circle at 12% 16%, #715cff47, transparent 32%),
    var(--navy);
  grid-template-columns: minmax(330px, .82fr) minmax(420px, 1.18fr);
  min-height: 100vh;
  display: grid;
}

.auth-intro {
  color: #fff;
  flex-direction: column;
  min-height: 100vh;
  padding: 34px clamp(32px, 5vw, 72px);
  display: flex;
}

.auth-brand {
  align-items: center;
  gap: 14px;
  display: flex;
}

.auth-brand > div {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.auth-brand strong {
  font-size: 17px;
}

.auth-brand span:last-child {
  color: #a9aac6;
  font-size: 11px;
}

.auth-copy {
  max-width: 620px;
  margin: auto 0;
}

.auth-copy .eyebrow {
  color: #a99dff;
}

.auth-copy h1 {
  letter-spacing: -.055em;
  max-width: 560px;
  margin: 14px 0 18px;
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 680;
  line-height: 1.05;
}

.auth-copy > p:last-child {
  color: #b9bad0;
  max-width: 520px;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.auth-feature-list {
  color: #d8d8e7;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px 12px;
  font-size: 12px;
  display: grid;
}

.auth-feature-list span {
  color: #8979ff;
  font-size: 10px;
  font-weight: 800;
}

.auth-feature-list p {
  margin: 0;
}

.auth-panel {
  background: #fafaf8;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(22px, 4vh, 42px) clamp(34px, 7vw, 104px);
  display: flex;
}

.auth-tabs {
  border: 1px solid var(--line);
  background: #f1f1ed;
  border-radius: 10px;
  gap: 4px;
  width: fit-content;
  margin-bottom: 22px;
  padding: 3px;
  display: inline-flex;
}

.auth-tabs button {
  min-width: 88px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
}

.auth-tabs button.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 8px #1c1d2f12;
}

.auth-panel-heading {
  max-width: 520px;
}

.auth-panel-heading > span {
  color: var(--violet);
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 800;
}

.auth-panel-heading h2 {
  letter-spacing: -.045em;
  margin: 6px 0 8px;
  font-size: clamp(26px, 2.7vw, 36px);
}

.auth-panel-heading p {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.auth-pictech-sso {
  color: #2f267d;
  background: linear-gradient(135deg, #f0edff 0%, #fff 72%);
  border: 1px solid #cfc7ff;
  border-radius: 11px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: min(520px, 100%);
  min-height: 62px;
  margin-top: 18px;
  padding: 9px 13px;
  text-decoration: none;
  display: grid;
  box-shadow: 0 9px 24px #5946c817;
}

.auth-pictech-sso:hover {
  border-color: var(--violet);
  transform: translateY(-1px);
}

.auth-pictech-mark {
  background: var(--violet);
  color: #fff;
  border-radius: 11px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-weight: 850;
  display: grid;
}

.auth-pictech-sso > span:nth-child(2) {
  gap: 4px;
  display: grid;
}

.auth-pictech-sso strong {
  font-size: 13px;
}

.auth-pictech-sso small {
  color: #7a739f;
  font-size: 11px;
}

.auth-pictech-sso b {
  font-size: 19px;
}

.auth-divider {
  color: #9897a2;
  align-items: center;
  gap: 12px;
  width: min(520px, 100%);
  margin-top: 15px;
  font-size: 10px;
  display: flex;
}

.auth-divider:before, .auth-divider:after {
  background: var(--line);
  content: "";
  flex: 1;
  height: 1px;
}

.auth-divider + .auth-form {
  margin-top: 15px;
}

.auth-form {
  gap: 12px;
  max-width: 520px;
  margin-top: 20px;
  display: grid;
}

.auth-form label {
  gap: 5px;
  display: grid;
}

.auth-form label > span {
  font-size: 12px;
  font-weight: 750;
}

.auth-form input {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 8px;
  width: 100%;
  height: 44px;
  padding: 0 15px;
  font-size: 13px;
  transition: border-color .16s, box-shadow .16s;
}

.auth-form input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px #715cff1f;
}

.auth-sms-row {
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 9px;
  display: grid;
}

.auth-sms-row button {
  color: #4f3ed0;
  cursor: pointer;
  background: #f2efff;
  border: 1px solid #cfc7ff;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
}

.auth-sms-row button:disabled, .auth-submit:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.auth-form .auth-agreement {
  color: #6f7079;
  grid-template-columns: none;
  align-items: flex-start;
  gap: 9px;
  font-size: 11px;
  line-height: 1.65;
  display: flex;
}

.auth-form .auth-agreement input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  padding: 0;
}

.auth-form .auth-agreement > span {
  font-size: 11px;
  font-weight: 500;
}

.auth-agreement a {
  color: #5844e8;
}

.auth-error {
  background: var(--red-pale);
  color: var(--red);
  border: 1px solid #f1c9cf;
  border-radius: 7px;
  margin: -3px 0 0;
  padding: 8px 11px;
  font-size: 12px;
}

.auth-notice {
  color: #027a48;
  background: #ecfdf3;
  border: 1px solid #b7e3c8;
  border-radius: 7px;
  margin: -3px 0 0;
  padding: 8px 11px;
  font-size: 12px;
}

.auth-submit {
  background: var(--violet);
  color: #fff;
  border: 0;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  margin-top: 5px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 800;
  transition: background .16s, transform .16s;
  display: flex;
}

.auth-submit:hover {
  background: var(--violet-dark);
  transform: translateY(-1px);
}

.auth-submit span {
  font-size: 20px;
}

.auth-footnote {
  color: #96969d;
  max-width: 520px;
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.65;
}

.auth-challenge-backdrop {
  z-index: 1200;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #11121e94;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.auth-challenge-dialog {
  background: #fff;
  border: 1px solid #e1dfec;
  border-radius: 16px;
  gap: 12px;
  width: min(380px, 100%);
  max-height: calc(100dvh - 40px);
  padding: 25px;
  display: grid;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 24px 70px #1816303d;
}

.auth-challenge-close {
  color: #686873;
  cursor: pointer;
  background: #f3f2f6;
  border: 0;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 20px;
  position: absolute;
  top: 12px;
  right: 12px;
}

.auth-challenge-badge {
  color: #5946d8;
  letter-spacing: .08em;
  background: #efedff;
  border-radius: 999px;
  width: fit-content;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 800;
}

.auth-challenge-dialog h3, .auth-challenge-dialog p {
  margin: 0;
}

.auth-challenge-dialog h3 {
  padding-right: 28px;
  font-size: 20px;
}

.auth-challenge-dialog p {
  color: #74747e;
  font-size: 12px;
  line-height: 1.55;
}

.auth-challenge-question {
  color: #302779;
  letter-spacing: .06em;
  background: linear-gradient(135deg, #f5f3ff, #fbfbf8);
  border: 1px dashed #c9c1ff;
  border-radius: 11px;
  place-items: center;
  height: 68px;
  font-size: 24px;
  font-weight: 850;
  display: grid;
}

.auth-challenge-dialog label {
  gap: 6px;
  display: grid;
}

.auth-challenge-dialog label span {
  font-size: 11px;
  font-weight: 750;
}

.auth-challenge-dialog input {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 8px;
  width: 100%;
  height: 44px;
  padding: 0 13px;
}

.auth-challenge-submit {
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  height: 44px;
  font-size: 12px;
  font-weight: 800;
}

.auth-challenge-error {
  background: var(--red-pale);
  border: 1px solid #f1c9cf;
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--red) !important;
}

.auth-challenge-refresh {
  color: #6554d9;
  cursor: pointer;
  background: none;
  border: 0;
  justify-self: center;
  width: fit-content;
  font-size: 11px;
}

.auth-challenge-loading {
  color: #777680;
  place-items: center;
  min-height: 112px;
  font-size: 12px;
  display: grid;
}

@media (max-width: 520px) {
  .auth-challenge-backdrop {
    align-items: end;
    padding: 12px;
  }

  .auth-challenge-dialog {
    border-radius: 16px;
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 20px;
  }
}

@media (min-width: 761px) and (max-height: 700px) {
  .auth-intro {
    padding-block: 24px;
  }

  .auth-copy h1 {
    font-size: clamp(32px, 3.8vw, 48px);
  }

  .auth-panel {
    padding-block: 18px;
  }

  .auth-tabs {
    margin-bottom: 14px;
  }

  .auth-form {
    gap: 9px;
    margin-top: 14px;
  }

  .auth-footnote {
    margin-top: 10px;
  }
}

.pictech-sso-callback-page {
  background: radial-gradient(circle at 50% 0, #715cff2e, #0000 38%), #f7f7f5;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  display: grid;
}

.pictech-sso-callback-card {
  text-align: center;
  background: #fff;
  border: 1px solid #dedee3;
  border-radius: 16px;
  justify-items: center;
  gap: 10px;
  width: min(440px, 100%);
  padding: 42px 32px;
  display: grid;
  box-shadow: 0 18px 50px #1d1c3017;
}

.pictech-sso-callback-card > span {
  color: #fff;
  background: #715cff;
  border-radius: 14px;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 18px;
  font-weight: 850;
  display: grid;
}

.pictech-sso-callback-card > span.loading {
  animation: 1.25s ease-in-out infinite sso-pulse;
}

.pictech-sso-callback-card > span.error {
  background: #c4323a;
}

.pictech-sso-callback-card h1 {
  color: #202127;
  margin: 8px 0 0;
  font-size: 22px;
}

.pictech-sso-callback-card p {
  color: #777880;
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}

.pictech-sso-callback-card a {
  color: #5844e8;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 750;
}

@keyframes sso-pulse {
  50% {
    opacity: .68;
    transform: scale(.92);
  }
}

.extension-authorize-page {
  background: radial-gradient(circle at 15% 10%, #715cff3d, #0000 34%), linear-gradient(145deg, #181934 0%, #25264d 100%);
  place-items: center;
  min-height: 100vh;
  padding: 32px 20px;
  display: grid;
}

.extension-authorize-card {
  background: #fafaf8;
  border: 1px solid #ffffff1a;
  border-radius: 20px;
  width: min(100%, 500px);
  padding: 36px;
  box-shadow: 0 30px 90px #05061859;
}

.extension-authorize-logo {
  color: #0000;
  background: #0d7ef4 url("/vkw-logo.png") center / cover no-repeat;
  border-radius: 13px;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  font-size: 0;
  display: grid;
  overflow: hidden;
}

.extension-authorize-logo.error {
  background: var(--red);
  color: #fff;
  font-size: 20px;
}

.extension-authorize-card .eyebrow {
  color: var(--violet);
  letter-spacing: .14em;
  margin: 0;
  font-size: 10px;
  font-weight: 850;
}

.extension-authorize-card h1 {
  letter-spacing: -.04em;
  margin: 8px 0 10px;
  font-size: clamp(25px, 5vw, 34px);
}

.extension-authorize-copy {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.extension-authorize-account, .extension-authorize-scope {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  margin-top: 24px;
  padding: 16px 18px;
}

.extension-authorize-account {
  gap: 3px;
  display: grid;
}

.extension-authorize-account span, .extension-authorize-scope > span {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 750;
}

.extension-authorize-account strong {
  margin-top: 6px;
  font-size: 16px;
}

.extension-authorize-account small {
  color: var(--muted);
  font-size: 12px;
}

.extension-authorize-scope p {
  color: #484956;
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.55;
  position: relative;
}

.extension-authorize-scope p:before {
  content: "✓";
  color: #18845a;
  font-weight: 850;
  position: absolute;
  left: 0;
}

.extension-authorize-progress, .extension-authorize-retry {
  background: var(--violet);
  color: #fff;
  border: 0;
  border-radius: 10px;
  width: 100%;
  min-height: 52px;
  margin-top: 24px;
  font-size: 13px;
  font-weight: 800;
}

.extension-authorize-progress {
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.extension-authorize-progress i {
  border: 2px solid #ffffff61;
  border-top-color: #fff;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: .8s linear infinite extension-authorize-spin;
}

.extension-authorize-retry:hover {
  background: var(--violet-dark);
}

.extension-authorize-note {
  color: #93939b;
  text-align: center;
  margin: 16px 0 0;
  font-size: 10px;
  line-height: 1.55;
}

@keyframes extension-authorize-spin {
  to {
    transform: rotate(360deg);
  }
}

.exchange-main {
  min-height: 100vh;
}

.exchange-topbar > div > p:last-child {
  max-width: 680px;
  color: var(--muted);
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.65;
}

.exchange-refresh {
  background: var(--violet);
  color: #fff;
  border: 0;
  border-radius: 9px;
  min-height: 42px;
  padding: 0 18px;
  font-weight: 750;
}

.exchange-user {
  color: #a8a9c3;
  padding: 0 8px;
  font-size: 11px;
}

.exchange-alert {
  color: #93470d;
  background: #fff8ef;
  border: 1px solid #efc49e;
  border-radius: 10px;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  font-size: 10px;
  display: flex;
}

.exchange-alert.error {
  background: var(--red-pale);
  color: var(--red);
  border-color: #f2b5b5;
}

.exchange-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
  display: grid;
}

.exchange-summary article, .exchange-card {
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: 12px;
}

.exchange-summary article {
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  display: flex;
}

.exchange-summary span, .exchange-summary small, .exchange-rate-grid small, .exchange-rate-grid p, .exchange-conversion-grid span, .exchange-conversion-grid small {
  color: var(--muted);
  font-size: 9px;
}

.exchange-summary strong {
  font-size: 17px;
}

.exchange-card {
  margin-bottom: 18px;
  overflow: hidden;
}

.exchange-card-heading {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  display: flex;
}

.exchange-card-heading > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.exchange-card-heading > div > span {
  background: var(--violet-pale);
  width: 27px;
  height: 27px;
  color: var(--violet);
  border-radius: 8px;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}

.exchange-card-heading h2 {
  margin: 0;
  font-size: 15px;
}

.exchange-card-heading small {
  color: var(--muted);
  font-size: 10px;
}

.exchange-rate-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
  display: grid;
}

.exchange-rate-grid article {
  background: linear-gradient(145deg, #faf9ff, #fff);
  border: 1px solid #dfdcef;
  border-radius: 10px;
  padding: 17px;
}

.exchange-rate-grid article > div {
  justify-content: space-between;
  gap: 10px;
  display: flex;
}

.exchange-rate-grid article > div > span {
  color: var(--violet-dark);
  font-size: 11px;
  font-weight: 850;
}

.exchange-rate-grid strong {
  margin-top: 14px;
  font-size: 19px;
  display: block;
}

.exchange-rate-grid p {
  margin: 7px 0 0;
}

.exchange-calculator {
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
  gap: 14px;
  padding: 20px 20px 0;
  display: grid;
}

.exchange-calculator label {
  gap: 7px;
  display: grid;
}

.exchange-calculator label > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.exchange-calculator input, .exchange-calculator select {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 8px;
  min-height: 44px;
  padding: 0 12px;
}

.exchange-conversion-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px 20px;
  display: grid;
}

.exchange-conversion-grid article {
  border: 1px solid var(--line);
  border-radius: 9px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  display: flex;
}

.exchange-conversion-grid article.source {
  background: var(--violet-pale);
  border-color: #afa5ff;
}

.exchange-conversion-grid strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  overflow: hidden;
}

.exchange-disclaimer {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.65;
}

.tool-main {
  padding-bottom: 54px;
}

.tool-calculator-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.tool-input-card, .tool-result-card {
  margin-bottom: 0;
}

.tool-result-column {
  position: sticky;
  top: 76px;
}

.exchange-card-heading.compact {
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.tool-field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
  display: grid;
}

.tool-number-field {
  gap: 7px;
  display: grid;
}

.tool-number-field > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.tool-number-field > div {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 8px;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  display: flex;
  overflow: hidden;
}

.tool-number-field input {
  width: 100%;
  min-width: 0;
  height: 40px;
  color: var(--ink);
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  padding: 0 10px;
}

.tool-number-field > div:focus-within {
  border-color: #9e92ff;
  box-shadow: 0 0 0 3px #7663ff17;
}

.tool-number-field em {
  border-left: 1px solid var(--line);
  min-width: 44px;
  color: var(--muted);
  background: #f7f7f9;
  align-self: stretch;
  place-items: center;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  display: grid;
}

.tool-validation-error {
  background: var(--red-pale);
  color: var(--red);
  border: 1px solid #f0c5ca;
  border-radius: 8px;
  margin: 16px 18px 0;
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.5;
}

.tool-price-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
  display: grid;
}

.tool-price-results article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  gap: 6px;
  padding: 14px;
  display: grid;
}

.tool-price-results article.primary {
  background: var(--violet-pale);
  border-color: #aca1ff;
}

.tool-price-results span, .tool-price-results small {
  color: var(--muted);
  font-size: 9px;
}

.tool-price-results strong {
  color: var(--ink);
  font-size: 18px;
}

.tool-metric-list {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 8px 18px 16px;
  display: grid;
}

.tool-metric-list > div {
  border-bottom: 1px dashed #e7e7eb;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  display: flex;
}

.tool-metric-list > div:last-child {
  border-bottom: 0;
}

.tool-metric-list dt {
  color: var(--muted);
  font-size: 9px;
}

.tool-metric-list dd {
  color: var(--ink);
  text-align: right;
  margin: 0;
  font-size: 10px;
  font-weight: 750;
}

.tool-scenario-card, .tool-formula-card {
  margin-top: 18px;
}

.tool-table-scroll {
  overflow-x: auto;
}

.tool-result-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 10px;
}

.tool-result-table th, .tool-result-table td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  padding: 13px 16px;
}

.tool-result-table th {
  color: var(--muted);
  background: #fafafa;
  font-size: 9px;
  font-weight: 750;
}

.tool-result-table tbody tr:last-child td {
  border-bottom: 0;
}

.positive {
  color: #16834b !important;
}

.negative {
  color: var(--red) !important;
}

.profit-hero {
  background: #f1fbf6;
  border: 1px solid #a9dfc2;
  border-radius: 11px;
  gap: 8px;
  margin: 18px;
  padding: 18px;
  display: grid;
}

.profit-result.loss .profit-hero {
  background: var(--red-pale);
  border-color: #efc0c5;
}

.profit-hero span {
  color: var(--muted);
  font-size: 10px;
}

.profit-hero strong {
  color: #127441;
  font-size: 21px;
}

.profit-result.loss .profit-hero strong {
  color: var(--red);
}

.tool-formula-card p {
  color: #484950;
  margin: 0;
  padding: 18px 20px;
  font-size: 11px;
  line-height: 1.75;
}

.sidebar {
  z-index: 30;
  border-right: 1px solid var(--line);
  width: 238px;
  color: var(--ink);
  background: #fff;
  flex-direction: column;
  padding: 29px 19px 20px;
  display: flex;
  position: fixed;
  inset: 0 auto 0 0;
  overflow-y: auto;
}

.brand {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 12px;
  padding: 0 8px 31px;
  display: flex;
}

.brand-mark {
  color: #0000;
  background: #0d7ef4 url("/vkw-logo.png") center / cover no-repeat;
  border: 0;
  border-radius: 11px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 0;
  display: grid;
  overflow: hidden;
  box-shadow: 0 0 0 5px #0d7ef41a;
}

.brand div, .user-chip div {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.brand strong {
  letter-spacing: -.02em;
  font-size: 16px;
  line-height: 1.2;
}

.brand span:last-child {
  color: var(--muted);
  margin-top: 3px;
  font-size: 11px;
}

.nav-list {
  gap: 7px;
  margin-top: 25px;
  display: grid;
}

.nav-item {
  color: #2e3038;
  border: 1px solid #0000;
  border-radius: 9px;
  align-items: center;
  gap: 11px;
  min-height: 45px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .16s, color .16s, transform .16s;
  display: flex;
}

.nav-button {
  text-align: left;
  width: 100%;
}

.nav-item:hover {
  color: #000;
  background: #f6f6f8;
  transform: translateX(2px);
}

.nav-item.active {
  background: var(--violet-pale);
  color: #111218;
  border-color: #d8d3ff;
}

.nav-symbol {
  background: #fafafa;
  border: 1px solid #d9d9df;
  border-radius: 6px;
  place-items: center;
  width: 23px;
  height: 23px;
  font-size: 13px;
  font-weight: 500;
  display: grid;
}

.nav-item.active .nav-symbol {
  background: var(--violet);
  color: #fff;
  border-color: #0000;
}

.sourcing-nav-item .nav-symbol {
  color: #d95418;
  background: #fff4ed;
  border-color: #ffd9c5;
}

.sourcing-nav-item.active {
  background: #fff3ec;
  border-color: #ffd4bd;
}

.sourcing-nav-item.active .nav-symbol {
  color: #fff;
  background: #ff6a22;
  border-color: #0000;
}

.nav-count {
  background: var(--violet);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-left: auto;
  font-size: 10px;
  display: grid;
}

.product-menu-group {
  min-width: 0;
  position: relative;
}

.product-menu-trigger {
  cursor: pointer;
  list-style: none;
  position: relative;
}

.product-menu-trigger::-webkit-details-marker {
  display: none;
}

.product-menu-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.product-menu-chevron {
  color: #8b8c94;
  margin-left: auto;
  font-size: 15px;
  line-height: 1;
  transition: transform .16s;
}

.product-menu-group.expanded .product-menu-chevron, .product-menu-group[open] .product-menu-chevron {
  transform: rotate(180deg);
}

.product-menu-submenu {
  border-left: 1px solid #dddde3;
  gap: 4px;
  margin: 5px 0 3px 20px;
  padding-left: 10px;
  display: grid;
}

.product-menu-subitem {
  color: #414249;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 7px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 620;
  text-decoration: none;
  display: flex;
}

.product-menu-subitem > span:first-child {
  color: #55565e;
  background: #f0f0f2;
  border-radius: 5px;
  flex: none;
  place-items: center;
  width: 19px;
  height: 19px;
  font-size: 10px;
  display: grid;
}

.product-menu-subitem:hover {
  color: #000;
  background: #f6f6f8;
}

.product-menu-subitem.active {
  background: var(--violet-pale);
  color: #18191f;
  border-color: #dad5ff;
}

.product-menu-subitem.active > span:first-child {
  background: var(--violet);
  color: #fff;
}

.product-menu-subitem em {
  color: #55565e;
  text-align: center;
  background: #ececf0;
  border-radius: 999px;
  min-width: 18px;
  margin-left: auto;
  padding: 2px 5px;
  font-size: 8px;
  font-style: normal;
}

.sidebar-spacer {
  flex: 1;
  min-height: 45px;
}

.api-note {
  border: 1px solid var(--line);
  background: #f8f8fa;
  flex-direction: column;
  padding: 15px;
  display: flex;
}

.api-note-label {
  color: var(--muted);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.api-note strong {
  color: var(--ink);
  margin-top: 7px;
  font-size: 12px;
}

.api-note span:last-child {
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.5;
}

.user-chip {
  border: 0;
  border-top: 1px solid var(--line);
  width: 100%;
  color: inherit;
  text-align: left;
  background: none;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 7px 0;
  display: flex;
}

.user-chip:hover strong {
  color: #000;
}

.avatar {
  width: 31px;
  height: 31px;
  color: var(--navy);
  background: #d8d4ff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.user-chip strong {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.user-chip div span {
  color: var(--muted);
  margin-top: 2px;
  font-size: 9px;
}

.user-arrow {
  color: #8b8c94;
  margin-left: auto;
  font-size: 17px;
}

.main-area {
  min-height: 100vh;
  margin-left: 238px;
  padding: 34px 38px 68px;
}

.topbar {
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
}

.eyebrow {
  color: #8b8c94;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 750;
}

.topbar h1 {
  color: #171821;
  letter-spacing: -.045em;
  margin: 0;
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 710;
}

.topbar-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.connection-pill, .ghost-button, .account-button {
  border: 1px solid var(--line-strong);
  color: #52535d;
  background: #fff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  box-shadow: 0 2px 8px #14142308;
}

.account-button > span {
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 8px;
  font-weight: 800;
  display: grid;
}

.connection-pill.connected {
  background: var(--green-pale);
  color: var(--green);
  border-color: #bce2d3;
}

.connection-pill.error {
  background: var(--red-pale);
  color: var(--red);
  border-color: #f0c3c9;
}

.status-dot {
  background: #b0b0b6;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.connection-pill.connected .status-dot, .status-dot.online {
  background: var(--green);
  box-shadow: 0 0 0 4px #14845e1f;
}

.connection-pill.checking .status-dot {
  background: var(--amber);
  animation: 1.2s infinite pulse;
}

.connection-pill.error .status-dot {
  background: var(--red);
}

.ghost-button:hover, .connection-pill:hover {
  border-color: #b8b6af;
}

.metric-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 1280px;
  margin: 28px auto 20px;
  display: grid;
}

.metric-card {
  border: 1px solid var(--line);
  background: var(--paper);
  min-height: 132px;
  box-shadow: var(--shadow);
  padding: 18px 19px 15px;
  position: relative;
  overflow: hidden;
}

.metric-card:after {
  border: 12px solid var(--violet-pale);
  content: "";
  opacity: .7;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  position: absolute;
  top: -28px;
  right: -19px;
}

.metric-topline {
  color: #777781;
  letter-spacing: .05em;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.metric-topline i {
  z-index: 1;
  background: var(--violet);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: relative;
}

.metric-value {
  align-items: baseline;
  gap: 6px;
  margin-top: 5px;
  display: flex;
}

.metric-value strong {
  letter-spacing: -.045em;
  font-size: 29px;
  font-weight: 720;
}

.metric-value span {
  color: #9a99a2;
  font-size: 10px;
  font-weight: 600;
}

.metric-track {
  background: #ecebf0;
  width: calc(100% - 16px);
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.metric-track span {
  background: var(--violet);
  height: 100%;
  transition: width .4s;
  display: block;
}

.metric-card p {
  color: #92919a;
  margin: 8px 0 0;
  font-size: 9px;
}

.workspace-grid {
  grid-template-columns: minmax(0, 1fr) 282px;
  align-items: start;
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
}

.form-column {
  gap: 13px;
  display: grid;
}

.section-card, .review-card, .status-card, .help-card {
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.section-card, .review-card {
  scroll-margin-top: 20px;
}

.section-header {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 18px 22px;
  display: flex;
}

.section-number {
  background: var(--violet-pale);
  width: 32px;
  height: 32px;
  color: var(--violet-dark);
  letter-spacing: .03em;
  border: 1px solid #d8d5ff;
  border-radius: 7px;
  flex: none;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.section-header h2, .review-topline h2, .status-card h2 {
  letter-spacing: -.02em;
  margin: 0;
  font-size: 16px;
  font-weight: 720;
}

.section-header p, .review-topline p {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.45;
}

.section-action {
  margin-left: auto;
}

.text-button {
  color: var(--violet-dark);
  background: none;
  border: 0;
  padding: 5px;
  font-size: 10px;
  font-weight: 700;
}

.text-button:hover {
  text-decoration: underline;
}

.section-body {
  padding: 22px;
}

.field-grid, .attribute-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  display: grid;
}

.field {
  flex-direction: column;
  min-width: 0;
  display: flex;
  position: relative;
}

.field.full-span {
  grid-column: 1 / -1;
}

.field label {
  color: #3b3c44;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 720;
  display: flex;
}

.field label em {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 8px;
  font-style: normal;
}

.field label span {
  color: #9a99a1;
  margin-left: auto;
  font-size: 9px;
  font-weight: 450;
}

.field input, .field select, .field textarea, .search-box input {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 7px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

.field input, .field select {
  height: 41px;
  padding: 0 12px;
  font-size: 11px;
}

.field textarea {
  resize: vertical;
  min-height: 94px;
  padding: 11px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.55;
}

.field input:focus, .field select:focus, .field textarea:focus, .search-box input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px #715cff1a;
}

.field-counter, .field-meta {
  color: #a09fa7;
  margin-top: 5px;
  font-size: 8px;
}

.attribute-guidance {
  color: var(--violet-dark);
  background: #f6f4ff;
  border-radius: 5px;
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 8px;
  line-height: 1.5;
}

.field-counter {
  background: #fff;
  margin: 0;
  padding-left: 8px;
  position: absolute;
  bottom: 13px;
  right: 9px;
}

.input-with-trailing {
  display: flex;
}

.input-with-trailing input {
  border-radius: 7px 0 0 7px;
}

.input-with-trailing select {
  color: #5c5d65;
  background: #fafafa;
  border-left: 0;
  border-radius: 0 7px 7px 0;
  flex: none;
  width: 86px;
  padding: 0 8px;
  font-size: 10px;
}

.category-selector {
  text-align: left;
  background: #faf9ff;
  border: 1px dashed #bbb7e9;
  border-radius: 9px;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 74px;
  padding: 12px 14px;
  transition: border-color .15s, background .15s;
  display: grid;
}

.category-selector:hover {
  border-color: var(--violet);
  background: #f7f5ff;
}

.category-icon {
  background: var(--violet);
  color: #fff;
  border-radius: 8px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 18px;
  display: grid;
}

.category-selector > span:nth-child(2) {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.category-selector small {
  color: #85848e;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 700;
}

.category-selector strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 11px;
  overflow: hidden;
}

.category-selector em {
  color: #888692;
  margin-top: 3px;
  font-size: 8px;
  font-style: normal;
}

.category-arrow {
  color: var(--violet);
  font-size: 18px;
}

.loading-row, .empty-inline {
  border: 1px solid var(--line);
  color: #777781;
  background: #fbfbfa;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 13px;
  font-size: 10px;
  display: flex;
}

.spinner {
  border: 2px solid #d8d6e4;
  border-top-color: var(--violet);
  border-radius: 50%;
  flex: none;
  width: 14px;
  height: 14px;
  animation: .8s linear infinite spin;
}

.spinner.light {
  border-color: #fff #ffffff59 #ffffff59;
}

.attribute-area {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 18px;
}

.attribute-heading {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  display: flex;
}

.attribute-heading > div {
  flex-direction: column;
  display: flex;
}

.attribute-heading strong {
  font-size: 11px;
}

.attribute-heading span {
  color: #8f8e97;
  margin-top: 3px;
  font-size: 9px;
}

.dictionary-input {
  border: 1px solid var(--line-strong);
  color: #aaaab2;
  text-align: left;
  background: #fff;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 41px;
  padding: 0 11px 0 12px;
  font-size: 10px;
  display: flex;
}

.dictionary-input:hover {
  border-color: var(--violet);
}

.dictionary-input.has-value {
  color: var(--ink);
}

.dictionary-input small {
  color: var(--violet);
  font-size: 16px;
}

.measurement-group {
  border-bottom: 1px solid var(--line);
  padding-bottom: 19px;
}

.measurement-title {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.measurement-title strong {
  font-size: 10px;
}

.measurement-title select {
  border: 1px solid var(--line);
  color: #666670;
  background: #fafafa;
  border-radius: 6px;
  height: 29px;
  padding: 0 8px;
  font-size: 9px;
}

.triple-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.weight-row {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1.2fr);
  align-items: end;
  gap: 20px;
  margin-top: 18px;
  display: grid;
}

.weight-tip {
  color: #777680;
  background: #f8f7ff;
  border-left: 2px solid #d9d5ff;
  align-items: center;
  gap: 9px;
  min-height: 41px;
  padding: 8px 10px;
  font-size: 9px;
  line-height: 1.5;
  display: flex;
}

.weight-tip span {
  width: 17px;
  height: 17px;
  color: var(--violet);
  border: 1px solid #aaa3f9;
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  display: grid;
}

.image-preview {
  background-color: #f8f8f6;
  background-image: linear-gradient(45deg, #eeeeeb 25%, #0000 25%), linear-gradient(-45deg, #eeeeeb 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #eeeeeb 75%), linear-gradient(-45deg, #0000 75%, #eeeeeb 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
  border: 1px dashed #cbc9c1;
  border-radius: 8px;
  place-items: center;
  min-height: 94px;
  display: grid;
  overflow: hidden;
}

.image-preview img {
  object-fit: contain;
  background: #fff;
  width: 100%;
  height: 130px;
}

.image-preview span {
  border: 1px solid var(--line);
  color: #9898a0;
  background: #ffffffeb;
  border-radius: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 75px;
  height: 75px;
  font-size: 8px;
  display: flex;
}

.image-preview strong {
  color: #777781;
  font-size: 14px;
}

.review-card {
  padding: 22px;
}

.review-topline, .review-topline > div {
  align-items: center;
  display: flex;
}

.review-topline {
  justify-content: space-between;
  gap: 14px;
}

.review-topline > div {
  gap: 14px;
}

.validation-box {
  border-left: 3px solid var(--red);
  background: var(--red-pale);
  color: #8d2e39;
  margin-top: 17px;
  padding: 13px 15px;
  font-size: 10px;
}

.validation-box strong {
  font-size: 11px;
}

.validation-box ul {
  gap: 4px;
  margin: 7px 0 0;
  padding-left: 16px;
  display: grid;
}

.json-preview {
  color: #dedcf8;
  white-space: pre-wrap;
  background: #191a32;
  border: 1px solid #292a4f;
  border-radius: 7px;
  max-height: 340px;
  margin: 17px 0 0;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 1.55;
  overflow: auto;
}

.submit-row {
  border-top: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 19px;
  padding-top: 19px;
  display: flex;
}

.submit-summary {
  gap: 12px;
  display: flex;
}

.submit-summary span {
  color: #9998a1;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 650;
  display: inline-flex;
}

.submit-summary span:first-letter {
  color: #8f8f98;
}

.submit-summary span.done {
  color: var(--green);
}

.primary-button {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: #fff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: 151px;
  height: 43px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 750;
  transition: background .15s, transform .15s, box-shadow .15s;
  display: inline-flex;
  box-shadow: 0 7px 18px #624ceb33;
}

.primary-button:hover:not(:disabled) {
  background: var(--violet-dark);
  transform: translateY(-1px);
  box-shadow: 0 9px 22px #624ceb42;
}

.primary-button.wide {
  width: 100%;
}

.status-column {
  min-width: 0;
}

.sticky-card {
  position: sticky;
  top: 20px;
}

.status-card {
  scroll-margin-top: 20px;
}

.status-card-header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  padding: 19px;
  display: flex;
}

.mini-label {
  color: var(--violet);
  letter-spacing: .13em;
  margin-bottom: 5px;
  font-size: 8px;
  font-weight: 800;
  display: block;
}

.icon-button {
  border: 1px solid var(--line);
  color: #71717c;
  background: #fff;
  border-radius: 7px;
  place-items: center;
  width: 31px;
  height: 31px;
  font-size: 15px;
  display: grid;
}

.empty-task {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 256px;
  padding: 30px 27px;
  display: flex;
}

.task-orbit {
  border: 1px dashed #c8c5e7;
  border-radius: 50%;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  display: grid;
  position: relative;
}

.task-orbit:before, .task-orbit i {
  content: "";
  border-radius: 50%;
}

.task-orbit:before {
  background: var(--violet-pale);
  width: 31px;
  height: 31px;
  box-shadow: inset 0 0 0 8px #dcd7ff;
}

.task-orbit i {
  background: var(--violet);
  width: 8px;
  height: 8px;
  position: absolute;
  top: 3px;
  right: 13px;
}

.empty-task strong {
  font-size: 12px;
}

.empty-task p {
  color: #888790;
  max-width: 210px;
  margin: 7px 0 0;
  font-size: 9px;
  line-height: 1.6;
}

.task-content {
  min-height: 256px;
  padding: 17px;
}

.task-id-row {
  border-bottom: 1px solid var(--line);
  color: #8d8c95;
  align-items: center;
  gap: 7px;
  padding-bottom: 12px;
  font-size: 9px;
  display: flex;
}

.task-id-row strong {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.pulse-label {
  color: #9e651d;
  background: #fff5df;
  border-radius: 10px;
  margin-left: auto;
  padding: 3px 7px;
  font-size: 8px;
  font-weight: 700;
}

.task-waiting {
  color: #85848d;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 175px;
  font-size: 9px;
  display: flex;
}

.task-items {
  gap: 10px;
  padding-top: 13px;
  display: grid;
}

.task-item {
  border: 1px solid var(--line);
  background: #fafafa;
  padding: 11px;
}

.task-item > div {
  align-items: center;
  gap: 9px;
  display: flex;
}

.task-status {
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
}

.task-status.success {
  background: var(--green);
  box-shadow: 0 0 0 4px #14845e1c;
}

.task-status.pending {
  background: var(--amber);
  box-shadow: 0 0 0 4px #b46d161c;
}

.task-status.error {
  background: var(--red);
  box-shadow: 0 0 0 4px #c93d4c1a;
}

.task-item > div > div {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.task-item strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.task-item div span {
  color: #8f8e97;
  margin-top: 2px;
  font-size: 8px;
}

.task-errors {
  background: var(--red-pale);
  color: #9b3440;
  gap: 3px;
  margin: 9px 0 0;
  padding: 8px 8px 8px 21px;
  font-size: 8px;
  line-height: 1.45;
  display: grid;
}

.status-card-footer {
  border-top: 1px solid var(--line);
  color: #888790;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px;
  font-size: 8px;
  display: flex;
}

.help-card {
  gap: 11px;
  margin-top: 12px;
  padding: 16px;
  display: flex;
}

.help-icon {
  width: 24px;
  height: 24px;
  color: var(--violet);
  border: 1px solid #d3d0f6;
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.help-card strong {
  font-size: 9px;
}

.help-card p {
  color: #888790;
  margin: 5px 0 0;
  font-size: 8px;
  line-height: 1.55;
}

.modal-backdrop {
  z-index: 100;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #131427a1;
  place-items: center;
  padding: 28px;
  display: grid;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.modal-card {
  background: #fff;
  border: 1px solid #ffffff59;
  border-radius: 12px;
  width: min(100%, 470px);
  max-height: calc(100vh - 56px);
  padding: 28px;
  animation: .19s ease-out modal-in;
  position: relative;
  overflow: auto;
  box-shadow: 0 30px 70px #12122340;
}

.category-modal {
  width: min(100%, 660px);
}

.modal-close {
  border: 1px solid var(--line);
  color: #777780;
  background: #fff;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 18px;
  display: grid;
  position: absolute;
  top: 15px;
  right: 15px;
}

.modal-kicker {
  color: var(--violet);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 850;
}

.modal-card h2 {
  letter-spacing: -.035em;
  max-width: 390px;
  margin: 7px 45px 8px 0;
  font-size: 22px;
  line-height: 1.25;
}

.modal-card > p {
  color: #73727c;
  margin: 0;
  font-size: 10px;
  line-height: 1.6;
}

.credential-modal form {
  gap: 14px;
  margin-top: 22px;
  display: grid;
}

.credential-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  display: flex;
}

.credential-actions .primary-button {
  min-width: 185px;
}

.danger-text-button {
  min-height: 42px;
  color: var(--red);
  background: none;
  border: 0;
  font-size: 10px;
  font-weight: 750;
}

.danger-text-button:hover {
  text-decoration: underline;
}

.security-note {
  background: var(--green-pale);
  color: #477665;
  border-left: 2px solid #9bd2bd;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  font-size: 8px;
  line-height: 1.5;
  display: flex;
}

.security-note span {
  font-weight: 800;
}

.modal-link {
  color: var(--violet-dark);
  text-align: center;
  margin-top: 16px;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  display: block;
}

.modal-link:hover {
  text-decoration: underline;
}

.profile-modal {
  width: min(100%, 500px);
}

.identity-card {
  border: 1px solid var(--line);
  background: #fafafa;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 13px;
  display: flex;
}

.avatar.large {
  width: 39px;
  height: 39px;
}

.identity-card > div {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.identity-card strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.identity-card div span {
  color: #8b8a93;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 9px;
  overflow: hidden;
}

.identity-card em {
  background: var(--green-pale);
  color: var(--green);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.profile-form {
  gap: 15px;
  margin-top: 19px;
  display: grid;
}

.profile-db-note {
  background: #f8f7ff;
  border-left: 2px solid #b7b0ff;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  display: flex;
}

.profile-db-note > span {
  width: 28px;
  height: 24px;
  color: var(--violet-dark);
  letter-spacing: .05em;
  border: 1px solid #c9c4ff;
  border-radius: 5px;
  flex: none;
  place-items: center;
  font-size: 8px;
  font-weight: 850;
  display: grid;
}

.profile-db-note div {
  flex-direction: column;
  display: flex;
}

.profile-db-note strong {
  font-size: 9px;
}

.profile-db-note p {
  color: #7e7d88;
  margin: 3px 0 0;
  font-size: 8px;
  line-height: 1.55;
}

.profile-footer {
  border-top: 1px solid var(--line);
  color: #97969e;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 17px;
  padding-top: 14px;
  font-size: 8px;
  display: flex;
}

.profile-footer a {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
}

.profile-footer > div {
  align-items: center;
  gap: 11px;
  display: flex;
}

.profile-footer button {
  color: var(--violet-dark);
  background: none;
  border: 0;
  padding: 0;
  font-size: 8px;
  font-weight: 700;
}

.activity-modal {
  width: min(100%, 900px);
}

.activity-title-row {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  display: flex;
}

.activity-title-row h2 {
  margin-right: 0;
}

.activity-title-row p {
  color: #73727c;
  margin: 0;
  font-size: 10px;
}

.activity-loading {
  min-height: 330px;
}

.activity-metrics {
  border: 1px solid var(--line);
  background: #fafafa;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 22px;
  display: grid;
}

.activity-metrics > div {
  border-right: 1px solid var(--line);
  flex-direction: column;
  justify-content: center;
  min-height: 76px;
  padding: 0 17px;
  display: flex;
}

.activity-metrics > div:last-child {
  border-right: 0;
}

.activity-metrics span {
  color: #8d8c95;
  letter-spacing: .04em;
  font-size: 8px;
  font-weight: 700;
}

.activity-metrics strong {
  letter-spacing: -.04em;
  margin-top: 4px;
  font-size: 23px;
}

.activity-section {
  margin-top: 20px;
}

.activity-section > header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.activity-section > header strong {
  font-size: 11px;
}

.activity-section > header span {
  color: #94939c;
  font-size: 8px;
}

.stored-task-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.stored-task-grid article {
  border: 1px solid var(--line);
  background: #fff;
  min-width: 0;
  padding: 12px;
}

.stored-task-grid article > div {
  align-items: center;
  gap: 7px;
  display: flex;
}

.stored-task-grid strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  overflow: hidden;
}

.stored-task-grid em {
  color: #8e8d96;
  margin-left: auto;
  font-size: 7px;
  font-style: normal;
}

.stored-task-grid p {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 9px 0 6px;
  font-size: 9px;
  font-weight: 650;
  overflow: hidden;
}

.stored-task-grid article > span {
  color: #9998a0;
  font-size: 7px;
}

.operation-section {
  margin-bottom: 2px;
}

.operation-table {
  border: 1px solid var(--line);
}

.operation-row {
  border-bottom: 1px solid var(--line);
  color: #666670;
  grid-template-columns: minmax(160px, 1.3fr) minmax(120px, 1fr) 110px 90px;
  align-items: center;
  min-height: 51px;
  padding: 7px 12px;
  font-size: 8px;
  display: grid;
}

.operation-row:last-child {
  border-bottom: 0;
}

.operation-head {
  color: #8c8b94;
  letter-spacing: .06em;
  background: #f7f7f5;
  min-height: 32px;
  font-size: 7px;
  font-weight: 800;
}

.operation-row > span {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.operation-row strong {
  color: #33343c;
  font-size: 9px;
}

.operation-row small {
  color: #a09fa7;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  overflow: hidden;
}

.record-status {
  border-radius: 8px;
  width: fit-content;
  padding: 3px 7px;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
}

.record-status.success {
  background: var(--green-pale);
  color: var(--green);
}

.record-status.failed {
  background: var(--red-pale);
  color: var(--red);
}

.record-status.processing {
  color: var(--amber);
  background: #fff5df;
}

.search-box {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-left: 12px;
  display: flex;
}

.search-box > span {
  color: var(--violet);
  font-size: 17px;
}

.search-box input {
  height: 43px;
  box-shadow: none;
  border: 0;
  flex: 1;
  padding: 0 8px 0 0;
  font-size: 10px;
}

.search-box input:focus {
  box-shadow: none;
}

.search-box button {
  background: var(--violet);
  color: #fff;
  border: 0;
  border-radius: 6px;
  height: 31px;
  margin-right: 6px;
  padding: 0 13px;
  font-size: 9px;
  font-weight: 700;
}

.modal-loading, .modal-empty {
  color: #85848d;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 180px;
  font-size: 10px;
  display: flex;
}

.category-results, .dictionary-results {
  border: 1px solid var(--line);
  max-height: 430px;
  margin-top: 12px;
  display: grid;
  overflow-y: auto;
}

.dictionary-rule {
  color: var(--violet-dark);
  background: #f8f7ff;
  border: 1px solid #ded9ff;
  border-radius: 7px;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
  padding: 9px 11px;
  display: flex;
}

.dictionary-rule strong {
  font-size: 9px;
}

.dictionary-rule span {
  font-size: 8px;
  line-height: 1.5;
}

.dictionary-translation-status {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  font-size: 8px;
  display: flex;
}

.category-results button, .dictionary-results button {
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  background: #fff;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 9px 13px;
  display: flex;
}

.category-results button:last-child, .dictionary-results button:last-child {
  border-bottom: 0;
}

.category-results button:hover, .dictionary-results button:hover {
  background: #f7f5ff;
}

.category-results button:disabled {
  background: #f7f7f6;
}

.category-results span, .dictionary-results span {
  font-size: 10px;
  font-weight: 650;
}

.dictionary-results span {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.dictionary-results span strong {
  font-size: 10px;
}

.dictionary-results span em {
  color: #85848d;
  font-size: 8px;
  font-style: normal;
  font-weight: 450;
}

.category-results small, .dictionary-results small {
  color: #96959e;
  font-size: 8px;
}

.modal-footnote {
  text-align: center;
  margin: 0 !important;
}

.category-modal-footer {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  display: flex;
}

.category-modal-footer p {
  color: var(--muted);
  text-align: left;
  font-size: 8px;
  line-height: 1.5;
}

.category-modal-footer button {
  border: 1px solid var(--line-strong);
  color: var(--violet-dark);
  background: #fff;
  border-radius: 7px;
  flex: none;
  padding: 7px 10px;
  font-size: 8px;
  font-weight: 750;
}

.category-modal-footer button:disabled {
  cursor: wait;
  opacity: .55;
}

.toast {
  z-index: 200;
  border: 1px solid var(--line);
  color: #494a52;
  background: #fff;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  max-width: min(360px, 100vw - 40px);
  min-height: 46px;
  padding: 10px 15px 10px 11px;
  font-size: 10px;
  font-weight: 650;
  animation: .22s ease-out toast-in;
  display: flex;
  position: fixed;
  bottom: 24px;
  right: 24px;
  box-shadow: 0 18px 45px #1718262e;
}

.toast > span {
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  font-weight: 850;
  display: grid;
}

.toast.success > span {
  background: var(--green-pale);
  color: var(--green);
}

.toast.error > span {
  background: var(--red-pale);
  color: var(--red);
}

.toast.info > span {
  background: var(--violet-pale);
  color: var(--violet);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px)scale(.99);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 1050px) {
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .status-column {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .6fr);
    gap: 13px;
    display: grid;
  }

  .sticky-card {
    position: static;
  }

  .help-card {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .auth-page {
    background: var(--navy);
    display: block;
  }

  .auth-intro {
    min-height: auto;
    padding: 18px 20px;
  }

  .auth-copy, .auth-feature-list {
    display: none;
  }

  .auth-panel {
    border-radius: 20px 20px 0 0;
    min-height: auto;
    padding: 24px 20px 32px;
  }

  .auth-tabs {
    margin-bottom: 20px;
  }

  .sidebar {
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 64px;
    padding: 9px 14px;
    position: sticky;
    top: 0;
    overflow: hidden;
  }

  .brand {
    border: 0;
    padding: 0;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand span:last-child, .api-note, .user-chip, .sidebar-spacer {
    display: none;
  }

  .nav-list {
    margin: 0 0 0 auto;
    display: flex;
  }

  .nav-item {
    min-height: 38px;
    padding: 0 8px;
    font-size: 10px;
  }

  .nav-item:not(.active) {
    display: none;
  }

  .main-area {
    margin-left: 0;
    padding: 24px 15px 48px;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
  }

  .topbar-actions {
    width: 100%;
  }

  .topbar-actions > button {
    flex: 1;
  }

  .account-button {
    max-width: 110px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 116px;
  }

  .field-grid, .attribute-grid, .weight-row {
    grid-template-columns: 1fr;
  }

  .image-preview {
    min-height: 170px;
  }

  .status-column {
    grid-template-columns: 1fr;
  }

  .help-card {
    margin-top: 0;
  }

  .submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .submit-summary {
    justify-content: space-between;
  }

  .primary-button {
    width: 100%;
  }

  .modal-backdrop {
    align-items: end;
    padding: 12px;
  }

  .modal-card {
    border-radius: 12px 12px 7px 7px;
    max-height: calc(100vh - 24px);
    padding: 24px 18px;
  }

  .credential-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .credential-actions .primary-button, .danger-text-button {
    width: 100%;
  }

  .activity-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .activity-metrics {
    grid-template-columns: 1fr;
  }

  .activity-metrics > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 58px;
  }

  .activity-metrics > div:last-child {
    border-bottom: 0;
  }

  .stored-task-grid {
    grid-template-columns: 1fr;
  }

  .operation-table {
    overflow-x: auto;
  }

  .operation-row {
    min-width: 650px;
  }
}

@media (max-width: 430px) {
  .brand div {
    display: none;
  }

  .section-header, .section-body, .review-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .triple-fields {
    grid-template-columns: 1fr;
  }

  .attribute-heading {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

.import-shell {
  background: #f4f4f1;
  grid-template-columns: 292px minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}

.import-sidebar {
  border-right: 1px solid var(--line);
  height: 100vh;
  color: var(--ink);
  background: #fff;
  flex-direction: column;
  padding: 24px 18px 18px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.import-brand {
  padding: 0 6px 20px;
}

.import-brand div {
  flex-direction: column;
  display: flex;
}

.import-brand div span {
  color: var(--muted);
  font-size: 10px;
}

.import-back-link {
  color: #202127;
  border: 1px solid #0000;
  border-radius: 8px;
  margin: 0 4px 6px;
  padding: 10px 11px;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.import-back-link:hover {
  color: #000;
  background: #f6f6f8;
  border-color: #e0e0e5;
}

.zip-drop {
  min-height: 142px;
  color: var(--ink);
  background: #fafafa;
  border: 1px dashed #c9c8d2;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: all .16s;
  display: flex;
}

.zip-drop:hover, .zip-drop.dragging {
  background: var(--violet-pale);
  border-color: #9487ff;
  transform: translateY(-1px);
}

.zip-drop > span {
  background: var(--violet);
  letter-spacing: .05em;
  border-radius: 10px;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 900;
  display: grid;
}

.zip-drop strong {
  font-size: 13px;
}

.zip-drop small {
  color: var(--muted);
  font-size: 10px;
}

.direct-collection-card {
  background: linear-gradient(145deg, #f7f5ff, #efedff);
  border: 1px solid #d9d5ff;
  border-radius: 12px;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  display: flex;
}

.direct-collection-card > span {
  background: var(--green-pale);
  width: fit-content;
  color: var(--green);
  letter-spacing: .08em;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 800;
}

.direct-collection-card strong {
  font-size: 13px;
}

.direct-collection-card small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6;
}

.direct-collection-card button {
  color: #fff;
  background: #5c50c5;
  border: 1px solid #6f65ce;
  border-radius: 7px;
  margin-top: 3px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 750;
}

.legacy-zip-import {
  color: var(--muted);
  margin-top: 9px;
  font-size: 9px;
}

.legacy-zip-import summary {
  cursor: pointer;
  padding: 3px 1px 7px;
}

.zip-drop.compact {
  width: 100%;
  min-height: 74px;
}

.zip-drop.compact > span {
  width: 30px;
  height: 26px;
  margin: 0;
  font-size: 8px;
}

.zip-drop.compact strong {
  font-size: 10px;
}

.service-health {
  border: 1px solid var(--line);
  background: #f8f8fa;
  border-radius: 10px;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
  padding: 10px;
  display: flex;
}

.service-health > div {
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  display: grid;
}

.service-health > div > span {
  background: var(--red-pale);
  width: 18px;
  height: 18px;
  color: var(--red);
  border-radius: 99px;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}

.service-health > div.ready > span {
  background: var(--green-pale);
  color: var(--green);
}

.service-health > div.warning > span {
  color: var(--amber);
  background: #fff5e8;
}

.service-health p {
  flex-direction: column;
  min-width: 0;
  margin: 0;
  display: flex;
}

.service-health strong {
  color: var(--ink);
  font-size: 9px;
}

.service-health small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.service-health > small {
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.draft-list-heading {
  color: #303139;
  letter-spacing: .03em;
  justify-content: space-between;
  align-items: center;
  margin: 26px 5px 11px;
  font-size: 11px;
  font-weight: 750;
  display: flex;
}

.draft-list-heading em {
  background: var(--violet-pale);
  min-width: 22px;
  height: 22px;
  color: var(--violet-dark);
  border-radius: 99px;
  place-items: center;
  font-size: 10px;
  font-style: normal;
  display: grid;
}

.draft-list {
  flex: 1;
  overflow-y: auto;
}

.draft-list-item {
  width: 100%;
  color: var(--ink);
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
  padding: 11px;
  display: flex;
}

.draft-list-item:hover, .draft-list-item.active {
  background: var(--violet-pale);
  border-color: #d8d3ff;
}

.draft-list-item strong {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.draft-list-item small {
  color: var(--muted);
  font-size: 9px;
}

.empty-drafts, .import-muted {
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}

.import-user {
  border-top: 1px solid var(--line);
  color: var(--ink);
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 17px 7px 0;
  font-size: 11px;
  display: flex;
}

.import-user:first-letter {
  font-weight: 800;
}

.import-user > span {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.import-main {
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 42px clamp(24px, 4vw, 66px) 110px;
  position: relative;
}

.import-toast {
  z-index: 50;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  max-width: 440px;
  padding: 12px 16px;
  font-size: 12px;
  position: fixed;
  top: 20px;
  right: 24px;
  box-shadow: 0 12px 34px #18193221;
}

.import-toast.success {
  color: var(--green);
  border-color: #b8dfcd;
}

.import-toast.error {
  color: var(--red);
  border-color: #edbec4;
}

.import-toast.info {
  color: var(--violet-dark);
  border-color: #c8c2ff;
}

.import-empty {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 90px);
  display: flex;
}

.import-empty-icon {
  background: var(--violet-pale);
  width: 66px;
  height: 66px;
  color: var(--violet);
  border-radius: 20px;
  place-items: center;
  font-size: 30px;
  display: grid;
}

.import-empty h1 {
  letter-spacing: -.045em;
  max-width: 600px;
  margin: 22px 0 10px;
  font-size: clamp(28px, 4vw, 44px);
}

.import-empty p {
  max-width: 570px;
  color: var(--muted);
  margin: 0;
  line-height: 1.8;
}

.import-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 26px;
  display: flex;
}

.import-kicker {
  color: var(--violet);
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 850;
}

.import-header h1 {
  letter-spacing: -.05em;
  max-width: 900px;
  margin: 8px 0 7px;
  font-size: clamp(28px, 3.4vw, 47px);
  line-height: 1.12;
}

.import-header p {
  max-width: 900px;
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.import-header-actions {
  flex-direction: column;
  flex: none;
  align-items: flex-end;
  gap: 12px;
  display: flex;
}

.import-header-actions a {
  color: var(--violet-dark);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.source-detail-tabs {
  z-index: 25;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #f8f8fcf0;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px;
  display: grid;
  position: sticky;
  top: 10px;
  box-shadow: 0 9px 30px #201d4614;
}

.source-detail-tabs button {
  color: #686977;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 15px;
  display: flex;
}

.source-detail-tabs button:hover {
  background: #fff;
}

.source-detail-tabs button.active {
  color: var(--violet-dark);
  background: #fff;
  border-color: #cfc8ff;
  box-shadow: 0 5px 16px #4b39b81a;
}

.source-detail-tabs span {
  font-size: 13px;
  font-weight: 850;
}

.source-detail-tabs small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.source-detail-tabs button.active small {
  color: #756ca7;
}

.source-tab-summary {
  box-shadow: var(--shadow);
  background: #fff;
  border: 1px solid #d8d6e7;
  border-radius: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  display: grid;
  overflow: hidden;
}

.source-tab-summary article {
  border-right: 1px solid var(--line);
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 15px 18px;
  display: flex;
}

.source-tab-summary article:last-child {
  border-right: 0;
}

.source-tab-summary span, .source-tab-summary small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.source-tab-summary strong {
  color: #242536;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.source-tab-summary article.warning strong {
  color: var(--red);
}

.source-tab-summary article.ready strong {
  color: var(--green);
}

.local-tab-actions {
  box-shadow: var(--shadow);
  background: #fff;
  border: 1px solid #d8d6e7;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  display: flex;
}

.local-tab-actions > div {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 180px;
  display: flex;
}

.local-tab-actions strong {
  font-size: 11px;
}

.local-tab-actions span {
  color: var(--muted);
  font-size: 9px;
}

.local-tab-actions button {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 750;
}

.local-tab-actions .ghost-button {
  border: 1px solid var(--line-strong);
  background: #fff;
}

.local-tab-actions .primary-button {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: #fff;
}

.delete-draft-button {
  background: var(--red-pale);
  color: var(--red);
  border: 1px solid #f0b9b9;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 9px;
  font-weight: 750;
}

.delete-draft-button:hover {
  border-color: var(--red);
}

.delete-draft-button:disabled {
  cursor: wait;
  opacity: .55;
}

.draft-status {
  color: #c9c5ff;
  background: #3a3b62;
  border-radius: 99px;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.draft-status.large {
  padding: 7px 12px;
  font-size: 10px;
}

.status-ready_for_review, .status-approved {
  background: var(--green-pale);
  color: var(--green);
}

.status-submitted {
  color: #246da8;
  background: #e6f2ff;
}

.status-imported {
  background: var(--green-pale);
  color: var(--green);
}

.status-draft, .status-failed {
  background: var(--red-pale);
  color: var(--red);
}

.ozon-import-result {
  color: #245d8b;
  background: #f3f8fc;
  border: 1px solid #bfd5e8;
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 15px 17px;
}

.ozon-import-result.imported {
  background: var(--green-pale);
  color: var(--green);
  border-color: #b8dfcd;
}

.ozon-import-result.imported.has-warnings {
  color: #93470d;
  background: #fff8ef;
  border-color: #efc49e;
}

.ozon-import-result.failed {
  background: var(--red-pale);
  color: var(--red);
  border-color: #edbec4;
}

.ozon-import-result-heading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ozon-import-result-heading > div {
  gap: 4px;
  display: grid;
}

.ozon-import-result-heading span, .ozon-import-result > p {
  font-size: 9px;
  line-height: 1.55;
}

.ozon-import-result > p {
  margin: 10px 0 0;
}

.ozon-import-error-list {
  gap: 7px;
  margin-top: 11px;
  display: grid;
}

.ozon-import-error-list article {
  background: #fff;
  border: 1px solid #c93d4c33;
  border-radius: 8px;
  gap: 3px;
  padding: 9px 11px;
  font-size: 9px;
  display: grid;
}

.ozon-import-error-list small {
  color: var(--muted);
}

.import-metrics {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: 12px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 18px;
  display: grid;
  overflow: hidden;
}

.import-metrics article {
  border-right: 1px solid var(--line);
  flex-direction: column;
  min-width: 0;
  padding: 18px 20px;
  display: flex;
}

.import-metrics article:last-child {
  border-right: 0;
}

.import-metrics span, .import-metrics small {
  color: var(--muted);
  font-size: 9px;
}

.import-metrics strong {
  text-overflow: ellipsis;
  margin: 2px 0;
  font-size: 22px;
  overflow: hidden;
}

.workflow-diagnostics {
  box-shadow: var(--shadow);
  background: #fff;
  border: 1px solid #b9dfcd;
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
}

.workflow-diagnostics.has-errors {
  border-color: #efb8c0;
}

.workflow-diagnostics-title {
  background: var(--green-pale);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  display: flex;
}

.workflow-diagnostics.has-errors .workflow-diagnostics-title {
  background: var(--red-pale);
}

.workflow-diagnostics-title > div {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.workflow-diagnostics-title strong {
  color: var(--green);
  font-size: 12px;
}

.workflow-diagnostics.has-errors .workflow-diagnostics-title strong {
  color: var(--red);
}

.workflow-diagnostics-title span {
  color: var(--muted);
  font-size: 9px;
}

.workflow-diagnostics-title > span:last-child {
  color: var(--green);
  background: #ffffffb3;
  border-radius: 99px;
  padding: 5px 9px;
  font-weight: 800;
}

.workflow-diagnostics.has-errors .workflow-diagnostics-title > span:last-child {
  color: var(--red);
}

.workflow-issue-list {
  background: var(--line);
  gap: 1px;
  display: grid;
}

.workflow-issue-list article {
  background: #fff;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 6px 14px;
  padding: 14px 18px;
  display: grid;
}

.workflow-issue-list strong {
  color: var(--red);
  font-size: 10px;
}

.workflow-issue-list code {
  overflow-wrap: anywhere;
  color: #6f2630;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.workflow-issue-list p {
  color: var(--muted);
  grid-column: 2;
  margin: 0;
  font-size: 9px;
  line-height: 1.55;
}

.workflow-log {
  border-top: 1px solid var(--line);
  padding: 10px 18px;
  font-size: 10px;
}

.workflow-log summary {
  cursor: pointer;
  color: var(--violet-dark);
  font-weight: 750;
}

.workflow-log > div {
  border-left: 2px solid var(--line);
  margin-top: 10px;
  padding-left: 12px;
}

.workflow-log article {
  border-bottom: 1px solid #efeee9;
  grid-template-columns: 145px 130px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  display: grid;
}

.workflow-log time {
  color: var(--muted);
  font-size: 9px;
}

.workflow-log pre {
  white-space: pre-wrap;
  max-height: 160px;
  margin: 0;
  font-size: 9px;
  overflow: auto;
}

.import-card {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: 13px;
  margin-top: 18px;
  overflow: hidden;
}

.import-card-title {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  display: flex;
}

.import-card-title > div {
  align-items: center;
  gap: 11px;
  display: flex;
}

.import-card-title > div > span {
  background: var(--violet-pale);
  width: 27px;
  height: 27px;
  color: var(--violet);
  border-radius: 8px;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}

.import-card-title h2 {
  margin: 0;
  font-size: 15px;
}

.import-card-title > small {
  color: var(--muted);
  font-size: 10px;
}

.import-image-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding: 22px;
  display: grid;
}

.import-image-limit-notice {
  color: #855b08;
  background: #fff8e8;
  border: 1px solid #f2d49a;
  border-radius: 8px;
  margin: 16px 22px 0;
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.6;
}

.import-image {
  border: 1px solid var(--line);
  background: #f5f5f1;
  border-radius: 10px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.import-image img, .image-failed {
  aspect-ratio: 1;
  object-fit: cover;
  place-items: center;
  width: 100%;
  display: grid;
}

.image-failed {
  color: var(--red);
  font-size: 11px;
}

.import-image > div:last-of-type {
  flex-direction: column;
  padding: 8px 9px;
  display: flex;
}

.import-image span {
  color: var(--violet-dark);
  font-size: 9px;
  font-weight: 800;
}

.import-image small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.import-image p {
  color: var(--red);
  margin: 0;
  padding: 0 9px 9px;
  font-size: 8px;
}

.small-button {
  border: 1px solid var(--line-strong);
  color: var(--violet-dark);
  background: #fff;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 700;
}

.translation-warning {
  background: var(--red-pale);
  color: var(--red);
  border-radius: 8px;
  margin: 18px 22px 0;
  padding: 10px 12px;
  font-size: 11px;
}

.translation-pair {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 22px 20px;
  display: grid;
}

.translation-pair.featured {
  padding-top: 22px;
}

.translation-pair label, .import-field {
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.translation-pair label > span, .import-field > span {
  color: #555660;
  font-size: 10px;
  font-weight: 750;
}

.translation-pair textarea, .translation-row textarea, .import-field input, .import-field select, .import-field textarea {
  border: 1px solid var(--line);
  background: #fafaf8;
  border-radius: 8px;
  width: 100%;
  padding: 10px 11px;
  font-size: 11px;
  line-height: 1.6;
  transition: all .14s;
}

.translation-pair textarea:focus, .translation-row textarea:focus, .import-field input:focus, .import-field select:focus, .import-field textarea:focus {
  background: #fff;
  border-color: #a79cff;
  box-shadow: 0 0 0 3px #715cff14;
}

.translation-pair textarea[readonly] {
  color: #65666f;
  background: #f0f0ec;
}

.translation-list {
  border-top: 1px solid var(--line);
}

.translation-row {
  border-bottom: 1px solid #efeee9;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 13px 22px;
  display: grid;
}

.translation-row:last-child {
  border-bottom: 0;
}

.translation-row > span {
  width: fit-content;
  color: var(--violet-dark);
  background: #f0efff;
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 8px;
  font-weight: 800;
}

.translation-row p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.sku-table-wrap {
  padding: 8px 22px 18px;
  overflow-x: auto;
}

.source-fact-grid {
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.source-fact-grid article {
  border-right: 1px solid var(--line);
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 15px 20px;
  display: flex;
}

.source-fact-grid article:last-child {
  border-right: 0;
}

.source-fact-grid span, .source-fact-grid small {
  color: var(--muted);
  font-size: 9px;
}

.source-fact-grid strong {
  text-overflow: ellipsis;
  font-size: 11px;
  overflow: hidden;
}

.source-price-tiers {
  border-bottom: 1px solid var(--line);
  background: #fafaf8;
  align-items: center;
  gap: 22px;
  padding: 14px 22px;
  display: flex;
}

.source-price-tiers > strong {
  flex: none;
  font-size: 10px;
}

.source-price-tiers > div {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.source-price-tiers article {
  background: #fff;
  border: 1px solid #dedce9;
  border-radius: 7px;
  align-items: baseline;
  gap: 7px;
  padding: 6px 9px;
  display: flex;
}

.source-price-tiers span {
  color: var(--muted);
  font-size: 9px;
}

.source-price-tiers article strong {
  color: var(--violet-dark);
  font-size: 11px;
}

.sku-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 10px;
}

.sku-table th, .sku-table td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 10px 8px;
}

.sku-table th {
  color: var(--muted);
  font-size: 9px;
}

.source-variant-editor {
  background: #fcfbff;
  border: 1px solid #d9d5ff;
  border-radius: 11px;
  overflow: hidden;
}

.source-variant-heading, .variant-mapping-title {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 15px 17px;
  display: flex;
}

.source-variant-heading > div, .variant-mapping-title {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.source-variant-heading strong, .variant-mapping-title strong {
  font-size: 11px;
}

.source-variant-heading span, .variant-mapping-title span {
  color: var(--muted);
  font-size: 9px;
}

.source-variant-editor > .import-field {
  margin: 0 17px 16px;
}

.source-variant-editor .field-error {
  color: #a83b27;
}

.variant-mapping-list {
  background: #fff;
  border-top: 1px solid #e3e0f5;
  border-bottom: 1px solid #e3e0f5;
}

.variant-mapping-title {
  align-items: flex-start;
}

.variant-mapping-card {
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(230px, .8fr) minmax(0, 2fr);
  gap: 16px;
  padding: 14px 17px;
  display: grid;
}

.variant-value-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.variant-sku-table {
  padding-top: 16px;
}

.variant-sku-table table {
  min-width: 850px;
}

.variant-sku-table td:first-child strong, .variant-sku-table td:first-child small {
  max-width: 260px;
  display: block;
}

.variant-sku-table td:first-child small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 8px;
}

.variant-sku-table input, .variant-sku-table textarea {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  width: 100%;
  padding: 8px 9px;
  font-size: 10px;
}

.raw-manifest {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 22px 22px;
  padding: 10px 12px;
  font-size: 10px;
}

.raw-manifest summary {
  cursor: pointer;
  color: var(--violet-dark);
  font-weight: 700;
}

.raw-manifest pre {
  white-space: pre-wrap;
  max-height: 360px;
  overflow: auto;
}

.ozon-review-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 22px;
  display: grid;
}

.ozon-review-grid > .full {
  grid-column: 1 / -1;
}

.pricing-calculator {
  background: linear-gradient(145deg, #faf9ff, #fff);
  border: 1px solid #d9d5ff;
  border-radius: 11px;
  padding: 18px;
}

.pricing-heading {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  display: flex;
}

.pricing-heading > div {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.pricing-heading strong {
  font-size: 13px;
}

.pricing-heading span, .pricing-calculator > p {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.logistics-template-control {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(0, 2fr);
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.logistics-template-summary {
  background: var(--green-pale);
  color: var(--green);
  border: 1px solid #c9e8da;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  display: flex;
}

.logistics-template-summary.warning {
  color: #9a4f12;
  background: #fff8ef;
  border-color: #f0c9a8;
}

.logistics-template-summary span {
  font-size: 9px;
  line-height: 1.45;
}

.logistics-template-summary strong {
  flex: none;
  font-size: 10px;
}

.pricing-fields {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.pricing-fields.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.commission-rate-panel {
  background: #f7fcf9;
  border: 1px solid #c9e8da;
  border-radius: 10px;
  margin-top: 14px;
  padding: 0 12px 12px;
}

.commission-rate-panel.warning {
  background: #fffaf3;
  border-color: #f0c9a8;
}

.commission-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.commission-resolution {
  color: var(--green);
  border-top: 1px solid #d9ece2;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  font-size: 8px;
  display: flex;
}

.commission-resolution strong {
  font-size: 9px;
}

.commission-resolution a {
  color: var(--violet-dark);
  margin-left: auto;
  font-weight: 750;
  text-decoration: none;
}

.commission-resolution.warning, .commission-resolution.manual {
  color: #93470d;
  border-color: #f0dcc6;
  flex-direction: column;
  align-items: flex-start;
}

.pricing-section-title {
  border-bottom: 1px solid #ebe9f7;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding-bottom: 7px;
  display: flex;
}

.pricing-section-title strong {
  color: var(--violet-dark);
  font-size: 10px;
}

.pricing-section-title span {
  color: var(--muted);
  font-size: 8px;
}

.pricing-model-warning {
  color: #93470d;
  background: #fff8ef;
  border: 1px solid #efc49e;
  border-radius: 8px;
  align-items: baseline;
  gap: 9px;
  margin-top: 12px;
  padding: 9px 11px;
  display: flex;
}

.pricing-model-warning strong {
  flex: none;
  font-size: 9px;
}

.pricing-model-warning span {
  font-size: 8px;
  line-height: 1.5;
}

.pricing-result {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
  display: grid;
}

.pricing-result article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  display: flex;
}

.pricing-result article span {
  color: var(--muted);
  font-size: 8px;
}

.pricing-result article strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.pricing-result article small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.pricing-result article.minimum {
  color: #93470d;
  background: #fff8ef;
  border-color: #efc49e;
}

.pricing-result article.target {
  background: var(--green-pale);
  color: var(--green);
  border-color: #b9ddcd;
}

.pricing-result article.recommended {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-color: #afa5ff;
}

.pricing-result article.buyer-total {
  color: var(--violet-dark);
  border-color: #afa5ff;
}

.pricing-result article.customs-free {
  background: var(--green-pale);
  color: var(--green);
  border-color: #b9ddcd;
}

.pricing-result article.customs-due {
  color: #93470d;
  background: #fff8ef;
  border-color: #efc49e;
}

.pricing-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.pricing-actions button {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: #fff;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 9px;
  font-weight: 750;
}

.pricing-actions button:first-child {
  color: var(--violet-dark);
  background: #fff;
}

.pricing-actions button:disabled {
  opacity: .45;
}

.pricing-scenarios {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  margin-top: 14px;
  padding: 12px;
}

.pricing-scenarios > div:first-child {
  align-items: baseline;
  gap: 9px;
  margin-bottom: 9px;
  display: flex;
}

.pricing-scenarios strong {
  font-size: 10px;
}

.pricing-scenarios span {
  color: var(--muted);
  font-size: 8px;
}

.pricing-scenario-table-wrap {
  overflow-x: auto;
}

.pricing-scenarios table {
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
  font-size: 8px;
}

.pricing-scenarios th, .pricing-scenarios td {
  border-top: 1px solid var(--line);
  text-align: left;
  padding: 8px;
}

.pricing-scenarios thead th {
  color: var(--muted);
  border-top: 0;
  font-weight: 650;
}

.pricing-scenarios td small {
  color: var(--muted);
  margin-top: 2px;
  display: block;
}

.pricing-scenarios td.negative {
  color: var(--red);
  font-weight: 750;
}

.pricing-scenarios td.positive {
  color: var(--green);
  font-weight: 750;
}

.pricing-calculator > p {
  margin: 12px 0 0;
}

.source-safety-panel {
  background: #fbfaff;
  border: 1px solid #d9d5ef;
  border-radius: 12px;
  margin-top: 4px;
  padding: 16px;
}

.safety-review-modal {
  width: min(920px, 100%);
  max-height: min(90vh, 900px);
  overflow-y: auto;
}

.safety-review-modal .source-safety-panel {
  margin-top: 0;
}

.safety-review-issues {
  color: #93470d;
  background: #fff8ef;
  border: 1px solid #efc49e;
  border-radius: 10px;
  margin-top: 14px;
  padding: 12px 14px;
}

.safety-review-issues strong {
  font-size: 10px;
}

.safety-review-issues ol {
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 9px;
  line-height: 1.55;
  display: grid;
}

.source-safety-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.source-safety-heading > div {
  gap: 4px;
  display: grid;
}

.source-safety-heading strong {
  color: var(--violet-dark);
  font-size: 12px;
}

.source-safety-heading span, .source-safety-heading em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.source-safety-heading em {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: 999px;
  flex: none;
  padding: 5px 8px;
  font-weight: 750;
}

.source-safety-status {
  border: 1px solid;
  border-radius: 9px;
  gap: 4px;
  margin-top: 12px;
  padding: 10px 12px;
  display: grid;
}

.source-safety-status strong {
  font-size: 10px;
}

.source-safety-status span {
  font-size: 8px;
  line-height: 1.55;
}

.source-safety-status.prohibited {
  color: var(--red);
  background: #fff2f2;
  border-color: #f2b5b5;
}

.source-safety-status.required {
  color: #93470d;
  background: #fff8ef;
  border-color: #efc49e;
}

.source-safety-status.clear {
  background: var(--green-pale);
  color: var(--green);
  border-color: #b9ddcd;
}

.source-safety-match-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.source-safety-match-list article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  gap: 5px;
  padding: 10px;
  display: grid;
}

.source-safety-match-list article.prohibited {
  border-color: #f2b5b5;
}

.source-safety-match-list article.requires_document {
  border-color: #efc49e;
}

.source-safety-match-list article > div {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.source-safety-match-list strong {
  font-size: 9px;
}

.pricing-exchange-status {
  background: var(--green-pale);
  color: var(--green);
  border: 1px solid #b9ddcd;
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  margin-top: 12px;
  padding: 9px 11px;
  font-size: 9px;
  line-height: 1.5;
  display: grid;
}

.pricing-exchange-status.warning {
  color: #93470d;
  background: #fff8ef;
  border-color: #efc49e;
}

.pricing-exchange-status a {
  color: inherit;
  white-space: nowrap;
  font-weight: 750;
  text-decoration: none;
}

.pricing-exchange-status small {
  grid-column: 1 / -1;
  font-size: 8px;
}

.source-safety-match-list article > div span {
  color: var(--muted);
  background: #f3f1fa;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 7px;
  font-weight: 750;
}

.source-safety-match-list p, .source-safety-match-list small {
  color: var(--muted);
  margin: 0;
  font-size: 8px;
  line-height: 1.5;
}

.source-safety-documents {
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  align-items: end;
  gap: 12px;
  margin-top: 12px;
  display: grid;
}

.source-safety-confirmation {
  color: #7d430f;
  background: #fff8ef;
  border: 1px solid #efc49e;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  padding: 8px 10px;
  font-size: 8px;
  line-height: 1.45;
  display: flex;
}

.source-safety-confirmation input {
  width: 15px;
  height: 15px;
  accent-color: var(--violet);
}

.source-safety-rules {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 10px;
}

.source-safety-rules summary {
  cursor: pointer;
  color: var(--violet-dark);
  font-size: 8px;
  font-weight: 750;
}

.source-safety-table-wrap {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  max-height: 420px;
  margin-top: 9px;
  overflow: auto;
}

.source-safety-rules table {
  border-collapse: collapse;
  width: 100%;
  font-size: 8px;
}

.source-safety-rules th, .source-safety-rules td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  padding: 8px;
}

.source-safety-rules td small {
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
  display: block;
}

.source-safety-rules thead th {
  z-index: 1;
  color: var(--muted);
  white-space: nowrap;
  background: #f7f5fc;
  position: sticky;
  top: 0;
}

.current-price-comparison {
  color: var(--violet-dark);
  background: #faf9ff;
  border: 1px solid #d9d5ff;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 9px;
  line-height: 1.55;
  display: flex;
}

.current-price-comparison strong {
  flex: none;
  font-size: 10px;
}

.current-price-comparison.empty, .current-price-comparison.warning {
  color: #93470d;
  background: #fff8ef;
  border-color: #efc49e;
}

.customs-pricing-notice {
  border: 1px solid var(--line);
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 9px;
  line-height: 1.55;
  display: flex;
}

.customs-pricing-notice strong {
  flex: none;
  font-size: 10px;
}

.customs-pricing-notice.free {
  background: var(--green-pale);
  color: var(--green);
  border-color: #b9ddcd;
}

.customs-pricing-notice.due, .customs-pricing-notice.warning {
  color: #93470d;
  background: #fff8ef;
  border-color: #efc49e;
}

.source-category-attributes {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}

.source-category-notice {
  border-radius: 7px;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 9px;
}

.source-category-notice.success {
  background: var(--green-pale);
  color: var(--green);
}

.source-category-notice.error {
  background: var(--red-pale);
  color: var(--red);
}

.ozon-json-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 9px;
}

.ozon-json-preview summary {
  cursor: pointer;
  color: var(--violet-dark);
  font-weight: 700;
}

.ozon-json-preview pre {
  white-space: pre-wrap;
  max-height: 260px;
  overflow: auto;
}

.import-field.full {
  grid-column: 1 / -1;
}

.import-field small {
  color: var(--muted);
  margin-top: 4px;
  font-size: 9px;
  display: block;
}

.submission-readiness {
  background: #f2fbf6;
  border: 1px solid #b9dccd;
  border-radius: 13px;
  margin-top: 18px;
  padding: 15px 17px;
}

.submission-readiness.blocked {
  background: #fff7f4;
  border-color: #efc4ba;
}

.submission-readiness-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.submission-readiness-heading > div {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.submission-readiness-heading strong {
  font-size: 12px;
}

.submission-readiness-heading span, .submission-readiness p, .submission-readiness li {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.submission-readiness-heading em {
  color: var(--green);
  background: #dff4e8;
  border-radius: 999px;
  flex: none;
  padding: 4px 8px;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.submission-readiness.blocked .submission-readiness-heading em {
  color: #a13e2e;
  background: #fee5df;
}

.submission-readiness ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 28px;
  margin: 12px 0 0;
  padding-left: 20px;
  display: grid;
}

.submission-readiness > p {
  margin: 10px 0 0;
}

.submission-readiness .unsaved, .submission-readiness .update-hint {
  color: #7a5b17;
  border-top: 1px solid #65667729;
  padding-top: 9px;
  font-weight: 650;
}

.submission-readiness .update-hint {
  color: var(--violet-dark);
}

.review-actions {
  z-index: 20;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fffffff0;
  border: 1px solid #dbdad4;
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  display: flex;
  position: sticky;
  bottom: 14px;
  box-shadow: 0 15px 45px #191a3a24;
}

.review-actions > div {
  flex-direction: column;
  flex: 1;
  min-width: 180px;
  display: flex;
}

.review-actions > div strong {
  font-size: 11px;
}

.review-actions > div span {
  color: var(--muted);
  font-size: 9px;
}

.review-actions button {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 750;
}

.review-actions .ghost-button {
  border: 1px solid var(--line-strong);
  background: #fff;
}

.approve-button {
  background: var(--green-pale);
  color: var(--green);
  border: 1px solid #a8d8c3;
}

.review-actions .primary-button {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: #fff;
}

@media (max-width: 1100px) {
  .import-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .ozon-review-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-fields, .pricing-result, .exchange-conversion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .import-shell {
    display: block;
  }

  .import-sidebar {
    height: auto;
    position: relative;
  }

  .draft-list {
    max-height: 270px;
  }

  .import-user {
    display: none;
  }

  .import-main {
    padding: 28px 14px 90px;
  }

  .import-header, .import-card-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .import-header-actions {
    align-items: flex-start;
  }

  .source-detail-tabs button {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .source-tab-summary {
    grid-template-columns: 1fr 1fr;
  }

  .source-tab-summary article:nth-child(2) {
    border-right: 0;
  }

  .source-tab-summary article:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .local-tab-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .import-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .import-metrics article:nth-child(2) {
    border-right: 0;
  }

  .translation-pair, .translation-row, .ozon-review-grid {
    grid-template-columns: 1fr;
  }

  .pricing-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .variant-mapping-card, .variant-value-grid, .logistics-template-control {
    grid-template-columns: 1fr;
  }

  .logistics-template-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .pricing-fields, .pricing-result {
    grid-template-columns: 1fr;
  }

  .exchange-topbar, .exchange-alert, .exchange-card-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .exchange-summary, .exchange-rate-grid, .exchange-calculator, .exchange-conversion-grid, .tool-calculator-layout, .tool-field-grid, .tool-price-results {
    grid-template-columns: 1fr;
  }

  .tool-result-column {
    position: static;
  }

  .pricing-section-title, .pricing-model-warning, .pricing-scenarios > div:first-child, .pricing-actions, .source-safety-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .source-safety-match-list, .source-safety-documents, .submission-readiness ol {
    grid-template-columns: 1fr;
  }

  .submission-readiness-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .category-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .category-modal-footer button {
    width: 100%;
  }

  .pricing-actions button {
    width: 100%;
    min-height: 40px;
  }

  .workflow-issue-list article, .workflow-log article {
    grid-template-columns: 1fr;
  }

  .workflow-issue-list p {
    grid-column: 1;
  }

  .source-fact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .source-fact-grid article:nth-child(2) {
    border-right: 0;
  }

  .source-price-tiers {
    flex-direction: column;
    align-items: flex-start;
  }

  .translation-row {
    gap: 8px;
  }

  .review-actions {
    flex-direction: column;
    align-items: stretch;
    position: static;
  }

  .review-actions button {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .product-sidebar .nav-item, .product-sidebar .nav-item:not(.active) {
    display: flex;
  }
}

.workspace-chrome {
  min-height: 100vh;
}

.workspace-tabbar {
  z-index: 60;
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fffffff7;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 52px;
  margin-left: 238px;
  padding: 7px 14px;
  transition: margin-left .18s;
  display: flex;
  position: sticky;
  top: 0;
  box-shadow: 0 5px 18px #191a3a0b;
}

.route-source-imports .workspace-tabbar {
  margin-left: 292px;
}

.workspace-menu-toggle {
  border: 1px solid var(--line-strong);
  color: #171820;
  background: #fff;
  border-radius: 8px;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 18px;
  font-weight: 750;
  display: grid;
}

.workspace-menu-toggle:hover {
  background: var(--violet-pale);
  border-color: #bdb7ee;
}

.workspace-tabs {
  scrollbar-width: thin;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
  overflow-x: auto;
}

.workspace-tab {
  color: #36373d;
  background: #f7f7f8;
  border: 1px solid #e0e0e5;
  border-radius: 8px;
  flex: none;
  align-items: center;
  min-width: 120px;
  max-width: 190px;
  height: 36px;
  display: flex;
}

.workspace-tab.active {
  color: #111218;
  background: #fff;
  border-color: #cbc5fa;
  box-shadow: 0 3px 12px #372d7c17;
}

.workspace-tab > a {
  min-width: 0;
  color: inherit;
  flex: 1;
  align-items: center;
  gap: 8px;
  padding: 0 7px 0 10px;
  font-size: 11px;
  font-weight: 680;
  text-decoration: none;
  display: flex;
}

.workspace-tab > a > span:last-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.workspace-tab-dot {
  background: #b7b7be;
  border-radius: 50%;
  flex: none;
  width: 6px;
  height: 6px;
}

.workspace-tab.active .workspace-tab-dot {
  background: var(--violet);
}

.workspace-tab > button {
  color: #777880;
  background: none;
  border: 0;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-right: 3px;
  font-size: 16px;
  line-height: 1;
  display: grid;
}

.workspace-tab > button:hover {
  color: #000;
  background: #ececf0;
}

.workspace-tab-limit {
  color: var(--muted);
  white-space: nowrap;
  flex: none;
  font-size: 9px;
}

.workspace-guide-link {
  color: #4f3ed0;
  background: linear-gradient(135deg, #f3f0ff, #fff);
  border: 1px solid #cfc7ff;
  border-radius: 9px;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px 0 7px;
  font-size: 10px;
  text-decoration: none;
  display: inline-flex;
  box-shadow: 0 5px 15px #5a48d01a;
}

.workspace-guide-link > span {
  color: #fff;
  background: #715cff;
  border-radius: 7px;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 850;
  display: grid;
}

.workspace-guide-link > strong {
  white-space: nowrap;
  font-weight: 780;
}

.workspace-guide-link:hover, .workspace-guide-link.active {
  color: #302399;
  background: #ebe7ff;
  border-color: #8f80f5;
}

.workspace-account-link {
  color: #34353d;
  background: #fff;
  border: 1px solid #d7d8de;
  border-radius: 9px;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px 0 7px;
  font-size: 10px;
  text-decoration: none;
  display: inline-flex;
}

.workspace-account-link > span {
  color: #fff;
  background: #202127;
  border-radius: 7px;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.workspace-account-link > strong {
  white-space: nowrap;
}

.workspace-account-link:hover, .workspace-account-link.active {
  background: #f4f4f6;
  border-color: #999ba5;
}

.workspace-page > .import-shell .import-sidebar {
  height: calc(100vh - 52px);
  top: 52px;
}

.workspace-page .source-detail-tabs {
  top: 62px;
}

.workspace-page .import-toast {
  top: 68px;
}

.workspace-task-monitor-layer {
  display: contents;
}

.workspace-task-monitor-layer .image-task-monitor {
  z-index: 120;
  background: #fff;
  border-radius: 15px;
  width: min(520px, 100vw - 40px);
  max-width: none;
  max-height: min(68vh, 620px);
  margin: 0;
  position: fixed;
  bottom: 20px;
  right: 20px;
  overflow: hidden;
  box-shadow: 0 24px 70px #261a4e3d;
}

.workspace-task-monitor-layer .image-task-monitor-list {
  max-height: min(54vh, 500px);
  overflow-y: auto;
}

.workspace-task-monitor-layer .image-task-monitor-list article {
  grid-template-columns: minmax(0, 1fr) 112px 42px 28px;
}

.workspace-task-notification {
  z-index: 140;
  width: min(440px, 100vw - 32px);
  color: var(--ink);
  background: #fff;
  border: 1px solid #c8c2ff;
  border-radius: 12px;
  grid-template-columns: 30px minmax(0, 1fr) 26px;
  align-items: start;
  gap: 10px;
  padding: 13px;
  animation: .22s ease-out toast-in;
  display: grid;
  position: fixed;
  top: 68px;
  right: 24px;
  box-shadow: 0 18px 48px #1c1d2f2e;
}

.workspace-task-notification > span {
  width: 30px;
  height: 30px;
  color: var(--violet-dark);
  background: #eeeaff;
  border-radius: 9px;
  place-items: center;
  font-size: 14px;
  font-weight: 850;
  display: grid;
}

.workspace-task-notification.success {
  border-color: #b8dfcd;
}

.workspace-task-notification.success > span {
  color: var(--green);
  background: #e8f7ef;
}

.workspace-task-notification.error {
  border-color: #edbec4;
}

.workspace-task-notification.error > span {
  color: var(--red);
  background: #fff0f1;
}

.workspace-task-notification strong {
  margin-bottom: 3px;
  font-size: 12px;
  display: block;
}

.workspace-task-notification p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.workspace-task-notification > button {
  color: #7f7d87;
  background: none;
  border: 0;
  border-radius: 7px;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 17px;
  display: grid;
}

.workspace-task-notification > button:hover {
  color: var(--ink);
  background: #f0eef7;
}

.workspace-chrome.is-menu-collapsed .workspace-tabbar {
  margin-left: 72px;
}

.workspace-chrome.is-menu-collapsed .sidebar {
  align-items: stretch;
  width: 72px;
  padding: 21px 10px 16px;
  overflow: visible;
}

.workspace-chrome.is-menu-collapsed .main-area {
  margin-left: 72px;
}

.workspace-chrome.is-menu-collapsed .sidebar .brand {
  justify-content: center;
  padding: 0 0 22px;
}

.workspace-chrome.is-menu-collapsed .sidebar .brand-mark {
  width: 34px;
  height: 34px;
}

.workspace-chrome.is-menu-collapsed .sidebar .brand > div, .workspace-chrome.is-menu-collapsed .sidebar .api-note, .workspace-chrome.is-menu-collapsed .sidebar .user-chip > div, .workspace-chrome.is-menu-collapsed .sidebar .user-arrow, .workspace-chrome.is-menu-collapsed .product-user strong {
  display: none;
}

.workspace-chrome.is-menu-collapsed .sidebar .nav-list {
  width: 100%;
}

.workspace-chrome.is-menu-collapsed .sidebar .nav-item {
  justify-content: center;
  gap: 0;
  padding: 0;
  font-size: 0;
  position: relative;
}

.workspace-chrome.is-menu-collapsed .sidebar .nav-symbol {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.workspace-chrome.is-menu-collapsed .sidebar .nav-count {
  width: 16px;
  height: 16px;
  font-size: 8px;
  position: absolute;
  top: 1px;
  right: 1px;
}

.workspace-chrome.is-menu-collapsed .sidebar .product-menu-chevron, .workspace-chrome.is-menu-collapsed .sidebar .product-menu-label {
  display: none;
}

.workspace-chrome.is-menu-collapsed .sidebar .product-menu-submenu {
  z-index: 80;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  gap: 5px;
  width: 188px;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  box-shadow: 0 14px 34px #1c1d2f24;
}

.workspace-chrome.is-menu-collapsed .sidebar .product-menu-subitem {
  font-size: 11px;
}

.workspace-chrome.is-menu-collapsed .product-user {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.workspace-chrome.is-menu-collapsed .import-shell {
  grid-template-columns: 72px minmax(0, 1fr);
}

.workspace-chrome.is-menu-collapsed .import-sidebar {
  align-items: stretch;
  padding: 17px 10px 14px;
  overflow: visible;
}

.workspace-chrome.is-menu-collapsed .import-sidebar .import-brand {
  justify-content: center;
  padding: 0 0 17px;
}

.workspace-chrome.is-menu-collapsed .import-sidebar .import-brand > div, .workspace-chrome.is-menu-collapsed .import-sidebar .direct-collection-card, .workspace-chrome.is-menu-collapsed .import-sidebar .legacy-zip-import, .workspace-chrome.is-menu-collapsed .import-sidebar .service-health, .workspace-chrome.is-menu-collapsed .import-sidebar .draft-list-heading, .workspace-chrome.is-menu-collapsed .import-sidebar .draft-list, .workspace-chrome.is-menu-collapsed .import-sidebar .import-user {
  display: none;
}

.workspace-chrome.is-menu-collapsed .import-back-link {
  place-items: center;
  min-height: 44px;
  margin: 0 0 6px;
  padding: 0;
  font-size: 0;
  display: grid;
}

.workspace-chrome.is-menu-collapsed .import-back-link:before {
  color: #202127;
  font-size: 14px;
}

.workspace-chrome.is-menu-collapsed .import-back-link:first-of-type:before {
  content: "▣";
}

.workspace-chrome.is-menu-collapsed .import-back-link:nth-of-type(2):before {
  content: "＋";
}

.workspace-chrome.is-menu-collapsed .import-back-link:nth-of-type(3):before {
  content: "¥";
}

@media (max-width: 680px) {
  .workspace-tabbar, .route-source-imports .workspace-tabbar, .workspace-chrome.is-menu-collapsed .workspace-tabbar {
    margin-left: 0;
  }

  .workspace-tabbar {
    padding-left: 9px;
    padding-right: 9px;
  }

  .workspace-tab {
    min-width: 112px;
  }

  .workspace-tab-limit {
    display: none;
  }

  .workspace-guide-link {
    justify-content: center;
    width: 34px;
    padding: 0;
  }

  .workspace-guide-link > strong {
    display: none;
  }

  .workspace-account-link {
    justify-content: center;
    width: 34px;
    padding: 0;
  }

  .workspace-account-link > strong {
    display: none;
  }

  .workspace-page > .import-shell .import-sidebar {
    height: auto;
    top: auto;
  }

  .workspace-chrome.is-menu-collapsed .sidebar, .workspace-chrome.is-menu-collapsed .import-sidebar {
    display: none;
  }

  .workspace-chrome.is-menu-collapsed .main-area {
    margin-left: 0;
  }

  .workspace-chrome.is-menu-collapsed .import-shell {
    display: block;
  }

  .workspace-task-monitor-layer .image-task-monitor {
    width: calc(100vw - 20px);
    margin: 0;
    bottom: 10px;
    right: 10px;
  }

  .workspace-task-monitor-layer .image-task-monitor-list article {
    grid-template-columns: minmax(0, 1fr) 42px 28px;
  }

  .workspace-task-monitor-layer .image-task-monitor-progress {
    grid-area: 2 / 1 / auto / -1;
  }

  .workspace-task-notification {
    width: calc(100vw - 20px);
    top: 62px;
    right: 10px;
  }
}

.listing-editor-layout {
  grid-template-columns: minmax(0, 1fr) 126px;
  align-items: start;
  gap: 22px;
  padding: 22px;
  display: grid;
}

.source-listing-form.ozon-review-grid {
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 0;
  display: flex;
}

.source-listing-form > .listing-basic-section {
  order: 1;
}

.source-listing-form > .listing-attributes-section {
  order: 2;
}

.source-listing-form > .listing-variants-section {
  order: 3;
}

.source-listing-form > .listing-pricing-section {
  order: 4;
}

.source-listing-form > .listing-safety-section {
  order: 5;
}

.listing-editor-section, .listing-variants-section, .listing-pricing-section {
  background: #fff;
  border: 1px solid #e2e1e8;
  border-radius: 12px;
  min-width: 0;
  scroll-margin-top: 18px;
}

.listing-editor-section {
  padding: 20px;
}

.listing-section-heading, .source-variant-heading {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  display: flex;
}

.listing-section-heading > div, .listing-section-heading > div > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.listing-section-heading > div > span {
  background: var(--violet-pale);
  width: 30px;
  height: 30px;
  color: var(--violet-dark);
  border-radius: 8px;
  flex: none;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}

.listing-section-heading > div > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.listing-section-heading h3, .listing-section-heading p {
  margin: 0;
}

.listing-section-heading h3 {
  font-size: 15px;
}

.listing-section-heading p, .listing-section-heading > em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.listing-section-heading > em {
  background: #f3f2f8;
  border-radius: 999px;
  padding: 5px 8px;
}

.listing-basic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  display: grid;
}

.listing-basic-grid > .full, .package-dimensions.full {
  grid-column: 1 / -1;
}

.required-mark, .required-star {
  color: #da4056;
  font-style: normal;
  font-weight: 900;
}

.required-star {
  margin-right: 3px;
}

.unit-input {
  border: 1px solid var(--line);
  background: #fafaf8;
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  display: grid;
  overflow: hidden;
}

.unit-input input {
  background: none;
  border: 0;
  border-radius: 0;
  min-width: 0;
}

.unit-input strong {
  border-left: 1px solid var(--line);
  color: #5b5c66;
  align-items: center;
  padding: 0 11px;
  font-size: 10px;
  display: flex;
}

.import-field .unit-warning, .package-dimensions > .unit-warning {
  color: #c43d50;
  font-weight: 700;
}

.package-dimensions {
  grid-template-columns: 110px repeat(3, minmax(0, 1fr)) 120px;
  align-items: end;
  gap: 10px;
  display: grid;
}

.package-dimensions > span {
  color: #555660;
  align-self: center;
  font-size: 10px;
  font-weight: 750;
}

.package-dimensions > label {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.package-dimensions > label > small {
  color: var(--muted);
  font-size: 9px;
}

.listing-attributes-section .source-category-attributes {
  border: 0;
  padding: 0;
}

.listing-attributes-section .attribute-area {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 18px;
}

.listing-attributes-section .attribute-heading h4 {
  margin: 0 0 4px;
  font-size: 13px;
}

.listing-attributes-section .priority-attribute {
  background: #fbfaff;
  border-color: #d9d5ff;
  order: -1;
}

.listing-attributes-section > .ozon-json-preview {
  margin-top: 16px;
}

.listing-pricing-section {
  overflow: hidden;
}

.listing-pricing-section > summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 17px 19px;
  list-style: none;
  display: flex;
}

.listing-pricing-section > summary::-webkit-details-marker {
  display: none;
}

.listing-pricing-section > summary > span {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.listing-pricing-section > summary strong {
  font-size: 12px;
}

.listing-pricing-section > summary small {
  color: var(--muted);
  font-size: 9px;
}

.listing-pricing-section > summary em {
  color: var(--violet-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.listing-pricing-section[open] > summary {
  border-bottom: 1px solid var(--line);
}

.listing-pricing-section > .pricing-calculator {
  border: 0;
  border-radius: 0;
}

.listing-section-nav {
  border-left: 1px solid var(--line);
  flex-direction: column;
  padding-left: 14px;
  display: flex;
  position: sticky;
  top: 20px;
}

.listing-section-nav span {
  color: #9a9aa3;
  letter-spacing: .08em;
  margin-bottom: 8px;
  font-size: 8px;
  font-weight: 800;
}

.listing-section-nav a {
  color: #777883;
  border-left: 2px solid #0000;
  margin-left: -15px;
  padding: 7px 0 7px 14px;
  font-size: 9px;
  text-decoration: none;
}

.listing-section-nav a:hover {
  border-left-color: var(--violet);
  color: var(--violet-dark);
}

.listing-variants-section {
  overflow: hidden;
}

.listing-variants-section .source-variant-editor {
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.listing-variants-section .source-variant-heading {
  padding: 19px;
}

.variant-heading-actions {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  display: flex !important;
}

.variant-color-switch {
  cursor: pointer;
  color: #555660;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 750;
  display: flex;
}

.variant-color-switch input {
  accent-color: var(--violet);
}

.variant-mapping-title {
  cursor: pointer;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  display: flex;
}

.variant-mapping-title::-webkit-details-marker {
  display: none;
}

.variant-mapping-title > span {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.variant-mapping-title small {
  color: var(--muted);
  font-size: 8px;
}

.variant-mapping-title > em {
  color: var(--violet-dark);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.variant-sku-table {
  max-width: 100%;
  padding: 16px 0 0;
}

.variant-sku-table table {
  table-layout: fixed;
  min-width: 3480px;
}

.variant-sku-table th, .variant-sku-table td {
  vertical-align: top;
  padding: 10px 7px;
}

.variant-sku-table th {
  z-index: 3;
  white-space: normal;
  background: #f6f5f9;
  position: sticky;
  top: 0;
}

.variant-sku-table th:first-child, .variant-sku-table td:first-child {
  width: 48px;
}

.variant-sku-table th:nth-child(2), .variant-sku-table td:nth-child(2) {
  width: 210px;
}

.variant-sku-table th:nth-child(3), .variant-sku-table td:nth-child(3) {
  width: 150px;
}

.variant-sku-table th:nth-child(6), .variant-sku-table td:nth-child(6) {
  width: 270px;
}

.variant-sku-table th:nth-child(20), .variant-sku-table td:nth-child(20) {
  width: 190px;
}

.variant-sku-table td:first-child, .variant-sku-table th:first-child {
  z-index: 5;
  background: #faf9fc;
  position: sticky;
  left: 0;
}

.variant-sku-table td:nth-child(2), .variant-sku-table th:nth-child(2) {
  z-index: 4;
  background: #fff;
  position: sticky;
  left: 48px;
  box-shadow: 8px 0 12px #1e1e320a;
}

.variant-name-cell strong, .variant-name-cell small {
  max-width: 190px;
  display: block;
}

.variant-name-cell small {
  color: var(--muted);
  margin-top: 5px;
  font-size: 8px;
}

.variant-index {
  color: var(--muted);
  font-weight: 800;
  text-align: center !important;
}

.variant-image-cell img, .variant-image-cell > span {
  border: 1px solid var(--line);
  width: 64px;
  height: 64px;
  color: var(--muted);
  object-fit: cover;
  background: #f2f1f6;
  border-radius: 7px;
  place-items: center;
  margin-bottom: 6px;
  font-size: 8px;
  display: grid;
}

.variant-sku-table input, .variant-sku-table textarea {
  min-height: 34px;
  padding: 7px 8px;
}

.variant-operation-cell button {
  color: var(--red);
  background: #fff5f6;
  border: 1px solid #efc4ca;
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 9px;
}

.variant-operation-cell button:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.variant-attribute-toolbar {
  background: #f8fbff;
  border: 1px solid #dbe5f0;
  border-radius: 14px;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 16px;
  display: flex;
}

.variant-attribute-toolbar > div:first-child {
  gap: 4px;
  display: grid;
}

.variant-attribute-toolbar strong {
  color: #172234;
  font-size: 14px;
}

.variant-attribute-toolbar span {
  color: #66758a;
  font-size: 12px;
  line-height: 1.55;
}

.variant-attribute-add {
  gap: 8px;
  min-width: min(520px, 52%);
  display: flex;
}

.variant-attribute-add select {
  flex: 1;
  min-width: 0;
}

.variant-attribute-add button, .media-upload-button {
  color: #2556a6;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #bfccdd;
  border-radius: 8px;
  font-weight: 700;
}

.variant-sku-table .dynamic-variant-heading {
  background: #edf6ff;
  min-width: 210px;
  position: relative;
}

.dynamic-variant-heading > span, .dynamic-variant-heading > small {
  display: block;
}

.dynamic-variant-heading > small {
  color: #708097;
  margin-top: 3px;
  font-weight: 500;
}

.dynamic-variant-heading > button {
  color: #48627f;
  background: #dce9f8;
  border: 0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding: 0;
  position: absolute;
  top: 7px;
  right: 7px;
}

.dynamic-variant-heading > button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.dynamic-variant-cell {
  min-width: 210px;
}

.dynamic-variant-cell > small {
  color: #7a8797;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  display: block;
}

.minio-image-field {
  gap: 6px;
  width: 190px;
  display: grid;
}

.minio-image-field > img, .minio-image-field > span {
  object-fit: cover;
  background: #f4f7fa;
  border: 1px solid #dce4ee;
  border-radius: 10px;
  width: 72px;
  height: 72px;
}

.minio-image-field > span {
  color: #8a96a7;
  place-items: center;
  font-size: 11px;
  display: grid;
}

.minio-image-field > small {
  color: #56806a;
  font-size: 11px;
}

.media-upload-button {
  place-items: center;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  display: grid;
}

.media-upload-button.loading {
  cursor: wait;
  opacity: .7;
}

.media-upload-button input {
  display: none;
}

@media (max-width: 1100px) {
  .listing-editor-layout {
    grid-template-columns: 1fr;
  }

  .listing-section-nav {
    display: none;
  }

  .listing-basic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .variant-attribute-toolbar, .variant-attribute-add {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .listing-editor-layout {
    padding: 14px;
  }

  .listing-editor-section {
    padding: 15px;
  }

  .listing-basic-grid {
    grid-template-columns: 1fr;
  }

  .listing-basic-grid > * {
    grid-column: 1;
  }

  .package-dimensions {
    grid-template-columns: 1fr;
  }

  .variant-heading-actions, .source-variant-heading {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

.import-primary-nav {
  margin-top: 18px;
}

.product-creation-hub {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: 14px;
  margin-bottom: 22px;
  padding: 22px;
}

.product-creation-hub > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.product-creation-hub h1 {
  color: var(--ink);
  letter-spacing: -.04em;
  margin: 5px 0 6px;
  font-size: 30px;
}

.product-creation-hub header p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

.extension-download-button {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: #fff;
  border-radius: 8px;
  flex: none;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 0 15px;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  display: inline-flex;
}

.extension-download-button:hover {
  background: var(--violet-dark);
}

.creation-method-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
  display: grid;
}

.creation-method-tabs button {
  color: #303139;
  text-align: left;
  background: #fafafa;
  border: 1px solid #dfdfe4;
  border-radius: 9px;
  grid-template-rows: auto auto;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 9px;
  min-width: 0;
  padding: 12px;
  display: grid;
}

.creation-method-tabs button > span {
  color: #696a72;
  background: #eeeef1;
  border-radius: 7px;
  grid-row: 1 / 3;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 9px;
  font-weight: 800;
  display: grid;
}

.creation-method-tabs button strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.creation-method-tabs button small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 9px;
  overflow: hidden;
}

.creation-method-tabs button:hover {
  background: #f7f6ff;
  border-color: #cbc7eb;
}

.creation-method-tabs button.active {
  background: linear-gradient(135deg, var(--violet-dark) 0%, var(--violet) 60%, #9d8bff 100%);
  color: #fff;
  border-color: #0000;
  box-shadow: 0 8px 20px #5844e852;
}

.creation-method-tabs button.active:hover {
  background: linear-gradient(135deg, var(--violet-dark) 0%, var(--violet) 60%, #9d8bff 100%);
  border-color: #0000;
}

.creation-method-tabs button.active strong {
  color: #fff;
}

.creation-method-tabs button.active small {
  color: #ffffffc7;
}

.creation-method-tabs button.active > span {
  background: var(--violet);
  color: #fff;
}

.creation-method-guide {
  color: var(--muted);
  background: #f8f8fa;
  border: 1px solid #e3e2e8;
  border-radius: 9px;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 11px 13px;
  font-size: 10px;
  line-height: 1.55;
  display: flex;
}

.creation-method-guide strong {
  color: var(--ink);
  flex: none;
}

.creation-method-guide.plugin {
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: start;
  display: grid;
}

.creation-method-guide.plugin ol {
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding-left: 18px;
  display: flex;
}

.creation-method-guide.plugin > span {
  grid-column: 2;
}

.creation-method-guide.plugin > a {
  width: fit-content;
  color: var(--violet-dark);
  grid-column: 2;
  font-weight: 720;
  text-decoration: none;
}

.creation-method-guide.plugin > a:hover {
  text-decoration: underline;
}

.file-import-workspace {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: 14px;
  grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr);
  align-items: center;
  gap: 28px;
  padding: 30px;
  display: grid;
}

.file-import-workspace h2 {
  margin: 7px 0;
  font-size: 22px;
}

.file-import-workspace p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
}

.file-import-workspace .zip-drop {
  width: 100%;
  min-height: 170px;
}

.embedded-ozon-dashboard, .embedded-ozon-dashboard .embedded-main-area {
  min-height: 0;
}

.workspace-chrome .embedded-ozon-dashboard .embedded-main-area {
  margin-left: 0;
  padding: 0 0 50px;
}

.embedded-ozon-dashboard .topbar {
  border-bottom: 1px solid var(--line);
  max-width: none;
  padding: 8px 0 20px;
}

.manual-store-context {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 14px;
  min-width: 270px;
  padding: 11px 12px;
  display: grid;
}

.manual-store-context > span, .manual-store-context > small {
  color: var(--muted);
  font-size: 9px;
}

.manual-store-context > strong {
  color: var(--ink);
  font-size: 11px;
}

.manual-store-context > small {
  grid-column: 1;
}

.manual-store-context > button {
  background: var(--violet-pale);
  min-height: 32px;
  color: var(--violet-dark);
  border: 1px solid #d6d2fa;
  border-radius: 7px;
  grid-area: 1 / 2 / 4;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 750;
}

.workspace-chrome.is-menu-collapsed .import-sidebar .nav-list {
  width: 100%;
}

.workspace-chrome.is-menu-collapsed .import-sidebar .nav-item {
  justify-content: center;
  gap: 0;
  padding: 0;
  font-size: 0;
  position: relative;
}

.workspace-chrome.is-menu-collapsed .import-sidebar .nav-symbol {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.workspace-chrome.is-menu-collapsed .import-sidebar .product-menu-label, .workspace-chrome.is-menu-collapsed .import-sidebar .product-menu-chevron {
  display: none;
}

.workspace-chrome.is-menu-collapsed .import-sidebar .product-menu-submenu {
  z-index: 80;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  width: 188px;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  box-shadow: 0 14px 34px #1c1d2f24;
}

.existing-editor-page {
  min-height: 100vh;
  color: var(--ink);
  background: #f6f7f9;
  padding: 26px 32px 64px;
}

.existing-editor-header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  max-width: 1500px;
  margin: 0 auto 20px;
  display: flex;
}

.existing-editor-header > div:first-child {
  flex: auto;
  gap: 7px;
  min-width: 0;
  display: grid;
}

.existing-editor-header a {
  color: #585a63;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.existing-editor-breadcrumb {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 9px;
  display: flex;
}

.existing-editor-breadcrumb strong {
  color: #75767d;
  font-weight: 650;
}

.existing-editor-header h1 {
  margin: 0;
  font-size: 27px;
}

.existing-editor-header p {
  max-width: 100%;
  color: var(--muted);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}

.existing-editor-actions {
  flex-wrap: nowrap;
  flex: none;
  align-items: center;
  gap: 9px;
  min-width: max-content;
  display: flex;
}

.existing-editor-actions > span, .existing-editor-owner {
  color: var(--muted);
  white-space: nowrap;
  flex: none;
  margin-right: 4px;
  font-size: 10px;
}

.existing-editor-actions .existing-editor-autosave {
  color: #6f6c78;
  white-space: nowrap;
  background: #f8f7fb;
  border: 1px solid #dfdce9;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin-right: 2px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.existing-editor-autosave i {
  background: #aaa6b5;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.existing-editor-autosave.pending i, .existing-editor-autosave.saving i {
  background: var(--violet);
  box-shadow: 0 0 0 4px #6d56ff1a;
}

.existing-editor-autosave.saving i {
  animation: 1s ease-in-out infinite image-task-pulse;
}

.existing-editor-autosave.saved {
  color: #277451;
  background: #f2faf6;
  border-color: #bfdfce;
}

.existing-editor-autosave.saved i {
  background: var(--green);
}

.existing-editor-autosave.error {
  color: var(--red);
  background: #fff5f6;
  border-color: #edbec4;
}

.existing-editor-autosave.error i {
  background: var(--red);
}

.existing-editor-actions button {
  border: 1px solid var(--line-strong);
  min-height: 40px;
  color: var(--ink);
  white-space: nowrap;
  background: #fff;
  border-radius: 8px;
  flex: none;
  padding: 0 15px;
  font-size: 10px;
  font-weight: 750;
}

.existing-editor-actions button.primary {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.existing-editor-actions button:disabled {
  cursor: wait;
  opacity: .55;
}

.manual-save-feedback-backdrop {
  z-index: 180;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #1213237a;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.manual-save-feedback {
  text-align: center;
  background: #fff;
  border: 1px solid #ffffff8c;
  border-radius: 18px;
  place-items: center;
  width: min(380px, 100%);
  padding: 30px 28px 26px;
  animation: .19s ease-out modal-in;
  display: grid;
  box-shadow: 0 28px 80px #12132347;
}

.manual-save-feedback-icon {
  width: 62px;
  height: 62px;
  color: var(--violet);
  background: #f0edff;
  border-radius: 50%;
  place-items: center;
  margin-bottom: 16px;
  font-size: 30px;
  font-weight: 900;
  display: grid;
}

.manual-save-feedback-icon > span {
  border: 3px solid #d8d0ff;
  border-top-color: var(--violet);
  border-radius: 50%;
  width: 27px;
  height: 27px;
  animation: .72s linear infinite manual-save-spin;
}

.manual-save-feedback.success .manual-save-feedback-icon {
  color: #15844b;
  background: #e9f8ef;
}

.manual-save-feedback.error .manual-save-feedback-icon {
  color: var(--red);
  background: #fff0f1;
}

.manual-save-feedback > small {
  color: #8c86a7;
  letter-spacing: .15em;
  font-size: 9px;
  font-weight: 850;
}

.manual-save-feedback > h2 {
  color: var(--ink);
  margin: 7px 0 0;
  font-size: 20px;
}

.manual-save-feedback > p {
  color: var(--muted);
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.65;
}

.manual-save-feedback > button {
  background: var(--red);
  color: #fff;
  cursor: pointer;
  min-width: 96px;
  min-height: 38px;
  font: inherit;
  border: 0;
  border-radius: 9px;
  margin-top: 20px;
  font-size: 11px;
  font-weight: 800;
}

@keyframes manual-save-spin {
  to {
    transform: rotate(360deg);
  }
}

.existing-editor-notice, .existing-editor-statusbar, .existing-editor-layout {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.existing-editor-notice {
  color: #31588f;
  background: #f3f7ff;
  border: 1px solid #c9d8f2;
  border-radius: 9px;
  margin-bottom: 14px;
  padding: 12px 14px;
  font-size: 11px;
  line-height: 1.55;
}

.existing-editor-notice.success {
  color: #17663b;
  background: #f1faf5;
  border-color: #b9dfc8;
}

.existing-editor-notice.error {
  background: var(--red-pale);
  color: var(--red);
  border-color: #edbec4;
}

.existing-editor-owner.remote-update {
  color: #b52231;
  background: #fff0f2;
  border-color: #e0a8ae;
}

.ozon-remote-update-banner {
  color: #52272c;
  background: linear-gradient(135deg, #fff8f9 0%, #fff 70%);
  border: 1px solid #e8bcc1;
  border-radius: 12px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: min(1500px, 100%);
  margin: 0 auto 14px;
  padding: 14px 16px;
  display: grid;
}

.ozon-remote-update-icon {
  background: var(--red);
  color: #fff;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 16px;
  font-weight: 900;
  display: grid;
}

.ozon-remote-update-banner > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.ozon-remote-update-banner small {
  color: #b04b56;
  letter-spacing: .08em;
  font-size: 8px;
  font-weight: 850;
}

.ozon-remote-update-banner strong {
  font-size: 12px;
}

.ozon-remote-update-banner p {
  color: #8b5c61;
  margin: 0;
  font-size: 9px;
}

.ozon-remote-update-banner > a {
  color: #a62d39;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #e2c8cb;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 9px;
  font-weight: 760;
  text-decoration: none;
}

.ozon-remote-product-ids {
  flex-wrap: wrap;
  margin-top: 6px;
  gap: 6px !important;
  display: flex !important;
}

.ozon-remote-product-ids a {
  color: #7c343c;
  background: #ffffffc7;
  border: 1px solid #ead5d7;
  border-radius: 8px;
  gap: 2px;
  padding: 6px 8px;
  text-decoration: none;
  display: grid;
}

.ozon-remote-product-ids code {
  color: #7a2730;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
}

.ozon-remote-product-ids a small, .ozon-remote-product-more {
  color: #9a686d;
  letter-spacing: 0;
  font-size: 8px;
  font-weight: 650;
}

.ozon-remote-product-more > summary {
  cursor: pointer;
  color: #7a2730;
  width: fit-content;
  font-size: 9px;
  font-weight: 760;
}

.ozon-remote-product-more > .ozon-remote-product-ids {
  margin-top: 7px;
}

.ozon-remote-update-issues {
  gap: 3px;
  margin-top: 6px;
  display: grid;
}

.ozon-remote-update-issues span {
  color: #9b2f3a;
  padding-left: 10px;
  font-size: 9px;
  line-height: 1.5;
  position: relative;
}

.ozon-remote-update-issues span:before {
  content: "";
  background: #d64a57;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  position: absolute;
  top: .62em;
  left: 0;
}

@media (max-width: 760px) {
  .ozon-remote-update-banner {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .ozon-remote-update-banner > a {
    grid-column: 2;
    justify-self: start;
  }
}

.existing-editor-statusbar {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 16px;
  display: flex;
  overflow: hidden;
}

.existing-editor-statusbar > div {
  border-right: 1px solid var(--line);
  gap: 4px;
  min-width: 150px;
  padding: 13px 17px;
  display: grid;
}

.existing-editor-statusbar > div:last-child {
  border-right: 0;
}

.existing-editor-statusbar span, .existing-editor-statusbar strong {
  font-size: 9px;
}

.existing-editor-statusbar span {
  color: var(--muted);
}

.existing-editor-statusbar strong {
  overflow-wrap: anywhere;
  font-size: 11px;
}

.existing-editor-section-nav {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  max-width: 1500px;
  margin: 0 auto 16px;
  padding: 7px;
  display: grid;
}

.existing-editor-section-nav button {
  color: #44454c;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  display: grid;
}

.existing-editor-section-nav button:hover {
  background: #f6f6f8;
}

.existing-editor-section-nav button.active {
  background: var(--violet-pale);
  color: #23202f;
  border-color: #d9d4ff;
}

.existing-editor-section-nav span {
  font-size: 11px;
  font-weight: 780;
}

.existing-editor-section-nav small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.existing-editor-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 16px;
  display: grid;
}

.existing-editor-content, .existing-editor-aside {
  gap: 16px;
  min-width: 0;
  display: grid;
}

.existing-editor-content {
  align-content: start;
}

.existing-editor-aside {
  position: sticky;
  top: 76px;
}

.existing-editor-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 4px 16px #1c1d2f09;
}

.existing-editor-card > header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 55px;
  padding: 0 18px;
  display: flex;
}

.existing-editor-card > header > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.existing-editor-card > header > div > span {
  background: var(--violet-pale);
  width: auto;
  min-width: 32px;
  height: 25px;
  color: var(--violet);
  border-radius: 7px;
  place-items: center;
  padding: 0 7px;
  font-size: 9px;
  font-weight: 850;
  display: grid;
}

.existing-editor-card h2 {
  margin: 0;
  font-size: 14px;
}

.existing-editor-card > header small {
  color: var(--muted);
  font-size: 9px;
}

.existing-editor-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
  display: grid;
}

.existing-editor-form label {
  gap: 7px;
  display: grid;
}

.existing-editor-form label.wide {
  grid-column: 1 / -1;
}

.existing-editor-form label > span {
  color: #45464d;
  font-size: 10px;
  font-weight: 720;
}

.existing-editor-form label > span em {
  color: var(--red);
  margin-left: 5px;
  font-size: 8px;
  font-style: normal;
}

.existing-editor-form input, .existing-editor-form textarea, .existing-editor-sku-table input {
  border: 1px solid var(--line-strong);
  width: 100%;
  color: var(--ink);
  font: inherit;
  background: #fff;
  border-radius: 8px;
  outline: 0;
  padding: 10px 11px;
}

.existing-editor-form input:focus, .existing-editor-form textarea:focus, .existing-editor-sku-table input:focus {
  border-color: #9c90ff;
  box-shadow: 0 0 0 3px #7663ff14;
}

.existing-editor-form textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.7;
}

.existing-editor-form label > small {
  color: var(--muted);
  justify-self: end;
  font-size: 8px;
}

.existing-editor-form .input-suffix {
  display: flex;
}

.existing-editor-form .input-suffix input {
  border-radius: 8px 0 0 8px;
}

.existing-editor-form .input-suffix em {
  border: 1px solid var(--line-strong);
  min-width: 54px;
  color: var(--muted);
  background: #f6f6f8;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  place-items: center;
  font-size: 9px;
  font-style: normal;
  display: grid;
}

.existing-editor-images {
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px;
  padding: 18px;
  display: grid;
}

.existing-editor-images figure {
  border: 1px solid var(--line);
  background: #fafafa;
  border-radius: 9px;
  margin: 0;
  overflow: hidden;
}

.existing-editor-images img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

.existing-editor-images figcaption {
  color: var(--muted);
  padding: 7px 8px;
  font-size: 8px;
}

.existing-editor-table-wrap {
  overflow-x: auto;
}

.existing-editor-sku-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 10px;
}

.existing-editor-sku-table th, .existing-editor-sku-table td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  padding: 11px 13px;
}

.existing-editor-sku-table th {
  color: var(--muted);
  white-space: nowrap;
  background: #fafafa;
  font-size: 9px;
}

.existing-editor-sku-table tbody tr:last-child td {
  border-bottom: 0;
}

.existing-editor-sku-table input {
  min-width: 86px;
  padding: 7px 8px;
}

.specification-list {
  flex-wrap: wrap;
  gap: 5px;
  min-width: 180px;
  display: flex;
}

.specification-list span {
  color: #44454c;
  background: #f3f3f5;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 9px;
}

.specification-list em {
  color: var(--muted);
  margin-right: 4px;
  font-style: normal;
}

.existing-source-attributes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 8px 18px 18px;
  display: grid;
}

.existing-source-attributes > div {
  border-bottom: 1px solid var(--line);
  gap: 5px;
  padding: 10px 8px;
  display: grid;
}

.existing-source-attributes span {
  color: var(--muted);
  font-size: 8px;
}

.existing-source-attributes strong {
  font-size: 10px;
  line-height: 1.55;
}

.existing-source-attributes p {
  color: #55565e;
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.existing-editor-section-empty {
  color: var(--muted);
  text-align: center;
  padding: 28px 20px;
  font-size: 10px;
}

.source-card dl {
  margin: 0;
  padding: 9px 17px;
  display: grid;
}

.source-card dl > div {
  border-bottom: 1px dashed #e5e5e8;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.source-card dl > div:last-child {
  border-bottom: 0;
}

.source-card dt, .source-card dd {
  font-size: 9px;
}

.source-card dt {
  color: var(--muted);
}

.source-card dd {
  overflow-wrap: anywhere;
  text-align: right;
  margin: 0;
  font-weight: 700;
}

.source-card > a, .source-card > p {
  color: #55565d;
  background: #f6f6f8;
  border-radius: 7px;
  margin: 0 17px 16px;
  padding: 9px 10px;
  font-size: 9px;
  line-height: 1.55;
  text-decoration: none;
  display: block;
}

.existing-editor-summary-section {
  padding: 15px 17px 16px;
}

.existing-editor-summary-section + .existing-editor-summary-section {
  border-top: 1px solid var(--line);
}

.existing-editor-summary-section h3 {
  color: #3d3e45;
  margin: 0 0 2px;
  font-size: 10px;
}

.existing-editor-summary-section dl {
  padding: 5px 0;
}

.existing-editor-summary-section > a, .existing-editor-summary-section > p {
  color: #55565d;
  background: #f6f6f8;
  border-radius: 7px;
  margin: 6px 0 0;
  padding: 9px 10px;
  font-size: 9px;
  line-height: 1.55;
  text-decoration: none;
  display: block;
}

.existing-editor-summary-section.ozon > p {
  color: #51478d;
  background: #f5f3ff;
}

.existing-editor-empty {
  border: 1px solid var(--line);
  text-align: center;
  background: #fff;
  border-radius: 12px;
  gap: 10px;
  max-width: 520px;
  margin: 15vh auto 0;
  padding: 30px;
  display: grid;
}

.existing-editor-empty strong {
  font-size: 17px;
}

.existing-editor-empty p, .existing-editor-empty a {
  color: var(--muted);
  margin: 0;
  font-size: 10px;
}

.existing-editor-empty a {
  color: var(--violet);
  font-weight: 700;
}

.missing-draft-state {
  place-items: center;
}

.missing-draft-state-icon {
  color: #a75e00;
  background: #fff2df;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 22px;
  font-weight: 800;
  display: grid;
}

.missing-draft-state > small {
  color: #9a6a2d;
  letter-spacing: .12em;
  font-size: 9px;
  font-weight: 800;
}

.missing-draft-state-actions {
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  display: flex;
}

.missing-draft-state-actions button, .missing-draft-state-actions a {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  min-height: 34px;
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
}

.missing-draft-state-actions button {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.missing-draft-state-actions a {
  color: #55565d;
  background: #fff;
  align-items: center;
  display: inline-flex;
}

.existing-editor-shell {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.existing-editor-shell .existing-editor-page {
  width: calc(100% - 238px);
  min-width: 0;
}

.workspace-chrome.is-menu-collapsed .existing-editor-shell .existing-editor-page {
  width: calc(100% - 72px);
}

.listing-structure-page {
  min-width: 0;
  padding-bottom: 75vh;
  overflow-x: hidden;
}

.listing-structure-header, .listing-structure-page > .existing-editor-notice, .listing-section-index, .listing-editor-sections {
  width: 100%;
  max-width: 1640px;
}

.listing-section-index {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 16px;
  display: grid;
}

.listing-section-index button {
  border: 1px solid var(--line);
  min-width: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  grid-template-rows: auto auto;
  grid-template-columns: auto 1fr;
  column-gap: 9px;
  padding: 11px 13px;
  transition: border-color .16s, box-shadow .16s, background-color .16s;
  display: grid;
}

.listing-section-index button:hover {
  border-color: #cfc9ff;
  box-shadow: 0 5px 16px #362b8412;
}

.listing-section-index button.active {
  background: linear-gradient(135deg, var(--violet-dark) 0%, var(--violet) 60%, #9d8bff 100%);
  color: #fff;
  border-color: #0000;
  box-shadow: 0 8px 20px #5844e852;
}

.listing-section-index button.active:hover {
  border-color: #0000;
}

.listing-section-index button > span {
  color: var(--violet);
  grid-row: 1 / 3;
  align-self: center;
  font-size: 9px;
  font-weight: 900;
}

.listing-section-index button.active > span {
  color: #ffffffd9;
}

.listing-section-index strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.listing-section-index button.active strong {
  color: #fff;
}

.listing-section-index small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.listing-section-index button.active small {
  color: #ffffffc7;
}

.listing-editor-sections {
  gap: 16px;
  min-width: 0;
  margin: 0 auto;
  display: grid;
}

.listing-structure-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  scroll-margin-top: 18px;
  overflow: visible;
  box-shadow: 0 4px 18px #1c1d2f08;
}

.listing-structure-card.variant-card {
  overflow: hidden;
}

.listing-structure-card > .listing-section-heading {
  border-bottom: 1px solid var(--line);
  min-height: 66px;
  margin: 0;
  padding: 14px 20px;
}

.listing-structure-card .listing-section-heading h2 {
  margin: 0;
  font-size: 16px;
}

.listing-structure-card .listing-section-heading button, .listing-subheading button, .listing-inline-control button, .selected-brand button, .variant-row-actions button {
  border: 1px solid var(--line-strong);
  color: #44454d;
  min-height: 32px;
  font: inherit;
  white-space: nowrap;
  background: #fff;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 760;
}

.listing-main-grid, .listing-attribute-grid, .listing-other-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  padding: 20px;
  display: grid;
}

.listing-main-grid {
  grid-template-columns: 1fr;
}

.listing-store-options {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  display: grid;
}

.listing-store-option {
  border: 1px solid var(--line-strong);
  cursor: pointer;
  background: #fff;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  transition: border-color .16s, background .16s, box-shadow .16s;
  display: flex;
}

.listing-store-option:hover {
  border-color: #9b8fff;
}

.listing-store-option.selected {
  background: #f6f4ff;
  border-color: #7663ff;
  box-shadow: 0 0 0 2px #7663ff14;
}

.listing-store-option.unavailable {
  cursor: not-allowed;
  opacity: .58;
}

.listing-field .listing-store-option > input[type="checkbox"] {
  border: 1px solid var(--line-strong);
  width: 17px;
  min-width: 17px;
  max-width: 17px;
  height: 17px;
  min-height: 17px;
  max-height: 17px;
  box-shadow: none;
  accent-color: #7663ff;
  background: #fff;
  border-radius: 4px;
  flex: 0 0 17px;
  margin: 0;
  padding: 0;
}

.listing-store-option > span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.listing-store-option strong {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.listing-store-option small, .listing-store-empty {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.listing-store-empty {
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px;
  display: flex;
}

.listing-store-empty > span {
  gap: 3px;
  display: grid;
}

.listing-store-empty strong {
  color: var(--ink);
  font-size: 11px;
}

.listing-store-empty small {
  color: var(--muted);
  font-size: 9px;
}

.listing-store-empty > a {
  background: var(--violet);
  color: #fff;
  border-radius: 8px;
  flex: none;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 760;
  text-decoration: none;
}

.listing-category-empty button {
  color: #4f3ed0;
  background: #f2efff;
  border: 1px solid #cfc7ff;
  border-radius: 8px;
  margin-top: 8px;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 750;
}

.source-category-hint {
  background: #fffdf4;
  border: 1px solid #e7e1c9;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  display: flex;
}

.source-category-hint > span {
  color: #715b16;
  background: #f5e9b9;
  border-radius: 999px;
  flex: none;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 800;
}

.source-category-hint > strong {
  color: #453b1b;
  min-width: 0;
  font-size: 11px;
}

.source-category-hint > small {
  color: #887747;
  white-space: nowrap;
  margin-left: auto;
  font-size: 9px;
}

.listing-package-dimensions-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  display: grid;
}

.listing-package-dimensions-row > label {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 8px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  display: grid;
  overflow: hidden;
}

.listing-package-dimensions-row > label > span {
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  font-weight: 750;
}

.listing-package-dimensions-row > label > input {
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  min-height: 38px;
}

.listing-package-dimensions-row > label:focus-within {
  border-color: #9386ff;
  box-shadow: 0 0 0 3px #7663ff14;
}

.listing-package-dimensions-row > label:focus-within > input {
  box-shadow: none;
}

.listing-attribute-grid, .listing-attribute-grid.compact {
  grid-template-columns: 1fr;
}

.listing-category-picker {
  position: relative;
}

.listing-category-trigger {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-width: 0;
  min-height: 40px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  font-size: 12px;
  display: flex;
}

.listing-category-trigger.open, .listing-category-trigger:hover {
  border-color: #9386ff;
  box-shadow: 0 0 0 3px #7663ff14;
}

.listing-category-trigger .listing-category-trigger-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.listing-category-caret {
  background: var(--violet-pale);
  border-radius: 6px;
  flex: none;
  width: 22px;
  height: 22px;
  transition: transform .16s, background-color .16s;
  position: relative;
}

.listing-category-caret:after {
  border-right: 2px solid var(--violet-dark);
  border-bottom: 2px solid var(--violet-dark);
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  top: 6px;
  left: 7px;
  transform: rotate(45deg);
}

.listing-category-trigger.open .listing-category-caret {
  transform: rotate(180deg);
}

.listing-category-backdrop {
  z-index: 90;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #19182661;
  position: fixed;
  inset: 0;
}

.listing-category-dialog {
  z-index: 91;
  background: #fff;
  border: 1px solid #ffffff73;
  border-radius: 16px;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(920px, 100vw - 48px);
  height: min(760px, 100dvh - 64px);
  min-height: 420px;
  display: grid;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  box-shadow: 0 28px 80px #14122d47;
}

.listing-category-dialog.has-history {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.listing-category-dialog > header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  display: flex;
}

.listing-category-dialog > header > div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.listing-category-dialog > header strong {
  color: var(--ink);
  font-size: 17px;
}

.listing-category-dialog > header small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.listing-category-dialog > header > button {
  border: 1px solid var(--line);
  color: #666873;
  background: #f7f7f9;
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 23px;
  line-height: 1;
  display: grid;
}

.listing-category-search {
  border-bottom: 1px solid var(--line);
  background: #fafafd;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  display: grid;
}

.listing-category-search > span {
  color: var(--violet-dark);
  font-size: 20px;
  line-height: 1;
}

.listing-category-search input {
  border: 1px solid var(--line-strong);
  width: 100%;
  height: 42px;
  color: var(--ink);
  background: #fff;
  border-radius: 9px;
  padding: 0 13px;
  font-size: 13px;
}

.listing-category-search input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px #715cff1f;
}

.listing-category-search > button {
  height: 34px;
  color: var(--violet-dark);
  background: none;
  border: 0;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 750;
}

.listing-category-history {
  border-bottom: 1px solid var(--line);
  background: #fff;
  gap: 9px;
  padding: 10px 18px 12px;
  display: grid;
}

.listing-category-history-heading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.listing-category-history-heading > span {
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.listing-category-history-heading strong {
  color: #3d3b4e;
  font-size: 11px;
}

.listing-category-history-heading small, .listing-category-history-heading em, .listing-category-history > p {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.listing-category-history > p {
  margin: 0;
  line-height: 1.5;
}

.listing-category-history-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.listing-category-history-options > button {
  min-width: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: #faf9fd;
  border: 1px solid #e3e0ee;
  border-radius: 9px;
  gap: 4px;
  padding: 8px 10px;
  display: grid;
}

.listing-category-history-options > button:hover, .listing-category-history-options > button.recommended {
  background: #f6f3ff;
  border-color: #b9afff;
}

.listing-category-history-options > button:disabled {
  opacity: .52;
  cursor: not-allowed;
}

.listing-category-history-options > button > span {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.listing-category-history-options > button em {
  background: var(--violet);
  color: #fff;
  border-radius: 999px;
  flex: none;
  padding: 2px 5px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.listing-category-history-options > button strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 10px;
  overflow: hidden;
}

.listing-category-history-options > button small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.listing-category-results {
  background: #fff;
  min-height: 0;
  padding: 10px 14px 22px;
  overflow-y: auto;
}

.listing-category-result-summary {
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 8px 10px;
  font-size: 10px;
  display: flex;
}

.listing-category-result-summary strong {
  color: #555664;
  font-size: 11px;
}

.listing-category-results > button {
  width: 100%;
  color: var(--ink);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  display: flex;
}

.listing-category-results > button:hover:not(:disabled), .listing-category-results > button[aria-selected="true"] {
  background: var(--violet-pale);
}

.listing-category-results > button:disabled {
  opacity: .48;
}

.listing-category-results > button > span {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.listing-category-results > button strong {
  font-size: 12px;
  font-weight: 680;
  line-height: 1.55;
}

.listing-category-results > button em {
  color: var(--muted);
  background: #eeeef2;
  border-radius: 99px;
  flex: none;
  padding: 2px 6px;
  font-size: 8px;
  font-style: normal;
}

.listing-category-results > button small {
  color: var(--muted);
  flex: none;
  font-size: 9px;
}

.listing-category-empty {
  min-height: 220px;
  color: var(--muted);
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 5px;
  display: grid;
}

.listing-category-empty strong {
  color: #555664;
  font-size: 13px;
}

.listing-category-empty span {
  font-size: 10px;
}

.listing-category-tree {
  background: #fff;
  align-content: start;
  min-height: 0;
  padding: 12px 14px 22px;
  display: grid;
  overflow-y: auto;
}

.category-tree-row {
  border-radius: 9px;
  align-items: center;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.category-tree-row:hover {
  background: #f6f5fb;
}

.category-tree-row.selected {
  background: var(--violet-pale);
}

.category-tree-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
}

.category-tree-chevron {
  border-bottom: 2px solid #777986;
  border-right: 2px solid #777986;
  width: 11px;
  height: 11px;
  transition: transform .15s;
  transform: rotate(-45deg);
}

.category-tree-chevron.expanded {
  transform: rotate(45deg)translate(-2px, -2px);
}

.category-tree-leaf {
  background: #c8c7d0;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.category-tree-toggle:disabled {
  color: var(--line-strong);
  cursor: default;
}

.category-tree-label {
  min-width: 0;
  min-height: 40px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 0;
  font-size: 12px;
  display: flex;
}

.category-tree-label strong {
  white-space: normal;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.category-tree-label small {
  color: var(--muted);
  flex: none;
  font-size: 9px;
}

.category-tree-row.selected .category-tree-label strong {
  color: var(--violet-dark);
}

.category-tree-row.disabled .category-tree-label {
  color: var(--muted);
  cursor: default;
}

.category-tree-children {
  border-left: 1px solid var(--line);
  margin-left: 18px;
  padding-left: 8px;
}

.listing-field {
  align-content: start;
  gap: 7px;
  min-width: 0;
  display: grid;
  position: relative;
}

.listing-field.wide {
  grid-column: 1 / -1;
}

.listing-field > span {
  color: #45464d;
  font-size: 12px;
  font-weight: 750;
}

.listing-field > span > small {
  color: var(--muted);
  margin-left: 5px;
  font-size: 10px;
  font-weight: 650;
}

.listing-required {
  color: var(--red);
  font-style: normal;
}

.listing-field input, .listing-field select, .listing-field textarea, .listing-variant-table input, .listing-variant-table select, .listing-variant-table textarea {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-width: 0;
  min-height: 40px;
  color: var(--ink);
  font: inherit;
  background: #fff;
  border-radius: 8px;
  outline: 0;
  padding: 10px 11px;
  font-size: 12px;
}

.listing-field input:focus, .listing-field select:focus, .listing-field textarea:focus, .listing-variant-table input:focus, .listing-variant-table select:focus, .listing-variant-table textarea:focus {
  border-color: #9386ff;
  box-shadow: 0 0 0 3px #7663ff14;
}

.listing-field textarea, .listing-variant-table textarea {
  resize: vertical;
  line-height: 1.55;
}

.listing-field > small, .listing-field > a {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.listing-field > a {
  color: var(--violet-dark);
  text-decoration: none;
}

.listing-field .code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.listing-inline-control, .model-name-control {
  align-items: stretch;
  gap: 6px;
  display: flex;
}

.listing-inline-control input, .model-name-control textarea {
  flex: 1;
}

.listing-brand-picker {
  z-index: 2;
  position: relative;
}

.listing-brand-picker:focus-within {
  z-index: 25;
}

.brand-no-brand-choice {
  background: #faf9fe;
  border: 1px solid #ded9ef;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  display: flex;
}

.brand-no-brand-choice.selected {
  background: #f3f0ff;
  border-color: #bdb4ee;
}

.brand-no-brand-choice > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.brand-no-brand-choice strong {
  color: #4c426f;
  font-size: 10px;
}

.brand-no-brand-choice small {
  color: #777184;
  font-size: 9px;
  line-height: 1.45;
}

.brand-no-brand-choice button {
  color: #56488c;
  min-height: 30px;
  font: inherit;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #8375ce;
  border-radius: 7px;
  flex: none;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 800;
}

.brand-no-brand-choice button:disabled {
  color: #6559a0;
  background: #e6e1fb;
  border-color: #0000;
}

.selected-brand {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  font-size: 10px;
  display: flex;
}

.selected-brand strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.selected-brand button {
  min-height: 25px;
  color: var(--violet-dark);
  background: none;
  border-color: #0000;
  margin-left: auto;
}

.brand-result-list {
  z-index: 26;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 9px;
  max-height: min(64vh, 520px);
  padding: 5px;
  display: grid;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 16px 36px #1c1d2f21;
}

.brand-result-list button {
  color: var(--ink);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  display: flex;
}

.brand-result-list button:hover {
  background: #f6f5fb;
}

.brand-result-list button.no-brand-option {
  background: #f7f6ff;
  border: 1px solid #d9d4ff;
}

.brand-result-list button.no-brand-option:hover {
  background: #efedff;
}

.brand-result-state {
  min-height: 108px;
  color: var(--muted);
  text-align: center;
  place-items: center;
  gap: 5px;
  padding: 16px;
  display: grid;
}

.brand-result-state strong {
  color: var(--ink);
  font-size: 11px;
}

.brand-result-state small {
  font-size: 9px;
}

.brand-result-state button {
  border: 1px solid var(--line-strong);
  min-height: 30px;
  color: var(--violet-dark);
  background: #fff;
  justify-content: center;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 720;
}

.brand-result-list .brand-picture {
  border: 1px solid var(--line);
  background: var(--violet-pale);
  width: 26px;
  height: 26px;
  color: var(--violet-dark);
  object-fit: contain;
  border-radius: 6px;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.brand-result-list .brand-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 650;
  overflow: hidden;
}

.brand-result-list .brand-name small {
  color: var(--muted);
  margin-left: 5px;
  font-size: 9px;
  font-weight: 500;
}

.brand-result-list small.brand-id {
  color: var(--muted);
  white-space: nowrap;
  flex: none;
  font-size: 8px;
}

.selected-brand .brand-picture {
  border: 1px solid var(--line);
  object-fit: contain;
  background: #fff;
  border-radius: 5px;
  flex: none;
  width: 22px;
  height: 22px;
}

.listing-dynamic-attributes {
  border-top: 1px solid var(--line);
  padding: 0 20px 20px;
}

.listing-dynamic-attributes .listing-attribute-grid {
  padding: 0 0 18px;
}

.listing-dynamic-attributes > .listing-brand-field {
  background: #fbfaff;
  border: 1px solid #ded9ef;
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 13px 14px;
}

.listing-core-attribute-heading {
  padding-bottom: 10px;
}

.listing-subheading {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 0 14px;
  display: flex;
}

.listing-subheading.optional {
  border-top: 1px dashed var(--line);
}

.listing-subheading > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.listing-subheading strong {
  font-size: 11px;
}

.listing-subheading span {
  color: var(--muted);
  background: #f1f1f4;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 8px;
}

.listing-subheading > small, .listing-empty-hint, .attribute-id {
  color: var(--muted);
  font-size: 8px;
}

.listing-empty-hint {
  background: #f7f7f9;
  border-radius: 8px;
  margin: 0 0 18px;
  padding: 13px;
}

.listing-dynamic-attributes .listing-required-attribute-list {
  background: #fff;
  border: 1px solid #ded9ef;
  border-radius: 12px;
  gap: 0;
  margin-bottom: 16px;
  padding: 0;
  display: grid;
  overflow: hidden;
  box-shadow: 0 3px 14px #4134750a;
}

.listing-required-attribute-row {
  background: #fff;
  border-bottom: 1px solid #eeebf5;
  grid-template-columns: minmax(160px, 220px) minmax(340px, 1fr) minmax(190px, 260px);
  align-items: start;
  gap: 18px;
  min-width: 0;
  padding: 15px 17px;
  transition: background .14s;
  display: grid;
}

.listing-required-attribute-row:hover {
  background: #fdfcff;
}

.listing-required-attribute-row:last-child {
  border-bottom: 0;
}

.listing-required-attribute-row > span {
  color: #302c3a;
  overflow-wrap: anywhere;
  padding-top: 10px;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.listing-required-attribute-row > .attribute-field-body {
  grid-area: 1 / 2;
}

.listing-required-attribute-row > .attribute-field-meta {
  flex-direction: column;
  grid-area: 1 / 3;
  place-content: center start;
  align-items: start;
  min-height: 40px;
}

.listing-required-attribute-row .attribute-id {
  line-height: 1.45;
  display: block;
}

.variant-required-summary {
  border-bottom: 1px solid var(--line);
  color: #5a4e87;
  background: #f8f6ff;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  padding: 12px 20px;
  display: grid;
}

.variant-required-summary-heading {
  align-content: center;
  gap: 3px;
  display: grid;
}

.variant-required-summary-heading strong {
  color: #443a6c;
  font-size: 12px;
}

.variant-required-summary-heading small {
  color: var(--muted);
  font-size: 10px;
}

.variant-required-summary-items {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
  display: grid;
}

.variant-required-summary-items > span {
  background: #fff;
  border: 1px solid #ded8fa;
  border-radius: 8px;
  gap: 3px;
  padding: 9px 11px;
  display: grid;
}

.variant-required-summary-items strong {
  color: #40365f;
  font-size: 11px;
  line-height: 1.45;
}

.variant-required-summary-items small {
  color: var(--violet-dark);
  font-size: 10px;
}

.listing-category-type-picker {
  background: #faf9ff;
  border: 1px solid #d8d4ec;
  border-radius: 11px;
  grid-template-columns: minmax(420px, .9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
  padding: 11px 14px;
  display: grid;
}

.listing-category-type-picker label, .listing-category-type-picker > div {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.listing-category-type-picker label {
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.listing-category-type-picker > div {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.listing-category-type-picker label > span {
  color: #383347;
  font-size: 10px;
  font-weight: 800;
}

.listing-category-type-picker select {
  color: #24202f;
  width: 100%;
  min-height: 38px;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #bdb6d8;
  border-radius: 8px;
  padding: 0 34px 0 11px;
  font-size: 11px;
  font-weight: 700;
}

.listing-category-type-picker select:focus {
  border-color: #7164a5;
  outline: none;
  box-shadow: 0 0 0 3px #7164a51f;
}

.listing-category-type-picker strong {
  color: #514873;
  font-size: 10px;
  font-weight: 800;
}

.listing-category-type-picker small {
  color: #716b7e;
  font-size: 9px;
  line-height: 1.5;
}

.listing-variant-table-wrap {
  overscroll-behavior-inline: contain;
  border-radius: 0 0 12px 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.variant-pagination {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fcfbfe;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 7px 18px;
  display: flex;
}

.variant-pagination:last-child {
  border-top: 0;
}

.variant-pagination > span {
  color: var(--muted);
  font-size: 9px;
}

.variant-pagination > div {
  flex: none;
  align-items: center;
  gap: 8px;
  display: flex;
}

.variant-pagination strong {
  color: #554d72;
  text-align: center;
  min-width: 42px;
  font-size: 9px;
}

.variant-pagination button {
  color: #574c86;
  min-width: 58px;
  min-height: 28px;
  font: inherit;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d7d2e8;
  border-radius: 6px;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 780;
}

.variant-pagination button:disabled {
  opacity: .42;
}

.listing-variant-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 9px;
}

.listing-variant-table th, .listing-variant-table td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  background: #fff;
  min-width: 124px;
  padding: 10px;
}

.listing-variant-table tbody td {
  text-align: center;
  vertical-align: middle;
}

.listing-variant-table th {
  z-index: 3;
  color: #686a73;
  white-space: nowrap;
  background: #f8f8fa;
  font-size: 10px;
  font-weight: 800;
  position: sticky;
  top: 0;
}

.variant-title-sync {
  border: 1px solid var(--line);
  min-height: 20px;
  color: var(--violet-dark);
  background: #fff;
  border-radius: 5px;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
}

.variant-title-sync:hover:not(:disabled) {
  background: var(--violet-pale);
  border-color: #9386ff;
}

.variant-title-sync:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.listing-variant-table tr:last-child td {
  border-bottom: 0;
}

.listing-variant-table th:first-child, .listing-variant-table td:first-child {
  z-index: 4;
  text-align: center;
  background: #fafafd;
  width: 52px;
  min-width: 52px;
  position: sticky;
  left: 0;
}

.listing-variant-table th:nth-child(2), .listing-variant-table td:nth-child(2) {
  z-index: 3;
  min-width: 190px;
  box-shadow: 1px 0 0 var(--line);
  background: #fff;
  position: sticky;
  left: 52px;
}

.listing-variant-table th:nth-child(2) {
  z-index: 5;
  background: #f8f8fa;
}

.listing-variant-table th:nth-child(3), .listing-variant-table td:nth-child(3), .listing-variant-table th:nth-child(4), .listing-variant-table td:nth-child(4) {
  min-width: 128px;
}

.listing-variant-table th:nth-child(6), .listing-variant-table td:nth-child(6) {
  min-width: 260px;
}

.listing-variant-table th:nth-child(17), .listing-variant-table td:nth-child(17) {
  min-width: 80px;
}

.variant-sequence {
  color: var(--muted);
  font-weight: 850;
}

.variant-image-preview {
  justify-items: center;
  gap: 7px;
  display: grid;
}

.variant-image-preview img, .variant-image-preview > span {
  border: 1px solid var(--line);
  width: 76px;
  height: 76px;
  color: var(--muted);
  object-fit: cover;
  background: #f7f7f8;
  border-radius: 8px;
  place-items: center;
  font-size: 8px;
  display: grid;
  overflow: hidden;
}

.variant-image-preview > button {
  background: var(--violet-pale);
  min-height: 28px;
  color: var(--violet-dark);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  border: 1px solid #d8d3ff;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 760;
  display: inline-flex;
}

.variant-column-heading {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.variant-price-help {
  display: inline-flex;
  position: relative;
}

.variant-price-help > button {
  background: var(--violet-pale);
  width: 18px;
  height: 18px;
  color: var(--violet-dark);
  cursor: help;
  border: 1px solid #cfc9ff;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  font-size: 10px;
  font-weight: 850;
  display: grid;
}

.variant-price-help > span {
  z-index: 20;
  visibility: hidden;
  color: #5c5d66;
  opacity: 0;
  pointer-events: none;
  white-space: normal;
  background: #fff;
  border: 1px solid #d9d5f7;
  border-radius: 9px;
  width: 280px;
  padding: 11px 12px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  transition: opacity .14s, transform .14s, visibility .14s;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -3px);
  box-shadow: 0 12px 30px #241f4e29;
}

.variant-price-help > span strong {
  color: var(--ink);
  margin-bottom: 3px;
  font-size: 11px;
  display: block;
}

.variant-price-help:hover > span, .variant-price-help:focus-within > span {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%);
}

.variant-presence {
  border: 1px solid var(--line);
  min-height: 28px;
  color: var(--muted);
  white-space: nowrap;
  background: #f7f7f9;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.variant-presence i {
  background: #b8b9c0;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.variant-presence.present {
  color: #17663b;
  background: #f2faf5;
  border-color: #bee0ca;
}

.variant-presence.present i {
  background: #2aa463;
}

.listing-variant-table input, .listing-variant-table select, .listing-variant-table textarea {
  box-sizing: border-box;
  text-align: center;
  margin: 0;
  font-size: 11px;
}

.listing-variant-table select {
  text-align-last: center;
}

.listing-variant-table td > input, .listing-variant-table td > select, .model-name-control {
  min-height: 44px;
}

.listing-variant-table td > input, .listing-variant-table td > select {
  height: 44px;
}

.model-name-control {
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.model-name-control textarea {
  overflow-wrap: anywhere;
  resize: vertical;
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 64px;
  line-height: 1.45;
  overflow: hidden;
}

.variant-offer-id-input {
  overflow-wrap: anywhere;
  resize: vertical;
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 76px;
  line-height: 1.45;
}

.variant-readonly-id {
  background: #f7f6fa;
  border: 1px solid #ddd9e9;
  border-radius: 8px;
  align-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 62px;
  padding: 8px;
  display: grid;
}

.variant-readonly-id code {
  color: #393449;
  overflow-wrap: anywhere;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
}

.variant-readonly-id span, .variant-group-locked {
  color: #6e687e;
  white-space: nowrap;
  background: #ebe8f4;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 8px;
  font-weight: 800;
}

.variant-readonly-id.offer-id {
  min-height: 76px;
}

.variant-group-locked {
  justify-content: center;
  align-items: center;
  min-height: 26px;
  display: inline-flex;
}

.variant-row-actions {
  gap: 6px;
  display: grid;
}

.variant-row-actions .danger {
  color: var(--red);
  border-color: #efd2d5;
}

.variant-row-actions button:disabled, .listing-subheading button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.attribute-field-body {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.attribute-field-body > input, .listing-inline-control > select {
  min-width: 0;
}

.listing-inline-control > select {
  flex: auto;
}

.attribute-field-meta {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.attribute-field-meta button {
  min-height: 28px;
  color: var(--violet-dark);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  background: #faf9ff;
  border: 1px solid #d9d3f2;
  border-radius: 7px;
  flex: none;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 760;
}

.attribute-field-guide {
  color: #6a6087;
  background: #faf9ff;
  border: 1px solid #e4dff7;
  border-radius: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 9px;
  line-height: 1.5;
  display: grid;
}

.attribute-field-guide strong {
  color: #54447f;
  white-space: nowrap;
  background: #eae5ff;
  border-radius: 999px;
  flex: none;
  padding: 2px 7px;
  font-size: 8px;
}

.attribute-field-guide span {
  min-width: 0;
}

.listing-required-attribute-row.listing-merge-attribute-row {
  background: linear-gradient(90deg, #faf9ff, #fff 42%);
  border-left: 4px solid #7a67ef;
}

.merge-attribute-summary {
  background: #fff;
  border: 1px solid #dcd6f7;
  border-radius: 9px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 8px 7px 11px;
  display: grid;
}

.merge-attribute-summary > div:first-child {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.merge-attribute-summary span {
  color: #837b98;
  font-size: 8px;
  font-weight: 750;
}

.merge-attribute-summary code {
  color: #40346f;
  font-family: var(--font-geist-mono), monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 750;
  overflow: hidden;
}

.merge-attribute-summary > div:last-child {
  gap: 6px;
  display: flex;
}

.merge-attribute-summary button {
  color: #57458c;
  cursor: pointer;
  min-height: 30px;
  font: inherit;
  white-space: nowrap;
  background: #f7f5ff;
  border: 1px solid #cfc8ed;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 8px;
  font-weight: 800;
}

.merge-attribute-summary button.primary {
  color: #fff;
  background: #6754ed;
  border-color: #6e5adf;
}

.listing-inline-control .attribute-no-brand-button, .attribute-auto-generate-control button {
  color: #554489;
  background: #f4f1ff;
  border-color: #8b79d8;
}

.listing-inline-control .attribute-no-brand-button:disabled {
  color: #6f6592;
  opacity: 1;
  background: #e9e5f8;
  border-color: #cfc8ed;
}

.variant-table-toolbar {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #faf9ff, #fff);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 66px;
  padding: 12px 20px;
  display: flex;
}

.variant-table-toolbar > div:first-child {
  gap: 4px;
  display: grid;
}

.variant-table-toolbar strong {
  color: #34343c;
  font-size: 13px;
}

.variant-table-toolbar span {
  color: var(--muted);
  font-size: 10px;
}

.variant-table-toolbar > div:last-child {
  flex: none;
  gap: 8px;
  display: flex;
}

.variant-table-toolbar button, .variant-media-preview button, .variant-column-remove, .variant-header-action {
  color: #574c86;
  cursor: pointer;
  min-height: 32px;
  font: inherit;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d7d2ef;
  border-radius: 7px;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 780;
}

.variant-table-toolbar button.primary {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.variant-color-field-guide {
  color: #514879;
  background: linear-gradient(90deg, #f7f5ff, #fcfbff);
  border: 1px solid #d8d3f2;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  margin: 12px 18px 0;
  padding: 10px 13px;
  font-size: 10px;
  line-height: 1.55;
  display: flex;
}

.variant-color-field-guide > strong {
  color: #403570;
  flex: none;
  font-size: 11px;
}

.variant-color-field-guide b {
  color: #332a62;
}

.variant-color-name-control {
  gap: 5px;
  min-width: 150px;
  display: grid;
}

.listing-variant-table .variant-color-name-control input {
  width: 100%;
  min-height: 44px;
}

.variant-color-name-control small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.variant-mapping-alert {
  color: #76541d;
  background: linear-gradient(90deg, #fff9ea 0%, #fffdf7 100%);
  border: 1px solid #edcf91;
  border-radius: 10px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 12px 18px;
  padding: 11px 13px;
  display: grid;
}

.variant-mapping-alert-icon {
  color: #fff;
  background: #f3b83e;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}

.variant-mapping-alert-content {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.variant-mapping-alert-heading {
  align-items: center;
  gap: 7px;
  display: flex;
}

.variant-mapping-alert-heading strong {
  color: #66450f;
  font-size: 11px;
}

.variant-mapping-alert-heading em {
  color: #8a641a;
  background: #f8e4b9;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.variant-mapping-alert-issues {
  color: #694b18;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  display: flex;
}

.variant-mapping-alert-issues span:not(:last-child):after {
  content: "·";
  color: #c49e55;
  margin-left: 10px;
}

.variant-mapping-alert-content > small {
  color: #96733a;
  font-size: 8px;
  line-height: 1.4;
}

.variant-conflict-legend {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  display: flex;
}

.variant-conflict-legend > span {
  border: 1px solid var(--variant-conflict-border);
  border-left: 4px solid var(--variant-conflict-accent);
  background: var(--variant-conflict-bg);
  color: var(--variant-conflict-accent);
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 850;
  display: inline-flex;
}

.variant-conflict-legend > span small {
  color: #667085;
  font-size: 8px;
  font-weight: 700;
}

.variant-mapping-alert-actions {
  align-items: center;
  gap: 7px;
  display: flex;
}

.variant-mapping-alert-actions button, .variant-card-mode-status button {
  color: #875b0b;
  cursor: pointer;
  min-height: 32px;
  font: inherit;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d79f37;
  border-radius: 7px;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 800;
}

.variant-mapping-alert-actions button.primary {
  color: #fff;
  background: #8a5a05;
  border-color: #a56d08;
}

.variant-display-strategy {
  background: #f8fafc;
  border: 1px solid #cfd9e8;
  border-left: 4px solid #63748d;
  border-radius: 11px;
  gap: 10px;
  margin: 12px 18px;
  padding: 13px 15px;
  display: grid;
}

.variant-display-strategy.grouped {
  background: #f1fbf6;
  border-color: #a6dec5 #a6dec5 #a6dec5 #16845b;
}

.variant-display-strategy.separate {
  background: #f3f7fd;
  border-color: #b8cef0 #b8cef0 #b8cef0 #3267b2;
}

.variant-display-strategy.review {
  background: #fff9ea;
  border-color: #edcf91 #edcf91 #edcf91 #d09626;
}

.variant-display-strategy-heading, .variant-display-strategy-heading > div {
  align-items: center;
  gap: 9px;
  display: flex;
}

.variant-display-strategy-heading {
  justify-content: space-between;
}

.variant-display-strategy-heading span, .variant-display-strategy-heading em {
  color: #607087;
  background: #fffc;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

.variant-display-strategy-heading strong {
  color: #24364d;
  font-size: 12px;
}

.variant-display-strategy > p {
  color: #53647a;
  margin: 0;
  font-size: 9px;
  line-height: 1.55;
}

.variant-display-strategy-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.variant-display-strategy-facts > div {
  background: #ffffffb8;
  border: 1px solid #99a9be47;
  border-radius: 8px;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 8px 9px;
  display: grid;
}

.variant-display-strategy-facts small {
  color: #7b899b;
  font-size: 8px;
  font-weight: 800;
}

.variant-display-strategy-facts span {
  overflow-wrap: anywhere;
  color: #34465d;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.variant-display-strategy-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  display: flex;
}

.variant-display-strategy-actions button {
  color: #40536c;
  cursor: pointer;
  min-height: 30px;
  font: inherit;
  background: #fff;
  border: 1px solid #b8c6d8;
  border-radius: 7px;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 800;
}

.variant-card-mode-status {
  background: #f1fbf6;
  border: 1px solid #a6dec5;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 12px 18px;
  padding: 11px 13px;
  display: flex;
}

.variant-card-mode-status > div {
  gap: 3px;
  display: grid;
}

.variant-card-mode-status strong {
  color: #176b48;
  font-size: 11px;
}

.variant-card-mode-status span {
  color: #477561;
  font-size: 9px;
}

.variant-card-mode-status button {
  color: #176b48;
  border-color: #8bcdb1;
}

.listing-category-warning {
  background: #fff9ea;
  border: 1px solid #edcf91;
  border-radius: 8px;
  gap: 3px;
  margin-top: 8px;
  padding: 9px 10px;
  display: grid;
}

.listing-category-warning strong {
  color: #7a5314;
  font-size: 10px;
}

.listing-category-warning span {
  color: #8a6a35;
  font-size: 9px;
  line-height: 1.5;
}

.listing-field.returned-attribute {
  background: #f7f5ff;
  border-color: #8f7cff;
  box-shadow: 0 0 0 3px #6f52ff1a;
}

.listing-variant-table th:not(:first-child), .listing-variant-table td:not(:first-child) {
  min-width: 138px;
  position: static;
}

.listing-variant-table th.variant-column-skuName, .listing-variant-table td.variant-column-skuName {
  z-index: 3;
  min-width: 190px;
  box-shadow: 1px 0 0 var(--line);
  background: #fff;
  position: sticky;
  left: 52px;
}

.listing-variant-table th.variant-column-skuName {
  z-index: 5;
  background: #f8f8fa;
}

.listing-variant-table .variant-column-title {
  min-width: 260px;
}

.listing-variant-table .variant-column-ozonProductId {
  width: 170px;
  min-width: 170px;
}

.listing-variant-table .variant-column-barcode {
  min-width: 190px;
}

.listing-variant-table .variant-column-dimensions {
  min-width: 238px;
}

.listing-variant-table .variant-column-image, .listing-variant-table .variant-column-videoCover, .listing-variant-table .variant-column-video {
  min-width: 132px;
}

.listing-variant-table .variant-column-modelName, .listing-variant-table .variant-column-brand, .listing-variant-table .variant-column-productType {
  min-width: 188px;
}

.listing-variant-table .variant-column-offerId {
  width: 220px;
  min-width: 220px;
}

.listing-variant-table .variant-actions-column {
  min-width: 82px;
}

.listing-variant-table tbody tr.variant-conflict-row > td {
  border-bottom-color: var(--variant-conflict-border);
  background: var(--variant-conflict-bg);
}

.listing-variant-table tbody tr.variant-conflict-row > td:first-child {
  box-shadow: inset 4px 0 0 var(--variant-conflict-accent);
}

.listing-variant-table tbody tr.variant-conflict-row > td.variant-column-skuName {
  background: var(--variant-conflict-bg);
  box-shadow: 1px 0 0 var(--variant-conflict-border);
}

.variant-sequence > span {
  display: block;
}

.variant-conflict-badge {
  border: 1px solid var(--variant-conflict-border);
  color: var(--variant-conflict-accent);
  white-space: nowrap;
  background: #fff;
  border-radius: 999px;
  margin-top: 5px;
  padding: 2px 5px;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
}

.attribute-help {
  vertical-align: middle;
  margin-left: 6px;
}

.attribute-field-meta-primary {
  align-items: center;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.attribute-field-meta-primary .attribute-help {
  margin-left: 0;
}

.variant-multi-select {
  min-width: 160px;
  position: relative;
}

.variant-multi-select-control {
  border: 1px solid var(--line-strong);
  cursor: pointer;
  width: 100%;
  min-height: 40px;
  color: var(--ink);
  background: linear-gradient(#fff, #fdfdfe);
  border-radius: 10px;
  outline: none;
  align-items: center;
  gap: 8px;
  padding: 5px 7px 5px 9px;
  transition: border-color .18s, box-shadow .18s, background .18s;
  display: flex;
  box-shadow: 0 1px 2px #1e183708;
}

.variant-multi-select-control:hover {
  background: #fff;
  border-color: #b7afdc;
}

.variant-multi-select-selected {
  text-align: left;
  flex-wrap: wrap;
  flex: auto;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.variant-multi-select-chip {
  color: #5544b6;
  cursor: pointer;
  max-width: 100%;
  min-height: 27px;
  font: inherit;
  text-align: left;
  background: #f2efff;
  border: 1px solid #dcd6fa;
  border-radius: 7px;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  transition: border-color .12s, background .12s;
  display: inline-flex;
}

.variant-multi-select-chip:hover, .variant-multi-select-chip:focus-visible {
  background: #eae5ff;
  border-color: #afa3ec;
  outline: none;
}

.variant-multi-select-chip > span {
  overflow-wrap: anywhere;
  white-space: normal;
  min-width: 0;
}

.variant-multi-select-chip > i {
  color: #8779c9;
  flex: none;
  font-size: 13px;
  font-style: normal;
  line-height: 1;
}

.variant-multi-select-placeholder {
  color: #8a8493;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
}

.variant-multi-select-control > small {
  color: #6654cb;
  white-space: nowrap;
  background: #f0edff;
  border-radius: 999px;
  flex: none;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 750;
}

.variant-multi-select-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  flex: 0 0 26px;
  place-items: center;
  width: 26px;
  height: 28px;
  padding: 0;
  display: grid;
}

.variant-multi-select-toggle:hover {
  background: #f2f0f7;
}

.variant-multi-select-toggle > i {
  border-bottom: 1.5px solid #777180;
  border-right: 1.5px solid #777180;
  width: 7px;
  height: 7px;
  transition: transform .2s;
  transform: translateY(-2px)rotate(45deg);
}

.variant-multi-select.open .variant-multi-select-control {
  border-color: #9386ff;
  box-shadow: 0 0 0 3px #7663ff14;
}

.variant-multi-select.open .variant-multi-select-toggle > i {
  transform: translateY(2px)rotate(225deg);
}

.variant-multi-select-control:focus-visible {
  border-color: #9386ff;
  box-shadow: 0 0 0 3px #7663ff14;
}

.variant-multi-select-options {
  z-index: 35;
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  transform-origin: 0 0;
  background: #fffffff7;
  border: 1px solid #d8d5e5e0;
  border-radius: 14px;
  gap: 5px;
  width: max(100%, 260px);
  max-width: min(360px, 100vw - 32px);
  padding: 7px;
  animation: .16s cubic-bezier(.2, .8, .2, 1) variant-multi-select-in;
  display: grid;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  box-shadow: 0 18px 48px #1d163a2b, 0 3px 12px #1d163a14;
}

.variant-multi-select-options-heading {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 7px 5px 9px;
  display: flex;
}

.variant-multi-select-options-heading > div {
  gap: 1px;
  display: grid;
}

.variant-multi-select-options-heading strong {
  color: #393445;
  font-size: 11px;
}

.variant-multi-select-options-heading small {
  color: #858091;
  white-space: nowrap;
  font-size: 9px;
}

.variant-multi-select-options-heading > button {
  color: #6553ca;
  cursor: pointer;
  min-height: 27px;
  font: inherit;
  background: #f0edff;
  border: 0;
  border-radius: 8px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 750;
}

.variant-multi-select-search {
  color: #8d8798;
  background: #f4f3f7;
  border-radius: 9px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 0 3px 2px;
  padding: 0 9px;
  display: grid;
}

.listing-field .variant-multi-select-search > input, .listing-variant-table .variant-multi-select-search > input {
  width: 100%;
  min-height: 34px;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 7px 0;
  font-size: 11px;
}

.variant-multi-select-option-list {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  max-height: 220px;
  padding: 1px 2px;
  display: grid;
  overflow: auto;
}

.variant-multi-select-option {
  color: #394150;
  width: 100%;
  min-height: 36px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  font-size: 11px;
  transition: background .12s, color .12s;
  display: flex;
}

.variant-multi-select-option:hover {
  background: #f5f3fb;
}

.variant-multi-select-option.selected {
  color: #4f3cb2;
  background: #efecff;
}

.variant-multi-select-option:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.variant-multi-select-option > i {
  color: #0000;
  background: #fff;
  border: 1px solid #d4d0dd;
  border-radius: 6px;
  flex: 0 0 18px;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  transition: border-color .12s, background .12s, color .12s, transform .12s;
  display: grid;
}

.variant-multi-select-option.selected > i {
  color: #fff;
  background: #6d58e7;
  border-color: #6d58e7;
  transform: scale(1.03);
}

.variant-multi-select-option > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
  min-width: 0;
  line-height: 1.4;
  overflow: hidden;
}

.variant-multi-select-empty {
  color: #8a8493;
  text-align: center;
  padding: 24px 12px;
  font-size: 11px;
}

.variant-multi-select-footer {
  border-top: 1px solid #eeebf3;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 3px;
  display: flex;
}

.variant-multi-select-footer span {
  color: #62597b;
  font-size: 9px;
  font-weight: 700;
}

.variant-multi-select-footer small {
  color: #9993a1;
  font-size: 8px;
}

@keyframes variant-multi-select-in {
  from {
    opacity: 0;
    transform: translateY(-4px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.variant-column-header {
  white-space: normal;
  align-content: space-between;
  gap: 7px;
  min-height: 48px;
  display: grid;
}

.variant-column-header > span {
  color: #3d3d46;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  font-size: 11px;
  display: flex;
}

.variant-column-header > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.variant-column-header .variant-header-actions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  display: flex;
}

.variant-column-header .variant-title-sync, .variant-column-header .variant-header-action {
  color: #6652c8;
  background: #f3f0ff;
  border-color: #d7d0ff;
  min-height: 24px;
  margin-left: 0;
  font-size: 9px;
}

.variant-column-header .variant-header-action.primary {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.variant-column-header .variant-header-action.primary:hover, .variant-column-header .variant-header-action.primary:focus-visible {
  border-color: var(--violet-dark);
  background: var(--violet-dark);
}

.variant-column-header .variant-column-remove {
  width: 24px;
  min-height: 24px;
  color: var(--red);
  border-color: #efd2d5;
  padding: 0;
}

.variant-column-header .variant-column-return {
  color: #6652c8;
  background: #fff;
  border-color: #d7d0ff;
  width: 24px;
  padding: 0;
  position: relative;
}

.variant-column-header .variant-column-return:hover, .variant-column-header .variant-column-return:focus-visible {
  color: #5540b8;
  background: #f2efff;
  border-color: #8d7ee2;
}

.variant-column-return-icon {
  color: currentColor;
  text-align: center;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  display: block;
}

.variant-column-return:after {
  z-index: 30;
  color: #fff;
  content: attr(data-tooltip);
  opacity: 0;
  pointer-events: none;
  white-space: normal;
  background: #302b42;
  border-radius: 7px;
  width: max-content;
  max-width: 210px;
  padding: 6px 8px;
  font-size: 8px;
  font-weight: 650;
  line-height: 1.4;
  transition: opacity .15s, transform .15s;
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translate(-50%, -3px);
}

.variant-column-return:hover:after, .variant-column-return:focus-visible:after {
  opacity: 1;
  transform: translate(-50%);
}

.variant-required-column {
  color: #6754c8;
  white-space: nowrap;
  background: #f0edff;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 760;
  display: inline-flex;
}

.variant-dimensions-cell {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.variant-dimensions-cell label {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 8px;
  min-width: 0;
  height: 44px;
  display: block;
  position: relative;
  overflow: hidden;
}

.variant-dimensions-cell label span {
  z-index: 1;
  color: var(--muted);
  pointer-events: none;
  text-align: center;
  font-size: 9px;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translateY(-50%);
}

.variant-dimensions-cell input {
  appearance: textfield;
  text-align: center;
  border: 0;
  border-radius: 0;
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding-inline: 20px;
}

.variant-dimensions-cell input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.variant-dimensions-cell input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.variant-dimensions-cell label:focus-within {
  border-color: #9386ff;
  box-shadow: 0 0 0 3px #7663ff14;
}

.variant-dimensions-cell label:focus-within input {
  box-shadow: none;
}

.variant-shared-required-value {
  background: #f8f7fc;
  border: 1px solid #e1ddf4;
  border-radius: 8px;
  gap: 4px;
  padding: 9px 10px;
  display: grid;
}

.variant-shared-required-value strong {
  color: #403b55;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.variant-shared-required-value small {
  color: var(--muted);
  font-size: 8px;
}

.variant-media-preview {
  justify-items: center;
  gap: 7px;
  display: grid;
}

.variant-media-preview img {
  border: 1px solid var(--line);
  object-fit: cover;
  border-radius: 8px;
  width: 82px;
  height: 82px;
}

.variant-media-preview a {
  color: var(--violet-dark);
  font-size: 9px;
  text-decoration: none;
}

.variant-column-backdrop {
  z-index: 180;
  padding: 20px;
  overflow: hidden;
}

.variant-column-modal {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(900px, 100vw - 40px);
  height: min(860px, 100dvh - 40px);
  max-height: none;
  padding: 0;
  display: grid;
  overflow: hidden;
}

.variant-column-modal > header {
  border-bottom: 1px solid var(--line);
  background: #faf9ff;
  align-items: center;
  padding: 18px 20px;
}

.variant-column-modal > header h2 {
  margin-top: 3px;
}

.variant-column-modal > header > button {
  cursor: pointer;
  background: #fff;
  border: 1px solid #ddd8f3;
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
}

.variant-column-modal-body {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  min-height: 0;
  padding: 18px 20px 22px;
  overflow: hidden auto;
}

.variant-column-modal-body > p {
  color: var(--muted);
  margin: 0 0 16px;
  font-size: 10px;
  line-height: 1.7;
}

.variant-column-modal > footer {
  border-top: 1px solid var(--line);
  background: #faf9fd;
  justify-content: flex-end;
  gap: 9px;
  margin: 0;
  padding: 13px 20px;
  display: flex;
}

.variant-column-modal > footer button {
  min-width: 96px;
}

.variant-table-toolbar button.active {
  color: #5542b7;
  background: #f0edff;
  border-color: #8c7eff;
  box-shadow: 0 0 0 3px #7663ff14;
}

.variant-table-toolbar button.primary.active {
  border-color: var(--violet-dark);
  background: var(--violet-dark);
  color: #fff;
}

.variant-pricing-backdrop {
  z-index: 140;
  padding: 20px;
  overflow: hidden;
}

.variant-pricing-modal {
  will-change: transform;
  border: 1px solid #d9d4ee;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1320px, 100vw - 40px);
  height: min(920px, 100dvh - 40px);
  max-height: none;
  padding: 0;
  display: grid;
  overflow: hidden;
}

.variant-pricing-modal.old {
  height: auto;
  max-height: calc(100dvh - 40px);
}

.variant-pricing-modal.dragging {
  box-shadow: 0 30px 100px #14152a61;
}

.variant-pricing-modal > header {
  border-bottom: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: #f7f5ff;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 15px 20px;
  display: flex;
}

.variant-pricing-modal.dragging > header {
  cursor: grabbing;
}

.variant-pricing-modal > header > div {
  gap: 2px;
  display: grid;
}

.variant-pricing-modal > header span {
  color: var(--violet-dark);
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 820;
}

.variant-pricing-modal > header h2 {
  color: #34313f;
  margin: 2px 0;
  font-size: 17px;
}

.variant-pricing-modal > header small {
  color: #6d6780;
  font-size: 9px;
}

.variant-pricing-modal > header > button {
  color: #5b4d98;
  width: 36px;
  height: 36px;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d5cff1;
  border-radius: 9px;
  flex: none;
  place-items: center;
  padding: 0 12px;
  font-size: 20px;
  line-height: 1;
  display: grid;
}

.variant-pricing-scroll-body {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  min-height: 0;
  padding: 0 20px 20px;
  overflow: hidden auto;
}

.variant-pricing-scroll-body > p {
  color: var(--muted);
  margin: 16px 0;
  font-size: 10px;
  line-height: 1.7;
}

.variant-pricing-modal > footer {
  border-top: 1px solid var(--line);
  background: #faf9fd;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 20px;
  display: flex;
}

.variant-pricing-modal > footer > span {
  min-width: 0;
  color: var(--muted);
  margin-right: auto;
  font-size: 10px;
  line-height: 1.45;
}

.variant-pricing-modal > footer > span.error {
  color: #b42318;
  font-weight: 750;
}

.variant-pricing-modal > footer button {
  border: 1px solid var(--line-strong);
  color: #55515f;
  cursor: pointer;
  min-height: 38px;
  font: inherit;
  background: #fff;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 760;
}

.variant-pricing-modal > footer .primary-button {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.variant-pricing-modal > footer button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.variant-column-option-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.variant-column-option-list > label {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fbfbfd;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.variant-column-option-list input {
  width: 16px;
  min-width: 16px;
}

.variant-column-option-list label > span {
  gap: 3px;
  display: grid;
}

.variant-column-option-list strong {
  color: var(--ink);
  font-size: 11px;
}

.variant-column-option-list strong em {
  color: var(--violet-dark);
  margin-left: 6px;
  font-size: 8px;
  font-style: normal;
}

.variant-column-option-list small, .variant-attribute-add small {
  color: var(--muted);
  font-size: 9px;
}

.variant-attribute-add {
  background: #f8f6ff;
  border: 1px solid #ddd7ff;
  border-radius: 10px;
  gap: 7px;
  margin-top: 16px;
  padding: 13px;
  display: grid;
}

.variant-attribute-add > div:first-child {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.variant-attribute-add strong {
  font-size: 11px;
}

.variant-attribute-add > input, .variant-pricing-template-row select, .variant-pricing-rule-grid select, .variant-pricing-settings-grid select {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-width: 0;
  min-height: 40px;
  color: var(--ink);
  font: inherit;
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px;
}

.variant-attribute-option-list {
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #ddd9ec;
  border-radius: 9px;
  max-height: 270px;
  display: grid;
  overflow-y: auto;
}

.variant-attribute-option-list > button {
  min-height: 52px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #ece9f4;
  border-radius: 0;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  display: flex;
}

.variant-attribute-option-list > button:last-child {
  border-bottom: 0;
}

.variant-attribute-option-list > button:hover, .variant-attribute-option-list > button:focus-visible {
  background: #f5f2ff;
}

.variant-attribute-option-list > button span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.variant-attribute-option-list > button strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.variant-attribute-option-list > button em {
  color: var(--violet-dark);
  flex: none;
  font-size: 9px;
  font-style: normal;
  font-weight: 780;
}

.variant-attribute-option-list > p {
  color: var(--muted);
  text-align: center;
  margin: 0;
  padding: 24px;
  font-size: 10px;
}

.variant-pricing-modal input {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-width: 0;
  min-height: 40px;
  color: var(--ink);
  font: inherit;
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px;
}

.variant-media-current {
  border: 1px solid var(--line);
  background: #f8f8fa;
  border-radius: 10px;
  justify-items: center;
  gap: 7px;
  padding: 12px;
  display: grid;
}

.variant-media-current img, .variant-media-current video {
  border-radius: 8px;
  max-width: 100%;
  max-height: 280px;
  display: block;
}

.variant-media-current a {
  color: var(--violet-dark);
  font-size: 10px;
  text-decoration: none;
}

.variant-media-upload {
  background: #faf9ff;
  border: 1px dashed #cfc8f3;
  border-radius: 9px;
  padding: 12px;
}

.variant-video-requirements {
  background: #f8f6ff;
  border: 1px solid #d9d2ff;
  border-radius: 10px;
  gap: 8px;
  padding: 12px 14px;
  display: grid;
}

.variant-video-requirements strong {
  color: #433b68;
  font-size: 11px;
}

.variant-video-requirements ul {
  color: #625c75;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  font-size: 10px;
  line-height: 1.55;
  display: grid;
}

.variant-video-requirements label {
  color: #483d7c;
  border-top: 1px solid #e2ddf8;
  align-items: center;
  gap: 7px;
  padding-top: 8px;
  font-size: 10px;
  font-weight: 720;
  display: flex;
}

.variant-video-requirements input {
  width: 15px;
  height: 15px;
}

.variant-pricing-template-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
  display: grid;
}

.variant-pricing-basis-note {
  background: #f4fbf7;
  border: 1px solid #cfe6d8;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 11px 13px;
  display: flex;
}

.variant-pricing-basis-note > div {
  gap: 3px;
  display: grid;
}

.variant-pricing-basis-note span, .variant-pricing-basis-note small {
  color: #5d7465;
  font-size: 9px;
}

.variant-pricing-basis-note strong {
  color: #276341;
  font-size: 11px;
}

.variant-pricing-basis-note em {
  color: #237046;
  background: #dff2e6;
  border-radius: 999px;
  flex: none;
  padding: 5px 9px;
  font-size: 9px;
  font-style: normal;
  font-weight: 780;
}

.variant-pricing-template-row label {
  min-width: 0;
  color: var(--muted);
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  display: grid;
}

.variant-pricing-template-card {
  background: linear-gradient(135deg, #faf9ff, #fff);
  border: 1px solid #d8d2ff;
  border-radius: 11px;
  padding: 14px;
  box-shadow: 0 5px 16px #5542be0f;
}

.variant-pricing-template-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.variant-pricing-template-heading > div {
  gap: 3px;
  display: grid;
}

.variant-pricing-template-heading strong {
  color: #3e3767;
  font-size: 12px;
}

.variant-pricing-template-heading span {
  color: var(--muted);
  font-size: 9px;
}

.variant-pricing-template-heading em {
  color: #624fc4;
  background: #ece8ff;
  border-radius: 999px;
  flex: none;
  padding: 4px 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 780;
}

.variant-pricing-template-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.variant-pricing-template-actions button {
  color: #594d93;
  cursor: pointer;
  min-height: 40px;
  font: inherit;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d3cdf5;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 780;
}

.variant-pricing-template-actions button.primary {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.variant-pricing-template-actions button.danger {
  min-height: 40px;
  color: var(--red);
  background: #fff;
  border: 1px solid #efd2d5;
  border-radius: 8px;
}

.variant-pricing-template-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.variant-pricing-template-notice {
  background: var(--green-pale);
  color: var(--green);
  border-radius: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 9px;
}

.variant-pricing-rule-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  display: grid;
}

.variant-pricing-details-card {
  background: #faf9fd;
  border: 1px solid #ddd8ee;
  border-radius: 11px;
  margin-top: 16px;
  overflow: hidden;
}

.variant-pricing-details-card.open {
  background: #fff;
}

.variant-pricing-modal .variant-pricing-details-toggle {
  width: 100%;
  min-height: 58px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  background: #f7f5fc;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
  display: flex;
}

.variant-pricing-modal .variant-pricing-details-toggle:hover {
  background: #f2effb;
}

.variant-pricing-modal .variant-pricing-details-toggle > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.variant-pricing-modal .variant-pricing-details-toggle strong {
  color: #3d374c;
  font-size: 12px;
}

.variant-pricing-modal .variant-pricing-details-toggle span {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.variant-pricing-modal .variant-pricing-details-toggle em {
  color: #594a98;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d4cdf2;
  border-radius: 8px;
  flex: none;
  padding: 7px 10px;
  font-size: 9px;
  font-style: normal;
  font-weight: 780;
}

.variant-pricing-details-content {
  border-top: 1px solid #e3dfef;
  padding: 0 14px 15px;
}

.variant-pricing-section-heading {
  border-bottom: 1px solid #e5e2f1;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 0 2px 8px;
  display: flex;
}

.variant-pricing-section-heading > div {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.variant-pricing-section-heading strong {
  color: #3d394a;
  font-size: 11px;
}

.variant-pricing-section-heading span {
  color: var(--muted);
  font-size: 9px;
}

.variant-pricing-settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 11px;
  display: grid;
}

.variant-pricing-settings-grid label {
  min-width: 0;
  color: var(--muted);
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  position: relative;
}

.variant-pricing-settings-grid label small {
  color: var(--muted);
  position: absolute;
  bottom: 12px;
  right: 10px;
}

.variant-pricing-rule-grid label {
  color: var(--muted);
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  position: relative;
}

.variant-pricing-rule-grid label small {
  position: absolute;
  bottom: 12px;
  right: 10px;
}

.variant-pricing-summary, .variant-pricing-preview {
  border: 1px solid var(--line);
  background: #fafafd;
  border-radius: 9px;
  gap: 6px;
  margin-top: 14px;
  padding: 12px;
  display: grid;
}

.variant-pricing-summary strong, .variant-pricing-preview > strong {
  font-size: 11px;
}

.variant-pricing-summary span, .variant-pricing-summary a {
  color: var(--muted);
  font-size: 9px;
}

.variant-pricing-summary a {
  color: var(--violet-dark);
  text-decoration: none;
}

.variant-pricing-preview > div {
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  padding-top: 6px;
  font-size: 9px;
  display: grid;
}

.variant-pricing-preview > div span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.variant-pricing-preview > div small {
  color: var(--muted);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 500;
}

.variant-pricing-preview > div em {
  color: var(--muted);
  font-style: normal;
}

.variant-pricing-error {
  color: #a52d3a;
  background: #fff5f6;
  border: 1px solid #f0c8cd;
  border-radius: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  font-size: 10px;
}

@media (max-width: 1100px) {
  .variant-pricing-template-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .variant-pricing-template-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .variant-table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .variant-table-toolbar > div:last-child, .variant-pricing-template-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .variant-color-field-guide {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-no-brand-choice, .variant-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-no-brand-choice button {
    width: 100%;
    max-width: none;
  }

  .variant-pagination > div {
    justify-content: space-between;
  }

  .variant-mapping-alert {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: stretch;
  }

  .variant-mapping-alert-actions {
    grid-column: 1 / -1;
  }

  .variant-mapping-alert-actions button {
    flex: 1;
    width: 100%;
  }

  .variant-card-mode-status {
    flex-direction: column;
    align-items: stretch;
  }

  .variant-card-mode-status button {
    width: 100%;
  }

  .variant-display-strategy-heading, .variant-display-strategy-heading > div, .variant-display-strategy-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .variant-display-strategy-facts {
    grid-template-columns: 1fr;
  }

  .variant-display-strategy-actions button {
    width: 100%;
  }

  .variant-column-option-list, .variant-pricing-rule-grid, .variant-pricing-settings-grid {
    grid-template-columns: 1fr;
  }

  .variant-media-modal, .variant-pricing-modal {
    max-height: calc(100vh - 24px);
  }

  .variant-media-modal {
    padding: 18px;
  }

  .variant-column-backdrop {
    padding: 12px;
  }

  .variant-column-modal {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
  }

  .variant-column-modal > header, .variant-column-modal-body, .variant-column-modal > footer {
    padding-inline: 16px;
  }

  .variant-pricing-backdrop {
    padding: 12px;
  }

  .variant-pricing-modal > footer {
    flex-wrap: wrap;
  }

  .variant-pricing-modal > footer > span {
    flex-basis: 100%;
  }

  .variant-pricing-modal > header, .variant-pricing-modal > footer, .variant-pricing-scroll-body {
    padding-inline: 16px;
  }

  .variant-pricing-template-actions {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    display: grid;
  }

  .variant-pricing-basis-note {
    flex-direction: column;
    align-items: flex-start;
  }

  .variant-pricing-section-heading > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .variant-pricing-modal .variant-pricing-details-toggle {
    flex-direction: column;
    align-items: flex-start;
  }

  .variant-pricing-modal .variant-pricing-details-toggle span {
    white-space: normal;
  }

  .variant-pricing-modal > footer {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    display: grid;
  }
}

.listing-other-grid {
  grid-template-columns: 1fr;
}

.listing-issue-field {
  background: #f8f9fb;
  border: 1px solid #d9dce5;
  border-radius: 9px;
  gap: 8px;
  padding: 13px 14px;
  display: grid;
}

.listing-issue-field > span {
  color: #343640;
  font-size: 10px;
  font-weight: 800;
}

.listing-issue-field > span small, .listing-issue-field > small {
  color: #838691;
  font-size: 9px;
  font-weight: 600;
}

.listing-issue-field.has-issues {
  background: #fff8f8;
  border-color: #edc8cc;
}

.listing-issue-list {
  gap: 6px;
  max-height: 220px;
  display: grid;
  overflow-y: auto;
}

.listing-issue-list p, .listing-issue-empty {
  color: #8c3039;
  background: #fff;
  border-radius: 6px;
  margin: 0;
  padding: 8px 10px;
  font-size: 9px;
  line-height: 1.55;
}

.listing-issue-empty {
  color: #5c7565;
}

.source-collected-panel {
  background: #faf9ff;
  border: 1px solid #ddd9f0;
  border-radius: 10px;
  margin: 0 20px 20px;
  overflow: hidden;
}

.source-collected-panel > header {
  border-bottom: 1px solid #e4e1f0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 10px 14px;
  display: flex;
}

.source-collected-panel > header > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.source-collected-panel > header strong {
  color: #3f3d4a;
  font-size: 12px;
}

.source-collected-panel > header span {
  color: var(--violet-dark);
  background: #e9e6ff;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 760;
}

.source-collected-panel > header small {
  color: var(--muted);
  font-size: 9px;
}

.source-collected-facts {
  background: #e8e5f1;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  display: grid;
}

.source-collected-facts article {
  background: #fff;
  gap: 4px;
  min-width: 0;
  padding: 11px 13px;
  display: grid;
}

.source-collected-facts article span {
  color: var(--muted);
  font-size: 9px;
}

.source-collected-facts article strong {
  overflow-wrap: anywhere;
  color: #3f4049;
  font-size: 11px;
  line-height: 1.5;
}

.source-attribute-heading {
  border-top: 1px solid var(--line);
}

.source-attribute-compact-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  padding: 12px 20px 20px;
  display: grid;
}

.source-attribute-compact-grid article {
  border: 1px solid var(--line);
  background: #fafafa;
  border-radius: 7px;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  display: flex;
}

.source-attribute-compact-grid span {
  color: var(--muted);
  flex: none;
  font-size: 10px;
}

.source-attribute-compact-grid strong {
  overflow-wrap: anywhere;
  color: #3f4049;
  text-align: right;
  min-width: 0;
  font-size: 11px;
  font-weight: 650;
}

.source-video-summary {
  background: #fff;
  border-bottom: 1px solid #e8e5f1;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  display: flex;
}

.source-video-summary > img, .source-video-summary > span {
  width: 58px;
  height: 44px;
  color: var(--muted);
  object-fit: cover;
  background: #eceaf4;
  border-radius: 7px;
  flex: none;
  place-items: center;
  font-size: 9px;
  display: grid;
}

.source-video-summary > div {
  gap: 3px;
  display: grid;
}

.source-video-summary strong {
  color: #3f4049;
  font-size: 11px;
}

.source-video-summary a {
  color: var(--violet-dark);
  font-size: 10px;
  text-decoration: none;
}

.source-collected-facts.distribution {
  border-top: 1px solid #e8e5f1;
}

.source-collected-tags {
  background: #fff;
  border-top: 1px solid #e8e5f1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  display: flex;
}

.source-collected-tags > strong {
  color: #494a52;
  margin-right: 3px;
  font-size: 10px;
}

.source-collected-tags > span {
  color: #5f55a3;
  background: #f7f5ff;
  border: 1px solid #ded9ff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 650;
}

.ozon-debug-page {
  background: #f5f5f2;
  min-width: 0;
  padding: 24px 28px 52px;
  overflow-y: auto;
}

.ozon-debug-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  max-width: 1480px;
  margin: 0 auto 18px;
  display: flex;
}

.ozon-debug-header > div > span {
  color: var(--violet-dark);
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 800;
}

.ozon-debug-header h1 {
  color: var(--ink);
  margin: 5px 0 4px;
  font-size: 23px;
}

.ozon-debug-header p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
}

.ozon-debug-header > a {
  border: 1px solid var(--line-strong);
  color: var(--violet-dark);
  background: #fff;
  border-radius: 8px;
  flex: none;
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
}

.ozon-debug-notice, .ozon-debug-card {
  width: 100%;
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}

.ozon-debug-notice {
  color: #51499a;
  background: #f1efff;
  border: 1px solid #d9d5ee;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 10px 13px;
  font-size: 11px;
}

.ozon-debug-notice.error {
  color: #a13c43;
  background: #fff3f3;
  border-color: #efcdcf;
}

.ozon-debug-notice.success {
  color: #267247;
  background: #f2faf5;
  border-color: #c6e2cf;
}

.ozon-debug-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px #1c1d2f08;
}

.ozon-debug-card > header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 12px 18px;
  display: flex;
}

.ozon-debug-card > header > div {
  align-items: center;
  gap: 9px;
  display: flex;
}

.ozon-debug-card > header strong {
  color: #363740;
  font-size: 13px;
}

.ozon-debug-card > header span {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: 99px;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 750;
}

.ozon-debug-card > header small {
  color: var(--muted);
  font-size: 9px;
}

.ozon-debug-card button {
  border: 1px solid var(--line-strong);
  color: #44454d;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 720;
}

.ozon-debug-card button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.ozon-debug-operation-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px 0;
  display: grid;
}

.ozon-debug-operation-grid > button {
  text-align: left;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  display: grid;
}

.ozon-debug-operation-grid strong {
  color: #33343c;
  font-size: 11px;
}

.ozon-debug-operation-grid code {
  color: var(--violet-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.ozon-debug-operation-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

.ozon-debug-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  padding: 16px 18px;
  display: grid;
}

.ozon-debug-fields label {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.ozon-debug-fields label > span {
  color: #4b4c54;
  font-size: 10px;
  font-weight: 720;
}

.ozon-debug-fields input, .ozon-debug-fields select, .ozon-debug-category-search input {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-width: 0;
  min-height: 38px;
  color: var(--ink);
  font: inherit;
  background: #fff;
  border-radius: 7px;
  outline: none;
  padding: 8px 10px;
  font-size: 11px;
}

.parameter-card > footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: #fafafa;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  font-size: 10px;
  display: flex;
}

.parameter-card > footer > div {
  gap: 5px;
  min-width: 0;
  display: flex;
}

.parameter-card > footer > div > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.parameter-card > footer > button {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
  flex: none;
  padding: 9px 15px;
}

.ozon-debug-category-search {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  display: grid;
}

.ozon-debug-category-search small {
  color: var(--muted);
  font-size: 9px;
}

.ozon-debug-category-results {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 340px;
  padding: 12px 18px 18px;
  display: grid;
  overflow-y: auto;
}

.ozon-debug-category-results > button {
  text-align: left;
  gap: 3px;
  min-width: 0;
  display: grid;
}

.ozon-debug-category-results > button.active {
  background: var(--violet-pale);
  border-color: #8c7eff;
}

.ozon-debug-category-results strong {
  color: #3d3e46;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.ozon-debug-category-results span {
  color: var(--muted);
  font-size: 8px;
}

.ozon-debug-table-wrap {
  overflow-x: auto;
}

.ozon-debug-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 10px;
}

.ozon-debug-table-wrap th, .ozon-debug-table-wrap td {
  border-bottom: 1px solid var(--line);
  color: #55565e;
  text-align: left;
  vertical-align: middle;
  padding: 9px 12px;
}

.ozon-debug-table-wrap th {
  color: var(--muted);
  white-space: nowrap;
  background: #fafafa;
  font-size: 9px;
}

.ozon-debug-table-wrap tr.required {
  background: #fffdf4;
}

.ozon-debug-table-wrap td:first-child {
  min-width: 230px;
}

.ozon-debug-table-wrap td:first-child strong, .ozon-debug-table-wrap td:first-child small {
  display: block;
}

.ozon-debug-table-wrap td:first-child strong {
  color: #373840;
  font-size: 10px;
}

.ozon-debug-table-wrap td:first-child small {
  max-width: 520px;
  color: var(--muted);
  margin-top: 2px;
  font-size: 8px;
}

.ozon-debug-table-wrap code {
  color: var(--violet-dark);
  font-size: 9px;
}

.ozon-debug-summary {
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  display: grid;
}

.ozon-debug-summary article {
  border-right: 1px solid var(--line);
  gap: 3px;
  padding: 12px 15px;
  display: grid;
}

.ozon-debug-summary span {
  color: var(--muted);
  font-size: 9px;
}

.ozon-debug-summary strong {
  color: #393a42;
  font-size: 16px;
}

.ozon-debug-json-grid {
  grid-template-columns: minmax(280px, .7fr) minmax(360px, 1.3fr);
  gap: 12px;
  padding: 14px 18px 18px;
  display: grid;
}

.ozon-debug-json-grid details {
  border: 1px solid var(--line);
  background: #fafafa;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.ozon-debug-json-grid summary {
  color: #4b4c55;
  cursor: pointer;
  padding: 9px 11px;
  font-size: 10px;
  font-weight: 720;
}

.ozon-debug-json-grid pre {
  border-top: 1px solid var(--line);
  color: #e5e5ec;
  white-space: pre-wrap;
  word-break: break-word;
  background: #20212a;
  max-height: 520px;
  margin: 0;
  padding: 13px;
  font: 9px / 1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow: auto;
}

.ozon-debug-header {
  align-items: center;
  max-width: 1500px;
  margin-bottom: 20px;
}

.ozon-debug-heading {
  gap: 7px;
  min-width: 0;
  display: grid;
}

.ozon-debug-heading .eyebrow {
  color: var(--violet-dark);
  margin: 0;
}

.ozon-debug-title-row {
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.ozon-debug-title-row > span {
  background: linear-gradient(145deg, var(--violet-dark), #8875ff);
  color: #fff;
  letter-spacing: .04em;
  border-radius: 11px;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 10px;
  font-weight: 850;
  display: grid;
  box-shadow: 0 8px 20px #5844e838;
}

.ozon-debug-title-row h1 {
  letter-spacing: -.035em;
  margin: 0 0 4px;
  font-size: 28px;
}

.ozon-debug-title-row p {
  font-size: 11px;
  line-height: 1.55;
}

.ozon-debug-header-actions {
  flex: none;
}

.ozon-debug-header-actions a {
  text-decoration: none;
}

.ozon-debug-workspace {
  grid-template-columns: minmax(340px, .78fr) minmax(600px, 1.42fr);
  align-items: start;
  gap: 16px;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto 16px;
  display: grid;
}

.ozon-debug-workspace .ozon-debug-card, .ozon-debug-page > .ozon-debug-card {
  max-width: 1500px;
  margin-top: 0;
  margin-bottom: 16px;
}

.ozon-debug-workspace .ozon-debug-card {
  width: 100%;
  margin-bottom: 0;
}

.ozon-debug-card > header.product-list-heading {
  min-height: 64px;
  padding: 13px 16px;
}

.ozon-debug-card > header.product-list-heading > div {
  min-width: 0;
}

.ozon-debug-card > header.product-list-heading h2 {
  color: #30313a;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  display: flex;
}

.ozon-debug-card > header.product-list-heading > div > span {
  white-space: nowrap;
}

.ozon-debug-step {
  background: var(--violet);
  color: #fff;
  border-radius: 7px;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 10px;
  font-weight: 850;
  display: grid;
  box-shadow: 0 4px 10px #5844e82b;
}

.ozon-debug-card > header.product-list-heading small b {
  color: #4f4a79;
  font-weight: 800;
}

.ozon-debug-category-search.online-control-card, .ozon-debug-fields.online-control-card {
  width: auto;
  max-width: none;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.ozon-debug-category-search.online-control-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
  padding: 14px 16px 12px;
}

.ozon-debug-category-search small {
  padding-left: 2px;
}

.ozon-debug-category-results.creation-method-tabs {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  max-height: 484px;
  margin: 0;
  padding: 0 16px 16px;
}

.ozon-debug-category-results > button {
  grid-template-rows: auto auto;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 9px;
  padding: 10px;
}

.ozon-debug-category-results > button > span {
  color: #71727c;
  background: #f0eff5;
  border-radius: 8px;
  grid-row: 1 / 3;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 9px;
  font-weight: 800;
  display: grid;
}

.ozon-debug-category-results > button.active > span {
  background: var(--violet);
  color: #fff;
}

.ozon-debug-category-results > button.active {
  background: linear-gradient(135deg, var(--violet-dark), var(--violet));
  border-color: #0000;
  box-shadow: 0 7px 17px #5844e833;
}

.ozon-debug-category-results > button.active strong, .ozon-debug-category-results > button.active small {
  color: #fff;
}

.ozon-debug-category-results strong {
  font-size: 11px;
}

.ozon-debug-category-results small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.ozon-debug-empty {
  min-height: 300px;
  color: var(--muted);
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 8px;
  padding: 30px;
  display: grid;
}

.ozon-debug-empty > span {
  background: var(--violet-pale);
  width: 44px;
  height: 44px;
  color: var(--violet-dark);
  border-radius: 13px;
  place-items: center;
  font-size: 20px;
  display: grid;
}

.ozon-debug-empty strong {
  color: #4d4e57;
  font-size: 12px;
}

.ozon-debug-empty p {
  max-width: 280px;
  margin: 0;
  font-size: 10px;
  line-height: 1.6;
}

.ozon-debug-operation-grid.creation-method-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 16px 16px 12px;
}

.ozon-debug-operation-grid > button {
  grid-template-rows: auto auto auto;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 9px;
  padding: 11px;
}

.ozon-debug-operation-grid > button > span {
  color: #74757f;
  background: #efeff3;
  border-radius: 8px;
  grid-row: 1 / 4;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 9px;
  font-weight: 850;
  display: grid;
}

.ozon-debug-operation-grid > button.active > span {
  color: #fff;
  background: #ffffff2e;
}

.ozon-debug-operation-grid > button.active {
  background: linear-gradient(135deg, var(--violet-dark), var(--violet));
  border-color: #0000;
  box-shadow: 0 7px 17px #5844e838;
}

.ozon-debug-operation-grid > button.active strong, .ozon-debug-operation-grid > button.active small, .ozon-debug-operation-grid > button.active code {
  color: #fff;
}

.ozon-debug-operation-grid strong {
  font-size: 11px;
}

.ozon-debug-operation-grid small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.ozon-debug-operation-grid code {
  grid-column: 2;
  margin-top: 2px;
}

.ozon-debug-endpoint {
  background: #f8f7ff;
  border: 1px solid #e1def8;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 16px;
  padding: 9px 11px;
  display: flex;
}

.ozon-debug-endpoint span {
  color: #5d5791;
  flex: none;
  font-size: 9px;
  font-weight: 800;
}

.ozon-debug-endpoint code {
  color: var(--violet-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.ozon-debug-fields.online-control-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  padding: 14px 16px 16px;
}

.ozon-debug-fields label.wide {
  grid-column: 1 / -1;
}

.parameter-card > footer {
  min-height: 66px;
  padding: 11px 16px;
}

.parameter-card > footer > div {
  gap: 3px;
  display: grid;
}

.parameter-card > footer > div strong {
  color: #4b4c55;
  font-size: 9px;
}

.parameter-card > footer > div span {
  max-width: 520px;
  color: var(--muted);
  font-size: 9px;
}

.parameter-card > footer > button.primary-button {
  min-width: 170px;
  height: 40px;
  padding: 0 15px;
}

.ozon-debug-table-wrap .product-data-table {
  min-width: 820px;
}

.ozon-debug-table-wrap .product-data-table td {
  max-width: none;
}

.ozon-debug-required {
  color: #a45c0a;
  background: #fff0d9;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  display: inline-flex;
}

.ozon-debug-guide-values {
  border-bottom: 1px solid var(--line);
}

.ozon-debug-guide-values .product-data-table {
  min-width: 620px;
}

.ozon-debug-guide-values td:first-child {
  min-width: 260px;
}

.ozon-debug-brand-picture {
  border: 1px solid var(--line);
  background: #f7f7f9;
  border-radius: 8px;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
  overflow: hidden;
}

.ozon-debug-brand-picture img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

@media (max-width: 1080px) {
  .ozon-debug-workspace {
    grid-template-columns: 1fr;
  }

  .ozon-debug-operation-grid, .ozon-debug-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ozon-debug-json-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ozon-debug-page {
    padding: 16px 12px 36px;
  }

  .ozon-debug-header {
    flex-direction: column;
    align-items: stretch;
  }

  .ozon-debug-header-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .ozon-debug-header-actions > * {
    width: 100%;
  }

  .ozon-debug-operation-grid.creation-method-tabs, .ozon-debug-fields.online-control-card, .ozon-debug-category-results.creation-method-tabs, .ozon-debug-category-search.online-control-card {
    grid-template-columns: 1fr;
  }

  .ozon-debug-fields label.wide {
    grid-column: auto;
  }

  .ozon-debug-title-row {
    align-items: flex-start;
  }

  .ozon-debug-title-row h1 {
    font-size: 23px;
  }

  .ozon-debug-card > header, .parameter-card > footer {
    flex-direction: column;
    align-items: stretch;
  }

  .parameter-card > footer > button {
    width: 100%;
  }
}

.product-image-dialog-layer {
  z-index: 120;
  position: fixed;
  inset: 0;
}

.product-image-dialog-backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #14131f7a;
  position: absolute;
  inset: 0;
}

.product-image-dialog {
  background: #f5f5f8;
  border: 1px solid #fff9;
  border-radius: 18px;
  flex-direction: column;
  min-width: 0;
  display: flex;
  position: absolute;
  inset: 28px;
  overflow: hidden;
  box-shadow: 0 28px 90px #0f0e1e59;
}

.product-image-dialog-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-areas: "title status done close";
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 17px 20px;
  display: grid;
}

.product-image-dialog-header > div:first-child {
  grid-area: title;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  display: grid;
}

.product-image-dialog-header > div:first-child > span {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: 8px;
  grid-row: 1 / 3;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 800;
}

.product-image-dialog-header h2 {
  color: var(--ink);
  margin: 0;
  font-size: 20px;
}

.product-image-dialog-header p {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 11px;
  overflow: hidden;
}

.product-image-dialog-status {
  background: #f6f6f8;
  border-radius: 9px;
  grid-area: status;
  grid-template-columns: auto auto auto auto;
  align-items: baseline;
  gap: 3px 7px;
  padding: 8px 11px;
  display: grid;
}

.product-image-dialog-status strong {
  color: var(--violet-dark);
  font-size: 13px;
}

.product-image-dialog-status span {
  color: var(--muted);
  font-size: 10px;
}

.product-image-dialog-status em {
  color: #777381;
  white-space: nowrap;
  grid-column: 1 / -1;
  font-size: 9px;
  font-style: normal;
}

.product-image-dialog-status em.saving {
  color: var(--violet-dark);
}

.product-image-dialog-status em.saved {
  color: #237147;
}

.product-image-dialog-close {
  border: 1px solid var(--line);
  color: #656670;
  cursor: pointer;
  background: #f6f6f8;
  border-radius: 9px;
  grid-area: close;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 24px;
  line-height: 1;
  display: grid;
}

.product-image-dialog-close:hover {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-color: #cfc9ff;
}

.product-image-dialog-done {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 9px;
  grid-area: done;
  min-height: 38px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 760;
}

.product-image-dialog-done:hover:not(:disabled) {
  border-color: var(--violet-dark);
  background: var(--violet-dark);
}

.product-image-batchbar {
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  scrollbar-color: #b7b1c7 #efedf4;
  scrollbar-width: thin;
  background: #fff;
  flex: 0 0 92px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-width: 0;
  height: 92px;
  min-height: 92px;
  padding: 14px 20px 20px;
  display: flex;
  overflow: auto hidden;
}

.product-image-batchbar::-webkit-scrollbar {
  height: 8px;
}

.product-image-batchbar::-webkit-scrollbar-track {
  background: #efedf4;
}

.product-image-batchbar::-webkit-scrollbar-thumb {
  background: #b7b1c7;
  border-radius: 999px;
}

.product-image-batch-primary {
  flex: none;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  display: flex;
}

.product-image-selection-summary {
  border-right: 1px solid var(--line);
  white-space: nowrap;
  flex: none;
  align-items: center;
  gap: 9px;
  min-width: max-content;
  min-height: 50px;
  padding-right: 14px;
  display: inline-flex;
}

.product-image-selection-summary strong {
  color: #4d4858;
  white-space: nowrap;
  background: #eeecf5;
  border: 1px solid #d9d5e9;
  border-radius: 8px;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 780;
  line-height: 1;
  display: inline-flex;
}

.product-image-selection-summary.has-selection strong {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-color: #cfc8ff;
}

.product-image-selection-summary small {
  color: var(--muted);
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
}

.product-image-batch-actions {
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.product-image-upload-control {
  flex: none;
  align-items: stretch;
  display: flex;
}

.product-image-upload-control select {
  border: 1px solid var(--line-strong);
  min-width: 112px;
  height: 46px;
  min-height: 46px;
  color: var(--ink);
  background: #fff;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  padding: 0 9px;
  font-size: 12px;
}

.product-image-upload-control label:not(.product-image-upload-bind) {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0 8px 8px 0;
  align-items: center;
  height: 46px;
  min-height: 46px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 760;
  transition: background .14s, border-color .14s;
  display: inline-flex;
}

.product-image-upload-control label:not(.product-image-upload-bind):hover:not(.disabled) {
  background: var(--violet-dark);
  border-color: var(--violet-dark);
}

.product-image-upload-control label:not(.product-image-upload-bind).disabled {
  cursor: not-allowed;
  opacity: .55;
}

.product-image-upload-control label:not(.product-image-upload-bind) input {
  display: none;
}

.product-image-batch-divider {
  background: var(--line);
  flex: none;
  width: 1px;
  height: 24px;
  margin: 0 3px;
}

.product-image-batch-actions > button, .product-image-batchbar > button {
  border: 1px solid var(--line-strong);
  color: #50515a;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 8px;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 46px;
  min-height: 46px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 720;
  transition: border-color .14s, background .14s, color .14s;
  display: inline-flex;
}

.product-image-batch-actions > button:hover:not(:disabled), .product-image-batchbar > button:hover:not(:disabled) {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-color: #cfc9ff;
}

.product-image-batch-actions > button.configured, .product-image-batchbar > button.configured {
  color: #17663b;
  background: #f1faf5;
  border-color: #b9dfc8;
}

.product-image-batch-actions > button em, .product-image-batchbar > button em {
  color: #8a879a;
  background: #f0eff7;
  border-radius: 999px;
  padding: 2px 5px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.product-image-batch-actions > button.danger, .product-image-batchbar > button.danger {
  color: var(--red);
  border-color: #efd0d3;
}

.product-image-batch-actions > button.settings {
  color: #686973;
  border-style: dashed;
}

.product-image-batch-actions > button.danger:hover:not(:disabled), .product-image-batchbar > button.danger:hover:not(:disabled) {
  background: var(--red-pale);
  color: #9c2934;
  border-color: #e8b9bf;
}

.product-image-batch-actions > button:disabled, .product-image-batchbar > button:disabled, .product-image-dialog-close:disabled, .product-image-dialog-done:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.product-image-batch-actions > button.process {
  color: #4d38b5;
  background: #eeeaff;
  border-color: #9f92f5;
  box-shadow: 0 2px 6px #4e38b51a;
}

.product-image-batch-actions > button.process em {
  color: #5e4ac0;
  background: #fff;
}

.product-image-batch-actions > button.process:hover:not(:disabled), .product-image-batch-actions > button.process:focus-visible:not(:disabled) {
  border-color: var(--violet-dark);
  background: var(--violet);
  color: #fff;
}

.product-image-batch-actions > button.process:disabled {
  color: #746b97;
  opacity: .72;
  background: #e9e6f5;
  border-color: #c3bce9;
}

.product-image-batch-actions > button.settings:not(.configured) {
  color: #484952;
  background: #f3f2f7;
  border-color: #aaa5ba;
}

.product-image-batch-actions > button.danger {
  background: #fff4f5;
}

.product-image-api-config {
  background: #f8f7ff;
  border-bottom: 1px solid #d8d3ff;
  grid-template-columns: minmax(220px, 1.2fr) minmax(190px, .8fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 13px 20px;
  display: grid;
}

.product-image-api-config > div:first-child {
  align-self: center;
  gap: 4px;
  display: grid;
}

.product-image-api-config strong {
  color: var(--violet-dark);
  font-size: 13px;
}

.product-image-api-config > div:first-child span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.product-image-api-config label {
  gap: 5px;
  display: grid;
}

.product-image-api-config label > span {
  color: #5a5b65;
  font-size: 11px;
  font-weight: 730;
}

.product-image-api-config input, .product-image-api-config select {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-width: 0;
  min-height: 36px;
  color: var(--ink);
  background: #fff;
  border-radius: 8px;
  outline: 0;
  padding: 0 10px;
  font-size: 12px;
}

.product-image-api-config input:focus, .product-image-api-config select:focus {
  border-color: #9386ff;
  box-shadow: 0 0 0 3px #7663ff14;
}

.product-image-resize-config {
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(120px, .55fr)) auto;
}

.product-image-resize-presets {
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
  display: flex;
}

.product-image-resize-presets button {
  color: #625a94;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d4cfff;
  border-radius: 6px;
  min-height: 24px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 730;
}

.product-image-resize-presets button.active {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.product-image-api-config-actions {
  gap: 6px;
  display: flex;
}

.product-image-api-config-actions button {
  border: 1px solid var(--line-strong);
  color: #555660;
  white-space: nowrap;
  background: #fff;
  border-radius: 8px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 730;
}

.product-image-api-config-actions button.primary {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.product-image-api-config-actions button.danger {
  color: var(--red);
  border-color: #efd0d3;
}

.product-image-dialog-notice {
  white-space: pre-wrap;
  color: #544991;
  background: #f3f1ff;
  border-bottom: 1px solid #d7d2ff;
  padding: 9px 20px;
  font-size: 11px;
  line-height: 1.5;
}

.product-image-dialog-notice.success {
  color: #17673b;
  background: #f0faf4;
  border-color: #c9e7d4;
}

.product-image-dialog-notice.error {
  color: #9c2934;
  background: #fff4f5;
  border-color: #f0d2d5;
}

.product-image-upload-bind {
  color: #656670;
  cursor: pointer;
  white-space: nowrap;
  background: #faf9ff;
  border: 1px solid #ded9ff;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  height: 46px;
  min-height: 46px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 680;
  display: inline-flex;
}

.product-image-upload-bind > span {
  gap: 1px;
  display: grid;
}

.product-image-upload-bind strong {
  color: #4e485f;
  font-size: 12px;
}

.product-image-upload-bind small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.product-image-upload-bind input {
  width: 16px;
  height: 16px;
  accent-color: var(--violet);
  margin: 0;
}

.product-image-dialog-body {
  overscroll-behavior: contain;
  flex: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.product-image-editor-layout {
  grid-template-columns: 124px minmax(0, 1fr) 292px;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  display: grid;
}

.product-image-editor-layout > .product-image-sku-workspace {
  background: #f7f7fa;
  border-right: 1px solid #dedbea;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.product-image-editor-layout > .product-image-sku-workspace > header {
  border-bottom: 1px solid #e4e1ee;
  flex: none;
  gap: 3px;
  padding: 10px 9px;
  display: grid;
}

.product-image-editor-layout > .product-image-sku-workspace > header strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
}

.product-image-editor-layout > .product-image-sku-workspace > header small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.product-image-sku-list {
  flex: auto;
  min-height: 0;
  padding: 5px;
  display: block;
  overflow-y: auto;
}

.product-image-sku-text {
  color: #3e3f47;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 7px;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin: 0 0 3px;
  padding: 7px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  transition: background .14s, border-color .14s, color .14s;
  display: grid;
}

.product-image-sku-text > span:last-child {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.product-image-sku-text strong {
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
}

.product-image-sku-text small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
}

.product-image-sku-state-dot {
  background: #b4b3bc;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  box-shadow: 0 0 0 3px #b4b3bc24;
}

.product-image-sku-state-dot.bound {
  background: #2b9a61;
  box-shadow: 0 0 0 3px #2b9a6121;
}

.product-image-sku-state-dot.pending {
  background: #e19a2d;
  box-shadow: 0 0 0 3px #e19a2d24;
}

.product-image-sku-text:hover {
  color: #2b2c33;
  background: #eceaf6;
}

.product-image-sku-text.active {
  color: var(--violet-dark);
  background: #e8e5ff;
  border-color: #cfc9ff;
}

.product-image-version-actions {
  border-top: 1px solid #e4e1ee;
  flex: none;
  gap: 4px;
  padding: 6px;
  display: grid;
}

.product-image-version-actions button {
  min-height: 32px;
  color: var(--violet-dark);
  background: #fff;
  border: 1px solid #cdc6ff;
  border-radius: 7px;
  padding: 2px 4px;
  font-size: 9px;
  font-weight: 740;
}

.product-image-version-actions button:last-child {
  color: #696473;
  border-color: #e3dce7;
}

.product-image-editor-content {
  background: #f5f5f8;
  min-width: 0;
  height: 100%;
  padding: 0 14px 36px;
  position: relative;
  overflow: hidden auto;
}

.product-image-library-toolbar {
  z-index: 12;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fffffff5;
  border-bottom: 1px solid #ddd9e9;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  margin: 0 -14px 14px;
  padding: 11px 14px;
  display: flex;
  position: sticky;
  top: 0;
  box-shadow: 0 4px 14px #211e370d;
}

.product-image-library-toolbar > div:first-child {
  gap: 4px;
  min-width: 150px;
  display: grid;
}

.product-image-library-toolbar > div:first-child strong {
  color: var(--ink);
  font-size: 14px;
}

.product-image-library-toolbar > div:first-child small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.product-image-upload-workflow {
  align-items: end;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.product-image-upload-workflow > label:not(.product-image-upload-button) {
  gap: 4px;
  min-width: 112px;
  display: grid;
}

.product-image-upload-workflow > label > span {
  color: #76727f;
  font-size: 9px;
  font-weight: 700;
}

.product-image-upload-workflow select {
  color: #4f5058;
  background: #fff;
  border: 1px solid #d4d0df;
  border-radius: 7px;
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  font-size: 10px;
}

.product-image-upload-button {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 780;
  display: inline-flex;
}

.product-image-upload-button:hover:not(.disabled) {
  border-color: var(--violet-dark);
  background: var(--violet-dark);
}

.product-image-upload-button.disabled {
  cursor: not-allowed;
  opacity: .55;
}

.product-image-upload-button input {
  display: none;
}

.product-image-sku-binding {
  z-index: 10;
  background: linear-gradient(120deg, #faf9ff, #fff);
  border: 1px solid #d8d2fe;
  border-radius: 12px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px 14px;
  display: grid;
  position: sticky;
  top: 0;
  box-shadow: 0 6px 20px #7663ff12;
}

.product-image-sku-url {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  display: grid;
}

.product-image-sku-url input {
  border: 1px solid var(--line-strong);
  color: #53545c;
  background: #fff;
  border-radius: 7px;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  font-size: 11px;
}

.product-image-sku-url button {
  min-height: 38px;
  color: var(--violet-dark);
  cursor: pointer;
  background: #fff;
  border: 1px solid #c8c1ff;
  border-radius: 7px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 730;
}

.product-image-sku-url button.clear {
  color: #73717a;
  border-color: #e5e2ea;
}

.product-image-sku-url button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.product-image-material-groups {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 14px;
  display: grid;
}

.product-image-material-groups .product-image-group + .product-image-group {
  margin-top: 0;
}

.product-image-group-list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.product-image-list-item {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
  transition: border-color .14s, box-shadow .14s, opacity .14s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.product-image-list-item:hover {
  border-color: #cfc9ff;
  box-shadow: 0 4px 14px #3f329112;
}

.product-image-list-item.selected {
  border-color: #9486ff;
  box-shadow: 0 0 0 2px #7663ff1f;
}

.product-image-list-item.sku-bound {
  border-color: #8bd0aa;
  scroll-margin-top: 104px;
}

.product-image-list-item.dragging {
  opacity: .45;
}

.product-image-list-thumb {
  aspect-ratio: 3 / 4;
  border-bottom: 1px solid var(--line);
  background: #f4f4f6;
  border-radius: 0;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.product-image-list-thumb .product-image-preview-trigger {
  cursor: zoom-in;
  background: none;
  border: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
}

.product-image-list-thumb .product-image-preview-trigger img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.product-image-list-thumb > span {
  width: 100%;
  height: 100%;
  color: var(--muted);
  place-items: center;
  font-size: 8px;
  display: grid;
}

.product-image-card-selector {
  z-index: 2;
  color: #4d4e57;
  cursor: pointer;
  background: #ffffffe6;
  border: 1px solid #ffffffc7;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 780;
  display: inline-flex;
  position: absolute;
  top: 8px;
  left: 8px;
  box-shadow: 0 3px 12px #1c1a2c1f;
}

.product-image-card-selector input {
  width: 15px;
  height: 15px;
  accent-color: var(--violet);
  margin: 0;
}

.product-image-card-badges {
  z-index: 1;
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
}

.product-image-card-badges span {
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #23222dc2;
  border: 1px solid #ffffff80;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 720;
}

.product-image-card-badges span.current {
  background: #1f854ee0;
}

.product-image-card-badges span.primary {
  background: #6852f0e6;
}

.product-image-list-meta {
  gap: 3px;
  min-width: 0;
  padding: 11px 11px 8px;
  display: grid;
}

.product-image-list-meta strong {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.product-image-list-meta small {
  color: var(--muted);
  font-size: 11px;
}

.product-image-list-actions {
  gap: 8px;
  padding: 0 11px 11px;
  display: grid;
}

.product-image-list-actions select, .product-image-list-actions button {
  border: 1px solid var(--line-strong);
  color: #5d5e67;
  cursor: pointer;
  background: #fff;
  border-radius: 6px;
  min-height: 34px;
  padding: 0 9px;
  font-size: 11px;
}

.product-image-version-switch {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.product-image-version-switch > span, .product-image-version-single {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}

.product-image-version-switch > div {
  background: #f6f5f9;
  border: 1px solid #ddd9ea;
  border-radius: 7px;
  grid-template-columns: 1fr 1fr;
  display: inline-grid;
  overflow: hidden;
}

.product-image-version-switch > div button {
  color: #777580;
  background: none;
  border: 0;
  border-radius: 0;
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

.product-image-version-switch > div button.active {
  color: var(--violet-dark);
  background: #fff;
  box-shadow: inset 0 0 0 1px #c9c2ff;
}

.product-image-list-actions button.assign {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
  width: 100%;
  min-height: 40px;
  font-size: 12px;
  font-weight: 760;
}

.product-image-list-actions button.assign.current {
  color: #237147;
  background: #edf8f1;
  border-color: #9bd3b3;
}

.product-image-card-secondary {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  display: grid;
}

.product-image-card-more {
  border-top: 1px solid #eceaf1;
  padding-top: 7px;
}

.product-image-card-more summary {
  color: #716f7b;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  list-style-position: inside;
}

.product-image-card-more[open] summary {
  color: var(--violet-dark);
  margin-bottom: 7px;
}

.product-image-card-secondary select {
  color: #676873;
  width: 100%;
  min-width: 0;
}

.product-image-list-actions button.assign:hover:not(:disabled) {
  border-color: var(--violet-dark);
  background: var(--violet-dark);
}

.product-image-list-actions button.danger {
  color: var(--red);
  border-color: #efd0d3;
}

.product-image-list-actions button.product-image-card-delete {
  min-width: 54px;
}

.product-image-list-item .product-image-drag-handle {
  z-index: 2;
  color: #fff;
  cursor: grab;
  background: #1d1c28ad;
  border: 1px solid #ffffffb8;
  border-radius: 7px;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  display: grid;
  position: absolute;
  top: 8px;
  right: 8px;
}

.product-image-group {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  min-width: 0;
  box-shadow: 0 3px 12px #1c1d2f08;
}

.product-image-group + .product-image-group {
  margin-top: 14px;
}

.product-image-group.is-dragging {
  border-style: dashed;
}

.product-image-group.is-dragging:hover {
  background: #fdfcff;
  border-color: #a99eff;
}

.product-image-group > header {
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
}

.product-image-group > header > div {
  flex: auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.product-image-group h3 {
  color: var(--ink);
  margin: 0;
  font-size: 15px;
  font-weight: 720;
}

.product-image-group > header > div > span {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 750;
}

.product-image-group > header p {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 0 0 5px;
  font-size: 11px;
  overflow: hidden;
}

.product-image-group-toggle {
  border: 1px solid var(--line-strong);
  color: #656670;
  cursor: pointer;
  background: #fff;
  border-radius: 7px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  transition: background .14s, border-color .14s, transform .16s;
  display: grid;
}

.product-image-group-toggle:hover {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-color: #cfc9ff;
}

.product-image-group.collapsed {
  border-radius: 12px;
}

.product-image-group.collapsed > header {
  border-bottom: 0;
}

.product-image-group.collapsed .product-image-group-toggle {
  transform: rotate(-90deg);
}

.product-image-group-chevron {
  border-bottom: 2px solid;
  border-right: 2px solid;
  width: 8px;
  height: 8px;
  display: block;
  transform: rotate(45deg)translate3d(0, -1px, 0);
}

.product-image-group-selection {
  flex: none;
  align-items: center;
  gap: 6px;
  display: flex;
}

.product-image-group-selection label, .product-image-group-selection button {
  border: 1px solid var(--line-strong);
  color: #656670;
  cursor: pointer;
  background: #fff;
  border-radius: 7px;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 720;
  display: inline-flex;
}

.product-image-group-selection button:hover:not(:disabled) {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-color: #cfc9ff;
}

.product-image-group-selection label:has(input:checked) {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-color: #cfc9ff;
}

.product-image-group-selection button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.product-image-group-selection label:has(input:disabled) {
  cursor: not-allowed;
  opacity: .45;
}

.product-image-group-selection input {
  margin: 0;
}

.product-image-action-panel {
  background: #fff;
  border-left: 1px solid #ddd9e9;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden auto;
}

.product-image-action-panel > header {
  z-index: 4;
  background: #faf9ff;
  border-bottom: 1px solid #e3dfec;
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 11px 13px;
  display: flex;
  position: sticky;
  top: 0;
}

.product-image-action-panel .product-image-selection-summary {
  white-space: normal;
  border: 0;
  gap: 3px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: grid;
}

.product-image-action-panel .product-image-selection-summary small {
  color: #817b92;
  font-size: 9px;
  font-weight: 760;
}

.product-image-action-panel .product-image-selection-summary strong, .product-image-action-panel .product-image-selection-summary.has-selection strong {
  color: #36333e;
  background: none;
  border: 0;
  min-height: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.25;
}

.product-image-action-panel > header > button {
  color: #615d6b;
  background: #fff;
  border: 1px solid #d6d1e3;
  border-radius: 7px;
  min-height: 32px;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 720;
}

.product-image-action-panel > header > button:disabled {
  opacity: .45;
}

.product-image-action-panel .product-image-dialog-notice {
  border-bottom: 1px solid;
  border-left: 0;
  border-right: 0;
  flex: none;
  padding: 10px 13px;
  font-size: 10px;
  line-height: 1.55;
}

.product-image-operation-guide {
  background: #faf9ff;
  border: 1px dashed #cfc9e6;
  border-radius: 9px;
  gap: 5px;
  margin: 11px 12px 0;
  padding: 11px;
  display: grid;
}

.product-image-operation-guide strong {
  color: #4d475d;
  font-size: 11px;
}

.product-image-operation-guide span {
  color: #7d7888;
  font-size: 9px;
  line-height: 1.45;
}

.product-image-action-section {
  border-bottom: 1px solid #ebe8f0;
  gap: 9px;
  padding: 13px 12px;
  display: grid;
}

.product-image-action-section > div:first-child {
  align-items: center;
  gap: 7px;
  display: flex;
}

.product-image-action-section > div:first-child > span {
  color: #5b47c1;
  background: #eeeaff;
  border-radius: 7px;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 8px;
  font-weight: 850;
  display: grid;
}

.product-image-action-section h3 {
  color: #393640;
  margin: 0;
  font-size: 12px;
}

.product-image-action-section p {
  color: #7d7986;
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
}

.product-image-action-panel button, .product-image-action-panel select, .product-image-action-panel input {
  font: inherit;
}

.product-image-action-panel button {
  color: #55515e;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d4d0de;
  border-radius: 7px;
}

.product-image-action-panel button:disabled, .product-image-action-panel select:disabled, .product-image-action-panel input:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.product-image-action-panel button.primary {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.product-image-action-panel button.wide {
  border-radius: 8px;
  width: 100%;
  min-height: 38px;
  font-size: 10px;
  font-weight: 780;
}

.product-image-action-panel .product-image-sku-url {
  grid-template-columns: minmax(0, 1fr) auto;
}

.product-image-action-panel .product-image-sku-url input {
  grid-column: 1 / -1;
}

.product-image-action-panel .product-image-sku-url button.clear {
  border-color: #e1dde8;
}

.product-image-action-panel .product-image-batch-actions {
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 0;
  display: grid;
}

.product-image-action-panel .product-image-batch-actions > button {
  border-radius: 8px;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 0 11px;
  font-size: 10px;
}

.product-image-side-config {
  background: #f8f7ff;
  border: 1px solid #d9d3f4;
  border-radius: 9px;
  gap: 8px;
  padding: 10px;
  display: grid;
}

.product-image-side-config > strong {
  color: #454052;
  font-size: 11px;
}

.product-image-side-config > small {
  color: #7e7888;
  font-size: 8px;
}

.product-image-side-config label {
  gap: 4px;
  display: grid;
}

.product-image-side-config label > span {
  color: #777181;
  font-size: 8px;
  font-weight: 700;
}

.product-image-side-config input, .product-image-side-config select, .product-image-batch-move select {
  color: #55525d;
  background: #fff;
  border: 1px solid #d4d0de;
  border-radius: 7px;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  font-size: 9px;
}

.product-image-side-config > div:last-child, .product-image-size-inputs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.product-image-side-config > div:last-child button, .product-image-batch-move button {
  color: #5a48ba;
  background: #fff;
  border: 1px solid #d4cfff;
  border-radius: 7px;
  min-height: 34px;
  font-size: 9px;
  font-weight: 740;
}

.product-image-side-config .product-image-resize-presets {
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  display: grid;
}

.product-image-side-config .product-image-resize-presets button {
  color: #676271;
  background: #fff;
  border: 1px solid #d9d5e5;
  border-radius: 6px;
  min-height: 32px;
  font-size: 8px;
}

.product-image-side-config .product-image-resize-presets button.active {
  color: #503bb5;
  background: #eeeaff;
  border-color: #9788f3;
}

.product-image-batch-move {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  display: grid;
}

.product-image-action-panel .product-image-version-actions {
  border: 0;
  grid-template-columns: 1fr 1fr;
  padding: 0;
}

.product-image-action-section.settings {
  padding-block: 10px;
}

.product-image-api-toggle {
  color: #4f4b58;
  background: #f6f5f9;
  border: 1px dashed #aaa4ba;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 760;
  display: flex;
}

.product-image-api-toggle em {
  color: #7c7688;
  font-size: 8px;
  font-style: normal;
  font-weight: 650;
}

.product-image-api-toggle.configured {
  color: #17663b;
  background: #eff9f3;
  border-color: #9bcfb1;
}

.product-image-action-panel > footer {
  background: #fffafb;
  gap: 5px;
  margin-top: auto;
  padding: 12px;
  display: grid;
}

.product-image-action-panel > footer button.danger {
  color: #a32e39;
  background: #fff1f2;
  border: 1px solid #e7b9bf;
}

.product-image-action-panel > footer small {
  color: #8a838b;
  text-align: center;
  font-size: 8px;
}

.product-image-lightbox {
  z-index: 1000;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
  background: #0d0c16d1;
  place-items: center;
  padding: 28px;
  display: grid;
  position: fixed;
  inset: 0;
}

.product-image-lightbox-panel {
  cursor: default;
  background: #181720;
  border: 1px solid #fff3;
  border-radius: 14px;
  max-width: min(92vw, 1400px);
  max-height: calc(100dvh - 56px);
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 100px #00000080;
}

.product-image-lightbox-panel > img {
  object-fit: contain;
  background: #101016;
  max-width: min(92vw, 1400px);
  max-height: calc(100dvh - 130px);
  display: block;
}

.product-image-lightbox-close {
  z-index: 1;
  color: #fff;
  cursor: pointer;
  background: #14131dc7;
  border: 1px solid #ffffff47;
  border-radius: 50%;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 25px;
  line-height: 1;
  display: grid;
  position: absolute;
  top: 10px;
  right: 10px;
}

.product-image-lightbox-close:hover, .product-image-lightbox-close:focus-visible {
  color: #282632;
  background: #fff;
}

.product-image-lightbox-meta {
  color: #fff;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 12px 15px;
  display: flex;
}

.product-image-lightbox-meta strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.product-image-lightbox-meta span {
  color: #aaa7b5;
  flex: none;
  font-size: 8px;
}

.product-image-refine-sync-backdrop {
  z-index: 1100;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #12111c94;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.product-image-batch-dialog-backdrop {
  z-index: 1120;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #12111c94;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.product-image-batch-dialog {
  background: #fff;
  border: 1px solid #ded9f1;
  border-radius: 16px;
  width: min(620px, 100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: 0 28px 80px #14102d47;
}

.product-image-batch-dialog > header {
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid #eeeaf7;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 17px 20px;
  display: flex;
  position: sticky;
  top: 0;
}

.product-image-batch-dialog > header small {
  color: #736b84;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.product-image-batch-dialog > header h3 {
  color: #292632;
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}

.product-image-batch-dialog > header button {
  color: #6e6878;
  cursor: pointer;
  background: #f8f7fa;
  border: 1px solid #ddd8e8;
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 22px;
  display: grid;
}

.product-image-batch-dialog-body {
  gap: 14px;
  padding: 20px;
  display: grid;
}

.product-image-batch-dialog-config-required {
  background: #fff8e8;
  border: 1px solid #e6c07c;
  border-radius: 11px;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .8fr) auto;
  align-items: end;
  gap: 12px;
  padding: 13px;
  display: grid;
}

.product-image-batch-dialog-config-required > div, .product-image-batch-dialog-config-required label {
  gap: 4px;
  display: grid;
}

.product-image-batch-dialog-config-required strong {
  color: #70470f;
  font-size: 12px;
}

.product-image-batch-dialog-config-required span {
  color: #896b3d;
  font-size: 9px;
  line-height: 1.45;
}

.product-image-batch-dialog-config-required input {
  color: #3e321f;
  background: #fff;
  border: 1px solid #d9bc89;
  border-radius: 7px;
  outline: none;
  width: 100%;
  min-height: 35px;
  padding: 0 9px;
  font-size: 10px;
}

.product-image-batch-dialog-config-required input:focus {
  border-color: #c88625;
  box-shadow: 0 0 0 3px #c886251f;
}

.product-image-batch-dialog-config-required > button {
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  background: #b66b13;
  border: 0;
  border-radius: 7px;
  min-height: 35px;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 780;
}

.product-image-batch-dialog-config-required > button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.product-image-batch-dialog-options {
  gap: 12px;
  display: grid;
}

.product-image-batch-dialog-options > label {
  color: #56505f;
  gap: 6px;
  font-size: 12px;
  font-weight: 720;
  display: grid;
}

.product-image-batch-dialog-options select, .product-image-batch-dialog-options input[type="number"] {
  box-sizing: border-box;
  color: #403a49;
  background: #fff;
  border: 1px solid #d9d4e4;
  border-radius: 9px;
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  font-size: 13px;
}

.product-image-batch-dialog-check {
  color: #575064;
  cursor: pointer;
  background: #faf9ff;
  border: 1px solid #ded8f0;
  border-radius: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  display: grid;
}

.product-image-batch-dialog-check.force {
  background: #fff9f5;
  border-color: #efd7c8;
}

.product-image-batch-dialog-check input {
  accent-color: #6e55d9;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
}

.product-image-batch-dialog-check span, .product-image-batch-dialog-check strong, .product-image-batch-dialog-check small {
  display: block;
}

.product-image-batch-dialog-check strong {
  color: #413a4c;
  font-size: 13px;
}

.product-image-batch-dialog-check small {
  color: #7b7486;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.product-image-batch-dialog-estimate {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.product-image-batch-dialog-estimate.top-summary {
  background: linear-gradient(135deg, #f7f5ff, #fbfaff);
  border-radius: 12px;
  order: -10;
}

.product-image-batch-dialog-estimate > div {
  background: #faf9fc;
  border: 1px solid #e2deec;
  border-radius: 11px;
  gap: 4px;
  min-width: 0;
  padding: 13px 14px;
  display: grid;
}

.product-image-batch-dialog-estimate small {
  color: #756e80;
  font-size: 10px;
  font-weight: 720;
}

.product-image-batch-dialog-estimate strong {
  color: #439;
  font-size: 19px;
  line-height: 1.25;
}

.product-image-batch-dialog-estimate span {
  color: #817b89;
  font-size: 10px;
  line-height: 1.45;
}

.product-image-batch-dialog-error {
  color: #a13a3a;
  background: #fff6f6;
  border: 1px solid #efc9c9;
  border-radius: 9px;
  gap: 3px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.5;
  display: grid;
}

.product-image-batch-dialog-error span {
  color: #8b7272;
}

.product-image-batch-dialog-advanced {
  border-top: 1px solid #ebe8f0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding-top: 13px;
  display: grid;
}

.product-image-batch-dialog-advanced > div {
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.product-image-batch-dialog-advanced > div strong {
  color: #403a49;
  font-size: 12px;
}

.product-image-batch-dialog-advanced > div small {
  color: #89838e;
  font-size: 10px;
}

.product-image-batch-dialog-advanced.single {
  grid-template-columns: 1fr;
}

.product-image-batch-dialog-cache-note, .product-image-batch-dialog-local-note {
  background: #f2faf5;
  border: 1px solid #cce4d6;
  border-radius: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  display: grid;
}

.product-image-batch-dialog-cache-note > span, .product-image-batch-dialog-local-note > strong {
  color: #26734a;
  background: #dff3e7;
  border-radius: 8px;
  place-items: center;
  min-width: 42px;
  height: 32px;
  font-size: 12px;
  font-weight: 850;
  display: grid;
}

.product-image-batch-dialog-cache-note p {
  color: #5e7065;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.product-image-batch-dialog-cache-note p strong {
  color: #315a42;
  display: block;
}

.product-image-batch-dialog-cache-note.compact {
  background: #f5f5f6;
  border-color: #dedde2;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 11px;
}

.product-image-batch-dialog-cache-note.compact > span {
  color: #6f6d75;
  background: #ececef;
  border: 1px solid #d4d3d8;
  min-width: 34px;
  height: 25px;
  font-size: 10px;
}

.product-image-batch-dialog-cache-note.compact p {
  color: #77757d;
  font-size: 10px;
  line-height: 1.5;
}

.product-image-batch-dialog-local-note > span {
  color: #5e7065;
  font-size: 11px;
  line-height: 1.5;
}

.product-image-batch-dialog-presets, .product-image-batch-dialog-size {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.product-image-batch-dialog-presets button {
  color: #676271;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d9d5e5;
  border-radius: 8px;
  min-height: 40px;
  font-size: 12px;
  font-weight: 720;
}

.product-image-batch-dialog-presets button.active {
  color: #503bb5;
  background: #eeeaff;
  border-color: #9788f3;
}

.product-image-batch-dialog-size label {
  color: #6c6575;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.product-image-batch-dialog > footer {
  z-index: 2;
  background: #faf9fc;
  border-top: 1px solid #eeeaf7;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  display: flex;
  position: sticky;
  bottom: 0;
}

.product-image-batch-dialog > footer button {
  color: #514b5c;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d7d2e3;
  border-radius: 8px;
  min-height: 40px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 730;
}

.product-image-batch-dialog > footer button.primary {
  color: #fff;
  background: #6956d9;
  border-color: #6956d9;
}

.product-image-batch-dialog button:disabled {
  cursor: wait;
  opacity: .55;
}

@media (max-width: 600px) {
  .product-image-batch-dialog-backdrop {
    align-items: end;
    padding: 12px;
  }

  .product-image-batch-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
  }

  .product-image-batch-dialog-estimate, .product-image-batch-dialog-advanced, .product-image-batch-dialog-config-required {
    grid-template-columns: 1fr;
  }
}

.product-image-refine-sync-dialog {
  background: #fff;
  border: 1px solid #ded9f1;
  border-radius: 16px;
  width: min(560px, 100vw - 32px);
  overflow: hidden;
  box-shadow: 0 28px 80px #14102d47;
}

.product-image-refine-sync-dialog > header {
  border-bottom: 1px solid #eeeaf7;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  display: flex;
}

.product-image-refine-sync-dialog > header > span {
  color: #21844c;
  background: #eaf8f0;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 19px;
  font-weight: 800;
  display: grid;
}

.product-image-refine-sync-dialog > header small {
  color: #777183;
  margin-bottom: 2px;
  font-size: 11px;
  display: block;
}

.product-image-refine-sync-dialog > header h3 {
  color: #292632;
  margin: 0;
  font-size: 18px;
}

.product-image-refine-sync-content {
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 20px;
  display: grid;
}

.product-image-refine-sync-content > img {
  object-fit: contain;
  background: #f7f6f9;
  border: 1px solid #e5e2ed;
  border-radius: 10px;
  width: 150px;
  height: 188px;
}

.product-image-refine-sync-content strong {
  color: #34303d;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 7px;
  font-size: 14px;
  display: block;
  overflow: hidden;
}

.product-image-refine-sync-content p {
  color: #6f6978;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.7;
}

.product-image-refine-sync-content small {
  color: #7163bd;
  font-size: 11px;
  font-weight: 700;
}

.product-image-refine-sync-dialog > footer {
  background: #faf9fc;
  border-top: 1px solid #eeeaf7;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  display: flex;
}

.product-image-refine-sync-dialog > footer button {
  color: #514b5c;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d7d2e3;
  border-radius: 8px;
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
}

.product-image-refine-sync-dialog > footer button.primary {
  color: #fff;
  background: #6956d9;
  border-color: #6956d9;
}

.product-image-refine-sync-dialog > footer button:disabled {
  cursor: wait;
  opacity: .62;
}

@media (max-width: 640px) {
  .product-image-refine-sync-content {
    grid-template-columns: 1fr;
  }

  .product-image-refine-sync-content > img {
    width: 100%;
    height: min(42vh, 300px);
  }
}

.product-image-group-empty, .product-image-dialog-empty {
  color: var(--muted);
  text-align: center;
  background: #fafafd;
  border: 1px dashed #d6d3e4;
  border-radius: 9px;
  margin: 0 14px 14px;
  padding: 22px 15px;
  font-size: 9px;
}

.product-image-dialog-empty {
  min-height: 220px;
  margin: 0;
  padding-top: 95px;
}

.product-image-manager-page {
  min-width: 0;
  overflow-x: hidden;
}

.image-manager-header, .image-upload-panel, .image-manager-summary, .product-image-grid, .product-image-manager-page > .existing-editor-notice, .image-manager-empty {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.image-manager-header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 18px;
  display: flex;
}

.image-manager-header > div {
  gap: 7px;
  min-width: 0;
  display: grid;
}

.image-manager-header h1 {
  margin: 0;
  font-size: 27px;
}

.image-manager-header p {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 11px;
  overflow: hidden;
}

.image-manager-back {
  border: 1px solid var(--line-strong);
  min-height: 40px;
  color: var(--ink);
  background: #fff;
  border-radius: 8px;
  flex: none;
  align-items: center;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
  display: inline-flex;
}

.image-upload-panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  grid-template-columns: minmax(0, 1fr) 160px auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px 18px;
  display: grid;
}

.image-watermark-launch-panel {
  background: linear-gradient(135deg, #fbfaff 0%, #f4f1ff 55%, #fff 100%);
  border: 1px solid #ded9ff;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto 16px;
  padding: 16px 18px;
  display: flex;
  box-shadow: 0 8px 24px #5d49b40f;
}

.image-watermark-launch-panel > div:first-child {
  gap: 4px;
  display: grid;
}

.image-watermark-launch-panel > div:first-child small {
  color: #7668bd;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 850;
}

.image-watermark-launch-panel > div:first-child strong {
  color: #2e2945;
  font-size: 13px;
}

.image-watermark-launch-panel > div:first-child span {
  color: #777384;
  font-size: 9px;
}

.image-manager-watermark-button {
  color: #fff;
  cursor: pointer;
  text-align: left;
  background: linear-gradient(135deg, #7663e8, #5d4fc0);
  border: 1px solid #7966e8;
  border-radius: 10px;
  grid-template-columns: 30px 1fr;
  align-items: center;
  min-width: 185px;
  padding: 10px 13px;
  transition: transform .16s, box-shadow .16s, opacity .16s;
  display: grid;
  box-shadow: 0 8px 18px #5846b32e;
}

.image-manager-watermark-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 23px #5846b33d;
}

.image-manager-watermark-button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.image-manager-watermark-button > span {
  grid-row: 1 / span 2;
  font-size: 25px;
  line-height: 1;
}

.image-manager-watermark-button strong {
  font-size: 10px;
}

.image-manager-watermark-button small {
  color: #ffffffc2;
  margin-top: 2px;
  font-size: 8px;
}

.product-image-inline-watermark {
  background: linear-gradient(135deg, #faf9ff, #f2efff);
  border: 1px solid #d9d2f3;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 14px 0;
  padding: 12px 13px;
  display: flex;
}

.product-image-inline-watermark > div:first-child {
  gap: 3px;
  display: grid;
}

.product-image-inline-watermark > div:first-child strong {
  color: #332c50;
  font-size: 11px;
}

.product-image-inline-watermark > div:first-child small {
  color: #7d7787;
  font-size: 9px;
  line-height: 1.4;
}

.watermark-modal-backdrop {
  z-index: 240;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #14131b6b;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.watermark-modal {
  background: #f7f7f9;
  border: 1px solid #ffffffb3;
  border-radius: 20px;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(1180px, 100vw - 48px);
  max-height: calc(100vh - 48px);
  display: grid;
  overflow: hidden;
  box-shadow: 0 28px 80px #14122247;
}

.watermark-modal > header {
  background: #fffffff0;
  border-bottom: 1px solid #e7e6eb;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 21px 16px;
  display: flex;
}

.watermark-modal > header > div {
  gap: 3px;
  display: grid;
}

.watermark-modal > header small {
  color: #7566bd;
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 850;
}

.watermark-modal > header h2 {
  color: #24222c;
  letter-spacing: -.02em;
  margin: 0;
  font-size: 20px;
}

.watermark-modal > header p {
  color: #817e89;
  margin: 2px 0 0;
  font-size: 10px;
}

.watermark-modal > header > button {
  color: #57545e;
  cursor: pointer;
  background: #efeff2;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
  display: grid;
}

.watermark-modal > header > button:hover:not(:disabled) {
  background: #e7e5ed;
}

.watermark-modal-body {
  grid-template-columns: 330px minmax(0, 1fr);
  min-height: 0;
  display: grid;
}

.watermark-settings {
  background: #fff;
  border-right: 1px solid #e5e4e9;
  min-height: 0;
  padding: 17px;
  overflow-y: auto;
}

.watermark-kind-tabs {
  background: #f0eff3;
  border-radius: 10px;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  display: grid;
}

.watermark-kind-tabs button {
  color: #77737e;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  min-height: 34px;
  font-size: 10px;
  font-weight: 780;
}

.watermark-kind-tabs button.active {
  color: #51439f;
  background: #fff;
  box-shadow: 0 2px 8px #25213817;
}

.watermark-field {
  gap: 7px;
  display: grid;
}

.watermark-field > span, .watermark-layouts legend {
  color: #52505a;
  font-size: 9px;
  font-weight: 780;
}

.watermark-field textarea {
  resize: vertical;
  color: #24222c;
  width: 100%;
  min-height: 68px;
  font: inherit;
  border: 1px solid #dedde3;
  border-radius: 9px;
  outline: 0;
  padding: 10px;
  font-size: 11px;
}

.watermark-field textarea:focus {
  border-color: #9f92e8;
  box-shadow: 0 0 0 3px #7565c41a;
}

.watermark-logo-upload {
  cursor: pointer;
  background: #faf9fc;
  border: 1px dashed #cfcbdc;
  border-radius: 11px;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 3px 11px;
  min-height: 92px;
  padding: 10px;
  display: grid;
}

.watermark-logo-upload input {
  display: none;
}

.watermark-logo-upload > span {
  color: #7668bd;
  background: #efedf6;
  border-radius: 9px;
  grid-row: 1 / span 2;
  place-items: center;
  width: 58px;
  height: 58px;
  font-size: 23px;
  display: grid;
  overflow: hidden;
}

.watermark-logo-upload img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.watermark-logo-upload strong {
  color: #45414f;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.watermark-logo-upload small {
  color: #96929e;
  font-size: 8px;
}

.watermark-layouts {
  border: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 16px 0;
  padding: 0;
  display: grid;
}

.watermark-layouts legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

.watermark-layouts button {
  color: #53505b;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e2e0e8;
  border-radius: 9px;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 50px;
  font-size: 9px;
  font-weight: 760;
  display: grid;
}

.watermark-layouts button small {
  color: #a09ca7;
  font-size: 7px;
  font-weight: 600;
}

.watermark-layouts button.active {
  color: #5445a2;
  background: #f4f1ff;
  border-color: #8f80de;
  box-shadow: inset 0 0 0 1px #8f80de;
}

.watermark-control-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  display: grid;
}

.watermark-control-grid > label {
  align-content: start;
  gap: 7px;
  display: grid;
}

.watermark-control-grid > label > span, .watermark-range > span {
  color: #686570;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  font-weight: 700;
  display: flex;
}

.watermark-control-grid input[type="color"] {
  background: #fff;
  border: 1px solid #dcdae2;
  border-radius: 7px;
  width: 100%;
  height: 30px;
  padding: 3px;
}

.watermark-range strong {
  color: #55499a;
  font-size: 8px;
}

.watermark-range input[type="range"] {
  accent-color: #7565c4;
  width: 100%;
  height: 4px;
}

.watermark-workspace {
  min-width: 0;
  min-height: 0;
  padding: 17px;
  overflow-y: auto;
}

.watermark-preview-card, .watermark-selection {
  background: #fff;
  border: 1px solid #e2e1e6;
  border-radius: 13px;
  overflow: hidden;
}

.watermark-preview-heading, .watermark-selection > header {
  border-bottom: 1px solid #ecebf0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  display: flex;
}

.watermark-preview-heading > div, .watermark-selection > header > div:first-child {
  gap: 2px;
  display: grid;
}

.watermark-preview-heading strong, .watermark-selection > header strong {
  color: #37343e;
  font-size: 10px;
}

.watermark-preview-heading small, .watermark-selection > header span {
  color: #95919c;
  font-size: 8px;
}

.watermark-preview-heading > span {
  color: #6353ae;
  background: #f0edff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 8px;
  font-weight: 750;
}

.watermark-preview {
  background: linear-gradient(135deg, #eeeef1, #f7f7f8);
  place-items: center;
  height: 260px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.watermark-preview-source {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.watermark-preview-empty {
  color: #aaa7b0;
  font-size: 10px;
}

.watermark-preview-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.watermark-preview-mark {
  color: #111827;
  text-align: center;
  white-space: pre-line;
  max-width: 60%;
  font-weight: 800;
  line-height: 1.18;
  position: absolute;
}

.watermark-preview-mark > img {
  object-fit: contain;
  width: 100%;
  height: auto;
  display: block;
}

.watermark-preview-mark.bottom-right {
  transform-origin: 100% 100%;
  bottom: 6%;
  right: 4%;
}

.watermark-preview-mark.bottom-left {
  transform-origin: 0 100%;
  bottom: 6%;
  left: 4%;
}

.watermark-preview-mark.center {
  transform-origin: center;
  top: 50%;
  left: 50%;
}

.watermark-preview-mark.top-left {
  top: 5%;
  left: 4%;
}

.watermark-preview-mark.top-right {
  top: 5%;
  right: 4%;
}

.watermark-preview-mark.layout-four-corners, .watermark-preview-mark.bottom-left, .watermark-preview-mark.bottom-right {
  bottom: 5%;
}

.watermark-preview-layer.layout-tile-diagonal, .watermark-preview-layer.layout-tile-straight {
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  display: grid;
}

.watermark-preview-layer.layout-tile-diagonal .watermark-preview-mark, .watermark-preview-layer.layout-tile-straight .watermark-preview-mark {
  max-width: 90%;
  position: static;
}

.watermark-selection {
  margin-top: 13px;
}

.watermark-selection > header > div:last-child {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  display: flex;
}

.watermark-selection > header button {
  color: #686570;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dedce4;
  border-radius: 6px;
  min-height: 25px;
  padding: 0 7px;
  font-size: 8px;
}

.watermark-image-picker {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  max-height: 210px;
  padding: 10px;
  display: grid;
  overflow-y: auto;
}

.watermark-image-picker > button {
  aspect-ratio: 1;
  cursor: pointer;
  background: #eeedf1;
  border: 2px solid #0000;
  border-radius: 9px;
  min-width: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.watermark-image-picker > button.selected {
  border-color: #7565c4;
  box-shadow: 0 0 0 2px #7565c421;
}

.watermark-image-picker > button.failed {
  border-color: #d45b64;
}

.watermark-image-picker > button.succeeded {
  border-color: #52a66f;
}

.watermark-image-picker img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.watermark-image-picker .placeholder {
  color: #a09ca7;
  place-items: center;
  height: 100%;
  font-size: 8px;
  display: grid;
}

.watermark-image-picker i {
  color: #fff;
  background: #1a182159;
  border: 1px solid #ffffffb3;
  border-radius: 50%;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 9px;
  font-style: normal;
  display: grid;
  position: absolute;
  top: 5px;
  right: 5px;
}

.watermark-image-picker > button.selected i {
  background: #6858b6;
}

.watermark-image-picker small, .watermark-image-picker em {
  color: #fff;
  background: #14131bad;
  border-radius: 5px;
  padding: 3px 5px;
  font-size: 7px;
  font-style: normal;
  position: absolute;
  bottom: 5px;
  left: 5px;
}

.watermark-image-picker em {
  left: auto;
  right: 5px;
}

.watermark-modal > footer {
  background: #fff;
  border-top: 1px solid #e1e0e5;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  display: flex;
}

.watermark-modal > footer > button {
  min-height: 36px;
}

.watermark-progress {
  flex: 1;
  gap: 5px;
  display: grid;
}

.watermark-progress > span {
  background: #ebe9ef;
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
}

.watermark-progress i {
  border-radius: inherit;
  background: linear-gradient(90deg, #7565c4, #9b83ec);
  height: 100%;
  transition: width .22s;
  display: block;
}

.watermark-progress small {
  color: #85818c;
  font-size: 8px;
}

.watermark-policy-hint {
  color: #9a7d43;
  text-align: right;
  background: #fbfafc;
  border-top: 1px solid #eeecef;
  margin: 0;
  padding: 8px 18px 10px;
  font-size: 8px;
}

.image-upload-panel > div {
  gap: 4px;
  display: grid;
}

.image-upload-panel strong {
  font-size: 13px;
}

.image-upload-panel span {
  color: var(--muted);
  font-size: 9px;
}

.image-upload-panel select, .product-image-fields select, .product-image-fields input {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 8px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  font-size: 10px;
}

.image-upload-button, .product-image-primary-actions label {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 760;
  display: inline-flex;
}

.image-upload-button input, .product-image-primary-actions label input {
  display: none;
}

.image-upload-button.disabled, .product-image-primary-actions label.disabled {
  cursor: not-allowed;
  opacity: .5;
}

.image-manager-summary {
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  display: flex;
}

.image-manager-summary strong {
  font-size: 13px;
}

.image-manager-summary span {
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 750;
}

.image-manager-summary small {
  color: var(--muted);
  margin-left: auto;
  font-size: 9px;
}

.image-manager-translation-direction {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
}

.image-manager-summary .image-manager-translation-direction > span {
  color: var(--muted);
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 9px;
}

.image-manager-protection {
  color: var(--muted);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
}

.image-manager-protection input {
  width: 15px;
  height: 15px;
  accent-color: var(--violet);
}

.image-manager-summary .image-manager-protection > span {
  color: var(--muted);
  background: none;
  border-radius: 0;
  padding: 0;
}

.image-manager-translation-direction select {
  border: 1px solid var(--line-strong);
  min-height: 34px;
  color: var(--ink);
  background: #fff;
  border-radius: 7px;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 700;
}

.product-image-grid {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  align-items: start;
  gap: 14px;
  display: grid;
}

.product-image-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 4px 15px #1c1d2f08;
}

.product-image-card.selected {
  border-color: #a99eff;
  box-shadow: 0 0 0 3px #7663ff1a;
}

.product-image-canvas {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--line);
  width: 100%;
  color: var(--muted);
  background: #f5f5f7;
  place-items: center;
  font-size: 10px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.product-image-canvas img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.product-image-canvas em {
  background: var(--violet);
  color: #fff;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
  position: absolute;
  top: 9px;
  left: 9px;
}

.product-image-meta {
  gap: 4px;
  padding: 12px 13px 7px;
  display: grid;
}

.product-image-meta strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.product-image-meta span {
  color: var(--muted);
  font-size: 8px;
}

.product-image-fields {
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 8px;
  padding: 8px 13px;
  display: grid;
}

.product-image-fields label {
  gap: 5px;
  display: grid;
}

.product-image-fields label > span {
  color: var(--muted);
  font-size: 8px;
}

.product-image-primary-actions, .product-image-ai-actions {
  gap: 7px;
  padding: 7px 13px 12px;
  display: flex;
}

.product-image-primary-actions button, .product-image-ai-actions button {
  border: 1px solid var(--line-strong);
  min-height: 34px;
  color: var(--ink);
  background: #fff;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 730;
}

.product-image-primary-actions label {
  background: var(--violet-pale);
  min-height: 34px;
  color: var(--violet-dark);
  border-color: #d8d3ff;
  font-size: 9px;
}

.product-image-primary-actions .danger {
  color: var(--red);
  border-color: #efd0d3;
  margin-left: auto;
}

.product-image-ai-actions {
  border-top: 1px solid var(--line);
  background: #fafafd;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 10px;
}

.product-image-ai-actions button {
  color: var(--violet-dark);
  border-color: #d8d3ff;
}

.product-image-ai-actions a {
  min-height: 34px;
  color: var(--violet-dark);
  background: #f3efff;
  border: 1px solid #cfc4ff;
  border-radius: 7px;
  align-items: center;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 760;
  text-decoration: none;
  display: flex;
}

.product-image-ai-actions small {
  color: var(--muted);
  margin-left: auto;
  font-size: 8px;
}

.image-manager-empty {
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  text-align: center;
  background: #fff;
  border-radius: 11px;
  padding: 48px 20px;
  font-size: 11px;
}

@media (max-width: 900px) {
  .existing-editor-page {
    padding: 20px 16px 50px;
  }

  .listing-structure-page {
    padding-bottom: 60vh;
  }

  .existing-editor-header {
    flex-direction: column;
    align-items: stretch;
  }

  .existing-editor-actions {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }

  .existing-editor-layout, .existing-editor-form, .existing-source-attributes, .existing-editor-section-nav {
    grid-template-columns: 1fr;
  }

  .existing-editor-section-nav small {
    white-space: normal;
  }

  .existing-editor-aside {
    position: static;
  }

  .existing-editor-form label.wide {
    grid-column: auto;
  }

  .listing-section-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-main-grid, .listing-attribute-grid, .listing-other-grid {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .listing-attribute-grid.compact {
    grid-template-columns: 1fr;
  }

  .listing-field.wide {
    grid-column: auto;
  }

  .source-category-hint {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .source-category-hint > small {
    white-space: normal;
    width: 100%;
    margin-left: 0;
  }

  .listing-dynamic-attributes {
    padding: 0 16px 16px;
  }

  .listing-required-attribute-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 8px;
  }

  .listing-required-attribute-row > .attribute-field-body, .listing-required-attribute-row > .attribute-field-meta {
    grid-area: auto / 1;
  }

  .listing-required-attribute-row > span {
    padding-top: 0;
  }

  .listing-required-attribute-row > .attribute-field-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .merge-attribute-summary {
    grid-template-columns: 1fr;
  }

  .merge-attribute-summary > div:last-child {
    flex-wrap: wrap;
  }

  .variant-required-summary, .variant-required-summary-items {
    grid-template-columns: 1fr;
  }

  .source-collected-panel {
    margin: 0 16px 16px;
  }

  .product-image-dialog {
    inset: 16px;
  }

  .product-image-editor-layout {
    grid-template-rows: minmax(0, 1fr) minmax(220px, 38%);
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .product-image-editor-layout > .product-image-sku-workspace {
    grid-row: 1 / 3;
  }

  .product-image-editor-content {
    grid-area: 1 / 2;
    padding: 0 12px 28px;
  }

  .product-image-library-toolbar {
    margin-left: -12px;
    margin-right: -12px;
    padding-inline: 12px;
  }

  .product-image-action-panel {
    border-top: 1px solid #d8d3e3;
    border-left: 0;
    grid-area: 2 / 2;
    height: auto;
  }

  .product-image-action-panel > header {
    min-height: 56px;
  }

  .product-image-editor-content .product-image-sku-binding {
    grid-template-columns: 1fr;
  }

  .product-image-dialog-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .product-image-api-config {
    grid-template-columns: 1fr 1fr;
  }

  .product-image-sku-list {
    max-height: none;
  }

  .creation-method-tabs, .file-import-workspace, .creation-method-guide.plugin {
    grid-template-columns: 1fr;
  }

  .creation-method-guide.plugin > span, .creation-method-guide.plugin > a {
    grid-column: 1;
  }
}

@media (max-width: 680px) {
  .listing-category-type-picker, .listing-category-type-picker label, .listing-category-type-picker > div {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .existing-editor-shell .existing-editor-page, .workspace-chrome.is-menu-collapsed .existing-editor-shell .existing-editor-page {
    width: 100%;
    margin-left: 0;
  }

  .listing-section-index {
    grid-template-columns: 1fr;
  }

  .listing-structure-card > .listing-section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-package-dimensions-row {
    gap: 8px;
  }

  .source-collected-panel > header {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-category-dialog {
    width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
    min-height: 0;
  }

  .listing-category-dialog > header {
    padding: 14px;
  }

  .listing-category-search {
    padding: 10px 12px;
  }

  .listing-category-history {
    padding: 9px 12px 10px;
  }

  .listing-category-history-heading small {
    display: none;
  }

  .listing-category-history-options {
    grid-template-columns: 1fr;
  }

  .listing-category-result-summary span, .listing-category-results > button small, .category-tree-label small {
    display: none;
  }

  .product-image-dialog {
    border-radius: 13px;
    inset: 8px;
  }

  .product-image-dialog-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "title done close";
    gap: 10px;
    padding: 12px;
  }

  .product-image-dialog-status {
    display: none;
  }

  .product-image-api-config {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .product-image-dialog-body {
    padding: 0;
  }

  .product-image-editor-layout {
    grid-template-rows: minmax(0, 1fr) minmax(210px, 40%);
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .product-image-editor-layout > .product-image-sku-workspace {
    grid-row: 1 / 3;
    margin: 0;
  }

  .product-image-editor-layout > .product-image-sku-workspace > header {
    padding: 9px 7px;
  }

  .product-image-editor-layout .product-image-sku-list {
    padding: 5px;
  }

  .product-image-editor-layout .product-image-sku-text {
    padding: 5px 6px;
  }

  .product-image-version-actions {
    padding: 6px;
  }

  .product-image-version-actions button {
    min-height: 32px;
    padding: 2px 4px;
    font-size: 9px;
  }

  .product-image-editor-content {
    grid-area: 1 / 2;
    padding: 0 8px 22px;
  }

  .product-image-library-toolbar {
    gap: 9px;
    min-height: 0;
    margin: 0 -8px 9px;
    padding: 9px 8px 10px;
    display: grid;
  }

  .product-image-library-toolbar > div:first-child {
    min-width: 0;
  }

  .product-image-library-toolbar > div:first-child small {
    display: none;
  }

  .product-image-upload-workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    display: grid;
  }

  .product-image-upload-workflow > label:not(.product-image-upload-button) {
    min-width: 0;
  }

  .product-image-upload-button {
    grid-column: 1 / -1;
  }

  .product-image-action-panel {
    border-top: 1px solid #d8d3e3;
    border-left: 0;
    grid-area: 2 / 2;
    height: auto;
  }

  .product-image-action-panel > header {
    min-height: 52px;
    padding: 8px 10px;
  }

  .product-image-action-panel .product-image-selection-summary small {
    display: none;
  }

  .product-image-action-panel .product-image-selection-summary strong, .product-image-action-panel .product-image-selection-summary.has-selection strong {
    font-size: 13px;
  }

  .product-image-action-section {
    padding: 11px 10px;
  }

  .product-image-material-groups .product-image-group > header {
    flex-flow: wrap;
    align-items: center;
  }

  .product-image-material-groups .product-image-group-selection {
    width: auto;
  }

  .product-image-group > header p {
    display: none;
  }

  .product-image-group-list {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 7px;
    padding: 7px;
  }

  .product-image-list-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }

  .product-image-list-thumb {
    width: 100%;
    height: auto;
  }

  .product-image-list-actions {
    gap: 7px;
    padding: 0 7px 8px;
  }

  .product-image-list-actions select, .product-image-list-actions button {
    min-height: 32px;
    padding: 0 7px;
    font-size: 10px;
  }

  .product-image-list-actions select {
    max-width: none;
  }

  .product-image-list-item .product-image-drag-handle {
    top: 6px;
    right: 6px;
  }

  .product-image-sku-url {
    grid-template-columns: 1fr 1fr;
  }

  .product-image-sku-url input {
    grid-column: 1 / -1;
  }

  .product-image-dialog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 8px;
  }

  .product-image-dialog-card-actions {
    grid-template-columns: 1fr;
  }

  .image-manager-header, .image-manager-summary {
    flex-direction: column;
    align-items: stretch;
  }

  .image-manager-back {
    justify-content: center;
  }

  .image-upload-panel {
    grid-template-columns: 1fr;
  }

  .image-watermark-launch-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .image-manager-watermark-button {
    width: 100%;
  }

  .product-image-inline-watermark {
    flex-direction: column;
    align-items: stretch;
  }

  .watermark-modal-backdrop {
    padding: 8px;
  }

  .watermark-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .watermark-modal-body {
    display: block;
    overflow-y: auto;
  }

  .watermark-settings, .watermark-workspace {
    overflow: visible;
  }

  .watermark-settings {
    border-bottom: 1px solid #e5e4e9;
    border-right: 0;
  }

  .watermark-image-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .image-manager-summary small {
    margin-left: 0;
  }

  .product-image-grid {
    grid-template-columns: 1fr;
  }

  .product-creation-hub > header, .embedded-ozon-dashboard .topbar, .creation-method-guide {
    flex-direction: column;
    align-items: stretch;
  }

  .extension-download-button, .manual-store-context {
    width: 100%;
  }

  .creation-method-tabs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .watermark-modal > header p {
    display: none;
  }

  .watermark-layouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .watermark-control-grid {
    grid-template-columns: 1fr;
  }

  .watermark-preview {
    height: 210px;
  }

  .watermark-selection > header {
    flex-direction: column;
    align-items: flex-start;
  }

  .watermark-selection > header > div:last-child {
    justify-content: flex-start;
  }

  .watermark-image-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .watermark-modal > footer {
    flex-wrap: wrap;
  }

  .watermark-progress {
    min-width: 100%;
  }

  .watermark-modal > footer > button {
    flex: 1;
  }

  .watermark-policy-hint {
    text-align: left;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

/*# sourceMappingURL=app_globals_0yg4wg8.css.map*/