.request-tabs-shell { padding: 8px; }
.request-tabs {
  display: flex;
  gap: 5px;
  padding: 4px;
  overflow-x: auto;
  border-radius: 14px;
  background: #f0f0ea;
}
.request-tabs button {
  flex: 1 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #666760;
  box-shadow: none;
}
.request-tabs button:hover { transform: none; background: #f8f8f4; }
.request-tabs button.active { background: #fff; color: #252622; box-shadow: 0 1px 4px #2c2e2112; }
.request-tabs button span { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 5px; border-radius: 50%; background: #e5e5de; font-size: .7rem; }
.request-tabs button.active span { background: #e8cfc5; color: #914332; }
.request-panel { padding: 25px 20px 18px; }
.graph-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.graph-header h1 { margin-top: 5px; }
.graph-header p:not(.eyebrow) { margin-top: 10px; color: #74746f; }
.obsidian-graph { padding: 0; overflow: hidden; border: 0; background: #1d1e1f; }
.graph-legend, .graph-controls { display: flex; align-items: center; gap: 11px; font-size: .72rem; }
.graph-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: #b7b8b7; }
.legend-line { width: 17px; height: 1px; background: #8a9b91; }
.legend-line.contact { border-top: 1px dashed #82919b; background: none; }
.graph-control, .graph-reset { min-height: 28px; padding: 4px 8px; border-radius: 5px; background: #ffffff0e; color: #dce0dc; font-size: .74rem; box-shadow: none; }
.graph-control { min-width: 30px; font-size: 1.15rem; }
.graph-options { display: grid; gap: 9px; padding: 10px; color: #c9d2cc; font-size: .76rem; }
.graph-options label { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-size: inherit; font-weight: 650; }
.graph-options select { width: auto; min-height: 29px; padding: 4px 25px 4px 7px; border-color: #ffffff24; border-radius: 6px; background: #ffffff10; color: #edf2ee; font-size: inherit; }
.graph-options select option { color: #202520; background: #fff; }
.graph-options input[type="checkbox"] { width: 15px; height: 15px; accent-color: #8acaa5; }
.graph-options input[type="range"] { width: 78px; padding: 0; accent-color: #8acaa5; }
.graph-freeze { min-height: 28px; padding: 4px 8px; border-radius: 5px; background: #ffffff12; color: #dce5dd; font-size: inherit; box-shadow: none; }
.graph-canvas { position: relative; min-height: min(70vh, 680px); height: clamp(520px, 62vh, 680px); overflow: hidden; touch-action: none; background-color: #1d1e1f; background-image: radial-gradient(#ffffff0d 1px, transparent 1px); background-size: 24px 24px; cursor: grab; outline: none; }
.graph-canvas:focus-visible { box-shadow: inset 0 0 0 1px #cdd0cd; }
.graph-canvas.is-panning { cursor: grabbing; }
.graph-canvas.is-dragging-node { cursor: move; }
.lineage-webgl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.graph-label-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.graph-node-label { transition: none; position: absolute; max-width: 180px; min-height: 0; padding: 1px 3px; overflow: hidden; border: 0; border-radius: 3px; background: transparent; color: #c7c9c8; font-size: .75rem; font-weight: 500; line-height: 1.25; text-align: left; text-overflow: ellipsis; white-space: nowrap; pointer-events: auto; box-shadow: none; }
.graph-node-label:hover { background: #292b2c; transform: none; }
.graph-node-label:focus-visible { outline: 1px solid #d4d7d4; outline-offset: 2px; }
.graph-canvas>.graph-legend { position: absolute; bottom: 12px; left: 14px; z-index: 2; padding: 7px 9px; border: 1px solid #ffffff14; border-radius: 6px; color: #b8bbb9; background: #202122dc; pointer-events: none; }
.graph-settings { position: absolute; top: 12px; right: 12px; z-index: 3; width: min(245px, calc(100% - 24px)); border: 1px solid #ffffff1c; border-radius: 7px; color: #d0d3d1; background: #242526ed; }
.graph-settings summary { padding: 9px 11px; cursor: pointer; font-size: .76rem; font-weight: 650; list-style: none; }
.graph-settings summary::-webkit-details-marker { display: none; }
.graph-settings summary::before { content: "›"; display: inline-block; margin-right: 7px; font-size: 1.1rem; transition: transform .15s ease; }
.graph-settings[open] summary { border-bottom: 1px solid #ffffff16; }
.graph-settings[open] summary::before { transform: rotate(90deg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.graph-empty { position: absolute; inset: 50% auto auto 50%; width: min(390px, calc(100% - 36px)); transform: translate(-50%, -50%); margin: 0; padding: 14px 17px; border: 1px solid #ffffff1d; border-radius: 11px; background: #26302ad9; color: #d7dfd8; text-align: center; }
.graph-notes { display: grid; gap: 10px; }
.graph-notes details { margin-top: 4px; padding-top: 12px; border-top: 1px solid #e5e5de; }
.graph-notes summary { cursor: pointer; font-weight: 700; }
.graph-list { margin-top: 12px; }
@media (max-width: 650px) {
  .graph-header { align-items: flex-start; flex-direction: column; }
  .graph-legend { flex-wrap: wrap; gap: 9px; }
  .graph-canvas { min-height: 450px; height: 450px; }
}