/* Рабочий стол поиска. Обычный CSS без сборки; значения — в переменных. */

/* Шрифт Onest (SIL OFL, static/fonts/OFL.txt), переменный по насыщенности */
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/onest-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/onest-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+20BD;
}

:root {
  /* Цвета: штукатурка, бумага, бутылочно-зелёный акцент */
  --paper: #EDEAE4;
  --panel: #F7F5F1;
  --card: #FFFFFF;
  --sunk: #F2EFEA;
  --ink: #211F1B;
  --muted: #5B5650;
  --line: #DEDAD2;
  --edge: #C4BEB2;
  --accent: #2B5A50;
  --accent-ink: #1F453D;
  --accent-soft: #E3EEEA;
  --mint: #6FD3BC;
  --warn: #84560F;
  --warn-soft: #F6EBD7;
  --bad: #9A3A30;
  --bad-soft: #F7E4E0;
  --sans: "Onest", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  /* Шрифт: 13 подписи / 16 текст / 20 / 28 */
  --fs-s: 13px;
  --fs-m: 16px;
  --fs-l: 20px;
  --fs-xl: 28px;
  /* Сетка 8 px */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --r-s: 6px;
  --r-m: 10px;
  --pill: 999px;
  --shadow-1: 0 1px 2px rgb(33 31 27 / .06), 0 2px 8px rgb(33 31 27 / .05);
  --shadow-2: 0 4px 12px rgb(33 31 27 / .10), 0 16px 40px rgb(33 31 27 / .16);
  --head-h: 56px;
  --left-w: 320px;
  --drawer-w: 420px;
  --thumb: 112px;
  --fab: 48px;
  --panel-w: 360px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head-h) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-m)/1.5 var(--sans);
       overflow-x: hidden; -webkit-font-smoothing: antialiased; }
[x-cloak] { display: none !important; }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cap { color: var(--muted); font-size: var(--fs-s); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 36px;
       padding: 0 var(--s3); border: 1px solid var(--edge); border-radius: var(--r-s); background: var(--card);
       color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer;
       transition: background-color .15s, border-color .15s, color .15s; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { background: #7E2E26; border-color: #7E2E26; }
.btn.htmx-request { opacity: .6; cursor: progress; }

/* Каркас: шапка сверху, слева фото, справа находки; страница прокручивается целиком */
.top { position: sticky; top: 0; z-index: 15; height: var(--head-h); display: flex; align-items: center;
       justify-content: space-between; padding: 0 var(--s4); background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.brand-mark { color: var(--accent); flex: none; }
.cart-btn { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s2) 0 var(--s3); border: 0;
            border-radius: var(--pill); background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.cart-btn:hover { background: var(--accent-ink); }
.cart-n { display: inline-block; min-width: 26px; padding: 0 var(--s2); border-radius: var(--pill); background: #fff;
          color: var(--accent-ink); font-size: var(--fs-s); font-weight: 700; line-height: 26px; text-align: center;
          font-variant-numeric: tabular-nums; }
.cols { display: grid; grid-template-columns: var(--left-w) minmax(0, 1fr); align-items: start; }
.left { position: sticky; top: var(--head-h); height: calc(100vh - var(--head-h)); overflow-y: auto; background: var(--panel);
        border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--edge) var(--panel); }
.left-in { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); }
.mid { min-width: 0; padding-bottom: 120px; }

/* История: панель слева, как подборка справа */
.top-actions { display: flex; align-items: center; gap: var(--s2); }
.ghost-btn { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s3); border: 1px solid var(--line);
             border-radius: var(--pill); background: var(--card); color: var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; }
.ghost-btn:hover { border-color: var(--edge); background: var(--sunk); }
.ghost-btn svg { color: var(--muted); }
.ghost-n { min-width: 24px; padding: 0 6px; border-radius: var(--pill); background: var(--sunk); color: var(--muted);
           font-size: var(--fs-s); font-weight: 600; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.drawer-left { right: auto; left: 0; width: min(480px, 100vw); transform: translateX(-100%); }
.hist-list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.hist-list a { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--r-m); text-decoration: none; }
.hist-list a:hover { background: var(--card); }
.hist-list li.on a { background: var(--accent-soft); }
.h-thumb { flex: none; width: 96px; height: 96px; border-radius: var(--r-s); object-fit: cover; background: var(--sunk); }
.h-text { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.h-title { font-size: var(--fs-m); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.h-title::first-letter { text-transform: uppercase; }
.hist-list li.on .h-title { color: var(--accent-ink); font-weight: 600; }
.h-meta { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: var(--fs-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.h-empty { margin: var(--s3) 0; padding: var(--s3); border: 1.5px dashed var(--edge); border-radius: var(--r-m); color: var(--muted); }

/* Загрузка */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0;
        padding: 12px var(--s3); border: 1.5px dashed var(--edge); border-radius: var(--r-m); background: var(--card);
        text-align: center; transition: border-color .15s, background-color .15s; }
.drop b { font-weight: 600; font-size: 15px; }
.paste-hint { margin-top: 2px; font-size: 12px; color: var(--muted); }
kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: 4px;
      background: var(--card); font: 600 11px/16px var(--sans); color: var(--ink); }
.drop:hover, .drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#upload-msg { position: relative; font-size: var(--fs-s); }
#upload-msg:empty { display: none; }
#upload-msg .err { margin: var(--s1) 0 0; }
.drop.htmx-request { opacity: .6; cursor: progress; }

/* Фото с рамками */
.photo { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.frame { position: relative; line-height: 0; border-radius: var(--r-m); overflow: hidden; background: var(--sunk); box-shadow: var(--shadow-1); }
.frame img { width: 100%; height: auto; display: block; }
.frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.box rect { pointer-events: all; fill: transparent; stroke: #fff; stroke-width: 1.5px; opacity: .85; transition: fill .12s, stroke-width .12s; }
.box rect.halo { stroke: rgb(0 0 0 / .35); stroke-width: 4px; opacity: 1; pointer-events: none; }
.box circle { fill: rgb(33 31 27 / .82); }
.box text { fill: #fff; font-family: var(--sans); font-weight: 600; }
.box.idle { opacity: .7; }
.frame a .box, .frame [role="button"] { cursor: pointer; }
/* Наведение: белая рамка толще и подсветка внутри */
.frame a:hover .box rect:not(.halo), .frame [role="button"]:hover .box rect:not(.halo),
.frame a:focus .box rect:not(.halo), .frame [role="button"]:focus .box rect:not(.halo),
.frame .box.highlight rect:not(.halo) { stroke-width: 3px; opacity: 1; fill: rgb(255 255 255 / .2); }
.frame a:hover .box, .frame [role="button"]:hover .box, .frame .box.highlight { opacity: 1; }
.frame [role="button"]:focus, .frame a:focus { outline: none; }
/* Выбранный предмет: мятная рамка, заметно отличается от наведения */
.box.on { opacity: 1; }
.box.on rect:not(.halo) { stroke: var(--mint); stroke-width: 3px; fill: rgb(111 211 188 / .16); opacity: 1; }
.box.on circle { fill: var(--accent); }

.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.items li { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 4px var(--s2);
            border-radius: var(--r-s); font-size: 15px; line-height: 1.3; }
.items li:hover, .items li.highlight { background: var(--sunk); }
.items li.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.items .n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0; border-radius: var(--pill);
            background: var(--sunk); color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.items li.on .n { background: var(--accent); color: #fff; }
.items li.highlight .n { background: var(--ink); color: #fff; }
.items li > a, .items li > span:not(.n):not(.st), .item-search { flex: 1; min-width: 0; text-decoration: none; }
.items li > a::first-letter, .items li > span:not(.n):not(.st)::first-letter, .item-search::first-letter { text-transform: uppercase; }
.items li > a:hover, .item-search:hover { text-decoration: underline; text-underline-offset: 3px; }
.item-search { all: unset; flex: 1; cursor: pointer; }
.item-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* Состояние предмета: точка справа */
.st { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: var(--pill); border: 1.5px solid var(--edge); }
.st-done .st { background: var(--accent); border-color: var(--accent); }
.st-run .st { border-color: var(--warn); background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
.st-fail .st { border-color: var(--bad); background: var(--bad-soft); }
@keyframes pulse { 50% { opacity: .3; } }
.link-danger { all: unset; align-self: flex-start; cursor: pointer; font-size: var(--fs-s); color: var(--muted);
               text-decoration: underline; text-underline-offset: 3px; }
.link-danger:hover { color: var(--bad); }
.link-danger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-missing { margin: 0; padding: var(--s3); border-radius: var(--r-m); background: var(--sunk); color: var(--muted); font-size: 14px; }

/* Центр */
.head { padding: var(--s4) var(--s4) var(--s2); }
.head h1 { font-weight: 600; font-size: var(--fs-xl); line-height: 1.2; margin: 0 0 var(--s2); letter-spacing: -.02em; }
.head h1::first-letter { text-transform: uppercase; }
.h1-date { margin-left: 12px; font-size: var(--fs-s); font-weight: 500; letter-spacing: 0; color: var(--muted); white-space: nowrap; vertical-align: middle; }
.desc { margin: 0 0 var(--s2); max-width: 72ch; color: var(--muted); }
.desc::first-letter { text-transform: uppercase; }
.status { min-height: 20px; }
.status b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.toolbar { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s4) var(--s3); }
.tools { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin: 0; }
.chips { display: flex; gap: var(--s1); flex-wrap: wrap; padding: 3px; border-radius: var(--pill); background: var(--sunk); border: 1px solid var(--line); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: block; border-radius: var(--pill); padding: 5px 14px; font-size: 14px; font-weight: 500; color: var(--muted); }
.chip:hover span { color: var(--ink); }
.chip input:checked + span { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.maxp { width: 128px; height: 38px; border: 1px solid var(--line); border-radius: var(--pill); padding: 0 var(--s3);
        background: var(--card); font-size: 14px; color: var(--ink); }
.maxp::placeholder { color: var(--muted); }
.maxp:hover { border-color: var(--edge); }
.viewswitch { display: inline-flex; margin-left: auto; padding: 3px; gap: 2px; border-radius: var(--r-s); background: var(--sunk); border: 1px solid var(--line); }
.viewswitch button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
                     border-radius: 4px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; }
.viewswitch button:hover { color: var(--ink); }
.viewswitch button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.viewswitch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Сообщения: статус поиска, устаревшие результаты, пустой экран */
.notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: var(--s2) var(--s4) var(--s3); padding: 12px var(--s3);
          background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--edge); border-radius: var(--r-s);
          max-width: 72ch; font-size: 15px; }
.notice > span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: var(--pill);
                                     background: var(--edge); vertical-align: 1px; }
.notice[data-state="queued"], .notice[data-state="running"] { border-left-color: var(--warn); }
.notice[data-state="queued"] > span:first-child::before,
.notice[data-state="running"] > span:first-child::before { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
.notice[data-state="done"] { border-left-color: var(--accent); }
.notice[data-state="done"] > span:first-child::before { background: var(--accent); }
.notice[data-state="failed"], .notice[data-state="expired"], .notice[data-state="uncertain"],
.notice[data-state="submitting"], .notice[data-error] { border-left-color: var(--bad); background: var(--bad-soft); }
.notice[data-state="failed"] > span:first-child::before, .notice[data-state="expired"] > span:first-child::before,
.notice[data-state="uncertain"] > span:first-child::before, .notice[data-error] > span:first-child::before { background: var(--bad); }
.notice .btn { min-height: 32px; margin-left: auto; }
.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); max-width: 46ch;
               margin: 12vh auto 0; padding: 0 var(--s4); color: var(--muted); }
.empty-state svg { color: var(--accent); margin-bottom: var(--s2); }
.empty-title { margin: 0; font-size: var(--fs-l); font-weight: 600; line-height: 1.3; color: var(--ink); }
.empty-hint { margin: 0; font-size: 15px; }

/* Находки: таблица */
.tw { margin: 0 var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); }
table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
thead th { position: sticky; top: var(--head-h); z-index: 2; background: var(--panel); text-align: left; font-weight: 600;
           font-size: var(--fs-s); color: var(--muted); padding: 10px var(--s3); border-bottom: 1px solid var(--line); }
thead th:first-child { border-top-left-radius: var(--r-m); }
thead th:last-child { border-top-right-radius: var(--r-m); }
thead th button { all: unset; cursor: pointer; border-radius: 2px; }
thead th button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
thead th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-thumb { width: calc(var(--thumb) + 32px); }
.c-shop { width: 136px; }
.c-price { width: 136px; text-align: right; }
.c-match { width: 140px; }
.c-add { width: 64px; text-align: center; }
thead th.c-price { text-align: right; }
tr.offer td { padding: var(--s3); vertical-align: top; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tr.offer:hover td { background: #FAF8F5; }
.c-thumb img { display: block; width: var(--thumb); height: var(--thumb); object-fit: contain; background: #fff;
               border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); }
.offer-image { display: block; position: relative; width: var(--thumb); border-radius: var(--r-s); }
.offer-image::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgb(33 31 27 / .08); pointer-events: none; }
.offer-image:hover > img { box-shadow: inset 0 0 0 1px var(--edge); }
.no-img { display: grid; place-items: center; width: var(--thumb); height: var(--thumb); border-radius: var(--r-s);
          background: var(--sunk); color: var(--muted); font-size: 12px; }
.c-title .t { font-size: var(--fs-m); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.sub { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: var(--s1); color: var(--muted); font-size: var(--fs-s); }
.sub-shop { display: none; font-weight: 500; color: var(--ink); }
.shop-link { display: inline-block; margin-top: var(--s2); font-size: 14px; color: var(--accent); font-weight: 500;
             text-decoration: underline; text-decoration-color: rgb(43 90 80 / .35); text-underline-offset: 3px; }
.shop-link:hover { text-decoration-color: currentColor; }
td.c-shop { color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.offer td.c-shop, tr.offer td.c-price, thead th.c-shop, thead th.c-price { padding-left: 12px; padding-right: 12px; }
.num { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; font-size: var(--fs-m); }
td.c-price { line-height: 1.3; }
td.c-price .num + .badge { margin-top: 6px; }

/* Метки: только когда что-то значат */
.badge { display: inline-block; padding: 1px 8px; border-radius: 4px; border: 1px solid transparent; font-size: 12px; font-weight: 500;
         line-height: 18px; white-space: nowrap; text-transform: lowercase; }
.b-ok { background: var(--accent); color: #fff; }
.b-warn { background: var(--warn-soft); color: var(--warn); }
.b-quiet { border-color: var(--edge); border-style: dashed; color: var(--muted); }
/* Совпадение: три деления, заполнены по силе */
.meter { display: flex; gap: 3px; margin: 3px 0 6px; }
.match-note { display: block; font-size: var(--fs-s); color: var(--muted); }
.meter i { width: 6px; height: 14px; border-radius: 2px; background: var(--line); }
.meter i.on { background: var(--edge); }
.m-same i.on, .m-brand i.on { background: var(--accent); }
.m-replica i.on { background: var(--warn); }

tr.note td { padding: 10px var(--s3); color: var(--warn); background: var(--warn-soft); font-size: 14px; border-bottom: 1px solid var(--line); }
tr.empty td { padding: 72px var(--s4); text-align: center; color: var(--muted); font-size: var(--fs-m); }

/* «+» в подборку */
.add { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 40px; height: 40px; cursor: pointer;
       border: 1px solid var(--edge); border-radius: var(--pill); background: var(--card); color: var(--accent);
       transition: background-color .15s, color .15s, border-color .15s; }
.add:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.add.htmx-request { opacity: .5; cursor: progress; }

/* Увеличенный просмотр: прикреплён к окну, место выбирает search.js */
.offer-preview { display: none; position: fixed; z-index: 40; top: 8px; right: 8px; width: 440px; padding: var(--s2);
                 background: var(--card); border-radius: var(--r-m); box-shadow: var(--shadow-2); pointer-events: none; line-height: 1.3; }
.offer-preview img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; background: #fff; border-radius: var(--r-s); }
.pv-cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 12px var(--s1) var(--s1); }
.pv-shop { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-price { font-weight: 600; font-size: var(--fs-m); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.offer-image:hover .offer-preview, .offer-image:focus .offer-preview { display: block; }

/* Находки: плитка. Та же таблица, строки раскладываются сеткой */
.tw.tiles { background: none; border: 0; }
.tw.tiles table, .tw.tiles thead, .tw.tiles tbody { display: block; }
.tw.tiles thead { position: sticky; top: var(--head-h); z-index: 2; margin-bottom: var(--s3); }
.tw.tiles thead tr { display: flex; gap: var(--s3); align-items: center; padding: 10px var(--s3); background: var(--panel);
                     border: 1px solid var(--line); border-radius: var(--r-m); }
.tw.tiles thead th { position: static; display: block; width: auto; padding: 0; border: 0; background: none; }
.tw.tiles thead th.c-thumb, .tw.tiles thead th.c-title, .tw.tiles thead th.c-add { display: none; }
.tw.tiles thead tr::before { content: "Сортировать:"; color: var(--muted); font-size: var(--fs-s); }
.tw.tiles tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: var(--s3); }
.tw.tiles tr.note, .tw.tiles tr.empty { display: block; grid-column: 1 / -1; border-radius: var(--r-m); overflow: hidden; }
.tw.tiles tr.note td, .tw.tiles tr.empty td { display: block; }
.tw.tiles tr.empty td { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); }
.tw.tiles tr.offer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
                     grid-template-areas: "thumb thumb" "price price" "shop match" "title title";
                     align-content: start; padding: var(--s2) var(--s2) 12px; background: var(--card);
                     border: 1px solid var(--line); border-radius: var(--r-m); transition: box-shadow .15s, border-color .15s; }
.tw.tiles tr.offer:hover { border-color: var(--edge); box-shadow: var(--shadow-1); }
.tw.tiles tr.offer td { display: block; width: auto; padding: 0 var(--s1); border: 0; background: none; text-align: left; }
.tw.tiles tr.offer td.c-thumb { grid-area: thumb; padding: 0; margin-bottom: 12px; }
.tw.tiles .offer-image, .tw.tiles .no-img { width: 100%; }
.tw.tiles .c-thumb img, .tw.tiles .no-img { width: 100%; height: auto; aspect-ratio: 1; }
.tw.tiles tr.offer td.c-price { grid-area: price; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-height: 26px; }
.tw.tiles td.c-price .num { display: inline; font-size: 17px; }
.tw.tiles td.c-price .badge { margin: 0; }
.tw.tiles td.c-shop { grid-area: shop; margin-top: 2px; color: var(--muted); font-size: var(--fs-s); overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.tw.tiles td.c-match { grid-area: match; align-self: center; margin-top: 2px; }
.tw.tiles td.c-match .meter { margin: 0; }
.tw.tiles td.c-match .meter:has(+ .badge) { display: none; }
.tw.tiles .match-note { display: none; }
.tw.tiles td.c-match .badge { display: block; }
.tw.tiles td.c-title { grid-area: title; margin-top: var(--s2); }
.tw.tiles .c-title .t { font-size: var(--fs-s); font-weight: 400; color: var(--muted); line-height: 1.4;
                        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw.tiles .c-title .sub, .tw.tiles .shop-link { display: none; }
.tw.tiles tr.offer td.c-add { position: absolute; top: 16px; right: 16px; padding: 0; }
.tw.tiles .add { box-shadow: var(--shadow-1); }

/* Подборка: выезжает справа и не занимает места, пока закрыта */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgb(33 31 27 / .32); opacity: 0; visibility: hidden;
         transition: opacity .2s, visibility .2s; }
.scrim.on { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(var(--drawer-w), 100vw); background: var(--panel);
          box-shadow: var(--shadow-2); transform: translateX(100%); visibility: hidden;
          transition: transform .22s ease, visibility .22s; overflow-y: auto; }
.drawer.open { transform: none; visibility: visible; }
.drawer-in { padding: var(--s4); }
.drawer h2 { font-weight: 600; font-size: var(--fs-l); letter-spacing: -.01em; margin: 0 0 var(--s2); line-height: 40px; }
.drawer-close { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; top: var(--s3); right: var(--s3); width: 40px; height: 40px;
                display: grid; place-items: center; font-size: 24px; color: var(--muted); border-radius: var(--pill); }
.drawer-close:hover { background: var(--card); color: var(--ink); }
.drawer-close:focus-visible { outline: 2px solid var(--accent); }
.empty-note { color: var(--muted); max-width: 34ch; margin: var(--s3) 0; padding: var(--s3); border: 1.5px dashed var(--edge); border-radius: var(--r-m); }

.picks { list-style: none; margin: var(--s3) 0; padding: 0; }
.pick { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px var(--s3);
        padding: var(--s3) 0; border-bottom: 1px solid var(--line); align-items: start; }
.pick-thumb { width: 72px; height: 72px; border-radius: var(--r-s); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pick-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pick-title { font-size: 15px; text-decoration: none; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.pick-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.pick-meta { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s1); }
.pick-meta .num { display: inline; font-size: 15px; }
.pick-fields { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s2); margin-top: var(--s2); }
.pick-fields label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick-fields input { width: 100%; height: 32px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r-s);
                     background: var(--card); font-size: 14px; color: var(--ink); }
.pick-del { all: unset; box-sizing: border-box; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center;
            font-size: 20px; color: var(--muted); border-radius: var(--pill); }
.pick-del:hover { color: var(--bad); background: var(--card); }
.pick-del:focus-visible { outline: 2px solid var(--accent); }
.totals { margin: var(--s4) 0 var(--s3); padding-top: var(--s3); border-top: 1px solid var(--ink); }
.totals .total { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.export { display: flex; width: 100%; min-height: 44px; }

/* Ассистент: кружок в углу и окно поверх страницы */
.assistant-fab { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 20; width: var(--fab); height: var(--fab);
                 border: 0; border-radius: var(--pill); background: var(--ink); color: #fff; cursor: pointer;
                 display: grid; place-items: center; box-shadow: var(--shadow-2); }
.assistant-fab:hover { background: var(--accent); }
.assistant-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.assistant-panel { position: fixed; right: var(--s4); bottom: calc(var(--fab) + var(--s4) + var(--s2)); z-index: 20;
                   width: min(var(--panel-w), calc(100vw - var(--s4) * 2)); height: min(480px, 70vh);
                   display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
                   border-radius: var(--r-m); box-shadow: var(--shadow-2); overflow: hidden; }
.assistant-head { display: flex; justify-content: space-between; align-items: center;
                  padding: var(--s2) var(--s2) var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.assistant-log { flex: 1; overflow-y: auto; padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.msg { max-width: 85%; padding: var(--s2) 12px; line-height: 1.4; font-size: 15px; overflow-wrap: anywhere; border-radius: var(--r-m); }
.msg-bot { align-self: flex-start; background: var(--sunk); border-bottom-left-radius: 2px; }
.msg-user { align-self: flex-end; background: var(--accent-soft); color: var(--ink); border-bottom-right-radius: 2px; }
.assistant-form { display: flex; gap: var(--s2); padding: 12px; border-top: 1px solid var(--line); }
.assistant-form input[name="text"] { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--line);
                                     border-radius: var(--r-s); background: var(--card); color: var(--ink); }

/* Вход */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s4) var(--s3);
         background: radial-gradient(120% 80% at 50% 0%, var(--panel), var(--paper)); }
.login-card { width: min(400px, 100%); padding: var(--s5); background: var(--card); border: 1px solid var(--line);
              border-radius: 14px; box-shadow: var(--shadow-1); }
.login .brand { margin-bottom: var(--s5); }
.login h1 { font-weight: 600; font-size: var(--fs-xl); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 var(--s2); }
.login-lead { margin: 0 0 var(--s4); color: var(--muted); font-size: 15px; }
.login label { display: block; margin-bottom: var(--s3); color: var(--muted); font-size: 14px; font-weight: 500; }
.login input { display: block; width: 100%; height: 44px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--edge);
               border-radius: var(--r-s); background: #fff; font-size: var(--fs-m); color: var(--ink); }
.login input:hover { border-color: var(--muted); }
.login .btn { width: 100%; min-height: 44px; margin-top: var(--s2); font-size: var(--fs-m); }
.err { color: var(--bad); }
.login .err { margin: 0 0 var(--s3); padding: 10px 12px; border-radius: var(--r-s); background: var(--bad-soft); font-size: 14px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (min-width: 1600px) {
  :root { --left-w: clamp(380px, 26vw, 520px); --drawer-w: 460px; --thumb: 128px; }
  .c-shop { width: 160px; } .c-match { width: 156px; }
  .tw.tiles tbody { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
}

/* Узкие окна */
@media (max-width: 1100px) {
  :root { --left-w: 288px; --thumb: 96px; }
  .c-shop { width: 112px; } .c-match { width: 128px; } .c-price { width: 120px; }
}
@media (max-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .left { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .left-in { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .left-in .photo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px var(--s3); align-items: start; }
  .photo .frame { grid-row: 1 / span 2; }
  /* Предметы: чипы рядом с фото, над таблицей */
  .items { flex-direction: row; flex-wrap: wrap; gap: var(--s2); }
  .items li .st { margin-top: 0; }
  .items li { align-items: center; min-height: 36px; padding: 4px 12px 4px 6px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--card); font-size: 14px; }
  .items li.on { border-color: var(--accent); }
  .link-danger { grid-column: 2; }
  .c-shop { display: none; }
  .sub-shop { display: inline; }
  .c-match { width: 112px; }
}
@media (max-width: 640px) {
  :root { --thumb: 80px; }
  .left-in .photo { grid-template-columns: minmax(0, 1fr); }
  .photo .frame { grid-row: auto; max-width: 360px; }
  .link-danger { grid-column: auto; }
  .c-match { display: none; }
  .c-add { width: 56px; }
  .c-price { width: 104px; }
  tr.offer td { padding: 12px var(--s2); }
  .tw { margin: 0 var(--s3); }
  .head, .toolbar { padding-left: var(--s3); padding-right: var(--s3); }
  .notice { margin-left: var(--s3); margin-right: var(--s3); }
  .viewswitch { margin-left: 0; }
  .tw.tiles tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tw.tiles tr.offer td.c-match { display: block; }
}

/* Подтверждение действия: всплывает у кнопки или рамки */
.confirm-pop { position: fixed; z-index: 50; width: max-content; max-width: min(340px, calc(100vw - 16px)); padding: var(--s3);
               background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-2); }
.confirm-pop p { margin: 0 0 12px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.confirm-actions { display: flex; gap: var(--s2); }

@media (max-width: 520px) {
  .ghost-btn { padding: 0 12px; font-size: 0; gap: 6px; }
  .ghost-btn svg, .ghost-n { font-size: var(--fs-s); }
}