.athena-quadratic-graphs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  margin: 18px 0 8px;
  clear: both;
}

.athena-quadratic-graph {
  position: relative;
  width: 100%;
  min-height: 290px;
  overflow: hidden;
  border: 1px solid rgba(45, 138, 120, .24);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(35, 48, 61, .08);
  direction: ltr;
}

.athena-quadratic-graph::before {
  content: "رسم الدالة";
  position: absolute;
  z-index: 2;
  top: auto;
  right: 12px;
  bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(238, 248, 245, .94);
  color: #276f62;
  font-size: 12px;
  font-weight: 800;
  direction: rtl;
  pointer-events: none;
}

.athena-quadratic-graph svg {
  display: block;
  width: 100%;
  height: 290px;
  touch-action: pan-y;
}

.athena-quadratic-graph .athena-graph-grid {
  stroke: #e7ecef;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.athena-quadratic-graph .athena-graph-axis {
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.athena-quadratic-graph .athena-graph-axis-x {
  stroke: #2563eb;
}

.athena-quadratic-graph .athena-graph-axis-y {
  stroke: #d97706;
}

.athena-quadratic-graph .athena-graph-axis-x-arrow {
  fill: #2563eb;
}

.athena-quadratic-graph .athena-graph-axis-y-arrow {
  fill: #d97706;
}

.athena-quadratic-graph .athena-graph-symmetry {
  stroke: #9b79ad;
  stroke-width: 1.4;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}

.athena-quadratic-graph .athena-graph-curve {
  fill: none;
  stroke: #247a69;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.athena-quadratic-graph .athena-graph-point {
  fill: #fff;
  stroke: #c46f18;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.athena-quadratic-graph .athena-graph-root {
  fill: #fff;
  stroke: #3f6f9e;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}

.athena-quadratic-graph .athena-graph-label {
  fill: #53616a;
  font-family: Arial, sans-serif;
  font-size: 11px;
  user-select: none;
}

.athena-quadratic-graph .athena-graph-main-label {
  fill: #23313a;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}

@media (max-width: 600px) {
  .athena-quadratic-graphs {
    grid-template-columns: 1fr;
  }
  .athena-quadratic-graph,
  .athena-quadratic-graph svg {
    min-height: 260px;
    height: 260px;
  }
}

@media print {
  .athena-quadratic-graph {
    break-inside: avoid;
    box-shadow: none;
  }
}



.athena-quadratic-graph .athena-graph-axis-label {
  font-family: Arial, sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 15px;
  font-weight: 900;
  font-style: italic;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
  stroke-linejoin: round;
  user-select: none;
  pointer-events: none;
}

.athena-quadratic-graph .athena-graph-axis-label-x {
  fill: #1d4ed8;
}

.athena-quadratic-graph .athena-graph-axis-label-y {
  fill: #b45309;
}

.athena-quadratic-graph .athena-graph-symmetry-connector {
  stroke: #9b79ad;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.athena-quadratic-graph .athena-graph-symmetry-badge,
.athena-quadratic-graph .athena-graph-vertex-badge {
  pointer-events: none;
}

.athena-quadratic-graph .athena-graph-symmetry-badge-bg {
  fill: rgba(255, 255, 255, .96);
  stroke: rgba(126, 74, 151, .42);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.athena-quadratic-graph .athena-graph-symmetry-badge-text {
  fill: #6f3e87;
  font-family: Arial, sans-serif;
  direction: rtl;
  unicode-bidi: plaintext;
  font-size: 11px;
  font-weight: 800;
  user-select: none;
}

.athena-quadratic-graph .athena-graph-vertex-connector {
  stroke: rgba(196, 111, 24, .72);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.athena-quadratic-graph .athena-graph-vertex-badge-bg {
  fill: rgba(255, 255, 255, .97);
  stroke: rgba(196, 111, 24, .42);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.athena-quadratic-graph .athena-graph-vertex-title {
  fill: #9a4f0d;
  font-family: Arial, sans-serif;
  direction: rtl;
  unicode-bidi: plaintext;
  font-size: 11px;
  font-weight: 800;
  user-select: none;
}

.athena-quadratic-graph .athena-graph-vertex-coordinates {
  fill: #3d4650;
  font-family: Arial, sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 11px;
  font-weight: 700;
  user-select: none;
}