/* StudyNest Graphs — interactive visual layer */
.graph-lab{margin:28px 0;padding:24px;border:1px solid #dbe5ef;border-radius:24px;background:linear-gradient(180deg,#fbfdff 0%,#f4f8fc 100%);box-shadow:0 12px 34px rgba(18,47,78,.08)}
.graph-lab__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}.graph-lab__icon{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:14px;background:#e9f1fb;font-size:1.35rem}.graph-lab__head h3{margin:0 0 5px;color:#12325b;font-size:1.25rem}.graph-lab__head p{margin:0;color:#516579}.graph-stage{position:relative;overflow:hidden;border:1px solid #cfdbe8;border-radius:20px;background:#fff;min-height:360px}.graph-stage svg{display:block;width:100%;height:auto;min-height:360px}.graph-controls{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}.graph-controls button,.graph-controls select,.graph-controls input[type=number]{min-height:42px;border:1px solid #c7d5e4;border-radius:999px;background:#fff;color:#17365f;padding:9px 16px;font:inherit}.graph-controls button{cursor:pointer;font-weight:700}.graph-controls button:hover,.graph-controls button.is-active{background:#173f70;color:#fff;border-color:#173f70}.graph-result{margin-top:14px;padding:13px 16px;border-radius:14px;background:#edf5ff;color:#16365f;font-weight:700}.graph-two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.7fr);gap:18px;align-items:start}.graph-side{padding:18px;border-radius:18px;background:#fff;border:1px solid #d7e2ee}.graph-side h4{margin-top:0;color:#17365f}.graph-side label{display:block;margin:12px 0 5px;font-weight:700;color:#253f5e}.graph-side input[type=range]{width:100%}.coordinate-readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.coordinate-readout div{padding:12px;border-radius:14px;background:#f3f7fb}.coordinate-readout strong{display:block;color:#17365f;font-size:1.1rem}.mini-equation{font-size:1.3rem;font-weight:800;color:#173f70;padding:12px 14px;background:#eef5fd;border-radius:14px;text-align:center}.graph-note{margin-top:12px;color:#5d6d7e;font-size:.94rem}.graph-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;color:#43566b}.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:#1f5f96}.legend-dot.alt{background:#d4863b}.alignment-panel{margin:32px auto;max-width:1120px;padding:26px;border-radius:24px;background:#f4f8fc;border:1px solid #d7e3ef}.alignment-panel h2{margin-top:0;color:#12325b}.alignment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.alignment-card{padding:20px;border-radius:18px;background:#fff;border:1px solid #d8e4ef}.alignment-card h3{margin-top:0;color:#173f70}.verified-badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 13px;border-radius:999px;background:#e9f4ee;color:#205d3d;font-weight:800}.zw-example{border-left:5px solid #1e6b50;background:#eef8f3;padding:16px 18px;border-radius:0 16px 16px 0;margin:18px 0}.zw-example strong{color:#15533c}
@media(max-width:760px){.graph-lab{padding:16px;border-radius:18px}.graph-two-col,.alignment-grid{grid-template-columns:1fr}.graph-stage{min-height:300px}.graph-stage svg{min-height:300px}.graph-controls button{flex:1 1 140px}.coordinate-readout{grid-template-columns:1fr}}