/* =========================================================
   ClientSideTools — CSS Subgrid & Grid Gap Visualizer
   ========================================================= */

.grid-preview {
  min-height: 320px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  padding: var(--space-3);
}

.grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: 1px dashed var(--brand-primary);
  border-radius: var(--radius-sm);
  background-color: rgba(13, 148, 136, 0.08);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.grid-subgrid-child {
  display: grid;
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  background-color: rgba(13, 148, 136, 0.05);
  padding: var(--space-2);
}

.grid-subgrid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: rgba(13, 148, 136, 0.12);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}