.math-scratchpad-panel {
  margin: 4px 0 14px;
  border: 1px solid #d9cce8;
  border-radius: 16px;
  background: #fbf8fe;
  overflow: clip;
}

.math-scratchpad-panel > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  color: #543d70;
  cursor: pointer;
  font-weight: 850;
  list-style: none;
  user-select: none;
}

.math-scratchpad-panel > summary::-webkit-details-marker { display: none; }
.math-scratchpad-panel > summary::before { content: "▸"; color: #8b69a7; font-size: 1.1rem; }
.math-scratchpad-panel[open] > summary::before { transform: rotate(90deg); }
.math-scratchpad-panel > summary::after {
  content: "точки · прямые · график";
  margin-left: auto;
  color: #80748b;
  font-size: .76rem;
  font-weight: 700;
}

.math-scratchpad-panel[open] > summary { border-bottom: 1px solid #e4daef; background: #f5eefb; }
.math-scratchpad-host { padding: 12px; }
.math-scratchpad { display: grid; gap: 10px; min-width: 0; }

.math-scratchpad-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.math-scratchpad-toolbar button {
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid #d4c5e4;
  border-radius: 11px;
  background: #fff;
  color: #4d3b61;
  font: 750 .88rem/1.15 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.math-scratchpad-toolbar button:hover { background: #f2eafb; }
.math-scratchpad-toolbar button:disabled { opacity: .46; cursor: not-allowed; }
.math-scratchpad-toolbar button:focus-visible,
.math-scratchpad-canvas:focus-visible { outline: 3px solid rgba(130, 88, 169, .36); outline-offset: 2px; }
.math-scratchpad-tool[aria-pressed="true"] { border-color: #79539a; background: #79539a; color: #fff; }
.math-scratchpad-action { margin-left: auto; }
.math-scratchpad-action + .math-scratchpad-action { margin-left: 0; }
.math-scratchpad-undo { color: #68458f !important; }
.math-scratchpad-clear { color: #8c3f61 !important; }

.math-scratchpad-status {
  min-height: 21px;
  margin: 0;
  color: #6c6276;
  font-size: .84rem;
  line-height: 1.4;
}

.math-scratchpad-stage {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8cee4;
  border-radius: 14px;
  background: #fffefd;
  box-shadow: inset 0 1px 5px rgba(72, 54, 89, .06);
}

.math-scratchpad-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 420;
  min-height: 280px;
  max-height: 520px;
  background: #fffefd;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: contain;
}

.math-scratchpad-canvas[data-tool="select"] { cursor: default; }
.math-scratchpad-canvas[data-dragging="true"] { cursor: grabbing; }
.math-scratchpad-grid line { stroke: #ece6f2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.math-scratchpad-grid .math-scratchpad-axis-grid { stroke: transparent; }
.math-scratchpad-axes line { stroke: #62586d; stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.math-scratchpad-axes text { fill: #554d5e; font: italic 700 15px Georgia, serif; }
.math-scratchpad-arrow { fill: #62586d; }
.math-scratchpad-axes .math-scratchpad-tick-label {
  font: 650 10px system-ui, sans-serif;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #fffefd;
  stroke-width: 3px;
}
.math-scratchpad-axes .math-scratchpad-y-label { text-anchor: end; }

.math-scratchpad-object {
  stroke: #7551a2;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.math-scratchpad-point { fill: #7551a2; stroke: #fff; stroke-width: 1.5; }
.math-scratchpad-hole { fill: #fffefd; stroke: #a74377; stroke-width: 3; }
.math-scratchpad-line { stroke: #6f4ca0; }
.math-scratchpad-segment,
.math-scratchpad-circle { fill: none; }
.math-scratchpad-stroke { fill: none; stroke: #7551a2; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.math-scratchpad-label { fill: #42364e; stroke: none; font: 750 16px system-ui, sans-serif; }
.math-scratchpad-object.is-selected { stroke: #e0619c; filter: drop-shadow(0 0 4px rgba(224, 97, 156, .58)); }
.math-scratchpad-line.is-selected,
.math-scratchpad-segment.is-selected,
.math-scratchpad-circle.is-selected,
.math-scratchpad-stroke.is-selected { stroke-width: 4.8; }
.math-scratchpad-label.is-selected { fill: #e0619c; stroke: none; }
.math-scratchpad-point.is-selected { fill: #e0619c; stroke: #e0619c; stroke-width: 4; }
.math-scratchpad-hole.is-selected { fill: #f8e7f0; stroke-width: 4; }
.math-scratchpad-line-handles { pointer-events: none; }
.math-scratchpad-handle-halo { fill: rgba(224, 97, 156, .17); stroke: rgba(224, 97, 156, .42); stroke-width: 1.5; }
.math-scratchpad-line-handle { fill: #e0619c; stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.math-scratchpad-mid-halo { fill: rgba(239, 189, 82, .2); stroke: rgba(190, 136, 28, .46); }
.math-scratchpad-mid-handle { fill: #efbd52; stroke: #fff; }
.math-scratchpad-line-start { fill: #efbd52; stroke: #fff; stroke-width: 2; }
.math-scratchpad-preview { opacity: .72; stroke-dasharray: 5 4; }

@media (max-width: 620px) {
  .math-scratchpad-panel > summary { align-items: flex-start; flex-wrap: wrap; padding: 11px 12px; }
  .math-scratchpad-panel > summary::after { width: auto; max-width: calc(100% - 24px); flex: 1 0 calc(100% - 24px); margin-left: 24px; }
  .math-scratchpad-host { padding: 9px; }
  .math-scratchpad-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .math-scratchpad-toolbar button { width: 100%; min-width: 0; min-height: 44px; padding: 8px 6px; font-size: .8rem; overflow-wrap: anywhere; }
  .math-scratchpad-action { margin-left: 0; }
  .math-scratchpad-canvas { min-height: 250px; }
}

@media (max-width: 360px) {
  .math-scratchpad-host { padding: 7px; }
  .math-scratchpad-toolbar { gap: 5px; }
  .math-scratchpad-toolbar button { font-size: .75rem; }
  .math-scratchpad-canvas { min-height: 225px; }
}