#nf2d-root {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.35;
  color: #111;
}

#nf2d-root * {
  box-sizing: border-box;
}

#nf2d-root .nf2d-card {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

#nf2d-root .nf2d-title {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
}

/* Always use the "mobile" stacked layout */
#nf2d-root .nf2d-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
}

#nf2d-root .nf2d-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#nf2d-root .nf2d-mt {
  margin-top: 10px;
}

#nf2d-root .nf2d-mt-sm {
  margin-top: 10px;
}

#nf2d-root label {
  display: block;
  font-size: 12px;
  opacity: .85;
  margin-bottom: 6px;
}

#nf2d-root input,
#nf2d-root select,
#nf2d-root button {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}

#nf2d-root input:focus,
#nf2d-root select:focus {
  outline: 2px solid rgba(0,0,0,.18);
  outline-offset: 1px;
}

#nf2d-root .nf2d-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

#nf2d-root button {
  cursor: pointer;
  background: #111;
  color: #fff;
  border-color: #111;
  transition: transform .03s ease, opacity .15s ease;
}

#nf2d-root button:active {
  transform: translateY(1px);
}

#nf2d-root button.nf2d-secondary {
  background: #fff;
  color: #111;
  border-color: rgba(0,0,0,.2);
}

#nf2d-root button.nf2d-ghost {
  background: #f6f6f6;
  color: #111;
  border-color: rgba(0,0,0,.08);
}

#nf2d-root .nf2d-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

/* Optional: on wider screens, KPIs can use 4 columns without affecting canvas layout */
@media (min-width: 980px) {
  #nf2d-root .nf2d-kpis {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

#nf2d-root .nf2d-kpi {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.06);
}

#nf2d-root .nf2d-kpi-title {
  font-size: 12px;
  opacity: .8;
  margin-bottom: 6px;
}

#nf2d-root .nf2d-kpi-val {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  word-break: break-word;
}

/* Always stacked: canvas block then table block */
#nf2d-root .nf2d-viz {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#nf2d-root .nf2d-canvasWrap {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  overflow: hidden;
  background: #fff;
}

/* Keep canvas reliably visible */
#nf2d-root canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* ----------- SCROLLABLE TABLE ----------- */

#nf2d-root .nf2d-tableWrap {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  width: 100%;
}

#nf2d-root table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

#nf2d-root th,
#nf2d-root td {
  padding: 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-right: 1px solid rgba(0,0,0,.06);
  text-align: right;
  white-space: nowrap;
}

#nf2d-root th:last-child,
#nf2d-root td:last-child {
  border-right: none;
}

#nf2d-root tr:last-child td {
  border-bottom: none;
}

#nf2d-root th {
  background: #f6f6f6;
  font-weight: 700;
  text-align: right;
}

/* ----------- ERROR ----------- */

#nf2d-root .nf2d-err {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, .25);
  background: rgba(220, 38, 38, .06);
  color: #991b1b;
  font-size: 13px;
}

#nf2d-root .nf2d-err[aria-hidden="false"] {
  display: block;
}