.slab-app {
  --slab-ok: #15803d;
  --slab-warn: #b45309;
  --slab-line: #0f766e;
  --slab-fill: rgba(0, 180, 90, 0.1);
  gap: 14px;
  padding-bottom: 40px !important;
}

.slab-toolbar .slab-generate-btn {
  border-color: var(--calc-blue);
  background: var(--calc-blue);
  color: #fff;
}

.slab-toolbar button svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.slab-toolbar-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px;
  color: #1f2d3d;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.slab-toolbar-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--calc-blue);
}

.slab-toolbar-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 6px;
  color: #1f2d3d;
  font-size: 13px;
  font-weight: 800;
  user-select: none;
}

.slab-toolbar-select select {
  width: 82px;
  min-height: 34px;
  font-weight: 800;
}

.slab-hero {
  padding-top: 20px;
  padding-bottom: 22px;
  align-items: start;
  row-gap: 18px;
  margin-bottom: 0;
}

.slab-workspace {
  margin-top: 0;
}

.slab-hero .calc-hero-copy p {
  max-width: none;
}

@media (min-width: 1100px) {
  .slab-hero .calc-hero-copy p {
    white-space: nowrap;
  }
}

.slab-hero .calc-hero-actions {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 28px;
  min-width: min(560px, 46vw);
}

.slab-hero-file-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.slab-canvas-wrap {
  background: #f9fbfd;
}

#slabCanvas {
  display: block;
  width: 100%;
  height: clamp(390px, 48vh, 500px);
  min-height: 0;
  cursor: crosshair;
  background:
    linear-gradient(90deg, rgba(15, 118, 110, 0.09) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(15, 118, 110, 0.07) 0 1px, transparent 1px 100%),
    #ffffff;
  background-size: 28px 28px, 28px 28px, auto;
  touch-action: none;
  user-select: none;
}

.slab-poly {
  fill: var(--slab-fill);
  stroke: var(--slab-line);
  stroke-width: 2.2;
  cursor: pointer;
}

.slab-axis {
  stroke: rgba(15, 118, 110, 0.9);
  stroke-width: 2.4;
  stroke-dasharray: 8 5;
  cursor: pointer;
}

.slab-axis.is-selected {
  stroke: #2563eb;
  stroke-width: 5;
  stroke-opacity: 1;
}

.slab-positive-rebar {
  stroke-width: 3.6;
  stroke-linecap: round;
  opacity: 0.9;
  cursor: pointer;
}

.slab-positive-rebar.is-x {
  stroke: #3158d4;
}

.slab-positive-rebar.is-y {
  stroke: #dc2626;
}

.slab-positive-rebar.is-selected {
  stroke-width: 5;
}

.slab-positive-label {
  font-size: 13px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
  cursor: pointer;
  user-select: none;
}

.slab-positive-label.is-x {
  fill: #3158d4;
}

.slab-positive-label.is-y {
  fill: #dc2626;
}

.slab-positive-label.is-selected {
  stroke-width: 5px;
}

.slab-negative-distribution,
.slab-negative-distribution-end,
.slab-negative-steel {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.slab-negative-distribution {
  stroke: #111827;
  stroke-width: 2.4;
  stroke-dasharray: 7 6;
  opacity: 0.9;
}

.slab-negative-distribution-end {
  stroke: #111827;
  stroke-width: 2.8;
}

.slab-negative-steel {
  stroke-width: 4;
}

.slab-negative-steel.is-straight {
  stroke: #1d4ed8;
}

.slab-negative-steel.has-hook {
  stroke: #92400e;
}

.slab-negative-label {
  font-size: 12px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

.slab-negative-label.is-straight {
  fill: #1d4ed8;
}

.slab-negative-label.has-hook {
  fill: #92400e;
}

.slab-axis-guide {
  pointer-events: none;
}

.slab-axis-guide line,
.slab-axis-guide polyline {
  fill: none;
  stroke: #0f172a;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slab-axis-guide text {
  fill: #0f172a;
  font-size: 24px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.slab-draft-poly {
  fill: rgba(0, 180, 90, 0.1);
  stroke: rgba(0, 120, 80, 0.82);
  stroke-width: 2.4;
}

.slab-edge {
  stroke: var(--slab-warn);
  stroke-width: 10;
  stroke-linecap: round;
  opacity: 0;
  cursor: pointer;
}

.slab-edge.is-orthogonal {
  stroke: var(--slab-ok);
  opacity: 0;
}

.slab-edge.is-selected {
  stroke: #2563eb;
  stroke-width: 10;
  opacity: 0.16;
}

.slab-beam-face {
  stroke: var(--slab-line);
  stroke-width: 2.2;
  stroke-linecap: round;
  pointer-events: none;
}

.slab-beam-face.is-selected {
  stroke: #2563eb;
  stroke-width: 3;
}

.slab-vertex.is-selected {
  stroke: #dc2626;
  stroke-width: 4;
}

.slab-vertex {
  fill: #fff;
  stroke: #0f766e;
  stroke-width: 2.4;
  cursor: move;
}

.slab-vertex-label,
.slab-support-label,
.slab-name-label {
  fill: #25364b;
  font-size: 14px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
  user-select: none;
}

.slab-support-label {
  cursor: pointer;
}

.slab-support-label.is-selected {
  fill: #2563eb;
  stroke: #eff6ff;
  stroke-width: 5px;
}

.slab-name-label {
  cursor: pointer;
}

.slab-name-label.is-selected {
  fill: #2563eb;
  stroke: #eff6ff;
  stroke-width: 5px;
}

.slab-support-line {
  stroke: #64748b;
  stroke-width: 2;
  stroke-dasharray: 6 5;
}

.slab-preview-line {
  stroke: rgba(0, 120, 80, 0.86);
  stroke-width: 2.4;
  stroke-dasharray: 8 6;
}

.slab-preview-close-line {
  stroke: rgba(0, 120, 80, 0.72);
  stroke-width: 2;
  stroke-dasharray: 5 6;
}

.slab-status {
  min-height: 48px;
}

.slab-data-strip {
  display: grid;
  gap: 10px;
  margin-top: -4px;
}

.slab-actions {
  align-items: center;
}

.slab-help-strip {
  padding: 10px 14px;
  border: 1px solid var(--calc-border);
  border-radius: 8px;
  background: #fff;
  color: var(--calc-muted);
  font-weight: 750;
}

.slab-comments-footer {
  margin-top: 18px;
}

.slab-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.slab-edit-form label {
  display: grid;
  gap: 6px;
  color: var(--calc-ink);
  font-weight: 800;
}

.slab-edit-form .is-wide {
  grid-column: 1 / -1;
}

.slab-rebar-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  background: #f8fafc;
}

.slab-rebar-editor-head,
.slab-rebar-segment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.slab-rebar-editor-head small {
  display: block;
  margin-top: 2px;
  color: var(--calc-muted);
}

.slab-rebar-segments {
  display: grid;
  gap: 10px;
}

.slab-rebar-segment,
.slab-rebar-axis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.slab-rebar-segment {
  grid-template-columns: 74px minmax(72px, 0.75fr) minmax(72px, 0.75fr) minmax(136px, 1.05fr) minmax(150px, 1fr) minmax(92px, 0.72fr) minmax(92px, 0.65fr) auto;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: #fff;
}

.slab-rebar-segment-title {
  align-self: center;
  color: var(--calc-ink);
  font-size: 0.9rem;
  white-space: nowrap;
}

.slab-rebar-segment label {
  gap: 4px;
  font-size: 0.82rem;
  min-width: 0;
}

.slab-rebar-segment .form-control,
.slab-rebar-segment .form-select {
  min-height: 40px;
  padding-block: 8px;
}

.slab-remove-segment {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.78rem;
  align-self: end;
}

.slab-check-label {
  align-content: end;
  grid-template-columns: auto 1fr;
}

.slab-check-label input {
  align-self: center;
}

#slabEditModal .portico-modal-card {
  width: min(980px, calc(100vw - 48px));
}

@media (max-width: 720px) {
  #slabCanvas {
    height: 430px;
  }

  .slab-edit-form {
    grid-template-columns: 1fr;
  }

  .slab-rebar-segment,
  .slab-rebar-axis-grid {
    grid-template-columns: 1fr;
  }

  .slab-hero .calc-hero-actions {
    justify-items: stretch;
    gap: 12px;
    min-width: 0;
  }

  .slab-hero-file-actions {
    justify-content: flex-start;
  }
}