:root{
  --bg1:#04160f;
  --bg2:#0a3a2b;
  --card:rgba(10,22,17,.72);
  --border:rgba(90,170,130,.25);
  --text:#eafff4;
  --muted:#b6e7d1;

  --accent:#21b061;
  --accent2:#17a255;

  --danger:#e14b4b;
  --warn:#e1b14b;
  --blue:#3b82f6;

  --field:rgba(8,18,14,.8);
  --fieldBorder:rgba(90,170,130,.22);

  --shadow:0 18px 60px rgba(0,0,0,.55);
  --radius:22px;
  --radius2:18px;

  --focus: rgba(33,176,97,.6);
  --focusGlow: 0 0 0 4px rgba(33,176,97,.12);
}

html[data-theme="light"]{
  --bg1:#f6fbf8;
  --bg2:#e7f6ee;
  --card:rgba(255,255,255,.78);
  --border:rgba(16,110,70,.18);
  --text:#0b1a12;
  --muted:#2f6b52;

  --field:rgba(255,255,255,.9);
  --fieldBorder:rgba(16,110,70,.20);

  --shadow:0 18px 60px rgba(0,0,0,.15);

  --focus: rgba(16,110,70,.45);
  --focusGlow: 0 0 0 4px rgba(16,110,70,.10);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(45,170,110,.22), transparent 60%),
    radial-gradient(1200px 600px at 85% 15%, rgba(20,130,85,.18), transparent 55%),
    linear-gradient(135deg,var(--bg1),var(--bg2));
  min-height:100vh;
}

.wrap{max-width:1200px;margin:28px auto;padding:0 16px}

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

.card{
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter: blur(12px);
  padding:18px;
}

/* TOPBAR */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-radius:26px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter: blur(12px);
  position:sticky;top:12px;z-index:30;
}

.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:40px;height:40px;border-radius:14px;
  background:linear-gradient(135deg, rgba(33,176,97,.9), rgba(12,70,45,.9));
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.brandTitle{font-weight:900;font-size:18px;line-height:1}
.brandSub{font-size:12px;color:var(--muted);margin-top:4px}

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

.userBadge{
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  font-weight:800;
  white-space:nowrap;
}

.iconBtn{
  height:42px;min-width:42px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.iconBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.iconBtn:active{transform:translateY(0px) scale(.98)}
.iconBtn:focus{outline:none; box-shadow: var(--focusGlow); border-color: var(--focus);}

.btn{
  height:42px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:900;
  white-space:nowrap;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0px) scale(.98)}
.btn:focus{outline:none; box-shadow: var(--focusGlow);}

.btnPrimary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;
}

.btnGhost{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
}
.btnGhost:hover{background:rgba(255,255,255,.07)}

.btnGreen{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;
}

.btnRed{
  background:rgba(225,75,75,.14);
  border:1px solid rgba(225,75,75,.45);
  color:#ffd7d7;
}
.btnRed:hover{background:rgba(225,75,75,.18);border-color:rgba(225,75,75,.6)}

.btnBlue{
  background:rgba(59,130,246,.18);
  border:1px solid rgba(59,130,246,.45);
  color:#dbeafe;
}
.btnBlue:hover{background:rgba(59,130,246,.22);border-color:rgba(59,130,246,.6)}

.btnOrange{
  background:rgba(225,177,75,.18);
  border:1px solid rgba(225,177,75,.45);
  color:#fff2d6;
}
.btnOrange:hover{background:rgba(225,177,75,.22);border-color:rgba(225,177,75,.6)}

.btnMiniGhost{
  height:34px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
}
.btnMiniGhost:hover{background:rgba(255,255,255,.07)}
.btnMiniGhost:focus{outline:none; box-shadow: var(--focusGlow);}

/* TITLES */
.title{margin:0 0 6px 0;font-size:22px;font-weight:950}
.hint{margin:0 0 14px 0;color:var(--muted)}

/* FIELDS */
.field label{display:block;margin:0 0 8px 0;color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.02em}
input,select,textarea{
  width:100%;
  background:var(--field);
  border:1px solid var(--fieldBorder);
  color:var(--text);
  border-radius:14px;
  padding:12px 12px;
  outline:none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  height:44px;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--focus);
  box-shadow: var(--focusGlow);
}
textarea{resize:none;min-height:44px}

.formRow2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.err{margin-top:10px;color:#ff7b7b;font-weight:900}
.muted{color:var(--muted)}
.tinyHint{margin-top:8px;color:var(--muted);font-size:12px}

/* FILTERS */
.filtersCard{
  border-radius:18px;
  border:1px solid rgba(90,170,130,.18);
  background:rgba(255,255,255,.03);
  padding:14px;
}
.filtersGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 260px 1fr;
  gap:12px;
  align-items:end;
}
.filtersActions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* MultiSelect */
.multiSelect{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--fieldBorder);
  background:var(--field);
  cursor:pointer;
  user-select:none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.multiSelect:hover{transform:translateY(-1px)}
.multiSelect:active{transform:translateY(0px) scale(.99)}
.multiSelect:focus{outline:none;border-color:var(--focus); box-shadow: var(--focusGlow);}

.multiValue{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}
.chev{opacity:.8}

.multiMenu{
  margin-top:8px;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:var(--shadow);
  position:absolute;
  z-index:40;
  min-width:260px;
}
.multiOpt{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:12px;
  cursor:pointer;
}
.multiOpt:hover{background:rgba(255,255,255,.06)}
.multiOpt input{width:auto;height:auto;margin:0}
.multiOpt b{font-weight:900}

/* RESULTS */
.resultsTop{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.pager{display:flex;align-items:center;gap:10px}
.pagerText{font-weight:900;color:var(--muted)}

.results{margin-top:12px;display:grid;grid-template-columns:1fr;gap:10px}

.item{
  display:grid;
  grid-template-columns: 92px 1fr 260px;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(90,170,130,.18);
  background:rgba(255,255,255,.03);
}
.thumb{
  width:92px;height:92px;border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.thumb img{width:100%;height:100%;object-fit:cover}

.itemTitle{font-size:16px;font-weight:950;margin:0 0 6px 0;line-height:1.2}
.metaLine{margin:0;color:var(--muted);font-size:13px}

.indicators{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ind{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  font-size:12px;font-weight:900;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(255,255,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}
.dot.on{background:rgba(33,176,97,.95);box-shadow:0 0 0 1px rgba(33,176,97,.55) inset, 0 0 14px rgba(33,176,97,.28)}
.dot.off{background:rgba(255,255,255,.18)}

.itemActions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.stocks{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-self:end;
  align-self:center;
}
.stockPill{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:16px;
  border:1px solid rgba(90,170,130,.18);
  background:rgba(0,0,0,.10);
  font-weight:950;
}
.stockPill span{color:var(--muted);font-weight:900}

/* FOOTER */
.footer{margin-top:14px;color:var(--muted);font-size:13px}

/* MODAL */
.modalBackdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;justify-content:center;
  padding:18px;
  z-index:60;
}
.modal{
  width:min(1080px, 100%);
  border-radius:24px;
  background:rgba(10,22,17,.88);
  border:1px solid rgba(90,170,130,.25);
  box-shadow:0 26px 90px rgba(0,0,0,.65);
  backdrop-filter: blur(12px);
  overflow:hidden;
}
html[data-theme="light"] .modal{
  background:rgba(255,255,255,.92);
}

.modalHeader{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 16px;
  border-bottom:1px solid rgba(90,170,130,.18);
}
.modalTitle{font-size:18px;font-weight:950}
.modalSub{font-size:12px;color:var(--muted);margin-top:4px}
.modalBody{padding:16px;display:grid;gap:12px}

.block{
  border:1px solid rgba(90,170,130,.18);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:14px;
}
.blockTitle{
  font-size:12px;
  font-weight:950;
  letter-spacing:.06em;
  color:var(--muted);
  text-transform:uppercase;
  margin:0 0 12px 0;
}

.storesGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.storeCard{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(90,170,130,.18);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  user-select:none;
}
.storeCard:hover{background:rgba(255,255,255,.06)}
.storeCard input{width:auto;height:auto;margin:2px 0 0 0}
.storeCard b{font-weight:950}
.storeMeta{font-size:12px;color:var(--muted);margin-top:4px}

.integrationsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.integrationCard{
  border:1px solid rgba(90,170,130,.18);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:14px;
}
.integrationHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.integrationName{font-weight:950}
.integrationHint{font-size:12px;color:var(--muted)}

.miniActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.miniTableWrap{margin-top:12px}
.miniTableTitle{font-size:12px;color:var(--muted);font-weight:950;margin-bottom:8px}
.miniTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
}
.miniTable th{
  text-align:left;
  color:var(--muted);
  font-size:12px;
  font-weight:950;
  padding:0 10px;
}
.miniTable td{
  padding:10px 10px;
  background:rgba(255,255,255,.03);
  border-top:1px solid rgba(90,170,130,.18);
  border-bottom:1px solid rgba(90,170,130,.18);
}
.miniTable tr td:first-child{
  border-left:1px solid rgba(90,170,130,.18);
  border-radius:14px 0 0 14px;
}
.miniTable tr td:last-child{
  border-right:1px solid rgba(90,170,130,.18);
  border-radius:0 14px 14px 0;
}
.miniRight{text-align:right}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:12px}

.photoGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.dropZone{
  border:2px dashed rgba(33,176,97,.35);
  background:rgba(33,176,97,.06);
  border-radius:18px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  padding:16px;
  cursor:pointer;
}
.dropTitle{font-weight:950;font-size:16px}
.photoPreviewBox{
  border:1px solid rgba(90,170,130,.18);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:12px;
  overflow:hidden;
}
.photoPreviewBox img{
  max-width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:14px;
}

.modalFooter{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px 18px 16px;
}
.leftFooter,.rightFooter{display:flex;gap:10px;flex-wrap:wrap}

/* NOTIFICATIONS */
.notifWrap{position:relative}
.notifDot{
  position:absolute;
  right:8px; top:8px;
  width:10px;height:10px;border-radius:999px;
  background:rgba(225,75,75,.95);
  box-shadow:0 0 0 2px rgba(0,0,0,.25);
}
.notifPanel{
  position:absolute;
  right:0; top:52px;
  width:min(380px, 92vw);
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:12px;
  z-index:80;
}
.notifHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.notifTitle{font-weight:950}
.notifList{display:grid;gap:10px;max-height:360px;overflow:auto;padding-right:4px}
.notifItem{
  border:1px solid rgba(90,170,130,.18);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:10px 12px;
}
.notifItem b{font-weight:950}
.notifMeta{font-size:12px;color:var(--muted);margin-top:6px}

/* IMAGE VIEWER */
.imgViewer{
  position:fixed;inset:0;
  background:rgba(0,0,0,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:90;
  cursor:zoom-out;
}
.imgViewer img{
  max-width:92vw;
  max-height:92vh;
  border-radius:18px;
  box-shadow:0 26px 90px rgba(0,0,0,.65);
  background:#fff;
  cursor:default;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .filtersGrid{grid-template-columns:1fr 1fr}
  .item{grid-template-columns:92px 1fr}
  .stocks{grid-column:1 / -1;flex-direction:row;justify-content:flex-start;gap:10px}
  .integrationsGrid{grid-template-columns:1fr}
  .storesGrid{grid-template-columns:1fr}
  .photoGrid{grid-template-columns:1fr}
  .topbar{gap:12px;flex-wrap:wrap}
}
/* ===== FIX: modal not clipped ===== */
.modalBackdrop{
  align-items:flex-start;         /* было center -> из-за этого режет верх/низ */
  padding:18px;
  overflow:auto;                  /* можно скроллить сам фон, если модалка больше экрана */
}

.modal{
  max-height: calc(100vh - 36px); /* чтобы модалка не выходила за пределы */
  overflow:hidden;                /* скролл будет внутри body */
}

.modalBody{
  overflow:auto;
  max-height: calc(100vh - 36px - 72px); /* 72px ~ высота шапки модалки */
  padding-bottom: 24px;                  /* чтобы низ не “лип” */
}

/* если хочешь, чтобы при открытой модалке страница под ней не скроллилась */
body.modalOpen{
  overflow:hidden;
}
/* Важно: разрешаем flex-элементам сжиматься */
.modalOpen .row,
.modalOpen .grid,
.modalOpen .fieldRow,
.modalOpen .integrationsRow,
.modalOpen .integrationsGrid,
.modalOpen .cardRow {
  min-width: 0;
}

/* Якорь мультиселекта не должен расширять контейнер */
#ozonStoreMulti,
#storeMulti {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Текст внутри — обрезаем */
#ozonStoreMultiValue,
#storeMultiValue {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.integrationsLamp{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  user-select:none;
}

.lampDot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

.lampText{
  font-size:12px;
  letter-spacing:0.2px;
  opacity:0.9;
}

.lampGreen{ background:#31c76a; box-shadow: 0 0 0 3px rgba(49,199,106,0.18); }
.lampRed{ background:#ff4d4f; box-shadow: 0 0 0 3px rgba(255,77,79,0.18); }
.lampGray{ background:#9aa4b2; box-shadow: 0 0 0 3px rgba(154,164,178,0.18); }