/* graph.css — Premium graphing calculator */

/* Layout */
.gc{display:grid;grid-template-columns:320px 1fr 280px;height:calc(100vh - 57px);background:#eef1f5}
@media(max-width:1100px){.gc{grid-template-columns:280px 1fr 240px}}
@media(max-width:900px){.gc{grid-template-columns:1fr;height:auto}}

/* ─── LEFT PANEL ─── */
.gc-side{background:#fff;border-right:1px solid #dde1e7;display:flex;flex-direction:column;overflow:hidden}
.gc-side__hd{padding:12px 16px;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid #edf0f4;background:#f8f9fb;display:flex;align-items:center;justify-content:space-between}
.gc-exprs{flex:1;overflow-y:auto;padding:6px 8px}

/* Expression row */
.gc-row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:8px;margin-bottom:2px;border:1.5px solid transparent;transition:all .15s;cursor:pointer;position:relative}
.gc-row:hover{background:#f5f7fa}
.gc-row--sel{border-color:#bfdbfe;background:#eff6ff}
.gc-row--err .gc-row__input{color:#dc2626}
.gc-row__vis{width:15px;height:15px;border-radius:4px;border:2px solid #d1d5db;background:none;cursor:pointer;flex-shrink:0;transition:all .15s}
.gc-row__vis--on{border-color:transparent}
.gc-row__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:13.5px;font-weight:500;color:#1e293b;min-width:0}
.gc-row__input::placeholder{color:#94a3b8;font-family:var(--f-sans,'DM Sans',sans-serif);font-weight:400;font-size:12px}
.gc-row__del{opacity:0;width:20px;height:20px;border:none;background:none;color:#94a3b8;cursor:pointer;font-size:14px;border-radius:4px;display:grid;place-items:center;transition:all .12s}
.gc-row:hover .gc-row__del{opacity:1}
.gc-row__del:hover{color:#dc2626;background:#fef2f2}

/* Slider */
.gc-slider-wrap{padding:2px 10px 8px 32px}
.gc-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;border-radius:2px;background:#e2e8f0;outline:none;cursor:pointer}
.gc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#2563eb;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:grab}
.gc-slider-label{display:flex;justify-content:space-between;font-size:10px;font-family:var(--f-mono,'JetBrains Mono',monospace);color:#94a3b8;margin-top:2px}

/* Add & Toolbar */
.gc-add{margin:4px 8px;padding:9px;border:1.5px dashed #cbd5e1;border-radius:8px;background:none;color:#64748b;cursor:pointer;font-size:12px;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.gc-add:hover{border-color:#2563eb;color:#2563eb;background:#eff6ff}
.gc-examples{padding:6px 10px;border-top:1px solid #edf0f4}
.gc-examples__hd{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.gc-examples__list{display:flex;flex-wrap:wrap;gap:4px}
.gc-chip{font-size:11px;font-family:var(--f-mono,'JetBrains Mono',monospace);padding:3px 9px;background:#f1f5f9;border-radius:16px;color:#64748b;cursor:pointer;border:1px solid transparent;transition:all .12s;white-space:nowrap}
.gc-chip:hover{color:#2563eb;border-color:#bfdbfe;background:#eff6ff}
.gc-tools{padding:8px 10px;border-top:1px solid #edf0f4;display:flex;gap:4px;flex-wrap:wrap}
.gc-tbtn{padding:5px 10px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;color:#64748b;cursor:pointer;font-size:11px;font-weight:500;transition:all .12s;display:flex;align-items:center;gap:4px}
.gc-tbtn:hover{border-color:#2563eb;color:#2563eb}
.gc-tbtn--on{background:#2563eb;border-color:#2563eb;color:#fff}
.gc-tbtn svg{width:12px;height:12px}

/* ─── CENTER: Canvas ─── */
.gc-canvas{position:relative;overflow:hidden;background:#fcfcfd}
.gc-canvas canvas{display:block;width:100%;height:100%;cursor:crosshair}

/* Trace crosshair */
.gc-trace{position:absolute;pointer-events:none;z-index:2}
.gc-trace-dot{width:12px;height:12px;border-radius:50%;border:2px solid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(255,255,255,.8)}
.gc-trace-label{position:absolute;padding:4px 10px;border-radius:6px;font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:11px;font-weight:500;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.12);transform:translate(-50%,8px)}
.gc-trace-crossh,.gc-trace-crossv{position:absolute;background:rgba(0,0,0,.06)}
.gc-trace-crossh{height:1px;left:0;right:0}
.gc-trace-crossv{width:1px;top:0;bottom:0}

/* Readout bar */
.gc-readout{position:absolute;bottom:0;left:0;right:0;height:32px;background:rgba(252,252,253,.95);border-top:1px solid #e2e8f0;padding:0 16px;font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:11px;color:#64748b;display:flex;align-items:center;gap:20px;backdrop-filter:blur(4px)}
.gc-readout b{color:#1e293b;font-weight:600}
.gc-readout .gc-readout__sep{color:#d1d5db}

/* Zoom */
.gc-zoom{position:absolute;bottom:46px;right:14px;display:flex;flex-direction:column;gap:3px}
.gc-zoom button{width:34px;height:34px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;color:#64748b;cursor:pointer;font-size:17px;display:grid;place-items:center;transition:all .12s;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.gc-zoom button:hover{border-color:#2563eb;color:#2563eb}

/* ─── RIGHT: Analysis ─── */
.gc-info{background:#fff;border-left:1px solid #dde1e7;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.gc-info__empty{text-align:center;color:#94a3b8;padding:32px 8px;font-size:13px;line-height:1.7}
.gc-card{background:#f8fafc;border-radius:8px;padding:10px 12px;border:1px solid #edf0f4}
.gc-card__hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.gc-card__hd .gc-dot{width:8px;height:8px;border-radius:2px;display:inline-block}
.gc-card__row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:12px}
.gc-card__row+.gc-card__row{border-top:1px solid #f1f5f9}
.gc-card__lbl{color:#64748b;font-size:11px}
.gc-card__val{font-family:var(--f-mono,'JetBrains Mono',monospace);font-weight:500;font-size:11px;color:#1e293b}
.gc-card__val--blue{color:#2563eb}
.gc-card__val--green{color:#16a34a}
.gc-card__val--red{color:#dc2626}
.gc-card__val--amber{color:#d97706}
.gc-card__val--cyan{color:#0891b2}
.gc-table{width:100%;font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:11px;border-collapse:collapse}
.gc-table th{text-align:left;padding:3px 6px;color:#94a3b8;font-weight:600;font-size:10px;text-transform:uppercase;border-bottom:1px solid #edf0f4}
.gc-table td{padding:3px 6px;border-top:1px solid #f5f5f5;color:#374151}
.gc-table td:last-child{text-align:right}
.gc-table tr:hover td{background:#f0f7ff}

/* Solve button */
.gc-solve-btn{margin:4px 0;padding:8px 12px;border-radius:6px;border:none;background:#2563eb;color:#fff;cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.gc-solve-btn:hover{background:#1d4ed8}

/* Intersection badges */
.gc-intersect{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:#fef3c7;border-radius:10px;font-size:10px;font-weight:600;color:#92400e;border:1px solid #fde68a}

/* Scrollbar */
.gc-exprs::-webkit-scrollbar,.gc-info::-webkit-scrollbar{width:4px}
.gc-exprs::-webkit-scrollbar-thumb,.gc-info::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px}

/* ══════ DARK MODE ══════ */
@media (prefers-color-scheme: dark) {
  .gc-side{background:#1a1b1e;border-color:#2d2e32}
  .gc-side__hd{color:#e5e5e5;border-color:#2d2e32}
  .gc-row__input{color:#e5e5e5;background:#25262b;border-color:#2d2e32}
  .gc-row__input:focus{border-color:#3b82f6;background:#2a2b30}
  .gc-row--sel{background:#25262b}
  .gc-row--err .gc-row__input{background:#2d1f1f}
  .gc-row__del{color:#666}
  .gc-row__del:hover{color:#ef4444}
  .gc-add{color:#9ca3af;border-color:#2d2e32}
  .gc-add:hover{background:#25262b}
  .gc-examples__hd{color:#9ca3af}
  .gc-chip{background:#25262b;color:#d1d5db;border-color:#3d3e42}
  .gc-chip:hover{background:#2d2e32}
  .gc-tbtn{background:#25262b;color:#d1d5db;border-color:#3d3e42}
  .gc-tbtn:hover,.gc-tbtn--on{background:#1e3a5f;color:#60a5fa}
  .gc-tools{border-color:#2d2e32}
  .gc-slider{background:#25262b}
  .gc-slider-label{color:#9ca3af}
  .gc-readout{background:rgba(26,27,30,.92);color:#d1d5db;border-color:#2d2e32}
  .gc-zoom button{background:#25262b;color:#d1d5db;border-color:#3d3e42}
  .gc-zoom button:hover{background:#2d2e32}
  .gc-info{background:#1a1b1e;border-color:#2d2e32}
  .gc-info__empty{color:#6b7280}
  .gc-card{background:#25262b;border-color:#3d3e42}
  .gc-card__hd{color:#e5e5e5}
  .gc-card__lbl{color:#9ca3af}
  .gc-card__val{color:#d1d5db}
  .gc-table th{color:#9ca3af;border-color:#3d3e42}
  .gc-table td{color:#d1d5db;border-color:#2d2e32}
  .gc-table tr:hover td{background:#2a2b30}
  .gc-solve-btn{background:#2563eb}
  .gc-solve-btn:hover{background:#1d4ed8}
}