:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #172033;
  --muted: #667085;
  --line: #d8dee8;
  --blue: #1769e0;
  --green: #168a52;
  --red: #c33d32;
  --amber: #b7791f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.agentConnectionMarker {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 2147483647;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0b63f6;
  box-shadow: 0 0 0 3px rgba(11, 99, 246, 0.18);
  pointer-events: none;
}

.shell {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px 28px;
}

.panel,
.metric,
.status {
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 8px;
}

.controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 22px;
  margin-top: 8px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 18px;
  margin-bottom: 18px;
}

p,
.small,
label span,
.status {
  color: var(--muted);
}

form {
  display: grid;
  grid-template-columns: 150px 260px 150px 110px;
  gap: 12px;
  align-items: end;
}

.summaryForm {
  grid-template-columns: 150px 170px 145px 145px minmax(410px, 430px) 150px;
  width: min(100%, 1260px);
}

.summaryForm button {
  width: 100%;
}

.costTemplateActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-left: auto;
  margin-right: 10px;
}

.missingCostSummary {
  min-width: 170px;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.missingCostSummary strong {
  color: var(--text);
  font-size: 14px;
}

.missingCostSummary.warning strong {
  color: #b42318;
}

.missingCostSummary.warning {
  border-color: rgba(180, 35, 24, 0.28);
  background: #fef3f2;
  color: #b42318;
}

.missingCostSummary.warning span {
  color: #b42318;
  font-weight: 700;
}

.missingCostSummary.unknown {
  border-color: rgba(148, 163, 184, 0.4);
  background: #f8fafc;
  color: var(--muted);
  justify-content: center;
}

.missingCostSummary.unknown strong {
  display: none;
}

.missingCostSummary.success {
  border-color: rgba(22, 138, 82, 0.24);
  background: #ecfdf3;
  color: var(--green);
  justify-content: center;
}

.missingCostSummary.success strong {
  display: none;
}

.costTemplateActions > button,
.taxationModeButton {
  width: 270px;
  min-width: 270px;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  line-height: 1.05;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.taxationModeMenu {
  position: relative;
  width: 290px;
  min-width: 290px;
}

.taxationModeButton {
  width: 100%;
  min-width: 0;
  justify-content: space-between;
}

.taxationModeButton::after,
.taxationModeItem.hasSubmenu > button::after {
  content: "▾";
  margin-left: 10px;
  font-size: 10px;
}

.taxationModeItem.hasSubmenu > button::after {
  content: "›";
  font-size: 14px;
}

.taxationModeButton:hover,
.taxationModeButton:focus {
  border-color: #9bb7ef;
  background: #eef5ff;
  color: var(--blue);
  outline: none;
}

.taxationModeDropdown,
.taxationSubmenu {
  position: absolute;
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 230px;
  padding: 8px;
  border: 1px solid #d8e0ee;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(23, 32, 51, 0.16);
}

.taxationModeDropdown {
  top: calc(100% + 6px);
  left: 0;
}

.taxationSubmenu {
  top: -8px;
  left: calc(100% + 8px);
  display: none;
  min-width: 96px;
}

.taxationModeDropdown.hidden {
  display: none;
}

.taxationModeDropdown button,
.taxationSubmenu button {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  justify-content: space-between;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

.taxationModeDropdown button:hover,
.taxationModeDropdown button:focus,
.taxationSubmenu button:hover,
.taxationSubmenu button:focus {
  background: #eef5ff;
  color: var(--blue);
  outline: none;
}

.taxationModeItem {
  position: relative;
}

.taxationModeItem.submenuOpen .taxationSubmenu,
.taxationModeItem:focus-within .taxationSubmenu {
  display: grid;
}

.taxationModeInfo {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  width: 272px;
  min-height: 118px;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border: 1px solid #d8e0ee;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(23, 32, 51, 0.16);
  color: var(--text);
}

.taxationModeInfo strong {
  color: var(--dark);
  font-size: 16px;
  line-height: 1.25;
}

.taxationModeInfo span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.costTemplateActions button span {
  display: inline;
}

.costTemplateActions > button:hover {
  border-color: #9bb7ef;
  background: #eef5ff;
  color: var(--blue);
}

.status .costTemplateActions {
  display: none;
}

.dailyCardsControl .costTemplateActions {
  display: flex;
}

.comparisonGroup {
  display: grid;
  grid-template-columns: auto 150px 150px;
  gap: 14px;
  align-items: end;
}

.comparisonToggle {
  height: 42px;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.comparisonToggle input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.comparisonHidden {
  visibility: hidden;
  pointer-events: none;
}

.comparisonTitle {
  min-height: 42px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

input,
button,
select {
  height: 42px;
  border-radius: 6px;
  font: inherit;
}

input,
select {
  border: 1px solid transparent;
  padding: 0 12px;
  background: #fff;
}

.periodField {
  position: relative;
}

.periodPicker {
  position: relative;
  width: 150px;
}

.nativePeriodSelect {
  display: none;
}

.periodButton {
  width: 100%;
  height: 42px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: #000;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 400;
}

.periodArrow {
  color: #000;
  font-size: 14px;
}

.periodMenu,
.monthMenu {
  position: absolute;
  z-index: 50;
  background: #fff;
  border: 1px solid #9aa7b8;
  box-shadow: 0 12px 30px rgba(23, 32, 51, 0.14);
}

.periodPicker::after {
  content: "";
  position: absolute;
  top: 68px;
  left: 150px;
  width: 12px;
  height: 170px;
  z-index: 49;
}

.periodMenu {
  top: calc(100% + 1px);
  left: 0;
  width: 150px;
  padding: 4px 0;
}

.periodOption {
  width: 100%;
  height: 34px;
  border-radius: 0;
  background: #fff;
  color: #000;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 400;
  text-align: left;
}

.periodOption:hover,
.periodOption:focus {
  background: var(--blue);
  color: #fff;
}

.monthMenu {
  top: calc(100% + 69px);
  left: 150px;
  width: 260px;
  padding: 6px;
  border-radius: 6px;
}

.monthOption {
  width: 100%;
  min-height: 48px;
  height: auto;
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  display: grid;
  gap: 3px;
  justify-items: start;
  padding: 7px 10px;
  font-weight: 400;
}

.monthOption strong {
  font-size: 14px;
}

.monthOption span {
  color: var(--muted);
  font-size: 12px;
}

.monthOption:hover,
.monthOption:focus {
  background: #edf5ff;
}

button {
  border: 0;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

button:disabled {
  opacity: 0.55;
  cursor: wait;
}

button.secondary {
  background: #eef2f7;
  color: var(--text);
}

.hidden {
  display: none !important;
}

.login {
  max-width: 460px;
  margin: 9vh auto 0;
  padding: 26px;
  display: grid;
  gap: 22px;
}

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

.admin {
  margin-top: 14px;
  padding: 20px;
}

.credentialsInfo {
  margin-top: 14px;
  padding: 18px 20px;
}

.credentialsGrid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
}

.appHeader {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(320px, 1fr);
  align-items: center;
  gap: 18px;
  margin: 0 -16px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(23, 32, 51, 0.04);
}

.appBrand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ozonLogo {
  color: var(--blue);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
}

.tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border-bottom: 0;
}

.tabButton {
  position: relative;
  width: auto;
  height: 40px;
  padding: 0 22px;
  border-radius: 6px;
  background: #ffffff;
  color: #07152f;
  border: 1px solid transparent;
  font-weight: 700;
}

.tabButton.active {
  background: #ffffff;
  color: #07152f;
}

.tabButton.active::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 4px;
  height: 2px;
  background: var(--blue);
}

.ozonNewsPanel {
  margin-top: 12px;
  padding: 24px;
}

.ozonNewsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.ozonNewsHeader p {
  margin-top: 6px;
}

.ozonNewsHeader button,
.ozonNewsLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.ozonNewsStatus {
  margin: 0 0 18px;
  padding: 12px 14px;
}

.ozonNewsStatus.error {
  color: var(--red);
}

.ozonNewsList {
  display: grid;
  gap: 16px;
}

.ozonNewsCard {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ozonNewsMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 14px;
}

.ozonNewsMeta span:first-child {
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef5ff;
  color: #17477f;
}

.ozonNewsCard h2 {
  margin: 0 0 18px;
  color: #07152f;
  font-size: 24px;
  line-height: 1.22;
}

.ozonNewsBody {
  display: grid;
  gap: 10px;
  max-width: 760px;
  color: #07152f;
  font-size: 16px;
  line-height: 1.45;
}

.ozonNewsBody p {
  color: inherit;
}

.ozonNewsBody a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.ozonNewsBody a:hover {
  text-decoration: underline;
}

.ozonNewsBullet {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.ozonNewsBullet > span:first-child {
  color: var(--blue);
  font-weight: 700;
  line-height: 1.45;
}

.ozonNewsLink {
  width: fit-content;
  margin-top: 18px;
}

.unitTabMenu {
  position: relative;
}

.unitTabButton::before {
  content: "";
}

.unitDropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1000;
  display: grid !important;
  min-width: 112px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #d6deeb;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(7, 21, 47, 0.16);
  transform: translateX(-50%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none !important;
  animation: none !important;
  contain: layout paint;
  will-change: auto;
}

.unitDropdown.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none !important;
  animation: none !important;
}

.unitTabMenu:hover > .unitDropdown,
.unitTabMenu:focus-within > .unitDropdown,
.unitTabMenu:hover > .unitDropdown.hidden,
.unitTabMenu:focus-within > .unitDropdown.hidden {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none !important;
  animation: none !important;
}

.seoDropdown {
  left: 0;
  min-width: 190px;
  transform: none;
}

#unitDropdown {
  left: 0;
  transform: none;
}

.unitDropdown button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 34px;
  justify-content: flex-start;
  padding: 0 14px 0 22px;
  text-align: left;
  background: #ffffff;
  border: 0;
  border-radius: 6px;
  color: #07152f;
  font-weight: 700;
  white-space: nowrap;
  transition: none !important;
  animation: none !important;
}

.unitDropdown button:hover,
.unitDropdown button:focus-visible,
.unitDropdown button.hovered {
  background: #eaf2ff !important;
  color: var(--blue) !important;
  transition: none !important;
  animation: none !important;
}

.headerLogout {
  width: 86px;
  background: #263247;
  color: #ffffff;
  border-radius: 8px;
}

.accountArea {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  justify-content: flex-end;
}

body.dashboardActive {
  overflow-x: hidden;
}

body.dashboardActive .appHeader {
  grid-template-columns: minmax(100px, 0.55fr) minmax(0, 2.55fr) minmax(520px, 1.55fr);
}

body.dashboardActive .tabs {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  gap: 2px;
  overflow: visible;
}

body.dashboardActive .tabButton {
  padding-right: 12px;
  padding-left: 12px;
}

body.dashboardActive #accountLabel {
  max-width: clamp(260px, 22vw, 430px);
}

.accountSwitcher {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.accountButton {
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #536987;
  font-weight: 700;
  padding: 0;
}

#accountLabel {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountArrow {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #ffffff;
  color: #1769e0;
}

.accountSettingsButton {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d8e0ee;
  border-radius: 7px;
  background: #ffffff;
  color: #1769e0;
}

.accountSettingsButton svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.accountSettingsButton:hover,
.accountSettingsButton:focus {
  border-color: #9bb7ef;
  background: #eef5ff;
  outline: none;
}

.accountDropdown,
.accountSettingsDropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 310px;
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(23, 32, 51, 0.16);
}

.accountSettingsDropdown {
  width: 280px;
}

.accountDropdown .accountSettingsDropdown {
  position: static;
  width: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.accountDropdownSettingsMode #accountList,
.accountDropdownSettingsMode #accountForm {
  display: none;
}

.accountSettingsDropdown h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 16px;
}

.accountSettingsDropdown p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.35;
}

.accountSettingsScope {
  padding: 8px 10px;
  border-radius: 6px;
  background: #eef5ff;
  color: #1f3f70;
  font-weight: 700;
}

.accountSettingsStatus {
  min-height: 16px;
  margin-top: -4px;
  color: #008a45;
  font-weight: 700;
}

.accountSettingsTabs {
  display: grid;
  gap: 4px;
}

.accountSettingsOption {
  min-height: 34px;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--text);
  font-weight: 700;
}

.accountSettingsOption:hover {
  background: #eef5ff;
}

.accountSettingsOption input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.accountSettingsOption span {
  color: var(--text);
}

.accountList {
  display: grid;
  gap: 6px;
}

.accountOptionRow {
  height: auto;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: stretch;
  background: #f5f8fc;
  border: 1px solid transparent;
  border-radius: 7px;
  overflow: hidden;
}

.accountOption {
  height: auto;
  min-height: 48px;
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

.accountOption span {
  color: var(--muted);
  font-size: 12px;
}

.accountOptionRow.active {
  border-color: var(--blue);
  background: #edf5ff;
}

.accountOptionSettingsButton {
  width: 34px;
  min-height: 48px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(157, 179, 211, 0.45);
  border-radius: 0;
  background: transparent;
  color: #1769e0;
}

.accountOptionSettingsButton svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.accountOptionSettingsButton:hover,
.accountOptionSettingsButton:focus {
  background: #e4efff;
  outline: none;
}

.accountForm {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.accountForm button {
  width: 100%;
}

.adminStack {
  display: grid;
  gap: 16px;
}

.adminKeyForm {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 190px 200px minmax(250px, 1.2fr) 230px;
  align-items: end;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 14px 16px;
}

.adminActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dangerButton {
  background: #b42318;
  color: #ffffff;
}

input[readonly] {
  background: #f8fafc;
  color: var(--muted);
}

.adminGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.admin form {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 14px;
}

.admin .adminKeyForm {
  grid-template-columns: minmax(220px, 1fr) 190px 200px minmax(250px, 1.2fr) 230px;
  align-items: end;
  padding: 14px 16px;
}

.admin .adminKeyForm .adminActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#adminAccountName.maskedText,
#adminClientId.maskedText {
  color: transparent;
  text-shadow: none;
  caret-color: transparent;
}

.adminFieldHint {
  display: block;
  min-height: 18px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

h3 {
  margin: 0;
  font-size: 15px;
}

.usersList {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.userRow {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px 12px;
}

.userRow button {
  height: 34px;
  background: #fff2f0;
  color: var(--red);
  border: 1px solid #f0bbb6;
}

.status {
  margin-top: 0;
  padding: 8px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 46px;
}

.status.error {
  color: var(--red);
  border-color: #f0bbb6;
}

.dailyControls {
  min-height: 96px;
  padding-top: 16px;
  padding-bottom: 16px;
  align-items: center;
  box-shadow: 0 12px 30px rgba(23, 32, 51, 0.04);
}

.dailyControls h1 {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
}

.dailyControls p {
  margin-top: 4px;
  font-size: 13px;
}

.dailyOverview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 0.78fr)) repeat(2, minmax(0, 1.33fr));
  margin: 0 0 18px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(23, 32, 51, 0.05);
}

.dailyCardsControl {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 34px;
  margin: 0 0 10px;
}

.dailyCardsMenu {
  position: relative;
}

.dashboardAnchorNav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboardAnchorNav button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.dashboardAnchorNav button:hover {
  border-color: #9bb7ef;
  background: #eef5ff;
  color: var(--blue);
}

.dashboardAnchorSection {
  scroll-margin-top: 96px;
}

.dailyCardsButton {
  min-height: 32px;
  padding: 0 32px 0 12px;
  position: relative;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.dailyCardsButton:hover {
  border-color: #9bb7ef;
  background: #eef5ff;
  color: var(--blue);
}

.dailyCardsButton::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text);
  transform: translateY(-35%);
}

.dailyCardsDropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 80;
  width: 250px;
  max-height: 380px;
  overflow: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(23, 32, 51, 0.16);
}

.dailyCardsOption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 6px;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.dailyCardsOption:hover {
  background: #f3f6fb;
}

.dailyCardsOption input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.reportBlock {
  min-height: 242px;
  padding: 18px 22px;
  display: grid;
  align-content: start;
  gap: 14px;
  border-right: 1px solid #e5eaf3;
}

.reportBlock:last-child {
  border-right: 0;
}

.reportBlock h2,
.dailyCard h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

.reportValue {
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.segmentTrack {
  height: 7px;
  display: flex;
  overflow: hidden;
  background: #edf1f7;
  border-radius: 999px;
}

.segmentTrack span {
  height: 100%;
}

.segmentTrack .green,
.dot.green {
  background: #31c48d;
}

.segmentTrack .red,
.dot.red {
  background: #ef4444;
}

.segmentTrack .yellow,
.dot.yellow {
  background: #facc15;
}

.segmentTrack .sky,
.dot.sky {
  background: #8ecae6;
}

.segmentTrack .purple,
.dot.purple {
  background: #9b5cf6;
}

.segmentTrack .teal,
.dot.teal {
  background: #2ec4b6;
}

.segmentTrack .mint,
.dot.mint {
  background: #86dca5;
}

.segmentTrack .orange,
.dot.orange {
  background: #fb923c;
}

.segmentTrack .pink,
.dot.pink {
  background: #f8b4a7;
}

.segmentTrack .brown,
.dot.brown {
  background: #8d6e63;
}

.segmentTrack .blue,
.dot.blue {
  background: #4f83f1;
}

.reportList {
  display: grid;
  gap: 12px;
  font-size: 14px;
}

.reportList div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.reportList strong,
.profitRows strong {
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.profitBlock {
  align-content: stretch;
  display: block;
  position: relative;
  min-height: 252px;
  padding-right: 24px;
  border-right: 0;
}

.profitBlock .reportValue {
  display: block;
  margin-top: 28px;
}

.netProfitChart span {
  background: #2563eb;
}

.profitRows {
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  position: absolute;
  top: 32px;
  right: 22px;
  z-index: 2;
  width: 250px;
}

.profitRows div {
  display: grid;
  grid-template-columns: 108px 66px 64px;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

.profitRows strong {
  min-width: 62px;
  padding: 4px 8px;
  color: var(--text);
  text-align: right;
  background: #f2f5fb;
  border-radius: 6px;
}

.profitValueComparison {
  margin-top: 10px;
}

.profitMetricComparison {
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

.profitMetricComparison.metricPlaceholder {
  visibility: hidden;
}

.profitSparkline {
  position: absolute;
  left: 0;
  right: 8px;
  bottom: 12px;
  z-index: 1;
  width: auto;
  min-height: 74px;
  height: 74px;
  margin: 0;
  color: #31c48d;
}

.netProfitBlock .profitSparkline {
  color: #4f83f1;
}

.profitSparkline.dailyLineChart,
.profitSparkline .dailySparkline {
  height: 74px;
}

.profitSparkline.dailyLineChart {
  position: absolute;
  left: 0;
  right: 8px;
  width: auto;
}

.profitSparkline .dailyChartTooltip {
  bottom: 66px;
}

.miniChart {
  height: 64px;
  display: grid;
  grid-template-columns: repeat(5, minmax(18px, 1fr));
  gap: 6px;
  align-items: end;
  margin-top: auto;
}

.miniChart span {
  height: 42%;
  background: #35c486;
  border-radius: 6px 6px 0 0;
}

.miniChart span:nth-child(2) {
  height: 56%;
}

.miniChart span:nth-child(3) {
  height: 38%;
}

.miniChart span:nth-child(4) {
  height: 50%;
}

.miniChart span:nth-child(5) {
  height: 48%;
}

.dailyCards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.dailyCard {
  min-height: 172px;
  padding: 18px;
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.04);
  cursor: grab;
  user-select: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
}

.hiddenDailyCard,
.dailyCards.emptyDailyCards {
  display: none;
}

.dailyCard:active {
  cursor: grabbing;
}

.dailyCardDragging {
  opacity: 0.55;
  transform: scale(0.985);
}

.dailyCardDropBefore {
  border-left: 4px solid var(--blue);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.18);
}

.dailyCardDropAfter {
  border-right: 4px solid var(--blue);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.18);
}

.dailyCard strong {
  margin-top: 4px;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.dailyCard small,
.cardDate {
  color: var(--muted);
  font-size: 12px;
}

.ordersDailyCard {
  padding-right: 18px;
}

.dailyCardAction {
  width: fit-content;
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  background: #eef5ff;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.ordersDailyCard .dailyCardAction {
  position: absolute;
  right: 18px;
  top: 58px;
  z-index: 2;
}

.dailyCardAction:hover {
  background: #dbeafe;
}

.ordersExploreGroups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 18px 22px 22px;
  overflow: auto;
}

#ordersExploreModal .richPreviewPanel {
  width: min(var(--orders-explore-width, 1120px), calc(100vw - 32px));
  min-width: min(760px, calc(100vw - 32px));
}

.ordersExploreResizeHandle {
  position: absolute;
  top: 60px;
  bottom: 0;
  z-index: 4;
  width: 9px;
  cursor: ew-resize;
  touch-action: none;
}

.ordersExploreResizeHandleLeft {
  left: 0;
}

.ordersExploreResizeHandleRight {
  right: 0;
}

.ordersExploreResizeHandle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: 54px;
  border-radius: 999px;
  background: #c7d6ec;
  transform: translateY(-50%);
}

.ordersExploreResizeHandleLeft::after {
  left: 2px;
}

.ordersExploreResizeHandleRight::after {
  right: 2px;
}

.ordersExploreResizeHandle:hover::after,
.ordersExploreModalResizing .ordersExploreResizeHandle::after {
  background: var(--blue);
}

.ordersExploreGroup {
  min-width: 0;
  overflow-x: auto;
}

.ordersExploreGroup h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.ordersExploreSummary {
  color: var(--muted);
  font-size: 13px;
  margin-left: 8px;
}

.ordersExploreTable {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.ordersExploreTable th,
.ordersExploreTable td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5edf7;
  text-align: left;
  vertical-align: top;
}

.ordersExploreTable th {
  position: relative;
  padding: 0;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

.ordersExploreThInner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 9px 36px 9px 12px;
}

.ordersExploreThInner > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ordersExploreModal .ordersExploreFilterButton {
  z-index: 5;
  border-color: #8cb9ff;
  background: #eef5ff;
  color: var(--blue);
}

#ordersExploreModal .ordersExploreFilterButton.active {
  background: #dbeafe;
  border-color: var(--blue);
  color: var(--blue);
}

#ordersExploreModal .ordersExploreFilterButton:hover {
  background: #dbeafe;
  border-color: var(--blue);
}

body .ordersExploreFilterMenu {
  z-index: 260;
}

.ordersExploreColumnResizeHandle {
  position: absolute;
  top: 0;
  right: -3px;
  z-index: 3;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.ordersExploreColumnResizeHandle::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 3px;
  bottom: 8px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

.ordersExploreColumnResizeHandle:hover::after,
.columnResizing .ordersExploreColumnResizeHandle::after {
  background: #96b7e8;
}

.ordersExploreTable td:nth-child(4),
.ordersExploreTable td:nth-child(5),
.ordersExploreTable th:nth-child(4),
.ordersExploreTable th:nth-child(5) {
  text-align: right;
  white-space: nowrap;
}

.ordersExploreStatusBadge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #eef3fb;
  color: #52647e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.ordersExploreStatusBadge.delivering {
  background: #f1edff;
  color: #5d46ff;
}

.ordersExploreStatusBadge.readyToShip {
  background: #e8fbfb;
  color: #009c91;
}

.ordersExploreStatusBadge.cancelled {
  background: #f1f4f8;
  color: #64748b;
}

.ordersExploreStatusBadge.delivered {
  background: #e8f7ef;
  color: #00a34a;
}

.ordersExploreSku {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

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

  #ordersExploreModal .richPreviewPanel {
    min-width: 0;
  }

  .ordersExploreResizeHandle {
    display: none;
  }

  .ordersDailyCard {
    padding-right: 18px;
  }

  .ordersDailyCard .dailyCardAction {
    position: static;
  }
}

.comparisonDelta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

.comparisonDelta.up {
  color: var(--green);
  background: #e8f7ef;
}

.comparisonDelta.down {
  color: var(--red);
  background: #fff2f0;
}

.comparisonDelta.neutral {
  color: var(--muted);
}

.miniBars {
  height: 40px;
  display: grid;
  grid-template-columns: repeat(5, minmax(12px, 1fr));
  gap: 5px;
  align-items: end;
  margin-top: auto;
}

.miniBars .miniBar {
  height: 58%;
  background: currentColor;
  border-radius: 5px 5px 0 0;
}

.miniBars .miniBar:nth-child(2) {
  height: 66%;
}

.miniBars .miniBar:nth-child(3) {
  height: 78%;
}

.miniBars .miniBar:nth-child(4) {
  height: 72%;
}

.miniBars .miniBar:nth-child(5) {
  height: 55%;
}

.miniBars.orange {
  color: #fb923c;
}

.miniBars.green {
  color: #31c48d;
}

.miniBars.red {
  color: #e05243;
}

.miniBars.sky {
  color: #8ecae6;
}

.miniBars.purple {
  color: #9b5cf6;
}

.miniBars.teal {
  color: #2ec4b6;
}

.miniBars.blue {
  color: #4f83f1;
}

.dailyLineChart {
  display: block;
  height: 58px;
  margin-top: auto;
  position: relative;
  overflow: visible;
}

.dailySparkline {
  width: 100%;
  height: 58px;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.dailySparkArea {
  fill: currentColor;
  opacity: 0.16;
}

.dailySparkLine {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dailyChartPoint {
  fill: transparent;
  stroke: transparent;
  cursor: help;
}

.dailyChartHit {
  position: absolute;
  inset-block: 0;
  cursor: crosshair;
}

.dailyChartMarker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateX(-50%);
}

.dailyChartMarker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}

.dailyChartTooltip {
  position: absolute;
  left: 50%;
  bottom: 52px;
  z-index: 4;
  min-width: 118px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  white-space: nowrap;
}

.dailyChartTooltip span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.dailyChartTooltip strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.dailyChartHit:first-of-type .dailyChartTooltip {
  left: 0;
  transform: translateX(0) translateY(4px);
}

.dailyChartHit:last-of-type .dailyChartTooltip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}

.dailyChartHit:hover .dailyChartMarker,
.dailyChartHit:focus-within .dailyChartMarker {
  opacity: 0.5;
}

.dailyChartHit:hover .dailyChartTooltip,
.dailyChartHit:focus-within .dailyChartTooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dailyChartHit:first-of-type:hover .dailyChartTooltip,
.dailyChartHit:first-of-type:focus-within .dailyChartTooltip,
.dailyChartHit:last-of-type:hover .dailyChartTooltip,
.dailyChartHit:last-of-type:focus-within .dailyChartTooltip {
  transform: translateX(0) translateY(0);
}

.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 14px 0;
}

.metric {
  min-height: 112px;
  padding: 16px;
  display: grid;
  align-content: space-between;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  font-size: 25px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
  margin-bottom: 14px;
}

.grid .panel,
.shell > .panel {
  padding: 20px;
}

.split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.split > div {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px;
  display: grid;
  gap: 4px;
}

.split strong {
  font-size: 22px;
}

.bars {
  display: grid;
  gap: 10px;
}

.barRow {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px;
  gap: 12px;
  align-items: center;
}

.barLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barTrack {
  height: 10px;
  background: #edf1f7;
  border-radius: 999px;
  overflow: hidden;
}

.barFill {
  height: 100%;
  background: var(--blue);
}

.negative .barFill {
  background: var(--red);
}

.barAmount {
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tableWrap {
  overflow: auto;
}

.operationsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.operationColumn {
  display: grid;
  gap: 12px;
  align-content: start;
}

.operationCard {
  overflow: hidden;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
}

.operationGroupRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  background: #e7ebf1;
  border-bottom: 1px solid #cbd3df;
}

.operationGroupRow,
.operationGroupRow strong {
  font-weight: 700;
}

.operationTitle,
.operationChildInfo {
  display: flex;
  align-items: center;
  min-width: 0;
}

.operationTitle strong,
.operationChildName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.operationToggle {
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: 7px;
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: #000;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 9px;
  line-height: 1;
  vertical-align: middle;
}

.operationToggle:hover {
  border-color: #9eb4d4;
  background: #eef5ff;
}

.operationChildren {
  display: grid;
}

.operationChildRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 39px;
  padding: 9px 12px 9px 26px;
  border-top: 1px solid var(--line);
}

.operationChildName {
  color: var(--text);
}

.operationAmount {
  color: #06152b;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.operationEmpty {
  grid-column: 1 / -1;
  color: var(--muted);
}

.categoryProfitPanel {
  margin-top: 14px;
  padding: 20px;
}

.panelTitleRow {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.panelTitleRow h2 {
  margin-bottom: 5px;
}

.panelTitleRow p {
  font-size: 13px;
}

.profitFilterInput {
  width: 280px;
  max-width: 100%;
}

.profitToolbar {
  display: grid;
  grid-template-columns: auto 280px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.zeroToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.zeroToggle input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.categoryProfitTable {
  min-width: 1980px;
}

.categoryProfitTable.profitColumnsFixed {
  table-layout: fixed;
}

.typeProfitPanel .categoryProfitTable {
  min-width: 1980px;
}

.articleProfitPanel .categoryProfitTable {
  min-width: 2500px;
}

.categoryProfitTable th {
  position: relative;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.categoryProfitTable th,
.categoryProfitTable td {
  vertical-align: middle;
}

.categoryProfitTable th button {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 25px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.categoryProfitTable th:first-child button {
  justify-content: flex-start;
  text-align: left;
}

.categoryProfitTable th button.active {
  color: inherit;
}

.categoryProfitTable th button .sortLabel {
  min-width: 0;
}

.categoryProfitTable th button .sortArrow {
  flex: 0 0 auto;
  color: #000;
  font-size: 11px;
  line-height: 1;
}

.profitFilterButton {
  position: absolute;
  right: 5px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  color: #000;
  background: transparent;
  font-size: 11px;
  line-height: 1;
  transform: translateY(-50%);
}

.profitFilterButton:hover,
.profitFilterButton.active {
  color: #000;
  background: transparent;
}

.profitColumnResizeHandle {
  position: absolute;
  right: -1px;
  top: 0;
  z-index: 12;
  width: 3px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.profitColumnResizeHandle:hover,
.columnResizing .profitColumnResizeHandle {
  background: rgba(23, 105, 224, 0.12);
}

.categoryProfitTable th:not(:first-child),
.categoryProfitTable td:not(:first-child) {
  text-align: center;
  white-space: nowrap;
}

.profitStickyOverlay {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 55;
  display: none;
  pointer-events: none;
}

.profitStickyOverlay.visible {
  display: block;
}

.profitStickyTitle {
  position: absolute;
  top: 0;
  padding: 14px 20px 14px;
  background: #ffffff;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  pointer-events: auto;
}

.profitStickyTitle .panelTitleRow {
  margin-bottom: 0;
  align-items: center;
}

.profitStickyTitle .profitFilterInput {
  height: 34px;
}

.profitStickyTitle .zeroToggle {
  min-height: 34px;
}

.profitStickyTableClip {
  position: absolute;
  overflow: hidden;
  background: #ffffff;
  border-bottom: 0;
  pointer-events: auto;
}

.profitStickyTableClip table {
  border-collapse: collapse;
}

.profitStickyTableClip th {
  border-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.profitStickyTableClip th button {
  width: 100%;
  height: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.profitStickyTableClip th:first-child button {
  justify-content: flex-start;
  text-align: left;
}

.articleProfitPanel .categoryProfitTable td:nth-child(-n+4) {
  text-align: left;
  white-space: normal;
}

.articleProfitPanel .categoryProfitTable th:nth-child(-n+4),
.profitStickyTableClip[data-profit-table="article"] th:nth-child(-n+4) {
  text-align: center;
}

.articleProfitPanel .categoryProfitTable th:nth-child(-n+4) button,
.profitStickyTableClip[data-profit-table="article"] th:nth-child(-n+4) button {
  justify-content: center;
  text-align: center;
}

.categoryProfitTable td:first-child {
  min-width: 250px;
}

.articleProfitPanel .categoryProfitTable td:nth-child(2) {
  min-width: 300px;
}

.articleProfitPanel .categoryProfitTable td:nth-child(3),
.articleProfitPanel .categoryProfitTable td:nth-child(4) {
  min-width: 180px;
}

.categoryProfitTable td:first-child strong,
.categoryProfitTable td:first-child span {
  display: block;
}

.categoryProfitTable td:first-child span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.profitCellMain {
  display: block;
  white-space: nowrap;
}

.tableComparisonDelta {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.18;
  white-space: nowrap;
}

.tableComparisonDelta.up {
  color: var(--green);
  background: #e8f7ef;
}

.tableComparisonDelta.down {
  color: var(--red);
  background: #fff2f0;
}

.positiveMoney {
  color: var(--green);
  font-weight: 700;
}

.negativeMoney {
  color: var(--red);
  font-weight: 700;
}

.categoryTotalRow td {
  border-top: 2px solid var(--line);
  background: #f8fafc;
  font-weight: 700;
}

.cachePanel {
  margin-top: 14px;
  padding: 20px;
}

.tariffsPanel {
  margin-top: 14px;
  padding: 20px;
}

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

.tariffUploadRow p {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}

.tariffSecondaryTitle {
  font-size: 24px;
  line-height: 1.2;
}

.tariffUploadRow small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.tariffActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.tariffUploadRow button {
  width: 170px;
  flex: 0 0 auto;
}

.tariffsPreview {
  margin-top: 18px;
}

.tariffsPreviewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.tariffsPreviewHeader b {
  display: block;
  color: var(--text);
}

.tariffsPreviewHeader span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.tariffsTableWrap {
  max-height: 640px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid #d0d7de;
  background: #fff;
  scrollbar-gutter: stable both-edges;
  padding-bottom: 2px;
}

.tariffsTableWrap::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.tariffsTableWrap::-webkit-scrollbar-thumb {
  background: #8b95a1;
  border: 3px solid #f3f4f6;
  border-radius: 999px;
}

.tariffsTableWrap::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.tariffsTable {
  width: max-content;
  min-width: max-content;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
  margin-right: 28px;
}

.tariffsTable th,
.tariffsTable td {
  width: 136px;
  min-width: 136px;
  padding: 4px 6px;
  border: 1px solid #d0d7de;
  vertical-align: middle;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.tariffsTable th {
  background: #f8fafc;
  color: var(--text);
  font-weight: 800;
}

.tariffsTable td:nth-child(2),
.tariffsTable td:nth-child(3),
.tariffsTable td:nth-child(4),
.tariffsTable thead tr:not(:first-child) th:nth-child(2),
.tariffsTable thead tr:not(:first-child) th:nth-child(3),
.tariffsTable thead tr:not(:first-child) th:nth-child(4) {
  width: 150px;
  min-width: 150px;
  text-align: left;
}

.tariffsTable th:last-child,
.tariffsTable td:last-child {
  width: 156px;
  min-width: 156px;
  padding-right: 18px;
}

.tariffsTable .sheetCorner,
.tariffsTable .sheetColumnName,
.tariffsTable .sheetRowName {
  background: #f3f4f6;
  color: #4b5563;
  font-weight: 700;
  text-align: center;
}

.tariffsTable .sheetCorner,
.tariffsTable .sheetRowName {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 54px;
  min-width: 54px;
}

.tariffsTable .sheetColumnName {
  top: 0;
  z-index: 4;
  height: 22px;
  padding: 2px 6px;
}

.tariffsTable .sheetCorner {
  top: 0;
  z-index: 5;
}

.cacheHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.cacheHeader p {
  margin-top: 6px;
}

.cacheHeader button {
  width: 170px;
}

.cacheStatus {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: #f8fafc;
}

.cacheRows {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.cacheSectionTitle {
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
}

.cacheAccountGroup {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.cacheAccountHeader {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.cacheAccountHeader small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.cacheAccountChevron {
  color: var(--blue);
  font-weight: 900;
  font-size: 18px;
}

.cacheAccountBody {
  display: grid;
  gap: 10px;
}

.cacheAccountBody.hidden {
  display: none;
}

.cacheRow {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 110px 190px 190px 150px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #ffffff;
}

.reportCacheRow {
  grid-template-columns: minmax(220px, 1fr) 190px 190px 190px 190px 320px;
}

.cacheStatusPair {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cacheStatusPair .cacheState {
  min-width: 150px;
}

.cacheRow > div {
  display: grid;
  gap: 3px;
}

.cacheState {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

.cacheState.fresh {
  background: #e7f7ef;
  color: var(--green);
}

.cacheState.stale,
.cacheState.loading {
  background: #fff4df;
  color: var(--amber);
}

.cacheErrorText {
  grid-column: 1 / -1;
  color: var(--danger);
  line-height: 1.35;
  overflow-wrap: anywhere;
  padding-top: 8px;
  border-top: 1px solid #fee2e2;
}

.tnvedView {
  margin-top: 14px;
}

.ozonToolbar {
  background: #edf5ff;
  border: 1px solid #b6d3ff;
  border-radius: 6px;
  padding: 12px;
}

.toolbarTitle {
  color: #536987;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 7px;
}

.toolbarControls {
  display: grid;
  grid-template-columns: 230px 178px 150px 1fr;
  gap: 12px;
  align-items: center;
}

.seoProductsControls {
  grid-template-columns: 300px 250px 1fr;
}

.tnvedSearch,
.columnsButton {
  width: 100%;
}

.stockToggle {
  height: 42px;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  padding: 0 12px;
  white-space: nowrap;
}

.stockToggle input {
  width: 16px;
  height: 16px;
}

.columnsMenu {
  position: relative;
}

.columnsButton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: #fff;
  color: var(--text);
  border: 1px solid transparent;
  font-weight: 700;
}

.columnsButton::after {
  content: "▾";
  color: var(--muted);
}

.columnsDropdown {
  position: absolute;
  z-index: 40;
  top: 48px;
  left: 0;
  width: 250px;
  max-height: 350px;
  overflow: auto;
  background: #fff;
  border: 1px solid #bfd3f5;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(20, 40, 70, 0.16);
  padding: 8px;
}

.tnvedMetaRow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.tnvedMetaRow .tnvedMeta {
  margin: 0;
}

.unitColumnsToolbar {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 35;
}

.unitColumnsToolbar.hidden {
  display: none;
}

.unitColumnsButton {
  height: 30px;
  min-width: 112px;
  padding: 0 12px;
  border: 1px solid #9ec4ff;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.unitColumnsButton::after {
  content: "▾";
  margin-left: 9px;
  color: var(--muted);
}

.unitColumnsDropdown {
  position: absolute;
  z-index: 45;
  top: 34px;
  left: 0;
  width: 270px;
  max-height: 380px;
  overflow: auto;
  background: #fff;
  border: 1px solid #bfd3f5;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(20, 40, 70, 0.16);
  padding: 8px;
}

.unitColumnsDropdown.hidden {
  display: none;
}

.columnOption {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 8px;
}

.columnOption input {
  width: 18px;
  height: 18px;
}

.refreshButton {
  justify-self: end;
  min-width: 156px;
  padding: 0 16px;
}

.tnvedMeta {
  color: #4e6383;
  margin: 10px 0 14px;
}

.analyticsControls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-top: 8px;
}

.analyticsDayLabel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #4e6383;
  font-size: 12px;
  font-weight: 700;
}

.analyticsDayLabel select {
  min-width: 180px;
  height: 38px;
  border: 1px solid #9fc2ff;
  border-radius: 8px;
  background: #fff;
  color: #0b1933;
  font-weight: 700;
  padding: 0 10px;
}

.analyticsTableShell {
  margin-top: 12px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: auto;
}

.analyticsTableShell .analyticsTable {
  width: max-content;
  max-width: none;
  table-layout: fixed;
}

.analyticsTableShell::-webkit-scrollbar {
  height: 12px;
}

.analyticsTableShell::-webkit-scrollbar-thumb {
  background: #9fbcea;
  border-radius: 6px;
}

.analyticsTableShell::-webkit-scrollbar-track {
  background: #e9f1ff;
}

.errorText {
  color: var(--red);
}

.tnvedTableShell {
  height: auto;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid #b6d3ff;
  background: #fff;
}

.tnvedTable {
  width: auto;
  min-width: 1496px;
  border-collapse: collapse;
  table-layout: fixed;
}

.tnvedTableShell {
  contain: layout paint;
}

body.unitProductsActive .tnvedTableShell {
  overflow-x: auto;
  overflow-y: visible;
  contain: none;
  scrollbar-width: auto;
}

body.unitProductsActive .tnvedTableShell::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  display: block;
}

body.unitProductsActive .tnvedTableShell::-webkit-scrollbar-thumb {
  background: #9fbcea;
  border-radius: 999px;
}

body.unitProductsActive .tnvedTableShell::-webkit-scrollbar-track {
  background: #e9f1ff;
}

.tnvedTable tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: 74px;
}

.seoProductsTable {
  min-width: 2120px;
}

#seoProductsView {
  margin-left: -16px;
  margin-right: -16px;
}

#seoProductsView .productsHeader,
#seoProductsView .tnvedMeta {
  padding-left: 16px;
  padding-right: 16px;
}

.seoProductsTableShell {
  height: auto;
  width: 100vw;
  border-left: 0;
  border-right: 0;
  background: #f2f7ff;
}

.seoProductsTable {
  min-width: max(2120px, 100vw);
}

.seoProductPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.seoProductPill.good {
  color: var(--green);
  background: #e8f7ef;
}

.seoProductPill.bad {
  color: var(--red);
  background: #fff2f0;
}

.seoProductPill.muted {
  color: var(--muted);
  background: #eef2f7;
}

.seoKeywordMissingCell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.seoKeywordAgentButton {
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 6px;
  padding: 6px 10px;
  font-weight: 700;
  cursor: pointer;
}

.seoKeywordAgentButton:hover {
  background: #dbeafe;
}

.seoAnnotationAgentButton {
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 6px;
  padding: 6px 10px;
  font-weight: 700;
  cursor: pointer;
}

.seoAnnotationAgentButton:hover {
  background: #dbeafe;
}

.seoKeywordAgentModal.hidden {
  display: none;
}

.seoKeywordAgentModal {
  position: fixed;
  inset: 0;
  z-index: 1500;
}

.seoKeywordAgentBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
}

.seoKeywordAgentDialog {
  position: relative;
  width: min(980px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  margin: 24px auto;
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
  padding: 24px;
}

.seoKeywordAgentClose {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #334155;
}

.seoKeywordAgentHeader h2,
.seoKeywordLeaderBox h3 {
  margin: 0 0 8px;
  color: #0f172a;
}

.seoKeywordAgentHeader p {
  margin: 0 0 16px;
  color: #475569;
}

.seoKeywordLeaderBox {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}

.seoKeywordLeaderBox div {
  margin: 4px 0;
}

.seoKeywordAgentHint {
  color: #475569;
  margin-bottom: 6px;
}

.seoKeywordAgentLimit {
  color: #1d4ed8;
  font-weight: 700;
  margin-bottom: 12px;
}

.seoKeywordAgentLimit.error {
  color: #b91c1c;
}

.seoKeywordAgentChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.seoKeywordAgentLoading,
.seoKeywordAgentEmpty,
.seoKeywordAgentMuted {
  color: #53617a;
  font-size: 14px;
  line-height: 1.4;
}

.seoKeywordChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  cursor: pointer;
}

.seoKeywordChip.selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.24);
}

.seoKeywordChip strong {
  color: #0f172a;
}

.seoKeywordChip em {
  font-style: normal;
  color: #64748b;
}

.seoKeywordChip button {
  border: 0;
  border-radius: 999px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: #991b1b;
  background: #fee2e2;
}

.seoKeywordAgentAdd {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.seoKeywordAgentAdd input {
  flex: 1;
  min-width: 0;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 10px 12px;
}

.seoKeywordAgentAdd button,
.seoKeywordAgentSave,
.seoKeywordAgentCancel {
  border-radius: 6px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.seoKeywordAgentAdd button,
.seoKeywordAgentSave {
  border: 1px solid #2563eb;
  color: #fff;
  background: #2563eb;
}

.seoKeywordAgentCancel {
  border: 1px solid #cbd5e1;
  color: #0f172a;
  background: #fff;
}

.seoKeywordAgentStatus {
  min-height: 20px;
  color: #475569;
}

.seoKeywordAgentStatus.ok {
  color: #047857;
}

.seoKeywordAgentStatus.error {
  color: #b91c1c;
}

.seoKeywordAgentActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.seoAnnotationAgentDialog {
  width: min(1080px, calc(100vw - 48px));
}

.seoAnnotationAgentToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}

.seoAnnotationAgentToolbar .seoKeywordAgentLimit {
  margin: 0;
}

.seoAnnotationAgentGenerate {
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 9px 16px;
  white-space: nowrap;
}

.seoAnnotationAgentGenerate:hover {
  background: #1d4ed8;
}

.seoAnnotationSelectorBlock {
  margin-top: 12px;
}

.seoAnnotationAgentLabel {
  display: block;
  margin: 12px 0 6px;
  color: #0f172a;
  font-weight: 700;
}

.seoAnnotationSelectableKeys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 150px;
  overflow: auto;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.seoAnnotationCustomKeyRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.seoAnnotationCustomKeyInput {
  flex: 1 1 auto;
  min-width: 220px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #0f172a;
  font: inherit;
  padding: 9px 10px;
}

.seoAnnotationCustomKeyInput:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  outline: none;
}

.seoAnnotationCustomKeyAdd {
  border: 1px solid #2563eb;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 9px 14px;
  white-space: nowrap;
}

.seoAnnotationCustomKeyAdd:hover {
  background: #1d4ed8;
}

.seoAnnotationSelectChip {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 6px 10px;
}

.seoAnnotationSelectChip.selected {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}

.seoAnnotationSelectChip:hover {
  border-color: #60a5fa;
}

.seoAnnotationTextHighlightWrap {
  position: relative;
  width: 100%;
  min-height: 520px;
}

.seoAnnotationAgentHighlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  line-height: 1.45;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.seoAnnotationInlineKey {
  background: transparent;
  color: #1d4ed8;
  font-weight: 800;
}

.seoAnnotationAgentText {
  position: relative;
  width: 100%;
  min-height: 520px;
  resize: vertical;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: transparent;
  padding: 12px;
  font: inherit;
  line-height: 1.45;
  color: transparent;
  caret-color: #0f172a;
  -webkit-text-fill-color: transparent;
}

.seoAnnotationAgentText::placeholder {
  color: #64748b;
  -webkit-text-fill-color: #64748b;
}

.seoAnnotationAgentText::selection {
  background: rgba(37, 99, 235, 0.24);
}

.seoAnnotationAgentColumns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.seoAnnotationAgentColumns h3 {
  margin: 0 0 8px;
  color: #0f172a;
}

.seoAnnotationKeyList {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-height: 48px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.seoAnnotationKeyChip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
}

.seoAnnotationUnusedKey {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid #fecaca;
  background: #fff7f7;
  border-radius: 8px;
  padding: 8px 10px;
  color: #991b1b;
}

.seoAnnotationUnusedKey span {
  color: #64748b;
  font-size: 12px;
}

.richPreviewButton {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.richPreviewButton:hover {
  filter: brightness(0.97);
}

.richPreviewModal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.richPreviewModal.hidden {
  display: none;
}

.richPreviewBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 48, 0.48);
}

.richPreviewPanel {
  position: relative;
  width: min(1120px, 100%);
  max-height: min(90vh, 920px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(8, 22, 48, 0.28);
  overflow: hidden;
}

.richPreviewHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid #d8e4f5;
}

.richPreviewHeader h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.richPreviewHeader p {
  margin: 0;
  color: var(--muted);
}

.richPreviewClose {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.richPreviewClose:hover {
  background: #eef3fb;
}

.richPreviewBody {
  overflow: auto;
  padding: 28px;
  background: #fff;
}

.richPreviewWidget {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  margin-bottom: 0;
}

.richPreviewWidget-billboard {
  display: block;
}

.richPreviewWidget-billboard .richPreviewBlock {
  margin-bottom: 42px;
}

.richPreviewBlock {
  background: #fff;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

.richPreviewBlock img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #f3f5f8;
}

.richPreviewBlock strong,
.richPreviewBlock p {
  display: block;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 14px;
  text-align: center;
}

.richPreviewBlock strong {
  margin-top: 24px;
  color: #10213d;
  font-size: 18px;
  line-height: 1.3;
}

.richPreviewBlock p {
  margin-top: 10px;
  margin-bottom: 0;
  color: #425575;
  font-size: 15px;
  line-height: 1.5;
}

.tnvedTable th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #075cf5;
  color: #fff;
  border: 1px solid #8cb9ff;
  padding: 8px 7px;
  font-size: 9px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.unitProductsActive .tnvedTableShell > .tnvedTable th {
  position: relative;
  top: auto;
  z-index: 1;
}

.unitStickyOverlay {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 58;
  display: none;
  pointer-events: none;
}

.unitStickyOverlay.visible {
  display: block;
}

.unitStickyTableClip {
  position: absolute;
  overflow: hidden;
  pointer-events: auto;
}

.unitStickyTableClip .tnvedTable {
  border-collapse: collapse;
  table-layout: fixed;
  will-change: transform;
}

.unitStickyTableClip .tnvedTable th {
  position: relative;
  background: #075cf5;
  color: #fff;
  box-shadow: 0 2px 0 rgba(7, 92, 245, 0.18);
}

.tnvedTable td {
  position: relative;
  border: 1px solid #c0d2ea;
  padding: 10px 7px;
  background: #f2f7ff;
  color: #001836;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tnvedTable tr:nth-child(even) td {
  background: #fff;
}

.seoProductsTable tbody tr td,
.seoProductsTable tbody tr:nth-child(even) td,
.seoProductsTable tbody tr:nth-child(odd) td {
  background: #f2f7ff;
}

.seoAnnotationValue {
  white-space: pre-line;
  line-height: 1.32;
}

.thInner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 22px;
  padding-right: 18px;
  text-align: center;
  min-width: 0;
}

.thInner span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.columnResizeHandle {
  position: absolute;
  right: -4px;
  top: 0;
  z-index: 11;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.columnResizeHandle:hover,
.columnResizing .columnResizeHandle {
  background: rgba(255, 255, 255, 0.22);
}

.rowResizeHandle {
  position: absolute;
  left: 0;
  bottom: -4px;
  z-index: 4;
  width: 100%;
  height: 8px;
  cursor: row-resize;
  touch-action: none;
  background: transparent;
}

.rowResizeHandle:hover,
.rowResizing .rowResizeHandle {
  background: rgba(18, 101, 232, 0.14);
}

.filterButton {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: #2d7cff;
  color: #fff;
  padding: 0;
  font-size: 9px;
  line-height: 14px;
}

.filterButton.active {
  background: #003fb9;
}

.filterMenu {
  position: fixed;
  z-index: 100;
  width: 288px;
  background: #fff;
  border: 1px solid #b8d3ff;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(20, 40, 70, 0.18);
  padding: 8px;
  font-size: 13px;
}

.filterMenu button,
.filterMenu input {
  width: 100%;
}

.filterMenu button {
  height: 31px;
  padding: 0 8px;
  margin-bottom: 6px;
  background: #edf4ff;
  color: #173b72;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filterMenu strong {
  display: block;
  color: #7587a4;
  text-transform: uppercase;
  font-size: 12px;
  margin: 4px 0;
}

.filterBulkFill {
  margin: 4px 0 8px;
  padding: 6px;
  background: #f7faff;
  border-radius: 6px;
}

.filterBulkFill strong {
  margin-top: 0;
}

.filterBulkFillRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 6px;
}

.filterBulkFillRow input,
.filterBulkFillRow button {
  margin-bottom: 0;
}

.filterBulkFillRow button {
  font-size: 12px;
  padding: 0 6px;
}

.filterMenu input {
  height: 38px;
  margin-bottom: 6px;
  border-color: #0061ff;
  font-size: 13px;
}

.filterValueList {
  display: grid;
  gap: 2px;
  max-height: 260px;
  overflow: auto;
  padding: 2px 0;
}

.filterValueOption {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 3px 5px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}

.filterValueOption:hover {
  background: #f2f6ff;
}

.filterValueOption input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.filterValueOption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filterValueOption em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.filterValueSelectAll {
  margin-bottom: 4px;
  background: #f7faff;
  font-weight: 700;
}

.filterValueEmpty {
  color: var(--muted);
  padding: 10px 6px;
}

.filterMenuActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.filterMenuActions button {
  margin-bottom: 0;
}

.productPhoto {
  display: block;
  width: 52px;
  height: 70px;
  object-fit: cover;
  margin: 0 auto;
  border-radius: 2px;
}

.photoPlaceholder {
  text-align: center;
  color: var(--muted);
}

.seoView {
  display: grid;
  gap: 14px;
}

.seoView.hidden {
  display: none;
}

.seoPanel {
  margin: 14px -16px 0;
  padding: 22px 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.seoHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 0 22px;
}

.seoHeader h1 {
  margin-right: auto;
}

.seoAuditButton {
  flex: 0 0 auto;
}

.seoNoOcrToggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-right: 8px;
  padding: 6px 10px;
  border: 1px solid #d6e0ee;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.seoNoOcrToggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #0b57d0;
}

.seoAuditStatus {
  min-width: 190px;
  color: #53627c;
  font-size: 13px;
  font-weight: 700;
}

.seoAuditStatus.error {
  color: #d92d20;
}

.seoAuditStatus.ok {
  color: #008a3d;
}

.seoFilterButton {
  position: static;
  transform: none;
  display: inline;
  width: auto;
  height: auto;
  min-width: 0;
  margin-left: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #001b3d;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.seoFilterButton.active {
  background: transparent;
  color: #000000;
  box-shadow: none;
}

.seoFilterMenu {
  min-width: 240px;
}

.seoColumnFilterInput {
  width: 100%;
}

.seoTableWrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: #f2f7ff;
}

.seoTable {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.seoTable th,
.seoTable td {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 12px;
  vertical-align: top;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.seoTable tbody tr,
.seoTable tbody tr:nth-child(even),
.seoTable tbody tr:nth-child(odd),
.seoTable tbody td {
  background: #f2f7ff;
}

.seoTable th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f2f6fb;
  color: #445574;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.seoTable th:nth-child(1),
.seoTable td:nth-child(1) {
  width: 44px;
  min-width: 36px;
}

.seoTable th:nth-child(2),
.seoTable td:nth-child(2) {
  width: 142px;
}

.seoTable th:nth-child(3),
.seoTable td:nth-child(3) {
  width: 170px;
}

.seoTable th:nth-child(4),
.seoTable td:nth-child(4) {
  width: 320px;
}

.seoTable th:nth-child(5),
.seoTable td:nth-child(5),
.seoTable th:nth-child(6),
.seoTable td:nth-child(6) {
  width: 210px;
}

.seoTable th:nth-child(7),
.seoTable td:nth-child(7) {
  width: 260px;
}

.seoTable th:nth-child(8),
.seoTable td:nth-child(8) {
  width: 920px;
  min-width: 180px;
}

.seoAuditSelectCell {
  text-align: center;
  vertical-align: middle;
}

.seoAuditCheckbox {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}

.seoColumnResizeHandle {
  position: absolute;
  top: 0;
  right: -1px;
  z-index: 8;
  width: 3px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.seoColumnResizeHandle:hover,
.columnResizing .seoColumnResizeHandle {
  background: rgba(18, 101, 232, 0.16);
}

.seoAuditCell {
  display: grid;
  gap: 5px;
  min-height: 36px;
  align-content: start;
  font-size: 12px;
  line-height: 1.25;
}

.seoAuditCell strong {
  font-size: 12px;
}

.seoAuditCell span {
  color: #53627c;
}

.seoAuditCell ul {
  margin: 2px 0 0;
  padding-left: 16px;
  color: #53627c;
}

.seoAuditCell.ok strong {
  color: #008a3d;
}

.seoAuditCell.warning strong {
  color: #b26a00;
}

.seoAuditCell.error strong {
  color: #d92d20;
}

.seoAuditCell.pending strong {
  color: #6b7890;
}

.seoAuditCell.photoRunning strong,
.seoAuditCell.photoRunning span {
  color: #6d28d9;
}

.seoAuditCell.photoRunning strong {
  font-weight: 800;
}

.seoArticle {
  display: grid;
  gap: 6px;
}

.seoArticle span {
  color: #0b4d96;
}

.seoLeadPhoto {
  position: relative;
  display: grid;
  place-items: center;
  width: 118px;
  min-height: 158px;
  margin: 0 auto;
}

.seoLeadPhoto img {
  display: block;
  width: 118px;
  height: 158px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f9fc;
}

.seoMediaEditButton {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid #c7d8f3;
  border-radius: 999px;
  background: #ffffff;
  color: #0b57d0;
  box-shadow: 0 8px 22px rgba(15, 31, 58, 0.18);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.seoLeadPhoto:hover .seoMediaEditButton,
.seoMediaEditButton:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.seoMediaModal {
  position: fixed;
  inset: 0;
  z-index: 1500;
}

.seoMediaModal.hidden {
  display: none;
}

.seoPhotoAiPasswordModal {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: grid;
  place-items: center;
  padding: 18px;
}

.seoPhotoAiPasswordModal.hidden {
  display: none;
}

.seoPhotoAiPasswordBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 18, 34, 0.42);
}

.seoPhotoAiPasswordDialog {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  border: 1px solid #d9e2f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(12, 24, 44, 0.28);
}

.seoPhotoAiPasswordClose {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef4fb;
  color: #172033;
  font-size: 24px;
  line-height: 1;
}

.seoPhotoAiPasswordBody {
  padding: 28px 28px 16px;
}

.seoPhotoAiPasswordBody h2 {
  margin: 0 42px 8px 0;
  color: #111827;
  font-size: 22px;
  line-height: 1.2;
}

.seoPhotoAiPasswordBody p {
  margin: 0 0 16px;
  color: #5b6881;
  font-size: 14px;
  line-height: 1.4;
}

.seoPhotoAiPasswordBody input {
  width: 100%;
  height: 44px;
  border: 1px solid #c8d7ef;
  border-radius: 7px;
  padding: 0 14px;
  color: #0f172a;
  font-size: 16px;
  outline: none;
}

.seoPhotoAiPasswordBody input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.14);
}

.seoPhotoAiPasswordError {
  min-height: 18px;
  margin-top: 8px;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}

.seoPhotoAiPasswordActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 28px 26px;
}

.seoPhotoAiPasswordActions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 42px;
  border-radius: 7px;
  padding: 0 18px;
}

.seoPhotoAiPasswordCancel {
  background: #eaf2ff;
  color: #0b326f;
}

.seoPhotoAiPasswordConfirm {
  background: var(--blue);
  color: #ffffff;
}

.seoMediaBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 18, 34, 0.38);
}

.seoMediaDialog {
  position: absolute;
  top: 34px;
  left: 50%;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr auto;
  width: min(960px, calc(100vw - 28px));
  max-height: calc(100vh - 68px);
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(12, 24, 44, 0.28);
  transform: translateX(-50%);
}

.seoMediaHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 30px 12px;
}

.seoMediaHeader h2 {
  margin: 0 0 6px;
  color: #111827;
  font-size: 28px;
  line-height: 1.1;
}

.seoMediaHeader p {
  margin: 0;
  color: #66758f;
  font-size: 15px;
}

.seoMediaClose {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f2f5fa;
  color: #1d2939;
  font-size: 24px;
  line-height: 1;
}

.seoMediaTabs {
  display: flex;
  gap: 24px;
  padding: 0 30px;
  border-bottom: 1px solid #e2e8f0;
}

.seoMediaTabs button {
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #6b7890;
  font-weight: 700;
}

.seoMediaTabs button.active {
  border-bottom-color: #0b57d0;
  color: #101828;
}

.seoMediaRules {
  display: grid;
  gap: 6px;
  margin: 12px 30px 16px;
  padding: 14px 20px;
  border: 1px solid #edf1f7;
  border-radius: 8px;
  background: #fbfdff;
  color: #1d2939;
}

.seoMediaRules span {
  color: #66758f;
  font-size: 13px;
}

.seoMediaDropZone {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 30px 12px;
  padding: 20px;
  border: 2px dashed #d5e0ef;
  border-radius: 8px;
  background: #fbfdff;
  cursor: pointer;
}

.seoMediaDropZone.dragOver {
  border-color: #0b57d0;
  background: #f2f7ff;
}

.seoMediaFileIcon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #eaf1fb;
  color: #53627c;
  font-size: 12px;
  font-weight: 800;
}

.seoMediaDropZone small {
  display: block;
  margin-top: 6px;
  color: #66758f;
}

.seoMediaUrl {
  width: calc(100% - 60px);
  margin: 0 30px 10px;
  padding: 12px 14px;
  border: 1px solid #d6e0ee;
  border-radius: 6px;
  font-size: 15px;
}

.seoMediaStatus {
  min-height: 20px;
  margin: 0 30px 14px;
  color: #0b57d0;
  font-size: 13px;
  font-weight: 700;
}

.seoMediaStatus.error {
  color: #d92d20;
}

.seoMediaStatus.warning {
  color: #b26a00;
}

.seoMediaPhotoHeader {
  padding: 0 30px 10px;
}

.seoMediaPhotoHeader h3 {
  margin: 0;
  font-size: 18px;
}

.seoMediaPhotoHeader span {
  display: inline-flex;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #1d2939;
  font-size: 14px;
}

.seoMediaPhotoGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  min-height: 230px;
  overflow: auto;
  padding: 0 30px 24px;
}

.seoMediaPhotoCell {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  border-radius: 8px;
  background: #f4f7fb;
  overflow: hidden;
}

.seoMediaPhotoCell::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 133.333%;
}

.seoMediaPhotoCell.filled {
  display: block;
  height: max-content;
  min-height: 0;
  line-height: normal;
  text-align: initial;
  appearance: none;
  cursor: grab;
}

.seoMediaPhotoCell.filled:active {
  cursor: grabbing;
}

.seoMediaPhotoCell.dragging {
  opacity: 0.5;
}

.seoMediaPhotoCell.dragOver {
  outline: 3px solid #0b57d0;
  outline-offset: 2px;
  transform: translateY(-2px);
}

.seoMediaPhotoCell img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  background: #ffffff;
  border-radius: 8px;
}

.seoMediaPhotoCell span {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(23, 32, 51, 0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.seoMediaPhotoDelete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 31, 58, 0.22);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease;
}

.seoMediaPhotoDelete svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.seoMediaPhotoCell:hover .seoMediaPhotoDelete,
.seoMediaPhotoDelete:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.seoMediaPhotoDelete:hover {
  background: #000000;
}

.seoMediaPhotoCell.pending {
  outline: 2px solid #0b57d0;
  outline-offset: 2px;
}

.seoMediaPhotoCell em {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #0b57d0;
  color: #ffffff;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.seoMediaFooter {
  display: flex;
  gap: 10px;
  padding: 16px 30px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.seoMediaFooter button {
  margin: 0;
}

.seoRequiredButton {
  margin-left: 10px;
}

.seoRequiredDialog {
  grid-template-rows: auto auto auto auto auto auto auto;
  padding-top: 26px;
}

.seoRequiredModeTabs {
  display: flex;
  gap: 10px;
  margin: 0 68px 14px 30px;
}

.seoRequiredMode {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

.seoRequiredMode.add {
  background: #e5f8ee;
  color: #008f5a;
}

.seoRequiredMode.delete {
  background: #fff0f0;
  color: #d92d20;
}

.seoRequiredMode.mixed {
  background: #eef4ff;
  color: #0b57d0;
}

.seoRequiredMode.add.active {
  border-color: #00a86b;
  box-shadow: 0 0 0 2px rgba(0, 168, 107, 0.16);
}

.seoRequiredMode.delete.active {
  border-color: #e05243;
  box-shadow: 0 0 0 2px rgba(224, 82, 67, 0.14);
}

.seoRequiredMode.mixed.active {
  border-color: #0b57d0;
  box-shadow: 0 0 0 2px rgba(11, 87, 208, 0.14);
}

.seoRequiredDialog h2 {
  margin: 0 68px 8px 30px;
  color: #111827;
  font-size: 28px;
  line-height: 1.1;
}

.seoRequiredSubtitle {
  margin: 0 30px 18px;
  color: #66758f;
  font-size: 14px;
}

.seoRequiredSlotGroups {
  display: grid;
  gap: 18px;
  padding: 0 30px 20px;
}

.seoRequiredSlotGroup {
  display: grid;
  gap: 10px;
}

.seoRequiredSlotGroupHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

.seoRequiredSlotGroupHeader h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  line-height: 1.2;
}

.seoRequiredAppendLast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #d6e0ee;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.seoRequiredAppendLast input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #0b57d0;
}

.seoRequiredSlots {
  display: grid;
  grid-template-columns: repeat(5, 132px);
  gap: 14px;
  align-items: start;
}

.seoRequiredSlot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 176px;
  min-width: 132px;
  min-height: 176px;
  aspect-ratio: 3 / 4;
  border: 2px dashed #cdd9eb;
  border-radius: 8px;
  background: #f7f9fd;
  color: #0b57d0;
  cursor: pointer;
  overflow: hidden;
}

.seoRequiredSlot strong {
  display: block;
  color: #0b57d0;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.seoRequiredSlot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seoRequiredSlot span {
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(23, 32, 51, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.seoRequiredPosition {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(15, 31, 58, 0.16);
  cursor: text;
}

.seoRequiredPosition input {
  width: 34px;
  height: 26px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  appearance: textfield;
}

.seoRequiredPosition input::-webkit-outer-spin-button,
.seoRequiredPosition input::-webkit-inner-spin-button {
  margin: 0;
}

.seoRequiredPosition input:focus {
  outline: 2px solid #0b57d0;
  outline-offset: 1px;
}

.seoRequiredSlot.filled {
  border-style: solid;
  border-color: #d6e0ee;
}

.seoRequiredSlot.filled em {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b57d0;
  box-shadow: 0 8px 22px rgba(15, 31, 58, 0.2);
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.seoRequiredSlot.filled:hover em,
.seoRequiredSlot.filled:focus-visible em {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.seoPhotoStrip {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 4px;
}

.seoPhotoItem {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 118px;
  color: inherit;
  text-decoration: none;
}

.seoPhotoItem span {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(23, 32, 51, 0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.seoPhotoItem img {
  display: block;
  width: 118px;
  height: 158px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f9fc;
}

.seoPhotoItem.loadError img {
  opacity: 0.18;
}

.seoPhotoItem.loadError::after {
  content: "Не загрузилось";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10px;
  color: #516783;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.seoPhotoHoverPreview {
  position: fixed;
  top: 92px;
  left: 18px;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  width: min(640px, calc(100vw - 48px));
  max-height: calc(100vh - 116px);
  padding: 10px;
  border: 1px solid #c8d5e8;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 31, 58, 0.22);
  pointer-events: none;
}

.seoPhotoHoverPreview.visible {
  display: flex;
}

.seoPhotoHoverPreview img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 138px);
  object-fit: contain;
  border-radius: 6px;
}

.articleCell {
  display: grid;
  gap: 6px;
  text-align: center;
}

.articleCell strong {
  font-size: 13px;
  font-weight: 400;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.articleCell span {
  color: #335381;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.numberCell {
  display: block;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tnvedCol-photo {
  width: 70px;
}

.tnvedCol-offer_id {
  width: 104px;
}

.tnvedCol-name {
  width: 260px;
  font-weight: 700;
  text-align: center;
}

td.tnvedCol-name {
  text-align: left;
}

.tnvedCol-status,
.tnvedCol-fbo,
.tnvedCol-fbs,
.tnvedCol-price,
.tnvedCol-discount_price,
.tnvedCol-old_price,
.tnvedCol-commission_percent,
.tnvedCol-commission_rub,
.tnvedCol-volume_liters,
.tnvedCol-logistics_by_liter_rub,
.tnvedCol-return_logistics_by_liter_rub,
.tnvedCol-acquiring_percent,
.tnvedCol-acquiring_rub,
.tnvedCol-extra_packaging_rub,
.tnvedCol-spp_percent,
.tnvedCol-spp_rub,
.tnvedCol-unit_tax_mode,
.tnvedCol-unit_tax_percent,
.tnvedCol-unit_tax_rub,
.tnvedCol-fbs_shipment_point_type,
.tnvedCol-fbs_shipment_cost_rub,
.tnvedCol-fbs_extra_percent,
.tnvedCol-fbs_extra_rub,
.tnvedCol-extra_expense_percent,
.tnvedCol-extra_expense_rub,
.tnvedCol-unit_profit,
.tnvedCol-unit_margin,
.tnvedCol-unit_recommended_price,
.tnvedCol-unit_recommended_old_price,
.tnvedCol-unit_recommended_commission_percent,
.tnvedCol-unit_target_profit {
  width: 90px;
  text-align: center;
}

.tnvedCol-rich_content,
.tnvedCol-video,
.tnvedCol-video_cover,
.tnvedCol-seo_status {
  width: 150px;
  text-align: center;
}

.tnvedCol-keywords {
  width: 230px;
}

.tnvedCol-logistics_by_liter_rub {
  width: 118px;
}

.tnvedCol-return_logistics_by_liter_rub {
  width: 128px;
}

.tnvedCol-acquiring_percent {
  width: 96px;
}

.tnvedCol-acquiring_rub {
  width: 104px;
}

.tnvedCol-extra_packaging_rub {
  width: 104px;
}

.tnvedCol-spp_percent {
  width: 92px;
}

.tnvedCol-spp_rub {
  width: 104px;
}

.tnvedCol-unit_tax_mode {
  width: 118px;
}

.tnvedCol-unit_tax_percent {
  width: 92px;
}

.tnvedCol-unit_tax_rub {
  width: 104px;
}

.tnvedCol-fbs_shipment_point_type {
  width: 126px;
}

.tnvedCol-fbs_shipment_cost_rub {
  width: 124px;
}

.tnvedCol-fbs_extra_percent {
  width: 96px;
}

.tnvedCol-fbs_extra_rub {
  width: 104px;
}

.tnvedCol-extra_expense_percent {
  width: 96px;
}

.tnvedCol-extra_expense_rub {
  width: 104px;
}

.tnvedCol-unit_margin {
  width: 104px;
}

.tnvedCol-unit_recommended_price {
  width: 124px;
}

.tnvedCol-unit_recommended_old_price {
  width: 132px;
}

.tnvedCol-unit_recommended_commission_percent {
  width: 108px;
}

.tnvedTable th.tnvedCol-logistics_by_liter_rub .thInner span,
.tnvedTable th.tnvedCol-return_logistics_by_liter_rub .thInner span,
.tnvedTable th.tnvedCol-acquiring_percent .thInner span,
.tnvedTable th.tnvedCol-acquiring_rub .thInner span,
.tnvedTable th.tnvedCol-extra_packaging_rub .thInner span,
.tnvedTable th.tnvedCol-spp_percent .thInner span,
.tnvedTable th.tnvedCol-spp_rub .thInner span,
.tnvedTable th.tnvedCol-unit_tax_mode .thInner span,
.tnvedTable th.tnvedCol-unit_tax_percent .thInner span,
.tnvedTable th.tnvedCol-unit_tax_rub .thInner span,
.tnvedTable th.tnvedCol-fbs_shipment_point_type .thInner span,
.tnvedTable th.tnvedCol-fbs_shipment_cost_rub .thInner span,
.tnvedTable th.tnvedCol-fbs_extra_percent .thInner span,
.tnvedTable th.tnvedCol-fbs_extra_rub .thInner span,
.tnvedTable th.tnvedCol-extra_expense_percent .thInner span,
.tnvedTable th.tnvedCol-extra_expense_rub .thInner span,
.tnvedTable th.tnvedCol-unit_margin .thInner span,
.tnvedTable th.tnvedCol-unit_recommended_price .thInner span,
.tnvedTable th.tnvedCol-unit_recommended_old_price .thInner span,
.tnvedTable th.tnvedCol-unit_recommended_commission_percent .thInner span {
  font-size: 10px;
  line-height: 1.15;
}

.unitRecommendedPriceCell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.unitApplyRecommendedPriceButton {
  width: 86px;
  max-width: calc(100% - 4px);
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid #1265e8;
  border-radius: 5px;
  background: #fff;
  color: #1265e8;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  white-space: normal;
}

.unitApplyRecommendedPriceButton:hover:not(:disabled) {
  background: #eaf2ff;
}

.unitApplyRecommendedPriceButton:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.unitApplyRecommendedPriceButton.done {
  border-color: #22a35a;
  background: #e8f8ef;
  color: #087c3b;
  opacity: 1;
}

.acquiringPercentInput,
.extraPercentInput,
.sppPercentInput,
.extraPackagingRubInput,
.costPriceInput,
.extraExpensePercentInput,
.unitTaxModeSelect,
.shipmentCostInput,
.targetProfitInput {
  width: 64px;
  max-width: calc(100% - 12px);
  height: 30px;
  padding: 4px 6px;
  border: 1px solid #b8cef0;
  border-radius: 5px;
  background: #ffffff;
  color: #07152f;
  font: inherit;
  text-align: center;
}

.tnvedCol-unit_target_profit {
  overflow: hidden;
}

.targetProfitInput {
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}

.costPriceInput.saving {
  opacity: 0.65;
}

.unitTaxModeSelect {
  width: 100%;
  min-width: 0;
  padding-right: 20px;
}

.percentInputWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  max-width: calc(100% - 12px);
}

.percentInputWrap .acquiringPercentInput,
.percentInputWrap .extraPercentInput,
.percentInputWrap .sppPercentInput,
.percentInputWrap .extraExpensePercentInput {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 18px;
}

.percentInputWrap span {
  position: absolute;
  inset-inline-end: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: #52627a;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

.acquiringPercentInput:focus,
.extraPercentInput:focus,
.sppPercentInput:focus,
.extraPackagingRubInput:focus,
.extraExpensePercentInput:focus,
.shipmentCostInput:focus,
.targetProfitInput:focus {
  border-color: #1265e8;
  outline: 2px solid rgba(18, 101, 232, 0.18);
}

.shipmentPointSelect {
  width: 96px;
  height: 30px;
  padding: 4px 6px;
  border: 1px solid #b8cef0;
  border-radius: 5px;
  background: #ffffff;
  color: #07152f;
  font: inherit;
  text-align: center;
}

.shipmentPointSelect:focus {
  border-color: #1265e8;
  outline: 2px solid rgba(18, 101, 232, 0.18);
}

.tnvedCol-category {
  width: 102px;
  text-align: center;
}

.tnvedCol-type {
  width: 90px;
  text-align: center;
}

.tnvedCol-tnved {
  width: 96px;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

th:last-child,
td:last-child {
  text-align: right;
  white-space: nowrap;
}

.backToTopButton {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(23, 105, 224, 0.16);
  border-radius: 50%;
  background: #ffffff;
  color: var(--blue);
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.18);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.backToTopButton.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.backToTopButton:hover {
  box-shadow: 0 16px 34px rgba(23, 32, 51, 0.24);
  transform: translateY(-2px);
}

.backToTopButton svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.apiPanel {
  margin-top: 14px;
  padding: 22px;
}

.apiRows {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.apiStatusGroup {
  display: grid;
  gap: 10px;
}

.apiStatusGroupHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.apiStatusGroupHeader h2 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
}

.apiStatusGroupHeader p {
  margin: 4px 0 0;
  color: var(--muted);
}

.apiStatusGroupHeader span {
  color: var(--muted);
  white-space: nowrap;
}

.apiTableWrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.apiTable {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
}

.apiTable th,
.apiTable td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

.apiTable th {
  background: #eef5ff;
  color: #445574;
  font-size: 12px;
  text-transform: uppercase;
}

.apiTable td > span,
.apiTable code {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.apiTable code {
  font-family: Consolas, "Courier New", monospace;
  white-space: nowrap;
}

.apiMessage {
  max-width: 360px;
  color: #31405c;
  word-break: break-word;
}

.apiHint {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.35;
}

.adsView {
  display: grid;
  gap: 14px;
}

.adsView.hidden {
  display: none;
}

.adsPanel {
  margin-top: 14px;
  padding: 22px;
}

.adsHeader,
.adsBlockHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.adsHeaderActions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.adsBlockHeaderActions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.adsBlockHeaderLeft {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.adsBlockHeaderLeft h2 {
  margin: 0;
}

.adsAutoStrategyToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.adsAutoStrategyToggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.adsAgentSettingsButton {
  width: auto;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.adsAgentSettingsButton.hidden {
  display: none;
}

.adsAgentSettingsPanel {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.adsAgentSettingsPanel.hidden {
  display: none;
}

.adsAgentSettingsFields {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.adsAgentSettingsFields label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.adsAgentTimeInput {
  width: 112px;
  padding: 7px 8px;
}

.adsAgentSettingsSave {
  width: auto;
  padding: 8px 14px;
  border-radius: 6px;
}

.adsAgentSettingsStatus {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.adsBlockCacheInfo {
  margin: 6px 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.adsHeader p {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}

.adsForm {
  display: grid;
  grid-template-columns: 140px 140px 140px;
  gap: 12px;
  align-items: end;
  width: auto;
}

.adsForm button {
  width: 100%;
}

.adsLogsToggle {
  height: 39px;
  min-width: 82px;
}

.adsLogsToggle.active {
  border-color: var(--blue);
  color: var(--blue);
}

.adsLogsPanel {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.adsLogsPanel.hidden {
  display: none;
}

.adsLogsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.adsLogsHeader h2 {
  margin: 0;
  font-size: 17px;
}

.adsLogsHeader p {
  margin: 4px 0 0;
}

.adsLogsTableWrap {
  max-height: 420px;
}

.adsLogsTable {
  width: max-content;
  min-width: 1180px;
  border-collapse: collapse;
  table-layout: fixed;
}

.adsLogsTable th,
.adsLogsTable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
}

.adsLogsTable th {
  background: #f2f6fb;
  color: #445574;
  font-size: 12px;
  font-weight: 800;
}

.adsLogsTable th:nth-child(1),
.adsLogsTable td:nth-child(1) {
  width: 150px;
}

.adsLogsTable th:nth-child(2),
.adsLogsTable td:nth-child(2),
.adsLogsTable th:nth-child(3),
.adsLogsTable td:nth-child(3) {
  width: 150px;
}

.adsLogsTable th:nth-child(4),
.adsLogsTable td:nth-child(4),
.adsLogsTable th:nth-child(5),
.adsLogsTable td:nth-child(5) {
  width: 250px;
  text-align: left;
}

.adsLogsTable th:nth-child(6),
.adsLogsTable td:nth-child(6),
.adsLogsTable th:nth-child(7),
.adsLogsTable td:nth-child(7) {
  width: 90px;
}

.adsLogsTable td strong,
.adsLogsTable td span {
  display: block;
  line-height: 1.35;
}

.adsLogsTable td span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.adsTableWrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.adsTable {
  width: max-content;
  min-width: 1420px;
  border-collapse: collapse;
  table-layout: fixed;
}

.adsCampaignsTable {
  min-width: 1320px;
}

.adsTable th,
.adsTable td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: top;
  font-size: 13px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.adsTable th {
  position: relative;
  background: #f2f6fb;
  color: #445574;
  font-size: 12px;
  font-weight: 800;
  user-select: none;
}

.adsTable th .adsColumnResizeHandle {
  z-index: 2;
}

.adsStickyOverlay {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 55;
  display: none;
  pointer-events: none;
}

.adsStickyOverlay.visible {
  display: block;
}

.adsStickyTitle {
  position: absolute;
  top: 0;
  padding: 6px 22px 2px;
  background: #ffffff;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  pointer-events: auto;
}

.adsStickyTitle .adsBlockHeader {
  margin: 0;
}

.adsStickyTableClip {
  position: absolute;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: 0;
  border-bottom: 0;
  pointer-events: auto;
}

.adsStickyTableClip .adsTable {
  border-collapse: collapse;
}

.adsStickyTableClip .adsTable th {
  border-bottom: 1px solid var(--line);
}

.adsTable td:first-child,
.adsTable th:first-child {
  width: 280px;
  min-width: 0;
  white-space: normal;
}

.adsTable td:last-child,
.adsTable th:last-child {
  white-space: normal;
}

.adsTable[data-ads-table="campaigns"] td:first-child,
.adsTable[data-ads-table="active"] td:first-child,
.adsTable[data-ads-table="active"] td:nth-child(2),
.adsTable[data-ads-table="active"] td:nth-child(3),
.adsTable[data-ads-table="missing"] td:first-child {
  padding-left: 14px;
  padding-right: 14px;
  text-align: left;
  line-height: 1.35;
}

.adsTable[data-ads-table="campaigns"] td:first-child *,
.adsTable[data-ads-table="active"] td:first-child *,
.adsTable[data-ads-table="active"] td:nth-child(2) *,
.adsTable[data-ads-table="active"] td:nth-child(3) *,
.adsTable[data-ads-table="missing"] td:first-child * {
  text-align: left;
}

.adsTable[data-ads-table="campaigns"] td:not(:first-child),
.adsTable[data-ads-table="active"] td:nth-child(n+4),
.adsTable[data-ads-table="missing"] td:not(:first-child) {
  text-align: center;
  vertical-align: middle;
}

.adsTable[data-ads-table="campaigns"] td:not(:first-child) *,
.adsTable[data-ads-table="active"] td:nth-child(n+4) *,
.adsTable[data-ads-table="missing"] td:not(:first-child) * {
  text-align: center;
}

.adsTable[data-ads-table="campaigns"] td:nth-child(3),
.adsTable[data-ads-table="campaigns"] td:nth-child(3) * {
  text-align: left;
}

.adsTable[data-ads-table="campaigns"] td:nth-child(3) .adsBudgetCell {
  justify-items: start;
}

.adsTable .articleCell strong,
.adsTable .articleCell span {
  display: block;
  line-height: 1.35;
}

.adsTable td > span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.adsAiCell {
  display: flex;
  align-items: center;
  min-height: 66px;
}

.adsAiBadge {
  display: inline-block;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef3f8;
  color: #465875;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.adsAiBadge.good {
  background: #e3f8ec;
  color: #008f39;
}

.adsAiBadge.warn {
  background: #fff2d9;
  color: #b45309;
}

.adsAiBadge.bad {
  background: #ffeee8;
  color: #d92316;
}

.adsBudgetCell {
  display: grid;
  gap: 5px;
  min-width: 150px;
  justify-items: center;
  text-align: center;
}

.adsBudgetPeriod {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.adsBudgetRemainder {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.adsBudgetPercent {
  font-weight: 800;
  white-space: nowrap;
}

.adsBudgetPercent.danger {
  color: #dc2626;
}

.adsBudgetPercent.warning {
  color: #d87900;
}

.adsBudgetPercent.success {
  color: #15803d;
}

.adsBidControl {
  display: block;
  width: 96px;
  max-width: 96px;
  min-width: 0;
  min-height: 66px;
  margin: 0 auto;
}

.adsBidControlAgent {
  width: 118px;
  max-width: 118px;
  min-height: 66px;
}

.adsBidInputWrap {
  position: relative;
  min-width: 0;
  width: 100%;
  min-height: 66px;
}

.adsSkuBidInput {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 9px;
  text-align: right;
}

.adsBidMin {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.adsBidAgent {
  display: block;
  min-height: 13px;
  margin-top: 2px;
  color: #008f39;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.adsBidLoading {
  position: absolute;
  inset: 0 0 auto 0;
  height: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.adsBidControl.loading .adsSkuBidInput {
  color: transparent;
}

.adsBidControl.loading .adsBidLoading {
  display: inline-flex;
}

.adsBidSpinner {
  width: 12px;
  height: 12px;
  border: 2px solid #d8e2f0;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: adsBidSpin 0.8s linear infinite;
}

@keyframes adsBidSpin {
  to {
    transform: rotate(360deg);
  }
}

.adsSkuBidButton {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  padding: 8px 0;
  font-size: 12px;
}

.adsThInner {
  min-width: 0;
  padding-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: center;
}

.adsSortButton {
  width: 100%;
  min-width: 0;
  padding: 0 12px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.adsSortButton .sortLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.adsSortButton .sortArrow {
  flex: 0 0 auto;
  color: #001a3d;
  font-size: 11px;
  line-height: 1;
}

.adsSortButton.active .sortArrow {
  color: var(--blue);
}

.adsColumnResizeHandle {
  position: absolute;
  top: 0;
  right: -1px;
  z-index: 5;
  width: 3px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.adsColumnResizeHandle:hover,
.columnResizing .adsColumnResizeHandle {
  background: rgba(18, 101, 232, 0.18);
}

.emptyTableCell {
  color: var(--muted);
  text-align: center;
}

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

  .summaryForm {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparisonGroup {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  }

  .costTemplateActions {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .costTemplateActions > button,
  .taxationModeMenu {
    flex: 1 1 230px;
  }

  .adsHeader,
  .adsBlockHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .adsForm {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .adsHeaderActions {
    align-items: stretch;
    width: 100%;
  }

  .adsLogsToggle {
    width: 100%;
  }

  .dailyOverview,
  .dailyCards {
    grid-template-columns: 1fr 1fr;
  }

  .operationsGrid {
    grid-template-columns: 1fr;
  }

  form,
  .cards,
  .credentialsGrid,
  .toolbarControls,
  .adminGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .shell {
    padding: 14px;
  }

  form,
  .cards,
  .dailyOverview,
  .dailyCards,
  .split,
  .credentialsGrid,
  .comparisonGroup,
  .toolbarControls,
  .adminGrid,
  .userRow {
    grid-template-columns: 1fr;
  }

  .comparisonTitle {
    min-height: 0;
  }

  .barRow {
    grid-template-columns: 1fr;
  }

  .barAmount {
    text-align: left;
  }

  .panelTitleRow,
  .profitToolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .profitToolbar {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .profitFilterInput {
    width: 100%;
  }

  .costTemplateActions {
    align-items: stretch;
    flex-direction: column;
  }

  .costTemplateActions > button,
  .taxationModeMenu {
    width: 100%;
    min-width: 0;
  }

  .taxationModeDropdown,
  .taxationSubmenu {
    position: static;
    box-shadow: none;
  }

  .taxationSubmenu {
    margin-left: 12px;
  }

  .taxationModeInfo {
    position: static;
    width: auto;
    min-height: 0;
    box-shadow: none;
  }

  .backToTopButton {
    right: 16px;
    bottom: 16px;
  }
}

.seoWarmupCache {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}

.seoWarmupCache img {
  width: 1px;
  height: 1px;
  object-fit: cover;
}