:root{
  --bg:#f4f5f7; --panel:#fff; --border:#e6e8ee;
  --text:#111; --muted:#5d6473; --accent:#111;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
     font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}

.page{max-width:1120px;margin:26px auto;padding:26px 30px;background:var(--panel);
      border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}

.topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--border);
        box-shadow:0 4px 20px rgba(0,0,0,.04)}
.topbar .inner{max-width:1120px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:18px}
.logo{font-weight:800;color:#1b1d22;letter-spacing:.2px}
.nav{margin-left:auto;display:flex;gap:12px;align-items:center}
.nav a{padding:8px 14px;border-radius:999px;color:#2b2f3a}
.nav a:hover{background:#f1f2f5}
.nav a.active{background:#111;color:#fff}
.nav a.active:hover{opacity:.95}

.btn,button,input[type=submit]{display:inline-block;padding:10px 14px;border-radius:12px;
  background:#111;color:#fff;border:1px solid #111;cursor:pointer}
.btn--ghost{background:#fff;color:#111;border:1px solid var(--border)}
input[type=text],input[type=number],input[type=file],select{
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff}

table{width:100%;border-collapse:separate;border-spacing:0 8px}
th{text-align:left;color:#222;padding:8px 10px}
td{background:#fff;border:1px solid var(--border);border-left:none;border-right:none;padding:10px}
tr td:first-child{border-left:1px solid var(--border);border-top-left-radius:10px;border-bottom-left-radius:10px}
tr td:last-child{border-right:1px solid var(--border);border-top-right-radius:10px;border-bottom-right-radius:10px}

@media (max-width:760px){
  .topbar .inner{padding:10px 12px}
  .nav{gap:6px;overflow:auto}
  .nav a{padding:8px 10px;white-space:nowrap}
  .page{margin:12px auto;padding:16px}
}

/* ==== NAV: шире и правее ==== */
.topbar .inner{ max-width:1240px; padding:14px 28px; }     /* шире контейнер и отступы */
.nav{ gap:14px; margin-left:auto; margin-right:10px; }     /* сильнее вправо и больше расстояние */
.nav a{ padding:10px 16px; border-radius:14px; font-size:15px; } /* шире «пилюли» */

/* ==== Если есть меню/панель предпросмотра на /design ==== */
.design-grid{ grid-template-columns:1.15fr .85fr; gap:22px; }  /* немного шире правая колонка */
.preview .pv-head,
.preview .pv-toolbar{ display:flex; justify-content:flex-end; } /* элементы смещены вправо */
/* === Design split === */
.design-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.design-grid.reverse{grid-template-columns:.85fr 1.15fr}
.splitter{width:6px;cursor:col-resize;background:#eef0f3;border-radius:6px;box-shadow:inset 0 0 0 1px #e3e6ec}
.splitter:hover{background:#e7e9ef}
.layout-controls{position:sticky;top:8px;display:flex;gap:8px;justify-content:flex-end;margin-bottom:8px}
.layout-controls .btn{padding:6px 10px;border-radius:10px;background:#f7f7f9;color:#222;border:1px solid #e6e8ee}
.layout-controls .btn:hover{background:#efeff3}
@media (max-width:900px){
  .design-grid,.design-grid.reverse{grid-template-columns:1fr}
  .splitter{display:none}
}
/* === Floating Preview === */
.fw-window{position:fixed; inset:auto auto 40px 40px; width:560px; max-width:92vw; background:#fff;
  border:1px solid #e6e8ee; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.18); z-index:9999; display:none}
.fw-window.on{display:block}
.fw-title{cursor:move; user-select:none; padding:10px 12px; font-weight:700; border-bottom:1px solid #eceff4;
  background:linear-gradient(#fafbff,#f2f4f8)}
.fw-body{padding:10px; max-height:78vh; overflow:auto}
.fw-actions{display:flex; gap:8px; margin-left:auto}
.fw-btn{appearance:none; border:1px solid #d9dde6; background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer}
.fw-btn:hover{background:#f3f5f9}
.fw-title .label{margin-right:8px}
/* кнопки управления макетом на /design */
.layout-controls{position:sticky;top:8px;display:flex;gap:8px;justify-content:flex-end;margin-bottom:8px}
.layout-controls .btn{padding:6px 10px;border-radius:10px;background:#f7f7f9;color:#222;border:1px solid #e6e8ee}
.layout-controls .btn:hover{background:#efeff3}
/* === Floating preview (quotes) === */
.fw-window{position:fixed; left:40px; bottom:40px; width:560px; max-width:92vw; background:#fff;
  border:1px solid #e6e8ee; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.18);
  z-index:9999; display:none}
.fw-window.on{display:block}
.fw-title{cursor:move; user-select:none; padding:10px 12px; font-weight:700;
  border-bottom:1px solid #eceff4; background:linear-gradient(#fafbff,#f2f4f8)}
.fw-body{padding:10px; max-height:78vh; overflow:auto}
.fw-actions{display:flex; gap:8px; margin-left:auto}
.fw-btn{appearance:none; border:1px solid #d9dde6; background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer}
.fw-btn:hover{background:#f3f5f9}
/* === Always-floating preview === */
.dw-window{
  position:fixed; top:110px; right:24px; width:360px; max-width:92vw;
  background:#fff; border:1px solid #e6e8ee; border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.18); z-index:9999;
}
.dw-header{
  cursor:move; user-select:none; padding:10px 12px; font-weight:700;
  border-bottom:1px solid #eceff4; background:linear-gradient(#fafbff,#f2f4f8);
  border-top-left-radius:14px; border-top-right-radius:14px;
}
.dw-body{padding:10px; max-height:78vh; overflow:auto}
@media (max-width:900px){ .dw-window{left:12px; right:12px; width:auto; top:80px} }

/* ==== Neutral grey buttons site-wide ==== */
.btn, button, input[type=submit]{
  background:#f4f5f8;            /* светло-серый фон */
  color:#1f2024;                  /* тёмный текст */
  border:1px solid #d9dce3;       /* тонкая светлая рамка */
  box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
}
.btn:hover, button:hover, input[type=submit]:hover{
  background:#edeff4;             /* чуть темнее при наведении */
  border-color:#cfd3dc;
}
.btn:active, button:active, input[type=submit]:active{
  background:#e6e9ef;
}
.btn:disabled, button:disabled, input[type=submit]:disabled{
  opacity:.7; cursor:not-allowed;
}

/* если где-то остались явные чёрные кнопки */
.btn--ghost{ background:#fff; color:#1f2024; border:1px solid #e2e5eb }
/* === Quote Picker UI === */
.qp-rail{ z-index:1002; 
  position:fixed; top:110px; right:400px; /* справа от окна предпросмотра */
  width:260px; max-height:calc(100vh - 140px); overflow:auto;
  background:#fff; border:1px solid #e6e8ee; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); padding:10px; z-index:1000;
}
.qp-rail h4{margin:2px 6px 8px; font-size:14px; color:#444}
.qp-cat{display:block; padding:8px 10px; border-radius:10px; color:#222;
  border:1px solid #e6e8ee; margin:6px; background:#f7f8fb; cursor:pointer}
.qp-cat:hover{background:#eff1f6}
.qp-cat.active{background:#111;color:#fff;border-color:#111}

/* центральная панель-выборщик */
.qp-drawer{
  position:fixed; left:50%; top:110px; transform:translateX(-50%);
  width:min(860px, 90vw); max-height:70vh; overflow:auto; z-index:1001;
  background:#fff; border:1px solid #e6e8ee; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.18);
  display:none;
}
.qp-drawer.on{display:block}
.qp-head{display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid #eceff4}
.qp-head input{flex:1; padding:10px 12px; border:1px solid #dfe3ea; border-radius:10px}
.qp-list{padding:10px 14px; display:grid; grid-template-columns:1fr auto; gap:8px 10px}
.qp-item{padding:8px 10px; border:1px solid #eef0f4; border-radius:10px; background:#fafbff}
.qp-item small{color:#6a7183}
.qp-add{padding:8px 12px; border-radius:10px; border:1px solid #d9dce3; background:#f4f5f8; cursor:pointer}
.qp-add:hover{background:#edeff4}
.qp-close{padding:8px 10px; border-radius:10px; border:1px solid #e1e4ea; background:#fff; cursor:pointer}
.qp-empty{padding:16px; color:#666}
@media (max-width:1200px){ .qp-rail{ z-index:1002; right:24px} }  /* если окно предпросмотра перетащат — столбец прижмётся вправо */

/* === Quote Picker UI === */
.qp-rail{ z-index:1002; 
  position:fixed; top:110px; right:380px;  /* <- левее плавающего предпросмотра */
  width:260px; max-height:calc(100vh - 140px); overflow:auto;
  background:#fff; border:1px solid #e6e8ee; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); padding:10px; z-index:1000;
}
.qp-rail h4{margin:2px 6px 8px; font-size:14px; color:#444}
.qp-cat{display:block; padding:8px 10px; border-radius:10px; color:#222;
  border:1px solid #e6e8ee; margin:6px; background:#f7f8fb; cursor:pointer}
.qp-cat:hover{background:#eff1f6}
.qp-cat.active{background:#111;color:#fff;border-color:#111}

.qp-drawer{
  position:fixed; left:50%; top:110px; transform:translateX(-50%);
  width:min(860px,90vw); max-height:70vh; overflow:auto; z-index:1001;
  background:#fff; border:1px solid #e6e8ee; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.18);
  display:none;
}
.qp-drawer.on{display:block}
.qp-head{display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid #eceff4}
.qp-head input{flex:1; padding:10px 12px; border:1px solid #dfe3ea; border-radius:10px}
.qp-list{padding:10px 14px; display:grid; grid-template-columns:1fr auto; gap:8px 10px}
.qp-item{padding:8px 10px; border:1px solid #eef0f4; border-radius:10px; background:#fafbff}
.qp-item small{color:#6a7183}
.qp-add{padding:8px 12px; border-radius:10px; border:1px solid #d9dce3; background:#f4f5f8; cursor:pointer}
.qp-add:hover{background:#edeff4}
.qp-close{padding:8px 10px; border-radius:10px; border:1px solid #e1e4ea; background:#fff; cursor:pointer}
.qp-empty{padding:16px; color:#666}
/* ===== Quote Picker — улучшения ===== */
.qp-rail{ z-index:1002; position:fixed; top:112px; right:24px; width:300px; max-height:calc(100vh - 148px);
  overflow:auto; background:#fff; border:1px solid #e6e8ee; border-radius:16px;
  box-shadow:0 12px 28px rgba(15,18,31,.14); padding:12px; z-index:1000}
.qp-rail h4{margin:2px 8px 10px; font-size:14px; color:#3c3f4a; letter-spacing:.2px}
.qp-cat{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; margin:6px; font-size:14px; border-radius:12px; color:#222;
  border:1px solid #e6e8f2; background:#f7f8fb; cursor:pointer; transition:.15s}
.qp-cat:hover{background:#eff1f6}
.qp-cat.active{background:#15161b; color:#fff; border-color:#15161b; box-shadow:0 4px 16px rgba(0,0,0,.18)}

.qp-mask{position:fixed; inset:0; background:rgba(16,19,28,.35); backdrop-filter:saturate(120%) blur(1.5px);
  z-index:1000; display:none;}
.qp-mask.on{display:block}

.qp-drawer{position:fixed; left:50%; top:118px; transform:translateX(-50%);
  width:min(940px,86vw); max-height:72vh; overflow:hidden; z-index:1001;
  background:#fff; border:1px solid #e6e8ee; border-radius:16px;
  box-shadow:0 22px 64px rgba(15,18,31,.22); display:none}
.qp-drawer.on{display:block}
.qp-head{position:sticky; top:0; z-index:2; display:flex; gap:12px; align-items:center;
  padding:14px 16px; border-bottom:1px solid #eceff4; background:#fff}
.qp-head strong{font-size:15px}
.qp-head input{flex:1; padding:10px 12px; border:1px solid #dfe3ea; border-radius:12px}
.qp-close{padding:8px 12px; border-radius:10px; border:1px solid #e1e4ea; background:#fff; cursor:pointer}
.qp-close:hover{background:#f4f6f9}

.qp-list{padding:12px 16px; height:calc(72vh - 62px); overflow:auto;
  display:grid; grid-template-columns:1fr auto; gap:10px 12px}
.qp-item{padding:10px 12px; border:1px solid #eef0f4; border-radius:12px; background:#fafbff}
.qp-item small{color:#6a7183}
.qp-add{padding:10px 12px; border-radius:12px; border:1px solid #d9dce3; background:#f4f5f8; cursor:pointer}
.qp-add:hover{background:#eceff4}
.qp-empty{grid-column:1/-1; padding:16px; text-align:center; color:#6a7183}

/* компактнее на узких экранах */
@media (max-width: 1200px){
  .qp-rail{ z-index:1002; right:16px; width:280px}
  .qp-drawer{width:min(880px,90vw)}
}
/* ===== Quote Picker: компактная кнопка добавления ===== */
.qp-list{ gap:8px 10px; } /* поменьше расстояние */
.qp-item{ align-self:center; } /* выравнивание по центру рядом с плюсиком */

.qp-add{
  width:28px; height:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid #cfd3dc; background:#fff;
  font-size:16px; line-height:1; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.qp-add:hover{ background:#f2f4f8; border-color:#c5cad6; }
.qp-add:active{ transform:translateY(1px); }
/* ===== Quote Picker – компактная модалка и список ===== */
.qp-rail{right:20px; width:280px}                       /* чуть уже колонка */
.qp-mask{background:rgba(20,22,28,.28); backdrop-filter:none}

.qp-drawer{
  width:min(800px,76vw);          /* компактнее */
  max-height:66vh;                /* ниже */
  border-radius:14px;
}
.qp-head{padding:12px 14px}       /* плотнее шапка */
.qp-list{
  padding:12px 14px;
  height:calc(66vh - 52px);       /* высота с учётом шапки */
  overflow:auto;
  display:grid;
  grid-template-columns: 1fr 32px;/* узкая колонка под плюс */
  gap:8px 10px;
}
.qp-item{
  background:#fff;
  border:1px solid #e8ebf2;
  border-radius:10px;
  padding:10px 12px;
  align-self:center;
}
.qp-add{
  width:26px; height:26px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid #cfd3dc; background:#fff;
  font-size:15px; line-height:1; cursor:pointer;
}
.qp-add:hover{background:#f2f4f8; border-color:#c5cad6}
.qp-add:active{transform:translateY(1px)}
/* блокируем прокрутку фона когда открыт picker */
body.qp-open{overflow:hidden}
/* ===== Quote Picker: ровные строки списка ===== */
.qp-list{
  padding:12px 14px;
  height:calc(66vh - 52px);
  overflow:auto;
  display:block;                 /* вместо grid */
}
.qp-row{
  display:flex; align-items:center; gap:10px;
  margin:0 0 8px 0;
}
.qp-card{
  flex:1 1 auto;
  background:#fff;
  border:1px solid #e8ebf2;
  border-radius:10px;
  padding:10px 12px;
}
.qp-card small{ color:#6a7183 }
.qp-add{
  width:26px; height:26px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid #cfd3dc; background:#fff;
  font-size:15px; line-height:1; cursor:pointer;
}
.qp-add:hover{ background:#f2f4f8; border-color:#c5cad6 }
.qp-add:active{ transform:translateY(1px) }
/* ===== FIX: список позиций у верхнего края + блюр фона ===== */
.qp-mask{
  background: rgba(15,18,31,.35);
  backdrop-filter: blur(2px) saturate(120%);   /* вернули блюр */
}

/* вместо фиксированной высоты — гибкая колонка сверху */
.qp-list{
  display: flex;              /* колонка */
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  max-height: calc(66vh - 56px);  /* ограничение по высоте */
  overflow: auto;                 /* прокрутка при необходимости */
}

/* аккуратное выравнивание строки */
.qp-row{
  display: flex;
  align-items: center;    /* плюс по центру строки */
  gap: 10px;
  margin: 0;
}

/* карточка слева растягивается */
.qp-card{
  flex: 1 1 auto;
}

/* маленький круглый плюс справа */
.qp-add{
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid #cfd3dc; background: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.qp-add:hover{ background:#f2f4f8; border-color:#c5cad6 }
.qp-add:active{ transform: translateY(1px) }
/* ===== Quote Picker: принудительно прижать список к верху ===== */
.qp-list{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  height:auto !important;                 /* отменяем старый height */
  max-height:calc(66vh - 56px) !important;/* только ограничение */
  padding-top:8px; margin-top:0;          /* никаких отступов сверху */
}
.qp-row{ margin-top:0 !important; }
/* === Draggable categories window === */
.qp-head{ cursor: move; user-select: none; }
.qp-drawer.free{ transform: none !important; } /* когда свободно двигаем — убираем translateX(-50%) */
/* ===== Категории: шапка-ручка, как у предпросмотра ===== */
.qp-rail{
  border-radius:14px;
  box-shadow:0 12px 32px rgba(16,18,28,.08);
  overflow:hidden;
}
.qp-rail h4{
  margin:0;
  padding:10px 12px;
  background:linear-gradient(#fafbff,#f2f4f8);
  border-bottom:1px solid #eceff4;
  font-weight:700;
  display:flex; align-items:center;
  cursor:grab;                 /* как у предпросмотра */
  user-select:none;
}
.qp-rail.dragging h4{ cursor:grabbing; }
.qp-rail h4::before{
  content:"≡";
  font-size:16px;
  opacity:.45;
  margin-right:8px;
  line-height:1;
}
.qp-cats{ padding:8px 10px 12px; }
/* === Mini form inside drawer === */
.qp-mini {
  display:grid;
  grid-template-columns: 80px 90px 110px 110px 110px 120px;
  gap:8px;
  padding:10px 14px 4px;
  align-items:center;
  border-bottom:1px solid #eceff4;
}
.qp-mini .f {
  display:flex; flex-direction:column;
}
.qp-mini .f label {
  font-size:11px; color:#6a7183; margin-bottom:4px;
}
.qp-mini .f input, .qp-mini .f select {
  height:34px; padding:6px 10px; border:1px solid #dfe3ea; border-radius:10px;
}
@media (max-width:980px){
  .qp-mini { grid-template-columns: repeat(2, minmax(140px,1fr)); }
}
/* данные рядом с наименованием */
.qp-card .qp-meta{
  display:block;
  margin-top:4px;
  color:#6a7183;
  font-size:12px;
}
.qp-mini{display:none !important;} /* ранее добавленная панель — скрыть */
/* --- Polished equipment row in drawer --- */
.qp-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
}
.qp-card{
  border:1px solid #eef0f4;
  border-radius:12px;
  padding:10px 12px;
  background:#fafbff;
}
.qp-card-title{ font-weight:600; color:#1f2430; }
.qp-meta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.qp-meta .chip{
  font-size:12px;
  line-height:18px;
  padding:2px 8px;
  border:1px solid #e6e8ee;
  border-radius:999px;
  background:#fff;
  color:#556070;
}
.qp-id{
  margin-top:6px;
  display:block;
  color:#8b91a1;
  font-size:12px;
}
.qp-add{
  width:32px; height:32px;
  border-radius:10px;
  border:1px solid #d9dce3;
  background:#fff;
  cursor:pointer;
}
.qp-add:hover{ background:#f3f5f8; }
@media (max-width:900px){
  .qp-row{ grid-template-columns: 1fr 36px; }
}
/* --- One-line equipment row --- */
.qp-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.qp-card{border:1px solid #eef0f4;border-radius:12px;padding:8px 12px;background:#fafbff}
.qp-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qp-title{font-weight:600;color:#1f2430;white-space:nowrap}
.qp-meta{display:flex;gap:6px;flex-wrap:wrap}
.qp-meta .chip{font-size:12px;line-height:18px;padding:2px 8px;border:1px solid #e6e8ee;border-radius:999px;background:#fff;color:#556070;white-space:nowrap}
.qp-id-chip{font-size:12px;line-height:18px;padding:2px 8px;border:1px dashed #e6e8ee;border-radius:999px;background:#fff;color:#8b91a1;white-space:nowrap}
.qp-add{width:32px;height:32px;border-radius:10px;border:1px solid #d9dce3;background:#fff;cursor:pointer}
.qp-add:hover{background:#f3f5f8}
/* ===== Bigger equipment row (quote picker) ===== */
.qp-list{padding:14px 18px; display:grid; grid-template-columns:1fr; gap:14px 12px}
.qp-row{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center}
.qp-card{
  border:1px solid #e9ecf3; border-radius:14px;
  padding:12px 16px; background:#fafbff;
}
.qp-line{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.qp-title{font-size:16px; font-weight:650; color:#1f2430}
.qp-meta .chip,
.qp-id-chip{
  font-size:13.5px; line-height:22px; padding:4px 10px;
  border-radius:999px; border:1px solid #e1e5ee; background:#fff; color:#556070;
}
.qp-id-chip{border-style:dashed; color:#7e8597}
.qp-add{
  width:38px; height:38px; font-size:18px;
  border-radius:12px; border:1px solid #d6dae3; background:#fff; cursor:pointer;
}
.qp-add:hover{background:#f2f5f9}
/* --- cats title in right rail --- */
.qp-rail .cats-title{
  margin:0 0 8px; padding:10px 12px;
  border-radius:12px; background:#111; color:#fff; font-weight:700;
}
/* --- cats title in right rail --- */
.qp-rail .cats-title, .right-rail .cats-title{
  margin:0 0 8px; padding:10px 12px;
  border-radius:12px; background:#111; color:#fff; font-weight:700;
}