/* ============================================================
   D · ЦИТАТНИК · 引用 · полноэкранный поток цитат
   ============================================================ */

.d-quotes {
  min-height: calc(100vh - 53px);
  background: var(--ink-1);
  color: var(--ink-fg);
  font-family: var(--sans);
  background-image:
    linear-gradient(180deg, #181E24 0%, #1A2128 30%, #1B232A 100%),
    repeating-linear-gradient(2deg, transparent 0 28px, rgba(160,140,90,.012) 28px 30px);
  padding-bottom: 120px;
}

/* верхняя шапка с заголовком и метрикой */
.d-qr-head {
  max-width: 1400px;
  margin: 0 auto;
  padding: 36px 36px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
}
.d-qr-head .title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 64px;
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--ink-fg);
  margin: 0;
  text-wrap: balance;
}
.d-qr-head .title .jp {
  font-family: var(--jp);
  color: var(--sage);
  margin-right: 10px;
  font-weight: 500;
}
.d-qr-head .title em { font-style: italic; color: var(--ink-fg-2); font-weight: 400; }
.d-qr-head .sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-fg-2);
  line-height: 1.4;
  margin-top: 14px;
  max-width: 34em;
  text-wrap: pretty;
}
.d-qr-head .nums {
  text-align: right;
  font-family: var(--mono);
}
.d-qr-head .nums .big {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-fg);
  letter-spacing: -.02em;
  display: block;
  margin-bottom: 4px;
}
.d-qr-head .nums .lab {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-fg-4);
}
.d-qr-head .nums .lab b { color: var(--sage); font-weight: 500; }

/* строка инструментов: фильтры + сортировка + поиск + переключатель видов */
.d-qr-toolbar {
  max-width: 1400px;
  margin: 28px auto 0;
  padding: 0 36px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
}
.d-qr-toolbar .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}
.d-qr-toolbar .filters .group-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-fg-4);
  margin-right: 6px;
}
.d-qr-toolbar .filters button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  color: var(--ink-fg-3);
  background: var(--ink-2);
}
.d-qr-toolbar .filters button:hover { color: var(--ink-fg); border-color: var(--ink-fg-4); }
.d-qr-toolbar .filters button.is-active {
  background: var(--sage); color: #15191D; border-color: var(--sage);
}
.d-qr-toolbar .filters button .ic {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 6px; vertical-align: 1px;
}
.d-qr-toolbar .filters .divider {
  width: 1px;
  height: 18px;
  background: var(--ink-line);
  margin: 0 6px;
}
.d-qr-toolbar .search {
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 7px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  min-width: 220px;
}
.d-qr-toolbar .search svg { color: var(--ink-fg-3); }
.d-qr-toolbar .search input { flex: 1; border: 0; background: transparent; outline: none; }
.d-qr-toolbar .search input::placeholder { color: var(--ink-fg-3); }
.d-qr-toolbar .view {
  display: flex;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 3px;
}
.d-qr-toolbar .view button {
  width: 30px; height: 28px;
  border-radius: 999px;
  color: var(--ink-fg-3);
  display: flex; align-items: center; justify-content: center;
}
.d-qr-toolbar .view button.is-active {
  background: var(--ink-3); color: var(--sage);
}

/* сводка фильтра */
.d-qr-summary {
  max-width: 1400px;
  margin: 14px auto 18px;
  padding: 0 36px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-fg-3);
  display: flex; align-items: center; gap: 14px;
}
.d-qr-summary b { color: var(--sage); font-weight: 500; }
.d-qr-summary .pipe { color: var(--ink-line); }

/* ====== MASONRY-RIVER из цитат, 3 колонки ====== */
.d-qr-river {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 36px;
  column-count: 3;
  column-gap: 18px;
}
.d-qr-river .q {
  break-inside: avoid;
  background: var(--ink-2);
  border: 1px solid var(--ink-line-soft);
  border-radius: var(--r-8);
  padding: 22px 24px 18px;
  position: relative;
  margin-bottom: 18px;
  cursor: pointer;
  transition: border-color .12s, transform .15s;
  display: inline-block;
  width: 100%;
}
.d-qr-river .q:hover { border-color: var(--sage); transform: translateY(-2px); }
.d-qr-river .q::before {
  content: '“';
  position: absolute;
  left: 12px; top: -2px;
  font-family: var(--serif);
  font-size: 72px;
  color: rgba(143,174,124,.12);
  line-height: 1;
  font-style: italic;
  pointer-events: none;
}
.d-qr-river .q .pg {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
  display: flex; gap: 10px; align-items: baseline;
  position: relative;
}
.d-qr-river .q .pg .date { color: var(--ink-fg-4); letter-spacing: .08em; }
.d-qr-river .q .body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.46;
  color: var(--ink-fg);
  position: relative;
  text-wrap: pretty;
}
.d-qr-river .q .src {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-line-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-fg-3);
  display: flex; justify-content: space-between; gap: 12px;
}
.d-qr-river .q .src b { color: var(--ink-fg-2); font-weight: 500; }
.d-qr-river .q.short .body { font-size: 24px; line-height: 1.3; text-wrap: balance; }
.d-qr-river .q.long  .body { font-size: 15px; line-height: 1.55; }

/* варианты по типу источника */
.d-qr-river .q.t-book      { border-top: 2px solid #6B7A8E; }
.d-qr-river .q.t-article   { border-top: 2px solid #8FAE7C; }
.d-qr-river .q.t-lecture   { border-top: 2px solid #B58A4A; }
.d-qr-river .q.t-video     { border-top: 2px solid #7C7AA0; }
.d-qr-river .q.t-interview { border-top: 2px solid #A86B6B; }

/* заметка (моя) — другая палитра */
.d-qr-river .q.note {
  background: linear-gradient(165deg, #322D22 0%, #28241B 100%);
  border-color: #4A4030;
}
.d-qr-river .q.note::before { color: rgba(192,168,120,.16); }
.d-qr-river .q.note .body { color: #E8DFC4; font-style: normal; }
.d-qr-river .q.note .body b { font-weight: 500; color: #D8C58A; }
.d-qr-river .q.note .pg { color: #C0A878; }
.d-qr-river .q.note .src { color: rgba(220,200,150,.6); }
.d-qr-river .q.note .src b { color: #D8C58A; }

/* hero-цитата — приоритет дня (full-width) */
.d-qr-hero {
  max-width: 1400px;
  margin: 0 auto 18px;
  padding: 0 36px;
}
.d-qr-hero .h {
  background: linear-gradient(115deg, #1F2A2D 0%, #1A2128 100%);
  border: 1px solid var(--ink-line-soft);
  border-left: 3px solid var(--sage);
  border-radius: var(--r-12);
  padding: 32px 40px 30px;
  display: grid;
  grid-template-columns: auto 320px;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.d-qr-hero .h::before {
  content: '“';
  position: absolute;
  right: 280px; top: -50px;
  font-family: var(--serif);
  font-size: 280px;
  color: rgba(143,174,124,.06);
  line-height: 1;
  pointer-events: none;
}
.d-qr-hero .lab {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 16px;
}
.d-qr-hero .q {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.28;
  color: var(--ink-fg);
  margin: 0 0 18px;
  max-width: 22em;
  text-wrap: balance;
  letter-spacing: -.005em;
}
.d-qr-hero .src {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-fg-3);
}
.d-qr-hero .src b { color: var(--ink-fg-2); font-weight: 500; }
.d-qr-hero .src .jp { font-family: var(--jp); color: var(--sage-3); margin-left: 4px; }
.d-qr-hero .actions {
  display: flex; flex-direction: column; gap: 8px;
}
.d-qr-hero .actions button {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  color: var(--ink-fg-2);
  background: var(--ink-1);
  text-align: left;
}
.d-qr-hero .actions button:hover { border-color: var(--sage); color: var(--ink-fg); }


/* ============================================================
   D · ГРАФ СВЯЗЕЙ · полноэкранный
   ============================================================ */

.d-graph-page {
  height: calc(100vh - 53px);
  background: #0F1417;
  color: var(--ink-fg);
  font-family: var(--sans);
  display: grid;
  grid-template-rows: auto 1fr;
  background-image:
    radial-gradient(ellipse at 50% 50%, #182127 0%, #0F1417 80%);
}

/* верхняя панель */
.d-gr-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 28px;
  border-bottom: 1px solid var(--ink-line-soft);
  background: rgba(15,20,23,.84);
  backdrop-filter: blur(10px);
}
.d-gr-toolbar .title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.015em;
  color: var(--ink-fg);
  display: flex; align-items: baseline; gap: 10px;
}
.d-gr-toolbar .title em { font-style: italic; color: var(--sage); font-weight: 400; }
.d-gr-toolbar .title .jp { font-family: var(--jp); color: var(--sage); font-weight: 500; font-size: 18px; margin-right: 4px; }

.d-gr-toolbar .center {
  display: flex; gap: 4px;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 3px;
  justify-self: center;
}
.d-gr-toolbar .center button {
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-fg-3);
  border-radius: 999px;
  display: flex; align-items: center; gap: 6px;
}
.d-gr-toolbar .center button .dot { width: 7px; height: 7px; border-radius: 50%; }
.d-gr-toolbar .center button.is-active {
  background: var(--ink-3); color: var(--ink-fg);
}
.d-gr-toolbar .center button.is-active.materials .dot { background: var(--sage); }
.d-gr-toolbar .center button.is-active.persons .dot { background: #8C7BA0; }
.d-gr-toolbar .center button.is-active.tags .dot { background: #C0A878; }
.d-gr-toolbar .center button .dot.sage { background: var(--sage); }
.d-gr-toolbar .center button .dot.lila { background: #8C7BA0; }
.d-gr-toolbar .center button .dot.gold { background: #C0A878; }

.d-gr-toolbar .search {
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 7px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  min-width: 280px;
}
.d-gr-toolbar .search input { flex: 1; border: 0; background: transparent; outline: none; }
.d-gr-toolbar .search input::placeholder { color: var(--ink-fg-3); }
.d-gr-toolbar .search kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-fg-3);
  padding: 2px 6px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
}

.d-gr-toolbar .layout {
  display: flex; gap: 4px;
}
.d-gr-toolbar .layout button {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  color: var(--ink-fg-3);
}
.d-gr-toolbar .layout button.is-active {
  color: var(--sage); border-color: var(--sage);
  background: rgba(143,174,124,.06);
}

/* основная область графа: canvas + правая панель */
.d-gr-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  min-height: 0;
}

.d-gr-canvas {
  position: relative;
  overflow: hidden;
}
.d-gr-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* стили внутри svg */
.gr-edge {
  stroke: rgba(176,176,176,.10);
  stroke-width: 1;
  fill: none;
}
.gr-edge-strong { stroke: rgba(143,174,124,.55); stroke-width: 1.4; }
.gr-edge-tag { stroke: rgba(192,168,120,.25); stroke-width: 1; stroke-dasharray: 3 3; }
.gr-edge-teach { stroke: rgba(140,123,160,.55); stroke-width: 1.6; }
.gr-edge-fade { stroke: rgba(176,176,176,.05); }

.gr-node-material { fill: #1F272D; stroke: var(--ink-line); stroke-width: 1; }
.gr-node-person { fill: #2D2438; stroke: #8C7BA0; stroke-width: 1; }
.gr-node-tag { fill: #2F2A1A; stroke: #C0A878; stroke-width: 1; stroke-dasharray: 2 2; }
.gr-node-center { fill: #3D5535; stroke: var(--sage); stroke-width: 2; }

.gr-label {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  fill: var(--ink-fg-3);
  pointer-events: none;
}
.gr-label-c { font-size: 13px; font-weight: 500; fill: var(--ink-fg); }
.gr-label-jp { font-family: 'Noto Serif JP', serif; font-size: 11px; fill: var(--ink-fg-4); }
.gr-label-person { fill: #B8A8C8; }
.gr-label-tag { fill: #C0A878; font-style: italic; }

/* плавающие элементы поверх графа */
.d-gr-legend {
  position: absolute;
  left: 20px; bottom: 20px;
  background: rgba(20,25,30,.86);
  border: 1px solid var(--ink-line-soft);
  border-radius: var(--r-8);
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-fg-3);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 6px;
}
.d-gr-legend .row { display: flex; align-items: center; gap: 8px; }
.d-gr-legend .dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid;
}
.d-gr-legend .dot.material { background: #1F272D; border-color: var(--ink-line); }
.d-gr-legend .dot.person { background: #2D2438; border-color: #8C7BA0; }
.d-gr-legend .dot.tag { background: #2F2A1A; border-color: #C0A878; }
.d-gr-legend .dot.center { background: var(--sage-dark); border-color: var(--sage); }
.d-gr-legend .row span:last-child { color: var(--ink-fg-2); }
.d-gr-legend hr { width: 100%; border: 0; border-top: 1px solid var(--ink-line-soft); margin: 4px 0; }
.d-gr-legend .edge-row { display: flex; align-items: center; gap: 10px; }
.d-gr-legend .edge {
  width: 24px; height: 1px; background: rgba(143,174,124,.55);
}
.d-gr-legend .edge.tag { background: rgba(192,168,120,.55); border-top: 1px dashed rgba(192,168,120,.55); height: 0; }
.d-gr-legend .edge.teach { background: rgba(140,123,160,.65); }

.d-gr-stats {
  position: absolute;
  right: 20px; bottom: 20px;
  background: rgba(20,25,30,.86);
  border: 1px solid var(--ink-line-soft);
  border-radius: var(--r-8);
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-fg-3);
  backdrop-filter: blur(10px);
  display: flex; gap: 22px;
}
.d-gr-stats div { display: flex; flex-direction: column; gap: 2px; }
.d-gr-stats .v {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-fg);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1;
}
.d-gr-stats .k {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-fg-4);
}

/* правая панель: детали выбранного узла */
.d-gr-side {
  border-left: 1px solid var(--ink-line-soft);
  background: var(--ink-1);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}
.d-gr-side .head {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--ink-line-soft);
}
.d-gr-side .head .pin {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.d-gr-side .head .pin .dot { width: 7px; height: 7px; background: var(--sage); border-radius: 50%; }
.d-gr-side .head .ti {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink-fg);
  margin-bottom: 6px;
  text-wrap: balance;
}
.d-gr-side .head .ti .jp {
  display: block;
  font-family: var(--jp);
  font-size: 16px;
  color: var(--ink-fg-3);
  margin-bottom: 4px;
  font-weight: 500;
}
.d-gr-side .head .au {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-fg-3);
}
.d-gr-side .head .meta {
  margin-top: 10px;
  display: flex; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-fg-3);
}
.d-gr-side .head .meta b { color: var(--sage); font-weight: 500; }
.d-gr-side .head .open {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--sage);
  color: #15191D;
  display: inline-flex; align-items: center; gap: 6px;
}

.d-gr-side .body {
  overflow-y: auto;
  padding: 18px 0 24px;
}
.d-gr-side .body h6 {
  margin: 16px 24px 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-fg-4);
}
.d-gr-side .body h6:first-child { margin-top: 0; }
.d-gr-side .body h6 b { color: var(--sage); font-weight: 500; }

.d-gr-side .body .it {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  padding: 10px 24px;
  cursor: pointer;
  border-top: 1px solid var(--ink-line-soft);
  align-items: baseline;
}
.d-gr-side .body .it:hover { background: var(--ink-2); }
.d-gr-side .body .it .d {
  width: 9px; height: 9px; border-radius: 50%;
  margin-top: 6px;
}
.d-gr-side .body .it .d.material { background: #1F272D; border: 1px solid var(--ink-line); }
.d-gr-side .body .it .d.person { background: #2D2438; border: 1px solid #8C7BA0; }
.d-gr-side .body .it .d.tag { background: #2F2A1A; border: 1px solid #C0A878; }
.d-gr-side .body .it .nm {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-fg);
  line-height: 1.2;
}
.d-gr-side .body .it .nm small {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--ink-fg-3);
  margin-top: 2px;
}
.d-gr-side .body .it .reason {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--ink-fg-4);
  text-align: right;
  white-space: nowrap;
}