/* PiOops — полноэкранная оболочка, эмаль/алюминий. Без градиент-карточек. */
:root {
  --navy: #071525;
  --navy-2: #0c2238;
  --enamel: #d61f26;
  --enamel-dim: #a8181e;
  --alum: #e6e9ed;
  --paper: #f4f5f7;
  --ink: #0a121c;
  --muted: #5a6673;
  --line: #c8ced6;
  --ok: #0f6b45;
  --ok-bg: #d3ebe0;
  --warn: #d61f26;
  --warn-bg: #f8d9da;
  --font-brand: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Archivo", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
  --rail: 15rem;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --stroke: 1.5px;
}

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

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--alum);
}

a { color: var(--navy-2); }
a:hover { color: var(--enamel); }

/* —— Full-screen shell —— */
.app {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.app.is-guest {
  grid-template-columns: 1fr;
}

.rail {
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: #d7dde5;
  padding: 1.25rem 1rem 1rem;
  min-height: 0;
  border-right: 3px solid var(--enamel);
}

.rail-brand {
  font-family: var(--font-brand);
  font-size: 2rem;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: #fff !important;
  margin: 0 0 0.35rem;
  display: block;
}

.rail-brand:hover { color: #fff !important; }

.rail-brand em {
  font-style: normal;
  color: var(--enamel);
}

.rail-tag {
  margin: 0 0 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7f8b9a;
  font-weight: 600;
}

.rail nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* тонкая тёмная прокрутка вместо белой системной */
  scrollbar-width: thin;
  scrollbar-color: #24405f transparent;
}

.rail nav::-webkit-scrollbar { width: 6px; }
.rail nav::-webkit-scrollbar-track { background: transparent; }
.rail nav::-webkit-scrollbar-thumb { background: #24405f; border-radius: 3px; }
.rail nav::-webkit-scrollbar-thumb:hover { background: #33557a; }
.rail nav::-webkit-scrollbar-button { display: none; height: 0; }

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin: 0.25rem 0 0.45rem;
}

.nav-group-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6d7b8c;
  padding: 0.35rem 0.65rem 0.25rem;
  cursor: pointer;
  user-select: none;
}
.nav-group-title::before {
  content: "▸ ";
  color: #8aa0b8;
}
.nav-group.is-open > .nav-group-title::before {
  content: "▾ ";
}
.nav-group:not(.is-open) > a {
  display: none;
}

.rail nav a,
.rail nav .nav-top {
  color: #b8c2cf;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.48rem 0.65rem 0.48rem 0.85rem;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.rail nav .nav-group a {
  padding-left: 1.1rem;
  font-size: 0.88rem;
  font-weight: 500;
}

.rail nav a:hover,
.rail nav .nav-top:hover {
  color: #fff;
  background: var(--navy-2);
  border-left-color: var(--enamel);
}

.rail nav a.is-active,
.rail nav .nav-top.is-active {
  color: #fff;
  background: var(--navy-2);
  border-left-color: var(--enamel);
}

.rail-toggle,
.rail-current { display: none; }

.rail-foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #1a3048;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rail-foot a {
  color: #8a96a5;
  text-decoration: none;
  font-size: 0.82rem;
  padding: 0.35rem 0.65rem;
}

.rail-foot a:hover { color: #fff; }

.stage {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--paper);
}

.stage-inner {
  min-height: 100%;
  padding: 1.5rem 1.75rem 2.5rem;
  width: 100%;
  max-width: none;
}

/* Guest / login: full-bleed split */
.login-screen {
  display: grid;
  grid-template-columns: minmax(280px, 42vw) 1fr;
  height: 100vh;
  width: 100%;
}

.login-brand {
  background: var(--navy);
  border-right: 3px solid var(--enamel);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.login-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -18deg,
      transparent,
      transparent 28px,
      rgba(214, 31, 38, 0.07) 28px,
      rgba(214, 31, 38, 0.07) 29px
    );
  pointer-events: none;
}

.login-brand-inner { position: relative; z-index: 1; }

.login-brand .mega {
  font-family: var(--font-brand);
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  line-height: 0.9;
  color: #fff;
  margin: 0;
  letter-spacing: -0.04em;
}

.login-brand .mega em {
  font-style: normal;
  color: var(--enamel);
  display: block;
}

.login-brand p {
  margin: 1.25rem 0 0;
  color: #9aa6b5;
  font-size: 1.05rem;
  max-width: 16rem;
  line-height: 1.45;
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--paper);
}

.login-form {
  width: 100%;
  max-width: 22rem;
}

.login-form h2 {
  font-family: var(--font-brand);
  font-size: 1.75rem;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

.login-form .lead {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

.login-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.login-form p { margin: 0 0 1rem; }

.login-form input {
  width: 100%;
}

/* —— Page chrome (not cards) —— */
/* Шапка страницы — тёмная полоса другого оттенка, чем меню слева, с красной линией:
   сразу видно, что открыт новый раздел */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 0 -1.75rem 1.25rem;
  padding: 1.1rem 1.75rem 1rem;
  background: linear-gradient(120deg, #163a5c 0%, #0f2a44 60%, #0c2238 100%);
  border-bottom: 4px solid var(--enamel);
  color: #fff;
}

.page-head h1 {
  font-family: var(--font-brand);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}

.page-head .lead {
  margin: 0.4rem 0 0;
  color: #c9d4df;
  max-width: 40rem;
  font-size: 0.98rem;
  line-height: 1.45;
}

/* шапка первой на странице — вплотную к верхнему краю */
.stage-inner > .page-head:first-child { margin-top: -1.5rem; }

.page-head a:not(.btn) { color: #fff; }

.page-head-art {
  flex: 0 0 auto;
  width: 5.25rem;
  height: 5.25rem;
  margin: 0;
  background: #fff center / contain no-repeat;
  background-origin: content-box;
  padding: 0.3rem;
  box-sizing: border-box;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--enamel);
}

/* картинка стока: склад, коробки на поддоне, стрелки по кругу */
.page-head-art--stock {
  background-image: url("data:image/png;base64,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");
}

@media (max-width: 720px) {
  .page-head { margin: 0 -1rem 1rem; padding: 0.9rem 1rem; }
  .stage-inner > .page-head:first-child { margin-top: -1.25rem; }
  .page-head-art { width: 3.75rem; height: 3.75rem; }
}

.lead { color: var(--muted); line-height: 1.5; }

h1, h2 {
  font-family: var(--font-brand);
  letter-spacing: -0.02em;
  color: var(--ink);
}

h2 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

p { line-height: 1.5; color: var(--muted); }

/* Home: full-width composition */
.home-hero {
  margin: -1.5rem -1.75rem 1.5rem;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--navy);
  color: #d7dde5;
  border-bottom: 3px solid var(--enamel);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.home-hero .mega {
  font-family: var(--font-brand);
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.9;
  margin: 0;
  color: #fff;
  letter-spacing: -0.04em;
}

.home-hero .mega em {
  font-style: normal;
  color: var(--enamel);
}

.home-hero .hero-tag {
  margin: 1rem 0 0;
  font-size: 1.1rem;
  color: #9aa6b5;
  max-width: 28rem;
  line-height: 1.4;
}

.home-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.home-quick-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: var(--stroke) solid var(--line);
  background: #fff;
  color: var(--ink);
  font: 800 1.05rem/1.1 var(--font-brand, inherit);
  text-decoration: none;
  text-align: center;
}

.home-quick-card--main {
  min-height: 4.6rem;
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-size: 1.2rem;
}

.home-quick-card:active {
  transform: scale(0.98);
}

.home-app-update {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin: 0 0 1.25rem;
}

@media (max-width: 640px) {
  .home-quick {
    gap: 0.65rem;
  }
  .home-quick-card--main {
    min-height: 5rem;
  }
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  width: 100%;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 1.25rem;
  overflow: hidden;
  background: #fff;
}

.stat-strip > div {
  padding: 0.85rem 1rem;
  border-right: 1px solid var(--line);
  background: #fff;
}

.stat-strip > div:last-child { border-right: none; }

.stat-strip b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.stat-strip span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.stat-strip .warn b { color: var(--enamel); }

.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  align-items: center;
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: 0.85rem 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.55rem 1rem;
  background: var(--enamel);
  color: #fff !important;
  border: var(--stroke) solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}

.btn:hover {
  background: var(--enamel-dim);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(7, 21, 37, 0.18);
}

.btn-ghost {
  background: var(--navy);
}

.btn-ghost:hover { background: var(--navy-2); }

.btn-ok {
  background: var(--ok);
}

.btn-ok:hover { background: #0c5a3a; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.5rem 0.65rem;
  border: var(--stroke) solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-sm);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--enamel);
}

label { font-size: 0.9rem; color: var(--ink); }

.table-wrap {
  overflow-x: auto;
  margin: 0.75rem 0;
  width: 100%;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  background: #fff;
}

table th {
  text-align: left;
  padding: 0.6rem 0.7rem;
  background: var(--navy);
  color: #e8edf3;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
}

table td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}

table tbody tr:hover td { background: #eef1f5; }

table tr.mismatch td,
table tr.is-mismatch td {
  background: var(--warn-bg);
}

code, .sku {
  font-family: var(--font-mono);
  font-size: 0.84em;
  background: transparent;
  padding: 0;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: var(--stroke) solid currentColor;
  border-radius: 999px;
  background: #fff;
}

.badge-off { color: var(--enamel); }
.badge-on { color: var(--ok); }
.badge-neutral { color: var(--muted); }

.status-ok { color: var(--ok); font-weight: 700; }
.status-bad { color: var(--enamel); font-weight: 700; }
.status-muted { color: var(--muted); }

.flash { list-style: none; padding: 0; margin: 0 0 1rem; }
.flash li {
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.35rem;
  background: var(--ok-bg);
  color: var(--ok);
  border: var(--stroke) solid var(--ok);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
}
.flash li.error,
.flash .error {
  background: var(--warn-bg);
  color: var(--enamel);
  border-color: var(--enamel);
}

.meta-line {
  color: var(--ink);
  font-size: 0.95rem;
  margin: 0.75rem 0;
}

.hint { color: var(--muted); font-size: 0.9rem; }

.log-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.log-list li {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  color: #3d4a48;
}

.log-list li:last-child { border-bottom: none; }

.quick-links {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.quick-links li {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.quick-links a {
  display: block;
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 650;
  font-size: 0.92rem;
}

.quick-links a:hover {
  background: var(--navy);
  color: #fff;
}

/* Legacy .card → flatten into page surface */
.card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  max-width: none !important;
}

@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100dvh;
  }

  /* телефон: одна строка — логотип и кнопка меню, меню раскрывается по нажатию */
  .rail {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    border-right: none;
    border-bottom: 2px solid var(--enamel);
    padding: 0.45rem 0.9rem;
  }

  .rail-brand { font-size: 1.3rem; margin: 0; }
  .rail-tag { display: none; }

  .rail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.4rem 0.75rem;
    border: 1px solid #24405f;
    border-radius: var(--radius-sm);
    background: var(--navy-2);
    color: #fff;
    font: 600 0.85rem/1 var(--font-body);
    cursor: pointer;
  }

  .rail-current {
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b8c2cf;
    font-size: 0.82rem;
    font-weight: 600;
  }

  .rail nav,
  .rail-foot { display: none; }

  .rail.is-menu-open nav {
    display: flex;
    flex-basis: 100%;
    max-height: 70dvh;
    overflow-y: auto;
    padding-bottom: 0.25rem;
  }

  .rail.is-menu-open .rail-foot {
    display: flex;
    flex-basis: 100%;
    flex-direction: row;
    padding-top: 0.35rem;
  }

  .rail.is-menu-open .rail-current { display: none; }

  /* заголовок страницы — без пояснений и картинки */
  .page-head { margin: 0 -1rem 0.85rem; padding: 0.55rem 1rem; gap: 0.5rem; border-bottom-width: 3px; }
  .stage-inner > .page-head:first-child { margin-top: -1.25rem; }
  .page-head .lead,
  .page-head-art { display: none; }
  .page-head h1 { font-size: 1.25rem; margin: 0; }

  .login-screen {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .login-brand {
    border-right: none;
    border-bottom: 3px solid var(--enamel);
    padding: 1.5rem;
    min-height: 30vh;
  }

  .home-hero {
    margin: -1.5rem -1rem 1.25rem;
    padding: 1.5rem 1rem;
  }

  .stage-inner {
    padding: 1.25rem 1rem 2rem;
  }
}

/* —— Карточка цен (метражи строками) —— */
.price-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
}

.price-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-end;
}

.price-toolbar-main label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.price-grid-wrap { margin-top: 0; }

.price-grid th { white-space: nowrap; }

.price-grid td { padding: 0.3rem 0.35rem; }

.price-grid .price-len {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-grid .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-in {
  width: 4.6rem;
  max-width: 100%;
  padding: 0.28rem 0.35rem !important;
  font-size: 0.82rem !important;
  font-variant-numeric: tabular-nums;
}

.price-in-lg { width: 5.5rem; }

.price-in-target {
  font-weight: 700;
  border-color: var(--navy) !important;
}

.price-grid td.js-need-wb,
.price-grid td.js-need-oz {
  font-weight: 700;
  white-space: nowrap;
}

.price-grid td.js-need-wb .js-need-val,
.price-grid td.js-need-oz .js-need-val {
  display: block;
  font-variant-numeric: tabular-nums;
}

.price-grid td.js-need-wb.is-preview .js-need-val,
.price-grid td.js-need-oz.is-preview .js-need-val {
  opacity: 0.85;
  font-style: italic;
}

.price-in-wb {
  font-weight: 700;
  border-color: #6b2d8a !important;
  background: #fff;
}

.price-in-oz {
  font-weight: 700;
  border-color: #0a7a4a !important;
  background: #fff;
}

.mp-tag {
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  margin-top: 0.15rem;
  white-space: nowrap;
}

.col-wb .mp-tag { color: #5c2d7a; }
.col-oz .mp-tag { color: #0f6b45; }

.price-alert {
  margin: 0.5rem 0 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--warn-bg);
  border: var(--stroke) solid var(--enamel);
  border-radius: var(--radius-sm);
  font-weight: 700;
  color: var(--enamel-dim);
}

.btn-row-apply {
  padding: 0.35rem 0.55rem !important;
  font-size: 0.72rem !important;
  white-space: nowrap;
}

.col-apply {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 1;
  box-shadow: -4px 0 8px rgba(0,0,0,0.06);
}

.linkish {
  display: block;
  margin-top: 0.15rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy-2);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkish:hover { color: var(--enamel); }

.col-wb .linkish { color: #5c2d7a; }
.col-oz .linkish { color: #0f6b45; }

.is-preview { opacity: 0.92; }
.is-preview::after {
  content: "";
}

.price-grid tr.is-focus td {
  box-shadow: inset 3px 0 0 var(--enamel);
}

/* Блок WB — сиреневый */
.price-grid thead th.th-wb {
  background: #5c2d7a;
  color: #f3e8fa;
}

.price-grid tbody td.col-wb {
  background: #f3eaf8;
}

.price-grid tbody tr:hover td.col-wb {
  background: #eadcf3;
}

.price-grid td.col-wb-start,
.price-grid thead th.th-wb-start {
  border-left: 3px solid #5c2d7a;
}

.price-grid td.col-wb-end {
  border-right: 1px solid #c9a8de;
}

/* Блок Ozon — зелёный */
.price-grid thead th.th-oz {
  background: #0f6b45;
  color: #e5f6ee;
}

.price-grid tbody td.col-oz {
  background: #e7f5ee;
}

.price-grid tbody tr:hover td.col-oz {
  background: #d7efe3;
}

.price-grid td.col-oz-start,
.price-grid thead th.th-oz-start {
  border-left: 3px solid #0f6b45;
}

/* mismatch не затирает цвета блоков МП */
.price-grid tr.mismatch td.col-wb {
  background: #f0dceb;
}

.price-grid tr.mismatch td.col-oz {
  background: #ddeee4;
}

/* --- Сток --- */
.stock-slogan { font-style: italic; letter-spacing: 0.02em; }

.stock-push-off {
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.65rem;
  background: var(--warn-bg);
  border: 1px solid var(--enamel);
  border-radius: var(--radius-sm);
  color: var(--enamel-dim);
  font-size: 0.85rem;
  font-weight: 600;
}

.stock-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 0.5rem;
  align-items: stretch;
}

.stock-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem 0.4rem;
}

.stock-panel-send { border-color: #c9a8de; background: #faf6fc; }
.stock-panel-ops { border-color: #b8c4d4; background: #f6f8fb; }
.stock-panel-excel { border-color: #c5d0dc; background: #fff; }
.stock-panel-autosync {
  flex: 1 1 16rem;
  border-color: #b8d4c8;
  background: #f5faf7;
}

.stock-panel-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.28rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stock-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-items: center;
  margin: 0;
}

.stock-file-form { display: inline; margin: 0; }

.stock-check {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.stock-autosync-meta {
  margin: 0.28rem 0 0 !important;
  font-size: 0.72rem !important;
}

/* dropdown */
.stock-dd {
  position: relative;
  display: inline-block;
}

.stock-dd > summary {
  list-style: none;
}

.stock-dd > summary::-webkit-details-marker { display: none; }

.stock-dd-sum {
  width: auto !important;
  min-width: 6.5rem;
  padding: 0 0.55rem !important;
}

.stock-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 7rem;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(7, 21, 37, 0.14);
}

.stock-dd-menu .stock-btn {
  width: 100% !important;
  min-width: 0;
}

.stock-dd-danger .stock-dd-menu {
  border-color: #e8b4b8;
}

/* кнопки без .btn */
.stock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 3.25rem;
  height: 1.65rem;
  margin: 0;
  padding: 0 0.3rem;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  color: #fff;
  background: var(--navy);
}

.stock-btn:hover { filter: brightness(1.08); }
.stock-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

.stock-btn-wb { background: #5c2d7a; border-color: #4a2463; color: #fff; }
.stock-btn-oz { background: #005bff; border-color: #0047cc; color: #fff; width: 3.4rem; }
.stock-btn-ym { background: #d4a017; border-color: #b8890e; color: #1a1400; width: 3.4rem; }
.stock-btn-all { background: #2a3d55; border-color: #1e2d3f; color: #fff; }

.stock-btn-navy {
  width: auto;
  min-width: 3.25rem;
  padding: 0 0.5rem;
  background: var(--navy);
  color: #fff;
}

.stock-btn-muted {
  width: auto;
  min-width: 3.25rem;
  padding: 0 0.5rem;
  background: #e8edf3;
  border-color: var(--line);
  color: var(--ink);
}

.stock-btn-muted:hover { background: #dce3ec; filter: none; }

.stock-btn-danger {
  width: auto;
  min-width: 3.8rem;
  padding: 0 0.45rem;
  background: #a8181e;
  border-color: #8a1419;
  color: #fff;
}

.stock-btn-row {
  width: auto;
  min-width: 2.6rem;
  height: 1.45rem;
  padding: 0 0.35rem;
  background: var(--ok);
  border-color: #0c5a3a;
  color: #fff;
  font-size: 0.6rem;
}

.stock-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0.2rem 0 0.4rem;
}

.stock-preset-row select {
  max-width: 11rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.78rem;
}

/* таблица на всю ширину; столбцы тянутся руками */
.table-wrap.stock-table-wrap {
  width: 100%;
  max-width: 100%;
}

.stock-table {
  table-layout: fixed;
  width: 100%;
}

.stock-table col.col-sku { width: 9.5rem; }
.stock-table col.col-name { width: auto; }
.stock-table col.col-q { width: 3.4rem; }
.stock-table col.col-e { width: 3.8rem; }
.stock-table col.col-send { width: 3.2rem; }

.stock-table thead tr:first-child th {
  position: relative;
  user-select: none;
}

.stock-col-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}

.stock-col-resizer:hover,
.stock-col-resizer.is-dragging {
  background: rgba(0, 91, 255, 0.28);
}

body.stock-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

.stock-table th,
.stock-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-table .th-wb { background: #5c2d7a !important; color: #f3e8fa !important; }
.stock-table .th-oz { background: #005bff !important; color: #e8f0ff !important; }
.stock-table .th-ym { background: #b8890e !important; color: #fff8d6 !important; }

.stock-table td.stock-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 0.2rem !important;
  padding-right: 0.35rem !important;
}

.stock-table td.col-wb { background: #f8f3fb; }
.stock-table td.col-oz { background: #eef4ff; }
.stock-table td.col-ym { background: #fffaf0; }

.stock-table .stock-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0; /* с table-layout:fixed — режет по col */
}

.stock-col-filters th {
  background: #e8edf3 !important;
  color: var(--ink) !important;
  padding: 0.15rem 0.2rem !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.stock-col-f {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.15rem 0.2rem !important;
  font-size: 0.68rem !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid var(--line) !important;
  border-radius: 3px;
  background: #fff;
}

.stock-col-f-qty {
  padding: 0.15rem 0.1rem !important;
  text-align: center;
}

.stock-table .price-in {
  width: 100%;
  max-width: 3.2rem;
  box-sizing: border-box;
}

.stock-row-send { text-align: center; }
.stock-row-send-empty { display: inline-block; width: 2.4rem; }

.stock-missing { color: var(--muted); font-size: 0.72rem; }

.stock-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.06rem 0.25rem;
  border-radius: 3px;
  background: #eee;
  color: #555;
}

.stock-sku { cursor: pointer; }

.stock-toast {
  position: sticky;
  top: 0.5rem;
  z-index: 20;
  margin: 0.45rem 0;
  padding: 0.55rem 0.75rem;
  background: #1c2433;
  color: #f7f2e8;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.stock-toast.is-visible { opacity: 1; }