/* BMW M x Mickey, softened for readability (docs/DESIGN.md «Mickey Mini App adaptation»): carbon canvas, plain-case Onest headings,
   Unbounded only on big KPI numbers, 8/12 radii, soft surfaces instead of hard borders, M stripe on the active tab only.
   Telegram theme params first, neutral fallbacks for light/dark outside Telegram. Brand red #de1b23 stays the action colour. */
@font-face { font-family: Onest; font-weight: 400; font-display: swap; src: url(fonts/onest-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Onest; font-weight: 400; font-display: swap; src: url(fonts/onest-latin-400-normal.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; }
@font-face { font-family: Onest; font-weight: 600; font-display: swap; src: url(fonts/onest-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Onest; font-weight: 600; font-display: swap; src: url(fonts/onest-latin-600-normal.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; }
@font-face { font-family: Unbounded; font-weight: 700; font-display: swap; src: url(fonts/unbounded-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Unbounded; font-weight: 700; font-display: swap; src: url(fonts/unbounded-latin-700-normal.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; }

:root {
  --brand: #de1b23;
  --brand-hover: #c4161d;
  --on-brand: #fff;
  --scrim: rgb(0 0 0 / .72);
  --m-stripe: linear-gradient(90deg, #0066b1 0 33.34%, #1c69d4 33.34% 66.67%, #e22718 66.67% 100%);
  --fb-page: #f3f3f3; --fb-surface: #fff; --fb-text: #111; --fb-hint: #5b5b5b; --fb-link: #0653b6;
  --danger: #b3141b; --danger-bg: #fdecec;
  --ok: #0f6b3a; --ok-bg: #e7f5ec;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r1: 8px; --r2: 12px; --r-pill: 999px; /* concentric: card 12 = control 8 + 4 */
  --page: var(--tg-theme-secondary-bg-color, var(--fb-page));
  --surface: var(--tg-theme-bg-color, var(--fb-surface));
  --text: var(--tg-theme-text-color, var(--fb-text));
  --hint: color-mix(in srgb, var(--text) 62%, var(--surface)); /* derived, not tg hint-color: Telegram's #999 on white is 2.85:1 */
  --link: var(--tg-theme-link-color, var(--fb-link));
  --line: color-mix(in srgb, var(--text) 22%, transparent);
  --line-ctl: color-mix(in srgb, var(--text) 50%, transparent);
  --line-soft: color-mix(in srgb, var(--text) 12%, transparent);
  --wash: color-mix(in srgb, var(--text) 6%, transparent);
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --font: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Unbounded, Onest, system-ui, sans-serif;
  --dur: 150ms; --ease: cubic-bezier(.2, 0, 0, 1);
  --top-h: 48px;
  --bar-h: 76px;
  --status-measure: 560px;
  --sa-t: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
  --sa-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --sa-l: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --sa-r: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --fb-page: #000; --fb-surface: #121212; --fb-text: #f2f2f2; --fb-hint: #a9a9a9; --fb-link: #8ab4f8; --danger: #ff8f94; --danger-bg: #2e1214; --ok: #7ee2a8; --ok-bg: #0f2a1a; }
}
:root[data-scheme="dark"] { --fb-page: #000; --fb-surface: #121212; --fb-text: #f2f2f2; --fb-hint: #a9a9a9; --fb-link: #8ab4f8; --danger: #ff8f94; --danger-bg: #2e1214; --ok: #7ee2a8; --ok-bg: #0f2a1a; color-scheme: dark; }
:root[data-scheme="light"] { --fb-page: #f3f3f3; --fb-surface: #fff; --fb-text: #111; --fb-hint: #5b5b5b; --fb-link: #0653b6; --danger: #b3141b; --danger-bg: #fdecec; --ok: #0f6b3a; --ok-bg: #e7f5ec; color-scheme: light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 15px/1.5 var(--font); padding-left: var(--sa-l); padding-right: var(--sa-r); -webkit-tap-highlight-color: transparent; }
main { max-width: 1200px; margin: 0 auto; padding: var(--s4); }
main:focus-visible, h1:focus-visible, h2:focus-visible { outline: none; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--font); font-weight: 600; text-wrap: balance; }
h1 { font-size: 22px; line-height: 1.25; margin: 0; }
h2 { font-size: 17px; line-height: 1.3; margin: 0 0 var(--s3); }
h3 { font-size: 14px; line-height: 1.3; margin: 0; }
@media (min-width: 1000px) { h1 { font-size: 26px; } }
.muted { color: var(--hint); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pad { padding: var(--s5) 0; }
[hidden] { display: none !important; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; pointer-events: none; }
.ico.sm { width: 16px; height: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* tabs: the M stripe marks only the active one */
.top { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); padding-top: var(--sa-t); }
.tabs { display: flex; max-width: 1200px; margin: 0 auto; padding: 0 var(--s2); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; display: inline-flex; align-items: center; min-height: var(--top-h); padding: 0 var(--s3); color: var(--hint); text-decoration: none; font-weight: 600; font-size: 14px; transition: color var(--dur); }
.tab::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -1px; height: 3px; background: var(--m-stripe); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.tab[aria-current="page"] { color: var(--text); }
.tab[aria-current="page"]::after { transform: none; }
@media (hover: hover) { .tab:hover { color: var(--text); } }

/* buttons & fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border-radius: var(--r1); border: 1px solid transparent; background: var(--wash); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--dur), transform var(--dur) var(--ease), border-color var(--dur); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
@media (hover: hover) { .btn:hover { background: color-mix(in srgb, var(--text) 12%, transparent); } .btn.primary:hover:not([aria-disabled="true"]):not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); } }
.btn:active { transform: scale(.97); }
.btn[aria-disabled="true"], .btn:disabled { background: color-mix(in srgb, var(--text) 12%, var(--surface)); border-color: transparent; color: var(--hint); cursor: default; transform: none; }
.btn.busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.link { border: 0; background: none; color: var(--link); padding: 0 var(--s2); font-size: 14px; }
@media (hover: hover) { .btn.link:hover { background: none; text-decoration: underline; } }
.btn.quiet { background: transparent; border-color: var(--line); }
.btn.icon { width: 44px; padding: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.field > label, .lbl { font-size: 13px; font-weight: 600; color: var(--hint); display: flex; justify-content: space-between; gap: var(--s2); }
.field .count { font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.field .count.over { color: var(--danger); font-weight: 600; }
input, select, textarea { width: 100%; min-height: 44px; padding: var(--s2) var(--s3); border-radius: var(--r1); border: 1px solid var(--line-ctl); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
textarea { min-height: 160px; resize: vertical; }
input::placeholder { color: var(--hint); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--text); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input[type="search"] { -webkit-appearance: none; appearance: none; }
.err { color: var(--danger); font-size: 13px; display: flex; gap: var(--s1); align-items: flex-start; }
.err::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: var(--i-alert) center / contain no-repeat; mask: var(--i-alert) center / contain no-repeat; }
.hint { color: var(--hint); font-size: 13px; font-variant-numeric: tabular-nums; margin: 0; }
p.hint + p.hint { margin-top: var(--s2); }

/* list: toolbar, filter sheet, chips */
.head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.toolbar { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.toolbar.stick { position: sticky; top: calc(var(--top-h) + var(--sa-t) + 1px); z-index: 4; padding: var(--s2) 0; margin-top: calc(var(--s2) * -1); background: var(--page); }
.search { position: relative; flex: 1 1 auto; min-width: 0; }
.search .ico { position: absolute; left: var(--s3); top: 50%; margin-top: -10px; color: var(--hint); }
.search input { padding-left: 40px; }
.fbtn .n { font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; padding: 0 var(--s3); border: 0; border-radius: var(--r-pill); background: var(--wash); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; max-width: 100%; transition: background var(--dur), transform var(--dur) var(--ease); }
.chip:active { transform: scale(.97); }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .chip:hover { background: color-mix(in srgb, var(--text) 12%, transparent); } }
.tgl { position: relative; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--line-ctl); border-radius: var(--r1); background: var(--surface); font-size: 14px; cursor: pointer; transition: background var(--dur), border-color var(--dur); }
.tgl input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.tgl-box { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--text); border-radius: 4px; color: transparent; flex: none; transition: background var(--dur), color var(--dur); }
.tgl:has(input:checked) { border-color: var(--text); background: var(--wash); font-weight: 600; }
.tgl:has(input:checked) .tgl-box { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.tgl:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
@media (hover: hover) { .tgl:hover { background: var(--wash); } }
.fpanel { padding: 0; border: 0; border-radius: var(--r2); background: var(--surface); color: var(--text); max-width: none; max-height: none; }
.fpanel .fp-head { display: none; }
.fp-body { display: grid; gap: var(--s2); }
.fp-body select.on { border-color: var(--text); font-weight: 600; }
@media (max-width: 999px) {
  .fpanel { position: fixed; inset: auto 0 0 0; width: 100%; margin: 0; max-height: 85dvh; overflow: auto; border-radius: var(--r2) var(--r2) 0 0; padding-bottom: var(--sa-b); }
  .fpanel:not([open]) { display: none; }
  .fpanel::backdrop { background: rgb(0 0 0 / .6); }
  .fpanel[open] { animation: sheet-in 200ms var(--ease); }
  .fpanel[open]::backdrop { animation: fade-in 200ms var(--ease); }
  .fpanel.closing { animation: sheet-out 150ms var(--ease) forwards; }
  .fpanel.closing::backdrop { animation: fade-out 150ms var(--ease) forwards; }
  .fpanel .fp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
  .fpanel .fp-head h2 { margin: 0; }
  .fpanel .fp-body { padding: var(--s4); }
  .fpanel .fp-foot { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); }
  .fpanel .fp-foot .primary { flex: 1; }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
@keyframes sheet-out { to { transform: translateY(16px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@media (min-width: 1000px) {
  .fbtn { display: none; }
  .fpanel { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: center; gap: var(--s2); position: static; margin: 0 0 var(--s3); background: transparent; } /* dialog UA width is fit-content */
  .fp-body, .fp-foot { display: contents; }
  .fp-show, .reset-m { display: none; }
  .chips.m { display: none; }
}
.card { background: var(--surface); border-radius: var(--r2); }
.rows { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.rows li + li { border-top: 1px solid var(--line-soft); }
.row { display: grid; gap: 2px var(--s3); padding: var(--s3) var(--s4); min-height: 44px; color: inherit; text-decoration: none; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title price" "meta st"; align-items: center; transition: background var(--dur); }
.row .c-sku { grid-area: sku; } .row .c-title { grid-area: title; font-weight: 600; line-height: 1.3; } .row .c-mm { grid-area: meta; }
.row .c-price { grid-area: price; text-align: right; font-weight: 600; } .row .c-av { grid-area: avail; text-align: right; }
.row .c-st { grid-area: st; display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); }
.row .c-upd { grid-area: upd; text-align: right; }
.row .c-ver, .row .c-av, .row .c-sku, .row .c-upd { display: none; }
.row .c-mm { display: flex; gap: var(--s2); min-width: 0; font-size: 13px; }
.row .c-mm .sku { font-variant-numeric: tabular-nums; flex: none; }
.row.hdr { display: none; }
@media (hover: hover) { a.row:hover { background: var(--wash); } }
a.row:active { background: var(--wash); }
a.row:focus-visible, .tab:focus-visible, .seg-b:focus-visible { outline-offset: -2px; } /* inside the box: .rows / .tabs / .seg clip overflow */
/* 300+ rows: skip layout/paint of off-screen ones */
.rows li { content-visibility: auto; contain-intrinsic-size: auto 72px; }
@media (min-width: 1000px) {
  .row { grid-template-columns: 80px minmax(0, 1.6fr) minmax(0, 1fr) 104px 128px 150px 40px 136px; grid-template-areas: "sku title meta price avail st ver upd"; align-items: center; }
  .row .c-price, .row .c-ver, .row .c-upd { text-align: right; } .row .c-av { text-align: left; padding-left: var(--s3); }
  .row .c-ver, .row .c-av, .row .c-sku, .row .c-upd { display: block; }
  .row .c-mm .sku { display: none; }
  .row .c-st { justify-content: flex-start; flex-wrap: wrap; }
  .row.hdr { display: grid; background: var(--wash); font-size: 12px; font-weight: 600; color: var(--hint); min-height: 40px; }
  .row.hdr > * { grid-area: auto; font-weight: 600; }
  .row.hdr .r { text-align: right; }
}
/* readiness «6/11»: compact count, full = ok */
.rd { display: inline-flex; align-items: center; gap: var(--s1); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--hint); }
.rd.full { color: var(--ok); }
.badge { display: inline-block; padding: 0 var(--s2); font-size: 12px; line-height: 22px; border-radius: var(--r-pill); background: var(--wash); }
.badge.warn { color: var(--danger); background: var(--danger-bg); }
.empty { text-align: center; padding: var(--s7) var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.skel { height: 56px; margin: var(--s2) var(--s4); background: var(--wash); border-radius: var(--r1); animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .4; } }
.more { display: flex; justify-content: center; padding: var(--s4) 0; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .c-title { overflow-wrap: anywhere; }
.row .c-mm span:not(.sku) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Avito tab */
.info { margin-bottom: var(--s3); border-radius: var(--r1); background: var(--surface); }
.info summary { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); cursor: pointer; list-style: none; font-size: 13px; color: var(--hint); }
.info summary::-webkit-details-marker { display: none; }
.info summary .ico:last-child { margin-left: auto; transition: transform var(--dur) var(--ease); }
.info[open] summary .ico:last-child { transform: rotate(180deg); }
.info summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info .info-body { padding: 0 var(--s3) var(--s3); display: grid; gap: var(--s2); }
.row.av { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "thumb title price" "thumb meta avail" "views views contacts" "link link prod" "upd upd upd"; row-gap: 2px; padding-block: var(--s3); }
.row.av .c-av { display: block; }
.row.av.editing { grid-template-areas: "thumb title price" "thumb meta avail" "views views contacts" "link link prod" "upd upd upd" "ed ed ed"; }
/* Disk photo picked by title + price (never the listing's real Avito photo): 3:4 box, no caption; no match = muted placeholder */
.row .c-thumb { grid-area: thumb; align-self: start; position: relative; display: block; width: 64px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--wash); border-radius: var(--r1); }
.c-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-thumb.none { display: flex; align-items: center; justify-content: center; color: var(--hint); }
.row .c-prod { grid-area: prod; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: var(--s3); }
.c-prod .btn.link { padding: 0; min-height: 44px; }
.c-prod a { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.c-ed { grid-area: ed; display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r1); background: var(--wash); }
.c-ed select { max-width: var(--status-measure); }
.c-ed .hint, .c-ed .err { margin: 0; }
.c-ed .actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.row .c-link { grid-area: link; } .row .c-views { grid-area: views; } .row .c-contacts { grid-area: contacts; text-align: right; }
.row.av .c-upd { display: block; align-self: center; text-align: left; font-size: 12px; }
.c-views .days { font-weight: 400; }
.c-views > *, .c-contacts > * { display: block; }
.c-link a { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; white-space: nowrap; }
.c-views .lbl, .c-contacts .lbl { font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; }
.c-views, .c-contacts { font-weight: 600; }
.c-contacts .days { font-weight: 400; }
.row.av .c-mm { display: block; }
@media (min-width: 1000px) {
  /* «Товар» sits under «Ссылка» in one column: a 9th column would squeeze the title to ~70px at 1200px */
  .row.av { grid-template-columns: 64px minmax(0, 1.2fr) 104px 96px 116px 104px 104px minmax(160px, 1fr) 160px; grid-template-areas: "thumb title meta price avail views contacts link upd" "thumb title meta price avail views contacts prod upd"; row-gap: 0; }
  .row.av.hdr { grid-template-areas: "thumb title meta price avail views contacts link upd"; }
  .row.av.editing { grid-template-areas: "thumb title meta price avail views contacts link upd" "thumb title meta price avail views contacts prod upd" "ed ed ed ed ed ed ed ed ed"; }
  .row .c-thumb { grid-row: span 2; align-self: center; }
  .row.av.editing .c-ed { margin-top: var(--s2); }
  .row.av .c-views, .row.av .c-contacts { text-align: right; }
  .row.av .c-upd { text-align: right; }
  .row.av .c-prod { justify-content: flex-start; }
  .row.av .c-link, .row.av.hdr > :nth-child(8), .row.av .c-prod { padding-left: var(--s2); }
  .row.av .c-av { padding-left: 0; text-align: left; }
  .c-views .lbl, .c-contacts .lbl { display: none; }
}
/* mouse desktop: denser stacked link/product cell; touch keeps 44px */
@media (min-width: 1000px) and (pointer: fine) { .c-link a, .c-prod a, .c-prod .btn.link { min-height: 32px; } }

/* editor */
.crumb { display: inline-flex; align-items: center; min-height: 44px; margin-left: calc(var(--s2) * -1); padding: 0 var(--s2); text-decoration: none; }
.editor { display: grid; gap: var(--s4); }
@media (min-width: 960px) { .editor { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); align-items: start; } }
.panel { padding: var(--s4); }
.grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid { grid-template-columns: 1fr 1fr; } .grid .wide { grid-column: 1 / -1; } }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s4); }
.savebar { margin-top: var(--s4); }
@media (max-width: 719px) {
  body:has(.savebar) main { padding-bottom: calc(var(--bar-h) + var(--sa-b)); }
  .savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; margin: 0; padding: var(--s3) calc(var(--s4) + var(--sa-r)) calc(var(--s3) + var(--sa-b)) calc(var(--s4) + var(--sa-l)); background: var(--surface); border-top: 1px solid var(--line); flex-wrap: nowrap; }
  .savebar .primary { flex: 1; }
}
.banner { padding: var(--s3) var(--s4); border-radius: var(--r1); background: var(--wash); margin-bottom: var(--s4); display: flex; gap: var(--s2); align-items: flex-start; }
.banner .ico { margin-top: 2px; }
.banner.bad { color: var(--danger); background: var(--danger-bg); }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line-soft); }
.hist .badge { margin-left: var(--s2); }
.hist li:first-child { border-top: 0; }
/* product card: every Avito listing of the product */
.lst { list-style: none; margin: 0; padding: 0; }
.lst li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s1) var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line-soft); line-height: 1.4; }
.lst li:first-child { border-top: 0; }
.lst .l-title { position: relative; color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-ctl); text-underline-offset: 3px; }
.lst .l-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); }
.lst .l-ext { position: relative; grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: var(--s1); font-size: 13px; }
.lst .l-title::before, .lst .l-ext::before { content: ""; position: absolute; inset: -13px 0; } /* 44px hit area without extra visible gap */
@media (hover: hover) { .lst .l-title:hover { color: var(--link); text-decoration-color: currentColor; } }
.lst .lnk:active { opacity: .8; }
/* owner's actions (2c): per-row buttons, deliberate multi-select, confirm dialog */
.lst .l-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.lst.sel li { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: var(--s2); }
.lst.sel .l-title { grid-column: 2; }
.lst.sel .l-meta, .lst.sel .l-ext, .lst.sel .l-act { grid-column: 2 / -1; }
.l-sel { position: relative; grid-column: 1; grid-row: 1 / span 4; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -11px; cursor: pointer; }
.l-sel input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.l-sel:has(input:checked) .tgl-box { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.l-sel:has(input:focus-visible) .tgl-box { outline: 2px solid var(--text); outline-offset: 2px; }
@media (hover: hover) { .l-sel:hover .tgl-box { background: var(--wash); } .l-sel:hover input:checked + .tgl-box { background: var(--brand-hover); } }
.l-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.l-bar.on { padding: var(--s3); border-radius: var(--r1); background: var(--wash); }
.l-bar .btn { gap: 0; } .l-more { margin-left: .3em; }
@media (max-width: 559px) { .l-bar .btn { flex: 1 1 auto; } .l-more { display: none; } } /* phone: «Снять / Вернуть / Цена» in one even row, the selected count above says what they apply to */
.l-bar .l-n { flex: 1 1 100%; font-size: 13px; color: var(--hint); font-variant-numeric: tabular-nums; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
@media (hover: hover) { .btn.danger:hover:not([aria-disabled="true"]):not(:disabled) { background: color-mix(in srgb, var(--danger) 85%, var(--text)); border-color: transparent; } }
/* product card: «Тот же товар» (cards that are one physical item) */
.same-product > * + * { margin-top: var(--s3); }
.same-product > :empty { margin-top: 0; }
.same-list { list-style: none; margin: 0; padding: 0; }
.same-list li { display: flex; align-items: center; gap: var(--s3); border-top: 1px solid var(--line-soft); }
.same-list li:first-child { border-top: 0; }
.same-link { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); min-height: 44px; padding: var(--s2) 0; color: var(--text); text-decoration: none; }
.same-link span { min-width: 0; overflow-wrap: anywhere; color: var(--hint); }
.same-link strong { color: var(--link); text-decoration: underline; text-decoration-color: var(--line-ctl); text-underline-offset: 3px; }
@media (hover: hover) { .same-link:hover strong { text-decoration-color: currentColor; } }
.same-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.same-actions:empty { display: none; }
.same-product .banner { margin-bottom: 0; flex-wrap: wrap; }
.same-product .banner > span { flex: 1 1 0; min-width: 14ch; }
.same-dialog .err + .btn { justify-self: start; }
@media (max-width: 559px) { .same-actions .btn { flex: 1 1 auto; } }
.adlg { padding: 0; border: 0; border-radius: var(--r2); background: var(--surface); color: var(--text); width: min(560px, calc(100% - 32px)); max-width: none; max-height: min(85dvh, 720px); overflow: auto; }
.adlg::backdrop { background: var(--scrim); }
.adlg[open] { animation: sheet-in 200ms var(--ease); }
.adlg[open]::backdrop { animation: fade-in 200ms var(--ease); }
.adlg.closing { animation: sheet-out 150ms var(--ease) forwards; }
.adlg.closing::backdrop { animation: fade-out 150ms var(--ease) forwards; }
.adlg .ad-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.adlg .ad-head h2 { margin: 0; }
.adlg .ad-body { padding: var(--s4); display: grid; gap: var(--s3); align-content: start; }
.adlg .ad-body p { margin: 0; }
.adlg .ad-foot { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s4); position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); }
.adlg .ad-sum { display: grid; gap: var(--s3); }
.adlg .banner { margin: 0; flex-wrap: wrap; }
.adlg .banner > span { flex: 1 1 0; min-width: 14ch; }
.adlg .banner .btn { margin-left: auto; }
.ad-sum p.small { color: var(--text); }
.adlg .ad-skel { margin: 0; background: color-mix(in srgb, var(--text) 10%, transparent); } /* visible on the dialog surface in dark */
.ad-count { font-weight: 600; }
.ad-list { list-style: none; margin: 0; padding: 0; }
.ad-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line-soft); line-height: 1.4; }
.ad-list li:first-child { border-top: 0; }
.ad-list .ad-t { overflow-wrap: anywhere; }
.ad-list .ad-why { grid-column: 1 / -1; color: var(--hint); }
.ad-sum h3 { margin-top: var(--s1); color: var(--hint); }
@media (max-width: 559px) {
  .adlg { position: fixed; inset: auto 0 0 0; width: 100%; margin: 0; border-radius: var(--r2) var(--r2) 0 0; padding-bottom: var(--sa-b); }
  .adlg .ad-foot .btn { flex: 1; }
}
.proposal { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r1); background: var(--wash); }
.proposal .tag { font-size: 12px; font-weight: 600; color: var(--danger); }
.proposal.stale { opacity: .8; }
.proposal.stale .tag { color: var(--hint); }
.proposal p { margin: var(--s1) 0 var(--s2); white-space: pre-wrap; overflow-wrap: anywhere; }
.stack > * + * { margin-top: var(--s4); }
.sub { margin: var(--s2) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line-soft); }

/* gate screens */
.gate { max-width: 420px; margin: var(--s7) auto; padding: var(--s5); text-align: center; display: flex; flex-direction: column; gap: var(--s3); align-items: center; }
.gate h1 { font-size: 16px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--s5) + var(--sa-b)); transform: translateX(-50%); max-width: calc(100% - 32px); padding: var(--s3) var(--s4); border-radius: var(--r1); background: var(--text); color: var(--surface); font-size: 14px; animation: rise 150ms var(--ease); z-index: 10; }
body:has(.savebar) .toast { bottom: calc(var(--bar-h) + var(--s3) + var(--sa-b)); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

/* status, readiness, approvals, proposals */
.pill { display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); font-size: 12px; font-weight: 600; line-height: 22px; border-radius: var(--r-pill); background: var(--wash); color: var(--text); white-space: nowrap; }
.pill .ico { width: 12px; height: 12px; stroke-width: 3; }
.pill.ready { background: color-mix(in srgb, var(--link) 14%, transparent); color: var(--link); }
.pill.approved { background: var(--ok-bg); color: var(--ok); }
.status-panel { margin-bottom: var(--s4); }
.status-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.status-head h2 { margin: 0; }
.rdy { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); max-width: var(--status-measure); }
.rdy .meter { flex: 1; height: 6px; border-radius: var(--r-pill); overflow: hidden; background: var(--line-soft); position: relative; }
.rdy .meter::after { content: ""; position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 200ms var(--ease); }
.rdy.full .meter::after { background: var(--ok); }
.rdy .val { font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.rdy .lab { font-size: 12px; color: var(--hint); }
.missing-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); max-width: var(--status-measure); }
.check { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; padding: 0 var(--s3); font: inherit; font-size: 13px; text-align: left; overflow-wrap: anywhere; color: var(--text); background: transparent; border-radius: var(--r-pill); }
.check.missing { border: 0; background: var(--danger-bg); color: var(--danger); font-weight: 600; cursor: pointer; transition: background var(--dur), transform var(--dur) var(--ease); }
.check.missing:active { transform: scale(.97); }
@media (hover: hover) { .check.missing:hover { background: color-mix(in srgb, var(--danger) 18%, var(--danger-bg)); } }
.check.blocked { border: 0; background: var(--danger-bg); color: var(--danger); opacity: .8; }
.pub { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r1); background: var(--wash); font-weight: 600; max-width: var(--status-measure); }
.pub-label { color: var(--hint); font-weight: 600; }
.pub.no { background: var(--danger-bg); }
.pub.yes { color: var(--ok); background: var(--ok-bg); }
.pub.yes .pub-label { color: inherit; }
.pub-sum { display: flex; align-items: center; gap: var(--s2); }
.pub-why { margin: var(--s2) 0 0; padding-left: var(--s4); font-weight: 400; font-size: 13px; color: var(--hint); }
.pub-errors { display: grid; gap: var(--s2); max-width: var(--status-measure); margin: 0 0 var(--s3); justify-items: start; }
.pub-errors .check { width: 100%; }
.approval-info { margin: 0 0 var(--s3); font-size: 13px; }
.confirm { border-radius: var(--r1); background: var(--wash); padding: var(--s3) var(--s4); }
.confirm p { margin: var(--s2) 0; }
.confirm .warn { color: var(--text); font-weight: 600; display: flex; gap: var(--s2); }
.confirm dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: var(--s3) 0; }
.confirm dt { color: var(--hint); }
.confirm dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.props > * + * { margin-top: var(--s3); }
.diff { padding: var(--s3); border-radius: var(--r1); background: var(--wash); }
.diff-row { display: grid; gap: var(--s1); margin-top: var(--s2); overflow-wrap: anywhere; }
.diff-row > span { font-size: 12px; font-weight: 600; color: var(--hint); }
.diff del { color: var(--danger); } .diff ins { text-decoration: none; font-weight: 600; }
.diff del::before { content: "было: "; } .diff ins::before { content: "стало: "; }

input, select, textarea, [tabindex="-1"] { scroll-margin-top: calc(var(--top-h) + var(--sa-t) + var(--s4)); scroll-margin-bottom: calc(var(--bar-h) + var(--s4)); }
select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-repeat: no-repeat; background-size: 6px 6px; background-position: right 17px center, right 11px center; /* caret from two token-coloured gradients */ background-image: linear-gradient(45deg, transparent 50%, var(--hint) 50%), linear-gradient(135deg, var(--hint) 50%, transparent 50%); }

/* ---------- shop dashboard, listing card, journal (ACT-546) ---------- */
.seg { display: flex; gap: var(--s2); margin-bottom: var(--s3); overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg.wrap { flex-wrap: wrap; overflow: visible; }
.seg-b { flex: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; transition: background var(--dur), border-color var(--dur), transform var(--dur) var(--ease); }
.seg-b:active { transform: scale(.97); }
.seg-b[aria-pressed="true"], .seg-b[aria-current="page"] { background: var(--text); color: var(--surface); font-weight: 600; }
.seg-b[aria-current="page"]:focus-visible { outline-color: var(--surface); }
@media (hover: hover) { .seg-b:hover:not([aria-pressed="true"]):not([aria-current="page"]) { background: var(--wash); } }
.lnk { color: var(--link); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .lnk:hover { text-decoration: underline; } }
/* whole listing row opens the card: the title link stretches over the row, real controls sit above it */
.row.av { position: relative; }
a.stretch { color: inherit; text-decoration: none; }
a.stretch::after { content: ""; position: absolute; inset: 0; }
a.stretch:focus-visible { outline: none; }
a.stretch:focus-visible::after { outline: 2px solid var(--text); outline-offset: -2px; }
.row.av .c-link a, .row.av .c-prod, .row.av .c-ed, .row.av .c-thumb { position: relative; z-index: 1; }
.row.av .c-prod > * { position: relative; }
.row.av:not(.hdr):not(.card-head):not(.editing):has(a.stretch) { cursor: pointer; }
@media (hover: hover) { .rows li:has(a.stretch):hover { background: var(--wash); } }
.skel.kpi-skel { height: 120px; margin: 0; }
.card.skel { margin: 0 0 var(--s3); }
.kpis { display: grid; gap: var(--s3); margin-bottom: var(--s4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .kpis { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.kpi h3 { color: var(--hint); }
.big { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.kv .k { flex: 1 1 auto; font-size: 13px; }
.kv .v { font-weight: 600; font-size: 18px; }
.kv .dl, .kv .inc { flex-basis: 100%; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.kv .inc { color: var(--hint); }
.dl.up { color: var(--ok); } .dl.down { color: var(--danger); }
.kvb + .kvb { border-top: 1px solid var(--line-soft); padding-top: var(--s2); }
.svc { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: var(--s1); }
.svc li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); min-width: 0; }
.svc li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.svc li > .num { flex: none; }
.dgrid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 1000px) { .dgrid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.dgrid > .dsec { margin: 0; } /* the grid gap spaces them; inside .stack they keep its margin */
.agroups { display: grid; gap: var(--s4); }
.agroup h3, .sub3 { color: var(--hint); margin-bottom: var(--s1); }
.sub3 { margin-top: var(--s4); }
.flist { list-style: none; margin: 0; padding: 0; }
.flist > li { border-top: 1px solid var(--line-soft); padding: var(--s2) 0; }
.flist > li:first-child { border-top: 0; }
.frow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); min-width: 0; }
.frow .t { font-weight: 600; }
.frow.j { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s2); align-items: start; }
.jt { display: grid; gap: 2px; min-width: 0; }
.mark { display: inline-grid; place-items: center; width: 24px; height: 24px; font-weight: 600; border-radius: 50%; background: var(--wash); }
.mark.match { color: var(--ok); background: var(--ok-bg); }
.mark.none, .mark.wait, .mark.info { color: var(--hint); }
.mark.unknown { color: var(--text); }
.fold { min-height: 44px; padding: 0; }
.note { display: flex; gap: var(--s2); align-items: flex-start; margin: 0 0 var(--s3); padding: var(--s2) var(--s3); background: var(--wash); border-radius: var(--r1); font-size: 14px; }
.note .ico { margin-top: 2px; }
.cnts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s2); }
.cnt { display: flex; flex-direction: column; padding: var(--s2) var(--s3); border-radius: var(--r1); background: var(--wash); }
.cnt .big { font-size: 20px; }
@media (max-width: 559px) { .cnts { grid-template-columns: repeat(2, 1fr); } }
.badge.st-ok { color: var(--ok); background: var(--ok-bg); }
.badge.st-error, .badge.st-rate_limited { color: var(--danger); background: var(--danger-bg); }
.badge.partial { font-size: 12px; line-height: 20px; color: var(--text); }
.err-t { color: var(--danger); overflow-wrap: anywhere; flex-basis: 100%; }
.polls .frow { gap: var(--s1) var(--s3); }
/* listing card */
.row.av.card-head { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb title title" "thumb av price" "thumb link link" "thumb prod prod"; margin-bottom: var(--s4); background: var(--surface); border-radius: var(--r2); row-gap: var(--s1); }
.card-head .c-title h1 { font-size: 17px; }
.card-head .c-price { font-size: 20px; }
.card-head .c-prod { justify-content: flex-start; }
.row.av.card-head .c-av { grid-area: av; text-align: left; padding: 0; } /* .row .c-av names the list area «avail» */
@media (min-width: 1000px) {
  .row.av.card-head { grid-template-columns: 64px minmax(0, 1fr) auto auto auto auto; grid-template-areas: "thumb title av price link prod"; align-items: center; } /* .row.av alone would win and leave empty list columns between price and links */
  .card-head .c-title h1 { font-size: 22px; }
  .row.card-head .c-thumb { grid-row: auto; align-self: start; }
}
.card-head .c-link a, .card-head .c-prod a, .card-head .c-prod .btn.link { display: inline-flex; align-items: center; min-height: 44px; }
.facts { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; }
.facts dt { color: var(--hint); font-size: 13px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.charts { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .charts { grid-template-columns: 1fr 1fr; } }
.chart { margin: 0; }
.chart figcaption { display: flex; gap: var(--s3); align-items: baseline; margin-bottom: var(--s2); }
.chart figcaption .k { font-size: 13px; font-weight: 600; color: var(--hint); }
.chart figcaption .num { font-weight: 600; font-size: 18px; }
.chart figcaption .muted { margin-left: auto; }
.chart-svg { display: block; width: 100%; height: 96px; border-bottom: 1px solid var(--line-soft); }
.chart-svg .bar { fill: var(--text); rx: 1.5px; }
.chart-svg .gap { fill: var(--wash); stroke: var(--line-ctl); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.axis { display: flex; justify-content: space-between; margin-top: var(--s1); font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.legend > span { display: inline-flex; align-items: center; gap: var(--s2); }
.sw { width: 12px; height: 12px; display: inline-block; border-radius: 3px; }
.sw.bar { background: var(--text); } .sw.gap { background: var(--wash); border: 1px dashed var(--line-ctl); }
.evs { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line-soft); }
.ev:first-child { border-top: 0; }
.ev-t { grid-column: 1 / -1; }
.ev-x { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .ev { grid-template-columns: 150px 1fr auto; } .ev-t { grid-column: auto; } }
.tag-e { font-size: 12px; align-self: start; }
/* attention */
.att-list .skel { animation: none; }
.att-list { display: grid; gap: var(--s3); }
.att-card, .att-hist { padding: var(--s4); display: grid; gap: var(--s2); min-width: 0; }
.att-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.att-title { width: fit-content; max-width: 100%; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.att-card p, .att-hist p { margin: 0; overflow-wrap: anywhere; }
.att-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.att-detail { border-top: 1px solid var(--line-soft); padding-top: var(--s2); }
.att-detail summary { min-height: 44px; display: flex; align-items: center; color: var(--link); cursor: pointer; }
.att-detail p { padding-bottom: var(--s2); }
.att-history .badge { font-variant-numeric: tabular-nums; }
@media (max-width: 559px) { .att-actions .btn { width: 100%; } }

/* journal */
.jday { margin: var(--s4) 0 var(--s2); color: var(--hint); font-size: 13px; font-weight: 600; }
.jday::first-letter { text-transform: uppercase; }
.jent { display: grid; grid-template-columns: 48px 28px minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); background: var(--surface); border-top: 1px solid var(--line-soft); align-items: start; }
.jday + .jent { border-top: 0; border-radius: var(--r2) var(--r2) 0 0; }
.jent:has(+ .jday), .jent:last-child { border-radius: 0 0 var(--r2) var(--r2); }
.jday + .jent:has(+ .jday), .jday + .jent:last-child { border-radius: var(--r2); }
.jt-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--hint); }
.jent.poll .jt-ico { color: var(--danger); }
.jbody { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.jbody .lnk { position: relative; min-height: 24px; }
.jbody .lnk::before { content: ""; position: absolute; inset: -10px 0; } /* 44px hit area, row height unchanged */
@media (max-width: 559px) { .jent { grid-template-columns: 44px 24px minmax(0, 1fr); } .jent .tag-e { grid-column: 3; } }

/* preview «как на Avito»: phone-width column first, gallery beside the facts from 900px */
.pv { display: grid; gap: var(--s4); max-width: 1200px; margin: 0 auto; }
.pv-bar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pv-bar .pv-edit { margin-left: auto; }
.pv-skel { height: auto; margin: 0; aspect-ratio: 4 / 3; }

/* product card: form left, live preview right (>=960px; Telegram desktop opens the app ~990px wide); the «Как на Avito» block replaces it on narrower screens */
.pc { display: grid; gap: var(--s4); }
.pc-main { min-width: 0; display: grid; gap: var(--s4); }
.pc-main > * { margin: 0; }
.pc-side { display: none; }
.pc-top { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.pc-top h2 { margin: 0; }
.pc-top .btn { margin-left: auto; }
.pc-open .btn { margin-top: var(--s3); }
@media (min-width: 960px) {
  .pc { grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); align-items: start; }
  .pc-side { display: block; position: sticky; top: calc(var(--top-h) + var(--sa-t) + var(--s4)); max-height: calc(100dvh - var(--top-h) - var(--sa-t) - var(--s5)); overflow-y: auto; overscroll-behavior: contain; }
  .pc-open { display: none; }
  .pc .editor { grid-template-columns: minmax(0, 1fr); } /* the form column is ~600px here: history and proposals go under the form */
}
.ph-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--s2); }
.ph-list img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r1); background: var(--wash); }
.ph-skel { height: 72px; margin: 0; }

/* Avito look-alike. Deliberate exception to the Telegram/dark theming: Avito's own palette, fixed light in both themes
   (a light card in a neutral frame; dark theme keeps it light on purpose). Named tokens, used only by .av-*. */
:root { --av-bg: #fff; --av-text: #000; --av-hint: #5c5c5c; --av-line: #e0e0e0; --av-grey: #f2f1f0; --av-dark: #000; --av-on-dark: #fff; --av-focus: #0668e1; --av-scrim: rgb(0 0 0 / .6); --av-shadow: 0 1px 4px rgb(0 0 0 / .25); --r3: 24px; /* frame 24 = card 12 + padding 12 */ }
.av-frame { container-type: inline-size; padding: var(--s3); border-radius: var(--r3); background: var(--wash); }
.av-card { background: var(--av-bg); color: var(--av-text); border-radius: var(--r2); padding: var(--s4); font-size: 15px; line-height: 1.4; display: grid; gap: var(--s4) var(--s6); grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "head" "media" "aside" "loc" "params" "desc"; }
.av-card :focus-visible { outline: 2px solid var(--av-focus); outline-offset: 2px; }
.av-title:focus-visible { outline: none; } /* programmatic focus on route entry, not a control */
.av-main { display: contents; }
.av-crumbs { grid-area: crumbs; }
.av-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--s2); list-style: none; margin: 0; padding: 0; color: var(--av-hint); font-size: 13px; }
.av-crumbs li + li::before { content: "›"; margin-right: var(--s2); }
.av-head { grid-area: head; }
.av-title { margin: 0; font: 700 24px/1.2 var(--font); color: var(--av-text); text-wrap: balance; overflow-wrap: anywhere; }
.av-avail { margin: var(--s2) 0 0; }
.av-media { grid-area: media; min-width: 0; }
.av-gal { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r1); background: var(--av-grey); }
.av-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.av-track::-webkit-scrollbar { display: none; }
.av-track:focus-visible { outline-offset: -2px; }
.av-img { flex: none; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: start; scroll-snap-stop: always; user-select: none; -webkit-user-drag: none; }
.av-arrow { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--av-bg); color: var(--av-text); cursor: pointer; opacity: .9; box-shadow: var(--av-shadow); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.av-arrow.prev { left: var(--s3); }
.av-arrow.next { right: var(--s3); }
.av-arrow.prev .ico { transform: rotate(90deg); }
.av-arrow.next .ico { transform: rotate(-90deg); }
.av-arrow:active { transform: scale(.94); }
@media (hover: hover) { .av-arrow:hover { opacity: 1; } }
.av-count { position: absolute; right: var(--s3); bottom: var(--s3); padding: 0 var(--s2); font-size: 12px; line-height: 24px; border-radius: var(--r-pill); background: var(--av-scrim); color: var(--av-on-dark); pointer-events: none; }
.av-thumbs { display: flex; gap: var(--s2); margin-top: var(--s2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.av-thumbs::-webkit-scrollbar { display: none; }
.av-thumb { flex: none; width: 64px; height: 48px; padding: 0; border: 0; border-radius: var(--s1); overflow: hidden; background: var(--av-grey); cursor: pointer; box-shadow: 0 0 0 1px var(--av-line); opacity: .75; transition: opacity var(--dur) var(--ease); }
.av-thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--av-focus); }
.av-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .av-thumb:hover { opacity: 1; } }
.av-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); color: var(--av-hint); text-align: center; padding: var(--s4); }
.av-sub { font-size: 13px; }
.av-aside { grid-area: aside; }
.av-price { font: 700 28px/1.1 var(--font); }
.av-price.none { font: 400 18px/1.3 var(--font); color: var(--av-hint); }
.av-cta { display: grid; gap: var(--s2); margin-top: var(--s4); }
.av-btn { min-height: 48px; padding: 0 var(--s4); border: 0; border-radius: var(--r1); font: 600 16px/1 var(--font); }
.av-btn.dark { background: var(--av-dark); color: var(--av-on-dark); }
.av-btn.grey { background: var(--av-grey); color: var(--av-text); }
.av-btn:disabled { cursor: default; opacity: .6; } /* decorative: the buyer's buttons, not actions */
.av-note { margin: 0; color: var(--av-hint); font-size: 13px; text-align: center; }
.av-h { margin: 0 0 var(--s3); font: 700 20px/1.2 var(--font); color: var(--av-text); }
.av-sec p { margin: 0; overflow-wrap: anywhere; }
.av-loc { grid-area: loc; }
.av-params { grid-area: params; }
.av-desc { grid-area: desc; }
.av-desc p { white-space: pre-line; }
.av-params ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2) var(--s6); grid-template-columns: minmax(0, 1fr); }
.av-params li { overflow-wrap: anywhere; }
.av-k { color: var(--av-hint); }
/* wide frame: Avito's two columns (content | price + buttons), characteristics in two columns */
@container (min-width: 720px) {
  .av-card { padding: var(--s5); grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "crumbs crumbs" "head aside" "media aside" "loc aside" "params aside" "desc aside"; align-content: start; }
  .av-aside { position: sticky; top: var(--s4); align-self: start; }
  .av-title, .av-price:not(.none) { font-size: 32px; }
  .av-params ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .btn:active, .chip:active, .check.missing:active, .seg-b:active, .av-arrow:active { transform: none; }
}

/* Period evidence and the single-listing native action stay in their own wrapped rows. */
.av-filter-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: var(--s3); }
.av-filter-row select { min-width: 0; max-width: 100%; flex: 1 1 150px; }
.av-publication { display: grid; gap: var(--s1); }
.more-tab { display: none; }
.inq-queues a { text-decoration: none; }
.inq-intro { margin-bottom: var(--s4); }
.inq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s4); align-items: start; }
.inq-list, .inq-detail { min-width: 0; overflow-wrap: anywhere; }
.inq-detail { padding: var(--s4); }
.inq-detail h2 { margin: 0; }
.inq-rows { list-style: none; padding: 0; margin: 0; }
.inq-rows li + li { border-top: 1px solid var(--line-soft); }
.inq-row { display: grid; gap: var(--s2); padding: var(--s4); color: var(--text); text-decoration: none; }
.inq-row[aria-current="true"] { background: var(--wash); box-shadow: inset 3px 0 var(--brand); }
.inq-row:focus-visible { outline-offset: -2px; }
.inq-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
.inq-row:active { background: var(--wash); }
@media (hover: hover) { .inq-row:hover { background: var(--wash); } }
.inq-links { margin-block: var(--s3); font-size: 14px; }
.inq-gaps { padding-left: var(--s4); margin-block: var(--s3); }
.inq-messages { display: grid; gap: var(--s3); margin-block: var(--s5); }
.inq-message { padding-left: var(--s3); border-left: 2px solid var(--line); }
.inq-message p { margin: var(--s1) 0 0; white-space: pre-wrap; }
.inq-form-title { margin-block: var(--s5) var(--s3); }
.inq-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.inq-wide { grid-column: 1 / -1; }
.inq-form textarea { min-height: 96px; }
.inq-form .actions { margin-top: var(--s3); }
.inq-loading { padding: var(--s4); }
.inq-placeholder { height: var(--s7); background: var(--wash); border-radius: var(--r1); margin-top: var(--s3); }
.inq-pagination { padding: 0 var(--s4) var(--s4); }
.inq-back { display: none; }
.inq-more { display: grid; gap: var(--s3); padding: var(--s4); }
/* Queue navigation is frequent: no entrance or selection animation. */
.inq-grid .btn, .inq-grid .btn:active { transition: none; transform: none; }
@media (max-width: 767px) {
  .with-inquiries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding-inline: 0; }
  .with-inquiries .tab { justify-content: center; min-width: 0; padding-inline: var(--s1); font-size: 12px; }
  .with-inquiries #tab-products, .with-inquiries #tab-journal { display: none; }
  .with-inquiries .more-tab { display: inline-flex; }
  .inq-grid { grid-template-columns: minmax(0, 1fr); }
  .inq-grid:not(.has-detail) .inq-detail, .inq-grid.has-detail .inq-list { display: none; }
  .inq-back { display: inline-flex; }
  .inq-form { grid-template-columns: minmax(0, 1fr); }
}
.row.av .c-period { grid-area: evidence; display: grid; gap: var(--s1); overflow-wrap: anywhere; }
.row.av .c-archive { grid-area: archive; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.row.av { grid-template-areas: "thumb title price" "thumb meta avail" "views views contacts" "evidence evidence evidence" "link link prod" "upd upd upd" "archive archive archive"; }
.row.av.editing { grid-template-areas: "thumb title price" "thumb meta avail" "views views contacts" "evidence evidence evidence" "link link prod" "upd upd upd" "archive archive archive" "ed ed ed"; }
@media (min-width: 1000px) {
  .row.av { grid-template-areas: "thumb title meta price avail views contacts link upd" "thumb title meta price avail views contacts prod upd" "evidence evidence evidence evidence evidence evidence evidence archive archive"; }
  .row.av.editing { grid-template-areas: "thumb title meta price avail views contacts link upd" "thumb title meta price avail views contacts prod upd" "evidence evidence evidence evidence evidence evidence evidence archive archive" "ed ed ed ed ed ed ed ed ed"; }
  .row.av.hdr { grid-template-areas: "thumb title meta price avail views contacts link upd"; }
}
.row.av .c-archive { position: relative; z-index: 2; }

/* Performance: compact, readable surfaces within the existing Mickey theme. */
html { -webkit-font-smoothing: antialiased; }
main, .stack, .dsec, .chart, .row.av > * { min-width: 0; }
.performance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.performance-metric { display: grid; gap: var(--s2); padding: var(--s3); background: var(--wash); border-radius: var(--r1); min-width: 0; }
.performance-metric strong { font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.performance-metric .unknown { font-size: 14px; font-weight: 400; color: var(--hint); }
.performance-note { grid-column: 1 / -1; margin: var(--s2) 0 0; text-wrap: pretty; }
.chart { padding: var(--s3); background: var(--wash); border-radius: var(--r1); }
.chart figcaption { flex-wrap: wrap; gap: var(--s1) var(--s2); }
.chart-plot { position: relative; min-height: 132px; padding-top: var(--s3); cursor: crosshair; touch-action: pan-y; border-radius: 4px; }
.chart-plot:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.chart-svg { height: 120px; overflow: visible; }
.chart-svg .bar { fill: color-mix(in srgb, var(--link) 65%, var(--surface)); rx: 2px; transition: fill var(--dur); }
.chart-contacts .chart-svg .bar { fill: color-mix(in srgb, var(--ok) 70%, var(--surface)); }
.chart-svg .bar.selected { fill: var(--link); stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-contacts .chart-svg .bar.selected { fill: var(--ok); }
.chart-svg .gap { fill: transparent; stroke: var(--line-soft); }
.chart-svg .gap.selected { fill: var(--wash); stroke: var(--hint); }
.chart-detail { display: grid; gap: 3px; min-height: 108px; margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line-soft); font-size: 12px; line-height: 1.5; color: var(--hint); text-wrap: pretty; }
.chart-detail strong { font-size: 14px; color: var(--text); }
.chart-hint { margin: var(--s2) 0 0; font-size: 11px; }
.sw.bar { background: var(--link); }
.row.av.card-head { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb title price" "thumb av av" "link link link" "prod prod prod"; gap: var(--s2) var(--s3); padding: var(--s4); align-items: start; }
.card-head .c-title h1 { font-size: 22px; line-height: 1.25; text-wrap: pretty; }
.row.av.card-head .c-prod { padding-left: 0; justify-content: flex-start; }
.row.av.card-head .c-link { padding-left: 0; }
.row.av.card-head .c-thumb { grid-row: auto; }
.card-head .c-prod > .muted { flex: 1 1 240px; overflow-wrap: anywhere; }
.c-thumb img { outline: 1px solid rgb(255 255 255 / .1); outline-offset: -1px; }
@media (min-width: 1000px) {
  /* Keep the title useful at 1200px: supporting metadata gets its own line. */
  .row.av:not(.card-head):not(.hdr) { grid-template-columns: 64px minmax(220px, 1fr) 100px 100px 100px; grid-template-areas: "thumb title price views contacts" "thumb meta avail link link" "thumb evidence evidence evidence evidence" "upd upd prod prod archive"; gap: var(--s2) var(--s3); }
  .row.av.editing:not(.card-head) { grid-template-areas: "thumb title price views contacts" "thumb meta avail link link" "thumb evidence evidence evidence evidence" "upd upd prod prod archive" "ed ed ed ed ed"; }
  .row.av.hdr { display: grid; grid-template-columns: 64px minmax(220px, 1fr) 100px 100px 100px; grid-template-areas: none; gap: var(--s3); }
  .row.av .c-views .lbl, .row.av .c-contacts .lbl { display: block; }
  .row.av .c-upd { text-align: left; }
  .row.av .c-period { padding-block: var(--s1); }
  .row.av .c-link { padding-left: 0; }
  .row.av.card-head { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: "thumb title price" "thumb av av" "thumb link link" "thumb prod prod"; }
  .row.av.card-head .c-thumb { width: 80px; }
  .card-head .c-title h1 { font-size: 26px; max-width: 760px; }
  .card-head .c-price { font-size: 24px; }
}
@media (max-width: 639px) {
  .performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-metric strong { font-size: 18px; }
  .row.av.card-head { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "thumb title" "thumb price" "av av" "link link" "prod prod"; }
  .row.av.card-head .c-thumb { width: 56px; }
  .card-head .c-title h1 { font-size: 19px; }
  .row.av.card-head .c-price { text-align: left; }
  .chart-detail { min-height: 92px; }
  .row.av .c-period { padding-block: var(--s2); }
}
.dsec:has(.performance-grid) { margin-bottom: var(--s4); }
@media (min-width: 640px) {
  .row.av.card-head { grid-template-areas: "thumb title price" "thumb av av" "thumb link prod"; }
}
@media (max-width: 639px) {
  .row.av:not(.card-head):not(.hdr) { grid-template-areas: "thumb title title" "thumb meta meta" "price price avail" "views views contacts" "evidence evidence evidence" "link link prod" "upd upd upd" "archive archive archive"; }
  .row.av.editing:not(.card-head) { grid-template-areas: "thumb title title" "thumb meta meta" "price price avail" "views views contacts" "evidence evidence evidence" "link link prod" "upd upd upd" "archive archive archive" "ed ed ed"; }
  .row.av:not(.card-head) .c-price { text-align: left; padding-block: var(--s2); }
}
.archive-provenance { display: grid; gap: var(--s1); margin-top: var(--s1); }
.listing-costs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-block: var(--s1); }
.listing-costs > span { display: grid; gap: 2px; }
.listing-costs strong { color: var(--text); font-size: 14px; font-weight: 600; }
@media (max-width: 639px) { .listing-costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } }

/* Answer evidence shares inquiry tokens and control sizes; no extra motion. */
.answer-panel { border-top: 1px solid var(--line-soft); padding-top: var(--s5); margin-top: var(--s5); min-width: 0; }
.answer-panel > .hint, .answer-panel > .err { margin-bottom: var(--s3); }
.answer-stack { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.answer-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.answer-fact { padding: var(--s3); border: 1px solid var(--line-soft); border-radius: var(--r1); min-width: 0; }
.answer-fact .head { margin-bottom: var(--s2); }
.answer-value { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--s2) 0; }
.answer-fact .actions { margin-top: var(--s3); }
.answer-editor { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r2); }
.answer-car { margin: 0; padding: var(--s3); border: 1px solid var(--line-soft); border-radius: var(--r1); display: grid; gap: var(--s2); min-width: 0; }
.answer-field > span { display: block; }
.answer-panel details { min-width: 0; }
.answer-panel summary { min-height: 44px; padding: var(--s3) 0; cursor: pointer; font-weight: 600; }
.answer-panel .btn { white-space: normal; overflow-wrap: anywhere; }
.answer-panel textarea { min-width: 0; }

/* Local send-control reuses evidence surfaces and established control tokens. */
.send-control-panel { border-top: 1px solid var(--line-soft); margin-top: var(--s5); padding-top: var(--s5); min-width: 0; }
.send-control-panel > .hint, .send-control-panel > .err { margin-bottom: var(--s3); }
.send-stack { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.send-events { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.send-event, .send-policy-form { padding: var(--s3); border: 1px solid var(--line-soft); border-radius: var(--r1); min-width: 0; }
.send-event .head { margin: 0; }
.send-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.send-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.send-kinds { border: 1px solid var(--line-soft); border-radius: var(--r1); padding: var(--s3); margin: 0; min-width: 0; }
.send-kinds label { display: flex; align-items: center; gap: var(--s2); min-height: 44px; }
.send-kinds input { flex: none; width: 20px; min-height: 20px; height: 20px; margin: 0; }
.send-control-panel summary { min-height: 44px; padding: var(--s3) 0; cursor: pointer; font-weight: 600; }
.send-control-panel .btn { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 440px) { .send-policy-grid { grid-template-columns: minmax(0, 1fr); } }

/* Local bid-pilot preview uses the Mini App surfaces; no added motion. */
.bid-pilot { display: grid; gap: var(--s4); min-width: 0; }
.bid-section { display: grid; gap: var(--s3); min-width: 0; }
.bid-section p, .bid-section h2 { margin: 0; }
.bid-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s4); }
.bid-target { display: grid; align-content: start; gap: var(--s3); min-width: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r1); }
.bid-target h3, .bid-target p { overflow-wrap: anywhere; }
.bid-fields { display: grid; gap: var(--s4); min-width: 0; margin: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r1); }
.bid-fields legend { padding: 0 var(--s2); font-weight: 600; }
.bid-value { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bid-check { display: flex; align-items: flex-start; gap: var(--s3); min-height: 44px; padding: var(--s2) 0; cursor: pointer; }
.bid-check input { flex: none; width: 22px; height: 22px; min-height: 22px; margin: 0; }
.bid-details { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.bid-pilot summary { min-height: 44px; padding: var(--s3) 0; cursor: pointer; }
.bid-pilot .btn { transition: none; transform: none; }
.bid-pilot .btn:active { transform: none; }
@media (min-width: 800px) { .bid-fields { grid-template-columns: 1fr 1fr; } .bid-fields .bid-check, .bid-fields > p, .bid-fields > button { grid-column: 1 / -1; } }
.bid-pilot .card.bid-section { padding: var(--s4); }

/* Campaign previews reuse Mini App surfaces and keep state changes static. */
.campaigns, .campaign-section { display: grid; gap: var(--s3); min-width: 0; }
.campaigns { gap: var(--s4); }
.campaigns .card.campaign-section { padding: var(--s4); }
.campaign-section p, .campaign-section h2 { margin: 0; }
.campaign-fields { display: grid; gap: var(--s4); min-width: 0; margin: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r1); }
.campaign-fields legend { padding: 0 var(--s2); font-weight: 600; }
.campaign-value { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.campaign-message, .campaign-details { white-space: pre-wrap; overflow-wrap: anywhere; }
.campaign-details { max-width: 100%; font-size: 12px; }
.campaigns summary { min-height: 44px; padding: var(--s3) 0; cursor: pointer; }
.campaigns .btn { transition: none; transform: none; white-space: normal; overflow-wrap: anywhere; }
.campaigns .btn:active { transform: none; }
@media (min-width: 800px) { .campaign-fields { grid-template-columns: 1fr 1fr; } .campaign-fields > p, .campaign-fields > button { grid-column: 1 / -1; } }

/* Effects registry: existing evidence tokens, no added motion. */
.effects-stack { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.effects-stack > .head { margin-bottom: 0; }
.effects-stack > p { margin-top: 0; margin-bottom: 0; }
.effects-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.effects-list { margin: 0; padding-left: var(--s5); }
.effects-record { padding: var(--s3); border: 1px solid var(--line-soft); border-radius: var(--r1); min-width: 0; }
.effects-record > p { margin: var(--s2) 0; }
.effects-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.effects-stack summary { min-height: 44px; padding: var(--s3) 0; cursor: pointer; font-weight: 600; }
.effects-stack .btn { white-space: normal; overflow-wrap: anywhere; }
.effects-payment { border-top: 1px solid var(--line-soft); margin-top: var(--s5); padding-top: var(--s5); }
@media (max-width: 440px) { .effects-grid { grid-template-columns: minmax(0, 1fr); } }