*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: #0b0f1a;
  color: #c9d1e0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.2rem 1rem 3rem;
}

h1 {
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
  background: linear-gradient(100deg, #818cf8 30%, #34d399 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  color: #4b5a72;
  font-size: 0.88rem;
  margin-bottom: 2rem;
  letter-spacing: 0.04em;
}

.panel {
  width: 100%;
  max-width: 740px;
  background: #111827;
  border-radius: 14px;
  padding: 1.4rem 1.6rem 1.6rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55);
  border: 1px solid #1e2d3f;
}

/* ── function input ── */
.fn-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.fn-label {
  font-size: 1.15rem;
  color: #818cf8;
  font-style: italic;
  white-space: nowrap;
  user-select: none;
}

#fxInput {
  flex: 1;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  padding: 0.45rem 0.8rem;
  background: #1e293b;
  border: 1.5px solid #2d3f55;
  border-radius: 7px;
  color: #e2e8f0;
  outline: none;
  transition: border-color 0.18s;
}
#fxInput:focus { border-color: #818cf8; }
#fxInput.error  { border-color: #f87171; background: #2a1a1a; }

#graphBtn {
  padding: 0.45rem 1.15rem;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
}
#graphBtn:hover { background: #4f46e5; }

#clearBtn {
  padding: 0.45rem 1.15rem;
  background: transparent;
  color: #7a8fa8;
  border: 1.5px solid #3d5268;
  border-radius: 7px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 6px rgba(129, 140, 248, 0.15);
}
#clearBtn:hover { border-color: #f87171; color: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.3); }

/* ── canvas ── */
#mainCanvas {
  display: block;
  width: 100%;
  border-radius: 8px;
  cursor: crosshair;
  border: 1px solid #1a2535;
}

/* ── info bar ── */
#info {
  min-height: 1.3em;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.45rem;
  letter-spacing: 0.02em;
}

/* ── derivative toggle buttons ── */
.deriv-row {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
}

.deriv-btn {
  flex: 1;
  padding: 0.6rem 0.5rem;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid;
  background: transparent;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.deriv-btn:active { transform: scale(0.97); }

#btn1            { color: #34d399; border-color: #34d399; }
#btn1:hover      { background: rgba(52,211,153,0.08); }
#btn1.on         { background: rgba(52,211,153,0.14); }

#btn2            { color: #fb923c; border-color: #fb923c; }
#btn2:hover      { background: rgba(251,146,60,0.08); }
#btn2.on         { background: rgba(251,146,60,0.14); }

/* ── derivative columns (button + equation) ── */
.deriv-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.deriv-col .deriv-btn { flex: unset; width: 100%; }

/* ── derivative equations ── */
.deriv-eq {
  display: none;
  padding: 0.45rem 0.75rem;
  background: #0e1520;
  border-radius: 6px;
  border-left: 3px solid;
  color: #e2e8f0;
}

#eq1 { border-left-color: #34d399; }
#eq2 { border-left-color: #fb923c; }

.deriv-eq .katex { font-size: 1rem; }

/* ── legend ── */
#legend {
  display: flex;
  gap: 1.4rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}

.leg {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-style: italic;
}
.leg-line {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── range controls ── */
.ranges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid #1e2d3f;
}

.rg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #4b5a72;
}
.rg span { white-space: nowrap; }
.rg input {
  width: 80px;
  padding: 0.28rem 0.45rem;
  font-size: 0.82rem;
  background: #1e293b;
  border: 1.5px solid #2d3f55;
  border-radius: 5px;
  color: #c9d1e0;
  outline: none;
  transition: border-color 0.15s;
  font-family: 'Courier New', monospace;
}
.rg input:focus { border-color: #818cf8; }

#applyBtn {
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
  background: #1e293b;
  color: #64748b;
  border: 1.5px solid #2d3f55;
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#applyBtn:hover { border-color: #818cf8; color: #818cf8; }

/* ── error message ── */
#message {
  min-height: 1.2em;
  font-size: 0.82rem;
  color: #f87171;
  margin-top: 0.5rem;
  font-style: italic;
}