/* Стили интерфейса. Правь тут, а не в index.html */
:root{--bg:#0b1220;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.10);--text:rgba(255,255,255,.92);--muted:rgba(255,255,255,.65);--shadow:0 18px 60px rgba(0,0,0,.45);--r2:22px;--font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--text);min-height:100vh;background:
radial-gradient(1200px 600px at 15% 0%, rgba(167,139,250,.28), transparent 60%),
radial-gradient(900px 500px at 85% 10%, rgba(125,211,252,.25), transparent 55%),
radial-gradient(900px 700px at 50% 100%, rgba(52,211,153,.12), transparent 60%),var(--bg)}
.wrap{max-width:1240px;margin:0 auto;padding:34px 18px 60px}
.top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
h1{margin:0;font-size:34px;line-height:1.1;letter-spacing:-.02em}
.subtitle{margin-top:8px;color:var(--muted);max-width:1020px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--muted)}
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:18px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow)}
.hd{padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.hd h2{margin:0;font-size:16px;color:rgba(255,255,255,.88)}
.bd{padding:14px 16px 16px}
.mini{font-size:12.5px;color:var(--muted);line-height:1.4}
/* Плавное раскрытие/сворачивание секций.
Длительность синхронизирована с SECTION_ANIM_MS (visibility.js). */
/* ВАЖНО: overflow должен быть visible, иначе выпадающие меню (dropdown)
«обрезаются» (секция раньше всегда была overflow:hidden из-за анимации).
Для анимации сворачивания мы включаем overflow:hidden только в collapsed. */
.section{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.14);overflow:visible;max-height:2200px;opacity:1;transform:none;transition:max-height 1.12s ease,opacity 1.12s ease,transform 1.12s ease,margin-top 1.12s ease,padding-top 1.12s ease}
.section:first-child{margin-top:0;padding-top:0;border-top:none}
.section.collapsed{max-height:0;opacity:0;transform:translateY(-8px);margin-top:0;padding-top:0;border-top:none;overflow:hidden}
.secTitle{display:flex;align-items:center;justify-content:space-between;gap:10px}
.secTitle h3{margin:0;font-size:14px;letter-spacing:-.01em}
.tag{font-size:12px;color:rgba(255,255,255,.80);background:rgba(255,255,255,.08);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
.opts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.opt{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.05);transition:transform .18s ease, background .18s ease}
.opt:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.chk{flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;margin-top:1px}
.chk svg{width:16px;height:16px;opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease}
.opt.on .chk{border-color:rgba(52,211,153,.75);background:rgba(52,211,153,.18)}
.opt.on .chk svg{opacity:1;transform:scale(1)}
/* Поля ввода внутри строки .opt (контакты и похожие блоки)
Заметка: без этих правил браузер рисует «белые системные» инпуты. */
.opt .inp,.opt .ta{
flex:0 0 260px;
min-width:220px;
padding:10px 12px;
border-radius:14px;
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.10));
color:rgba(255,255,255,.92);
font-weight:800;
outline:none;
}
.opt .ta{min-height:70px;resize:vertical}
.opt .inp::placeholder,.opt .ta::placeholder{color:rgba(255,255,255,.45)}
.opt .inp:focus,.opt .ta:focus{border-color:rgba(125,211,252,.35);box-shadow:0 0 0 3px rgba(125,211,252,.15)}
.label{flex:1}
.label .t{font-weight:800}
.label .n{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.35}
.inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media (max-width:760px){.inputs{grid-template-columns:1fr}}
.field{padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);color:rgba(255,255,255,.92);padding:10px 10px;font-weight:700;outline:none}
.summary{position:sticky;top:14px;padding:16px;border-radius:var(--r2);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.06));border:1px solid var(--line);box-shadow:var(--shadow)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card{margin-top:12px;padding:14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.card h3{margin:0 0 8px 0;font-size:14px}
.pillRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{font-size:12px;color:rgba(255,255,255,.80);background:rgba(255,255,255,.08);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
.list{margin:0;padding-left:18px;color:var(--muted);line-height:1.5}
.sumline{display:flex;justify-content:space-between;gap:10px;margin:10px 0;color:var(--muted)}
.sumline strong{color:rgba(255,255,255,.92)}
.total{margin-top:12px;padding:14px;border-radius:16px;background:linear-gradient(90deg,rgba(125,211,252,.16),rgba(167,139,250,.14));border:1px solid rgba(125,211,252,.22);display:flex;align-items:center;justify-content:space-between;gap:10px}
.total .v{font-size:22px;font-weight:900}
.btnRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
@media (max-width:520px){.btnRow{grid-template-columns:1fr}}
.btn{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);font-weight:900;cursor:pointer;transition:transform .18s ease,background .18s ease}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.12)}
.btn.alt{background:rgba(125,211,252,.12);border-color:rgba(125,211,252,.24)}
.small{font-size:12px;color:var(--muted);line-height:1.35}
.kv{display:flex;justify-content:space-between;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);font-size:12px}
.chip.ok{border-color:rgba(52,211,153,.28);background:rgba(52,211,153,.10)}
.chip.warn{border-color:rgba(251,191,36,.28);background:rgba(251,191,36,.10)}
.alert{margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(251,191,36,.28);background:rgba(251,191,36,.10)}
.alert.red{border-color:rgba(251,113,133,.28);background:rgba(251,113,133,.10)}
.modalBack{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px}
.modal{max-width:560px;width:100%;background:rgba(18,24,38,.92);border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:var(--shadow);padding:16px}
.modal h3{margin:0 0 6px 0}
.modal p{margin:0;color:var(--muted);line-height:1.45}
.modal .btnRow{margin-top:12px}
/* --- additions v6 (multi-segment, lists, steppers, contacts) --- */
.rowlist{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row .grow{flex:1;min-width:220px}
.row select,.row input,.row textarea{width:100%;padding:12px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);outline:none}
/* nicer selects (dark dropdown) */
.row select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.05));}
.row select:focus{border-color:rgba(125,211,252,.35);box-shadow:0 0 0 3px rgba(125,211,252,.15);}
.row select option{background:#0f172a;color:rgba(255,255,255,.92);}
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.12));}
.field select option{background:#0f172a;color:rgba(255,255,255,.92);}
.row textarea{min-height:90px;resize:vertical}
.btnMini{border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);padding:10px 12px;border-radius:14px;cursor:pointer}
.btnMini:hover{background:rgba(255,255,255,.10)}
.stepper{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.05);padding:6px 8px;border-radius:14px}
.stepper button{width:34px;height:34px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;font-weight:800}
.stepper button:hover{background:rgba(255,255,255,.10)}
.stepper input{width:46px;text-align:center;border:none;background:transparent;color:var(--text);font-weight:800;outline:none}
.muted{color:var(--muted)}
.formGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.formGrid .span2{grid-column:1/-1}
@media(max-width:900px){.formGrid{grid-template-columns:1fr}}
/* compact icon buttons (minus/remove) */
.iconBtn{width:40px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));color:rgba(255,255,255,.92);font-weight:900;cursor:pointer;display:grid;place-items:center;transition:transform .18s ease,background .18s ease;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.iconBtn:hover{transform:translateY(-1px);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08))}
/* custom dropdown (rounded menu, matches theme) */
.dd{position:relative;flex:1;min-width:220px}
.ddBtn{width:100%;padding:12px 12px;border-radius:16px;border:1px solid var(--line);
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
color:var(--text);outline:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.ddBtn:focus{border-color:rgba(125,211,252,.35);box-shadow:0 0 0 3px rgba(125,211,252,.15);}
.ddChevron{opacity:.75;font-weight:900}
.ddMenu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:50;
border:1px solid rgba(255,255,255,.14);
background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(15,23,42,.92));
border-radius:16px;
box-shadow:0 18px 60px rgba(0,0,0,.55);
overflow:hidden;
padding:4px;
display:none;
max-height:260px;
}
.dd.open .ddMenu{display:block}
.ddScroll{max-height:252px;overflow:auto;
scrollbar-width:none; /* Firefox */
-ms-overflow-style:none; /* IE/Edge legacy */
/* Убираем «пустую полосу» справа (gutter) на Windows,
когда браузер резервирует место под скроллбар. */
box-sizing:content-box;
padding-right:18px;
margin-right:-18px;
}
.ddScroll::-webkit-scrollbar{width:0;height:0} /* Chrome/Safari */
.ddItem{padding:10px 12px;color:rgba(255,255,255,.92);cursor:pointer;user-select:none; border-radius:12px; margin:2px; }
.ddItem:hover{background:rgba(255,255,255,.10)}
.ddItem.on{background:rgba(125,211,252,.12)}
/* ККТ: строки и кнопки добавления (чтобы не «разваливалось»)
Если нужно поправить размеры/отступы — делай это здесь. */
.kktAddRow{margin-top:10px}
.kktList{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.kktRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kktRow .dd{min-width:240px}
/* producer product groups */
.prodSearch{margin-top:10px}
.prodSearch input{width:100%;padding:12px 12px;border-radius:16px;border:1px solid var(--line);
background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.10));color:rgba(255,255,255,.92);font-weight:800;outline:none}
.prodSearch input::placeholder{color:rgba(255,255,255,.45)}
.prodList{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
max-height:260px;overflow:auto;padding-right:6px;scrollbar-width:none;-ms-overflow-style:none}
.prodList::-webkit-scrollbar{width:0;height:0}
@media(max-width:760px){.prodList{grid-template-columns:1fr}}
.prodNote{margin-top:10px}
.prodNote textarea{width:100%;min-height:90px;resize:vertical;padding:12px 12px;border-radius:16px;border:1px solid var(--line);
background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.10));color:rgba(255,255,255,.92);font-weight:800;outline:none}
.prodNote textarea::placeholder{color:rgba(255,255,255,.45)}
/* выбранные категории (чипы) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
color:rgba(255,255,255,.92);font-weight:800;font-size:12px;
}
.chipX{width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.14);cursor:pointer;user-select:none;
}
.chipX:hover{background:rgba(255,255,255,.10)}
/* tiny spacing helpers */
.mt10{margin-top:10px}
.mt8{margin-top:8px}
/* give + buttons air */
.btnMini{transition:transform .18s ease,background .18s ease}
.btnMini:hover{transform:translateY(-1px)}
/* contacts form in same style */
.formGrid label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.formGrid input,.formGrid textarea{width:100%;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.10));color:rgba(255,255,255,.92);padding:12px 12px;font-weight:800;outline:none}
.formGrid textarea{min-height:110px;resize:vertical}
.formGrid input::placeholder,.formGrid textarea::placeholder{color:rgba(255,255,255,.45)}
.formGrid input:focus,.formGrid textarea:focus{border-color:rgba(125,211,252,.35);box-shadow:0 0 0 3px rgba(125,211,252,.15)}