.graph-page { max-width: 1320px; margin: 0 auto; padding: 86px 32px 110px; }
.graph-intro { display: grid; grid-template-columns: 1.3fr .7fr; gap: 70px; align-items: end; }
.graph-intro h1 { margin: 22px 0 0; font-size: clamp(58px, 7vw, 94px); line-height: .91; letter-spacing: -.07em; font-weight: 600; }
.graph-intro h1 em { color: var(--green); font-family: Georgia, serif; font-weight: 400; }
.graph-intro > p { margin: 0 0 8px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.graph-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 60px; border: 1px solid var(--line); border-radius: 6px 6px 0 0; background: var(--card); }
.graph-stats div { padding: 20px 24px; border-left: 1px solid var(--line); }.graph-stats div:first-child { border-left: 0; }
.graph-stats strong { display: block; font-size: 27px; letter-spacing: -.05em; }.graph-stats span { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.graph-controls { min-height: 72px; padding: 13px 16px; display: grid; grid-template-columns: minmax(230px, 1fr) 190px 190px auto; gap: 10px; align-items: end; border: 1px solid var(--line); border-top: 0; background: #e9e8e0; }
.graph-controls label { display: flex; flex-direction: column; gap: 5px; }.graph-controls label span { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; }
.graph-controls input, .graph-controls select { height: 34px; border: 1px solid #cccfc7; border-radius: 4px; padding: 0 10px; background: var(--card); color: var(--ink); font-size: 10px; outline-color: var(--green); }
.graph-controls button { height: 34px; border: 1px solid var(--green); border-radius: 4px; padding: 0 14px; color: var(--green); background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.graph-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: 680px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; overflow: hidden; background: var(--card); }
.canvas-wrap { position: relative; min-width: 0; background-color: #202821; background-image: radial-gradient(#354138 1px, transparent 1px); background-size: 20px 20px; }
#graph-canvas { display: block; width: 100%; height: 680px; cursor: grab; } #graph-canvas.dragging { cursor: grabbing; }
.canvas-hint { position: absolute; left: 17px; bottom: 15px; padding: 7px 10px; border-radius: 3px; color: #aab5ac; background: rgba(21,27,22,.82); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; pointer-events: none; }
#graph-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #cbd4cc; font-size: 12px; pointer-events: none; }
#graph-empty[hidden] { display: none; }
.node-inspector { padding: 28px 25px; border-left: 1px solid var(--line); overflow: auto; }
.inspector-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.inspector-empty > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--yellow); }.inspector-empty h2 { margin: 14px 0 5px; font-size: 17px; }.inspector-empty p { max-width: 190px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.node-kind { display: flex; align-items: center; gap: 7px; color: var(--green); text-transform: uppercase; letter-spacing: .12em; font-size: 8px; font-weight: 700; }.node-kind i { width: 8px; height: 8px; border-radius: 50%; }
#inspector-content h2 { margin: 14px 0 6px; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; } #node-qualified { margin: 0; color: var(--muted); font-family: ui-monospace, monospace; font-size: 8px; line-height: 1.55; overflow-wrap: anywhere; }
.node-inspector dl { margin: 25px 0 0; border-top: 1px solid var(--line); }.node-inspector dl div { display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }.node-inspector dt { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.node-inspector dd { margin: 0; text-align: right; font-size: 9px; overflow-wrap: anywhere; }
.relation-list { margin-top: 26px; }.relation-list h3 { margin: 0 0 11px; font-size: 10px; }.relation-list article { padding: 9px 0; border-top: 1px solid var(--line); }.relation-list article b { display: block; color: var(--green); font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }.relation-list article span { display: block; margin-top: 3px; font-size: 9px; overflow-wrap: anywhere; }.relation-list article small { color: var(--muted); font-size: 8px; }
.graph-legend { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 20px 0; color: var(--muted); font-size: 9px; }.graph-legend span { display: flex; align-items: center; gap: 6px; }.graph-legend i { width: 8px; height: 8px; border-radius: 50%; }.graph-legend p { margin: 0 0 0 auto; }.legend-code { background: #e2bf56; }.legend-file { background: #60a77b; }.legend-doc { background: #78a5cb; }.legend-test { background: #b390cb; }.legend-env { background: #d97861; }
@media (max-width: 900px) { .graph-intro { grid-template-columns: 1fr; gap: 25px; }.graph-controls { grid-template-columns: 1fr 1fr; }.graph-workspace { grid-template-columns: 1fr; }.node-inspector { min-height: 250px; border-left: 0; border-top: 1px solid var(--line); }.inspector-empty { min-height: 190px; }.graph-legend p { width: 100%; margin-left: 0; } }
@media (max-width: 600px) { .graph-page { padding: 65px 20px 90px; }.graph-intro h1 { font-size: 56px; }.graph-stats { grid-template-columns: 1fr 1fr; }.graph-stats div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.graph-stats div:nth-child(4) { border-top: 1px solid var(--line); }.graph-controls { grid-template-columns: 1fr; }.graph-workspace { min-height: 520px; } #graph-canvas { height: 520px; } }