/* graph-plotter.css
   Strictly scoped to #gp-app to avoid interfering with WP styles.
*/
#gp-app { --accent:#1967d2; --accent2:#3ea3ff; --muted:#4b626e; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; box-sizing:border-box; max-width:1100px; margin:16px auto; padding:14px; border-radius:12px; background:linear-gradient(180deg,#ffffff,#f6fbff); color:#042a3b; box-shadow:0 12px 30px rgba(4,12,28,0.08); }
#gp-app *, #gp-app *::before, #gp-app *::after { box-sizing:inherit; }

/* Header */
#gp-app .gp-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
#gp-app .gp-title { margin:0; font-size:1.05rem; color:var(--accent); font-weight:700; }
#gp-app .gp-top-controls { display:flex; gap:8px; align-items:center; }

/* Buttons */
#gp-app .gp-btn { background:rgba(3,10,20,0.04); border:1px solid rgba(3,10,20,0.04); padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:600; }
#gp-app .gp-btn:active { transform:translateY(1px); }
#gp-app .gp-primary { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; border:none; }

/* Layout */
#gp-app .gp-main { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
#gp-app .gp-left { flex:0 1 360px; min-width:260px; }
#gp-app .gp-right { flex:1 1 640px; min-width:300px; }

/* Controls */
#gp-app .gp-row { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
#gp-app .gp-row label { min-width:72px; font-weight:600; color:var(--muted); }
#gp-app .gp-input { padding:8px; border-radius:8px; border:1px solid rgba(3,10,20,0.06); background:#fff; width:100%; }

/* Function list */
#gp-app .gp-functions-list { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
#gp-app .gp-fn-card { display:flex; gap:8px; align-items:center; background:rgba(9,39,68,0.03); padding:8px; border-radius:8px; }
#gp-app .gp-fn-card input[type="text"]{ flex:1; padding:8px; border-radius:6px; border:1px solid rgba(0,0,0,0.06); }
#gp-app .gp-fn-card input[type="color"]{ width:44px; height:36px; border-radius:6px; border:1px solid rgba(0,0,0,0.06); cursor:pointer; }

/* Fieldset & grid */
#gp-app .gp-fieldset { margin-top:6px; border:1px solid rgba(3,10,20,0.04); padding:8px; border-radius:8px; }
#gp-app .gp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
#gp-app .gp-small-note { font-size:12px; color:var(--muted); margin-top:6px; }

/* Messages */
#gp-app .gp-messages { margin-top:8px; min-height:20px; color:#a33; font-weight:700; }

/* Plot area */
#gp-app .gp-plot { height:480px; background:#fff; border-radius:10px; box-shadow:inset 0 2px 10px rgba(6,10,20,0.03); overflow:hidden; }

/* Table */
#gp-app .gp-table-wrap { margin-top:12px; background:rgba(255,255,255,0.95); padding:8px; border-radius:8px; max-height:240px; overflow:auto; }
#gp-app .gp-table { font-size:13px; color:#123; }

/* Footer */
#gp-app .gp-footer { margin-top:12px; font-size:12px; color:#446; }

/* Dark mode (only inside container) */
#gp-app.gp-dark { background:linear-gradient(180deg,#071026,#061624); color:#e6f4ff; }
#gp-app.gp-dark .gp-plot { background:#041021; }
#gp-app.gp-dark .gp-fn-card { background:rgba(255,255,255,0.02); }

/* Responsive */
@media (max-width:900px) {
  #gp-app .gp-main { flex-direction:column; }
  #gp-app .gp-plot { height:360px; }
  #gp-app .gp-left, #gp-app .gp-right { width:100%; min-width:unset; }
}