:root { --bg:#f4f5f7; --card:#fff; --text:#1d2330; --muted:#6b7280; --accent:#1f5eff; --warn:#b45309; --err:#b91c1c; --line:#e5e7eb; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; justify-content:space-between; align-items:center; padding:10px 24px; background:#fff; border-bottom:1px solid var(--line); }
header .brand { font-weight:600; color:var(--text); text-decoration:none; }
header nav a { margin-left:16px; color:var(--accent); }
main { max-width:1200px; margin:24px auto; padding:0 16px; }
.columns { display:grid; grid-template-columns: minmax(300px, 420px) 1fr; gap:24px; }
@media (max-width: 860px) { .columns { grid-template-columns:1fr; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px 24px; margin-bottom:24px; }
.card.narrow { max-width:380px; margin:60px auto; }
h1 { font-size:20px; margin:0 0 14px; } h2 { font-size:18px; margin:0 0 10px; } h3 { font-size:15px; margin:18px 0 6px; }
fieldset { border:1px solid var(--line); border-radius:8px; margin:0 0 14px; padding:10px 14px 14px; }
legend { font-weight:600; padding:0 6px; } legend small { font-weight:400; color:var(--muted); }
label { display:block; margin:8px 0 0; font-size:13px; color:var(--muted); }
input[type=text], input:not([type]), input[type=password], input[type=date] { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:6px; font-size:15px; color:var(--text); }
.radio-row label { display:inline-block; margin:6px 18px 6px 0; font-size:15px; color:var(--text); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; } .grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 12px; align-items:end; }
.hint { margin:10px 0 0; font-size:13px; color:var(--muted); }
button { margin-top:14px; padding:9px 18px; border:0; border-radius:6px; background:var(--accent); color:#fff; font-size:15px; cursor:pointer; }
button.secondary { background:#e5e7eb; color:var(--text); }
form.inline { display:inline-flex; gap:6px; align-items:center; } form.inline input { width:150px; margin:0; } form.inline button { margin:0; padding:6px 10px; font-size:13px; }
.big { display:grid; grid-template-columns:auto 1fr 1fr; gap:12px; margin:14px 0; }
@media (max-width: 600px) { .big { grid-template-columns:1fr; } }
.big div { padding:12px 14px; background:#f8fafc; border-radius:8px; } .big .label { display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.big strong { display:block; font-size:19px; margin:2px 0; white-space:nowrap; }
.muted { color:var(--muted); } .small { font-size:13px; } .error { color:var(--err); font-weight:600; }
.note { background:#fffbeb; border-left:3px solid var(--warn); padding:6px 10px; margin:8px 0; font-size:14px; }
.warnings { padding-left:18px; } .warnings li { margin:6px 0; } .warnings li.blocking { color:var(--err); }
.result table, .card > table { display:block; overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); } th { color:var(--muted); font-weight:600; }
table.small { font-size:13px; }
.check { display:flex; align-items:center; gap:6px; margin-top:20px; }
.card.narrow.wide { max-width:520px; }
.center { text-align:center; }
code { background:#f1f5f9; padding:2px 5px; border-radius:4px; }
.mt { margin-top:22px; }

/* Конструктор заказа */
.add-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.add-row input { flex:1 1 260px; margin:0; }
.add-row button { margin:0; }
/* Позиции заказа — карточки (поля переносятся, не уезжают за край) */
#order-list { display:flex; flex-direction:column; gap:8px; }
.oi-row { border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fafbfc; }
.oi-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.oi-title { font-size:14px; line-height:1.3; }
.oi-fields { display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:8px; }
.oi-fields label { display:flex; flex-direction:column; margin:0; font-size:11px; color:var(--muted); }
.oi-fields input.num { width:72px; margin:2px 0 0; padding:6px 8px; text-align:right; }
.oi-fields input.num:disabled { background:#eef2f7; color:#475569; }
.oi-row button.del { margin:0; padding:4px 9px; flex:0 0 auto; }
.order-empty { color:var(--muted); font-size:14px; }
.totals { font-weight:600; margin-top:10px; }
.order-detail summary { cursor:pointer; color:var(--accent); margin:6px 0; }

/* Выпадающий список каталога */
.eq-search-wrap { position:relative; flex:1 1 260px; }
.eq-search-wrap input { width:100%; margin:0; }
.dropdown { position:absolute; z-index:20; left:0; right:0; top:100%; margin-top:2px; background:#fff;
  border:1px solid #cbd5e1; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); max-height:320px; overflow-y:auto; }
.dd-item { display:grid; grid-template-columns:1fr auto; gap:0 10px; padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line); }
.dd-item:last-child { border-bottom:0; }
.dd-item:hover { background:#eff3ff; }
.dd-name { grid-column:1; font-size:14px; }
.dd-model { grid-column:2; grid-row:1; color:var(--accent); font-size:13px; font-weight:600; white-space:nowrap; }
.dd-dims { grid-column:1 / span 2; color:var(--muted); font-size:12px; }
.dd-empty { padding:10px 12px; color:var(--muted); font-size:14px; }

/* Узкий экран (телефон): поля позиции по 2 в ряд, без горизонтальной прокрутки */
html, body { max-width:100%; overflow-x:hidden; }
@media (max-width: 520px) {
  .oi-fields { gap:8px; }
  .oi-fields label { flex:1 1 44%; }
  .oi-fields input.num { width:100%; }
  header { flex-wrap:wrap; gap:4px 12px; }
}

.dd-wrap { position:relative; display:block; }
.dd-wrap input { width:100%; }