:root{ --bg:#E9EDEA; --card:#FFFFFF; --card-2:#F5F8F5; --border:#E2E7E2; --border-2:#CCD5CE; --ink:#101613; --muted:#57675E; --faint:#66776E; --brand:#0E9F6E; --brand-deep:#076B4C; --brand-soft:#E4F4EC; --warn:#A76A08; --warn-soft:#FCF2DF; --danger:#C4432F; --danger-soft:#FBECE8; --ok:var(--brand-deep); --track:#E5EAE6; --btn-fg:#FFFFFF; --sh-1:0 1px 2px rgba(16,22,19,.04), 0 6px 18px rgba(16,22,19,.06); --sh-2:0 16px 40px rgba(16,22,19,.18); --f-ui:'Instrument Sans',system-ui,-apple-system,sans-serif; --f-num:'IBM Plex Mono',ui-monospace,monospace; --r-card:14px; --r-ctl:9px; --rail:236px; --gut:26px; } html[data-theme="dark"]{ --bg:#080C0A; --card:#141A17; --card-2:#1A211D; --border:#26302A; --border-2:#36443B; --ink:#E7EDE9; --muted:#8DA097; --faint:#748679; --brand:#2FBF87; --brand-deep:#26A473; --brand-soft:#16281F; --warn:#D9A44A; --warn-soft:#2A2216; --danger:#E17C6A; --danger-soft:#2A1917; --track:#212B25; --btn-fg:#08120E; --sh-1:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.3); --sh-2:0 20px 48px rgba(0,0,0,.55); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased} .n{font-family:var(--f-num);font-variant-numeric:tabular-nums} .lbl{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--faint)} .app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh} /* ── rail ── */ .rail{padding:18px 14px 18px 16px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;background:var(--bg)} .brand{display:flex;align-items:center;gap:9px;padding:4px 10px 2px} .pin{position:absolute;top:20px;right:10px;width:26px;height:26px;border:1px solid var(--border);background:var(--card); border-radius:7px;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;display:grid;place-items:center;padding:0} .pin:hover{color:var(--brand-deep);border-color:var(--brand)} .pin:focus-visible{outline:2px solid var(--brand);outline-offset:1px} /* свёрнутое меню: только значки, разворачивается по наведению */ html[data-rail="auto"]{--rail:66px} html[data-rail="auto"] .rail{align-items:center;padding-left:10px;padding-right:10px} html[data-rail="auto"] .txt, html[data-rail="auto"] .grp > .lbl, html[data-rail="auto"] .brand b, html[data-rail="auto"] .who > div:not(.av), html[data-rail="auto"] .theme, html[data-rail="auto"] .pin{opacity:0;pointer-events:none} /* opacity:0 не убирает текст из потока flex — из-за gap он всё равно расталкивает иконку за пределы 44px-квадрата (icon+невидимый-но-занимающий-место текст центрируются вместе). Схлопываем ширину текста в 0, чтобы центрировалась только иконка. */ html[data-rail="auto"] .nav .txt{width:0;margin:0;overflow:hidden;white-space:nowrap} html[data-rail="auto"] .nav{justify-content:center;padding:9px 0;width:44px;gap:0} html[data-rail="auto"] .who{justify-content:center;padding:9px 0;width:44px} html[data-rail="auto"] .rail:hover, html[data-rail="auto"] .rail:focus-within{ position:fixed;left:0;top:0;width:236px;align-items:stretch; padding-left:16px;padding-right:14px;box-shadow:var(--sh-2);z-index:60;border-right:1px solid var(--border)} html[data-rail="auto"] .rail:hover .txt, html[data-rail="auto"] .rail:hover .grp > .lbl, html[data-rail="auto"] .rail:hover .brand b, html[data-rail="auto"] .rail:hover .who > div:not(.av), html[data-rail="auto"] .rail:hover .theme, html[data-rail="auto"] .rail:hover .pin, html[data-rail="auto"] .rail:focus-within .txt, html[data-rail="auto"] .rail:focus-within .theme, html[data-rail="auto"] .rail:focus-within .pin{opacity:1;pointer-events:auto} html[data-rail="auto"] .rail:hover .nav, html[data-rail="auto"] .rail:hover .who{justify-content:flex-start;padding:8px 10px;width:auto;gap:10px} html[data-rail="auto"] .rail:hover .nav .txt, html[data-rail="auto"] .rail:focus-within .nav .txt{width:auto} .brand .mark{width:28px;height:28px;border-radius:8px;background:var(--brand);color:var(--btn-fg);display:grid;place-items:center;font-weight:700;font-size:14px} .brand b{font-weight:700;font-size:16.5px;letter-spacing:-.02em} .grp{display:flex;flex-direction:column;gap:2px} .grp > .lbl{padding:0 10px 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em} .nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-ctl);color:var(--muted);text-decoration:none;font-size:14px;font-weight:500} .nav:hover{background:var(--card);color:var(--ink)} .nav.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)} .nav .ic{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none; stroke-linecap:round;stroke-linejoin:round;opacity:.75} .nav.on .ic{stroke:var(--brand);opacity:1} .rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px} .theme{display:flex;background:var(--card);border:1px solid var(--border);border-radius:var(--r-ctl);padding:3px;box-shadow:var(--sh-1)} .theme button{flex:1;padding:6px 0;background:transparent;border:0;border-radius:7px;cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--muted)} .theme button[aria-pressed="true"]{background:var(--brand-soft);color:var(--brand-deep);font-weight:600} .theme button:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .who{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-ctl);box-shadow:var(--sh-1)} .who .av{width:30px;height:30px;flex:none;border-radius:50%;background:var(--brand);color:var(--btn-fg);display:grid;place-items:center;font-size:12px;font-weight:600} .who p{margin:0;font-size:13.5px;font-weight:600} .who small{color:var(--faint);font-size:11.5px} /* ── main ── */ /* ширина контента подстраивается под экран: на обычных мониторах не растягивается больше, чем удобно читать, а на широких — реально использует место, иначе таблицы с кучей колонок (заявки, магазины) всё равно требуют горизонтального скролла даже при свободном месте вокруг */ main{min-width:0;padding:22px var(--gut) 34px;max-width:1720px;margin:0 auto;width:100%} @media (min-width:1900px){ main{max-width:min(94vw, 2200px)} } @media (min-width:2300px){ main{max-width:min(92vw, 2600px)} } .head{display:flex;align-items:flex-start;gap:20px;margin-bottom:20px} h1{margin:0;font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1.15} .sub{margin:5px 0 0;color:var(--muted);font-size:14px} .sub b{font-family:var(--f-num);font-weight:500;color:var(--ink)} .btn{margin-left:auto;flex:none;background:var(--brand);color:var(--btn-fg);border:0;border-radius:var(--r-ctl);padding:10px 17px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--sh-1)} .btn:hover{background:var(--brand-deep)} .btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* ── stat cards: числа — главный визуальный акцент страницы, карточки вокруг — тихие ── */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;margin-bottom:14px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden} .stat{background:var(--card);padding:15px 16px 16px} .stat .v{font-family:var(--f-num);font-size:28px;font-weight:500;letter-spacing:-.03em;display:block;margin-top:6px} .stat .v.g{color:var(--brand-deep)} .stat .v.r{color:var(--danger)} .stat .foot{margin-top:7px;font-size:12px;color:var(--faint)} /* ── plan card (signature) ── */ .plan{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:16px 18px 18px;margin-bottom:14px} .plan-top{display:flex;align-items:baseline;gap:10px;margin-bottom:13px} .plan-top b{font-size:15px;font-weight:600} .plan-top span{font-size:12.5px;color:var(--muted)} .dev{position:relative;height:12px;background:var(--track);border-radius:6px} .dev-mid{position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;border-radius:1px;background:var(--ink);opacity:.35} .dev-bar{position:absolute;top:0;bottom:0;background:var(--brand);border-radius:6px} .dev-bar.r{background:var(--danger)} .dev-cap{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--f-num);font-size:9px;color:var(--muted)} .plan-legend{display:flex;justify-content:space-between;margin-top:9px;font-size:12px;color:var(--faint);position:relative} .plan-legend .mid{position:absolute;left:50%;transform:translateX(-50%);color:var(--muted)} .plan-legend b{font-family:var(--f-num);font-weight:500;color:var(--ink)} /* ── toolbar ── */ .tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-card) var(--r-card) 0 0;border-bottom:0;padding:13px 16px} /* Блок = одна панель: шапка с названием, под ней фильтры, под ними таблица. Между панелями — воздух, внутри панели — только волосяные линии. Так глаз видит границы блоков. */ .sec + .tools{border-radius:0;border-top:0;padding:11px 16px;background:var(--card-2)} .sec + .tcard,.sec + .tools + .tcard,.sec + .panel-note + .tcard{border-top:0;border-radius:0 0 var(--r-card) var(--r-card)} .panel-note{margin:0;background:var(--card);border-left:1px solid var(--border-2);border-right:1px solid var(--border-2); padding:0 18px 12px;font-size:12.5px;color:var(--faint);line-height:1.45} .search{flex:1 1 250px;max-width:330px} input[type=search],select{width:100%;padding:9px 12px;background:var(--card-2);border:1px solid var(--border-2);border-radius:var(--r-ctl);font-family:inherit;font-size:14px;color:var(--ink)} select{width:auto;cursor:pointer} input[type=search]::placeholder{color:var(--faint)} input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .count{margin-left:auto;font-size:13px;color:var(--muted)} .count b{font-family:var(--f-num);font-weight:500;color:var(--ink)} /* ── table card ── */ .tcard{background:var(--card);border:1px solid var(--border-2);border-radius:0 0 var(--r-card) var(--r-card);overflow:hidden;box-shadow:var(--sh-1)} .wrap{overflow-x:auto} table{width:100%;border-collapse:collapse;min-width:1160px} thead th{position:sticky;top:0;z-index:2;background:var(--card);text-align:left;padding:10px 14px;border-bottom:1.5px solid var(--border-2); font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--muted);white-space:nowrap;cursor:pointer;user-select:none} thead th:first-child{padding-left:18px} thead th:last-child{padding-right:18px;cursor:default;position:sticky;right:0;z-index:3;background:var(--card);box-shadow:-8px 0 12px -8px rgba(16,24,40,.14)} tbody td:last-child{position:sticky;right:0;background:var(--card);box-shadow:-8px 0 12px -8px rgba(16,24,40,.14)} tbody tr:hover td:last-child,tbody tr:focus-within td:last-child{background:var(--card-2)} html[data-theme="dark"] thead th:last-child,html[data-theme="dark"] tbody td:last-child{box-shadow:-8px 0 12px -8px rgba(0,0,0,.5)} /* в таблице заказов заявки последний столбец — просто дата, не действия; прикреплять его справа не нужно (пин задуман для кнопок действий) — иначе он наплывает на широкий столбец с текстом сообщения */ #ordtable thead th:last-child,#ordtable tbody td:last-child{position:static;box-shadow:none} thead th.r{text-align:right} thead th:hover{color:var(--ink)} tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle} tbody td:first-child{padding-left:18px} tbody td:last-child{padding-right:18px} tbody tr:last-child td{border-bottom:0} tbody tr{cursor:pointer} tbody tr:hover td{background:var(--card-2)} tbody tr:focus-within td{background:var(--card-2)} .rn{font-family:var(--f-num);font-size:12.5px;color:var(--faint);text-align:right;width:46px} .shop{display:flex;align-items:center;gap:11px} .logo{width:36px;height:36px;flex:none;border-radius:9px;background:var(--brand-soft);border:1px solid var(--border); display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--brand-deep);overflow:hidden} .logo img{width:100%;height:100%;object-fit:cover} a.nm{font-weight:600;font-size:14px;color:inherit;text-decoration:none} a.nm:hover{color:var(--brand-deep)} a.nm:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px} .nm-ext{font-family:var(--f-num);font-size:10px;color:var(--faint);margin-left:5px} .mid{font-family:var(--f-num);font-size:13px;color:var(--muted)} .ct{font-size:13.5px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* длинные названия товаров переносим на 2–3 строки, а не режем многоточием */ .pname{white-space:normal;display:inline-block;max-width:330px;line-height:1.35} .ph{font-family:var(--f-num);font-size:12px;color:var(--faint);margin-top:1px} /* редактирование прямо в таблице/карточке: карандаш подсказывает, что поле кликабельно, а сохранение всегда явное — галочка «сохранить» и крестик «отмена», одинаково на всех страницах */ .editable-cell{cursor:text;border-radius:6px;padding:3px 6px;margin:-3px -6px;display:inline-block} .editable-cell:hover,.editable-fact:hover{background:var(--card-2);box-shadow:0 0 0 1px var(--border-2)} /* карандаш виден всегда (приглушённо) — иначе непонятно, что поле вообще можно редактировать, пока случайно не навести мышью; на hover — чётче */ .editable-cell::after,.editable-fact::after{content:"✎";margin-left:6px;font-size:11px;color:var(--faint);opacity:.4} .editable-cell:hover::after,.editable-fact:hover::after{opacity:1} .editable-input{width:100%;padding:4px 7px;border:1px solid var(--brand);border-radius:6px;background:var(--card);font-family:inherit;font-size:13.5px;color:var(--ink)} .editable-fact{cursor:text;border-radius:6px;padding:1px 5px;margin:-1px -5px} .edit-wrap{display:inline-flex;align-items:center;gap:4px;width:100%} .edit-ok,.edit-no{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid var(--border-2);background:var(--card); cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center;padding:0;color:var(--muted)} .edit-ok{background:var(--brand);border-color:var(--brand);color:var(--btn-fg);font-weight:700} .edit-ok:hover{background:var(--brand-deep)} .edit-no:hover{border-color:var(--danger);color:var(--danger)} .edit-ok:focus-visible,.edit-no:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .pzoom{width:34px;height:34px;border-radius:8px;cursor:zoom-in} .pzoom img{width:34px;height:34px;border-radius:8px;object-fit:cover;border:1px solid var(--border);display:block} /* превью при наведении — отдельным слоем поверх всей страницы (position:fixed), иначе таблица со своим скроллом (.wrap{overflow-x:auto}) обрезает увеличенную картинку */ #pzoom-preview{position:fixed;z-index:999;pointer-events:none;display:none;border-radius:12px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.35);border:2px solid var(--brand);background:var(--card)} #pzoom-preview img{display:block;width:260px;height:260px;object-fit:cover} .dp-cell{cursor:pointer;border-radius:6px} .dp-cell:hover{background:var(--brand-soft);color:var(--brand-deep);font-weight:600} /* прогресс по дням растёт вширь на каждую дату — закрепляем №+товар слева, чтобы не терять, какая это строка, при скролле по датам вправо */ #dptable th:nth-child(-n+2),#dptable td:nth-child(-n+2){position:sticky;background:var(--card)} #dptable th:first-child,#dptable td:first-child{left:0;z-index:2} #dptable th:nth-child(2),#dptable td:nth-child(2){left:46px;z-index:2;box-shadow:4px 0 8px -6px rgba(16,24,40,.18);text-align:left;white-space:normal;max-width:220px} #dptable thead th:nth-child(-n+2){z-index:4} /* значок «наш выкупатор» / выбор классификации рядом с именем — компактно, в одну строку с именем, не переносится под текст (иначе строки таблицы скачут по высоте) */ .buyer-badge{display:inline-flex;flex:none;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;background:#EAF2FF;border:1px solid #BBD6FF;color:#2563C7;font-size:11px;font-weight:600;margin-left:6px;white-space:nowrap} html[data-theme="dark"] .buyer-badge{background:#1B2C4A;border-color:#2E4B7A;color:#8FB8FF} .buyer-badge.cust{background:var(--card-2);border-color:var(--border);color:var(--muted)} .classify-sel{flex:none;width:84px;margin-left:6px;padding:2px 4px;border-radius:999px;background:var(--card-2);border:1px solid var(--border-2);font-size:10.5px;color:var(--muted);font-family:inherit;cursor:pointer} /* «Кто это» отдельным столбцом — значок и выбор больше не налезают на имя покупателя */ .qcell{white-space:nowrap} .qcell .buyer-badge,.qcell .classify-sel{margin-left:0} .qcell .classify-sel{width:122px;padding:4px 6px;border-radius:var(--r-ctl);font-size:11.5px} .pill.w{background:var(--warn-soft);color:var(--warn)} .stat .v.w{color:var(--warn)} .mgr{display:inline-block;padding:3px 10px;background:var(--card-2);border:1px solid var(--border);border-radius:999px;font-size:12.5px;color:var(--muted);white-space:nowrap} .mgr-sel{width:132px;padding:5px 7px;border-radius:var(--r-ctl);background:var(--card-2);border:1px solid var(--border-2); font-size:12.5px;color:var(--ink);font-family:inherit;cursor:pointer} .mgr-sel:hover{border-color:var(--brand)} td.num{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:14px} td.num.dim{color:var(--muted)} .pill{display:inline-block;padding:3px 9px;border-radius:999px;font-family:var(--f-num);font-size:12.5px;font-weight:500} .pill.g{background:var(--brand-soft);color:var(--brand-deep)} .pill.r{background:var(--danger-soft);color:var(--danger)} .rowgap{min-width:126px} .rowgap .dev{height:8px;border-radius:4px} .rowgap .dev-mid{top:-3px;bottom:-3px;width:2px} .devnum{margin-top:5px;text-align:center;font-family:var(--f-num);font-size:11.5px;font-weight:500} .devnum.g{color:var(--brand-deep)} .devnum.r{color:var(--danger)} .hint{display:inline-grid;place-items:center;width:14px;height:14px;margin-left:5px;border-radius:50%; border:1px solid var(--border-2);color:var(--faint);font-size:9px;font-weight:700;cursor:help;vertical-align:middle} .noday{color:var(--faint);font-size:12.5px} .acts{display:flex;gap:7px;justify-content:flex-end;opacity:.35} tr:hover .acts,tr:focus-within .acts{opacity:1} .act{background:var(--card);border:1px solid var(--border-2);border-radius:8px;padding:6px 11px;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap} .act:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)} .act.pri{color:var(--ink);border-color:var(--border-2);font-weight:600} .act:focus-visible{outline:2px solid var(--brand);outline-offset:1px;opacity:1} /* компактная кнопка-иконка в колонке "Действия" — экономит место в плотных таблицах заявок. Цвет закреплён за смыслом действия (не только на hover — иначе не разобрать, где какая): */ .act.icon{width:30px;height:30px;padding:0;display:inline-grid;place-items:center} .act.icon .ic{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .act.icon.act-check,.act.icon.act-open{color:var(--brand-deep);border-color:color-mix(in srgb, var(--brand) 35%, var(--border-2))} .act.icon.act-check:hover,.act.icon.act-open:hover{background:var(--brand-soft);border-color:var(--brand)} .act.icon.act-edit{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 35%, var(--border-2))} .act.icon.act-edit:hover{background:var(--warn-soft);border-color:var(--warn)} .act.icon.act-del{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 35%, var(--border-2))} .act.icon.act-del:hover{background:var(--danger-soft);border-color:var(--danger)} .empty{padding:56px var(--gut);text-align:center;color:var(--muted)} .empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px} @media (max-width:960px){ .app{grid-template-columns:1fr} .rail{position:static;height:auto;flex-direction:row;align-items:center;gap:10px;overflow-x:auto;padding:12px 16px} .grp{flex-direction:row} .grp > .lbl,.who{display:none} .rail-foot{margin:0;flex:none} :root{--gut:16px} h1{font-size:22px} } @media (prefers-reduced-motion:no-preference){ tbody tr,.act,.nav,.btn{transition:background .14s ease,color .14s ease,opacity .14s ease,border-color .14s ease} .dev-bar{transition:width .5s cubic-bezier(.2,.7,.3,1)} } /* ═══════ карточка магазина ═══════ */ .back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;margin-bottom:14px} .back:hover{color:var(--brand-deep)} .back:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px} .shead{display:flex;align-items:flex-start;gap:16px;background:var(--card);border:1px solid var(--border); border-radius:var(--r-card);padding:18px 20px;box-shadow:var(--sh-1);margin-bottom:14px;flex-wrap:wrap} .shead .big{width:64px;height:64px;flex:none;border-radius:12px;background:var(--brand-soft);border:1px solid var(--border); display:grid;place-items:center;font-size:20px;font-weight:700;color:var(--brand-deep);overflow:hidden} .shead .big img{width:100%;height:100%;object-fit:cover} .shead h1{font-size:24px;margin:0} .shead .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:7px} .tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;background:var(--card-2); border:1px solid var(--border);color:var(--muted)} .tag.on{background:var(--brand-soft);border-color:transparent;color:var(--brand-deep);font-weight:600} .tag.off{background:var(--danger-soft);border-color:transparent;color:var(--danger);font-weight:600} .kaspi{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--card); border:1px solid var(--border-2);border-radius:var(--r-ctl);padding:9px 14px;font-size:13.5px; font-weight:600;color:var(--ink);text-decoration:none} .kaspi:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)} .kaspi:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0; background:var(--card);border:1px solid var(--border);border-radius:var(--r-card); box-shadow:var(--sh-1);margin-bottom:14px;overflow:hidden} .fact{padding:14px 18px;border-right:1px solid var(--border)} .fact:last-child{border-right:0} .fact .lbl{display:block;margin-bottom:4px} .fact .val{font-size:14.5px;font-weight:600} .fact .val.mono{font-family:var(--f-num);font-weight:500} .sec{display:flex;align-items:center;gap:11px;margin:30px 0 0;position:relative;flex-wrap:wrap; background:var(--card);border:1px solid var(--border-2);border-bottom:1px solid var(--border); border-radius:var(--r-card) var(--r-card) 0 0;padding:14px 18px 13px} .sec::before{content:"";position:absolute;left:0;top:13px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)} .sec h2{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.015em} .sec span{font-size:12.5px;color:var(--muted);background:var(--card-2);border:1px solid var(--border); border-radius:999px;padding:2px 10px;font-family:var(--f-num);white-space:nowrap} .sec .sec-act{margin-left:auto;display:flex;gap:8px;align-items:center} .cmt{max-width:280px;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .oid{font-family:var(--f-num);font-size:12px;color:var(--muted)} /* ═══════ отзывы ═══════ */ .reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px} .rev{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;box-shadow:var(--sh-1)} .rev-top{display:flex;align-items:center;gap:8px;margin-bottom:8px} .rev-av{width:30px;height:30px;flex:none;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:grid;place-items:center;font-size:12px;font-weight:700} .rev-who{font-weight:600;font-size:13.5px} .rev-date{font-family:var(--f-num);font-size:11.5px;color:var(--faint)} .rev-stars{margin-left:auto;color:#F5A623;font-size:13px;letter-spacing:1px} .rev-text{font-size:13.5px;line-height:1.5;color:var(--ink)} .rev-prod{margin-top:8px;font-size:11.5px;color:var(--faint)} .rev-warn{margin-top:8px;font-size:11.5px;color:var(--danger)} .act.del:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)} /* ═══════ WhatsApp диалоги ═══════ */ .wa{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - 44px);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1);background:var(--card)} .wa-list{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;background:var(--card)} .wa-lhead{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px} .wa-lhead h2{margin:0;font-size:16px;font-weight:700} .wa-conn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--brand-deep);font-weight:600} .wa-conn .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)} .wa-conn.off{color:var(--danger)} .wa-conn.off .dot{background:var(--danger)} .wa-search{padding:10px 12px;border-bottom:1px solid var(--border)} .wa-search input{width:100%;padding:8px 12px;background:var(--card-2);border:1px solid var(--border-2);border-radius:var(--r-ctl);font-family:inherit;font-size:13.5px;color:var(--ink)} .wa-search input:focus{outline:none;border-color:var(--brand)} .wa-threads{flex:1;overflow-y:auto;min-height:0} .wa-th{display:flex;gap:11px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--border);align-items:center} .wa-th:hover{background:var(--card-2)} .wa-th.on{background:var(--brand-soft)} .wa-th .av{width:44px;height:44px;flex:none;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:600} .wa-th .mid2{flex:1;min-width:0} .wa-th .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wa-th .last{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .wa-th .right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none} .wa-th .tm{font-family:var(--f-num);font-size:11px;color:var(--faint)} .wa-th .badge{background:var(--brand);color:#fff;font-family:var(--f-num);font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px} .wa-chat{display:flex;flex-direction:column;min-height:0;background:var(--bg)} .wa-chead{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px;background:var(--card)} .wa-chead .av{width:38px;height:38px;flex:none;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600} .wa-chead .nm{font-weight:600;font-size:14.5px} .wa-chead .ph{font-family:var(--f-num);font-size:12px;color:var(--muted)} .wa-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:8px;min-height:0} .wa-day{align-self:center;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:3px 12px;font-size:11.5px;color:var(--muted);margin:6px 0} .bub{max-width:66%;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;position:relative} .bub .t{font-family:var(--f-num);font-size:10px;color:var(--faint);margin-top:3px;text-align:right} .bub.in{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:3px} .bub.out{align-self:flex-end;background:var(--brand-soft);border:1px solid transparent;border-bottom-right-radius:3px} .bub.ai{align-self:flex-end;background:var(--card);border:1px dashed var(--brand)} .bub.ai .tag{font-size:10px;color:var(--brand-deep);font-weight:600;margin-bottom:3px;display:block} .wa-compose{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:9px;align-items:flex-end;background:var(--card)} .wa-compose textarea{flex:1;resize:none;padding:10px 12px;background:var(--card-2);border:1px solid var(--border-2);border-radius:var(--r-ctl);font-family:inherit;font-size:13.5px;color:var(--ink);max-height:120px;line-height:1.4} .wa-compose textarea:focus{outline:none;border-color:var(--brand)} /* тот же вид, что у .btn (основная кнопка страницы) — раньше был захардкожен белый текст, в тёмной теме на светлом --brand это читалось почти нечитаемо (контраст 2.35:1 вместо 8:1 у .btn) */ .wa-send{flex:none;background:var(--brand);color:var(--btn-fg);border:0;border-radius:var(--r-ctl);padding:10px 18px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--sh-1)} .wa-send:hover{background:var(--brand-deep)} .wa-send:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .wa-empty{flex:1;display:grid;place-items:center;color:var(--muted);text-align:center} /* QR экран */ .qr-wrap{display:grid;place-items:center;height:calc(100vh - 44px)} .qr-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:34px 40px;box-shadow:var(--sh-2);text-align:center;max-width:420px} .qr-card h2{margin:0 0 8px;font-size:20px} .qr-card p{color:var(--muted);font-size:13.5px;margin:0 0 22px} .qr-box{width:230px;height:230px;margin:0 auto 22px;border:1px solid var(--border);border-radius:12px;display:grid;place-items:center;background:#fff;position:relative;overflow:hidden} .qr-box svg{width:200px;height:200px} .qr-steps{text-align:left;font-size:13px;color:var(--muted);line-height:1.7;margin-top:6px} .qr-steps b{color:var(--ink);font-family:var(--f-num)} @media (max-width:820px){ .wa{grid-template-columns:1fr} .wa[data-view="chat"] .wa-list{display:none} .wa[data-view="list"] .wa-chat{display:none} } /* ═══════ модалка ═══════ */ .modal-bg{position:fixed;inset:0;background:rgba(16,24,40,.5);display:grid;place-items:center;z-index:100;padding:20px} html[data-theme="dark"] .modal-bg{background:rgba(0,0,0,.65)} .modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-2);width:760px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column} .modal-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)} .modal-h h2{margin:0;font-size:19px;font-weight:700} .modal-h .x{margin-left:auto;background:transparent;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 8px;border-radius:6px} .modal-h .x:hover{background:var(--card-2);color:var(--ink)} .modal-b{padding:18px 22px;overflow-y:auto} .modal-f{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end} .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} .fld label{display:block;font-size:12px;font-weight:600;color:var(--faint);margin-bottom:5px} .fld input,.fld select,.fld textarea{width:100%;padding:9px 12px;background:var(--card-2);border:1px solid var(--border-2);border-radius:var(--r-ctl);font-family:inherit;font-size:14px;color:var(--ink)} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .fld textarea{resize:vertical;min-height:52px} .items-h{display:flex;align-items:center;margin:6px 0 8px} .items-h b{font-size:14px} .items-h button{margin-left:auto;background:var(--brand-soft);color:var(--brand-deep);border:0;border-radius:8px;padding:6px 12px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer} .item{background:var(--card-2);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px;position:relative} .item .del-item{position:absolute;top:6px;right:6px;width:26px;height:26px;display:grid;place-items:center;padding:0; background:transparent;border:0;border-radius:7px;color:var(--faint);font-size:17px;cursor:pointer;line-height:1} .item .del-item:hover{color:var(--danger);background:var(--danger-soft)} .item .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .item .g4 .fld.wide{grid-column:1/-1} .btn-ghost{background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-ctl);padding:10px 16px;font-family:inherit;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer} .btn-ghost:hover{border-color:var(--ink);color:var(--ink)} .btn-ghost:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .modal .err{color:var(--danger);font-size:13px;margin-right:auto;align-self:center} /* поиск-выбор (магазин/город и т.п. — вводишь буквы, показывает совпадения) — вместо родного