/* Deliberately one small stylesheet, no framework, no build step. The panel is two screens for two people; a toolchain would cost more than it returns. */ :root{ /* Оттенки сняты со скриншота админки Shopify. Ключевое отличие от прежнего варианта: фон страницы СЕРЫЙ, карточки белые. На белом фоне белые карточки не читаются как отдельные блоки — именно поэтому у них там тень, а не рамка: тень отделяет, рамка обводит. */ --bg:#f1f1f1; /* фон страницы */ --surface:#fff; /* фон карточки */ --line:#e3e3e3; /* границы и разделители */ --fg:#303030; /* основной текст */ --dim:#616161; /* приглушённые подписи */ --acc:#005bd3; /* ссылки */ --warn:#4a2d00; --warnbg:#f8d6a4; --bad:#8e1f0b; --badbg:#fdd; --act:#0c5132; --actbg:#cdfee1; /* 🔴 «НУЖНО ДЕЙСТВИЕ» — ОТДЕЛЬНЫЙ ЦВЕТ, И ОН НЕ ЗЕЛЁНЫЙ. До 28.07.2026 плашка «Спор PayPal — ответить до 01.08.2026 09:59» красилась в --act, то есть в зелёный: имя переменной читалось как «action», а краска в ней лежала успеха. Срочное дело с дедлайном выглядело как «всё хорошо». Сам --act остаётся зелёным и остаётся на месте: им покрашены рост показателя и «доставлено» — там зелёный означает ровно то, что должен. От --bad отличается не краской, а весом и обводкой: «проигран» — это уже случившееся, «ответить до субботы» — то, что ещё можно изменить, и на экране оно обязано быть громче. */ --urge:#8e1f0b; --urgebg:#fdd; --urgeline:#e4a79a; /* ══ ЛЕСТНИЦА СВЕТЛОТЫ, СНЯТАЯ ПИПЕТКОЙ С SHOPIFY INBOX ═══════════════ Владелец обмерил образец; здесь она одним местом, и всё остальное выводится отсюда, а не подбирается по месту. 255 #ffffff поле переписки и список — самое светлое 250 #fafafa выбранный пункт меню (лежит на панели) 247 #f7f7f7 выбранная строка списка (лежит на белом) 244 #f4f4f4 облачко сообщения 241 #f1f1f1 строка в момент нажатия 235 #ebebeb фон левой панели — самое тёмное 🔴 ШАГ НЕ ОДИН И ТОТ ЖЕ — Я ПРОВЕРИЛ АРИФМЕТИКОЙ, ПРЕЖДЕ ЧЕМ ВЫВОДИТЬ ЗНАЧЕНИЯ ФОРМУЛОЙ. Владелец сказал «ровные ступени по четыре», но его же числа дают другое: 235 → 241 шаг 6 241 → 244 шаг 3 244 → 247 шаг 3 247 → 250 шаг 3 250 → 255 шаг 5 То есть ЧЕТЫРЕ СРЕДНИЕ ступени идут ровно по 3, а края шире: панель на 6 ниже нижней средней, белое на 5 выше верхней. Вывести все шесть из одного шага нельзя — четыре из шести уехали бы от замера. Поэтому значения остаются замеренными, а от разъезда их держит не формула, а ПРОВЕРКА (`test_the_ladder_keeps_its_measured_steps`): она знает и шаг середины, и ширину краёв, и скажет, какая именно ступень поехала. Формулу тоже можно переписать не глядя, а проверку — нет. 🔴 ПРАВИЛО ВЫДЕЛЕНИЯ, И ЗАПИСАНО ОНО ТАК, ЧТОБЫ ОБРАТНОЕ ИЗ НЕГО НЕ ВЫВЕЛОСЬ: выбранное отличается от СВОЕГО фона на один небольшой шаг светлоты — В ТУ СТОРОНУ, КУДА ЕСТЬ КУДА ШАГАТЬ. фон меню серый (235) → шагать есть куда к белому → выбранное 250 фон списка белый (255) → светлее некуда, шаг в серое → выбранное 247 🔴 «ВЫБРАННОЕ ВСЕГДА СВЕТЛЕЕ ФОНА» — НЕВЕРНО. Эта формулировка выведена из одного случая (меню) и на белом фоне даёт прямо противоположное указание. Оставлена здесь нарочно, зачёркнутой: следующий читатель наткнётся на меню, увидит 250 на 235 и выведет её заново, если не предупредить. 🔴 ШАГ МАЛЕНЬКИЙ — 8 ЕДИНИЦ НА БЕЛОМ, 15 НА ПАНЕЛИ, — ПОЭТОМУ ТОН НЕ ОДИН. Второй признак у выбранного свой: имя в строке жирнее (`.m9-sel .m9-who`), у пункта меню — тень, а нажатие отзывается тёмным и затухает. Тон подсказывает, вес и тень держат. */ --paper:#ffffff; /* поле переписки и список */ --pick-menu:#fafafa; /* выбранный пункт меню — на панели */ --pick-row:#f7f7f7; /* выбранная строка списка — на белом */ --bubble-bg:#f4f4f4; /* облачко сообщения */ --pressed:#f1f1f1; /* строка в момент нажатия */ --rail:#ebebeb; /* фон левой панели */ /* ══ ЦВЕТ ГОВОРИТ, ЧТО ЭТО ЗА ЗАПИСЬ. СТОРОНА ГОВОРИТ, ЧЬЯ ОНА ═════════ На вопрос «кто» отвечает СТОРОНА: клиент слева, мы справа. Цвет отвечает на «что это» — владелец просил читать смысл записи, не читая текст. 🔴 ПЕРЕСЧИТАНО 02.08.2026 ПОСЛЕ ПРИГОВОРА ВЛАДЕЛЬЦА: «читать облачка по цвету не достигнуто». Он прав, и вот чем я ошибся. Ночью я держал два правила разом: все пять тонов одной светлоты (243–244) и ни один не громче голубого (C* 6.5). Из этой пары следовало, что весь набор живёт в пятне шириной 6 единиц ΔE — то есть у самого порога различимости 2.3. Порог оказался мерой ЛАБОРАТОРНОЙ: он говорит, увидит ли человек разницу, если положить два образца рядом и всматриваться. Работа устроена иначе — взгляд скользит по ленте, и там нужен не порог, а ЗАПАС. 🔴 ЧТО ПРИШЛОСЬ ОТДАТЬ: ОДНУ СВЕТЛОТУ НА ВСЕХ. Красный не может быть одновременно светлым и насыщенным — при светлоте 243 канал R упирается в 255, и весь тон умещается в C* 6.5. Замер: в коридоре 238–246 при C* ≥ 8 во всём пространстве RGB нашлось ВСЕГО 37 красных. Значит выбор был не между «ярче» и «спокойнее», а между «читается» и «одна светлота». Владелец выбрал первое, и это верно: одинаковая светлота была средством, а различимость — целью. Серый и голубой НЕ ТРОНУТЫ — владелец назвал их правильными. 🔴 УБАВЛЕНО НА 8.5% ПО ЗАМЕЧАНИЮ ВЛАДЕЛЬЦА: «чуть-чуть перебрал с насыщенностью, может быть на 7-10% меньше». Взята середина названного. Убавлена ТОЛЬКО насыщенность — светлота у каждого тона своя и не тронута: на ней держится различимость при красно-зелёной слепоте. Запас теперь (ΔE, попарно): три событийных между собой минимум 21.4 (было 6.9, до убавления 23.2) серый ↔ салатовый 11.7 (было 6.4, до убавления 13.1) серый ↔ красный 21.4 серый ↔ жёлтый 24.4 серый ↔ голубой 6.5 ← не тронут, см. ниже 🔴 ЕДИНСТВЕННАЯ ТЕСНАЯ ПАРА — СЕРЫЙ И ГОЛУБОЙ, И ЭТО НЕ НЕДОРАБОТКА. Они оба из семейства РАЗГОВОРА и различаются вторым признаком, который сильнее цвета: стороной. Слова клиента всегда слева, наши всегда справа; спутать их нельзя, даже не различив оттенка. 🔴 ПОБОЧНАЯ ПРИБЫЛЬ: КРАСНО-ЗЕЛЁНАЯ СЛЕПОТА. Ночью салатовое и красноватое были для дейтеранопа неразличимы (ΔE 1.46 при пороге 2.3), и снятие полос оставило таких людей без признака вовсе. Теперь тона расходятся ещё и по светлоте, а её видят все: салатовое ↔ красное для дейтеранопа 11.6, жёлтое ↔ красное 16.4. Признак вернулся сам, без полос. */ --mine:#eaf4ff; /* наше письмо или SMS (не трогать) */ /* 🔴 ЧИСЛА C* ЗДЕСЬ — ЗАМЕРЕННЫЕ, А НЕ ЗАДУМАННЫЕ, и это поправка 02.08.2026. Стояли 12.8 / 26.1 / 19.2 — насыщенность ДО убавления на 8.5%; сами цвета давно убавлены, а подписи остались от прежних значений. Мелочь, но того же разряда, что совравшая шапка набора значков: по подписи потом отвечают на вопрос «какой у нас тон». Теперь их сходство с настоящим цветом стережёт `test_the_chroma_notes_match_the_colours`. */ --event-ok:#daf1e2; /* рядовое событие заказа (C* 11.3) */ --money-bg:#fae9bc; /* деньги: настоящий жёлтый, спокойный (C* 24.0) */ --event-bad:#f5c8c2; /* споры, отказы, возвраты (C* 17.5) */ /* 🔴 ВТОРОЙ ПОЛЮС: ТЕКСТ, КОТОРЫЙ ЧИТАЮТ. Лестница выше — про фоны, и все её ступени сидят в светлой полосе 235–255. Тексту письма место на другом конце, и он единственный, кому там место. Замер владельца по снимку: у Shopify самый тёмный пиксель текста сообщения — 69 из 255, у нас было 97. Бледное глаз читает как мелкое — отсюда и жалоба «мельче, чем у Shopify», хотя размер у нас даже больше (14px в переписке против 13px в списке). 🔴 ПОЧЕМУ БЫЛО 97, А НЕ 48. `.note-text` своего цвета не имел и наследовал его от общего класса `.note` (строка 330) — а тот заведён для мелких приглушённых подписей и красит в `--dim`. Совпадение имён: в ленте карточка письма это `li.note`, и правило для подписей накрывало текст письма. Теперь у текста письма цвет свой и названный. */ --ink:#454545; /* текст письма: 69 из 255, замер эталона */ /* 🔴 ВЫСОТА ШАПКИ КОЛОНКИ — ОДНА НА ВСЕ. Замер до правки: низ шапки списка на 87, низ шапки переписки на 96 — девять пикселей, и вместо одной линии через всю ширину видно два отрезка на разных уровнях. */ --head:52px; --radius:12px; /* 🔴 РАДИУС ОБЛАЧКА — ОДИН НА ВСЕ ТРИ ВИДА (клиент, мы, событие). Форма сама должна говорить «реплика», а не «прямоугольник со сбитыми углами»; и проставленный числом в трёх местах он разошёлся бы при первой правке. */ --bubble:14px; --shadow:0 1px 0 rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04); --pad:16px; } *{box-sizing:border-box} html,body{height:100%;overflow:hidden} /* 🔴 СТРАНИЦА — ВЕРТИКАЛЬНЫЙ FLEX, И НИКАКОЙ АРИФМЕТИКИ С ВЫСОТОЙ ШАПКИ. Было `calc(100vh - 41px)` у полосы колонок и у меню — то есть обещание, что шапка ровно 41px. Стоит шрифту или отступу в ней измениться на пару пикселей, и сумма «шапка + колонки» перестаёт совпадать с окном; разница вылезает полосой прокрутки у всей страницы, и ищут её потом долго. Теперь шапка занимает свою высоту сама, а полоса колонок берёт ОСТАТОК (`flex:1`). `min-height:0` при этом обязателен: без него элемент flex не даёт детям сжаться меньше содержимого, и высота вылезает наружу — ровно те два сантиметра, которые видно полосой справа. */ /* 🔴 ГАРНИТУРА — СИСТЕМНАЯ СТОПКА В ПОРЯДКЕ POLARIS, а не один шрифт. Текст рисуется РОДНЫМ шрифтом той машины, где открыт: на macOS `-apple-system`, на Windows `Segoe UI`, на Android `Roboto`. У нас первым стоял `Inter` — то есть на всех машинах рисовался один и тот же шрифт, и на владельческом маке он выглядел чужим среди системного окружения. Порядок взят у Polaris целиком, включая запасные. */ body{margin:0;font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Inter,"Helvetica Neue",Arial,sans-serif; color:var(--fg);background:#0a0a0a;display:flex;flex-direction:column} .maplink{margin:.15rem 0 .7rem} .maplink a{color:var(--acc);text-decoration:none} .maplink a:hover{text-decoration:underline} /* ── Тёмная полоса сверху ────────────────────────────────────────────────── Держится наверху при прокрутке: поиск нужен с любого экрана. Тёмная она не ради красоты — с меню слева и серым фоном страница получает рамку с трёх сторон и перестаёт выглядеть обрезанной. */ .topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem; padding:.45rem .8rem;background:#0a0a0a;color:#e3e3e3} .topbar .logo{color:#fff;font-weight:700;letter-spacing:.03em;text-decoration:none; flex:0 0 auto;padding-right:.4rem} .topbar .search{flex:1 1 auto;display:flex;justify-content:center} /* Место под общий поиск. Заглушка НЕ поле ввода: кликабельное поле, которое ничего не ищет, врало бы. Серая плашка говорит «здесь будет», и это правда. */ .topbar .search.slot{max-width:640px;margin:0 auto;padding:.32rem .7rem; color:#8a8a8a;background:#282828;border:1px solid #454545;border-radius:8px; width:100%;text-align:center;cursor:default;font-size:12px} .topbar .ro{margin-left:0;flex:0 0 auto;color:#c9c9c9;border-color:#4a4a4a} /* ── Меню слева ──────────────────────────────────────────────────────────── Фиксированная колонка, содержимое справа. Полоса не прокручивается вместе со страницей: разделов будет шесть с подпунктами, и терять их при прокрутке длинного списка заказов нельзя. */ .shell{display:flex;align-items:stretch;width:100%;max-width:100vw; flex:1 1 auto;min-height:0;background:var(--bg); border-radius:12px;margin:0;overflow:clip} /* 🔴 ФАЗА 9.1, ПУНКТ 3.1: ЗОН РОВНО ДВЕ. Серая — меню, белая — содержание. Тон панели снят пипеткой с Shopify Inbox: #ebebeb. Я до этого углублял его до #e6e6e6, чтобы белая плашка выделения отличалась сильнее, — замер эталона показал, что там панель светлее, а выделение НЕ белое (#fafafa), и разница между ними всего 15 из 255. Возвращаю замеренное. */ /* Меню тянется на всю высоту полосы колонок само (`align-items:stretch`) — ни своей высоты, ни `sticky` ему больше не нужно: страница не прокручивается вовсе, а прокрутка внутри меню осталась своя. */ .rail{flex:0 0 216px;width:216px;min-height:0; display:flex;flex-direction:column;gap:.15rem;padding:.7rem .55rem; background:var(--rail);border-right:1px solid #dcdcdc;overflow:auto} .rail .brand{display:block;font-weight:700;color:var(--fg);text-decoration:none; padding:.2rem .5rem .7rem;letter-spacing:.02em} .rail nav{display:flex;flex-direction:column;gap:.1rem} .rail .lnk{display:flex;align-items:center;gap:.55rem;padding:.34rem .5rem; border-radius:8px;color:var(--fg);text-decoration:none;font-weight:500} .rail a.lnk:hover{background:#dcdcdc} .rail .lnk.cur{background:var(--pick-menu);box-shadow:var(--shadow);font-weight:600} /* 🔴 ОТКРЫТАЯ ГРУППА И ВЫБРАННЫЙ ПУНКТ ОТМЕЧЕНЫ РАЗНЫМ. Заголовок группы не выбирается — ему достаётся только вес шрифта; плашка принадлежит пункту. Взять для группы плашку потише (второй оттенок) было нельзя: два светлых пятна подряд читаются как два выделения, а не как «главное и его часть», — именно это владелец и увидел после `420fbdf`. */ .rail .sect.on > .lnk{font-weight:600;color:#000} .rail .lnk.off{color:#8a8a8a;cursor:default} .rail .lnk.off .ic{opacity:.6} .rail .ic{width:16px;height:16px;flex:0 0 16px} .rail .cnt{margin-left:auto;font-weight:600;font-size:12px;color:var(--dim)} .rail .subs{display:flex;flex-direction:column;margin:.1rem 0 .3rem} .rail .subs a{padding:.24rem .5rem .24rem 2.1rem;border-radius:8px; color:var(--dim);text-decoration:none} .rail .subs a:hover{background:#dcdcdc} /* Папка выделяется ТОЙ ЖЕ белой плашкой, что и раздел: «Входящие» — такой же выбор, как «Сообщения клиентов», и выглядеть он обязан так же. Прежний #e4e4e4 отличался от фона меню на 7 из 255 и не читался вовсе. */ .rail .subs a.cur{color:var(--fg);font-weight:600;background:var(--pick-menu); box-shadow:var(--shadow)} .railhead{margin:.9rem .5rem .25rem;font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:#8a8a8a} .rail .bottom{margin-top:auto} .pane{flex:1 1 auto;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto; overscroll-behavior:contain} .ro{margin-left:auto;font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:.1rem .6rem} main{padding:var(--pad);max-width:none;min-width:0} @media (max-width:900px){ html,body{height:auto;overflow:auto} .shell{display:block} .shell{flex:0 1 auto;min-height:auto;overflow:visible} .rail{position:static;width:auto;height:auto;flex-direction:row;flex-wrap:wrap; align-items:center;border-right:none;border-bottom:1px solid #dcdcdc} .pane{height:auto;overflow:visible} .rail .subs{flex-direction:row} .rail .subs a{padding-left:.5rem} .railhead,.rail .bottom{display:none} } footer{padding:1rem var(--pad);color:var(--dim);font-size:12px;margin-top:2rem} h1{font-size:20px;font-weight:650;margin:.1rem 0 .4rem} h2{font-size:1.05rem;margin:1.6rem 0 .5rem} h3{font-size:.9rem;margin:0 0 .5rem;color:var(--dim);text-transform:uppercase;letter-spacing:.04em} .tiles{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0 1rem} .tile{border:none;border-radius:var(--radius);padding:.6rem 1rem;min-width:112px; background:var(--surface);box-shadow:var(--shadow)} .tile b{display:block;font-size:1.5rem;line-height:1.1} .tile span{color:var(--dim);font-size:12px} .tile.alarm{border-color:var(--bad)} /* Плитка «требуют внимания» — тем же цветом срочности, что и плашки. */ .tile.act{border-color:var(--urge);background:var(--urgebg)} .periods{display:flex;gap:.4rem;flex-wrap:wrap} .chip{padding:.15rem .7rem;border:1px solid var(--line);border-radius:99px;text-decoration:none;color:var(--dim);font-size:12px} .chip.on{background:var(--fg);color:#fff;border-color:var(--fg)} .filters{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.6rem 0} .filters input,.filters select{padding:.3rem .5rem;border:1px solid var(--line);border-radius:6px;font:inherit} /* Поля ввода остаются прямоугольными — они не кнопки; скругление отличает «нажать» от «вписать». */ .filters button{padding:.3rem .8rem;border:1px solid var(--line);border-radius:99px;font:inherit} .filters input[type=search]{min-width:280px} .filters button{background:var(--fg);color:#fff;border-color:var(--fg);cursor:pointer} .clear{color:var(--dim);font-size:12px} .found{color:var(--dim);margin:.4rem 0} .hint{color:var(--dim);font-size:12px;line-height:1.4;margin:.4rem 0} table.orders{border-collapse:collapse;width:100%;margin:.4rem 0} /* Список Shopify — белая поверхность на сером фоне, а не голая сетка. `separate` нужен, чтобы скругление не обрезалось collapse-моделью таблицы. */ table.orders.list{border-collapse:separate;border-spacing:0;background:var(--surface); border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} table.orders.list thead{background:#f7f7f7} table.orders.list tbody tr:last-child td{border-bottom:0} .list-tools{position:sticky;top:0;z-index:18;background:var(--bg); overflow:visible;padding:.1rem 0 .45rem; box-shadow:0 8px 10px -12px rgba(0,0,0,.55)} .orders-scroll{width:100%;overflow-x:hidden} .orders-scroll table.orders.list{width:100%;min-width:0;table-layout:fixed} table.orders.list th,table.orders.list td{overflow:hidden;text-overflow:ellipsis} table.orders.list .select-col{width:34px;min-width:34px;max-width:34px;text-align:center;padding-left:.45rem;padding-right:.2rem} table.orders.list th:nth-child(2){width:88px} table.orders.list td.ordcell{overflow:visible;text-overflow:clip} table.orders.list th:nth-child(3){width:82px} table.orders.list th:nth-child(4){width:58px} table.orders.list th:nth-child(5){width:105px} table.orders.list th:nth-child(6){width:92px} table.orders.list th:nth-child(7){width:142px} table.orders.list th:nth-child(8){width:120px} table.orders.list th:nth-child(9){width:155px} table.orders.list th:nth-child(10){width:54px} table.orders.list th:nth-child(11){width:110px} table.orders.list th:nth-child(13){width:95px} table.orders.list th:nth-child(14){width:125px} /* Последняя колонка содержит не число, а результат возврата. 74 px обрезали плашку до нескольких букв; резервируем ей рабочую ширину. */ table.orders.list th:nth-child(16){width:150px} table.orders.list .shipping-col{width:145px;min-width:0;max-width:145px} table.orders.list td.shipping-col{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Длинный дедлайн спора не имеет права определять ширину всего списка. Shopify оставляет служебные статусы компактными: здесь плашка переносится внутри своей колонки, а остальная таблица сохраняет рабочую ширину. */ table.orders.list .dispute-col{width:185px;min-width:0;max-width:185px} table.orders.list td.dispute-col{position:relative;overflow:visible;white-space:nowrap} table.orders.list .dispute-col .tag{display:block;width:100%;max-width:100%; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5; padding:2px 7px;vertical-align:top} /* Полный текст открывается поверх соседних колонок, а не растягивает строку. Справа места нет, поэтому плашка раскрывается влево от своего края. */ table.orders.list .dispute-col .tag:hover, table.orders.list .dispute-col .tag:focus{position:absolute;z-index:25;right:.45rem;top:.22rem; width:max-content;max-width:360px;white-space:normal;overflow:visible;text-overflow:clip; outline:none;box-shadow:0 4px 14px rgba(0,0,0,.18)} /* Возврат в последней колонке ведёт себя так же: строку не расширяет, но при наведении раскрывает всю формулировку и сумму поверх таблицы влево. */ table.orders.list td.money-col{position:relative;overflow:visible;white-space:nowrap} table.orders.list .money-col .tag{display:block;width:100%;max-width:100%; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5; padding:2px 7px;vertical-align:top} table.orders.list .money-col .tag:hover, table.orders.list .money-col .tag:focus{position:absolute;z-index:25;right:.45rem;top:.22rem; width:max-content;max-width:360px;white-space:normal;overflow:visible;text-overflow:clip; outline:none;box-shadow:0 4px 14px rgba(0,0,0,.18)} /* «Деньги возвращены» не сокращаем до двусмысленного «Возвращено». В таблице чип остаётся компактным, а полный текст открывается поверх соседней ячейки при наведении или фокусе — так же, как чип спора. */ table.orders.list .financial-col{width:165px;min-width:165px;max-width:165px} table.orders.list td.financial-col{position:relative;overflow:visible;white-space:nowrap} table.orders.list .financial-col .pill{display:block;max-width:100%;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} table.orders.list .financial-col .pill:hover, table.orders.list .financial-col .pill:focus{position:absolute;z-index:25;left:.45rem;top:.22rem; width:max-content;max-width:260px;overflow:visible;text-overflow:clip;outline:none; box-shadow:0 4px 14px rgba(0,0,0,.18)} table.orders th{text-align:left;font-size:12px;color:var(--dim);font-weight:600;border-bottom:1px solid var(--line);padding:.35rem .5rem} table.orders th a{color:inherit;text-decoration:none} table.orders td{padding:.35rem .5rem;border-bottom:1px solid var(--line);vertical-align:top} table.orders tr:hover td{background:#fafafa} td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} /* 🔴 ЗАГОЛОВОК ВЫРАВНИВАЕТСЯ ТАК ЖЕ, КАК КОЛОНКА. Числа стояли по правому краю, а их заголовки — по левому, и при разной ширине колонок «19%» оказывалось не под «ставка», а сумма не под «сумма». Одно правило на все таблицы: класс колонки задаётся на th И на td, выравнивание берётся из него, а не из типа ячейки. */ /* 🔴 СПЕЦИФИЧНОСТЬ, А НЕ ПОРЯДОК. Здесь стояло `th.num{text-align:right}` — и не работало: селектор `table.orders th` выше весом (класс + два типа против класса + один), поэтому заголовки оставались по левому краю, сколько их ни помечай классом. Правку заметил владелец на таблице налогов. Селектор ниже специфичнее обоих, и теперь класс колонки действительно решает. */ table.orders th.num,table.sums th.num,table.calc th.num,th.num{text-align:right} table.orders th.mid,th.mid,td.mid{text-align:center} /* Ширины фиксированные: иначе колонка «кто платит» с длинной подписью тянет на себя место, и числовые колонки съезжают от строки к строке. */ table.fixed{table-layout:fixed} table.fixed td,table.fixed th{overflow-wrap:anywhere} td a{color:var(--acc);text-decoration:none} .empty{color:var(--dim);padding:.6rem 0} .dim{color:var(--dim)} .tag{display:inline-block;font-size:12px;line-height:20px;padding:0 8px;border-radius:8px; background:#ebebeb;color:var(--dim);white-space:nowrap;margin-right:.25rem} .tag.warn{background:var(--warnbg);color:var(--warn)} /* Пометка владельца о закупке. Стоит НАД списком полей площадки и заметнее их: остальные шесть — служебные даты площадки, а эта строка написана человеком и связывает заказ с покупкой у поставщика. Перенос разрешён: встречается «USA Bosch 4085277042» и длиннее. */ .privnote{margin:.2rem 0 .7rem;line-height:1.5;overflow-wrap:anywhere} .tag.bad{background:var(--badbg);color:var(--bad)} .tag.act{background:var(--urgebg);color:var(--urge);font-weight:600; box-shadow:inset 0 0 0 1px var(--urgeline)} .group{margin:var(--pad) 0;border:none;border-radius:var(--radius); padding:var(--pad);background:var(--surface);box-shadow:var(--shadow)} .group h2{margin:0 0 .3rem;display:flex;align-items:center;gap:.6rem} .count{font-size:12px;background:#f3f4f6;border-radius:99px;padding:.05rem .6rem;color:var(--dim)} .count.alarm{background:var(--badbg);color:var(--bad);font-weight:700} .sum{font-size:12px;color:var(--dim);margin-left:auto} .note{color:var(--dim);font-size:12px;margin:.2rem 0 .6rem} details.secondary{margin-top:.6rem} details.secondary summary{cursor:pointer;color:var(--dim);font-size:12px} table.dim td{color:var(--dim)} .cards{display:flex;gap:.8rem;flex-wrap:wrap} .card{border:none;border-radius:var(--radius);padding:var(--pad);min-width:270px; flex:1;background:var(--surface);box-shadow:var(--shadow)} .card.money{min-width:340px} dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem .8rem;margin:0} dt{color:var(--dim)} dd{margin:0;text-align:right;font-variant-numeric:tabular-nums} dt.sep,dd.sep{border-top:1px solid var(--line);padding-top:.3rem;margin-top:.3rem} dt.bad,dd.bad{color:var(--bad)} .card button{padding:.3rem .8rem;border:1px solid var(--line);background:#fff;border-radius:99px;cursor:pointer;font:inherit} .alarm-box{background:var(--badbg);color:var(--bad);border-radius:6px;padding:.4rem .6rem;font-size:12px;margin:.5rem 0 0} .timeline{list-style:none;padding:0;margin:.4rem 0;border-left:2px solid var(--line)} .timeline li{padding:.15rem 0 .15rem .8rem;font-size:13px} .timeline li.crit{border-left:2px solid var(--bad);margin-left:-2px} .timeline .when{color:var(--dim);font-variant-numeric:tabular-nums;margin-right:.6rem} .pager{display:flex;gap:1rem;align-items:center;color:var(--dim);margin:.8rem 0} .timeline li.note{border-left:3px solid var(--acc);margin-left:-2px;background:#f5f8ff; padding:.35rem .6rem;border-radius:0 6px 6px 0;margin-top:.3rem;margin-bottom:.3rem} .note-text{white-space:pre-wrap;margin-top:.15rem;font-size:14px;color:var(--ink)} .ev-text{color:var(--dim);font-size:12px;margin-top:.05rem} .card.wide{flex:1 1 100%} .message-box{position:relative;overflow:hidden} .message-box::before{content:"";position:absolute;inset:0 auto 0 0;width:4px} .message-box h2{margin-bottom:.55rem} .message-box p{margin:0;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere} .customer-message::before{background:#f8d6a4} .seller-message::before{background:#f8eb78} .shipment-actions{display:flex;justify-content:flex-end;gap:.5rem; border-top:1px solid var(--line);margin-top:.8rem;padding-top:.65rem} .shipment-actions button{border-radius:8px;padding:.42rem .75rem;font:inherit; font-size:12px;font-weight:600} .shipment-actions .secondary{border:1px solid #c9cccf;background:#fff;color:#303030} .shipment-actions .primary{border:1px solid #1f1f1f;background:#303030;color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)} .shipment-actions button:disabled{cursor:not-allowed;opacity:.58} table.calc{border-collapse:collapse;width:100%;margin:.3rem 0 .8rem;font-variant-numeric:tabular-nums} table.calc td{padding:.18rem .5rem;vertical-align:top;border-bottom:1px solid #f0f2f4} table.calc td.op{width:1.2rem;color:var(--dim);text-align:center} table.calc td.when{width:6.5rem;color:var(--dim);white-space:nowrap} table.calc td.num{text-align:right;white-space:nowrap;width:9rem} table.calc td.why{color:var(--dim);font-size:12px;width:45%} table.calc tr.sub td{color:var(--dim);padding-left:1.4rem} table.calc tr.rule td{border-top:2px solid var(--fg);border-bottom:none;padding-top:.3rem} table.calc tr.warnrow td{background:var(--warnbg)} table.calc tr.dimrow td{color:var(--dim)} table.calc td.bad{color:var(--bad)} h4{margin:1rem 0 .2rem;font-size:.85rem;color:var(--dim);text-transform:uppercase;letter-spacing:.04em} /* ── Карточка заказа: раскладка Shopify ── */ .ordhead{display:flex;align-items:flex-start;gap:1rem;margin:0 0 1rem; padding:.55rem .75rem;background:var(--surface);border-radius:var(--radius); box-shadow:var(--shadow)} .ordhead h1{margin:0 0 .3rem} .ordhead .sub{color:var(--dim);font-size:12px;margin:.35rem 0 0} .ordhead .acts{margin-left:auto} .band{padding:10px 14px;border-radius:8px;margin:0 0 14px;font-size:13px; line-height:1.45} .band.bad{background:var(--badbg);color:var(--bad)} .band.warn{background:var(--warnbg);color:var(--warn)} .band code{background:rgba(0,0,0,.06);padding:0 4px;border-radius:4px} .pills{display:flex;gap:.4rem;flex-wrap:wrap} .pill{font-size:12px;line-height:20px;padding:0 8px;border-radius:8px;font-weight:550; white-space:nowrap;display:inline-flex;align-items:center;gap:5px} .pill::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor; opacity:.85;flex:0 0 8px} /* pill-ok/wait/hold — прежняя схема цветов «по статусу»; заменена на схему «по состоянию посылки» (pill-grey/yellow/amber/red ниже). Оставлены пустыми намеренно НЕ были: классы удалены, чтобы старая разметка не могла тихо продолжить работать с прежними цветами. */ .pill-bad{background:var(--badbg);color:var(--bad)} /* Класс называется -act, потому что означает «нужно действие». Краска в нём теперь срочная, а не успешная. */ .pill-act{background:var(--urgebg);color:var(--urge);font-weight:600; box-shadow:inset 0 0 0 1px var(--urgeline)} /* ── Три колонки ─────────────────────────────────────────────────────────── Центр сузился намеренно: на широком центре между подписью и суммой копилась пустота, и блок сумм переставал читаться как единое целое. Освободившееся место ушло вправо — во вторую боковую колонку, где живёт доставка. */ .grid{display:flex;gap:.75rem;align-items:flex-start;flex-wrap:wrap;min-width:0;max-width:100%} /* При изменении доступной ширины растёт вся центральная колонка вместе с карточками и суммами внутри неё. */ .main{flex:1 1 620px;min-width:0} .side{flex:1 1 290px;min-width:260px;max-width:340px} .box{border:none;border-radius:var(--radius);padding:var(--pad); margin-bottom:var(--pad);background:var(--surface);box-shadow:var(--shadow);min-width:0} .box h2{margin:0 0 .75rem;font-size:14px;font-weight:650; display:flex;align-items:center;gap:.5rem} h3.day{font-size:.8rem;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;margin:1rem 0 .3rem} ul.items{list-style:none;padding:0;margin:0} ul.items li{display:flex;gap:.7rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line)} ul.items li:last-child{border-bottom:none} .thumb{width:40px;height:40px;flex:0 0 40px;border:1px solid var(--line);border-radius:8px; display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fafbfc} .thumb img{max-width:100%;max-height:100%;object-fit:contain} .nothumb{font-size:9px;color:var(--dim);text-align:center;line-height:1.1} ul.items .what{flex:1;min-width:0} ul.items .name{font-weight:500} .itemweight{font-size:12px;color:var(--dim);margin-top:.15rem} /* Закупка стоит рядом с весом и такого же роста: это справка о позиции, а не сумма к оплате. `.dim` целиком — когда данных нет. */ .itemcost{font-size:12px;color:var(--fg);margin-top:.15rem} /* Расхождение оценки со счётом — сигнал к действию, а не справка: сама сумма красная, иначе взгляд цепляется за кружок и проходит мимо числа. */ .sums .diffbad{color:var(--bad)} /* 🔴 Группирующей заливки у трёх строк доставки НЕТ — решение владельца 31.07.2026: порядок строк сам говорит, что это единый блок, а заливка в этой таблице уже значит «итог» (.tot), и второй фон спорил бы с первым. */ /* Отметка «доставлено» со слов человека. Раскрывается по нажатию: обычно она не нужна, а постоянно открытая форма рядом с историей перевозчика читается как приглашение спорить с ним. */ .markdelivered{margin:.4rem 0} .markdelivered summary{cursor:pointer;color:var(--link);font-size:13px} .markdelivered form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin-top:.5rem} .markdelivered label{display:flex;flex-direction:column;font-size:12px;color:var(--dim);gap:.2rem} .markdelivered input[type=text]{min-width:22rem} .inlineform{display:inline} .itemcost.dim{color:var(--dim)} .parcelweight{margin:.7rem 0 0;padding-top:.6rem;border-top:1px solid var(--line); font-variant-numeric:tabular-nums} .parcelmeta{display:flex;flex-direction:column;gap:.12rem;margin:.2rem 0 .7rem; font-size:12px;font-variant-numeric:tabular-nums} ul.items .qty{white-space:nowrap;font-size:12px} ul.items .num{width:11rem;text-align:right;font-variant-numeric:tabular-nums; white-space:nowrap} /* 🔴 Нетто СВОЕЙ СТРОКОЙ. Инлайновая вторая величина слипалась с итогом: «94.66 EUR75.73 EUR без VAT (25%, SE)». Блок разрывает строку сам, не полагаясь на пробел, а nowrap не даёт «(25%, SE)» уехать на третью. */ /* 🔴 `display` ЗДЕСЬ БОЛЬШЕ НЕ НАЗЫВАЕТСЯ, И ЭТО ПОЧИНКА, А НЕ УБОРКА. Правило старше пометки «без VAT» и перебивало её раскладку по весу селектора: флекс не применялся, зазор между словами и числом исчезал, и на экране выходило «без VAT8.33 EUR». Раскладка у всех трёх мест одна и живёт в `.net` ниже — здесь остаются только шрифт и отступ. */ ul.items .num .net{font-size:12px;color:var(--dim);font-weight:400; margin-top:2px;white-space:nowrap} ul.tl{list-style:none;padding:0;margin:0 0 .4rem} ul.tl li.sys{display:flex;gap:.6rem;align-items:baseline;padding:.2rem 0} ul.tl li.sys .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:0 0 7px;margin-top:.45rem} ul.tl li.sys.crit .dot{background:var(--bad)} ul.tl li.sys .time{margin-left:auto;font-size:12px;white-space:nowrap} ul.tl li.note{display:flex;gap:.6rem;border:1px solid var(--acc);background:#f5f8ff; border-radius:var(--bubble);padding:.5rem .7rem;margin:.4rem 0} .ava{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--acc);color:#fff; display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700} .who{font-weight:600;margin:0 0 .2rem} dl.contact{grid-template-columns:auto 1fr;font-size:13px;margin-top:.5rem} dl.contact dd{text-align:right;overflow-wrap:break-word} p.addr{line-height:1.45;margin:0} /* ── Ближе к Shopify: три столбца в оплате, подзаголовки в правой колонке ── */ .boxhead{margin-bottom:.7rem} table.pay{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} table.pay td{padding:.3rem 0;vertical-align:top} table.pay td.k{width:9rem;color:var(--fg)} table.pay td.d{color:var(--dim);font-size:13px} table.pay td.v{text-align:right;white-space:nowrap;width:11rem} table.pay tr.tot td{font-weight:600;border-top:1px solid var(--line);padding-top:.5rem} table.pay tbody.paid td{border-top:1px solid var(--line);padding-top:.5rem} table.pay tr.warnrow td{background:var(--warnbg)} h3.sh{font-size:13px;font-weight:600;color:var(--fg);text-transform:none;letter-spacing:0;margin:1rem 0 .3rem} .side p{margin:.15rem 0} .side p.link{color:var(--acc)} .side p.small{font-size:12px} .customer-orders-link{color:var(--acc);text-decoration:none} .customer-orders-link:hover{text-decoration:underline} .riskbar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin:.4rem 0 .3rem} .riskbar i{display:block;height:100%;border-radius:99px} .riskbar i.l0{width:33%;background:#0f9d58} .riskbar i.l1{width:66%;background:#e8a33d} .riskbar i.l2{width:100%;background:var(--bad)} .risklabels{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)} .risklabels .on{color:var(--fg);font-weight:600} .ev-ru{font-size:13px;margin-top:.05rem} .ev-text{color:var(--dim);font-size:12px;margin-top:.05rem} .switches{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} .seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden} .seg a{padding:.1rem .6rem;color:var(--dim);text-decoration:none;font-size:12px} .seg a.on{background:var(--fg);color:#fff} .ways{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem} /* 🔴 ОДНА ФОРМА НА ВСЕ КНОПКИ ДЕЙСТВИЯ. Скруглённая — она уже была у «Позвонить», и рядом с прямоугольными это выглядело как две разные породы кнопок. Селектор перечисляет ОБА вида (ссылка и button), потому что «Позвонить» — ссылка tel:, а остальные — кнопки формы. */ a.way,button.way{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:.1rem .6rem; color:var(--acc);text-decoration:none} a.way:hover{border-color:var(--acc)} .grid{--mainw:620px} .dragger{position:relative;align-self:stretch;flex:0 0 0;width:0; margin-inline:-6px;cursor:col-resize;touch-action:none;z-index:4} .dragger::before{content:"";position:absolute;inset-block:0;left:3px;width:6px; border-radius:99px;background:transparent} .dragger:hover::before,.dragger.moving::before{background:#c7c7c7} body.resizing-order{cursor:col-resize;user-select:none} /* Шапка заказа стоит на сером фоне, поэтому карточкой не оформляется. */ .ordhead{background:transparent;padding:0 0 .2rem} .side .box,.main .box{overflow:hidden} table.pay td,table.calc td{font-size:13px} table.calc td.why,table.pay td.d{font-size:12px} /* 🔴 РАМКА СТАЛА ЗАЛИВКОЙ. Обводка убрана, а её тон (`--line`) перешёл в фон всей карточки: получается бежевое поле — то же, к чему пришёл Shopify со своими облачками. Новых цветов не заведено ни одного, тон взят ровно тот, что был у рамки. 🔴 ТРИ УРОВНЯ, А НЕ ДВА ПЯТНА. Колонка переписки белая, карточка письма `--line`, цитата и оригинал внутри неё `--bg` — три различимых тона. «Фон в фоне» владелец уже ловил однажды, и повторять это нельзя. */ /* 🔴 ТОНА ПЕРЕБРАНЫ 01.08.2026. Сначала облачко залили тоном бывшей рамки (`--line`), и владелец сверился со Shopify: там облачко клиента — очень светлый серый на белом, «буквально на грани», читается формой и отступом, а не цветом. У нас выходило заметно темнее. 🔴 И УРОВНЕЙ СТАЛО ДВА, А НЕ ТРИ. Прежде облачко было тёмным (`--line`), а оригинал внутри — светлым окошком; владелец предложил взять ИМЕННО ЭТОТ светлый тон на всё облачко, а внутри разделять линией. Одно решение снимает сразу две жалобы: «облачко слишком тёмное» и «окно в окне». колонка переписки — `--surface` #fff, облачко письма — `--bg` #f1f1f1 (на грани, как просили), внутри облачка — ЛИНИЯ `--line`, а не заливка. Ни одного нового цвета не заведено. */ ul.tl li.note{border:0;background:var(--bubble-bg);box-shadow:none} /* Бирка внутри карточки была #ebebeb — на бежевом это тот же тон, и она растворилась бы. Белая читается и не спорит с текстом. */ li.note .tag{background:var(--surface)} /* 🔴 НИТЬ С ТОЧКАМИ. У Shopify события нанизаны на вертикальную линию, и она же держит взгляд при прокрутке длинной ленты. Точка «прокалывает» линию кольцом цвета фона — иначе линия проходит сквозь неё и точка теряется. Кольцо красится в --bg, потому что лента лежит на сером фоне страницы; в белой карточке (лента пути) этой нити нет вовсе. */ .tlwrap ul.tl{position:relative;padding-left:0} /* Нить темнее --line: та рисовалась на белом фоне карточек, а здесь фон серый, и #e3e3e3 на #f1f1f1 не видно вовсе — линия была, но её не было на экране. */ .tlwrap ul.tl::before{content:none} .tlwrap ul.tl li.sys{padding:.35rem 0;position:relative} .tlwrap ul.tl li.sys .dot{background:#b5b5b5;box-shadow:0 0 0 3px var(--bg)} .tlwrap ul.tl li.sys.crit .dot{background:var(--bad)} /* Наша запись — белая карточка поверх нити: она наша, и это видно без подписи. */ .tlwrap ul.tl li.note{position:relative;margin-left:0} /* Дата стоит над колонкой ТЕКСТА, а не над точками: точки образуют нить, и вклинившийся в неё заголовок читается как ещё одно событие. */ .tlwrap h3.day{margin:1.1rem 0 .35rem;padding-left:calc(7px + .6rem)} /* ── Блоки сумм. Ширина ограничена намеренно ──────────────────────────────── Проблема была не в колонках, а в ширине: при растяжении на всю центральную колонку между пояснением и суммой копится пустота, и строка перестаёт читаться как одно целое. Ограничение ширины лечит это без перестройки. */ table.sums{width:100%;max-width:none;border-collapse:collapse; font-variant-numeric:tabular-nums} table.sums td{padding:.35rem .5rem .35rem 0;vertical-align:baseline; border-bottom:1px solid var(--line)} table.sums td.op{width:1rem;color:var(--dim);text-align:center;padding-right:.4rem} table.sums td.when{width:6rem;color:var(--dim);white-space:nowrap;font-size:12px} /* Название не переносится, пояснение стоит вплотную за ним и забирает остаток. */ table.sums td.k{white-space:nowrap} table.sums td.d{width:100%;color:var(--dim);font-size:12px;padding-left:.6rem} table.sums td.v{text-align:right;white-space:nowrap;padding-right:0} /* Итог: отделён отступом и весом, а не только линией. */ table.sums tr.tot td{border-top:1px solid var(--fg);border-bottom:none; padding-top:.6rem;font-weight:650} table.sums tr.sub td.k{padding-left:1.2rem;color:var(--dim)} table.sums tr.sub td{border-bottom:none} /* Длинное объяснение — строкой под числами, чтобы не растягивать их. */ table.sums tr.why td{color:var(--dim);font-size:12px;padding:.1rem 0 .5rem; border-bottom:1px solid var(--line);line-height:1.35} table.sums tr.warnrow td{background:var(--warnbg)} table.sums tr.dimrow td{color:var(--dim)} table.sums td.bad{color:var(--bad)} table.sums tbody.paid td{border-top:1px solid var(--line);padding-top:.5rem} /* ── Фильтр списка: один вход вместо ряда выпадающих ──────────────────────── Раскрытие на
, выбор — ссылками. Меню позиционируется абсолютно, поэтому оно накрывает таблицу, а не раздвигает её: раздвигание сбивало бы строку, на которую человек смотрел. */ .filterbar{display:flex;gap:.5rem;align-items:center;margin:.6rem 0;flex-wrap:wrap} .quickbar{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin:.25rem 0 .45rem} .quickbar>.quick{margin:0;display:flex;gap:.35rem;align-items:center;flex-wrap:wrap} .quickbar>.chips{flex-basis:100%;margin:.1rem 0} .filterbar details,.quickbar details.fieldpick{position:relative} .filterbar .all-orders{display:inline-flex;align-items:center;padding:.32rem .8rem; background:var(--surface);border:1px solid var(--line);border-radius:8px; box-shadow:var(--shadow);color:var(--fg);text-decoration:none;white-space:nowrap} .filterbar .all-orders:hover{border-color:var(--acc)} .filterbar summary,.quickbar summary{list-style:none;cursor:pointer;padding:.32rem .8rem; background:var(--surface);border:1px solid var(--line);border-radius:8px; box-shadow:var(--shadow);white-space:nowrap} .filterbar summary::-webkit-details-marker,.quickbar summary::-webkit-details-marker{display:none} .filterbar details[open]>summary,.quickbar details[open]>summary{border-color:var(--acc)} .filterbar .menu,.quickbar .menu{position:absolute;z-index:80;top:calc(100% + 4px);left:0; min-width:270px;max-height:60vh;overflow:auto;padding:.35rem; background:var(--surface);border:1px solid var(--line);border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.14)} .filterbar .menu>a,.filterbar .vals a,.quickbar .menu>a,.quickbar .vals a{display:block;padding:.3rem .6rem; border-radius:6px;color:var(--fg);text-decoration:none} .filterbar .menu>a:hover,.filterbar .vals a:hover,.quickbar .menu>a:hover,.quickbar .vals a:hover{background:#f1f1f1} .filterbar .menu .off,.quickbar .menu .off{display:block;padding:.3rem .6rem;color:#8a8a8a;font-size:12px} .filterbar details.one>summary,.quickbar details.one>summary{border:none;box-shadow:none;background:transparent; padding:.3rem .6rem;border-radius:6px} .filterbar details.one>summary:hover,.quickbar details.one>summary:hover{background:#f1f1f1} .filterbar details.one[open]>summary,.quickbar details.one[open]>summary{font-weight:600} .filterbar .vals,.quickbar .vals{padding:.1rem 0 .3rem .8rem} .filterbar .vals .dim,.quickbar .vals .dim{font-size:12px} .filterbar .dates,.quickbar .dates{display:flex;gap:.3rem;padding:.2rem .6rem;flex-wrap:wrap} .filterbar .dates input,.filterbar .dates button,.quickbar .dates input,.quickbar .dates button{padding:.25rem .4rem;font:inherit; border:1px solid var(--line);border-radius:6px} .filterbar .dates button,.quickbar .dates button{background:var(--fg);color:#fff;border-color:var(--fg);cursor:pointer; border-radius:99px;padding:.25rem .8rem} .filterbar .listsearch{flex:1 1 240px;display:flex} .filterbar .listsearch input{width:100%;padding:.32rem .7rem;font:inherit; border:1px solid var(--line);border-radius:8px;background:var(--surface)} /* Выбранные фильтры — таблетками, каждую можно снять по отдельности. */ .chips{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.3rem 0 .6rem} .chosen{display:inline-flex;gap:.4rem;align-items:center;font-size:12px; background:#e3e3e3;border-radius:8px;padding:.12rem .5rem} .chosen a{color:var(--dim);text-decoration:none;font-weight:700} .chosen a:hover{color:var(--bad)} /* Отменённый заказ зачёркнут насквозь — приём из админки Shopify. Он остаётся в списке (его всё ещё ищут по номеру), но недействительность видна раньше, чем читается статус. Цветом это не передать: серый у нас значит «неважно». */ table.list tr.void td{text-decoration:line-through;color:#8a8a8a} table.list tr.void td .tag{text-decoration:none} table.list td{white-space:nowrap} table.list td.ordcell{white-space:nowrap} .note-ic{color:var(--dim);font-size:12px} /* 🔴 .tag.ship УДАЛЁН 28.07.2026: синий на «в пути» не означал ни действия, ни его отсутствия, а был четвёртым цветом в палитре из трёх. */ /* ── Полоса показателей ──────────────────────────────────────────────────── Одна карточка, ячейки разделены тонкими линиями — как в админке Shopify. Прокручивается по горизонтали ВНУТРИ себя: на узком экране показатели должны уезжать вбок, а не ломать страницу. */ .strip{display:block;position:relative;margin:.2rem 0 .8rem; background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)} /* Атрибут hidden ставит крестик. Явный display:block выше не должен его перебивать: иначе состояние сохранялось, но полоса визуально оставалась. */ .strip[hidden]{display:none} .strip-show{margin:.2rem 0 .8rem;padding:.35rem .7rem;border:1px solid var(--line); border-radius:8px;background:var(--surface);color:var(--dim);font:inherit;cursor:pointer} .orders-actions .strip-show{margin:0} .strip-main{display:flex;align-items:stretch;overflow-x:auto} .strip-note{margin:0;padding:.4rem .8rem .5rem;border-top:1px solid var(--line); color:var(--dim);font-size:11px;line-height:1.35} .strip .period{display:flex;flex-direction:column;justify-content:center;gap:.15rem; padding:.5rem .8rem;border-right:1px solid var(--line);flex:0 0 auto} .mgroup{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap; padding:0 0 .4rem;border-left:2px solid var(--line);padding-left:.9rem;margin-right:.4rem} .mgroup .gtitle{font-size:11px;text-transform:uppercase;letter-spacing:.06em; color:var(--dim);width:100%;margin-bottom:-.2rem} .mhint{font-size:11px;color:var(--dim);max-width:15rem;line-height:1.3;margin-top:2px} .strip .period a{color:var(--dim);text-decoration:none;font-size:12px; padding:.05rem .4rem;border-radius:6px} .strip .period a.on{background:var(--fg);color:#fff} .metric{flex:1 1 0;min-width:170px;padding:.55rem .9rem;border-right:1px solid var(--line)} .metric[role=button]{cursor:zoom-in;border-radius:8px;transition:background .12s} /* 🔴 `outline:none` ЗДЕСЬ БЫЛ НАСТОЯЩИМ ДЕФЕКТОМ: показатель на главной доступен с клавиатуры, и обведение фокуса ему снимали совсем — то есть человек, идущий табом, не видел, где он. Осталась только подсветка фона. */ .metric[role=button]:hover,.metric[role=button]:focus-visible{background:#f5f7f9} .metric:last-child{border-right:none} .mlabel{color:var(--fg);font-weight:600;font-size:12px;margin-bottom:.2rem} .mrow{display:flex;align-items:center;gap:.5rem} .mrow b{font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums} .mdelta{font-size:12px;white-space:nowrap} .mdelta.up{color:var(--act)} .mdelta.down{color:var(--bad)} .mprev{margin-top:.12rem;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums} .mprev b{color:var(--fg);font-weight:600} .spark{flex:1 1 auto;min-width:48px;height:24px} .spark polyline{fill:none;stroke:#3b8ce8;stroke-width:1.4;vector-effect:non-scaling-stroke} .spark polyline.previous{stroke:#aeb7c2;stroke-width:1;stroke-dasharray:3 2} .metric-dialog{width:min(920px,calc(100vw - 32px));padding:0;border:0;border-radius:14px; color:var(--fg);background:var(--surface);box-shadow:0 18px 60px rgba(0,0,0,.3)} .metric-dialog::backdrop{background:rgba(0,0,0,.46)} .metric-dialog-head{display:flex;align-items:center;justify-content:space-between; padding:.9rem 1.1rem;background:#f1f1f1;border-bottom:1px solid var(--line)} .metric-dialog-head h2{margin:0;font-size:16px;text-transform:none;letter-spacing:0;color:var(--fg)} .metric-dialog-head button{width:28px;height:28px;padding:0;border:0;border-radius:7px; background:#dedede;color:var(--dim);font-size:19px;cursor:pointer} .metric-dialog-values{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 1.1rem 0} .metric-dialog-values>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:.5rem;padding:.7rem .8rem;border-radius:9px;background:#f5f5f5} .metric-dialog-values span{color:var(--dim);font-size:12px} .metric-dialog-values b{font-size:16px;font-variant-numeric:tabular-nums} .legend{display:block;width:18px;height:3px;border-radius:3px;background:#3b8ce8} .legend.previous{height:0;border-top:2px dashed #9ca7b4;background:transparent} .metric-chart{display:block;width:calc(100% - 2.2rem);height:320px;margin:1rem 1.1rem 1.2rem; border:1px solid var(--line);border-radius:9px;background:repeating-linear-gradient(to bottom,#fff 0,#fff 63px,#eceff2 64px)} .metric-chart polyline{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round} .metric-chart .current{stroke:#2383e2;stroke-width:2} .metric-chart .previous{stroke:#9ca7b4;stroke-width:1.5;stroke-dasharray:5 4} @media(max-width:600px){.metric-dialog-values{grid-template-columns:1fr}.metric-chart{height:230px}} /* Заголовок группы комиссий: это платёж, а не слагаемое — поэтому без знака минус, с отбивкой сверху и приглушённой суммой. */ table.sums tr.txnrow td{padding-top:.5rem;font-weight:600;border-bottom:none} table.sums tr.txnrow td.v{font-weight:600;color:var(--dim)} /* ── Правая колонка: без синевы ──────────────────────────────────────────── У Shopify имя клиента синее, потому что ведёт в карточку покупателя. У нас такой страницы нет, а почта и телефон — обычные mailto:/tel:, которые открывают почтовик или звонилку. Подсвечивать нечего: синий и подчёркивание обещают переход, которого не будет. Кликабельность остаётся — курсор при наведении и говорит, что можно нажать. */ .side p.link{color:var(--fg)} .side a[href^="mailto:"], .side a[href^="tel:"], .side a[href^="sms:"]{color:var(--fg);text-decoration:none;cursor:pointer} .side a[href^="mailto:"]:hover, .side a[href^="tel:"]:hover, .side a[href^="sms:"]:hover{text-decoration:none;color:var(--fg)} /* Контакты — обычный текст: ни цвета, ни подчёркивания, ни перехода. Курсор текстовый, потому что здесь именно читают и выделяют, а не нажимают. `user-select:text` стоит явно — это и есть требование: email копируют руками. */ .side p.contact{color:var(--fg);word-break:break-word;user-select:text;cursor:text} /* Кнопки способов связи остаются обведёнными — это уже не текст, а действие, и рамка отличает их без цвета. */ a.way,button.way{color:var(--fg);background:var(--surface);cursor:pointer;font:inherit;font-size:12px} a.way:hover{border-color:var(--fg)} /* Возврат в выборку и переход по соседям. Стрелка без соседа не исчезает, а гаснет: пропадающий элемент сдвигает остальные, и глаз каждый раз ищет их заново. */ .ordhead .acts{display:flex;align-items:center;gap:.8rem} .ordhead .acts a{color:var(--fg);text-decoration:none} .head-actions{display:flex;align-items:center;gap:.4rem} .head-action{display:inline-flex;align-items:center;gap:.3rem;min-height:30px; padding:.3rem .7rem;border:1px solid var(--line);border-radius:8px; background:#e9e9e9;color:var(--fg);font:inherit;font-size:12px;white-space:nowrap} button.head-action:not(:disabled),.more-actions>summary{cursor:pointer} button.head-action:disabled{color:#8a8a8a;cursor:not-allowed} .more-actions{position:relative} .more-actions>summary{list-style:none} .more-actions>summary::-webkit-details-marker{display:none} .more-actions[open]>summary{border-color:#8a8a8a;background:#dedede} .action-menu{position:absolute;z-index:90;right:0;top:calc(100% + 5px);width:210px; padding:.35rem;background:var(--surface);border:1px solid var(--line); border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18)} .action-menu button,.action-menu>a{display:block;width:100%;padding:.42rem .55rem;border:0; border-radius:6px;background:transparent;color:var(--fg);font:inherit; font-size:13px;text-align:left;cursor:pointer} .action-menu button:hover:not(:disabled),.action-menu>a:hover{background:#f1f1f1} .action-menu button:disabled{color:#a0a0a0;cursor:not-allowed} .action-menu .action-group{margin:.3rem -.35rem 0;padding:.45rem .9rem .2rem; border-top:1px solid var(--line);color:var(--dim);font-size:11px} .ordhead .near{display:inline-flex;align-items:center;gap:.5rem;font-size:12px; border:1px solid var(--line);border-radius:8px;padding:.1rem .5rem; background:var(--surface)} .ordhead .near .pos{color:var(--dim);font-variant-numeric:tabular-nums} .ordhead .near .off{color:#c9c9c9} @media (max-width:700px){ .ordhead{flex-wrap:wrap} .ordhead .acts{width:100%;justify-content:space-between;flex-wrap:wrap} } @media print{ body,.shell,.pane,main{background:#fff!important} .topbar,.rail,footer,.no-print,.ordhead .near,.shipment-actions, form.notecard,.switches{display:none!important} .shell,.pane,main{display:block!important;width:100%!important;max-width:none!important; margin:0!important;padding:0!important} .ordhead{break-inside:avoid;margin-bottom:.5rem} .grid{display:block!important} .dragger{display:none!important} .main,.side{width:100%!important;max-width:none!important} .box{break-inside:avoid;box-shadow:none!important;border:1px solid #ddd!important} a{color:#000!important;text-decoration:none!important} } /* Хлебная крошка в заголовке карточки: значок списка, шеврон, номер. Область нажатия у значка 40x40 при самом значке в 16px — промах по нему уводит со страницы, и цена промаха выше, чем цена лишних пикселей. */ .ordhead h1.crumb{display:flex;align-items:center;gap:.15rem} .ordhead .tolist{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;margin-left:-10px;border-radius:8px;color:var(--dim); text-decoration:none;flex:0 0 40px} .ordhead .tolist:hover{background:#e6e6e6;color:var(--fg)} .ordhead .tolist .ic{width:18px;height:18px} .ordhead .chev{color:var(--dim);font-weight:400;margin:0 .35rem 0 .1rem} /* ── Крупная миниатюра в карточке заказа ─────────────────────────────────── Было 40px — на такой картинке не различить, та ли это деталь. Стало 88px: позиция всё ещё строка списка, а не карточка товара, но предмет узнаётся. Курсор-указатель и лёгкое приближение при наведении говорят, что можно нажать; сам переход открывает полный размер в новой вкладке. */ /* 🔴 110 px, а не 88: под каждой позицией теперь стоят вес и закупка с источником, и картинка рядом с этим объёмом текста читалась мелкой. Пробовали 140 (великовато) и 120; остановились на 110 — владелец смотрел вживую 31.07.2026, а не подбирал число на глаз. Запрос картинки не меняем — он и так 240 px (thumb(240) в order.html), то есть запас качества был заложен заранее. */ ul.items .thumb{width:110px;height:110px;flex:0 0 110px;border-radius:10px} ul.items .thumb a{display:flex;align-items:center;justify-content:center; width:100%;height:100%;cursor:zoom-in} ul.items .thumb img{transition:transform .12s ease} ul.items .thumb a:hover img{transform:scale(1.06)} ul.items li{padding:.7rem 0} /* ── Метка способа оплаты ────────────────────────────────────────────────── 🔴 ПЛАШКА С ФОНОМ, А НЕ ЦВЕТНОЙ ТЕКСТ. Синий у нас занят ссылками (номер заказа, трек-номер), и синее слово в той же строке читалось бы как ещё одна ссылка. Фон снимает вопрос: нажимают то, что подчёркнуто цветом текста, а плашка — это метка. Синий — НАШ ссылочный, var(--acc): решение владельца 27.07.2026. Фирменный PayPal #003087 на экране читался как «чёрный прямоугольник», а панель и так держит один синий на всё. Цвет берётся переменной, не числом: подобранное на глаз повторение того же тона расходится при первой же правке палитры. */ /* 🔴 СПОСОБ ОПЛАТЫ НИЧЕГО НЕ СИГНАЛИЗИРУЕТ — это факт, а не тревога. Он обязан быть ТИШЕ статусов оплаты и отгрузки, которые требуют действия. Поэтому у всех трёх одинаковый вес: бледная подложка, различие цветом буквы, а не яркостью пятна. */ .paybadge{display:inline-block;font-size:11px;line-height:18px;padding:0 7px; border-radius:6px;white-space:nowrap;font-weight:500;letter-spacing:.01em} .paybadge.pay-paypal{background:#eaf1fd;color:var(--acc)} .paybadge.pay-card{background:#ebebeb;color:#303030} .paybadge.pay-market{background:#e6e0f7;color:#3d2a72} .paybadge.pay-manual{background:#ffe9c7;color:#5e4200} .ordhead .paybadge{font-size:12px;line-height:20px;padding:0 9px} /* Нетто рядом с брутто: второй строкой, приглушённо. Не в отдельной колонке — тогда таблица растянулась бы, а мы её ширину только что ограничивали. */ /* То же самое, что у строки позиции: `display` не называется, раскладку задаёт `.net`. Здесь этим правилом накрыты ДВЕ строки из трёх — расчёт и «Итого». */ table.sums td.v .net{font-size:12px;color:var(--dim); font-weight:400;white-space:nowrap} table.sums tr.tot td.v .net{font-weight:600} /* 🔴 Один смысл на цвет. Зелёный — «деньги у нас или товар у покупателя», и больше нигде. Жёлтый — «ждём и не знаем». Красный — «нужно вмешаться». */ /* 🔴 39: прежний #cdfee1 читался как «яркая наклейка». Тон тот же, насыщенность ниже — чип должен подсказывать, а не кричать. */ /* 🔴 .pill-green УДАЛЁН 28.07.2026 вместе с зелёным из палитры состояний. Нормальное состояние серое; зелёная плашка вернула бы «всё хорошо» туда, где сообщать нечего. --act остаётся: им покрашены рост показателя и отметка «доставлено» в ленте пути, это не состояния заказа. */ .pill-grey{background:#ebebeb;color:#616161} .pill-yellow{background:#f8eb78;color:#303000} /* Янтарный — «движения давно нет». Между зелёным и красным: не благополучие, но и не отказ доставки. */ .pill-amber{background:#f8d6a4;color:#4a2d00} .pill-blue{background:#d5ebff;color:#0b3d62} .pill-red{background:#fdd;color:#8e1f0b} /* ── Форма сообщения и история переписки ────────────────────────────────── */ form.msg{display:flex;flex-direction:column;gap:.4rem;margin:.2rem 0 1rem} form.msg .tabs{display:flex;gap:.8rem;font-size:12px;color:var(--dim)} form.msg .fld{border:1px solid var(--line);border-radius:6px;padding:.35rem .5rem; font:inherit;font-size:13px;width:100%;box-sizing:border-box} form.msg textarea.fld{resize:vertical} form.msg button{align-self:flex-start;border:1px solid var(--line);background:var(--surface); border-radius:99px;padding:.35rem .9rem;font:inherit;font-size:13px;cursor:pointer} form.msg button:hover{background:#f6f6f7} .small{font-size:11px;line-height:1.35} ul.notes{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem} ul.notes li{border-left:2px solid var(--line);padding-left:.6rem;font-size:13px} ul.notes li.bad{border-left-color:var(--bad)} /* ── Модалка отправки ───────────────────────────────────────────────────── Раскладка по образцу окна «Contact customer» у Shopify (скриншоты владельца, 31.07.2026): три яруса — заголовок, прокручиваемая середина, полоса кнопок, — поля друг под другом во всю ширину, подписи читаемые, между блоками воздух. Пиксель-в-пиксель не копируется намеренно: заимствован подход, а не чужой брендинг. */ dialog.sheet{border:none;border-radius:12px;padding:0;width:min(760px,94vw); max-height:92vh;box-shadow:0 20px 60px rgba(0,0,0,.25)} dialog.sheet::backdrop{background:rgba(0,0,0,.35)} /* Форма — колонка на всю высоту окна: середина прокручивается, кнопки внизу остаются на месте. Прежде прокручивалось всё окно целиком, и кнопка «Отправить» уезжала за край ровно тогда, когда письмо длинное. */ dialog.sheet form{padding:0;display:flex;flex-direction:column; max-height:inherit;overflow:hidden} /* 🔴 Атрибут `hidden` обязан побеждать раскладку: у блоков ниже есть свои display, и без этой строки скрытые поля показались бы всем. */ dialog.sheet [hidden]{display:none} dialog.sheet .sheet-head{flex:none;padding:1rem 1.4rem; border-bottom:1px solid var(--line)} dialog.sheet h2{margin:0;font-size:16px} /* min-height:0 — не украшение: без него элемент flex-колонки не сжимается ниже своего содержимого, overflow:auto ничего не прокручивает, и полоса кнопок всё равно уезжает за нижний край. */ dialog.sheet .sheet-body{flex:1 1 auto;min-height:0;overflow:auto; padding:1.1rem 1.4rem 1.3rem;display:flex;flex-direction:column;gap:1.1rem} dialog.sheet .sheet-fields{display:flex;flex-direction:column;gap:.9rem} /* Подпись поля — тёмная и не мельче списка: у Shopify она читается наравне со значением, а серым набраны только пояснения под ней. Прежде подпись была dim и 12px, и «Кому» терялось рядом с адресом. */ dialog.sheet label{display:flex;flex-direction:column;gap:.3rem;font-size:13px; color:var(--fg)} dialog.sheet label .lbl-note{font-size:11px;color:var(--dim);font-weight:400} dialog.sheet label.check{flex-direction:row;align-items:center;gap:.45rem; color:var(--fg)} /* Поля модалки не были оформлены вовсе: `.fld` описан только внутри form.msg, и здесь стояли необрамлённые кнопки-коробки браузера разной ширины. */ dialog.sheet .fld{border:1px solid var(--line);border-radius:8px; padding:.5rem .65rem;font:inherit;font-size:14px;width:100%; box-sizing:border-box;background:#fff;color:var(--fg)} dialog.sheet .fld:focus{outline:2px solid var(--acc);outline-offset:1px; border-color:var(--acc)} /* 🔴 ГЛАВНОЕ ТРЕБОВАНИЕ ПУНКТА: поле втрое выше прежнего. Восемь строк — это было ~125px, здесь 24rem = 384px. `min()` с высотой окна — не осторожность ради осторожности: на низком экране жёсткие 24rem вытолкнули бы кнопки в прокрутку, то есть отняли бы ровно то, ради чего высота и добавлена. */ dialog.sheet textarea.fld{min-height:min(24rem,46vh);resize:vertical; line-height:1.45} dialog.sheet .sheet-text{flex:1 0 auto} /* Кнопки-помощники (перевод). Прежде это были голые