/* ═══════════════════════════════════════════
   Демо векторных БД (/vector_base).
   Токены, навбар, кнопки, футер — из sales.css; здесь только блоки демо.
═══════════════════════════════════════════ */

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hero-meta dd.num { font-size: 22px; }

.panel {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 32px;
}
.panel + .panel { margin-top: 32px; }

.field {
  flex: 1; min-width: 200px; width: 100%;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 12px 14px; font-size: 16px; color: var(--txt);
  transition: border-color var(--ease);
}
.field::placeholder { color: #8a7f6c; }
.field:focus { border-color: var(--acc); outline: none; }

/* ═══ ПОИСК ПО СЛОВАМ / ПО СМЫСЛУ ═══ */
.trad-vs-vec { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
.tvcard { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.tvcard-hl { border-color: var(--line-strong); background: var(--surface); }
.tvcard-title { margin-bottom: 16px; }
.qline { color: var(--txt2); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.search-ex { margin-top: 4px; }
.rline {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.rline:last-child { border-bottom: 0; }
.rline.miss { color: var(--txt2); }
.rline.miss span { color: var(--txt3); font-size: 14px; }
.sim { font-family: var(--mono); color: var(--acc); }

.flow-wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  counter-reset: step; list-style: none;
}
.flow-step { padding: 24px; position: relative; counter-increment: step; }
.flow-step + .flow-step { border-left: 1px solid var(--line); }
.flow-step + .flow-step::before {
  content: '→'; position: absolute; left: -9px; top: 24px;
  background: var(--bg); color: var(--txt3); font-size: 14px; line-height: 1;
}
.flow-step-hl { background: var(--surface); }
.flow-name { font-weight: 600; margin-bottom: 4px; }
.flow-val { font-size: 15px; color: var(--txt2); }
.flow-val.mono { font-family: var(--mono); font-size: 14px; color: var(--acc); }

/* ═══ ЭМБЕДДИНГ ═══ */
.emb-label { display: block; color: var(--txt2); margin-bottom: 16px; }
.emb-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.emb-viz { min-height: 64px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.emb-placeholder { color: var(--txt2); }
.token {
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line-strong);
  font-size: 15px; transition: opacity var(--ease);
}
.vec-display {
  width: 100%; padding: 16px; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 14px; line-height: 1.8;
}
.vec-bracket { color: var(--acc); }
.vec-num { color: var(--txt); transition: opacity var(--ease); }
.vec-ellipsis { color: var(--txt3); }

/* ═══ ВЕКТОРНОЕ ПРОСТРАНСТВО ═══ */
.vs-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.vs-header h3 { margin-bottom: 6px; }
.vs-header p { color: var(--txt2); font-size: 15px; max-width: 560px; }
.vs-canvas-wrap {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; cursor: crosshair;
}
#vsCanvas { display: block; width: 100%; height: auto; }
.vs-tooltip {
  position: absolute; display: none; z-index: 10; max-width: 260px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 6px 10px; font-size: 14px; pointer-events: none;
}
.vs-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 14px; color: var(--txt2); }
.leg { display: inline-flex; align-items: center; gap: 8px; }
.leg svg { width: 12px; height: 12px; }

/* ═══ СРАВНЕНИЕ ═══ */
.comp-table { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.comp-row { display: grid; grid-template-columns: 200px 1fr 1fr; }
.comp-row > div {
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.comp-row:last-child > div { border-bottom: 0; }
.comp-row > div + div { border-left: 1px solid var(--line); }
.comp-header > div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 24px; background: var(--bg2); }
.db-name { font-family: var(--display); font-size: 18px; font-weight: 500; }
.db-tag { font-size: 14px; color: var(--txt3); }
.comp-feat { color: var(--txt2); }
.comp-qd { background: var(--bg2); }

.bar-wrap { flex: 1; max-width: 160px; height: 4px; background: var(--line); }
.bar { height: 100%; width: 0; transition: width 600ms ease-out; }
.pg-bar { background: var(--txt3); }
.qd-bar { background: var(--acc); }

/* ═══ ДЕМО ═══ */
.demo-tabs {
  display: flex; flex-wrap: wrap; gap: 0 28px;
  border-bottom: 1px solid var(--line); margin-bottom: 32px;
}
.dtab {
  background: none; border: 0; cursor: pointer;
  padding: 12px 0; margin-bottom: -1px;
  color: var(--txt2); font-size: 16px; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.dtab:hover { color: var(--txt); }
.dtab.active { color: var(--txt); border-bottom-color: var(--acc); }

.dpanel { display: none; }
.dpanel.active { display: block; }

.upload-zone {
  border: 1px dashed var(--line-strong); border-radius: var(--r);
  padding: 56px 24px; text-align: center; cursor: pointer; margin-bottom: 24px;
  transition: border-color var(--ease), background-color var(--ease);
}
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--acc); background: var(--bg2); }
.uz-title { font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.uz-sub { color: var(--txt2); font-size: 15px; }

.file-info {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; margin-bottom: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.fi-clear { background: none; border: 0; cursor: pointer; color: var(--txt2); font-size: 15px; }
.fi-clear:hover { color: var(--acc); }

.upload-opts { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 24px; }
.opt-group { flex: 1; min-width: 240px; }
.opt-group label, .opt-label, .search-opts label { display: block; color: var(--txt2); margin-bottom: 10px; }
.opt-group label strong, .search-opts label strong { color: var(--txt); font-family: var(--mono); font-weight: 500; }

.slider { width: 100%; accent-color: var(--acc); margin-bottom: 6px; }
.chunk-hint { font-size: 14px; color: var(--txt3); }

.target-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tbtn {
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 8px 14px; font-size: 15px; color: var(--txt2); cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background-color var(--ease);
}
.tbtn:hover { color: var(--txt); border-color: var(--txt3); }
.tbtn.active { background: var(--surface); border-color: var(--acc); color: var(--txt); }

#panel-upload .btn-wide, #panel-text .btn-wide { margin-bottom: 24px; }
.big-textarea { min-height: 200px; resize: vertical; line-height: 1.6; margin-bottom: 20px; }
.search-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.search-opts { margin-bottom: 28px; }
.search-opts .target-btns { margin-top: 12px; }
.browse-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

/* ═══ РЕЗУЛЬТАТЫ ═══ */
.result-cards { display: flex; flex-direction: column; gap: 12px; }
.result-cards .rcard {
  display: block; position: relative;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 24px;
}
.rcard-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rcard-db { font-size: 14px; color: var(--txt3); }
.sim-badge { display: flex; align-items: center; gap: 10px; }
.sim-pct { font-family: var(--mono); color: var(--acc); }
.sim-bar-wrap { width: 80px; height: 4px; background: var(--line); }
.sim-bar { height: 100%; background: var(--acc); }
.rcard-content { line-height: 1.65; margin-bottom: 10px; overflow-wrap: anywhere; }
.rcard-meta { font-size: 14px; color: var(--txt2); display: flex; gap: 16px; flex-wrap: wrap; }
.rcard-del {
  position: absolute; top: 16px; right: 16px;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--txt2); font-size: 14px; padding: 4px 8px; cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.rcard-del:hover { border-color: var(--line-strong); color: var(--acc); }

.search-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.search-col-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; font-weight: 600; }
.elapsed { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--txt3); }

.loading { padding: 24px 0; color: var(--txt2); }
.msg-success, .msg-error, .msg-info {
  padding: 14px 18px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--bg2);
}
.msg-error { border-color: var(--line-strong); color: var(--acc); }
.msg-info { margin-bottom: 16px; color: var(--txt2); }
.empty-state { padding: 40px 0; color: var(--txt2); }

.chunk-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.chunk-item {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 16px; font-size: 15px; overflow-wrap: anywhere;
}
.chunk-item strong { font-family: var(--mono); font-weight: 500; color: var(--txt3); margin-right: 8px; }

/* ═══ АДАПТИВ ═══ */
@media (max-width: 960px) {
  .trad-vs-vec { grid-template-columns: 1fr; }
  .flow-wrap { grid-template-columns: 1fr 1fr; }
  .flow-step:nth-child(3) { border-left: 0; }
  .flow-step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .flow-step:nth-child(3)::before { display: none; }
  .search-cols { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .comp-row { grid-template-columns: 1fr 1fr; }
  .comp-row > .comp-feat {
    grid-column: 1 / -1; background: var(--surface); color: var(--txt);
    font-weight: 600; padding-bottom: 10px; padding-top: 10px;
  }
  .comp-row > .comp-pg { border-left: 0; }
  .comp-header > .comp-feat { display: none; }
  .comp-row > div { padding: 12px 16px; }
  .bar-wrap { display: none; }
}

@media (max-width: 600px) {
  .panel { padding: 20px; }
  .flow-wrap { grid-template-columns: 1fr; }
  .flow-step + .flow-step { border-left: 0; border-top: 1px solid var(--line); }
  .flow-step + .flow-step::before { display: none; }
}