:root {
  --accent: oklch(52% 0.16 250);
  --accent-ink: oklch(98% 0 0);
  --accent-soft: oklch(94% 0.04 250);
  --n50: oklch(98.5% 0.003 250);
  --n100: oklch(96% 0.005 250);
  --n200: oklch(91% 0.008 250);
  --n400: oklch(70% 0.01 250);
  --n600: oklch(48% 0.015 250);
  --n800: oklch(28% 0.02 250);
  --n900: oklch(18% 0.02 250);
  --ok: oklch(58% 0.14 150);
  --warn: oklch(70% 0.15 70);
  --bad: oklch(58% 0.18 25);
  --space-xs: .5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem;
  --r: 10px;
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; min-width: 0; }
html, body { overflow-x: hidden; max-width: 100%; }
html { color-scheme: light; }
body { margin: 0; font-family: var(--font); color: var(--n900); background: var(--n50); font-size: clamp(.95rem, .9rem + .25vw, 1.05rem); line-height: 1.55; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.015em; margin: 0 0 var(--space-xs); }
h1 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
h2 { font-size: clamp(1.2rem, 1.1rem + .6vw, 1.55rem); }
h3 { font-size: clamp(1.02rem, 1rem + .3vw, 1.2rem); }
.muted { color: var(--n600); }
.fine { color: var(--n600); font-size: .86em; margin: var(--space-xs) 0 0; }
.nd { color: var(--bad); font-style: italic; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button { font: inherit; cursor: pointer; }
.btn { min-height: 44px; padding: .55rem 1rem; border-radius: var(--r); border: 1px solid var(--n200); background: #fff; color: var(--n900); transition: transform .18s ease-out, box-shadow .18s ease-out; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px oklch(0% 0 0 / .08); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }

/* шапка */
.top { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--n200); }
.top-in { max-width: 1400px; margin: 0 auto; padding: .6rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; color: var(--n900); font-size: 1.2rem; }
.brand .mark { width: 30px; height: 30px; flex: 0 0 auto; display: block; }
.brand .beta { font-size: .7rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .1rem .5rem; }
.tabs { display: flex; gap: .25rem; margin-left: auto; }
.tab { min-height: 44px; padding: .5rem .9rem; border: 0; border-radius: var(--r); background: transparent; color: var(--n600); font-weight: 600; }
.tab.on { background: var(--accent-soft); color: var(--accent); }
#meta { width: 100%; font-size: .82rem; color: var(--n600); }

.notice { max-width: 1400px; margin: var(--space-sm) auto 0; padding: 0 clamp(1rem, 3vw, 2rem); }
.banner { border-radius: var(--r); padding: .7rem 1rem; margin: .5rem 0; font-size: .92em; border: 1px solid; }
.banner.warn { background: oklch(97% 0.04 70); border-color: oklch(85% 0.1 70); color: oklch(35% 0.08 60); }
.banner.info { background: var(--accent-soft); border-color: oklch(85% 0.06 250); color: var(--n800); }
.banner.archive { background: var(--n100); border-color: var(--n200); color: var(--n800); }

main { max-width: 1400px; margin: 0 auto; padding: var(--space-sm) clamp(1rem, 3vw, 2rem) var(--space-xl); }
.pane[hidden] { display: none; }

/* лоты */
.layout { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); gap: var(--space-md); align-items: start; }
.toolbar { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.toolbar input[type=search], .toolbar select { max-width: 100%; }
.toolbar input[type=search], .toolbar select { min-height: 44px; border: 1px solid var(--n200); border-radius: var(--r); padding: .5rem .8rem; font: inherit; background: #fff; }
.toolbar .opts { grid-column: 1 / -1; display: flex; gap: var(--space-sm); flex-wrap: wrap; font-size: .9em; color: var(--n600); align-items: center; }
#stats { font-size: .86em; color: var(--n600); margin-bottom: var(--space-xs); }
#lot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lot { display: grid; grid-template-columns: 1fr auto; background: #fff; border: 1px solid var(--n200); border-radius: var(--r); transition: transform .18s ease-out, box-shadow .18s ease-out; }
.lot:hover { transform: translateY(-2px); box-shadow: 0 8px 20px oklch(0% 0 0 / .07); }
.lot.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lot.excl { opacity: .75; }
.lot-main { display: grid; grid-template-columns: 52px 1fr; gap: .8rem; padding: .8rem; border: 0; background: transparent; text-align: left; color: inherit; width: 100%; }
.score { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; color: #fff; font-variant-numeric: tabular-nums; }
.score.hi { background: var(--ok); } .score.mid { background: var(--warn); color: var(--n900); } .score.lo { background: var(--n400); } .score.x { background: var(--n200); color: var(--n600); }
.score.inline { display: inline-grid; width: auto; height: auto; padding: .1rem .6rem; font-size: 1rem; border-radius: 8px; vertical-align: middle; }
.lot-title { font-weight: 700; } .lot-id { color: var(--n400); font-weight: 400; font-size: .85em; font-family: var(--mono); }
.lot-desc { color: var(--n600); font-size: .9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lot-meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .82em; color: var(--n600); margin-top: .3rem; }
.lot-excl { font-size: .82em; color: var(--bad); margin-top: .3rem; }
.tag { border-radius: 999px; padding: 0 .55rem; background: var(--n100); border: 1px solid var(--n200); }
.tag.expired { background: var(--n100); } .tag.open { background: oklch(94% 0.06 150); border-color: oklch(85% 0.1 150); }
.tag.conf-Высокая { background: oklch(94% 0.06 150); } .tag.conf-Средняя { background: oklch(96% 0.06 70); } .tag.conf-Низкая { background: oklch(95% 0.05 25); }
.fav { border: 0; background: transparent; font-size: 1.4rem; color: var(--n400); width: 48px; }
.fav.on { color: oklch(75% 0.16 80); }
.empty { padding: var(--space-md); color: var(--n600); background: #fff; border: 1px dashed var(--n200); border-radius: var(--r); }

/* карточка */
#card { background: #fff; border: 1px solid var(--n200); border-radius: 14px; padding: clamp(1rem, 2vw, 1.6rem); position: sticky; top: 108px; max-height: calc(100vh - 124px); overflow: auto; }
.card-empty { padding: var(--space-lg) var(--space-sm); color: var(--n600); }
.card-head { display: flex; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.card-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: flex-start; }
.crumb { font-size: .85em; color: var(--n600); }
.blk { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--n200); }
.tbl { width: 100%; border-collapse: collapse; font-size: .9em; table-layout: fixed; }
.tbl td, .tbl th { overflow-wrap: anywhere; }
.tbl.kv td, .tbl.kv th { overflow-wrap: anywhere; }
.tbl th, .tbl td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--n100); vertical-align: top; }
.tbl thead th { color: var(--n600); font-weight: 600; font-size: .85em; }
.tbl.kv th { width: 30%; color: var(--n600); font-weight: 600; }
.src { color: var(--n400); font-size: .85em; font-family: var(--mono); }
.raw { color: var(--n400); }
.docs, .unk, .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .93em; }
.flag { display: inline-block; min-width: 2.6rem; text-align: center; border-radius: 6px; font-size: .8em; padding: 0 .3rem; font-weight: 700; }
.flag.yes { background: oklch(94% 0.06 70); color: oklch(40% 0.1 60); } .flag.no { background: var(--n100); color: var(--n600); }
.checklist li { padding: .5rem .6rem; background: var(--n50); border-radius: 8px; }
.checklist label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.checklist input { width: 20px; height: 20px; margin-top: .15rem; flex: none; }
.checklist .src { display: block; margin-left: 1.9rem; }
.checklist .auto { margin-left: 1.9rem; color: var(--bad); font-size: .85em; }
textarea#kp { width: 100%; font-family: var(--mono); font-size: .85rem; line-height: 1.5; border: 1px solid var(--n200); border-radius: var(--r); padding: .8rem; resize: vertical; background: var(--n50); }

/* профиль */
.form { background: #fff; border: 1px solid var(--n200); border-radius: 14px; padding: clamp(1rem, 2vw, 1.6rem); max-width: 900px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-sm); }
.field label, .field > span { display: block; font-weight: 600; font-size: .9em; margin-bottom: .25rem; }
.field input, .field textarea { width: 100%; min-height: 44px; border: 1px solid var(--n200); border-radius: var(--r); padding: .5rem .8rem; font: inherit; }
.field small { color: var(--n600); font-size: .82em; }
fieldset { border: 1px solid var(--n200); border-radius: var(--r); padding: .8rem 1rem; margin: 0; }
legend { font-weight: 700; padding: 0 .3rem; }
.chk { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; margin-right: 1rem; }
.chk input { width: 18px; height: 18px; }
.err { color: var(--bad); font-weight: 600; margin: .3rem 0 0; min-height: 1.2em; }
.err:empty { display: none; }
.btn.file { display: inline-flex; align-items: center; position: relative; overflow: hidden; }
.btn.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.row.session { margin-bottom: var(--space-xs); }
.link { overflow-wrap: anywhere; }
h2, .lot-title, .card-head, .crumb { overflow-wrap: anywhere; }

/* о демо */
.about { max-width: 800px; background: #fff; border: 1px solid var(--n200); border-radius: 14px; padding: clamp(1rem, 2vw, 1.6rem); }
.about ul { padding-left: 1.2rem; }
.about li { margin: .3rem 0; }

#toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 20px); opacity: 0; background: var(--n900); color: #fff; padding: .6rem 1rem; border-radius: 999px; font-size: .9em; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 10; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  #card { position: static; max-height: none; }
  .tabs { margin-left: 0; }
}
@media (max-width: 640px) {
  .top-in { gap: var(--space-xs); }
  .toolbar { grid-template-columns: 1fr; }
  .toolbar select { width: 100%; }
  .lot-main { grid-template-columns: 44px 1fr; padding: .6rem; }
  .score { width: 44px; height: 44px; font-size: 1rem; }
  #card { padding: .9rem; border-radius: var(--r); }
  .card-actions { width: 100%; }
  .card-actions .btn { flex: 1 1 auto; }
  /* таблицы становятся стопкой: каждая ячейка с подписью столбца */
  .tbl:not(.kv) thead { display: none; }
  .tbl:not(.kv), .tbl:not(.kv) tbody, .tbl:not(.kv) tr, .tbl:not(.kv) td { display: block; width: 100%; }
  .tbl:not(.kv) tr { border: 1px solid var(--n200); border-radius: var(--r); padding: .4rem .6rem; margin-bottom: .5rem; }
  .tbl:not(.kv) td { border: 0; padding: .2rem 0; }
  .tbl:not(.kv) td::before { content: attr(data-l) ": "; color: var(--n600); font-weight: 600; font-size: .85em; }
  .tbl.kv th { width: 38%; }
  .chk { margin-right: .5rem; }
  textarea#kp { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* JSON сессии (перенос без скачивания) */
.session-json { display: grid; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.session-json textarea { width: 100%; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: var(--space-xs); border: 1px solid var(--line, #d5dbe3); border-radius: 8px; background: var(--neutral-50, #fafbfc); color: inherit; resize: vertical; min-height: 120px; }
.session-json textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }